@swype-org/react-sdk 0.1.21 → 0.1.23

package/dist/index.cjs

@@ -583,24 +583,50 @@ function resolveRootDomainFromHostname(hostname) {
   }
   return parts.slice(-2).join(".");
 }
-
-// src/signature.ts
+var ERC_6492_MAGIC_SUFFIX = "6492649264926492649264926492649264926492649264926492649264926492";
 function normalizeSignature(sig) {
-  const stripped = sig.startsWith("0x") ? sig.slice(2) : sig;
-  if (stripped.length === 130) {
-    return `0x${stripped}`;
+  const hex = sig.startsWith("0x") ? sig.slice(2) : sig;
+  if (hex.length === 130) {
+    return `0x${hex}`;
   }
-  if (stripped.length === 128) {
-    const r = stripped.slice(0, 64);
-    const yParityAndS = stripped.slice(64, 128);
+  if (hex.length === 128) {
+    const r = hex.slice(0, 64);
+    const yParityAndS = hex.slice(64, 128);
     const highByte = parseInt(yParityAndS.slice(0, 2), 16);
     const v = (highByte & 128) !== 0 ? 28 : 27;
     const sFirstByte = (highByte & 127).toString(16).padStart(2, "0");
     const s = sFirstByte + yParityAndS.slice(2);
     return `0x${r}${s}${v.toString(16)}`;
   }
+  if (hex.length > 64 && hex.endsWith(ERC_6492_MAGIC_SUFFIX)) {
+    const { signature: inner } = utils.parseErc6492Signature(
+      `0x${hex}`
+    );
+    return normalizeSignature(inner);
+  }
+  if (hex.length > 130) {
+    try {
+      const [, innerBytes] = viem.decodeAbiParameters(
+        [{ type: "uint256" }, { type: "bytes" }],
+        `0x${hex}`
+      );
+      return normalizeSignature(innerBytes);
+    } catch {
+      try {
+        const [wrapper] = viem.decodeAbiParameters(
+          [{
+            type: "tuple",
+            components: [{ type: "uint8" }, { type: "bytes" }]
+          }],
+          `0x${hex}`
+        );
+        return normalizeSignature(wrapper[1]);
+      } catch {
+      }
+    }
+  }
   throw new Error(
-    `Invalid signature length: expected 65 or 64 bytes, got ${stripped.length / 2}`
+    `Invalid signature: unable to normalize. Length=${hex.length / 2} bytes. Expected 65, 64, ERC-6492 wrapped, or ABI-encoded SignatureWrapper.`
   );
 }
 
@@ -1414,19 +1440,15 @@ function ProviderCard({ provider, selected, onClick }) {
     }
   );
 }
