@kwespay/widget 1.0.6 → 1.0.8

package/dist/kwespay-widget.js

@@ -14,7 +14,7 @@
   const STABLECOIN_SYMBOLS = ["USDT", "USDC", "DAI", "BUSD", "USDc"];
 
   const DEFAULT_CONFIG = {
-    graphqlEndpoint: "https://8284-154-161-98-26.ngrok-free.app",
+    graphqlEndpoint: "https://api.kwespay.xyz/",
     currency: SUPPORTED_CURRENCIES.USD,
   };
 
@@ -16952,6 +16952,84 @@ ${e.length}`,n=new TextEncoder().encode(t+e);return "0x"+toString$1(keccak_256$3
     }
   };
 
+  function isMobileDevice() {
+    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+      navigator.userAgent
+    );
+  }
+
+  function dispatchWidgetEvent(eventName, detail = {}) {
+    const event = new CustomEvent(`kwespay:${eventName}`, {
+      detail,
+      bubbles: true,
+      cancelable: true,
+    });
+    window.dispatchEvent(event);
+  }
+
+  function truncateHash(hash, startChars = 10, endChars = 8) {
+    if (!hash) return "";
+    return `${hash.slice(0, startChars)}...${hash.slice(-endChars)}`;
+  }
+
+  function getErrorType(error) {
+    const msg = error?.message ?? "";
+    if (
+      error?.code === 4001 ||
+      error?.code === "ACTION_REJECTED" ||
+      msg.includes("rejected") ||
+      msg.includes("denied") ||
+      msg.includes("cancelled")
+    )
+      return "USER_REJECTED";
+    if (msg.toLowerCase().includes("insufficient")) return "INSUFFICIENT_BALANCE";
+    if (
+      msg.includes("User rejected") ||
+      msg.includes("User closed modal") ||
+      msg.includes("Connection request reset")
+    )
+      return "CONNECTION_REJECTED";
+    if (msg.includes("timeout")) return "TIMEOUT";
+    return "UNKNOWN";
+  }
+
+  function getErrorMessage(error, context = {}) {
+    const type = getErrorType(error);
+
+    console.error("[KwesPay] Payment error breakdown:", {
+      errorType: type,
+      message: error?.message,
+      code: error?.code,
+      data: error?.data,
+      reason: error?.reason,
+      stack: error?.stack,
+      raw: error,
+      context,
+    });
+
+    if (error?.data) console.error("[KwesPay] Contract revert data:", error.data);
+    if (error?.transaction)
+      console.error("[KwesPay] Failed tx details:", error.transaction);
+    if (error?.receipt) console.error("[KwesPay] Tx receipt:", error.receipt);
+
+    switch (type) {
+      case "USER_REJECTED":
+        return "You cancelled the transaction in your wallet.";
+      case "INSUFFICIENT_BALANCE":
+        return `Not enough ${context.token || "funds"} to complete this payment.`;
+      case "CONNECTION_REJECTED":
+        return "Wallet connection was cancelled.";
+      case "TIMEOUT":
+        return "Connection timed out. Please try again.";
+      default:
+        return (
+          error?.reason ||
+          error?.message ||
+          "Something went wrong while processing your payment."
+        );
+    }
+  }
+
   const WIDGET_STYLES = `
   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
 
@@ -18141,180 +18219,12 @@ ${e.length}`,n=new TextEncoder().encode(t+e);return "0x"+toString$1(keccak_256$3
   `;
   }
 
