@directcryptopay/sdk 0.2.2 → 0.2.4

package/dist/{index-DobBVPe4.js → index-hyG3cYsv.js}

@@ -1,13 +1,16 @@
-import { di as Y, dJ as _, d1 as R, cY as h, dd as U, d6 as f, dK as $, cU as W, d8 as A, cZ as I, cX as E, cJ as O, dL as S, cS as P, cV as B, cW as H, cE as M, cF as G, cG as d, c$ as F } from "./index-BJ7cbG3N.js";
-import { o as C, r as w, c as V } from "./if-defined-CNte9B3N.js";
-import "./index-Uw9cSw0q.js";
-import "./index-DYdXjap2.js";
-import "./index-D2AMA8Bu.js";
-import "./index-CmWdvIFT.js";
-import "./index-DceCxNV5.js";
-import "./index-BaJ0zEbh.js";
-import "./index-qiuyrukh.js";
-import "./index-DAUM8CO4.js";
+import { cM as $, dz as b, cG as C, cE as p, d2 as g, dA as B, d1 as w, dB as j, cC as q, cF as _, cH as T, d0 as L, df as x, cR as z, cS as X, c_ as F, cX as W, cY as m, di as J, d8 as M, dh as Z } from "./index-DeL88Lwc.js";
+import { r as h, c as H } from "./index-DuTny38n.js";
+import { o as Y } from "./if-defined-k21LutCn.js";
+import "./index-BmFs6nb7.js";
+import "./index-BCkEvPQ6.js";
+import "./index-DOXwtuwa.js";
+import "./index-DFi8TiHc.js";
+import "./index-DPPOW_Tp.js";
+import "./index-B8LkUrww.js";
+import "./index-BB9JJ24N.js";
+import "./index-DrWVlf8b.js";
+import "./index-Dsfuc4rB.js";
+import "./index-CBMU3PTE.js";
 const o = {
   INVALID_PAYMENT_CONFIG: "INVALID_PAYMENT_CONFIG",
   INVALID_RECIPIENT: "INVALID_RECIPIENT",
@@ -21,7 +24,7 @@ const o = {
   ASSET_NOT_SUPPORTED: "ASSET_NOT_SUPPORTED",
   UNABLE_TO_GET_PAY_URL: "UNABLE_TO_GET_PAY_URL",
   UNABLE_TO_GET_BUY_STATUS: "UNABLE_TO_GET_BUY_STATUS"
-}, g = {
+}, N = {
   [o.INVALID_PAYMENT_CONFIG]: "Invalid payment configuration",
   [o.INVALID_RECIPIENT]: "Invalid recipient address",
   [o.INVALID_ASSET]: "Invalid asset specified",
@@ -37,44 +40,49 @@ const o = {
 };
 class c extends Error {
   get message() {
-    return g[this.code];
+    return N[this.code];
   }
   constructor(e, s) {
-    super(g[e]), this.name = "AppKitPayError", this.code = e, this.details = s, Error.captureStackTrace && Error.captureStackTrace(this, c);
+    super(N[e]), this.name = "AppKitPayError", this.code = e, this.details = s, Error.captureStackTrace && Error.captureStackTrace(this, c);
   }
 }
-const j = "https://rpc.walletconnect.org/v1/json-rpc";
-class K extends Error {
+const Q = "https://rpc.walletconnect.org/v1/json-rpc";
+class ee extends Error {
 }
-function z() {
-  const t = Y.getSnapshot().projectId;
-  return `${j}?projectId=${t}`;
+function te() {
+  const t = $.getSnapshot().projectId;
+  return `${Q}?projectId=${t}`;
 }
-async function k(t, e) {
-  const s = z(), i = await (await fetch(s, {
+async function O(t, e) {
+  const s = te(), { sdkType: a, sdkVersion: r, projectId: i } = $.getSnapshot(), u = {
+    jsonrpc: "2.0",
+    id: 1,
+    method: t,
+    params: {
+      ...e || {},
+      st: a,
+      sv: r,
+      projectId: i
+    }
+  }, A = await (await fetch(s, {
     method: "POST",
-    body: JSON.stringify({
-      jsonrpc: "2.0",
-      id: 1,
-      method: t,
-      params: e
-    }),
+    body: JSON.stringify(u),
     headers: { "Content-Type": "application/json" }
   })).json();
-  if (i.error)
-    throw new K(i.error.message);
-  return i;
+  if (A.error)
+    throw new ee(A.error.message);
+  return A;
 }
-async function L(t) {
-  return (await k("reown_getExchanges", t)).result;
+async function G(t) {
+  return (await O("reown_getExchanges", t)).result;
 }
-async function q(t) {
-  return (await k("reown_getExchangePayUrl", t)).result;
+async function ne(t) {
+  return (await O("reown_getExchangePayUrl", t)).result;
 }
-async function X(t) {
-  return (await k("reown_getExchangeBuyStatus", t)).result;
+async function se(t) {
+  return (await O("reown_getExchangeBuyStatus", t)).result;
 }
-const J = ["eip155"], Z = {
+const ae = ["eip155", "solana"], re = {
   eip155: {
     native: { assetNamespace: "slip44", assetReference: "60" },
     defaultTokenNamespace: "erc20"
@@ -84,45 +92,45 @@ const J = ["eip155"], Z = {
     defaultTokenNamespace: "token"
   }
 };
-function b(t, e) {
-  const { chainNamespace: s, chainId: a } = _.parseCaipNetworkId(t), r = Z[s];
+function R(t, e) {
+  const { chainNamespace: s, chainId: a } = b.parseCaipNetworkId(t), r = re[s];
   if (!r)
     throw new Error(`Unsupported chain namespace for CAIP-19 formatting: ${s}`);
   let i = r.native.assetNamespace, u = r.native.assetReference;
   return e !== "native" && (i = r.defaultTokenNamespace, u = e), `${`${s}:${a}`}/${i}:${u}`;
 }
-function Q(t) {
-  const { chainNamespace: e } = _.parseCaipNetworkId(t);
-  return J.includes(e);
+function ie(t) {
+  const { chainNamespace: e } = b.parseCaipNetworkId(t);
+  return ae.includes(e);
 }
-async function ee(t) {
-  const { paymentAssetNetwork: e, activeCaipNetwork: s, approvedCaipNetworkIds: a, requestedCaipNetworks: r } = t, u = R.sortRequestedNetworks(a, r).find((T) => T.caipNetworkId === e);
+async function oe(t) {
+  const { paymentAssetNetwork: e, activeCaipNetwork: s, approvedCaipNetworkIds: a, requestedCaipNetworks: r } = t, u = C.sortRequestedNetworks(a, r).find((P) => P.caipNetworkId === e);
   if (!u)
     throw new c(o.INVALID_PAYMENT_CONFIG);
   if (u.caipNetworkId === s.caipNetworkId)
     return;
-  const p = h.getNetworkProp("supportsAllNetworks", u.chainNamespace);
-  if (!((a == null ? void 0 : a.includes(u.caipNetworkId)) || p))
+  const d = p.getNetworkProp("supportsAllNetworks", u.chainNamespace);
+  if (!((a == null ? void 0 : a.includes(u.caipNetworkId)) || d))
     throw new c(o.INVALID_PAYMENT_CONFIG);
   try {
-    await h.switchActiveNetwork(u);
-  } catch (T) {
-    throw new c(o.GENERIC_PAYMENT_ERROR, T);
+    await p.switchActiveNetwork(u);
+  } catch (P) {
+    throw new c(o.GENERIC_PAYMENT_ERROR, P);
   }
 }
-async function te(t, e, s) {
-  var p;
-  if (e !== U.CHAIN.EVM)
+async function ce(t, e, s) {
+  var d;
+  if (e !== g.CHAIN.EVM)
     throw new c(o.INVALID_CHAIN_NAMESPACE);
   if (!s.fromAddress)
     throw new c(o.INVALID_PAYMENT_CONFIG, "fromAddress is required for native EVM payments.");
   const a = typeof s.amount == "string" ? parseFloat(s.amount) : s.amount;
   if (isNaN(a))
     throw new c(o.INVALID_PAYMENT_CONFIG);
-  const r = ((p = t.metadata) == null ? void 0 : p.decimals) ?? 18, i = f.parseUnits(a.toString(), r);
+  const r = ((d = t.metadata) == null ? void 0 : d.decimals) ?? 18, i = w.parseUnits(a.toString(), r);
   if (typeof i != "bigint")
     throw new c(o.GENERIC_PAYMENT_ERROR);
-  return await f.sendTransaction({
+  return await w.sendTransaction({
     chainNamespace: e,
     to: s.recipient,
     address: s.fromAddress,
@@ -130,22 +138,46 @@ async function te(t, e, s) {
     data: "0x"
   }) ?? void 0;
 }
-async function ne(t, e) {
+async function ue(t, e) {
   if (!e.fromAddress)
     throw new c(o.INVALID_PAYMENT_CONFIG, "fromAddress is required for ERC20 EVM payments.");
-  const s = t.asset, a = e.recipient, r = Number(t.metadata.decimals), i = f.parseUnits(e.amount.toString(), r);
+  const s = t.asset, a = e.recipient, r = Number(t.metadata.decimals), i = w.parseUnits(e.amount.toString(), r);
   if (i === void 0)
     throw new c(o.GENERIC_PAYMENT_ERROR);
-  return await f.writeContract({
+  return await w.writeContract({
     fromAddress: e.fromAddress,
     tokenAddress: s,
     args: [a, i],
     method: "transfer",
-    abi: $.getERC20Abi(s),
-    chainNamespace: U.CHAIN.EVM
+    abi: j.getERC20Abi(s),
+    chainNamespace: g.CHAIN.EVM
   }) ?? void 0;
 }
-const D = 0, v = "unknown", n = W({
+async function le(t, e) {
+  if (t !== g.CHAIN.SOLANA)
+    throw new c(o.INVALID_CHAIN_NAMESPACE);
+  if (!e.fromAddress)
+    throw new c(o.INVALID_PAYMENT_CONFIG, "fromAddress is required for Solana payments.");
+  const s = typeof e.amount == "string" ? parseFloat(e.amount) : e.amount;
+  if (isNaN(s) || s <= 0)
+    throw new c(o.INVALID_PAYMENT_CONFIG, "Invalid payment amount.");
+  try {
+    if (!B.getProvider(t))
+      throw new c(o.GENERIC_PAYMENT_ERROR, "No Solana provider available.");
+    const r = await w.sendTransaction({
+      chainNamespace: g.CHAIN.SOLANA,
+      to: e.recipient,
+      value: s,
+      tokenMint: e.tokenMint
+    });
+    if (!r)
+      throw new c(o.GENERIC_PAYMENT_ERROR, "Transaction failed.");
+    return r;
+  } catch (a) {
+    throw a instanceof c ? a : new c(o.GENERIC_PAYMENT_ERROR, `Solana payment failed: ${a}`);
+  }
+}
+const V = 0, v = "unknown", n = q({
   paymentAsset: {
     network: "eip155:1",
     asset: "0x0",
@@ -171,13 +203,13 @@ const D = 0, v = "unknown", n = W({
 }), l = {
   state: n,
   subscribe(t) {
-    return H(n, () => t(n));
+    return X(n, () => t(n));
   },
   subscribeKey(t, e) {
-    return B(n, t, e);
+    return z(n, t, e);
   },
   async handleOpenPay(t) {
-    this.resetState(), this.setPaymentConfig(t), this.subscribeEvents(), this.initializeAnalytics(), n.isConfigured = !0, A.sendEvent({
+    this.resetState(), this.setPaymentConfig(t), this.subscribeEvents(), this.initializeAnalytics(), n.isConfigured = !0, _.sendEvent({
       type: "track",
       event: "PAY_MODAL_OPEN",
       properties: {
@@ -189,7 +221,7 @@ const D = 0, v = "unknown", n = W({
           amount: n.amount
         }
       }
-    }), await P.open({
+    }), await x.open({
       view: "Pay"
     });
   },
@@ -218,14 +250,14 @@ const D = 0, v = "unknown", n = W({
   async fetchExchanges() {
     try {
       n.isLoading = !0;
-      const t = await L({
-        page: D,
-        asset: b(n.paymentAsset.network, n.paymentAsset.asset),
+      const t = await G({
+        page: V,
+        asset: R(n.paymentAsset.network, n.paymentAsset.asset),
         amount: n.amount.toString()
       });
       n.exchanges = t.exchanges.slice(0, 2);
     } catch {
-      throw I.showError(g.UNABLE_TO_GET_EXCHANGES), new c(o.UNABLE_TO_GET_EXCHANGES);
+      throw T.showError(N.UNABLE_TO_GET_EXCHANGES), new c(o.UNABLE_TO_GET_EXCHANGES);
     } finally {
       n.isLoading = !1;
     }
@@ -233,9 +265,9 @@ const D = 0, v = "unknown", n = W({
   async getAvailableExchanges(t) {
     var e;
     try {
-      const s = t != null && t.asset && (t != null && t.network) ? b(t.network, t.asset) : void 0;
-      return await L({
-        page: (t == null ? void 0 : t.page) ?? D,
+      const s = t != null && t.asset && (t != null && t.network) ? R(t.network, t.asset) : void 0;
+      return await G({
+        page: (t == null ? void 0 : t.page) ?? V,
         asset: s,
         amount: (e = t == null ? void 0 : t.amount) == null ? void 0 : e.toString()
       });
@@ -245,16 +277,17 @@ const D = 0, v = "unknown", n = W({
   },
   async getPayUrl(t, e, s = !1) {
     try {
-      const a = Number(e.amount), r = await q({
+      const a = Number(e.amount), r = await ne({
         exchangeId: t,
-        asset: b(e.network, e.asset),
+        asset: R(e.network, e.asset),
         amount: a.toString(),
         recipient: `${e.network}:${e.recipient}`
       });
-      return A.sendEvent({
+      return _.sendEvent({
         type: "track",
         event: "PAY_EXCHANGE_SELECTED",
         properties: {
+          source: "pay",
           exchange: {
             id: t
           },
@@ -270,10 +303,11 @@ const D = 0, v = "unknown", n = W({
           },
           headless: s
         }
-      }), s && (this.initiatePayment(), A.sendEvent({
+      }), s && (this.initiatePayment(), _.sendEvent({
         type: "track",
         event: "PAY_INITIATED",
         properties: {
+          source: "pay",
           paymentId: n.paymentId || v,
           configuration: {
             network: e.network,
@@ -297,17 +331,19 @@ const D = 0, v = "unknown", n = W({
       if (!a)
         throw new c(o.UNABLE_TO_GET_PAY_URL);
       const i = t.openInNewTab ?? !0 ? "_blank" : "_self";
-      return R.openHref(a.url, i), a;
+      return C.openHref(a.url, i), a;
     } catch (a) {
-      throw a instanceof c ? n.error = a.message : n.error = g.GENERIC_PAYMENT_ERROR, new c(o.UNABLE_TO_GET_PAY_URL);
+      throw a instanceof c ? n.error = a.message : n.error = N.GENERIC_PAYMENT_ERROR, new c(o.UNABLE_TO_GET_PAY_URL);
     }
   },
   subscribeEvents() {
-    n.isConfigured || (S.subscribeProviders(async (t) => {
-      const e = h.state.activeChain;
-      S.getProvider(e) && await this.handlePayment();
-    }), E.subscribeKey("caipAddress", async (t) => {
-      t && await this.handlePayment();
+    n.isConfigured || (w.subscribeKey("connections", (t) => {
+      t.size > 0 && this.handlePayment();
+    }), p.subscribeChainProp("accountState", (t) => {
+      const e = w.hasAnyConnection(g.CONNECTOR_ID.WALLET_CONNECT);
+      t != null && t.caipAddress && (e ? setTimeout(() => {
+        this.handlePayment();
+      }, 100) : this.handlePayment());
     }));
   },
   async handlePayment() {
@@ -315,41 +351,49 @@ const D = 0, v = "unknown", n = W({
       type: "wallet",
       status: "IN_PROGRESS"
     };
-    const t = E.state.caipAddress;
+    const t = p.getActiveCaipAddress();
     if (!t)
       return;
-    const { chainId: e, address: s } = _.parseCaipAddress(t), a = h.state.activeChain;
-    if (!s || !e || !a || !S.getProvider(a))
+    const { chainId: e, address: s } = b.parseCaipAddress(t), a = p.state.activeChain;
+    if (!s || !e || !a || !B.getProvider(a))
       return;
-    const i = h.state.activeCaipNetwork;
+    const i = p.state.activeCaipNetwork;
     if (i && !n.isPaymentInProgress)
       try {
         this.initiatePayment();
-        const u = h.getAllRequestedCaipNetworks(), p = h.getAllApprovedCaipNetworkIds();
-        switch (await ee({
+        const u = p.getAllRequestedCaipNetworks(), d = p.getAllApprovedCaipNetworkIds();
+        switch (await oe({
           paymentAssetNetwork: n.paymentAsset.network,
           activeCaipNetwork: i,
-          approvedCaipNetworkIds: p,
+          approvedCaipNetworkIds: d,
           requestedCaipNetworks: u
-        }), await P.open({
+        }), await x.open({
           view: "PayLoading"
         }), a) {
-          case U.CHAIN.EVM:
-            n.paymentAsset.asset === "native" && (n.currentPayment.result = await te(n.paymentAsset, a, {
+          case g.CHAIN.EVM:
+            n.paymentAsset.asset === "native" && (n.currentPayment.result = await ce(n.paymentAsset, a, {
               recipient: n.recipient,
               amount: n.amount,
               fromAddress: s
-            })), n.paymentAsset.asset.startsWith("0x") && (n.currentPayment.result = await ne(n.paymentAsset, {
+            })), n.paymentAsset.asset.startsWith("0x") && (n.currentPayment.result = await ue(n.paymentAsset, {
               recipient: n.recipient,
               amount: n.amount,
               fromAddress: s
             })), n.currentPayment.status = "SUCCESS";
             break;
+          case g.CHAIN.SOLANA:
+            n.currentPayment.result = await le(a, {
+              recipient: n.recipient,
+              amount: n.amount,
+              fromAddress: s,
+              tokenMint: n.paymentAsset.asset === "native" ? void 0 : n.paymentAsset.asset
+            }), n.currentPayment.status = "SUCCESS";
+            break;
           default:
             throw new c(o.INVALID_CHAIN_NAMESPACE);
         }
       } catch (u) {
-        u instanceof c ? n.error = u.message : n.error = g.GENERIC_PAYMENT_ERROR, n.currentPayment.status = "FAILED", I.showError(n.error);
+        u instanceof c ? n.error = u.message : n.error = N.GENERIC_PAYMENT_ERROR, n.currentPayment.status = "FAILED", T.showError(n.error);
       } finally {
         n.isPaymentInProgress = !1;
       }
@@ -369,14 +413,14 @@ const D = 0, v = "unknown", n = W({
       throw new c(o.INVALID_AMOUNT);
   },
   handlePayWithWallet() {
-    const t = E.state.caipAddress;
+    const t = p.getActiveCaipAddress();
     if (!t) {
-      O.push("Connect");
+      L.push("Connect");
       return;
     }
-    const { chainId: e, address: s } = _.parseCaipAddress(t), a = h.state.activeChain;
+    const { chainId: e, address: s } = b.parseCaipAddress(t), a = p.state.activeChain;
     if (!s || !e || !a) {
-      O.push("Connect");
+      L.push("Connect");
       return;
     }
     this.handlePayment();
@@ -400,17 +444,19 @@ const D = 0, v = "unknown", n = W({
         openInNewTab: n.openInNewTab
       };
     } catch (e) {
-      return e instanceof c ? n.error = e.message : n.error = g.GENERIC_PAYMENT_ERROR, n.isPaymentInProgress = !1, I.showError(n.error), null;
+      return e instanceof c ? n.error = e.message : n.error = N.GENERIC_PAYMENT_ERROR, n.isPaymentInProgress = !1, T.showError(n.error), null;
     }
   },
   async getBuyStatus(t, e) {
     var s, a;
     try {
-      const r = await X({ sessionId: e, exchangeId: t });
-      return (r.status === "SUCCESS" || r.status === "FAILED") && A.sendEvent({
+      const r = await se({ sessionId: e, exchangeId: t });
+      return (r.status === "SUCCESS" || r.status === "FAILED") && _.sendEvent({
         type: "track",
         event: r.status === "SUCCESS" ? "PAY_SUCCESS" : "PAY_ERROR",
         properties: {
+          message: r.status === "FAILED" ? C.parseError(n.error) : void 0,
+          source: "pay",
           paymentId: n.paymentId || v,
           configuration: {
             network: n.paymentAsset.network,
@@ -450,10 +496,12 @@ const D = 0, v = "unknown", n = W({
           SUCCESS: "PAY_SUCCESS",
           FAILED: "PAY_ERROR"
         }[n.currentPayment.status];
-        A.sendEvent({
+        _.sendEvent({
           type: "track",
           event: s,
           properties: {
+            message: n.currentPayment.status === "FAILED" ? C.parseError(n.error) : void 0,
+            source: "pay",
             paymentId: n.paymentId || v,
             configuration: {
               network: n.paymentAsset.network,
@@ -472,19 +520,19 @@ const D = 0, v = "unknown", n = W({
       }
     }));
   }
-}, se = M`
+}, de = F`
   wui-separator {
-    margin: var(--wui-spacing-m) calc(var(--wui-spacing-m) * -1) var(--wui-spacing-xs)
-      calc(var(--wui-spacing-m) * -1);
-    width: calc(100% + var(--wui-spacing-s) * 2);
+    margin: var(--apkt-spacing-3) calc(var(--apkt-spacing-3) * -1) var(--apkt-spacing-2)
+      calc(var(--apkt-spacing-3) * -1);
+    width: calc(100% + var(--apkt-spacing-3) * 2);
   }
 
   .token-display {
-    padding: var(--wui-spacing-s) var(--wui-spacing-m);
-    border-radius: var(--wui-border-radius-s);
-    background-color: var(--wui-color-bg-125);
-    margin-top: var(--wui-spacing-s);
-    margin-bottom: var(--wui-spacing-s);
+    padding: var(--apkt-spacing-3) var(--apkt-spacing-3);
+    border-radius: var(--apkt-borderRadius-5);
+    background-color: var(--apkt-tokens-theme-backgroundPrimary);
+    margin-top: var(--apkt-spacing-3);
+    margin-bottom: var(--apkt-spacing-3);
   }
 
   .token-display wui-text {
@@ -492,29 +540,33 @@ const D = 0, v = "unknown", n = W({
   }
 
   wui-loading-spinner {
-    padding: var(--wui-spacing-xs);
+    padding: var(--apkt-spacing-2);
   }
 `;
-var y = function(t, e, s, a) {
+var E = function(t, e, s, a) {
   var r = arguments.length, i = r < 3 ? e : a === null ? a = Object.getOwnPropertyDescriptor(e, s) : a, u;
   if (typeof Reflect == "object" && typeof Reflect.decorate == "function") i = Reflect.decorate(t, e, s, a);
-  else for (var p = t.length - 1; p >= 0; p--) (u = t[p]) && (i = (r < 3 ? u(i) : r > 3 ? u(e, s, i) : u(e, s)) || i);
+  else for (var d = t.length - 1; d >= 0; d--) (u = t[d]) && (i = (r < 3 ? u(i) : r > 3 ? u(e, s, i) : u(e, s)) || i);
   return r > 3 && i && Object.defineProperty(e, s, i), i;
 };
-let m = class extends G {
+let y = class extends W {
   constructor() {
-    super(), this.unsubscribe = [], this.amount = "", this.tokenSymbol = "", this.networkName = "", this.exchanges = l.state.exchanges, this.isLoading = l.state.isLoading, this.loadingExchangeId = null, this.connectedWalletInfo = E.state.connectedWalletInfo, this.initializePaymentDetails(), this.unsubscribe.push(l.subscribeKey("exchanges", (e) => this.exchanges = e)), this.unsubscribe.push(l.subscribeKey("isLoading", (e) => this.isLoading = e)), this.unsubscribe.push(E.subscribe((e) => this.connectedWalletInfo = e.connectedWalletInfo)), l.fetchExchanges();
+    var e;
+    super(), this.unsubscribe = [], this.amount = "", this.tokenSymbol = "", this.networkName = "", this.exchanges = l.state.exchanges, this.isLoading = l.state.isLoading, this.loadingExchangeId = null, this.connectedWalletInfo = (e = p.getAccountData()) == null ? void 0 : e.connectedWalletInfo, this.initializePaymentDetails(), this.unsubscribe.push(l.subscribeKey("exchanges", (s) => this.exchanges = s)), this.unsubscribe.push(l.subscribeKey("isLoading", (s) => this.isLoading = s)), this.unsubscribe.push(p.subscribeChainProp("accountState", (s) => {
+      this.connectedWalletInfo = s == null ? void 0 : s.connectedWalletInfo;
+    })), l.fetchExchanges();
   }
   get isWalletConnected() {
-    return E.state.status === "connected";
+    const e = p.getAccountData();
+    return (e == null ? void 0 : e.status) === "connected";
   }
   render() {
-    return d`
+    return m`
       <wui-flex flexDirection="column">
-        <wui-flex flexDirection="column" .padding=${["0", "l", "l", "l"]} gap="s">
+        <wui-flex flexDirection="column" .padding=${["0", "4", "4", "4"]} gap="3">
           ${this.renderPaymentHeader()}
 
-          <wui-flex flexDirection="column" gap="s">
+          <wui-flex flexDirection="column" gap="3">
             ${this.renderPayWithWallet()} ${this.renderExchangeOptions()}
           </wui-flex>
         </wui-flex>
@@ -526,27 +578,29 @@ let m = class extends G {
     this.networkName = e.network, this.tokenSymbol = e.metadata.symbol, this.amount = l.state.amount.toString();
   }
   renderPayWithWallet() {
-    return Q(this.networkName) ? d`<wui-flex flexDirection="column" gap="s">
+    return ie(this.networkName) ? m`<wui-flex flexDirection="column" gap="3">
         ${this.isWalletConnected ? this.renderConnectedView() : this.renderDisconnectedView()}
       </wui-flex>
-      <wui-separator text="or"></wui-separator>` : d``;
+      <wui-separator text="or"></wui-separator>` : m``;
   }
   renderPaymentHeader() {
     let e = this.networkName;
     if (this.networkName) {
-      const a = h.getAllRequestedCaipNetworks().find((r) => r.caipNetworkId === this.networkName);
+      const a = p.getAllRequestedCaipNetworks().find((r) => r.caipNetworkId === this.networkName);
       a && (e = a.name);
     }
-    return d`
+    return m`
       <wui-flex flexDirection="column" alignItems="center">
-        <wui-flex alignItems="center" gap="xs">
-          <wui-text variant="large-700" color="fg-100">${this.amount || "0.0000"}</wui-text>
-          <wui-flex class="token-display" alignItems="center" gap="xxs">
-            <wui-text variant="paragraph-600" color="fg-100">
+        <wui-flex alignItems="center" gap="2">
+          <wui-text variant="h1-regular" color="primary">${this.amount || "0.0000"}</wui-text>
+          <wui-flex class="token-display" alignItems="center" gap="1">
+            <wui-text variant="md-medium" color="primary">
               ${this.tokenSymbol || "Unknown Asset"}
             </wui-text>
-            ${e ? d`
-                  <wui-text variant="small-500" color="fg-200"> on ${e} </wui-text>
+            ${e ? m`
+                  <wui-text variant="sm-medium" color="secondary">
+                    on ${e}
+                  </wui-text>
                 ` : ""}
           </wui-flex>
         </wui-flex>
@@ -554,68 +608,62 @@ let m = class extends G {
     `;
   }
   renderConnectedView() {
-    var s, a, r;
+    var s, a;
     const e = ((s = this.connectedWalletInfo) == null ? void 0 : s.name) || "connected wallet";
-    return d`
+    return m`
       <wui-list-item
         @click=${this.onWalletPayment}
         ?chevron=${!0}
+        ?fullSize=${!0}
+        ?rounded=${!0}
         data-testid="wallet-payment-option"
+        imageSrc=${Y((a = this.connectedWalletInfo) == null ? void 0 : a.icon)}
       >
-        <wui-flex alignItems="center" gap="s">
-          <wui-wallet-image
-            size="sm"
-            imageSrc=${C((a = this.connectedWalletInfo) == null ? void 0 : a.icon)}
-            name=${C((r = this.connectedWalletInfo) == null ? void 0 : r.name)}
-          ></wui-wallet-image>
-          <wui-text variant="paragraph-500" color="inherit">Pay with ${e}</wui-text>
-        </wui-flex>
+        <wui-text variant="lg-regular" color="primary">Pay with ${e}</wui-text>
       </wui-list-item>
 
       <wui-list-item
-        variant="icon"
-        iconVariant="overlay"
-        icon="disconnect"
+        icon="power"
+        ?rounded=${!0}
+        iconColor="error"
         @click=${this.onDisconnect}
         data-testid="disconnect-button"
         ?chevron=${!1}
       >
-        <wui-text variant="paragraph-500" color="fg-200">Disconnect</wui-text>
+        <wui-text variant="lg-regular" color="secondary">Disconnect</wui-text>
       </wui-list-item>
     `;
   }
   renderDisconnectedView() {
-    return d`<wui-list-item
+    return m`<wui-list-item
       variant="icon"
       iconVariant="overlay"
-      icon="walletPlaceholder"
+      icon="wallet"
+      ?rounded=${!0}
       @click=${this.onWalletPayment}
       ?chevron=${!0}
       data-testid="wallet-payment-option"
     >
-      <wui-text variant="paragraph-500" color="inherit">Pay from wallet</wui-text>
+      <wui-text variant="lg-regular" color="primary">Pay from wallet</wui-text>
     </wui-list-item>`;
   }
   renderExchangeOptions() {
-    return this.isLoading ? d`<wui-flex justifyContent="center" alignItems="center">
+    return this.isLoading ? m`<wui-flex justifyContent="center" alignItems="center">
         <wui-spinner size="md"></wui-spinner>
-      </wui-flex>` : this.exchanges.length === 0 ? d`<wui-flex justifyContent="center" alignItems="center">
-        <wui-text variant="paragraph-500" color="fg-100">No exchanges available</wui-text>
-      </wui-flex>` : this.exchanges.map((e) => d`
+      </wui-flex>` : this.exchanges.length === 0 ? m`<wui-flex justifyContent="center" alignItems="center">
+        <wui-text variant="md-medium" color="primary">No exchanges available</wui-text>
+      </wui-flex>` : this.exchanges.map((e) => m`
         <wui-list-item
           @click=${() => this.onExchangePayment(e.id)}
           data-testid="exchange-option-${e.id}"
           ?chevron=${!0}
           ?disabled=${this.loadingExchangeId !== null}
+          ?loading=${this.loadingExchangeId === e.id}
+          imageSrc=${Y(e.imageUrl)}
         >
-          <wui-flex alignItems="center" gap="s">
-            ${this.loadingExchangeId === e.id ? d`<wui-loading-spinner color="accent-100" size="md"></wui-loading-spinner>` : d`<wui-wallet-image
-                  size="sm"
-                  imageSrc=${C(e.imageUrl)}
-                  name=${e.name}
-                ></wui-wallet-image>`}
-            <wui-text flexGrow="1" variant="paragraph-500" color="inherit"
-              >Pay with ${e.name} <wui-spinner size="sm" color="fg-200"></wui-spinner
+          <wui-flex alignItems="center" gap="3">
+            <wui-text flexGrow="1" variant="md-medium" color="primary"
+              >Pay with ${e.name} <wui-spinner size="sm" color="secondary"></wui-spinner
             ></wui-text>
           </wui-flex>
         </wui-list-item>
@@ -628,11 +676,11 @@ let m = class extends G {
     try {
       this.loadingExchangeId = e;
       const s = await l.handlePayWithExchange(e);
-      s && (await P.open({
+      s && (await x.open({
         view: "PayLoading"
-      }), R.openHref(s.url, s.openInNewTab ? "_blank" : "_self"));
+      }), C.openHref(s.url, s.openInNewTab ? "_blank" : "_self"));
     } catch (s) {
-      console.error("Failed to pay with exchange", s), I.showError("Failed to pay with exchange");
+      console.error("Failed to pay with exchange", s), T.showError("Failed to pay with exchange");
     } finally {
       this.loadingExchangeId = null;
     }
@@ -640,55 +688,63 @@ let m = class extends G {
   async onDisconnect(e) {
     e.stopPropagation();
     try {
-      await f.disconnect(), P.close();
+      await w.disconnect();
     } catch {
-      console.error("Failed to disconnect"), I.showError("Failed to disconnect");
+      console.error("Failed to disconnect"), T.showError("Failed to disconnect");
     }
   }
   disconnectedCallback() {
     this.unsubscribe.forEach((e) => e());
   }
 };
-m.styles = se;
-y([
-  w()
-], m.prototype, "amount", void 0);
-y([
-  w()
-], m.prototype, "tokenSymbol", void 0);
-y([
-  w()
-], m.prototype, "networkName", void 0);
-y([
-  w()
-], m.prototype, "exchanges", void 0);
-y([
-  w()
-], m.prototype, "isLoading", void 0);
-y([
-  w()
-], m.prototype, "loadingExchangeId", void 0);
-y([
-  w()
-], m.prototype, "connectedWalletInfo", void 0);
-m = y([
-  V("w3m-pay-view")
-], m);
-const ae = M`
+y.styles = de;
+E([
+  h()
+], y.prototype, "amount", void 0);
+E([
+  h()
+], y.prototype, "tokenSymbol", void 0);
+E([
+  h()
+], y.prototype, "networkName", void 0);
+E([
+  h()
+], y.prototype, "exchanges", void 0);
+E([
+  h()
+], y.prototype, "isLoading", void 0);
+E([
+  h()
+], y.prototype, "loadingExchangeId", void 0);
+E([
+  h()
+], y.prototype, "connectedWalletInfo", void 0);
+y = E([
+  H("w3m-pay-view")
+], y);
+const pe = F`
   :host {
     display: block;
     height: 100%;
     width: 100%;
   }
+
+  wui-flex:first-child:not(:only-child) {
+    position: relative;
+  }
+
+  wui-loading-thumbnail {
+    position: absolute;
+  }
 `;
-var x = function(t, e, s, a) {
+var U = function(t, e, s, a) {
   var r = arguments.length, i = r < 3 ? e : a === null ? a = Object.getOwnPropertyDescriptor(e, s) : a, u;
   if (typeof Reflect == "object" && typeof Reflect.decorate == "function") i = Reflect.decorate(t, e, s, a);
-  else for (var p = t.length - 1; p >= 0; p--) (u = t[p]) && (i = (r < 3 ? u(i) : r > 3 ? u(e, s, i) : u(e, s)) || i);
+  else for (var d = t.length - 1; d >= 0; d--) (u = t[d]) && (i = (r < 3 ? u(i) : r > 3 ? u(e, s, i) : u(e, s)) || i);
   return r > 3 && i && Object.defineProperty(e, s, i), i;
 };
-const re = 4e3;
-let N = class extends G {
+const me = 4e3;
+let I = class extends W {
   constructor() {
     super(), this.loadingMessage = "", this.subMessage = "", this.paymentState = "in-progress", this.paymentState = l.state.isPaymentInProgress ? "in-progress" : "completed", this.updateMessages(), this.setupSubscription(), this.setupExchangeSubscription();
   }
@@ -696,19 +752,19 @@ let N = class extends G {
     clearInterval(this.exchangeSubscription);
   }
   render() {
-    return d`
+    return m`
       <wui-flex
         flexDirection="column"
         alignItems="center"
-        .padding=${["xl", "xl", "xl", "xl"]}
-        gap="xl"
+        .padding=${["7", "5", "5", "5"]}
+        gap="9"
       >
         <wui-flex justifyContent="center" alignItems="center"> ${this.getStateIcon()} </wui-flex>
-        <wui-flex flexDirection="column" alignItems="center" gap="xs">
-          <wui-text align="center" variant="paragraph-500" color="fg-100">
+        <wui-flex flexDirection="column" alignItems="center" gap="2">
+          <wui-text align="center" variant="lg-medium" color="primary">
             ${this.loadingMessage}
           </wui-text>
-          <wui-text align="center" variant="small-400" color="fg-200">
+          <wui-text align="center" variant="lg-regular" color="secondary">
             ${this.subMessage}
           </wui-text>
         </wui-flex>
@@ -747,59 +803,148 @@ let N = class extends G {
       var r, i, u;
       const s = (r = l.state.currentPayment) == null ? void 0 : r.exchangeId, a = (i = l.state.currentPayment) == null ? void 0 : i.sessionId;
       s && a && (await l.updateBuyStatus(s, a), ((u = l.state.currentPayment) == null ? void 0 : u.status) === "SUCCESS" && clearInterval(this.exchangeSubscription));
-    }, re));
+    }, me));
   }
   setupSubscription() {
     l.subscribeKey("isPaymentInProgress", (e) => {
       var s;
       !e && this.paymentState === "in-progress" && (l.state.error || !((s = l.state.currentPayment) != null && s.result) ? this.paymentState = "error" : this.paymentState = "completed", this.updateMessages(), setTimeout(() => {
-        f.state.status !== "disconnected" && P.close();
+        w.state.status !== "disconnected" && x.close();
       }, 3e3));
     }), l.subscribeKey("error", (e) => {
       e && this.paymentState === "in-progress" && (this.paymentState = "error", this.updateMessages());
     });
   }
   loaderTemplate() {
-    const e = F.state.themeVariables["--w3m-border-radius-master"], s = e ? parseInt(e.replace("px", ""), 10) : 4;
-    return d`<wui-loading-thumbnail radius=${s * 9}></wui-loading-thumbnail>`;
+    const e = J.state.themeVariables["--w3m-border-radius-master"], s = e ? parseInt(e.replace("px", ""), 10) : 4, a = this.getPaymentIcon();
+    return m`
+      <wui-flex justifyContent="center" alignItems="center" style="position: relative;">
+        ${a ? m`<wui-wallet-image size="lg" imageSrc=${a}></wui-wallet-image>` : null}
+        <wui-loading-thumbnail radius=${s * 9}></wui-loading-thumbnail>
+      </wui-flex>
+    `;
+  }
+  getPaymentIcon() {
+    var s, a;
+    const e = l.state.currentPayment;
+    if (e) {
+      if (e.type === "exchange") {
+        const r = e.exchangeId;
+        if (r) {
+          const i = l.getExchangeById(r);
+          return i == null ? void 0 : i.imageUrl;
+        }
+      }
+      if (e.type === "wallet") {
+        const r = (a = (s = p.getAccountData()) == null ? void 0 : s.connectedWalletInfo) == null ? void 0 : a.icon;
+        if (r)
+          return r;
+        const i = p.state.activeChain;
+        if (!i)
+          return;
+        const u = M.getConnectorId(i);
+        if (!u)
+          return;
+        const d = M.getConnectorById(u);
+        return d ? Z.getConnectorImage(d) : void 0;
+      }
+    }
   }
   successTemplate() {
-    return d`<wui-icon size="xl" color="success-100" name="checkmark"></wui-icon>`;
+    return m`<wui-icon size="xl" color="success" name="checkmark"></wui-icon>`;
   }
   errorTemplate() {
-    return d`<wui-icon size="xl" color="error-100" name="close"></wui-icon>`;
+    return m`<wui-icon size="xl" color="error" name="close"></wui-icon>`;
   }
 };
-N.styles = ae;
-x([
-  w()
-], N.prototype, "loadingMessage", void 0);
-x([
-  w()
-], N.prototype, "subMessage", void 0);
-x([
-  w()
-], N.prototype, "paymentState", void 0);
-N = x([
-  V("w3m-pay-loading-view")
-], N);
-async function fe(t) {
+I.styles = pe;
+U([
+  h()
+], I.prototype, "loadingMessage", void 0);
+U([
+  h()
+], I.prototype, "subMessage", void 0);
+U([
+  h()
+], I.prototype, "paymentState", void 0);
+I = U([
+  H("w3m-pay-loading-view")
+], I);
+const ye = 3e5;
+async function he(t) {
   return l.handleOpenPay(t);
 }
-function Ne() {
+async function Re(t, e = ye) {
+  if (e <= 0)
+    throw new c(o.INVALID_PAYMENT_CONFIG, "Timeout must be greater than 0");
+  try {
+    await he(t);
+  } catch (s) {
+    throw s instanceof c ? s : new c(o.UNABLE_TO_INITIATE_PAYMENT, s.message);
+  }
+  return new Promise((s, a) => {
+    let r = !1;
+    const i = setTimeout(() => {
+      r || (r = !0, S(), a(new c(o.GENERIC_PAYMENT_ERROR, "Payment timeout")));
+    }, e);
+    function u() {
+      if (r)
+        return;
+      const f = l.state.currentPayment, k = l.state.error, K = l.state.isPaymentInProgress;
+      if ((f == null ? void 0 : f.status) === "SUCCESS") {
+        r = !0, S(), clearTimeout(i), s({
+          success: !0,
+          result: f.result
+        });
+        return;
+      }
+      if ((f == null ? void 0 : f.status) === "FAILED") {
+        r = !0, S(), clearTimeout(i), s({
+          success: !1,
+          error: k || "Payment failed"
+        });
+        return;
+      }
+      k && !K && !f && (r = !0, S(), clearTimeout(i), s({
+        success: !1,
+        error: k
+      }));
+    }
+    const d = D("currentPayment", u), A = D("error", u), P = D("isPaymentInProgress", u), S = we([
+      d,
+      A,
+      P
+    ]);
+    u();
+  });
+}
+function ve() {
   return l.getExchanges();
 }
-function Ae() {
+function De() {
   var t;
   return (t = l.state.currentPayment) == null ? void 0 : t.result;
 }
-function Ie() {
+function Oe() {
   return l.state.error;
 }
-function Pe() {
+function Le() {
   return l.state.isPaymentInProgress;
 }
-const _e = {
+function D(t, e) {
+  return l.subscribeKey(t, e);
+}
+function we(t) {
+  return () => {
+    t.forEach((e) => {
+      try {
+        e();
+      } catch {
+      }
+    });
+  };
+}
+const Me = {
   network: "eip155:8453",
   asset: "native",
   metadata: {
@@ -807,7 +952,7 @@ const _e = {
     symbol: "ETH",
     decimals: 18
   }
-}, xe = {
+}, Ye = {
   network: "eip155:8453",
   asset: "0x833589fcd6edb6e08f4c7c32d4f71b54bda02913",
   metadata: {
@@ -815,7 +960,7 @@ const _e = {
     symbol: "USDC",
     decimals: 6
   }
-}, Te = {
+}, Ge = {
   network: "eip155:84532",
   asset: "native",
   metadata: {
@@ -823,16 +968,116 @@ const _e = {
     symbol: "ETH",
     decimals: 18
   }
+}, Ve = {
+  network: "eip155:1",
+  asset: "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48",
+  metadata: {
+    name: "USD Coin",
+    symbol: "USDC",
+    decimals: 6
+  }
+}, $e = {
+  network: "eip155:10",
+  asset: "0x0b2c639c533813f4aa9d7837caf62653d097ff85",
+  metadata: {
+    name: "USD Coin",
+    symbol: "USDC",
+    decimals: 6
+  }
+}, Be = {
+  network: "eip155:42161",
+  asset: "0xaf88d065e77c8cC2239327C5EDb3A432268e5831",
+  metadata: {
+    name: "USD Coin",
+    symbol: "USDC",
+    decimals: 6
+  }
+}, Fe = {
+  network: "eip155:137",
+  asset: "0x3c499c542cef5e3811e1192ce70d8cc03d5c3359",
+  metadata: {
+    name: "USD Coin",
+    symbol: "USDC",
+    decimals: 6
+  }
+}, We = {
+  network: "solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp",
+  asset: "EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v",
+  metadata: {
+    name: "USD Coin",
+    symbol: "USDC",
+    decimals: 6
+  }
+}, He = {
+  network: "eip155:1",
+  asset: "0xdAC17F958D2ee523a2206206994597C13D831ec7",
+  metadata: {
+    name: "Tether USD",
+    symbol: "USDT",
+    decimals: 6
+  }
+}, Ke = {
+  network: "eip155:10",
+  asset: "0x94b008aA00579c1307B0EF2c499aD98a8ce58e58",
+  metadata: {
+    name: "Tether USD",
+    symbol: "USDT",
+    decimals: 6
+  }
+}, je = {
+  network: "eip155:42161",
+  asset: "0xFd086bC7CD5C481DCC9C85ebE478A1C0b69FCbb9",
+  metadata: {
+    name: "Tether USD",
+    symbol: "USDT",
+    decimals: 6
+  }
+}, qe = {
+  network: "eip155:137",
+  asset: "0xc2132d05d31c914a87c6611c10748aeb04b58e8f",
+  metadata: {
+    name: "Tether USD",
+    symbol: "USDT",
+    decimals: 6
+  }
+}, ze = {
+  network: "solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp",
+  asset: "Es9vMFrzaCERmJfrF4H2FYD4KCoNkY11McCe8BenwNYB",
+  metadata: {
+    name: "Tether USD",
+    symbol: "USDT",
+    decimals: 6
+  }
+}, Xe = {
+  network: "solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp",
+  asset: "native",
+  metadata: {
+    name: "Solana",
+    symbol: "SOL",
+    decimals: 9
+  }
 };
 export {
-  N as W3mPayLoadingView,
-  m as W3mPayView,
-  _e as baseETH,
-  Te as baseSepoliaETH,
-  xe as baseUSDC,
-  Ne as getExchanges,
-  Pe as getIsPaymentInProgress,
-  Ie as getPayError,
-  Ae as getPayResult,
-  fe as openPay
+  I as W3mPayLoadingView,
+  y as W3mPayView,
+  Be as arbitrumUSDC,
+  je as arbitrumUSDT,
+  Me as baseETH,
+  Ge as baseSepoliaETH,
+  Ye as baseUSDC,
+  Ve as ethereumUSDC,
+  He as ethereumUSDT,
+  ve as getExchanges,
+  Le as getIsPaymentInProgress,
+  Oe as getPayError,
+  De as getPayResult,
+  he as openPay,
+  $e as optimismUSDC,
+  Ke as optimismUSDT,
+  Re as pay,
+  Fe as polygonUSDC,
+  qe as polygonUSDT,
+  Xe as solanaSOL,
+  We as solanaUSDC,
+  ze as solanaUSDT
 };