-function FundingSourceDropdown({
+function AccountDropdown({
   accounts,
-  providers,
   selectedAccountId,
+  onSelect,
   selectedWalletId,
-  connectingNewAccount,
-  onSelectAccount,
-  onSelectWallet,
-  onConnectNewAccount
+  onWalletSelect
 }) {
   const { tokens } = useSwypeConfig();
   const [open, setOpen] = react.useState(false);
-  const [showProviders, setShowProviders] = react.useState(false);
   const containerRef = react.useRef(null);
   const selected = accounts.find((a) => a.id === selectedAccountId);
   const selectedWallet = selected?.wallets.find(
@@ -1437,15 +1459,41 @@ function FundingSourceDropdown({
     const handleClick = (e) => {
       if (containerRef.current && !containerRef.current.contains(e.target)) {
         setOpen(false);
-        setShowProviders(false);
       }
     };
     document.addEventListener("mousedown", handleClick);
     return () => document.removeEventListener("mousedown", handleClick);
   }, [open]);
-  react.useEffect(() => {
-    if (!open) setShowProviders(false);
-  }, [open]);
+  if (accounts.length === 0) return null;
+  const hasMultipleChoices = accounts.length > 1 || accounts.length === 1 && onWalletSelect && accounts[0].wallets.filter((w) => w.balance.available.amount > 0).length > 1;
+  if (!hasMultipleChoices) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: "6px",
+          fontSize: "0.85rem",
+          color: tokens.textSecondary
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 500 }, children: accounts[0].name }),
+          (selectedWallet ?? accounts[0].wallets[0]) && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              style: {
+                fontSize: "0.75rem",
+                color: tokens.textMuted,
+                fontFamily: '"SF Mono", "Fira Code", monospace'
+              },
+              children: selectedWallet ? `${selectedWallet.chain.name} \xB7 ${selectedWallet.name}` : accounts[0].wallets[0]?.name
+            }
+          )
+        ]
+      }
+    );
+  }
   const getAccountBalance = (account) => {
     let total = 0;
     for (const w of account.wallets) {
@@ -1454,27 +1502,6 @@ function FundingSourceDropdown({
     return total > 0 ? `$${total.toFixed(2)}` : "";
   };
   const hasActiveWallet = (account) => account.wallets.some((w) => w.status === "ACTIVE");
-  let triggerLabel;
-  if (connectingNewAccount) {
-    triggerLabel = /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 500, color: tokens.textMuted, fontSize: "0.85rem" }, children: "Connecting\u2026" });
-  } else if (selected) {
-    triggerLabel = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 500, color: tokens.text }, children: selected.name }),
-      (selectedWallet ?? selected.wallets[0]) && /* @__PURE__ */ jsxRuntime.jsx(
-        "span",
-        {
-          style: {
-            fontSize: "0.75rem",
-            color: tokens.textMuted,
-            fontFamily: '"SF Mono", "Fira Code", monospace'
-          },
-          children: selectedWallet ? `${selectedWallet.chain.name} \xB7 ${selectedWallet.name}` : selected.wallets[0].name
-        }
-      )
-    ] });
-  } else {
-    triggerLabel = /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 500, color: tokens.textMuted }, children: "Select a source" });
-  }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, style: { position: "relative" }, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
@@ -1495,7 +1522,18 @@ function FundingSourceDropdown({
           outline: "none"
         },
         children: [
-          triggerLabel,
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 500, color: tokens.text }, children: selected?.name ?? "Select account" }),
+          (selectedWallet ?? selected?.wallets?.[0]) && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              style: {
+                fontSize: "0.75rem",
+                color: tokens.textMuted,
+                fontFamily: '"SF Mono", "Fira Code", monospace'
+              },
+              children: selectedWallet ? `${selectedWallet.chain.name} \xB7 ${selectedWallet.name}` : selected.wallets[0].name
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsx(
             "svg",
             {
@@ -1523,12 +1561,13 @@ function FundingSourceDropdown({
         ]
       }
     ),
-    open && /* @__PURE__ */ jsxRuntime.jsxs(
+    open && /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         style: {
           position: "absolute",
           top: "100%",
+          left: 0,
           right: 0,
           marginTop: "4px",
           background: tokens.bgCard,
@@ -1537,93 +1576,190 @@ function FundingSourceDropdown({
           boxShadow: tokens.shadowLg,
           zIndex: 50,
           overflow: "hidden",
-          minWidth: "260px"
+          minWidth: "220px"
         },
-        children: [
-          accounts.map((account) => {
-            const isAcctSelected = account.id === selectedAccountId;
-            const balance = getAccountBalance(account);
-            const active = hasActiveWallet(account);
-            const walletsWithBalance = account.wallets.filter(
-              (w) => w.balance.available.amount > 0
-            );
-            const showWallets = walletsWithBalance.length > 0;
-            return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(
+        children: accounts.map((account) => {
+          const isAcctSelected = account.id === selectedAccountId;
+          const balance = getAccountBalance(account);
+          const active = hasActiveWallet(account);
+          const walletsWithBalance = account.wallets.filter(
+            (w) => w.balance.available.amount > 0
+          );
+          const showWallets = onWalletSelect && walletsWithBalance.length > 0;
+          return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                onClick: () => {
+                  onSelect(account.id);
+                  if (!showWallets) setOpen(false);
+                },
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  width: "100%",
+                  padding: "10px 14px",
+                  background: isAcctSelected && !selectedWalletId ? tokens.accent + "12" : "transparent",
+                  border: "none",
+                  borderBottom: showWallets ? "none" : `1px solid ${tokens.border}`,
+                  cursor: "pointer",
+                  color: tokens.text,
+                  fontFamily: "inherit",
+                  fontSize: "0.85rem",
+                  textAlign: "left",
+                  outline: "none",
+                  transition: "background 0.1s ease"
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { minWidth: 0, flex: 1 }, children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs(
+                      "div",
+                      {
+                        style: {
+                          display: "flex",
+                          alignItems: "center",
+                          gap: "6px"
+                        },
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 500 }, children: account.name }),
+                          active && /* @__PURE__ */ jsxRuntime.jsx(
+                            "span",
+                            {
+                              style: {
+                                fontSize: "0.6rem",
+                                fontWeight: 600,
+                                color: tokens.success,
+                                background: tokens.successBg,
+                                padding: "2px 7px",
+                                borderRadius: "999px",
+                                textTransform: "uppercase",
+                                letterSpacing: "0.03em"
+                              },
+                              children: "Active"
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    balance && /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        style: {
+                          fontSize: "0.75rem",
+                          color: tokens.textMuted,
+                          marginTop: "2px"
+                        },
+                        children: balance
+                      }
+                    )
+                  ] }),
+                  isAcctSelected && !selectedWalletId && /* @__PURE__ */ jsxRuntime.jsx(
+                    "svg",
+                    {
+                      width: "14",
+                      height: "14",
+                      viewBox: "0 0 24 24",
+                      fill: "none",
+                      style: { flexShrink: 0, marginLeft: "8px" },
+                      children: /* @__PURE__ */ jsxRuntime.jsx(
+                        "path",
+                        {
+                          d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z",
+                          fill: tokens.accent
+                        }
+                      )
+                    }
+                  )
+                ]
+              }
+            ),
+            showWallets && walletsWithBalance.map((wallet, wIdx) => {
+              const isWalletSelected = isAcctSelected && wallet.id === selectedWalletId;
+              const walletBal = wallet.balance.available.amount > 0 ? `$${wallet.balance.available.amount.toFixed(2)}` : "";
+              const isLastWallet = wIdx === walletsWithBalance.length - 1;
+              return /* @__PURE__ */ jsxRuntime.jsxs(
                 "button",
                 {
                   onClick: () => {
-                    onSelectAccount(account.id);
-                    if (!showWallets) setOpen(false);
+                    onWalletSelect(account.id, wallet.id);
+                    setOpen(false);
                   },
                   style: {
                     display: "flex",
                     alignItems: "center",
                     justifyContent: "space-between",
                     width: "100%",
-                    padding: "10px 14px",
-                    background: isAcctSelected && !selectedWalletId ? tokens.accent + "12" : "transparent",
+                    padding: "8px 14px 8px 28px",
+                    background: isWalletSelected ? tokens.accent + "12" : "transparent",
                     border: "none",
-                    borderBottom: showWallets ? "none" : `1px solid ${tokens.border}`,
+                    borderBottom: isLastWallet ? `1px solid ${tokens.border}` : "none",
                     cursor: "pointer",
                     color: tokens.text,
                     fontFamily: "inherit",
-                    fontSize: "0.85rem",
+                    fontSize: "0.8rem",
                     textAlign: "left",
                     outline: "none",
                     transition: "background 0.1s ease"
                   },
                   children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { minWidth: 0, flex: 1 }, children: [
-                      /* @__PURE__ */ jsxRuntime.jsxs(
-                        "div",
-                        {
-                          style: {
-                            display: "flex",
-                            alignItems: "center",
-                            gap: "6px"
-                          },
-                          children: [
-                            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 500 }, children: account.name }),
-                            active && /* @__PURE__ */ jsxRuntime.jsx(
-                              "span",
-                              {
-                                style: {
-                                  fontSize: "0.6rem",
-                                  fontWeight: 600,
-                                  color: tokens.success,
-                                  background: tokens.successBg,
-                                  padding: "2px 7px",
-                                  borderRadius: "999px",
-                                  textTransform: "uppercase",
-                                  letterSpacing: "0.03em"
-                                },
-                                children: "Active"
-                              }
-                            )
-                          ]
-                        }
-                      ),
-                      balance && /* @__PURE__ */ jsxRuntime.jsx(
-                        "div",
-                        {
-                          style: {
-                            fontSize: "0.75rem",
-                            color: tokens.textMuted,
-                            marginTop: "2px"
-                          },
-                          children: balance
-                        }
-                      )
-                    ] }),
-                    isAcctSelected && !selectedWalletId && /* @__PURE__ */ jsxRuntime.jsx(
+                    /* @__PURE__ */ jsxRuntime.jsxs(
+                      "div",
+                      {
+                        style: {
+                          display: "flex",
+                          alignItems: "center",
+                          gap: "6px",
+                          minWidth: 0,
+                          flex: 1
+                        },
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            "span",
+                            {
+                              style: {
+                                fontWeight: 500,
+                                fontSize: "0.8rem"
+                              },
+                              children: wallet.chain.name
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            "span",
+                            {
+                              style: {
+                                fontSize: "0.7rem",
+                                color: tokens.textMuted,
+                                fontFamily: '"SF Mono", "Fira Code", monospace'
+                              },
+                              children: wallet.name
+                            }
+                          ),
+                          walletBal && /* @__PURE__ */ jsxRuntime.jsx(
+                            "span",
+                            {
+                              style: {
+                                fontSize: "0.7rem",
+                                color: tokens.textMuted,
+                                marginLeft: "auto"
+                              },
+                              children: walletBal
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    isWalletSelected && /* @__PURE__ */ jsxRuntime.jsx(
                       "svg",
                       {
-                        width: "14",
-                        height: "14",
+                        width: "12",
+                        height: "12",
                         viewBox: "0 0 24 24",
                         fill: "none",
-                        style: { flexShrink: 0, marginLeft: "8px" },
+                        style: {
+                          flexShrink: 0,
+                          marginLeft: "8px"
+                        },
                         children: /* @__PURE__ */ jsxRuntime.jsx(
                           "path",
                           {
@@ -1634,214 +1770,12 @@ function FundingSourceDropdown({
                       }
                     )
                   ]
-                }
-              ),
-              showWallets && walletsWithBalance.map((wallet, wIdx) => {
-                const isWalletSelected = isAcctSelected && wallet.id === selectedWalletId;
-                const walletBal = wallet.balance.available.amount > 0 ? `$${wallet.balance.available.amount.toFixed(2)}` : "";
-                const isLastWallet = wIdx === walletsWithBalance.length - 1;
-                return /* @__PURE__ */ jsxRuntime.jsxs(
-                  "button",
-                  {
-                    onClick: () => {
-                      onSelectWallet(account.id, wallet.id);
-                      setOpen(false);
-                    },
-                    style: {
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "space-between",
-                      width: "100%",
-                      padding: "8px 14px 8px 28px",
-                      background: isWalletSelected ? tokens.accent + "12" : "transparent",
-                      border: "none",
-                      borderBottom: isLastWallet ? `1px solid ${tokens.border}` : "none",
-                      cursor: "pointer",
-                      color: tokens.text,
-                      fontFamily: "inherit",
-                      fontSize: "0.8rem",
-                      textAlign: "left",
-                      outline: "none",
-                      transition: "background 0.1s ease"
-                    },
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsxs(
-                        "div",
-                        {
-                          style: {
-                            display: "flex",
-                            alignItems: "center",
-                            gap: "6px",
-                            minWidth: 0,
-                            flex: 1
-                          },
-                          children: [
-                            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 500, fontSize: "0.8rem" }, children: wallet.chain.name }),
-                            /* @__PURE__ */ jsxRuntime.jsx(
-                              "span",
-                              {
-                                style: {
-                                  fontSize: "0.7rem",
-                                  color: tokens.textMuted,
-                                  fontFamily: '"SF Mono", "Fira Code", monospace'
-                                },
-                                children: wallet.name
-                              }
-                            ),
-                            walletBal && /* @__PURE__ */ jsxRuntime.jsx(
-                              "span",
-                              {
-                                style: {
-                                  fontSize: "0.7rem",
-                                  color: tokens.textMuted,
-                                  marginLeft: "auto"
-                                },
-                                children: walletBal
-                              }
-                            )
-                          ]
-                        }
-                      ),
-                      isWalletSelected && /* @__PURE__ */ jsxRuntime.jsx(
-                        "svg",
-                        {
-                          width: "12",
-                          height: "12",
-                          viewBox: "0 0 24 24",
-                          fill: "none",
-                          style: { flexShrink: 0, marginLeft: "8px" },
-                          children: /* @__PURE__ */ jsxRuntime.jsx(
-                            "path",
-                            {
-                              d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z",
-                              fill: tokens.accent
-                            }
-                          )
-                        }
-                      )
-                    ]
-                  },
-                  wallet.id
-                );
-              })
-            ] }, account.id);
-          }),
-          accounts.length > 0 && !showProviders && /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              style: {
-                height: "1px",
-                background: tokens.border,
-                margin: "0"
-              }
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "8px" }, children: !showProviders ? /* @__PURE__ */ jsxRuntime.jsxs(
-            "button",
-            {
-              onClick: () => setShowProviders(true),
-              disabled: connectingNewAccount,
-              style: {
-                display: "flex",
-                alignItems: "center",
-                gap: "8px",
-                background: "transparent",
-                border: `1px dashed ${tokens.border}`,
-                borderRadius: tokens.radius,
-                padding: "10px 12px",
-                width: "100%",
-                cursor: connectingNewAccount ? "not-allowed" : "pointer",
-                color: tokens.textSecondary,
-                fontFamily: "inherit",
-                fontSize: "0.825rem",
-                fontWeight: 500,
-                outline: "none",
-                opacity: connectingNewAccount ? 0.5 : 1,
-                transition: "opacity 0.15s ease"
-              },
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
-                  "path",
-                  {
-                    d: "M12 5v14M5 12h14",
-                    stroke: tokens.textMuted,
-                    strokeWidth: "2",
-                    strokeLinecap: "round"
-                  }
-                ) }),
-                "Add a source"
-              ]
-            }
-          ) : /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(
-              "div",
-              {
-                style: {
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "space-between",
-                  marginBottom: "8px",
-                  padding: "0 4px"
-                },
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "label",
-                    {
-                      style: {
-                        fontSize: "0.7rem",
-                        fontWeight: 600,
-                        color: tokens.textMuted,
-                        textTransform: "uppercase",
-                        letterSpacing: "0.05em"
-                      },
-                      children: "Select provider"
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "button",
-                    {
-                      onClick: () => setShowProviders(false),
-                      style: {
-                        background: "transparent",
-                        border: "none",
-                        cursor: "pointer",
-                        color: tokens.textMuted,
-                        fontSize: "0.75rem",
-                        fontFamily: "inherit",
-                        outline: "none",
-                        padding: "2px 4px"
-                      },
-                      children: "Cancel"
-                    }
-                  )
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                style: {
-                  display: "flex",
-                  flexDirection: "column",
-                  gap: "6px"
                 },
-                children: providers.map((p) => /* @__PURE__ */ jsxRuntime.jsx(
-                  ProviderCard,
-                  {
-                    provider: p,
-                    selected: false,
-                    onClick: () => {
-                      onConnectNewAccount(p.id);
-                      setOpen(false);
-                      setShowProviders(false);
-                    }
-                  },
-                  p.id
-                ))
-              }
-            )
-          ] }) })
-        ]
+                wallet.id
+              );
+            })
+          ] }, account.id);
+        })
       }
     )
   ] });
