@swype-org/react-sdk 0.1.19 → 0.1.21

package/dist/index.cjs

@@ -584,6 +584,26 @@ function resolveRootDomainFromHostname(hostname) {
   return parts.slice(-2).join(".");
 }
 
+// src/signature.ts
+function normalizeSignature(sig) {
+  const stripped = sig.startsWith("0x") ? sig.slice(2) : sig;
+  if (stripped.length === 130) {
+    return `0x${stripped}`;
+  }
+  if (stripped.length === 128) {
+    const r = stripped.slice(0, 64);
+    const yParityAndS = stripped.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)}`;
+  }
+  throw new Error(
+    `Invalid signature length: expected 65 or 64 bytes, got ${stripped.length / 2}`
+  );
+}
+
 // src/hooks.ts
 var WALLET_CLIENT_MAX_ATTEMPTS = 15;
 var WALLET_CLIENT_POLL_MS = 200;
@@ -701,7 +721,7 @@ function parseSignTypedDataPayload(typedData) {
 function getPendingActions(session, completedIds) {
   return session.actions.filter((a) => a.status === "PENDING" && !completedIds.has(a.id)).sort((a, b) => a.orderIndex - b.orderIndex);
 }
-async function createPasskeyCredential(userIdentifier) {
+async function createPasskeyCredential(params) {
   const challenge = new Uint8Array(32);
   crypto.getRandomValues(challenge);
   const rpId = resolvePasskeyRpId();
@@ -711,9 +731,9 @@ async function createPasskeyCredential(userIdentifier) {
       challenge,
       rp: { name: "Swype", id: rpId },
       user: {
-        id: new TextEncoder().encode(userIdentifier),
-        name: userIdentifier,
-        displayName: "Swype User"
+        id: new TextEncoder().encode(params.userId),
+        name: params.displayName,
+        displayName: params.displayName
       },
       pubKeyCredParams: [
         { alg: -7, type: "public-key" },
@@ -1006,13 +1026,14 @@ async function executeSignPermit2(action, wagmiConfig2, apiBaseUrl, sessionId) {
     console.info(
       `[swype-sdk][sign-permit2] Signing typed data. expectedOwner=${expectedWallet ?? "N/A"}, senderParam=${sender}, connectedAddress=${connectedAddress ?? "N/A"}, primaryType=${parsed.primaryType}, domainChainId=${String(parsed.domain.chainId ?? "N/A")}, verifyingContract=${String(parsed.domain.verifyingContract ?? "N/A")}`
     );
-    const signature = await walletClient.signTypedData({
+    const rawSignature = await walletClient.signTypedData({
       account: sender,
       domain: parsed.domain,
       types: parsed.types,
       primaryType: parsed.primaryType,
       message: parsed.message
     });
+    const signature = normalizeSignature(rawSignature);
     const recoverInput = {
       domain: parsed.domain,
       types: parsed.types,
@@ -1393,15 +1414,19 @@ function ProviderCard({ provider, selected, onClick }) {
     }
   );
 }
-function AccountDropdown({
+function FundingSourceDropdown({
   accounts,
+  providers,
   selectedAccountId,
-  onSelect,
   selectedWalletId,
-  onWalletSelect
+  connectingNewAccount,
+  onSelectAccount,
+  onSelectWallet,
+  onConnectNewAccount
 }) {
   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(
@@ -1412,41 +1437,15 @@ function AccountDropdown({
     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]);
-  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
-            }
-          )
-        ]
-      }
-    );
-  }
+  react.useEffect(() => {
+    if (!open) setShowProviders(false);
+  }, [open]);
   const getAccountBalance = (account) => {
     let total = 0;
     for (const w of account.wallets) {
@@ -1455,6 +1454,27 @@ function AccountDropdown({
     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",
@@ -1475,18 +1495,7 @@ function AccountDropdown({
           outline: "none"
         },
         children: [
-          /* @__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
-            }
-          ),
+          triggerLabel,
           /* @__PURE__ */ jsxRuntime.jsx(
             "svg",
             {
@@ -1514,13 +1523,12 @@ function AccountDropdown({
         ]
       }
     ),
-    open && /* @__PURE__ */ jsxRuntime.jsx(
+    open && /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         style: {
           position: "absolute",
           top: "100%",
-          left: 0,
           right: 0,
           marginTop: "4px",
           background: tokens.bgCard,
@@ -1529,190 +1537,93 @@ function AccountDropdown({
           boxShadow: tokens.shadowLg,
           zIndex: 50,
           overflow: "hidden",
-          minWidth: "220px"
+          minWidth: "260px"
         },
-        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(
+        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(
                 "button",
                 {
                   onClick: () => {
-                    onWalletSelect(account.id, wallet.id);
-                    setOpen(false);
+                    onSelectAccount(account.id);
+                    if (!showWallets) setOpen(false);
                   },
                   style: {
                     display: "flex",
                     alignItems: "center",
                     justifyContent: "space-between",
                     width: "100%",
-                    padding: "8px 14px 8px 28px",
-                    background: isWalletSelected ? tokens.accent + "12" : "transparent",
+                    padding: "10px 14px",
+                    background: isAcctSelected && !selectedWalletId ? tokens.accent + "12" : "transparent",
                     border: "none",
-                    borderBottom: isLastWallet ? `1px solid ${tokens.border}` : "none",
+                    borderBottom: showWallets ? "none" : `1px solid ${tokens.border}`,
                     cursor: "pointer",
                     color: tokens.text,
                     fontFamily: "inherit",
-                    fontSize: "0.8rem",
+                    fontSize: "0.85rem",
                     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(
+                    /* @__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: "12",
-                        height: "12",
+                        width: "14",
+                        height: "14",
                         viewBox: "0 0 24 24",
                         fill: "none",
-                        style: {
-                          flexShrink: 0,
-                          marginLeft: "8px"
-                        },
+                        style: { flexShrink: 0, marginLeft: "8px" },
                         children: /* @__PURE__ */ jsxRuntime.jsx(
                           "path",
                           {
@@ -1723,12 +1634,214 @@ function AccountDropdown({
                       }
                     )
                   ]
+                }
+              ),
+              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"
                 },
-                wallet.id
-              );
-            })
-          ] }, account.id);
-        })
+                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
+                ))
+              }
+            )
+          ] }) })
+        ]
       }
     )
   ] });
@@ -1737,14 +1850,10 @@ var ASSETS = ["USDC", "USDT"];
 function AdvancedSettings({
   settings,
   onChange,
-  chains,
-  providers,
-  onConnectNewAccount,
-  connectingNewAccount
+  chains
 }) {
   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",
@@ -1848,7 +1957,7 @@ function AdvancedSettings({
               );
             }) })
           ] }),
-          chains.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: "14px" }, children: [
+          chains.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               "label",
               {
@@ -1891,119 +2000,7 @@ 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
-                ))
-              }
-            )
-          ] }) })
+          ] })
         ]
       }
     )
@@ -2118,7 +2115,7 @@ function SwypePayment({
   useWalletConnector
 }) {
   const { apiBaseUrl, tokens, depositAmount } = useSwypeConfig();
-  const { ready, authenticated, login, logout, getAccessToken } = reactAuth.usePrivy();
+  const { ready, authenticated, user, login, logout, getAccessToken } = reactAuth.usePrivy();
   const [step, setStep] = react.useState("login");
   const [error, setError] = react.useState(null);
   const [providers, setProviders] = react.useState([]);
@@ -2169,28 +2166,34 @@ function SwypePayment({
         if (!token || cancelled) return;
         const { config } = await fetchUserConfig(apiBaseUrl, token);
         if (cancelled) return;
-        if (config.passkey?.credentialId) {
-          const hasKey = activeCredentialId ? activeCredentialId === config.passkey.credentialId : await deviceHasPasskey(config.passkey.credentialId);
+        const allPasskeys = config.passkeys ?? (config.passkey ? [config.passkey] : []);
+        if (allPasskeys.length === 0) {
+          setStep("register-passkey");
+          return;
+        }
+        if (activeCredentialId && allPasskeys.some((p) => p.credentialId === activeCredentialId)) {
+          if (depositAmount != null && depositAmount > 0) {
+            setStep("ready");
+          } else {
+            setStep("enter-amount");
+          }
+          return;
+        }
+        for (const pk of allPasskeys) {
           if (cancelled) return;
-          if (hasKey) {
-            if (!activeCredentialId) {
-              setActiveCredentialId(config.passkey.credentialId);
-              window.localStorage.setItem(
-                ACTIVE_CREDENTIAL_STORAGE_KEY,
-                config.passkey.credentialId
-              );
-            }
+          if (await deviceHasPasskey(pk.credentialId)) {
+            setActiveCredentialId(pk.credentialId);
+            window.localStorage.setItem(ACTIVE_CREDENTIAL_STORAGE_KEY, pk.credentialId);
             if (depositAmount != null && depositAmount > 0) {
               setStep("ready");
             } else {
               setStep("enter-amount");
             }
-          } else {
-            setStep("register-passkey");
+            return;
           }
-        } else {
-          setStep("register-passkey");
         }
+        if (cancelled) return;
+        setStep("register-passkey");
       } catch {
         if (!cancelled) {
           if (depositAmount != null && depositAmount > 0) {
@@ -2516,11 +2519,6 @@ 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,
@@ -2705,7 +2703,11 @@ function SwypePayment({
       try {
         const token = await getAccessToken();
         if (!token) throw new Error("Not authenticated");
-        const { credentialId, publicKey } = await createPasskeyCredential("Swype User");
+        const passkeyDisplayName = user?.email?.address ?? user?.google?.name ?? user?.id ?? "Swype User";
+        const { credentialId, publicKey } = await createPasskeyCredential({
+          userId: user?.id ?? "unknown",
+          displayName: passkeyDisplayName
+        });
         await registerPasskey(apiBaseUrl, token, credentialId, publicKey);
         setActiveCredentialId(credentialId);
         window.localStorage.setItem(ACTIVE_CREDENTIAL_STORAGE_KEY, credentialId);
@@ -2888,7 +2890,6 @@ 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"),
@@ -3019,23 +3020,30 @@ function SwypePayment({
                   },
                   children: [
                     /* @__PURE__ */ jsxRuntime.jsx("span", { children: "From" }),
-                    noAccounts ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 500, color: tokens.textMuted }, children: "New account" }) : /* @__PURE__ */ jsxRuntime.jsx(
-                      AccountDropdown,
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      FundingSourceDropdown,
                       {
                         accounts,
+                        providers,
                         selectedAccountId,
                         selectedWalletId,
-                        onSelect: (id) => {
+                        connectingNewAccount,
+                        onSelectAccount: (id) => {
                           setSelectedAccountId(id);
                           setSelectedWalletId(null);
                           setConnectingNewAccount(false);
                           setSelectedProviderId(null);
                         },
-                        onWalletSelect: (accountId, walletId) => {
+                        onSelectWallet: (accountId, walletId) => {
                           setSelectedAccountId(accountId);
                           setSelectedWalletId(walletId);
                           setConnectingNewAccount(false);
                           setSelectedProviderId(null);
+                        },
+                        onConnectNewAccount: (providerId) => {
+                          setSelectedProviderId(providerId);
+                          setSelectedAccountId(null);
+                          setConnectingNewAccount(true);
                         }
                       }
                     )
@@ -3045,46 +3053,6 @@ 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",
           {
@@ -3097,15 +3065,12 @@ function SwypePayment({
             ]
           }
         ),
-        !noAccounts && /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx(
           AdvancedSettings,
           {
             settings: advancedSettings,
             onChange: setAdvancedSettings,
-            chains,
-            providers,
-            onConnectNewAccount: handleConnectNewAccount,
-            connectingNewAccount
+            chains
           }
         )
       ] })