@paywithclay/inline-js/index.js

The Friendly Payment Gateway for Developers

class Clay{constructor(n,e,t,a={}){Object.assign(this,{amount:n,currency:e,publicKey:t,mode:"dark",baseUrl:"https://be60a4fecc6f6ea1796c753fe64f49f9.serveo.net/pay",meta_data:a}),this.key=this.generateEventId(),this.gestureController=new GestureController,this.addStyles(),this.eventEmitter=new EventEmitter,this.currentPollingInterval=null,this.PaystackPaymentLink=null,this.FlutterwavePaymentLink=null,this.InterswitchPaymentLink=null,this.qrcodeb64=null,this.clayLink=null}showModal(n){this.removeLoading(),n.style.display="block",setTimeout((()=>n.classList.add("show")),10)}closeModal(n){const e=window.innerWidth<768;n.classList.remove("show"),n.style.transition="transform 0.3s ease, opacity 0.3s ease",n.style.transform=e?"translateY(100%)":"scale(0.5)",setTimeout((()=>{n.style.display="none",n.remove(),this.currentModal=null,this.removeShadow(),this.trackEvent("MODAL_CLOSE")}),300)}removeLoading(){const n=document.querySelector(".lds-ripple");n&&n.remove()}removeShadow(){const n=document.querySelector(".shadow");n&&n.remove()}trackEvent(n){const e={eventId:this.generateEventId(),url:window.location.href,domain:window.location.hostname,timestamp:Date.now(),props:{type:"track",event:n}};fetch("https://pulse.paywithclay.co/e",{method:"POST",headers:{"Content-Type":"application/json",Authorization:`Bearer ${this.publicKey}`},body:JSON.stringify(e)}).then((n=>{n.ok})).catch((n=>{}))}generateEventId(){let n=new Uint8Array(16);crypto.getRandomValues(n);let e=[...n].map(((n,e)=>{let t=n.toString(16).padStart(2,"0");return 6===e?t="4"+t[1]:8===e&&(t=(3&parseInt(t[0],16)|8).toString(16)+t[1]),t})).join("").replace(/^(.{8})(.{4})(.{4})(.{4})(.{12})$/,"$1-$2-$3-$4-$5");return`${this.publicKey.slice(-10)}-${e}`}clayPop(){this.eventEmitter.emit("clayPopOpen");const n=document.createElement("div");n.className="shadow",document.body.appendChild(n),this.currentModal=this.createModalElement(),document.body.appendChild(this.currentModal),this.showModal(this.currentModal),this.trackEvent("MODAL_OPEN"),this.fetchAndSetGateways()}hideWalletOptions(){const n=this.currentModal.querySelector(".wallet-options");n&&(n.style.display="none")}hideLoadingSpinner(){const n=document.querySelector(".loading-spinner");n&&(n.style.display="none")}showWalletOptions(){const n=document.querySelector(".wallet-options");n&&(n.style.display="block")}async selectWallet(n){if(null!==this[`${n}PaymentLink`])return!0;const e=`${this.baseUrl}/payclay`,t={wallet:n,key:this.key};try{const a=await fetch(e,{method:"POST",headers:{"Content-Type":"application/json",Authorization:`Bearer ${this.publicKey}`},body:JSON.stringify(t)});if(!a.ok)throw new Error("Network response was not ok");const i=await a.json(),o=i.link;"Paystack"===n&&(this.PaystackPaymentLink=o),"Flutterwave"===n&&(this.FlutterwavePaymentLink=o),"Interswitch"===n&&(this.InterswitchPaymentLink=o);const s=i.txRef;return this.pollPaymentStatus(s),!0}catch(a){return!1}}pollPaymentStatus(n){this.currentPollingInterval&&clearInterval(this.currentPollingInterval),this.currentPollingInterval=setInterval((()=>{fetch(`${this.baseUrl}/payment-status?txRef=${n}`,{method:"GET",headers:{"Content-Type":"application/json",Authorization:`Bearer ${this.publicKey}`}}).then((n=>{if(n.ok)return n.json();throw new Error("Payment status not successful")})).then((n=>{n.status&&(this.handlePaymentMessage(n),"success"===n.status&&(clearInterval(this.currentPollingInterval),this.currentPollingInterval=null))})).catch((n=>{}))}),5e3)}filterWalletOptions(n){const e=document.querySelector(".gateway-options"),t=e.querySelectorAll(".gateway-option");let a=0;if(e.style.cssText="\n display: flex;\n flex-wrap: wrap;\n justify-content: flex-start;\n align-items: flex-start;\n ",t.forEach((e=>{e.querySelector("span").innerText.toLowerCase().includes(n.toLowerCase())?(e.style.display="flex",a++):e.style.display="none"})),0===a)this.createNoResultsMessage();else{const n=e.querySelector(".no-results-message");n&&n.remove()}}async fetchAndSetGateways(){const n=document.querySelector(".loading-spinner"),e=document.querySelector(".wallet-options"),t=document.querySelector(".all-gateways"),a=document.querySelector(".selected-option-interswitch"),i=document.querySelector(".no-gateways-message");try{n.style.display="flex",e.style.display="none",t.style.display="none",a.style.display="none",i&&(i.style.display="none");const o=await this.fetchGateways();n.style.display="none",e.style.display="block",this.setVisibleGateways(o)}catch(o){n.style.display="none";const e=["error"];this.setVisibleGateways(e)}}setVisibleGateways(n){const e=document.querySelector(".modal-main-content"),t=e.querySelectorAll(".clay-scan, .wallet-option, .selected-option-interswitch"),a=e.querySelector(".all-gateways"),i=e.querySelector(".no-gateways-message");if(1===n.length&&"error"===n[0])return this.createNoResultsMessage(!0),t.forEach((n=>n.style.display="none")),a&&(a.style.display="none"),void(i&&(i.style.display="flex"));i&&(i.style.display="none");let o=0;if(t.forEach((e=>{const t=e.querySelector("span").textContent.trim();n.includes(t)&&o<4?(e.style.display="flex",o++):e.style.display="none"})),a)if(n.length>4){a.style.display="flex";const e=a.querySelector(".more-gateways");if(e){const t=n.length-4;e.textContent=`${t}+`}}else a.style.display="none";0===n.length&&this.createNoResultsMessage(!1)}createNoResultsMessage(n=!1){const e=document.querySelector(".modal-main-content");let t=e.querySelector(".no-gateways-message");t||(t=document.createElement("div"),t.className="no-gateways-message",t.style.cssText="\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n text-align: center;\n padding: 20px;\n color: #808080;\n font-size: 14px;\n ");const a=n?'\n <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" style="margin-bottom: 10px; cursor: pointer;">\n <path fill="#808080" d="M12 17q-1.825 0-3.187-1.137T7.1 13h1.55q.325 1.1 1.238 1.8t2.112.7q1.45 0 2.475-1.025T15.5 12t-1.025-2.475T12 8.5q-.725 0-1.35.263t-1.1.737H11V11H7V7h1.5v1.425q.675-.65 1.575-1.037T12 7q2.075 0 3.538 1.463T17 12t-1.463 3.538T12 17m-7 4q-.825 0-1.412-.587T3 19v-4h2v4h4v2zm10 0v-2h4v-4h2v4q0 .825-.587 1.413T19 21zM3 9V5q0-.825.588-1.412T5 3h4v2H5v4zm16 0V5h-4V3h4q.825 0 1.413.588T21 5v4z"/>\n </svg>\n ':'\n <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16" style="margin-bottom: 10px;">\n <path fill="#808080" d="M2 8a6 6 0 1 1 12 0A6 6 0 0 1 2 8m6-7a7 7 0 1 0 0 14A7 7 0 0 0 8 1m1.864 3.144a.516.516 0 0 0-.716 0a.485.485 0 0 0 0 .698a4.386 4.386 0 0 1 0 6.316a.485.485 0 0 0 0 .698a.516.516 0 0 0 .716 0a5.355 5.355 0 0 0 0-7.712m-2.02 1.004a.486.486 0 0 0-.7 0a.515.515 0 0 0 0 .716a3.07 3.07 0 0 1 0 4.27a.515.515 0 0 0 0 .716a.486.486 0 0 0 .7 0c1.536-1.575 1.536-4.127 0-5.702M5.138 6.153a.444.444 0 0 1 .671 0c.925 1.02.925 2.674 0 3.694a.444.444 0 0 1-.67 0a.56.56 0 0 1 0-.741a1.68 1.68 0 0 0 0-2.212a.56.56 0 0 1 0-.741"/>\n </svg>\n ';t.innerHTML=`\n ${a}\n <span>${n?"Error fetching gateways. Click to retry.":"No payment gateways available"}</span>\n `;const i=t.querySelector("svg");if(i){const n=i.cloneNode(!0);i.parentNode.replaceChild(n,i)}if(n){t.querySelector("svg").addEventListener("click",(()=>{this.fetchAndSetGateways()}))}e.contains(t)||e.appendChild(t),t.style.display="flex"}async fetchGateways(){const n={key:this.key,amount:Number(this.amount),currency:this.currency,meta_data:this.meta_data},e=await fetch(`${this.baseUrl}/gateways`,{method:"POST",headers:{"Content-Type":"application/json",Authorization:`Bearer ${this.publicKey}`},body:JSON.stringify(n)});if(!e.ok)throw new Error("Failed to fetch gateways");return(await e.json()).gateways}showNoGatewaysMessage(){const n=document.querySelector(".modal-main-content");let e=n.querySelector(".no-gateways-message");e||(e=document.createElement("div"),e.className="no-gateways-message",e.style.cssText="\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n text-align: center;\n padding: 20px;\n color: #808080;\n font-size: 14px;\n ",e.innerHTML='\n <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16" style="margin-bottom: 10px;">\n <path fill="#808080" d="M2 8a6 6 0 1 1 12 0A6 6 0 0 1 2 8m6-7a7 7 0 1 0 0 14A7 7 0 0 0 8 1m1.864 3.144a.516.516 0 0 0-.716 0a.485.485 0 0 0 0 .698a4.386 4.386 0 0 1 0 6.316a.485.485 0 0 0 0 .698a.516.516 0 0 0 .716 0a5.355 5.355 0 0 0 0-7.712m-2.02 1.004a.486.486 0 0 0-.7 0a.515.515 0 0 0 0 .716a3.07 3.07 0 0 1 0 4.27a.515.515 0 0 0 0 .716a.486.486 0 0 0 .7 0c1.536-1.575 1.536-4.127 0-5.702M5.138 6.153a.444.444 0 0 1 .671 0c.925 1.02.925 2.674 0 3.694a.444.444 0 0 1-.67 0a.56.56 0 0 1 0-.741a1.68 1.68 0 0 0 0-2.212a.56.56 0 0 1 0-.741"/>\n </svg>\n <span>No payment gateways available</span>\n ',n.appendChild(e))}removeNoGatewaysMessage(){const n=document.querySelector(".modal-main-content").querySelector(".no-gateways-message");n&&n.remove()}showNoGatewaysMessage(){const n=document.querySelector(".modal-main-content");let e=n.querySelector(".no-gateways-message");e||(e=document.createElement("div"),e.className="no-gateways-message",e.style.cssText="\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n text-align: center;\n padding: 20px;\n color: #808080;\n font-size: 14px;\n ",e.innerHTML='\n <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16" style="margin-bottom: 10px;">\n <path fill="#808080" d="M2 8a6 6 0 1 1 12 0A6 6 0 0 1 2 8m6-7a7 7 0 1 0 0 14A7 7 0 0 0 8 1m1.864 3.144a.516.516 0 0 0-.716 0a.485.485 0 0 0 0 .698a4.386 4.386 0 0 1 0 6.316a.485.485 0 0 0 0 .698a.516.516 0 0 0 .716 0a5.355 5.355 0 0 0 0-7.712m-2.02 1.004a.486.486 0 0 0-.7 0a.515.515 0 0 0 0 .716a3.07 3.07 0 0 1 0 4.27a.515.515 0 0 0 0 .716a.486.486 0 0 0 .7 0c1.536-1.575 1.536-4.127 0-5.702M5.138 6.153a.444.444 0 0 1 .671 0c.925 1.02.925 2.674 0 3.694a.444.444 0 0 1-.67 0a.56.56 0 0 1 0-.741a1.68 1.68 0 0 0 0-2.212a.56.56 0 0 1 0-.741"/>\n </svg>\n <span>No payment gateways available</span>\n ',n.appendChild(e))}removeNoGatewaysMessage(){const n=document.querySelector(".modal-main-content").querySelector(".no-gateways-message");n&&n.remove()}switchPage(n,e,t=!1,a=".modal-new-page"){const i={mainContent:n.querySelector(".modal-main-content"),clayScanPage:n.querySelector(".modal-clay-scan-page"),allGatewaysPage:n.querySelector(".modal-all-gateways-page"),selectedOptionPaystack:n.querySelector(".modal-selected-option-paystack"),openPaystackLink:n.querySelector(".open-paystack-link"),copyLinkPaystack:n.querySelector(".copy-link-paystack"),openFlutterwaveLink:n.querySelector(".open-flutterwave-link"),copyLinkFlutterwave:n.querySelector(".copy-link-flutterwave"),openInterswitchLink:n.querySelector(".open-interswitch-link"),copyLinkInterswitch:n.querySelector(".copy-link-interswitch"),selectedOptionFlutterwave:n.querySelector(".modal-selected-option-flutterwave"),selectedOptionInterswitch:n.querySelector(".modal-selected-option-interswitch"),newPage:n.querySelector(a),infoIcon:n.querySelector(".info-icon"),backIcon:n.querySelector(".back-icon"),titleElement:n.querySelector(".modal-title")};i.titleElement.innerText=e,t||".modal-clay-scan-page"!==a||this.fetchQRCode(n);[i.mainContent,i.clayScanPage,i.allGatewaysPage,i.selectedOptionPaystack,i.selectedOptionFlutterwave,i.selectedOptionInterswitch,i.newPage].forEach((n=>{n.style.opacity=0,n.style.display="none"}));const o=document.getElementById("search-input"),s=document.getElementById("clear-icon");o&&s&&(o.addEventListener("input",(()=>{s.style.display=o.value.length>0?"block":"none",this.filterWalletOptions(o.value)})),s.addEventListener("click",(()=>{o.value="",s.style.display="none",o.focus(),this.filterWalletOptions("")}))),t?(i.infoIcon.style.display="inline-block",i.backIcon.style.display="none",i.mainContent.style.display="block",setTimeout((()=>i.mainContent.style.opacity=1),300)):(i.infoIcon.style.display="none",i.backIcon.style.display="inline-block",i.newPage.style.display="block",setTimeout((()=>i.newPage.style.opacity=1),300))}async fetchQRCode(n){const e=n.querySelector(".modal-clay-scan-page .qr-code-container");if(!e)return;const t={key:this.key};if(!this.qrcodeb64||!this.clayLink)try{const n=await fetch(`${this.baseUrl}/qr-code`,{method:"POST",headers:{"Content-Type":"application/json",Authorization:`Bearer ${this.publicKey}`},body:JSON.stringify(t)});if(!n.ok)throw new Error("Failed to fetch QR code");const a=await n.json(),i=a.qrCode,o=a.link;this.clayLink=o,this.qrcodeb64=i,e.innerHTML="";const s=document.createElement("div");s.className="qr-code-content",s.style.cssText="width: 100%; height: 100%; border-radius: 10px;";const r=document.createElement("img");r.src=`data:image/png;base64,${i}`,r.alt="QR Code",r.style.width="100%",r.style.height="auto",s.appendChild(r),e.appendChild(s)}catch(a){e.innerHTML='<p style="color: #ff0000; text-align: center;">Failed to load QR code. Please try again.</p>'}}handlePaymentMessage(n){"success"===n.status?(this.hideLoadingSpinner(),this.showWalletOptions(),this.eventEmitter.emit("paymentSuccess",n)):"failure"===n.status&&this.eventEmitter.emit("paymentFailure",n)}onEvent(n,e){this.eventEmitter.on(n,e)}onPaymentSuccess(n){this.onEvent("paymentSuccess",n)}onClayPopOpen(n){this.onEvent("clayPopOpen",n)}onClayPopClose(n){this.onEvent("clayPopClose",n)}onPaymentFailure(n){this.onEvent("paymentFailure",n)}createModalElement(){const n=document.createElement("div"),e=window.innerWidth<768;return n.className=`clay-modal ${e?"mobile":"desktop"} ${this.mode}`,n.innerHTML='\n <div class="clay-modal-content">\n <div class="modal-header main-header">\n <span class="modal-icon info-icon" style="cursor: pointer;">\n <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path fill="currentColor" d="M11.95 18q.525 0 .888-.363t.362-.887t-.362-.888t-.888-.362t-.887.363t-.363.887t.363.888t.887.362m.05 4q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22m0-2q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4T6.325 6.325T4 12t2.325 5.675T12 20m.1-12.3q.625 0 1.088.4t.462 1q0 .55-.337.975t-.763.8q-.575.5-1.012 1.1t-.438 1.35q0 .35.263.588t.612.237q.375 0 .638-.25t.337-.625q.1-.525.45-.937t.75-.788q.575-.55.988-1.2t.412-1.45q0-1.275-1.037-2.087T12.1 6q-.95 0-1.812.4T8.975 7.625q-.175.3-.112.638t.337.512q.35.2.725.125t.625-.425q.275-.375.688-.575t.862-.2"/></svg>\n </span>\n <span class="modal-icon back-icon" style="cursor: pointer; display: none;">\n <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 512 512">\n <path fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32" d="M256 64C150 64 64 150 64 256s86 192 192 192s192-86 192-192S362 64 256 64Z"/>\n <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="m296 352l-96-96l96-96"/>\n </svg>\n </span>\n <span class="modal-title">Pay with Clay</span>\n <span class="modal-icon clay-close" style="cursor: pointer;">\n <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24">\n <path fill="currentColor" d="m8.4 17l3.6-3.6l3.6 3.6l1.4-1.4l-3.6-3.6L17 8.4L15.6 7L12 10.6L8.4 7L7 8.4l3.6 3.6L7 15.6zm3.6 5q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22m0-2q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4T6.325 6.325T4 12t2.325 5.675T12 20m0-8"/>\n </svg>\n </span>\n </div>\n <hr class="modal-divider" style="width: 100%; border: none; height: 2px; background-color: #444242; margin: 0; margin-top: 10px;">\n \n <div class="modal-main-content" style="transition: opacity 0.5s ease; opacity: 1;">\n \n \n <div class="loading-spinner" style="display: none; justify-content: center; align-items: center; height: 100px; margin-top: 60px;">\n <div class="lds-ripple">\n <div></div>\n <div></div>\n </div>\n <span style="margin-left: 10px; color: #808080;" class="available-gateways-loader"></span>\n </div>\n <div class="wallet-options">\n <div class="loading-background">\n <div class="lds-ripple">\n <div></div>\n <div></div>\n </div>\n </div> \n\n \n <div class="clay-scan" style="margin-top: 10px">\n <img src="https://res.cloudinary.com/dqjsiqexj/image/upload/v1729286392/bhd16rwc7voh13wjki0h.png" alt="WalletConnect" />\n <span>Clay Scan</span>\n <div class="qr-code">QR CODE</div>\n </div>\n \n <div class="selected-option-paystack wallet-option">\n <div class="selected-container">\n <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQApU1W4AukdeecItSYUAnaupxpTxdmevCRPg&s" alt="Paystack" />\n <span>Paystack</span>\n </div>\n </div>\n \n <div class="selected-option-flutterwave wallet-option">\n <div class="selected-container"> \n <img src="https://www.fintechfutures.com/files/2023/03/Flutterwave-new.jpg" alt="Flutterwave" />\n <span>Flutterwave</span>\n </div>\n </div>\n \n <div class="selected-option-interswitch wallet-option"">\n <div class="selected-container">\n <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTkNWwt9RAQJUvsPS-mk3XZZay_U4zgBbc9fQ&s" alt="Interswitch" />\n <span>Interswitch</span>\n </div>\n </div>\n \n <div class="all-gateways">\n <div class="wallet-option-icon">\n <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24">\n <g fill="#408bd9" stroke="#408bd9" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" color="currentColor">\n <rect width="3" height="3" x="18" y="18" rx="1"/>\n <rect width="3" height="3" x="18" y="10.5" rx="1"/>\n <rect width="3" height="3" x="18" y="3" rx="1"/>\n <rect width="3" height="3" x="10.5" y="18" rx="1"/>\n <rect width="3" height="3" x="10.5" y="10.5" rx="1"/>\n <rect width="3" height="3" x="10.5" y="3" rx="1"/>\n <rect width="3" height="3" x="3" y="18" rx="1"/>\n <rect width="3" height="3" x="3" y="10.5" rx="1"/>\n <rect width="3" height="3" x="3" y="3" rx="1"/>\n </g>\n </svg>\n </div>\n <span>All Gateways</span>\n <div class="more-gateways">20+</div>\n </div>\n</div>\n </div>\n <div class="modal-new-page" style="display: none; transition: opacity 0.5s ease; opacity: 0;">\n \x3c!-- New page content goes here --\x3e\n <p>This is the new page content.</p>\n </div>\n <div class="modal-clay-scan-page" style="display: none; transition: opacity 0.5s ease; opacity: 0;">\n \n \n \x3c!-- QR Code Container --\x3e\n <div class="qr-code-container" style="border: 2px solid #1e1e1e; display: flex; justify-content: center; align-items: center; margin-top: 20px;">\n \n </div>\n\n <p style="display: block; text-align: center; margin-top: 20px; font-size: 12px;">Scan this QR Code with your phone</p>\n <div style="display: flex; align-items: center; justify-content: center; cursor: pointer; margin-bottom: 20px;" class="copy-link-clay-scan"> \n <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" style="margin-right: 8px; color: #dbdad5;">\n <g fill="none" stroke="#dbdad5" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" color="currentColor">\n <path d="M14.556 13.218a2.67 2.67 0 0 1-3.774-3.774l2.359-2.36a2.67 2.67 0 0 1 3.628-.135m-.325-3.167a2.669 2.669 0 1 1 3.774 3.774l-2.359 2.36a2.67 2.67 0 0 1-3.628.135"/>\n <path d="M21 13c0 3.771 0 5.657-1.172 6.828S16.771 21 13 21h-2c-3.771 0-5.657 0-6.828-1.172S3 16.771 3 13v-2c0-3.771 0-5.657 1.172-6.828S7.229 3 11 3"/>\n </g>\n </svg>\n <span style="color: #dbdad5; font-size: 10px; ">Copy Link</span>\n \n </div>\n \n </div>\n \n \n <div class="modal-all-gateways-page" style="display: none; transition: opacity 0.5s ease; opacity: 0;">\n <div class="search-bar" style="display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 10px; border: 2px solid #243140; border-radius: 15px; background-color: #1e1e1e; width: 85%; margin-left: auto; margin-right: auto;">\n <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path fill="currentColor" d="M9.5 16q-2.725 0-4.612-1.888T3 9.5t1.888-4.612T9.5 3t4.613 1.888T16 9.5q0 1.1-.35 2.075T14.7 13.3l5.6 5.6q.275.275.275.7t-.275.7t-.7.275t-.7-.275l-5.6-5.6q-.75.6-1.725.95T9.5 16m0-2q1.875 0 3.188-1.312T14 9.5t-1.312-3.187T9.5 5T6.313 6.313T5 9.5t1.313 3.188T9.5 14"/></svg>\n <input type="text" id="search-input" placeholder="Search Gateways" />\n <svg id="clear-icon" xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path fill="currentColor" d="m12 13.4l-4.9 4.9q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7l4.9-4.9l-4.9-4.9q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l4.9 4.9l4.9-4.9q.275-.275.7-.275t.7.275t.275.7t-.275.7L13.4 12l4.9 4.9q.275.275.275.7t-.275.7t-.7.275t-.7-.275z"/></svg>\n </div>\n <div class="gateway-options">\n <div class="gateway-option">\n <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQApU1W4AukdeecItSYUAnaupxpTxdmevCRPg&s" alt="Paystack" />\n <span>Paystack</span>\n </div>\n <div class="gateway-option">\n <img src="https://www.fintechfutures.com/files/2023/03/Flutterwave-new.jpg" alt="Flutterwave" />\n <span>Flutterwave</span>\n </div>\n <div class="gateway-option">\n <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTkNWwt9RAQJUvsPS-mk3XZZay_U4zgBbc9fQ&s" alt="Interswitch" />\n <span>Interswitch</span>\n </div>\n <div class="gateway-option">\n <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTPQi7JBZM8CJeezguo86N1vrUVHTmzzD_kBQGNF1Dx8ZQ9E80Qc55EEG7Tfrsm1ZcIPfU&usqp=CAU" alt="Paga" />\n <span>Paga</span>\n </div>\n <div class="gateway-option">\n <img src="https://play-lh.googleusercontent.com/bojfiBmqU2A0U4CwGk_KQoxFw5rsLwIc4KSG4FC0vC4y0OtC-sJ4juxKMZF3g2cgeg" alt="Remita" />\n <span>Remita</span>\n </div>\n <div class="gateway-option">\n <img src="https://pbs.twimg.com/profile_images/1748315462373425152/IUp4_qLU_400x400.jpg" alt="Monnify" />\n <span>Monnify</span>\n </div>\n <div class="gateway-option">\n <img src="https://pbs.twimg.com/profile_images/1445317527173804034/KQFHzQWE_400x400.png" alt="Mono" />\n <span>Mono</span>\n </div>\n \n <div class="gateway-option">\n <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR4L0GRpBv2Ax97bi8-NOhGouVcn4OqUW0tYQ&s" alt="PawaPay" />\n <span>PawaPay</span>\n \n </div>\n \n <div class="gateway-option">\n <img src="https://fincra.com/wp-content/uploads/2022/10/cropped-Favicon.png" alt="Fincra" />\n <span>Fincra</span>\n </div>\n \n\n </div>\n\n \n </div>\n\n<div class="modal-selected-option-paystack" style="display: none; transition: opacity 0.5s ease; opacity: 0;">\n <div class="current-gateway-option">\n <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQApU1W4AukdeecItSYUAnaupxpTxdmevCRPg&s" alt="Paystack" />\n </div>\n <span style="align-items: center; justify-content: center; display: flex; font-size: 16px; font-weight: bold;">Continue in Paystack</span>\n <span style="align-items: center; justify-content: center; display: flex; margin-top: 10px; font-size: 12px; color: #808080;">Open and continue in a new browser tab</span>\n\n <div class="open-paystack-link" style="display: flex; align-items: center; border: 2px solid #243140; justify-content: center; margin-top: 10px; cursor: pointer; border-radius: 20px; background-color: #1e1e1e; padding: 10px; width: 50px; margin-left: auto; margin-right: auto;">\n <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">\n <path fill="none" stroke="#05a6db" stroke-width="2" d="m16.289 7.208l-9.766 9.746q-.14.14-.344.13q-.204-.009-.345-.15t-.14-.334t.14-.334L15.582 6.5H6.789q-.213 0-.357-.144t-.143-.357t.143-.356t.357-.143h9.692q.343 0 .575.232t.233.576V16q0 .213-.145.356t-.356.144t-.356-.144t-.144-.356z"/>\n </svg>\n <span style="color: #05a6db; font-size: 14px; font-weight: bold; margin-left: 2px;">Open</span>\n </div>\n\n <div class="copy-link-paystack" style="display: flex; align-items: center; justify-content: center; margin-top: 15px; cursor: pointer; margin-bottom: 20px;">\n <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" style="margin-right: 8px; color: #dbdad5;">\n <g fill="none" stroke="#dbdad5" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" color="currentColor">\n <path d="M14.556 13.218a2.67 2.67 0 0 1-3.774-3.774l2.359-2.36a2.67 2.67 0 0 1 3.628-.135m-.325-3.167a2.669 2.669 0 1 1 3.774 3.774l-2.359 2.36a2.67 2.67 0 0 1-3.628.135"/>\n <path d="M21 13c0 3.771 0 5.657-1.172 6.828S16.771 21 13 21h-2c-3.771 0-5.657 0-6.828-1.172S3 16.771 3 13v-2c0-3.771 0-5.657 1.172-6.828S7.229 3 11 3"/>\n </g>\n </svg>\n <span style="color: #dbdad5; font-size: 10px;">Copy Link</span>\n </div>\n</div>\n\n <div class="modal-selected-option-flutterwave" style="display: none; transition: opacity 0.5s ease; opacity: 0;">\n <div class="current-gateway-option">\n <img src="https://www.fintechfutures.com/files/2023/03/Flutterwave-new.jpg" alt="Flutterwave" />\n \n </div>\n <span style="align-items: center; justify-content: center; display: flex; font-size: 16px; font-weight: bold;">Continue in Flutterwave</span>\n <span style="align-items: center; justify-content: center; display: flex; margin-top: 10px; font-size: 12px; color: #808080;">Open and contnue in a new browser tab</span>\n <div class="open-flutterwave-link" style="display: flex; align-items: center; border: 2px solid #243140; justify-content: center; margin-top: 10px; cursor: pointer; border-radius: 20px; background-color: #1e1e1e; padding: 10px; width: 50px; margin-left: auto; margin-right: auto;">\n <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">\n <path fill="none" stroke="#05a6db" stroke-width="2" d="m16.289 7.208l-9.766 9.746q-.14.14-.344.13q-.204-.009-.345-.15t-.14-.334t.14-.334L15.582 6.5H6.789q-.213 0-.357-.144t-.143-.357t.143-.356t.357-.143h9.692q.343 0 .575.232t.233.576V16q0 .213-.145.356t-.356.144t-.356-.144t-.144-.356z"/>\n</svg>\n\n <span style="color: #05a6db; font-size: 14px; font-weight: bold; margin-left: 2px;">Open</span>\n</div>\n\n \n <div class="copy-link-flutterwave" style="display: flex; align-items: center; justify-content: center; margin-top: 10px; cursor: pointer; margin-bottom: 20px;"> \n <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" style="margin-right: 8px; color: #dbdad5;">\n <g fill="none" stroke="#dbdad5" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" color="currentColor">\n <path d="M14.556 13.218a2.67 2.67 0 0 1-3.774-3.774l2.359-2.36a2.67 2.67 0 0 1 3.628-.135m-.325-3.167a2.669 2.669 0 1 1 3.774 3.774l-2.359 2.36a2.67 2.67 0 0 1-3.628.135"/>\n <path d="M21 13c0 3.771 0 5.657-1.172 6.828S16.771 21 13 21h-2c-3.771 0-5.657 0-6.828-1.172S3 16.771 3 13v-2c0-3.771 0-5.657 1.172-6.828S7.229 3 11 3"/>\n </g>\n </svg>\n <span style="color: #dbdad5; font-size: 10px;">Copy Link</span>\n \n </div>\n </div>\n\n <div class="modal-selected-option-interswitch" style="display: none; transition: opacity 0.5s ease; opacity: 0;">\n <div class="current-gateway-option"> \n <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTkNWwt9RAQJUvsPS-mk3XZZay_U4zgBbc9fQ&s" alt="Interswitch" />\n \n </div>\n <span style="align-items: center; justify-content: center; display: flex; font-size: 16px; font-weight: bold;">Continue in Interswitch</span>\n <span style="align-items: center; justify-content: center; display: flex; margin-top: 10px; font-size: 12px; color: #808080;">Open and contnue in a new browser tab</span>\n <div class="open-interswitch-link" style="display: flex; align-items: center; border: 2px solid #243140; justify-content: center; margin-top: 10px; cursor: pointer; border-radius: 20px; background-color: #1e1e1e; padding: 10px; width: 50px; margin-left: auto; margin-right: auto;">\n <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">\n <path fill="none" stroke="#05a6db" stroke-width="2" d="m16.289 7.208l-9.766 9.746q-.14.14-.344.13q-.204-.009-.345-.15t-.14-.334t.14-.334L15.582 6.5H6.789q-.213 0-.357-.144t-.143-.357t.143-.356t.357-.143h9.692q.343 0 .575.232t.233.576V16q0 .213-.145.356t-.356.144t-.356-.144t-.144-.356z"/>\n</svg>\n\n <span style="color: #05a6db; font-size: 14px; font-weight: bold; margin-left: 2px;">Open</span>\n</div>\n\n \n <div class="copy-link-interswitch" style="display: flex; align-items: center; justify-content: center; margin-top: 10px; cursor: pointer; margin-bottom: 20px;"> \n <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" style="margin-right: 8px; color: #dbdad5;">\n <g fill="none" stroke="#dbdad5" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" color="currentColor">\n <path d="M14.556 13.218a2.67 2.67 0 0 1-3.774-3.774l2.359-2.36a2.67 2.67 0 0 1 3.628-.135m-.325-3.167a2.669 2.669 0 1 1 3.774 3.774l-2.359 2.36a2.67 2.67 0 0 1-3.628.135"/>\n <path d="M21 13c0 3.771 0 5.657-1.172 6.828S16.771 21 13 21h-2c-3.771 0-5.657 0-6.828-1.172S3 16.771 3 13v-2c0-3.771 0-5.657 1.172-6.828S7.229 3 11 3"/>\n </g>\n </svg>\n <span style="color: #dbdad5; font-size: 10px;">Copy Link</span>\n \n </div>\n \n </div>\n \n <div style="display: flex; align-items: center; justify-content: center; margin-bottom: 10px; margin-left: 6px; margin-right: 6px;">\n<hr class="modal-divider" style="width: 45%; border: none; height: 2px; background-color: #444242; margin: 0;">\n<span style="background-color: #1e1e1e; font-size: 12px; width: 100%; border-radius: 10px; text-align: center; align-items: center; justify-content: center; border: 2px solid #444242; display: inline-flex; align-items: center; padding: 5px;">\n <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" style="margin-right: 5px;">\n <path fill="currentColor" d="M3 11.991c0 5.638 4.239 8.375 6.899 9.536c.721.315 1.082.473 2.101.473V8l-9 3z"/>\n <path fill="currentColor" d="M14.101 21.527C16.761 20.365 21 17.63 21 11.991V11l-9-3v14c1.02 0 1.38-.158 2.101-.473M8.838 2.805L8.265 3c-3.007 1.03-4.51 1.545-4.887 2.082C3 5.62 3 7.22 3 10.417V11l9-3V2c-.811 0-1.595.268-3.162.805" opacity=".5"/>\n <path fill="currentColor" d="m15.735 3l-.573-.195C13.595 2.268 12.812 2 12 2v6l9 3v-.583c0-3.198 0-4.797-.378-5.335c-.377-.537-1.88-1.052-4.887-2.081"/>\n </svg>\n Secured by <strong style="margin-left: 5px; cursor: pointer;" class="visit-crox">Crox</strong>\n</span>\n\n<hr class="modal-divider" style="width: 50%; border: none; height: 2px; background-color: #444242; margin: 0;">\n</div>\n </div>',this.gestureController.addGestureHandlers(n,this.closeModal.bind(this,n)),n.querySelector(".info-icon").addEventListener("click",(()=>{this.switchPage(n,"What's Clay?")})),n.querySelector(".back-icon").addEventListener("click",(()=>{this.switchPage(n,"Pay with Clay",!0)})),n.querySelector(".clay-close").addEventListener("click",(()=>{this.eventEmitter.emit("clayPopClose"),this.closeModal(n)})),n.querySelector(".clay-scan").addEventListener("click",(()=>{this.switchPage(n,"Clay Scan",!1,".modal-clay-scan-page")})),n.querySelector(".all-gateways").addEventListener("click",(()=>{this.switchPage(n,"All Gateways",!1,".modal-all-gateways-page")})),n.querySelector(".selected-option-paystack").addEventListener("click",(async()=>{const e=n.querySelector(".loading-indicator"),t=n.querySelector(".loading-background");e&&(e.style.display="flex"),t&&(t.style.display="block");try{await this.selectWallet("Paystack")&&this.switchPage(n,"Paystack",!1,".modal-selected-option-paystack")}catch(a){}finally{e&&(e.style.display="none"),t&&(t.style.display="none")}})),n.querySelector(".open-paystack-link").addEventListener("click",(()=>{window.open(this.PaystackPaymentLink,"_blank")})),n.querySelector(".copy-link-paystack").addEventListener("click",(()=>{navigator.clipboard.writeText(this.PaystackPaymentLink)})),n.querySelector(".copy-link-clay-scan").addEventListener("click",(()=>{navigator.clipboard.writeText(this.clayLink)})),n.querySelector(".selected-option-flutterwave").addEventListener("click",(async()=>{const e=n.querySelector(".loading-indicator"),t=n.querySelector(".loading-background");e&&(e.style.display="flex"),t&&(t.style.display="block");try{await this.selectWallet("Flutterwave")&&this.switchPage(n,"Flutterwave",!1,".modal-selected-option-flutterwave")}catch(a){}finally{e&&(e.style.display="none"),t&&(t.style.display="none")}})),n.querySelector(".open-flutterwave-link").addEventListener("click",(()=>{window.open(this.FlutterwavePaymentLink,"_blank")})),n.querySelector(".copy-link-flutterwave").addEventListener("click",(()=>{navigator.clipboard.writeText(this.FlutterwavePaymentLink)})),n.querySelector(".selected-option-interswitch").addEventListener("click",(async()=>{const e=n.querySelector(".loading-indicator"),t=n.querySelector(".loading-background");e&&(e.style.display="flex"),t&&(t.style.display="block");try{await this.selectWallet("Interswitch")&&this.switchPage(n,"Interswitch",!1,".modal-selected-option-interswitch")}catch(a){}finally{e&&(e.style.display="none"),t&&(t.style.display="none")}})),n.querySelector(".open-interswitch-link").addEventListener("click",(()=>{window.open(this.InterswitchPaymentLink,"_blank")})),n.querySelector(".copy-link-interswitch").addEventListener("click",(()=>{navigator.clipboard.writeText(this.InterswitchPaymentLink)})),n.querySelector(".visit-crox").addEventListener("click",(()=>{window.open("https://crox.paywithclay.co","_blank")})),n}addStyles(){const n=document.createElement("link");n.href="https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100..900;1,100..900&family=Fredoka:wght@300..700&display=swap",n.rel="stylesheet",document.head.appendChild(n);const e=document.createElement("style");e.innerHTML="\n \n .gateway-options {\n display: flex;\n padding: 15px;\n justify-content: space-between;\n flex-wrap: wrap\n }\n \n .gateway-option {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 5px;\n background-color: #1e1e1e;\n border-radius: 10px;\n margin: 0 5px 10px 3px;\n transition: background-color 0.3s ease;\n cursor: pointer;\n width: 20%;\n text-align: center\n }\n \n .gateway-option img {\n width: 50px;\n height: 50px;\n border-radius: 6px;\n padding: 5px;\n border-radius: 20px;\n margin-bottom: 5px\n }\n \n .gateway-option span {\n font-size: 12px;\n color: #ffffff;\n font-weight: 500\n }\n \n .gateway-option:hover {\n background-color: #252626;\n box-shadow: 0 0 5px rgba(255, 255, 255, 0.3)\n }\n \n\n .selected-container {\n display: flex;\n align-items: center; /* Align items vertically */\n}\n\n.loading-indicator {\n margin-left: 10px; /* Space between the button and loading indicator */\n display: none; /* Initially hidden */\n}\n.current-gateway-option {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 5px 10px 10px 10px;\n border-radius: 10px;\n margin: 5px auto 5px; /* Adjust margin to center horizontally */\n cursor: pointer;\n width: 20%;\n text-align: center;\n}\n\n.current-gateway-option img {\n width: 65px;\n height: 65px;\n border-radius: 30px; /* This was duplicated, but left at 20px for roundness */\n border: 4px solid #243140;\n padding: 5px;\n}\n\n.available-gateways-loader {\n border: 2px solid rgba(255, 255, 255, 0.3);\n border-radius: 25%;\n border-top: 2px solid #ffffff;\n width: 15px;\n height: 15px;\n animation: spinner 0.25s linear infinite;\n}\n\n@keyframes spinner {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(720deg);\n }\n}\n\n \n \n \n .clay-modal {\n z-index: 1001;\n transition: transform 0.3s ease, opacity 0.3s ease;\n font-family: 'Fredoka', sans-serif\n }\n \n .clay-modal.mobile {\n display: none;\n position: fixed;\n width: 100%;\n height: auto;\n border-radius: 30px 30px 0 0;\n left: 0;\n bottom: 0\n }\n \n .clay-modal.desktop {\n display: flex;\n position: fixed;\n top: 20%;\n left: 35%;\n transform: translate(-50%, -50%);\n width: 400px;\n border-radius: 30px;\n z-index: 1001\n }\n \n .clay-modal.show {\n transform: translateY(0);\n opacity: 1\n }\n \n \n .clay-modal.light {\n background-color: #fefefe;\n color: #000\n }\n \n \n .clay-modal.dark {\n background-color: #191a1a;\n color: #fff\n }\n \n .modal-title {\n color: inherit;\n font-size: 16px;\n margin-bottom: 5px;\n text-align: center\n \n }\n \n \n .clay-close {\n color: inherit;\n float:right;\n font-size: 28px\n \n }\n \n \n .modal-header {\n display: flex;\n justify-content: space-between;\n align-items: center\n }\n \n \n .modal-icon {\n color: inherit\n }\n \n \n \n \n \n \n .clay-modal-content {\n padding: 20px\n }\n \n .qr-code-container {\n width: 300px;\n height: 300px;\n border: 2px solid #1e1e1e;\n display: flex;\n justify-content: center;\n align-items: center;\n margin: auto; /* Changed to always center the container */\n padding: 20px;\n margin-top: 8px;\n background-color: #1e1e1e;\n border-radius: 30px;\n overflow: hidden;\n position: relative; /* Changed to absolute positioning */\n \n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1)\n }\n \n .qr-code-container::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.05) 100%);\n animation: loader-glow 2s infinite;\n opacity: 0.8;\n border-radius: 30px\n }\n \n \n @keyframes loader-glow {\n 20% {\n transform: translateX(-20%)\n }\n 80% {\n transform: translateX(80%)\n }\n }\n \n \n \n .lds-ripple,\n .lds-ripple div {\n box-sizing: border-box\n }\n \n .lds-ripple {\n display: inline-block;\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 80px;\n height: 80px;\n z-index: 1000\n }\n \n .lds-ripple div {\n position: absolute;\n border: 4px solid currentColor;\n opacity: 1;\n border-radius: 50%;\n animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite\n }\n \n .lds-ripple div:nth-child(2) {\n animation-delay: -0.5s\n }\n \n \n .qr-code {\n margin-left: auto;\n border-radius: 8px;\n background-color: #243140;\n color: #408bd9;\n border-color: #243140;\n font-size: 0.6em;\n padding: 8px 12px;\n \n font-family: 'Fredoka', sans-serif\n }\n .wallet-options {\n margin-top: 20px;\n position: relative; /* Ensure the shadow is positioned relative to the wallet option */\n transition: box-shadow 0.3s ease; /* Smooth transition for shadow */\n }\n\n .loading-background {\n position: fixed; /* Cover the entire viewport */\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */\n border-radius: 30px;\n z-index: 1000; /* Ensure it appears above other elements */\n display: none; /* Initially hidden */\n}\n \n .wallet-option {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n padding: 10px;\n background-color: #1e1e1e;\n border-radius: 10px;\n margin-bottom: 10px;\n transition: background-color 0.3s ease;\n cursor: pointer\n }\n \n \n .wallet-option-icon {\n width: 30px;\n height: 30px;\n margin-right: 10px;\n border-radius: 6px;\n background-color: #243140;\n display: flex;\n justify-content: center;\n align-items: center\n }\n \n .wallet-option:hover {\n background-color: #252626;\n box-shadow: 0 0 2px rgba(255, 255, 255, 0.2)\n }\n \n .wallet-option img {\n width: 30px;\n height: 30px;\n margin-right: 10px;\n border-radius: 6px;\n transition: box-shadow 0.3s ease\n }\n \n .wallet-option img:hover {\n box-shadow: 0 0 5px rgba(255, 255, 255, 0.4)\n }\n \n .clay-scan {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n padding: 10px;\n background-color: #1e1e1e;\n border-radius: 10px;\n margin-bottom: 10px;\n transition: background-color 0.3s ease;\n cursor: pointer\n }\n \n \n .clay-scan-icon {\n width: 30px;\n height: 30px;\n margin-right: 10px;\n border-radius: 6px;\n background-color: #243140;\n display: flex;\n justify-content: center;\n align-items: center\n }\n \n .clay-scan:hover {\n background-color: #252626;\n box-shadow: 0 0 2px rgba(255, 255, 255, 0.2)\n }\n \n .clay-scan img {\n width: 30px;\n height: 30px;\n margin-right: 10px;\n border-radius: 6px;\n transition: box-shadow 0.3s ease\n }\n \n .clay-scan img:hover {\n box-shadow: 0 0 5px rgba(255, 255, 255, 0.4)\n }\n .all-gateways {\n margin-top: 10px\n }\n \n .all-gateways {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n padding: 10px;\n background-color: #1e1e1e;\n border-radius: 10px;\n margin-bottom: 10px;\n transition: background-color 0.3s ease;\n cursor: pointer\n }\n \n \n .all-gateways-icon {\n width: 30px;\n height: 30px;\n margin-right: 10px;\n border-radius: 6px;\n background-color: #243140;\n display: flex;\n justify-content: center;\n align-items: center\n }\n \n .all-gateways:hover {\n background-color: #252626;\n box-shadow: 0 0 2px rgba(255, 255, 255, 0.2)\n }\n \n .all-gateways img {\n width: 30px;\n height: 30px;\n margin-right: 10px;\n border-radius: 6px;\n transition: box-shadow 0.3s ease\n }\n \n .all-gateways img:hover {\n box-shadow: 0 0 5px rgba(255, 255, 255, 0.4)\n }\n .more-gateways {\n margin-left: auto;\n border-radius: 8px;\n background-color: #343535;\n color: #949e9e;\n border-color: #343535;\n font-size: 0.6em;\n padding: 8px 12px;\n \n font-family: 'Fredoka', sans-serif\n }\n \n .search-bar {\n position: relative;\n background-color: #1e1e1e;\n border-radius: 15px;\n transition: background-color 0.3s ease;\n cursor: text\n }\n \n .search-bar input {\n background-color: transparent;\n border: none;\n color: #fff;\n flex-grow: 1;\n padding-left: 10px;\n font-family: 'Fredoka', sans-serif;\n font-size: 1em\n }\n \n .search-bar input:focus {\n outline: none\n }\n \n .search-icon {\n color: #408bd9;\n margin-right: 10px;\n font-size: 1.5em\n }\n \n \n .search-bar:hover {\n background-color: #252626;\n box-shadow: 0 0 2px rgba(255, 255, 255, 0.2)\n }\n \n #search-input {\n padding-right: 30px\n }\n \n #search-input::placeholder {\n font-size: 12px\n \n }\n \n #clear-icon {\n position: absolute;\n right: 10px;\n cursor: pointer\n }\n \n .modal-all-gateways-page {\n display: none;\n transition: opacity 0.5s ease;\n opacity: 0\n }\n \n \n \n .checkmark {\n color: #008000\n }\n @keyframes lds-ripple {\n 0% {\n top: 36px;\n left: 36px;\n width: 8px;\n height: 8px;\n opacity: 0\n }\n 4.9% {\n top: 36px;\n left: 36px;\n width: 8px;\n height: 8px;\n opacity: 0\n }\n 5% {\n top: 36px;\n left: 36px;\n width: 8px;\n height: 8px;\n opacity: 1\n }\n 100% {\n top: 0;\n left: 0;\n width: 80px;\n height: 80px;\n opacity: 0\n }\n }\n \n .shadow {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.7);\n z-index: 1000\n }\n ",document.head.appendChild(e)}}class EventEmitter{constructor(){this.events={}}on(n,e){this.events[n]||(this.events[n]=[]),this.events[n].push(e)}emit(n,e){this.events[n]&&this.events[n].forEach((n=>n(e)))}}class GestureController{addGestureHandlers(n,e){let t;n.addEventListener("touchstart",(n=>{t=n.touches[0].clientY})),n.addEventListener("touchmove",(n=>{n.touches[0].clientY-t>50&&e()}))}}