@@ -1850,10 +1784,14 @@ var ASSETS = ["USDC", "USDT"];
 function AdvancedSettings({
   settings,
   onChange,
-  chains
+  chains,
+  providers,
+  onConnectNewAccount,
+  connectingNewAccount
 }) {
   const { tokens } = useSwypeConfig();
   const [open, setOpen] = react.useState(false);
+  const [showProviders, setShowProviders] = react.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: "12px" }, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
@@ -1957,7 +1895,7 @@ function AdvancedSettings({
               );
             }) })
           ] }),
-          chains.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          chains.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: "14px" }, children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               "label",
               {
@@ -2000,7 +1938,119 @@ function AdvancedSettings({
                 chain.id
               );
             }) })
-          ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { children: !showProviders ? /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              onClick: () => setShowProviders(true),
+              disabled: connectingNewAccount,
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: "6px",
+                background: tokens.bgCard,
+                border: `1px dashed ${tokens.border}`,
+                borderRadius: "999px",
+                padding: "10px 14px",
+                width: "100%",
+                cursor: connectingNewAccount ? "not-allowed" : "pointer",
+                color: tokens.textSecondary,
+                fontFamily: "inherit",
+                fontSize: "0.825rem",
+                fontWeight: 500,
+                outline: "none",
+                opacity: connectingNewAccount ? 0.5 : 1,
+                transition: "opacity 0.1s ease"
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "svg",
+                  {
+                    width: "14",
+                    height: "14",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      "path",
+                      {
+                        d: "M12 5v14M5 12h14",
+                        stroke: tokens.textMuted,
+                        strokeWidth: "2",
+                        strokeLinecap: "round"
+                      }
+                    )
+                  }
+                ),
+                "Connect new account"
+              ]
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  marginBottom: "8px"
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "label",
+                    {
+                      style: {
+                        fontSize: "0.7rem",
+                        fontWeight: 600,
+                        color: tokens.textMuted,
+                        textTransform: "uppercase",
+                        letterSpacing: "0.05em"
+                      },
+                      children: "Select provider"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      onClick: () => setShowProviders(false),
+                      style: {
+                        background: "transparent",
+                        border: "none",
+                        cursor: "pointer",
+                        color: tokens.textMuted,
+                        fontSize: "0.75rem",
+                        fontFamily: "inherit",
+                        outline: "none",
+                        padding: "2px 4px"
+                      },
+                      children: "Cancel"
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: "6px"
+                },
+                children: providers.map((p) => /* @__PURE__ */ jsxRuntime.jsx(
+                  ProviderCard,
+                  {
+                    provider: p,
+                    selected: false,
+                    onClick: () => {
+                      onConnectNewAccount(p.id);
+                      setShowProviders(false);
+                    }
+                  },
+                  p.id
+                ))
+              }
+            )
+          ] }) })
         ]
       }
     )