-  function dispatchWidgetEvent(eventName, detail = {}) {
-    const event = new CustomEvent(`kwespay:${eventName}`, {
-      detail,
-      bubbles: true,
-      cancelable: true,
-    });
-    window.dispatchEvent(event);
-  }
-
-  function truncateHash(hash, startChars = 10, endChars = 8) {
-    if (!hash) return "";
-    return `${hash.slice(0, startChars)}...${hash.slice(-endChars)}`;
-  }
-
-  function getErrorType(error) {
-    const msg = error?.message ?? "";
-    if (
-      error?.code === 4001 ||
-      error?.code === "ACTION_REJECTED" ||
-      msg.includes("rejected") ||
-      msg.includes("denied") ||
-      msg.includes("cancelled")
-    )
-      return "USER_REJECTED";
-    if (msg.toLowerCase().includes("insufficient")) return "INSUFFICIENT_BALANCE";
-    if (
-      msg.includes("User rejected") ||
-      msg.includes("User closed modal") ||
-      msg.includes("Connection request reset")
-    )
-      return "CONNECTION_REJECTED";
-    if (msg.includes("timeout")) return "TIMEOUT";
-    return "UNKNOWN";
-  }
-
-  function getErrorMessage(error, context = {}) {
-    const type = getErrorType(error);
-
-    console.error("[KwesPay] Payment error breakdown:", {
-      errorType: type,
-      message: error?.message,
-      code: error?.code,
-      data: error?.data,
-      reason: error?.reason,
-      stack: error?.stack,
-      raw: error,
-      context,
-    });
-
-    if (error?.data) console.error("[KwesPay] Contract revert data:", error.data);
-    if (error?.transaction)
-      console.error("[KwesPay] Failed tx details:", error.transaction);
-    if (error?.receipt) console.error("[KwesPay] Tx receipt:", error.receipt);
-
-    switch (type) {
-      case "USER_REJECTED":
-        return "You cancelled the transaction in your wallet.";
-      case "INSUFFICIENT_BALANCE":
-        return `Not enough ${context.token || "funds"} to complete this payment.`;
-      case "CONNECTION_REJECTED":
-        return "Wallet connection was cancelled.";
-      case "TIMEOUT":
-        return "Connection timed out. Please try again.";
-      default:
-        return (
-          error?.reason ||
-          error?.message ||
-          "Something went wrong while processing your payment."
-        );
-    }
-  }
-
-  const PLATFORM_FEE_BPS = 25;
-
-  // ── Utilities ─────────────────────────────────────────────────────────────────
-
-  function formatUnits$1(rawBigInt, decimals) {
-    const divisor = BigInt(10 ** decimals);
-    const whole = rawBigInt / divisor;
-    const remainder = rawBigInt % divisor;
-
-    if (remainder === 0n) return `${whole}`;
-
-    const fracFull = remainder.toString().padStart(decimals, "0");
-
-    if (whole > 0n) {
-      const frac = fracFull.slice(0, 4).replace(/0+$/, "");
-      return frac ? `${whole}.${frac}` : `${whole}`;
-    }
-
-    let firstSig = -1;
-    for (let i = 0; i < fracFull.length; i++) {
-      if (fracFull[i] !== "0") {
-        firstSig = i;
-        break;
-      }
-    }
-    if (firstSig === -1) return `${whole}`;
-
-    const sigSlice = fracFull.slice(firstSig, firstSig + 4).replace(/0+$/, "");
-    return `0.${fracFull.slice(0, firstSig) + sigSlice}`;
-  }
-
-  function resolveAcceptedTokens(input) {
-    if (!input) return null;
-    if (input === "stablecoins") return STABLECOIN_SYMBOLS;
-    if (Array.isArray(input) && input.length)
-      return input.map((t) => t.toUpperCase());
-    return null;
-  }
-
-  function isMobileDevice() {
-    return /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
-  }
-
-  // ── Widget ────────────────────────────────────────────────────────────────────
-
-  class KwesPayWidget {
-    constructor(config) {
-      if (!config.apiKey) throw new Error("[KwesPayWidget] apiKey is required");
-      if (!config.vendorId)
-        throw new Error("[KwesPayWidget] vendorId is required");
-      if (!config.amount || parseFloat(config.amount) <= 0)
-        throw new Error("[KwesPayWidget] Valid amount is required");
-
-      this.config = {
-        apiKey: config.apiKey,
-        vendorId: config.vendorId,
-        amount: parseFloat(config.amount),
-        currency: config.currency || DEFAULT_CONFIG.currency,
-        graphqlEndpoint: DEFAULT_CONFIG.graphqlEndpoint,
-        acceptedTokens: resolveAcceptedTokens(config.acceptedTokens),
-      };
-
-      if (!Object.values(SUPPORTED_CURRENCIES).includes(this.config.currency)) {
-        throw new Error(
-          `[KwesPayWidget] Unsupported currency: ${this.config.currency}`
-        );
-      }
-
-      this.walletService = new WalletService();
-      this.paymentService = new PaymentService$1(
-        this.config.apiKey,
-        this.config.graphqlEndpoint
-      );
-
-      this.state = {
-        isOpen: false,
-        currentStep: 0,
-        selectedNetwork: null,
-        selectedNetworkName: "",
-        selectedChainId: null,
-        selectedRpcUrl: null,
-        selectedContractAddress: null,
-        selectedToken: null,
-        selectedTokenConfig: null,
-        vendorInfo: null,
-        keyAllowedNetworks: null,
-        keyAllowedTokens: null,
-        currentPayload: null,
-        quoteTimerInterval: null,
-        wcUri: null,
-      };
-
-      this._init();
-    }
-
-    // ── Bootstrap ───────────────────────────────────────────────────────────────
-
+  const DomMethods = {
     _init() {
       this._injectFonts();
       this._injectStyles();
       this._createWidgetDOM();
-    }
+    },
 
     _injectFonts() {
       if (
@@ -18328,7 +18238,7 @@ ${e.length}`,n=new TextEncoder().encode(t+e);return "0x"+toString$1(keccak_256$3
         link.rel = "stylesheet";
         document.head.appendChild(link);
       }
-    }
+    },
 
     _injectStyles() {
       if (!document.getElementById("kwespay-widget-styles")) {
@@ -18337,7 +18247,7 @@ ${e.length}`,n=new TextEncoder().encode(t+e);return "0x"+toString$1(keccak_256$3
         style.textContent = WIDGET_STYLES;
         document.head.appendChild(style);
       }
-    }
+    },
 
     _createWidgetDOM() {
       document.getElementById("kwespay-widget-overlay")?.remove();
@@ -18364,15 +18274,16 @@ ${e.length}`,n=new TextEncoder().encode(t+e);return "0x"+toString$1(keccak_256$3
       document.body.appendChild(overlay);
 
       this._setupEventListeners();
+      this._setupSwipeToClose(container);
 
-      overlay.addEventListener("click", (e) => {
-        if (e.target === overlay) this.close();
-      });
+      // Clicking outside the container does NOT close the widget (intentional)
+    },
 
-      // Swipe-down to close on mobile
+    _setupSwipeToClose(container) {
       let _touchStartY = 0,
         _touchCurrentY = 0,
         _isDragging = false;
+
       container.addEventListener(
         "touchstart",
         (e) => {
@@ -18387,6 +18298,7 @@ ${e.length}`,n=new TextEncoder().encode(t+e);return "0x"+toString$1(keccak_256$3
         },
         { passive: true }
       );
+
       container.addEventListener(
         "touchmove",
         (e) => {
@@ -18397,6 +18309,7 @@ ${e.length}`,n=new TextEncoder().encode(t+e);return "0x"+toString$1(keccak_256$3
         },
         { passive: true }
       );
+
       container.addEventListener("touchend", () => {
         if (!_isDragging) return;
         _isDragging = false;
@@ -18405,7 +18318,7 @@ ${e.length}`,n=new TextEncoder().encode(t+e);return "0x"+toString$1(keccak_256$3
         if (delta > 120) this.close();
         else container.style.transform = "translateY(0)";
       });
-    }
+    },
 
     _setupEventListeners() {
       document
@@ -18514,10 +18427,83 @@ ${e.length}`,n=new TextEncoder().encode(t+e);return "0x"+toString$1(keccak_256$3
             });
         });
       }
-    }
-
-    // ── Network / token list rendering ──────────────────────────────────────────
+    },
+  };
+
+  const NavMethods = {
+    _goToStep(stepNumber) {
+      document
+        .querySelectorAll(".kwespay-container .step")
+        .forEach((s) => s.classList.remove("active", "exiting"));
+      this._activateStep(stepNumber);
+      this.state.currentStep = stepNumber;
+    },
+
+    _activateStep(stepNumber) {
+      let targetStep;
+      if (stepNumber === 0.5)
+        targetStep = document.getElementById("kwespay-step0-invalid");
+      else if (typeof stepNumber === "string")
+        targetStep = document.getElementById(`kwespay-step-${stepNumber}`);
+      else targetStep = document.getElementById(`kwespay-step${stepNumber}`);
+
+      if (targetStep) targetStep.classList.add("active");
+      else console.warn(`[KwesPayWidget] Step not found: ${stepNumber}`);
+    },
+
+    _removeCustomStep(id) {
+      document.getElementById(id)?.remove();
+    },
+
+    _showError(title, message) {
+      const titleEl = document.getElementById("kwespay-errorTitle");
+      const msgEl = document.getElementById("kwespay-errorMessage");
+      if (titleEl) titleEl.textContent = title;
+      if (msgEl) msgEl.textContent = message;
+      this._goToStep(6);
+    },
+
+    _reset() {
+      this._clearQuoteTimer();
+      this._removeCustomStep("kwespay-step-wallet-picker");
+      this._removeCustomStep("kwespay-step-wc");
+      this.state.selectedNetwork = null;
+      this.state.selectedNetworkName = "";
+      this.state.selectedChainId = null;
+      this.state.selectedRpcUrl = null;
+      this.state.selectedContractAddress = null;
+      this.state.selectedToken = null;
+      this.state.selectedTokenConfig = null;
+      this.state.currentPayload = null;
+      this.state.wcUri = null;
+    },
+  };
 
+  const APIKeyMethods = {
+    async _validateAPIKey() {
+      try {
+        const validation = await this.paymentService.validateAPIKey();
+        if (validation.valid) {
+          this.state.vendorInfo = validation.vendorInfo;
+          this.state.keyAllowedNetworks = validation.allowedNetworks ?? null;
+          this.state.keyAllowedTokens = validation.allowedTokens ?? null;
+          this._goToStep(1);
+          dispatchWidgetEvent("apiKeyValidated", {
+            vendorInfo: this.state.vendorInfo,
+          });
+        } else {
+          this._goToStep(0.5);
+          dispatchWidgetEvent("apiKeyInvalid", {});
+        }
+      } catch (err) {
+        console.error("[KwesPayWidget] API key validation error:", err.message);
+        this._goToStep(0.5);
+        dispatchWidgetEvent("apiKeyError", { error: err.message });
+      }
+    },
+  };
+
+  const NetworkMethods = {
     _renderNetworkList() {
       const mainnetList = document.getElementById("kwespay-mainnetList");
       const testnetList = document.getElementById("kwespay-testnetList");
@@ -18579,7 +18565,7 @@ ${e.length}`,n=new TextEncoder().encode(t+e);return "0x"+toString$1(keccak_256$3
 
       if (testnetSection)
         testnetSection.style.display = hasTestnet ? "block" : "none";
-    }
+    },
 
     _renderTokenList() {
       if (!this.state.selectedNetwork) return;
@@ -18618,7 +18604,7 @@ ${e.length}`,n=new TextEncoder().encode(t+e);return "0x"+toString$1(keccak_256$3
         );
         tokenList.appendChild(tokenItem);
       });
-    }
+    },
 
     _effectiveAllowedTokens() {
       const keyTokens =
@@ -18628,17 +18614,64 @@ ${e.length}`,n=new TextEncoder().encode(t+e);return "0x"+toString$1(keccak_256$3
       if (!keyTokens) return configTokens;
       if (!configTokens) return keyTokens;
       return keyTokens.filter((t) => configTokens.includes(t));
-    }
+    },
+
+    async _handleNetworkSelection(key, network) {
+      this.state.selectedNetwork = key;
+      this.state.selectedNetworkName = network.name;
+      this.state.selectedChainId = network.chainId;
+      this.state.selectedRpcUrl = network.rpcUrl;
+      this.state.selectedContractAddress = network.contractAddress;
+      this.state.selectedToken = null;
+      this.state.selectedTokenConfig = null;
+
+      const nameEl = document.getElementById("kwespay-selectedNetworkName");
+      if (nameEl)
+        nameEl.textContent = `${network.name} ${
+        network.type === "mainnet" ? "Mainnet" : "Testnet"
+      }`;
+
+      const iconEl = document.getElementById("kwespay-selectedNetworkIcon");
+      if (iconEl)
+        iconEl.innerHTML = `<img src="${network.logo}" alt="${network.name}" />`;
 
-    // ── Wallet connection flow ───────────────────────────────────────────────────
+      const continueBtn = document.getElementById(
+        "kwespay-continueToWalletConnect"
+      );
+      if (continueBtn) continueBtn.disabled = true;
 
+      this._renderTokenList();
+      this._goToStep(2);
+    },
+
+    _handleTokenSelection(token) {
+      document
+        .querySelectorAll("#kwespay-tokenList .token-item")
+        .forEach((item) => item.classList.remove("selected"));
+      document
+        .querySelector(
+          `#kwespay-tokenList .token-item[data-token-symbol="${token.symbol}"]`
+        )
+        ?.classList.add("selected");
+
+      this.state.selectedToken = token.symbol;
+      this.state.selectedTokenConfig = token;
+
+      const continueBtn = document.getElementById(
+        "kwespay-continueToWalletConnect"
+      );
+      if (continueBtn) continueBtn.disabled = false;
+    },
+  };
+
+  const WalletMethods = {
     async _handleWalletConnection() {
       if (!this.state.selectedToken || !this.state.selectedTokenConfig) {
         alert("Please select a token first");
         return;
       }
       this._renderWalletPickerStep();
-    }
+    },
 
     _renderWalletPickerStep() {
       this._removeCustomStep("kwespay-step-wallet-picker");
@@ -18736,7 +18769,7 @@ ${e.length}`,n=new TextEncoder().encode(t+e);return "0x"+toString$1(keccak_256$3
           list.appendChild(item);
         });
       });
-    }
+    },
 
     async _connectInjectedProvider(index) {
       try {
@@ -18751,7 +18784,7 @@ ${e.length}`,n=new TextEncoder().encode(t+e);return "0x"+toString$1(keccak_256$3
         );
         dispatchWidgetEvent("walletConnectionError", { error: err.message });
       }
-    }
+    },
 
     async _startWalletConnect() {
       this._renderWCStep();
@@ -18767,7 +18800,7 @@ ${e.length}`,n=new TextEncoder().encode(t+e);return "0x"+toString$1(keccak_256$3
           this._renderWCMobileStep();
         }
 
-        // Pass the target chain so MetaMask starts the WC session on the right
+        // Pass the target chain so the wallet starts the WC session on the right
         // network — without this it defaults to its last-used WC chain (Mainnet).
         await this.walletService.connectWalletConnect(this.state.selectedChainId);
       } catch (err) {
@@ -18782,9 +18815,7 @@ ${e.length}`,n=new TextEncoder().encode(t+e);return "0x"+toString$1(keccak_256$3
           err.message || "WalletConnect failed."
         );
       }
-    }
-
-    // ── WalletConnect UI ─────────────────────────────────────────────────────────
+    },
 
     _renderWCStep() {
       this._removeCustomStep("kwespay-step-wc");
@@ -18817,7 +18848,7 @@ ${e.length}`,n=new TextEncoder().encode(t+e);return "0x"+toString$1(keccak_256$3
       });
 
       this._goToStep("wc");
-    }
+    },
 
     _wcDesktopHTML() {
       return `
@@ -18839,7 +18870,7 @@ ${e.length}`,n=new TextEncoder().encode(t+e);return "0x"+toString$1(keccak_256$3
         <p style="font-size:11px;color:var(--kp-muted);font-family:var(--kp-mono);text-align:center">Waiting for wallet connection…</p>
       </div>
     `;
-    }
+    },
 
     _wcMobileHTML() {
       const wallets = this.walletService.getMobileWallets();
@@ -18887,7 +18918,7 @@ ${e.length}`,n=new TextEncoder().encode(t+e);return "0x"+toString$1(keccak_256$3
         </p>
       </div>
     `;
-    }
+    },
 
     _renderWCMobileStep() {
       const list = document.getElementById("kwespay-mobile-wallet-list");
@@ -18911,7 +18942,7 @@ ${e.length}`,n=new TextEncoder().encode(t+e);return "0x"+toString$1(keccak_256$3
           }
         });
       });
-    }
+    },
 
     _onWCUri(uri) {
       this.state.wcUri = uri;
@@ -18928,7 +18959,7 @@ ${e.length}`,n=new TextEncoder().encode(t+e);return "0x"+toString$1(keccak_256$3
       } else {
         this._renderQRCode(uri);
       }
-    }
+    },
 
     _renderQRCode(uri) {
       const canvas = document.getElementById("kwespay-qr-canvas");
@@ -18963,18 +18994,18 @@ ${e.length}`,n=new TextEncoder().encode(t+e);return "0x"+toString$1(keccak_256$3
         <p style="font-size:10px;color:#888;font-family:monospace">Use Copy URI button</p>
       </div>
     `;
-    }
+    },
 
     _onWCConnected() {
       const connection = this.walletService._connectionResult();
       this._removeCustomStep("kwespay-step-wc");
       this._onWalletConnected(connection);
-    }
+    },
 
     _onWCDisconnected() {
       this._removeCustomStep("kwespay-step-wc");
       this._goToStep(2);
-    }
+    },
 
     async _onWalletConnected(connection) {
       const addressEl = document.getElementById("kwespay-connectedWalletAddress");
@@ -18991,7 +19022,7 @@ ${e.length}`,n=new TextEncoder().encode(t+e);return "0x"+toString$1(keccak_256$3
       const proceedBtn = document.getElementById("kwespay-proceedToPayment");
 
       if (cryptoLine) {
-        cryptoLine.textContent = "Getting the best rate for you…";
+        cryptoLine.textContent = "loading…";
         cryptoLine.classList.add("loading");
       }
       if (timerEl) timerEl.style.display = "none";
@@ -19013,83 +19044,39 @@ ${e.length}`,n=new TextEncoder().encode(t+e);return "0x"+toString$1(keccak_256$3
       }
 
       dispatchWidgetEvent("walletConnected", { address: connection.address });
-    }
-
-    // ── API key validation ───────────────────────────────────────────────────────
-
-    async _validateAPIKey() {
-      try {
-        const validation = await this.paymentService.validateAPIKey();
-        if (validation.valid) {
-          this.state.vendorInfo = validation.vendorInfo;
-          this.state.keyAllowedNetworks = validation.allowedNetworks ?? null;
-          this.state.keyAllowedTokens = validation.allowedTokens ?? null;
-          this._goToStep(1);
-          dispatchWidgetEvent("apiKeyValidated", {
-            vendorInfo: this.state.vendorInfo,
-          });
-        } else {
-          this._goToStep(0.5);
-          dispatchWidgetEvent("apiKeyInvalid", {});
-        }
-      } catch (err) {
-        console.error("[KwesPayWidget] API key validation error:", err.message);
-        this._goToStep(0.5);
-        dispatchWidgetEvent("apiKeyError", { error: err.message });
-      }
-    }
-
-    // ── Network / token selection ────────────────────────────────────────────────
+    },
+  };
 