@@ -2519,6 +2569,11 @@ function SwypePayment({
     pollingTransferIdRef.current = null;
     mobileSigningTransferIdRef.current = null;
   }, [logout, polling, depositAmount]);
+  const handleConnectNewAccount = (providerId) => {
+    setSelectedProviderId(providerId);
+    setSelectedAccountId(null);
+    setConnectingNewAccount(true);
+  };
   const cardStyle = {
     background: tokens.bgCard,
     borderRadius: tokens.radiusLg,
@@ -2890,6 +2945,7 @@ function SwypePayment({
   if (step === "ready") {
     const parsedAmount = parseFloat(amount);
     const canPay = !isNaN(parsedAmount) && parsedAmount >= MIN_SEND_AMOUNT_USD && !!sourceId && !loadingData;
+    const noAccounts = !loadingData && accounts.length === 0;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: cardStyle, children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative" }, children: [
         stepBadge("Review & pay"),
@@ -3020,30 +3076,23 @@ function SwypePayment({
                   },
                   children: [
                     /* @__PURE__ */ jsxRuntime.jsx("span", { children: "From" }),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      FundingSourceDropdown,
+                    noAccounts ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 500, color: tokens.textMuted }, children: "New account" }) : /* @__PURE__ */ jsxRuntime.jsx(
+                      AccountDropdown,
                       {
                         accounts,
-                        providers,
                         selectedAccountId,
                         selectedWalletId,
-                        connectingNewAccount,
-                        onSelectAccount: (id) => {
+                        onSelect: (id) => {
                           setSelectedAccountId(id);
                           setSelectedWalletId(null);
                           setConnectingNewAccount(false);
                           setSelectedProviderId(null);
                         },
-                        onSelectWallet: (accountId, walletId) => {
+                        onWalletSelect: (accountId, walletId) => {
                           setSelectedAccountId(accountId);
                           setSelectedWalletId(walletId);
                           setConnectingNewAccount(false);
                           setSelectedProviderId(null);
-                        },
-                        onConnectNewAccount: (providerId) => {
-                          setSelectedProviderId(providerId);
-                          setSelectedAccountId(null);
-                          setConnectingNewAccount(true);
                         }
                       }
                     )
@@ -3053,6 +3102,46 @@ function SwypePayment({
             ]
           }
         ),
+        noAccounts && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: "16px" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "label",
+            {
+              style: {
+                display: "block",
+                fontSize: "0.8rem",
+                color: tokens.textMuted,
+                marginBottom: "8px",
+                fontWeight: 500,
+                textTransform: "uppercase",
+                letterSpacing: "0.05em"
+              },
+              children: "Connect a wallet"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              style: {
+                display: "flex",
+                flexDirection: "column",
+                gap: "8px"
+              },
+              children: providers.map((p) => /* @__PURE__ */ jsxRuntime.jsx(
+                ProviderCard,
+                {
+                  provider: p,
+                  selected: selectedProviderId === p.id,
+                  onClick: () => {
+                    setSelectedProviderId(p.id);
+                    setSelectedAccountId(null);
+                    setConnectingNewAccount(false);
+                  }
+                },
+                p.id
+              ))
+            }
+          )
+        ] }),
         /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
           {
@@ -3065,12 +3154,15 @@ function SwypePayment({
             ]
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(
+        !noAccounts && /* @__PURE__ */ jsxRuntime.jsx(
           AdvancedSettings,
           {
             settings: advancedSettings,
             onChange: setAdvancedSettings,
-            chains
+            chains,
+            providers,
+            onConnectNewAccount: handleConnectNewAccount,
+            connectingNewAccount
           }
         )
       ] })