-    async _handleNetworkSelection(key, network) {
-      this.state.selectedNetwork = key;
-      this.state.selectedNetworkName = network.name;
-      this.state.selectedChainId = network.chainId;
-      this.state.selectedRpcUrl = network.rpcUrl;
-      this.state.selectedContractAddress = network.contractAddress;
-      this.state.selectedToken = null;
-      this.state.selectedTokenConfig = null;
+  const PLATFORM_FEE_BPS = 25;
 
-      const nameEl = document.getElementById("kwespay-selectedNetworkName");
-      if (nameEl)
-        nameEl.textContent = `${network.name} ${
-        network.type === "mainnet" ? "Mainnet" : "Testnet"
-      }`;
+  function formatUnits$1(rawBigInt, decimals) {
+    const divisor = BigInt(10 ** decimals);
+    const whole = rawBigInt / divisor;
+    const remainder = rawBigInt % divisor;
 
-      const iconEl = document.getElementById("kwespay-selectedNetworkIcon");
-      if (iconEl)
-        iconEl.innerHTML = `<img src="${network.logo}" alt="${network.name}" />`;
+    if (remainder === 0n) return `${whole}`;
 
-      const continueBtn = document.getElementById(
-        "kwespay-continueToWalletConnect"
-      );
-      if (continueBtn) continueBtn.disabled = true;
+    const fracFull = remainder.toString().padStart(decimals, "0");
 
-      this._renderTokenList();
-      this._goToStep(2);
+    if (whole > 0n) {
+      const frac = fracFull.slice(0, 4).replace(/0+$/, "");
+      return frac ? `${whole}.${frac}` : `${whole}`;
     }
 
-    _handleTokenSelection(token) {
-      document
-        .querySelectorAll("#kwespay-tokenList .token-item")
-        .forEach((item) => item.classList.remove("selected"));
-      document
-        .querySelector(
-          `#kwespay-tokenList .token-item[data-token-symbol="${token.symbol}"]`
-        )
-        ?.classList.add("selected");
-
-      this.state.selectedToken = token.symbol;
-      this.state.selectedTokenConfig = token;
-
-      const continueBtn = document.getElementById(
-        "kwespay-continueToWalletConnect"
-      );
-      if (continueBtn) continueBtn.disabled = false;
+    let firstSig = -1;
+    for (let i = 0; i < fracFull.length; i++) {
+      if (fracFull[i] !== "0") {
+        firstSig = i;
+        break;
+      }
     }
+    if (firstSig === -1) return `${whole}`;
 
-    // ── Quote / review step ──────────────────────────────────────────────────────
+    const sigSlice = fracFull.slice(firstSig, firstSig + 4).replace(/0+$/, "");
+    return `0.${fracFull.slice(0, firstSig) + sigSlice}`;
+  }
 
+  const QuoteMethods = {
     async _loadReviewStep() {
       this._clearQuoteTimer();
 
@@ -19101,7 +19088,7 @@ ${e.length}`,n=new TextEncoder().encode(t+e);return "0x"+toString$1(keccak_256$3
       const proceedBtn = document.getElementById("kwespay-proceedToPayment");
 
       if (cryptoLine) {
-        cryptoLine.textContent = "Getting the best rate for you…";
+        cryptoLine.textContent = "loading…";
         cryptoLine.classList.add("loading");
       }
       if (timerEl) timerEl.style.display = "none";
@@ -19141,12 +19128,12 @@ ${e.length}`,n=new TextEncoder().encode(t+e);return "0x"+toString$1(keccak_256$3
       } catch (err) {
         console.error("[KwesPayWidget] Quote fetch failed:", err.message);
         if (cryptoLine) {
-          cryptoLine.textContent = "Could not load rate — please try again.";
+          cryptoLine.textContent = "Could not load please try again.";
           cryptoLine.classList.remove("loading");
         }
         if (proceedBtn) proceedBtn.disabled = true;
       }
-    }
+    },
 
     _startQuoteTimer(expiresAt) {
       const timerEl = document.getElementById("kwespay-quoteTimer");
@@ -19167,6 +19154,7 @@ ${e.length}`,n=new TextEncoder().encode(t+e);return "0x"+toString$1(keccak_256$3
           "kp-quote-timer" +
           (secs <= 30 ? " urgent" : "") +
           (secs <= 0 ? " expired" : "");
+
         if (secs <= 0) {
           timerText.textContent = "Refreshing your rate…";
           const proceedBtn = document.getElementById("kwespay-proceedToPayment");
@@ -19175,19 +19163,20 @@ ${e.length}`,n=new TextEncoder().encode(t+e);return "0x"+toString$1(keccak_256$3
           this._loadReviewStep();
         }
       };
+
       update();
       this.state.quoteTimerInterval = setInterval(update, 1000);
-    }
+    },
 
     _clearQuoteTimer() {
       if (this.state.quoteTimerInterval) {
         clearInterval(this.state.quoteTimerInterval);
         this.state.quoteTimerInterval = null;
       }
-    }
-
-    // ── Payment processing ───────────────────────────────────────────────────────
+    },
+  };
 
+  const PaymentMethods = {
     async _handlePaymentProcessing() {
       if (!this.state.currentPayload) {
         this._showError(
@@ -19216,9 +19205,7 @@ ${e.length}`,n=new TextEncoder().encode(t+e);return "0x"+toString$1(keccak_256$3
 
         if (!provider) throw new Error("No wallet provider");
 
-        // ── Session liveness check ───────────────────────────────────────────────
-        // Must come first — a stale WC session throws on any RPC call, and we want
-        // a clean "reconnect" error rather than a cryptic provider error downstream.
+
         const alive = await this.walletService.isSessionAlive();
         if (!alive) {
           console.error(
@@ -19232,22 +19219,17 @@ ${e.length}`,n=new TextEncoder().encode(t+e);return "0x"+toString$1(keccak_256$3
           throw err;
         }
 
-        // ── Show mobile helper banner ────────────────────────────────────────────
+       
         if (isMobile) {
           document
             .getElementById("kwespay-mobileTransactionInstruction")
             ?.style.setProperty("display", "flex");
         }
 
-        // ── Chain validation ─────────────────────────────────────────────────────
         if (strictMobile) {
-          // On mobile WC, eth_chainId goes to the wallet via the WC relay and
-          // reflects the wallet's actual active chain — always call it live.
-          // Never rely on session namespace account ordering (MetaMask puts
-          // Mainnet first regardless of which chain the user is on).
+
           await this._assertMobileChain(provider, targetChainId);
         } else {
-          // Desktop / injected — eth_chainId is reliable, switch if needed
           const rawChain = await provider.request({ method: "eth_chainId" });
           const currentChainId = parseInt(rawChain, 16);
 
@@ -19268,21 +19250,17 @@ ${e.length}`,n=new TextEncoder().encode(t+e);return "0x"+toString$1(keccak_256$3
               this.state.selectedToken,
               this.state.selectedTokenConfig.decimals
             );
-            console.log("[KwesPay] Network switched ✅");
+            console.log("[KwesPay] Network switched");
           }
         }
 
-        // ── Open wallet BEFORE sending tx (mobile WC only) ──────────────────────
-        // We deep-link to the wallet before the JSON-RPC request lands so the
-        // approval prompt appears immediately without the user having to manually
-        // switch apps.
+     
         if (strictMobile) {
           setStatus(
             "Opening your wallet…",
             "Approve the payment in your wallet."
           );
           this.walletService._openWalletForApproval();
-          // Give the OS time to foreground the wallet app before the RPC lands
           await new Promise((r) => setTimeout(r, 700));
         } else {
           setStatus(
@@ -19291,19 +19269,18 @@ ${e.length}`,n=new TextEncoder().encode(t+e);return "0x"+toString$1(keccak_256$3
           );
         }
 
-        // ── Send transaction ─────────────────────────────────────────────────────
         const receipt = await this.paymentService.createPayment({
           payload: this.state.currentPayload,
           walletProvider: provider,
           onStatusUpdate: setStatus,
         });
 
-        // ── Cleanup ──────────────────────────────────────────────────────────────
+    
         document
           .getElementById("kwespay-mobileTransactionInstruction")
           ?.style.setProperty("display", "none");
 
-        // ── Success UI ───────────────────────────────────────────────────────────
+       
         const decimals = this.state.selectedTokenConfig?.decimals ?? 6;
         const amountBig = BigInt(this.state.currentPayload.amountBaseUnits);
         const cryptoDisplay = `${formatUnits$1(amountBig, decimals)} ${
@@ -19366,7 +19343,7 @@ ${e.length}`,n=new TextEncoder().encode(t+e);return "0x"+toString$1(keccak_256$3
         this._showError(title, message);
         dispatchWidgetEvent("paymentError", { error: message, errorType });
       }
-    }
+    },
 
     /**
      * Confirm the wallet is on the target chain before sending a transaction.
@@ -19374,9 +19351,6 @@ ${e.length}`,n=new TextEncoder().encode(t+e);return "0x"+toString$1(keccak_256$3
      * Throws WRONG_NETWORK if the chain never matches.
      *
      * MOBILE WC ONLY — never call this on desktop/injected.
-     *
-     * @param {object} provider
-     * @param {number} targetChainId
      */
     async _assertMobileChain(provider, targetChainId) {
       const MAX_ATTEMPTS = 3;
@@ -19410,25 +19384,14 @@ ${e.length}`,n=new TextEncoder().encode(t+e);return "0x"+toString$1(keccak_256$3
         }
       }
 
-      // All attempts failed — wallet is on wrong chain
       const err = new Error(
         `Please switch to ${this.state.selectedNetworkName} in your wallet and try again.`
       );
       err.code = "WRONG_NETWORK";
       throw err;
-    }
+    },
+
 
-    /**
-     * Switch network for desktop/injected providers and poll until confirmed.
-     * MUST NOT be called in strictMobile mode (mobile WC doesn't support
-     * wallet_switchEthereumChain reliably).
-     *
-     * @param {number} chainId
-     * @param {string} networkName
-     * @param {string} rpcUrl
-     * @param {string} tokenSymbol
-     * @param {number} tokenDecimals
-     */
     async _switchNetworkSafe(
       chainId,
       networkName,
@@ -19436,7 +19399,6 @@ ${e.length}`,n=new TextEncoder().encode(t+e);return "0x"+toString$1(keccak_256$3
       tokenSymbol,
       tokenDecimals
     ) {
-      // Capture before any async boundary — prevents `this` loss in callbacks
       const switchNetwork = this.walletService.switchNetwork;
       const provider = this.walletService.getProvider();
 
@@ -19459,12 +19421,11 @@ ${e.length}`,n=new TextEncoder().encode(t+e);return "0x"+toString$1(keccak_256$3
 
       const targetHex = toHex(chainId);
 
-      // Check current chain — skip if already correct
       try {
         const currentHex = toHex(
           await provider.request({ method: "eth_chainId" })
         );
-        if (currentHex && currentHex === targetHex) return; // already correct, silent return
+        if (currentHex && currentHex === targetHex) return;
       } catch (err) {
         console.warn(
           "[KwesPay] Could not read chainId before switch:",
@@ -19472,7 +19433,6 @@ ${e.length}`,n=new TextEncoder().encode(t+e);return "0x"+toString$1(keccak_256$3
         );
       }
 
-      // Issue the switch
       try {
         await switchNetwork(
           chainId,
@@ -19518,44 +19478,67 @@ ${e.length}`,n=new TextEncoder().encode(t+e);return "0x"+toString$1(keccak_256$3
         `Could not confirm network switch to ${networkName} after 15s. ` +
           `Please switch manually in your wallet and try again.`
       );
-    }
+    },
+  };
+
+  function resolveAcceptedTokens(input) {
+    if (!input) return null;
+    if (input === "stablecoins") return STABLECOIN_SYMBOLS;
+    if (Array.isArray(input) && input.length)
+      return input.map((t) => t.toUpperCase());
+    return null;
+  }
 
-    // ── Step navigation ──────────────────────────────────────────────────────────
+  class KwesPayWidget {
+    constructor(config) {
+      if (!config.apiKey) throw new Error("[KwesPayWidget] apiKey is required");
+      if (!config.vendorId)
+        throw new Error("[KwesPayWidget] vendorId is required");
+      if (!config.amount || parseFloat(config.amount) <= 0)
+        throw new Error("[KwesPayWidget] Valid amount is required");
 
-    _goToStep(stepNumber) {
-      document
-        .querySelectorAll(".kwespay-container .step")
-        .forEach((s) => s.classList.remove("active", "exiting"));
-      this._activateStep(stepNumber);
-      this.state.currentStep = stepNumber;
-    }
+      this.config = {
+        apiKey: config.apiKey,
+        vendorId: config.vendorId,
+        amount: parseFloat(config.amount),
+        currency: config.currency || DEFAULT_CONFIG.currency,
+        graphqlEndpoint: DEFAULT_CONFIG.graphqlEndpoint,
+        acceptedTokens: resolveAcceptedTokens(config.acceptedTokens),
+      };
 
-    _activateStep(stepNumber) {
-      let targetStep;
-      if (stepNumber === 0.5)
-        targetStep = document.getElementById("kwespay-step0-invalid");
-      else if (typeof stepNumber === "string")
-        targetStep = document.getElementById(`kwespay-step-${stepNumber}`);
-      else targetStep = document.getElementById(`kwespay-step${stepNumber}`);
+      if (!Object.values(SUPPORTED_CURRENCIES).includes(this.config.currency)) {
+        throw new Error(
+          `[KwesPayWidget] Unsupported currency: ${this.config.currency}`
+        );
+      }
 
-      if (targetStep) targetStep.classList.add("active");
-      else console.warn(`[KwesPayWidget] Step not found: ${stepNumber}`);
-    }
+      this.walletService = new WalletService();
+      this.paymentService = new PaymentService$1(
+        this.config.apiKey,
+        this.config.graphqlEndpoint
+      );
 
-    _removeCustomStep(id) {
-      document.getElementById(id)?.remove();
-    }
+      this.state = {
+        isOpen: false,
+        currentStep: 0,
+        selectedNetwork: null,
+        selectedNetworkName: "",
+        selectedChainId: null,
+        selectedRpcUrl: null,
+        selectedContractAddress: null,
+        selectedToken: null,
+        selectedTokenConfig: null,
+        vendorInfo: null,
+        keyAllowedNetworks: null,
+        keyAllowedTokens: null,
+        currentPayload: null,
+        quoteTimerInterval: null,
+        wcUri: null,
+      };
 
-    _showError(title, message) {
-      const titleEl = document.getElementById("kwespay-errorTitle");
-      const msgEl = document.getElementById("kwespay-errorMessage");
-      if (titleEl) titleEl.textContent = title;
-      if (msgEl) msgEl.textContent = message;
-      this._goToStep(6);
+      this._init();
     }
 
-    // ── Public API ───────────────────────────────────────────────────────────────
-
     async open() {
       const overlay = document.getElementById("kwespay-widget-overlay");
       const container = document.getElementById("kwespay-widget-container");
@@ -19631,21 +19614,6 @@ ${e.length}`,n=new TextEncoder().encode(t+e);return "0x"+toString$1(keccak_256$3
       return { ...this.state, config: { ...this.config } };
     }
 
-    _reset() {
-      this._clearQuoteTimer();
-      this._removeCustomStep("kwespay-step-wallet-picker");
-      this._removeCustomStep("kwespay-step-wc");
-      this.state.selectedNetwork = null;
-      this.state.selectedNetworkName = "";
-      this.state.selectedChainId = null;
-      this.state.selectedRpcUrl = null;
-      this.state.selectedContractAddress = null;
-      this.state.selectedToken = null;
-      this.state.selectedTokenConfig = null;
-      this.state.currentPayload = null;
-      this.state.wcUri = null;
-    }
-
     destroy() {
       this._clearQuoteTimer();
       document.body.classList.remove("kwespay-open");
@@ -19660,6 +19628,17 @@ ${e.length}`,n=new TextEncoder().encode(t+e);return "0x"+toString$1(keccak_256$3
     }
   }
 
+  Object.assign(
+    KwesPayWidget.prototype,
+    DomMethods,
+    NavMethods,
+    APIKeyMethods,
+    NetworkMethods,
+    WalletMethods,
+    QuoteMethods,
+    PaymentMethods
+  );
+
   /**
    * KwesPay Widget - Main entry point
    * @module @kwespay/widget