@swype-org/react-sdk 0.1.30 → 0.1.31

package/dist/index.js

@@ -33,6 +33,9 @@ var darkTheme = {
   successBg: "#0f2f2a",
   error: "#d46a72",
   errorBg: "#301d21",
+  warning: "#F57C00",
+  warningBg: "#3D2E00",
+  warningText: "#FFB74D",
   shadow: "0 1px 4px rgba(0,0,0,0.35)",
   shadowLg: "0 18px 44px rgba(0,0,0,0.42)",
   radius: "14px",
@@ -57,6 +60,9 @@ var lightTheme = {
   successBg: "#e6f7f1",
   error: "#ce6670",
   errorBg: "#fdf1f2",
+  warning: "#F57C00",
+  warningBg: "#FFF8E1",
+  warningText: "#5D4037",
   shadow: "0 1px 3px rgba(12, 31, 39, 0.08)",
   shadowLg: "0 20px 48px rgba(19, 61, 75, 0.14)",
   radius: "14px",
@@ -1388,703 +1394,6 @@ function Spinner({ size = 40, label }) {
     }
   );
 }
-function ProviderCard({ provider, selected, onClick }) {
-  const { tokens } = useSwypeConfig();
-  const [hovered, setHovered] = useState(false);
-  return /* @__PURE__ */ jsxs(
-    "button",
-    {
-      onClick,
-      onMouseEnter: () => setHovered(true),
-      onMouseLeave: () => setHovered(false),
-      style: {
-        display: "flex",
-        alignItems: "center",
-        gap: "12px",
-        width: "100%",
-        padding: "14px 16px",
-        background: selected ? tokens.accent + "18" : hovered ? tokens.bgHover : tokens.bgInput,
-        border: `1.5px solid ${selected ? tokens.accent : tokens.border}`,
-        borderRadius: tokens.radiusLg,
-        cursor: "pointer",
-        transition: "all 0.15s ease",
-        color: tokens.text,
-        fontFamily: "inherit",
-        fontSize: "0.95rem",
-        fontWeight: 500,
-        textAlign: "left",
-        outline: "none"
-      },
-      children: [
-        provider.logoURI ? /* @__PURE__ */ jsx(
-          "img",
-          {
-            src: provider.logoURI,
-            alt: provider.name,
-            style: {
-              width: 32,
-              height: 32,
-              borderRadius: "50%",
-              objectFit: "contain"
-            }
-          }
-        ) : /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              width: 32,
-              height: 32,
-              borderRadius: "50%",
-              background: tokens.accent + "30",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              fontSize: "0.875rem",
-              fontWeight: 700,
-              color: tokens.accent,
-              flexShrink: 0
-            },
-            children: provider.name.charAt(0).toUpperCase()
-          }
-        ),
-        /* @__PURE__ */ jsx("span", { children: provider.name }),
-        selected && /* @__PURE__ */ jsx(
-          "svg",
-          {
-            width: "18",
-            height: "18",
-            viewBox: "0 0 24 24",
-            fill: "none",
-            style: { marginLeft: "auto", flexShrink: 0 },
-            children: /* @__PURE__ */ jsx(
-              "path",
-              {
-                d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z",
-                fill: tokens.accent
-              }
-            )
-          }
-        )
-      ]
-    }
-  );
-}
-function AccountDropdown({
-  accounts,
-  selectedAccountId,
-  onSelect,
-  selectedWalletId,
-  onWalletSelect
-}) {
-  const { tokens } = useSwypeConfig();
-  const [open, setOpen] = useState(false);
-  const containerRef = useRef(null);
-  const selected = accounts.find((a) => a.id === selectedAccountId);
-  const selectedWallet = selected?.wallets.find(
-    (w) => w.id === selectedWalletId
-  );
-  useEffect(() => {
-    if (!open) return;
-    const handleClick = (e) => {
-      if (containerRef.current && !containerRef.current.contains(e.target)) {
-        setOpen(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__ */ jsxs(
-      "div",
-      {
-        style: {
-          display: "flex",
-          alignItems: "center",
-          gap: "6px",
-          fontSize: "0.85rem",
-          color: tokens.textSecondary
-        },
-        children: [
-          /* @__PURE__ */ jsx("span", { style: { fontWeight: 500 }, children: accounts[0].name }),
-          (selectedWallet ?? accounts[0].wallets[0]) && /* @__PURE__ */ 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) {
-      total += w.balance.available.amount;
-    }
-    return total > 0 ? `$${total.toFixed(2)}` : "";
-  };
-  const hasActiveWallet = (account) => account.wallets.some((w) => w.status === "ACTIVE");
-  return /* @__PURE__ */ jsxs("div", { ref: containerRef, style: { position: "relative" }, children: [
-    /* @__PURE__ */ jsxs(
-      "button",
-      {
-        onClick: () => setOpen(!open),
-        style: {
-          display: "flex",
-          alignItems: "center",
-          gap: "6px",
-          background: tokens.bgCard,
-          border: `1px solid ${tokens.border}`,
-          cursor: "pointer",
-          padding: "7px 10px",
-          borderRadius: "999px",
-          color: tokens.textSecondary,
-          fontFamily: "inherit",
-          fontSize: "0.85rem",
-          outline: "none"
-        },
-        children: [
-          /* @__PURE__ */ jsx("span", { style: { fontWeight: 500, color: tokens.text }, children: selected?.name ?? "Select account" }),
-          (selectedWallet ?? selected?.wallets?.[0]) && /* @__PURE__ */ 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__ */ jsx(
-            "svg",
-            {
-              width: "12",
-              height: "12",
-              viewBox: "0 0 24 24",
-              fill: "none",
-              style: {
-                transform: open ? "rotate(180deg)" : "rotate(0deg)",
-                transition: "transform 0.15s ease",
-                flexShrink: 0
-              },
-              children: /* @__PURE__ */ jsx(
-                "path",
-                {
-                  d: "M7 10l5 5 5-5",
-                  stroke: tokens.textMuted,
-                  strokeWidth: "2",
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round"
-                }
-              )
-            }
-          )
-        ]
-      }
-    ),
-    open && /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: {
-          position: "absolute",
-          top: "100%",
-          left: 0,
-          right: 0,
-          marginTop: "4px",
-          background: tokens.bgCard,
-          border: `1px solid ${tokens.border}`,
-          borderRadius: tokens.radiusLg,
-          boxShadow: tokens.shadowLg,
-          zIndex: 50,
-          overflow: "hidden",
-          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 = onWalletSelect && walletsWithBalance.length > 0;
-          return /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ 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__ */ jsxs("div", { style: { minWidth: 0, flex: 1 }, children: [
-                    /* @__PURE__ */ jsxs(
-                      "div",
-                      {
-                        style: {
-                          display: "flex",
-                          alignItems: "center",
-                          gap: "6px"
-                        },
-                        children: [
-                          /* @__PURE__ */ jsx("span", { style: { fontWeight: 500 }, children: account.name }),
-                          active && /* @__PURE__ */ 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__ */ jsx(
-                      "div",
-                      {
-                        style: {
-                          fontSize: "0.75rem",
-                          color: tokens.textMuted,
-                          marginTop: "2px"
-                        },
-                        children: balance
-                      }
-                    )
-                  ] }),
-                  isAcctSelected && !selectedWalletId && /* @__PURE__ */ jsx(
-                    "svg",
-                    {
-                      width: "14",
-                      height: "14",
-                      viewBox: "0 0 24 24",
-                      fill: "none",
-                      style: { flexShrink: 0, marginLeft: "8px" },
-                      children: /* @__PURE__ */ 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__ */ jsxs(
-                "button",
-                {
-                  onClick: () => {
-                    onWalletSelect(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__ */ jsxs(
-                      "div",
-                      {
-                        style: {
-                          display: "flex",
-                          alignItems: "center",
-                          gap: "6px",
-                          minWidth: 0,
-                          flex: 1
-                        },
-                        children: [
-                          /* @__PURE__ */ jsx(
-                            "span",
-                            {
-                              style: {
-                                fontWeight: 500,
-                                fontSize: "0.8rem"
-                              },
-                              children: wallet.chain.name
-                            }
-                          ),
-                          /* @__PURE__ */ jsx(
-                            "span",
-                            {
-                              style: {
-                                fontSize: "0.7rem",
-                                color: tokens.textMuted,
-                                fontFamily: '"SF Mono", "Fira Code", monospace'
-                              },
-                              children: wallet.name
-                            }
-                          ),
-                          walletBal && /* @__PURE__ */ jsx(
-                            "span",
-                            {
-                              style: {
-                                fontSize: "0.7rem",
-                                color: tokens.textMuted,
-                                marginLeft: "auto"
-                              },
-                              children: walletBal
-                            }
-                          )
-                        ]
-                      }
-                    ),
-                    isWalletSelected && /* @__PURE__ */ jsx(
-                      "svg",
-                      {
-                        width: "12",
-                        height: "12",
-                        viewBox: "0 0 24 24",
-                        fill: "none",
-                        style: {
-                          flexShrink: 0,
-                          marginLeft: "8px"
-                        },
-                        children: /* @__PURE__ */ 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);
-        })
-      }
-    )
-  ] });
-}
-var ASSETS = ["USDC", "USDT"];
-function AdvancedSettings({
-  settings,
-  onChange,
-  chains,
-  providers,
-  onConnectNewAccount,
-  connectingNewAccount
-}) {
-  const { tokens } = useSwypeConfig();
-  const [open, setOpen] = useState(false);
-  const [showProviders, setShowProviders] = useState(false);
-  return /* @__PURE__ */ jsxs("div", { style: { marginTop: "12px" }, children: [
-    /* @__PURE__ */ jsxs(
-      "button",
-      {
-        onClick: () => setOpen(!open),
-        style: {
-          display: "flex",
-          alignItems: "center",
-          gap: "6px",
-          background: "transparent",
-          border: "none",
-          cursor: "pointer",
-          padding: "4px 0",
-          color: tokens.textMuted,
-          fontFamily: "inherit",
-          fontSize: "0.8rem",
-          fontWeight: 500,
-          outline: "none",
-          letterSpacing: "0.02em"
-        },
-        children: [
-          /* @__PURE__ */ jsx(
-            "svg",
-            {
-              width: "10",
-              height: "10",
-              viewBox: "0 0 24 24",
-              fill: "none",
-              style: {
-                transform: open ? "rotate(180deg)" : "rotate(0deg)",
-                transition: "transform 0.15s ease"
-              },
-              children: /* @__PURE__ */ jsx(
-                "path",
-                {
-                  d: "M7 10l5 5 5-5",
-                  stroke: tokens.textMuted,
-                  strokeWidth: "2.5",
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round"
-                }
-              )
-            }
-          ),
-          "Advanced options"
-        ]
-      }
-    ),
-    open && /* @__PURE__ */ jsxs(
-      "div",
-      {
-        style: {
-          marginTop: "10px",
-          padding: "14px",
-          background: tokens.bgInput,
-          borderRadius: tokens.radiusLg,
-          border: `1px solid ${tokens.border}`
-        },
-        children: [
-          /* @__PURE__ */ jsxs("div", { style: { marginBottom: "14px" }, children: [
-            /* @__PURE__ */ jsx(
-              "label",
-              {
-                style: {
-                  display: "block",
-                  fontSize: "0.7rem",
-                  fontWeight: 600,
-                  color: tokens.textMuted,
-                  textTransform: "uppercase",
-                  letterSpacing: "0.05em",
-                  marginBottom: "6px"
-                },
-                children: "Asset"
-              }
-            ),
-            /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: "6px" }, children: ASSETS.map((asset) => {
-              const isSelected = settings.asset === asset;
-              return /* @__PURE__ */ jsx(
-                "button",
-                {
-                  onClick: () => onChange({
-                    ...settings,
-                    asset: isSelected ? null : asset
-                  }),
-                  style: {
-                    padding: "7px 14px",
-                    fontSize: "0.8rem",
-                    fontWeight: 600,
-                    fontFamily: "inherit",
-                    borderRadius: "999px",
-                    border: `1.5px solid ${isSelected ? tokens.accent : tokens.border}`,
-                    background: isSelected ? tokens.accent + "18" : tokens.bgCard,
-                    color: isSelected ? tokens.accent : tokens.text,
-                    cursor: "pointer",
-                    outline: "none",
-                    transition: "all 0.12s ease"
-                  },
-                  children: asset
-                },
-                asset
-              );
-            }) })
-          ] }),
-          chains.length > 0 && /* @__PURE__ */ jsxs("div", { style: { marginBottom: "14px" }, children: [
-            /* @__PURE__ */ jsx(
-              "label",
-              {
-                style: {
-                  display: "block",
-                  fontSize: "0.7rem",
-                  fontWeight: 600,
-                  color: tokens.textMuted,
-                  textTransform: "uppercase",
-                  letterSpacing: "0.05em",
-                  marginBottom: "6px"
-                },
-                children: "Chain"
-              }
-            ),
-            /* @__PURE__ */ jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: "6px" }, children: chains.map((chain) => {
-              const isSelected = settings.chain === chain.name;
-              return /* @__PURE__ */ jsx(
-                "button",
-                {
-                  onClick: () => onChange({
-                    ...settings,
-                    chain: isSelected ? null : chain.name
-                  }),
-                  style: {
-                    padding: "7px 14px",
-                    fontSize: "0.8rem",
-                    fontWeight: 600,
-                    fontFamily: "inherit",
-                    borderRadius: "999px",
-                    border: `1.5px solid ${isSelected ? tokens.accent : tokens.border}`,
-                    background: isSelected ? tokens.accent + "18" : tokens.bgCard,
-                    color: isSelected ? tokens.accent : tokens.text,
-                    cursor: "pointer",
-                    outline: "none",
-                    transition: "all 0.12s ease"
-                  },
-                  children: chain.name
-                },
-                chain.id
-              );
-            }) })
-          ] }),
-          /* @__PURE__ */ jsx("div", { children: !showProviders ? /* @__PURE__ */ 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__ */ jsx(
-                  "svg",
-                  {
-                    width: "14",
-                    height: "14",
-                    viewBox: "0 0 24 24",
-                    fill: "none",
-                    children: /* @__PURE__ */ jsx(
-                      "path",
-                      {
-                        d: "M12 5v14M5 12h14",
-                        stroke: tokens.textMuted,
-                        strokeWidth: "2",
-                        strokeLinecap: "round"
-                      }
-                    )
-                  }
-                ),
-                "Connect new account"
-              ]
-            }
-          ) : /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsxs(
-              "div",
-              {
-                style: {
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "space-between",
-                  marginBottom: "8px"
-                },
-                children: [
-                  /* @__PURE__ */ jsx(
-                    "label",
-                    {
-                      style: {
-                        fontSize: "0.7rem",
-                        fontWeight: 600,
-                        color: tokens.textMuted,
-                        textTransform: "uppercase",
-                        letterSpacing: "0.05em"
-                      },
-                      children: "Select provider"
-                    }
-                  ),
-                  /* @__PURE__ */ 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__ */ jsx(
-              "div",
-              {
-                style: {
-                  display: "flex",
-                  flexDirection: "column",
-                  gap: "6px"
-                },
-                children: providers.map((p) => /* @__PURE__ */ jsx(
-                  ProviderCard,
-                  {
-                    provider: p,
-                    selected: false,
-                    onClick: () => {
-                      onConnectNewAccount(p.id);
-                      setShowProviders(false);
-                    }
-                  },
-                  p.id
-                ))
-              }
-            )
-          ] }) })
-        ]
-      }
-    )
-  ] });
-}
 
 // src/auth.ts
 var EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
@@ -2135,14 +1444,6 @@ function getTransferStatus(polledTransfer, localTransfer) {
   const transfer = resolvePreferredTransfer(polledTransfer, localTransfer);
   return transfer?.status ?? "UNKNOWN";
 }
-function getDisplayTransferStatus(polledTransfer, localTransfer) {
-  return getTransferStatus(polledTransfer, localTransfer).toUpperCase();
-}
-function getTransferIdSuffix(polledTransfer, localTransfer) {
-  const transfer = resolvePreferredTransfer(polledTransfer, localTransfer);
-  if (!transfer?.id) return "n/a";
-  return transfer.id.slice(-8);
-}
 function hasProcessingTimedOut(processingStartedAtMs, nowMs) {
   if (!processingStartedAtMs) return false;
   return nowMs - processingStartedAtMs >= PROCESSING_TIMEOUT_MS;
@@ -2162,98 +1463,1920 @@ function isMobileUserAgent(userAgent) {
 function shouldUseWalletConnector(options) {
   return options.useWalletConnector ?? !isMobileUserAgent(options.userAgent);
 }
-var ACTIVE_CREDENTIAL_STORAGE_KEY = "swype_active_credential_id";
-var MIN_SEND_AMOUNT_USD = 0.25;
-function computeSmartDefaults(accts, transferAmount) {
-  if (accts.length === 0) return null;
-  for (const acct of accts) {
-    for (const wallet of acct.wallets) {
-      if (wallet.status === "ACTIVE") {
-        const bestSource = wallet.sources.find(
-          (s) => s.balance.available.amount >= transferAmount
-        );
-        if (bestSource) {
-          return { accountId: acct.id, walletId: wallet.id };
-        }
+function ScreenLayout({ children, footer }) {
+  const { tokens } = useSwypeConfig();
+  return /* @__PURE__ */ jsxs("div", { style: containerStyle(tokens.bgCard), children: [
+    /* @__PURE__ */ jsx("div", { style: bodyStyle, children }),
+    footer && /* @__PURE__ */ jsx("div", { style: footerStyle, children: footer })
+  ] });
+}
+var containerStyle = (bg) => ({
+  display: "flex",
+  flexDirection: "column",
+  minHeight: "100%",
+  maxWidth: 420,
+  width: "100%",
+  margin: "0 auto",
+  background: bg,
+  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+  boxSizing: "border-box"
+});
+var bodyStyle = {
+  flex: 1,
+  padding: "0 24px",
+  display: "flex",
+  flexDirection: "column"
+};
+var footerStyle = {
+  padding: "16px 24px 24px",
+  marginTop: "auto"
+};
+function ScreenHeader({ title, right, onBack, badge }) {
+  const { tokens } = useSwypeConfig();
+  return /* @__PURE__ */ jsxs("div", { style: headerStyle, children: [
+    /* @__PURE__ */ jsx("div", { style: leftSlotStyle, children: onBack && /* @__PURE__ */ jsx("button", { type: "button", onClick: onBack, style: backButtonStyle(tokens.text), "aria-label": "Go back", children: /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M15 18l-6-6 6-6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }) }),
+    /* @__PURE__ */ jsxs("div", { style: centerSlotStyle, children: [
+      title && /* @__PURE__ */ jsx("span", { style: titleStyle(tokens.text), children: title }),
+      badge && /* @__PURE__ */ jsx("span", { style: badgeStyle(tokens.textMuted), children: badge })
+    ] }),
+    /* @__PURE__ */ jsx("div", { style: rightSlotStyle, children: right })
+  ] });
+}
+var headerStyle = {
+  display: "flex",
+  alignItems: "center",
+  padding: "16px 0",
+  minHeight: 52
+};
+var leftSlotStyle = { flex: "0 0 40px" };
+var rightSlotStyle = { flex: "0 0 40px", display: "flex", justifyContent: "flex-end" };
+var centerSlotStyle = {
+  flex: 1,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: 8
+};
+var backButtonStyle = (color) => ({
+  background: "transparent",
+  border: "none",
+  cursor: "pointer",
+  padding: 4,
+  color,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center"
+});
+var titleStyle = (color) => ({
+  fontSize: "0.9rem",
+  fontWeight: 600,
+  color,
+  letterSpacing: "-0.01em"
+});
+var badgeStyle = (color) => ({
+  fontSize: "0.78rem",
+  fontWeight: 500,
+  color
+});
+function PoweredByFooter() {
+  const { tokens } = useSwypeConfig();
+  return /* @__PURE__ */ jsxs("div", { style: containerStyle2(tokens.textMuted), children: [
+    /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM12 17c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3-9H9V6c0-1.66 1.34-3 3-3s3 1.34 3 3v2z",
+        fill: "currentColor"
       }
+    ) }),
+    /* @__PURE__ */ jsx("span", { children: "Powered by Swype" }),
+    /* @__PURE__ */ jsx("span", { style: dotStyle, children: "\xB7" }),
+    /* @__PURE__ */ jsx("span", { children: "Non-custodial" })
+  ] });
+}
+var containerStyle2 = (color) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: 6,
+  fontSize: "0.75rem",
+  color,
+  padding: "12px 0 4px"
+});
+var dotStyle = { opacity: 0.5 };
+function PrimaryButton({ children, onClick, disabled, loading, icon }) {
+  const { tokens } = useSwypeConfig();
+  const isDisabled = disabled || loading;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick,
+      disabled: isDisabled,
+      style: buttonStyle(tokens, isDisabled),
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { style: iconWrapStyle, children: icon }),
+        loading ? "Please wait..." : children
+      ]
     }
-  }
-  let bestAccount = null;
-  let bestWallet = null;
-  let bestBalance = -1;
-  let bestIsActive = false;
-  for (const acct of accts) {
-    for (const wallet of acct.wallets) {
-      const walletBal = wallet.balance.available.amount;
-      const isActive = wallet.status === "ACTIVE";
-      if (walletBal > bestBalance || walletBal === bestBalance && isActive && !bestIsActive) {
-        bestBalance = walletBal;
-        bestAccount = acct;
-        bestWallet = wallet;
-        bestIsActive = isActive;
-      }
+  );
+}
+var buttonStyle = (tokens, disabled) => ({
+  width: "100%",
+  padding: "16px 24px",
+  background: `linear-gradient(180deg, ${tokens.accent}, ${tokens.accentHover})`,
+  color: tokens.accentText,
+  border: "none",
+  borderRadius: 999,
+  fontSize: "1rem",
+  fontWeight: 700,
+  cursor: disabled ? "not-allowed" : "pointer",
+  opacity: disabled ? 0.5 : 1,
+  transition: "filter 0.15s ease, transform 0.15s ease",
+  fontFamily: "inherit",
+  boxShadow: "0 8px 18px rgba(40, 182, 122, 0.22)",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: 8
+});
+var iconWrapStyle = {
+  display: "flex",
+  alignItems: "center"
+};
+function OutlineButton({ children, onClick, disabled }) {
+  const { tokens } = useSwypeConfig();
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick,
+      disabled,
+      style: buttonStyle2(tokens, disabled),
+      children
     }
+  );
+}
+var buttonStyle2 = (tokens, disabled) => ({
+  width: "100%",
+  padding: "16px 24px",
+  background: tokens.bgCard,
+  color: tokens.text,
+  border: `1.5px solid ${tokens.border}`,
+  borderRadius: 999,
+  fontSize: "0.95rem",
+  fontWeight: 600,
+  cursor: disabled ? "not-allowed" : "pointer",
+  opacity: disabled ? 0.5 : 1,
+  fontFamily: "inherit",
+  transition: "opacity 0.15s ease"
+});
+var defaultIcon = /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
+  "path",
+  {
+    d: "M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z",
+    fill: "currentColor"
   }
-  if (bestAccount) {
-    return {
-      accountId: bestAccount.id,
-      walletId: bestWallet?.id ?? null
-    };
-  }
-  return { accountId: accts[0].id, walletId: null };
+) });
+function InfoBanner({ children, icon }) {
+  const { tokens } = useSwypeConfig();
+  return /* @__PURE__ */ jsxs("div", { style: containerStyle3(tokens.accent), children: [
+    /* @__PURE__ */ jsx("span", { style: iconStyle, children: icon ?? defaultIcon }),
+    /* @__PURE__ */ jsx("span", { style: textStyle, children })
+  ] });
 }
-function parseRawBalance(rawBalance, decimals) {
-  const parsed = Number(rawBalance);
-  if (!Number.isFinite(parsed)) return 0;
-  return parsed / 10 ** decimals;
+var containerStyle3 = (accent) => ({
+  display: "flex",
+  alignItems: "flex-start",
+  gap: 10,
+  padding: "14px 16px",
+  background: `${accent}0D`,
+  borderRadius: 16,
+  fontSize: "0.82rem",
+  lineHeight: 1.5,
+  color: "inherit"
+});
+var iconStyle = {
+  flexShrink: 0,
+  marginTop: 1,
+  display: "flex"
+};
+var textStyle = { flex: 1 };
+function WarningBanner({ title, children }) {
+  return /* @__PURE__ */ jsxs("div", { style: containerStyle4, children: [
+    /* @__PURE__ */ jsxs("div", { style: headerStyle2, children: [
+      /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", style: iconStyle2, children: /* @__PURE__ */ jsx("path", { d: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z", fill: "#F57C00" }) }),
+      /* @__PURE__ */ jsx("strong", { children: title })
+    ] }),
+    /* @__PURE__ */ jsx("div", { style: bodyStyle2, children })
+  ] });
 }
-function buildSelectSourceChoices(options) {
-  const chainChoices = [];
-  const chainIndexByName = /* @__PURE__ */ new Map();
-  for (const option of options) {
-    const chainName = option.chainName;
-    const tokenSymbol = option.tokenSymbol;
-    const balance = parseRawBalance(option.rawBalance, option.decimals);
-    let chainChoice;
-    const existingChainIdx = chainIndexByName.get(chainName);
-    if (existingChainIdx === void 0) {
-      chainChoice = { chainName, balance: 0, tokens: [] };
-      chainIndexByName.set(chainName, chainChoices.length);
-      chainChoices.push(chainChoice);
-    } else {
-      chainChoice = chainChoices[existingChainIdx];
+var containerStyle4 = {
+  padding: "14px 16px",
+  background: "#FFF8E1",
+  border: "1px solid #FFE082",
+  borderRadius: 16,
+  fontSize: "0.84rem",
+  lineHeight: 1.5,
+  color: "#5D4037"
+};
+var headerStyle2 = {
+  display: "flex",
+  alignItems: "center",
+  gap: 8,
+  marginBottom: 4,
+  fontWeight: 600,
+  color: "#37474F"
+};
+var iconStyle2 = { flexShrink: 0 };
+var bodyStyle2 = { color: "#6D4C41" };
+function IconCircle({ children, variant = "accent", size = 56 }) {
+  const { tokens } = useSwypeConfig();
+  const bgMap = {
+    accent: `${tokens.accent}18`,
+    success: tokens.successBg,
+    error: tokens.errorBg
+  };
+  return /* @__PURE__ */ jsx("div", { style: circleStyle(bgMap[variant], size), children });
+}
+var circleStyle = (bg, size) => ({
+  width: size,
+  height: size,
+  borderRadius: "50%",
+  background: bg,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  margin: "0 auto",
+  flexShrink: 0
+});
+function OtpInput({ value, onChange, length = 6, disabled }) {
+  const { tokens } = useSwypeConfig();
+  const inputsRef = useRef([]);
+  const digits = value.padEnd(length, "").split("").slice(0, length);
+  const focusInput = useCallback((index) => {
+    const clamped = Math.max(0, Math.min(index, length - 1));
+    inputsRef.current[clamped]?.focus();
+  }, [length]);
+  const handleChange = useCallback((index, char) => {
+    const digit = char.replace(/\D/g, "").slice(0, 1);
+    const next = digits.slice();
+    next[index] = digit;
+    const joined = next.join("").replace(/\s/g, "");
+    onChange(joined);
+    if (digit && index < length - 1) {
+      focusInput(index + 1);
     }
-    chainChoice.balance += balance;
-    const existingToken = chainChoice.tokens.find((token) => token.tokenSymbol === tokenSymbol);
-    if (existingToken) {
-      existingToken.balance += balance;
-    } else {
-      chainChoice.tokens.push({ tokenSymbol, balance });
+  }, [digits, onChange, length, focusInput]);
+  const handleKeyDown = useCallback((index, e) => {
+    if (e.key === "Backspace" && !digits[index] && index > 0) {
+      focusInput(index - 1);
+    } else if (e.key === "ArrowLeft" && index > 0) {
+      focusInput(index - 1);
+    } else if (e.key === "ArrowRight" && index < length - 1) {
+      focusInput(index + 1);
     }
-  }
-  return chainChoices;
+  }, [digits, focusInput, length]);
+  const handlePaste = useCallback((e) => {
+    e.preventDefault();
+    const pasted = e.clipboardData.getData("text").replace(/\D/g, "").slice(0, length);
+    onChange(pasted);
+    focusInput(Math.min(pasted.length, length - 1));
+  }, [onChange, length, focusInput]);
+  return /* @__PURE__ */ jsx("div", { style: containerStyle5, children: digits.map((digit, i) => /* @__PURE__ */ jsx(
+    "input",
+    {
+      ref: (el) => {
+        inputsRef.current[i] = el;
+      },
+      type: "text",
+      inputMode: "numeric",
+      autoComplete: i === 0 ? "one-time-code" : "off",
+      maxLength: 1,
+      value: digit.trim(),
+      disabled,
+      onChange: (e) => handleChange(i, e.target.value),
+      onKeyDown: (e) => handleKeyDown(i, e),
+      onPaste: i === 0 ? handlePaste : void 0,
+      onFocus: (e) => e.target.select(),
+      style: inputStyle(tokens, !!digit.trim())
+    },
+    i
+  )) });
 }
-function SwypePayment({
-  destination,
-  onComplete,
-  onError,
-  useWalletConnector,
-  idempotencyKey,
-  merchantAuthorization
+var containerStyle5 = {
+  display: "flex",
+  gap: 8,
+  justifyContent: "center"
+};
+var inputStyle = (tokens, filled) => ({
+  width: 44,
+  height: 52,
+  borderRadius: 12,
+  border: `1.5px solid ${filled ? tokens.borderFocus : tokens.border}`,
+  background: tokens.bgInput,
+  color: tokens.text,
+  fontSize: "1.25rem",
+  fontWeight: 600,
+  fontFamily: "inherit",
+  textAlign: "center",
+  outline: "none",
+  caretColor: tokens.borderFocus,
+  transition: "border-color 0.15s ease"
+});
+function LimitSlider({
+  value,
+  min,
+  max,
+  step = 1,
+  onChange,
+  ticks,
+  disabled
 }) {
-  const { apiBaseUrl, tokens, depositAmount } = useSwypeConfig();
-  const { ready, authenticated, user, logout, getAccessToken } = usePrivy();
-  const {
-    sendCode: sendEmailCode,
-    loginWithCode: loginWithEmailCode,
-    state: emailLoginState
-  } = useLoginWithEmail();
-  const {
-    sendCode: sendSmsCode,
-    loginWithCode: loginWithSmsCode,
-    state: smsLoginState
-  } = useLoginWithSms();
-  const [step, setStep] = useState("login");
+  const { tokens } = useSwypeConfig();
+  const pct = (value - min) / (max - min) * 100;
+  const handleChange = useCallback(
+    (e) => onChange(Number(e.target.value)),
+    [onChange]
+  );
+  return /* @__PURE__ */ jsxs("div", { style: wrapperStyle, children: [
+    /* @__PURE__ */ jsxs("div", { style: trackContainerStyle, children: [
+      /* @__PURE__ */ jsx("div", { style: trackBgStyle(tokens.border) }),
+      /* @__PURE__ */ jsx("div", { style: trackFillStyle(tokens.accent, pct) }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "range",
+          min,
+          max,
+          step,
+          value,
+          onChange: handleChange,
+          disabled,
+          style: rangeInputStyle(tokens.accent)
+        }
+      )
+    ] }),
+    ticks && ticks.length > 0 && /* @__PURE__ */ jsx("div", { style: ticksStyle, children: ticks.map((tick) => /* @__PURE__ */ jsxs("span", { style: tickLabelStyle(tokens.textMuted), children: [
+      "$",
+      tick
+    ] }, tick)) }),
+    /* @__PURE__ */ jsx("style", { children: sliderThumbCss(tokens.accent) })
+  ] });
+}
+var wrapperStyle = { width: "100%" };
+var trackContainerStyle = {
+  position: "relative",
+  height: 28,
+  display: "flex",
+  alignItems: "center"
+};
+var trackBgStyle = (color) => ({
+  position: "absolute",
+  left: 0,
+  right: 0,
+  height: 4,
+  borderRadius: 2,
+  background: color
+});
+var trackFillStyle = (color, pct) => ({
+  position: "absolute",
+  left: 0,
+  width: `${pct}%`,
+  height: 4,
+  borderRadius: 2,
+  background: color
+});
+var rangeInputStyle = (_accent) => ({
+  position: "absolute",
+  left: 0,
+  right: 0,
+  width: "100%",
+  height: 28,
+  margin: 0,
+  opacity: 0,
+  cursor: "pointer",
+  zIndex: 2
+});
+var ticksStyle = {
+  display: "flex",
+  justifyContent: "space-between",
+  marginTop: 6
+};
+var tickLabelStyle = (color) => ({
+  fontSize: "0.72rem",
+  fontWeight: 500,
+  color
+});
+var sliderThumbCss = (accent) => `
+  .swype-slider-wrap input[type="range"] {
+    -webkit-appearance: none;
+    appearance: none;
+    opacity: 1 !important;
+    background: transparent;
+  }
+  .swype-slider-wrap input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background: ${accent};
+    border: 3px solid #fff;
+    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
+    cursor: pointer;
+  }
+`;
+function SourceCard({ name, address, verified, onChangeSource }) {
+  const { tokens } = useSwypeConfig();
+  return /* @__PURE__ */ jsxs("div", { style: containerStyle6(tokens), children: [
+    /* @__PURE__ */ jsxs("div", { style: leftStyle, children: [
+      /* @__PURE__ */ jsx("div", { style: iconStyle3(tokens.textMuted), children: /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M21 7H3c-1.1 0-2 .9-2 2v6c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2zm0 8H3V9h18v6z",
+          fill: "currentColor"
+        }
+      ) }) }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsxs("div", { style: nameRowStyle, children: [
+          /* @__PURE__ */ jsx("span", { style: nameStyle(tokens.text), children: name }),
+          verified && /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z", fill: tokens.accent }) })
+        ] }),
+        address && /* @__PURE__ */ jsx("span", { style: addressStyle(tokens.textMuted), children: address })
+      ] })
+    ] }),
+    onChangeSource && /* @__PURE__ */ jsx("button", { type: "button", onClick: onChangeSource, style: changeStyle(tokens.accent), children: "Change source" })
+  ] });
+}
+var containerStyle6 = (tokens) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  padding: "12px 16px",
+  background: tokens.bgInput,
+  border: `1px solid ${tokens.border}`,
+  borderRadius: 16
+});
+var leftStyle = {
+  display: "flex",
+  alignItems: "center",
+  gap: 10
+};
+var iconStyle3 = (color) => ({
+  color,
+  display: "flex",
+  alignItems: "center"
+});
+var nameRowStyle = {
+  display: "flex",
+  alignItems: "center",
+  gap: 4
+};
+var nameStyle = (color) => ({
+  fontWeight: 600,
+  fontSize: "0.9rem",
+  color
+});
+var addressStyle = (color) => ({
+  fontSize: "0.72rem",
+  color,
+  fontFamily: '"SF Mono", "Fira Code", monospace'
+});
+var changeStyle = (color) => ({
+  background: "transparent",
+  border: "none",
+  color,
+  fontWeight: 600,
+  fontSize: "0.82rem",
+  cursor: "pointer",
+  fontFamily: "inherit",
+  padding: 0
+});
+function StepList({ steps }) {
+  const { tokens } = useSwypeConfig();
+  return /* @__PURE__ */ jsx("div", { style: listStyle, children: steps.map((step, i) => {
+    const isComplete = step.status === "complete";
+    const isActive = step.status === "active";
+    return /* @__PURE__ */ jsxs("div", { style: rowStyle, children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: badgeStyle2(
+            isComplete ? tokens.accent : isActive ? tokens.accent : tokens.border,
+            isComplete || isActive
+          ),
+          children: isComplete ? /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z", fill: "#fff" }) }) : /* @__PURE__ */ jsx("span", { style: badgeNumberStyle(isActive), children: i + 1 })
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { style: labelContainerStyle, children: [
+        /* @__PURE__ */ jsx("span", { style: labelStyle(isComplete || isActive ? tokens.text : tokens.textMuted), children: step.label }),
+        step.detail && /* @__PURE__ */ jsx("span", { style: detailStyle(tokens.textMuted), children: step.detail })
+      ] })
+    ] }, i);
+  }) });
+}
+var listStyle = {
+  display: "flex",
+  flexDirection: "column",
+  gap: 12
+};
+var rowStyle = {
+  display: "flex",
+  alignItems: "center",
+  gap: 12
+};
+var badgeStyle2 = (color, filled) => ({
+  width: 28,
+  height: 28,
+  borderRadius: "50%",
+  background: filled ? color : "transparent",
+  border: filled ? "none" : `1.5px solid ${color}`,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  flexShrink: 0
+});
+var badgeNumberStyle = (active) => ({
+  fontSize: "0.75rem",
+  fontWeight: 600,
+  color: active ? "#fff" : "inherit"
+});
+var labelContainerStyle = {
+  display: "flex",
+  flexDirection: "column"
+};
+var labelStyle = (color) => ({
+  fontSize: "0.9rem",
+  fontWeight: 500,
+  color
+});
+var detailStyle = (color) => ({
+  fontSize: "0.75rem",
+  color
+});
+function LoginScreen({
+  authInput,
+  onAuthInputChange,
+  onSubmit,
+  sending,
+  error,
+  onBack
+}) {
+  const { tokens } = useSwypeConfig();
+  const disabled = authInput.trim().length === 0 || sending;
+  const walletLogos = ["MM", "R", "O", "P", "+"];
+  return /* @__PURE__ */ jsxs(
+    ScreenLayout,
+    {
+      footer: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(PrimaryButton, { onClick: onSubmit, disabled, loading: sending, children: "Continue" }),
+        /* @__PURE__ */ jsxs("div", { style: dividerStyle(tokens), children: [
+          /* @__PURE__ */ jsx("div", { style: dividerLineStyle(tokens.border) }),
+          /* @__PURE__ */ jsx("span", { children: "works with" }),
+          /* @__PURE__ */ jsx("div", { style: dividerLineStyle(tokens.border) })
+        ] }),
+        /* @__PURE__ */ jsx("div", { style: logosRowStyle, children: walletLogos.map((label) => /* @__PURE__ */ jsx("div", { style: logoCircleStyle(tokens), children: label }, label)) }),
+        /* @__PURE__ */ jsx(PoweredByFooter, {})
+      ] }),
+      children: [
+        /* @__PURE__ */ jsx(ScreenHeader, { onBack }),
+        /* @__PURE__ */ jsxs("div", { style: contentStyle, children: [
+          /* @__PURE__ */ jsx(IconCircle, { variant: "accent", size: 56, children: /* @__PURE__ */ jsx("svg", { width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z",
+              fill: tokens.accent
+            }
+          ) }) }),
+          /* @__PURE__ */ jsx("h2", { style: headingStyle(tokens.text), children: "One-time setup.\nOne-tap deposits after." }),
+          /* @__PURE__ */ jsx("p", { style: subtitleStyle(tokens.textSecondary), children: "Protected by Face ID." }),
+          error && /* @__PURE__ */ jsx("div", { style: errorStyle(tokens), children: error }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              id: "swype-login-identifier",
+              type: "text",
+              inputMode: "text",
+              autoComplete: "username",
+              placeholder: "Email or phone number",
+              value: authInput,
+              onChange: (e) => onAuthInputChange(e.target.value),
+              onKeyDown: (e) => {
+                if (e.key === "Enter" && !disabled) onSubmit();
+              },
+              style: inputStyle2(tokens)
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+var contentStyle = {
+  textAlign: "center",
+  flex: 1,
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  paddingTop: 24
+};
+var headingStyle = (color) => ({
+  fontSize: "1.65rem",
+  fontWeight: 700,
+  lineHeight: 1.2,
+  letterSpacing: "-0.02em",
+  color,
+  margin: "20px 0 8px",
+  whiteSpace: "pre-line"
+});
+var subtitleStyle = (color) => ({
+  fontSize: "0.84rem",
+  color,
+  margin: "0 0 24px",
+  lineHeight: 1.5
+});
+var inputStyle2 = (tokens) => ({
+  width: "100%",
+  padding: "15px 16px",
+  borderRadius: 16,
+  border: `1px solid ${tokens.border}`,
+  background: tokens.bgInput,
+  color: tokens.text,
+  fontSize: "0.95rem",
+  fontFamily: "inherit",
+  outline: "none",
+  boxSizing: "border-box"
+});
+var errorStyle = (tokens) => ({
+  background: tokens.errorBg,
+  border: `1px solid ${tokens.error}66`,
+  borderRadius: 16,
+  padding: "11px 14px",
+  color: tokens.error,
+  fontSize: "0.84rem",
+  marginBottom: 14,
+  lineHeight: 1.5,
+  width: "100%",
+  textAlign: "left"
+});
+var dividerStyle = (tokens) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: 10,
+  margin: "20px 0 14px",
+  color: tokens.textMuted,
+  fontSize: "0.82rem"
+});
+var dividerLineStyle = (color) => ({
+  flex: 1,
+  height: 1,
+  background: color
+});
+var logosRowStyle = {
+  display: "flex",
+  justifyContent: "center",
+  gap: 12,
+  marginBottom: 8
+};
+var logoCircleStyle = (tokens) => ({
+  width: 34,
+  height: 34,
+  borderRadius: 999,
+  border: `1px solid ${tokens.border}`,
+  background: tokens.bgInput,
+  color: tokens.textMuted,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  fontSize: "0.72rem",
+  fontWeight: 600
+});
+var RESEND_COOLDOWN_SECONDS = 30;
+function OtpVerifyScreen({
+  maskedIdentifier,
+  otpCode,
+  onOtpChange,
+  onVerify,
+  onResend,
+  onBack,
+  verifying,
+  error
+}) {
+  const { tokens } = useSwypeConfig();
+  const disabled = otpCode.trim().length !== 6 || verifying;
+  const [cooldown, setCooldown] = useState(RESEND_COOLDOWN_SECONDS);
+  const intervalRef = useRef(null);
+  useEffect(() => {
+    setCooldown(RESEND_COOLDOWN_SECONDS);
+    intervalRef.current = setInterval(() => {
+      setCooldown((prev) => {
+        if (prev <= 1) {
+          if (intervalRef.current) clearInterval(intervalRef.current);
+          return 0;
+        }
+        return prev - 1;
+      });
+    }, 1e3);
+    return () => {
+      if (intervalRef.current) clearInterval(intervalRef.current);
+    };
+  }, []);
+  const handleResend = useCallback(() => {
+    if (cooldown > 0) return;
+    onResend();
+    setCooldown(RESEND_COOLDOWN_SECONDS);
+    intervalRef.current = setInterval(() => {
+      setCooldown((prev) => {
+        if (prev <= 1) {
+          if (intervalRef.current) clearInterval(intervalRef.current);
+          return 0;
+        }
+        return prev - 1;
+      });
+    }, 1e3);
+  }, [cooldown, onResend]);
+  return /* @__PURE__ */ jsxs(
+    ScreenLayout,
+    {
+      footer: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(PrimaryButton, { onClick: onVerify, disabled, loading: verifying, children: "Verify" }),
+        /* @__PURE__ */ jsx("p", { style: hintStyle(tokens.textMuted), children: "Didn't get the code? Check your spam folder" }),
+        /* @__PURE__ */ jsx(PoweredByFooter, {})
+      ] }),
+      children: [
+        /* @__PURE__ */ jsx(ScreenHeader, { onBack }),
+        /* @__PURE__ */ jsxs("div", { style: contentStyle2, children: [
+          /* @__PURE__ */ jsx(IconCircle, { variant: "accent", size: 56, children: /* @__PURE__ */ jsx("svg", { width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z",
+              fill: tokens.accent
+            }
+          ) }) }),
+          /* @__PURE__ */ jsx("h2", { style: headingStyle2(tokens.text), children: "Check your email" }),
+          /* @__PURE__ */ jsxs("p", { style: subtitleStyle2(tokens.textSecondary), children: [
+            "We sent a 6-digit code to",
+            "\n",
+            /* @__PURE__ */ jsx("strong", { children: maskedIdentifier })
+          ] }),
+          error && /* @__PURE__ */ jsx("div", { style: errorBannerStyle(tokens), children: error }),
+          /* @__PURE__ */ jsx(OtpInput, { value: otpCode, onChange: onOtpChange, disabled: verifying }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleResend,
+              disabled: cooldown > 0,
+              style: resendStyle(tokens.textMuted, cooldown > 0),
+              children: cooldown > 0 ? `Resend code in ${cooldown}s` : "Resend code"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+var contentStyle2 = {
+  textAlign: "center",
+  flex: 1,
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  paddingTop: 24
+};
+var headingStyle2 = (color) => ({
+  fontSize: "1.5rem",
+  fontWeight: 700,
+  letterSpacing: "-0.02em",
+  color,
+  margin: "20px 0 8px"
+});
+var subtitleStyle2 = (color) => ({
+  fontSize: "0.88rem",
+  color,
+  margin: "0 0 28px",
+  lineHeight: 1.5,
+  whiteSpace: "pre-line"
+});
+var errorBannerStyle = (tokens) => ({
+  background: tokens.errorBg,
+  border: `1px solid ${tokens.error}66`,
+  borderRadius: 16,
+  padding: "11px 14px",
+  color: tokens.error,
+  fontSize: "0.84rem",
+  marginBottom: 14,
+  lineHeight: 1.5,
+  width: "100%",
+  textAlign: "left"
+});
+var resendStyle = (color, disabled) => ({
+  background: "transparent",
+  border: "none",
+  color,
+  cursor: disabled ? "default" : "pointer",
+  fontFamily: "inherit",
+  fontSize: "0.82rem",
+  marginTop: 16,
+  padding: 0,
+  opacity: disabled ? 0.6 : 1
+});
+var hintStyle = (color) => ({
+  textAlign: "center",
+  fontSize: "0.78rem",
+  color,
+  margin: "12px 0 0"
+});
+function CreatePasskeyScreen({
+  onCreatePasskey,
+  onSkip,
+  onBack,
+  creating,
+  error
+}) {
+  const { tokens } = useSwypeConfig();
+  return /* @__PURE__ */ jsxs(
+    ScreenLayout,
+    {
+      footer: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(PrimaryButton, { onClick: onCreatePasskey, disabled: creating, loading: creating, children: "Create passkey" }),
+        /* @__PURE__ */ jsx("button", { type: "button", onClick: onSkip, style: skipStyle(tokens.textMuted), disabled: creating, children: "Skip for now" }),
+        /* @__PURE__ */ jsx(PoweredByFooter, {})
+      ] }),
+      children: [
+        /* @__PURE__ */ jsx(ScreenHeader, { onBack }),
+        /* @__PURE__ */ jsxs("div", { style: contentStyle3, children: [
+          /* @__PURE__ */ jsx(IconCircle, { variant: "accent", size: 64, children: /* @__PURE__ */ jsxs("svg", { width: "36", height: "36", viewBox: "0 0 24 24", fill: "none", children: [
+            /* @__PURE__ */ jsx("rect", { x: "4", y: "4", width: "16", height: "16", rx: "3", stroke: tokens.accent, strokeWidth: "1.5", strokeDasharray: "3 2" }),
+            /* @__PURE__ */ jsx("circle", { cx: "9", cy: "10", r: "1", fill: tokens.accent }),
+            /* @__PURE__ */ jsx("circle", { cx: "15", cy: "10", r: "1", fill: tokens.accent }),
+            /* @__PURE__ */ jsx("path", { d: "M9 14c0 1.5 1.34 2.5 3 2.5s3-1 3-2.5", stroke: tokens.accent, strokeWidth: "1.2", strokeLinecap: "round" })
+          ] }) }),
+          /* @__PURE__ */ jsx("h2", { style: headingStyle3(tokens.text), children: "Create your passkey" }),
+          /* @__PURE__ */ jsx("p", { style: subtitleStyle3(tokens.textSecondary), children: "Use Face ID to sign in instantly \u2014 no passwords, no codes." }),
+          error && /* @__PURE__ */ jsx("div", { style: errorBannerStyle2(tokens), children: error }),
+          /* @__PURE__ */ jsx(InfoBanner, { children: "Your passkey is stored securely on your device. Swype never sees your biometric data." })
+        ] })
+      ]
+    }
+  );
+}
+var contentStyle3 = {
+  textAlign: "center",
+  flex: 1,
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  paddingTop: 32
+};
+var headingStyle3 = (color) => ({
+  fontSize: "1.45rem",
+  fontWeight: 700,
+  letterSpacing: "-0.02em",
+  color,
+  margin: "24px 0 8px"
+});
+var subtitleStyle3 = (color) => ({
+  fontSize: "0.9rem",
+  color,
+  margin: "0 0 28px",
+  lineHeight: 1.5,
+  maxWidth: 280
+});
+var errorBannerStyle2 = (tokens) => ({
+  background: tokens.errorBg,
+  border: `1px solid ${tokens.error}66`,
+  borderRadius: 16,
+  padding: "11px 14px",
+  color: tokens.error,
+  fontSize: "0.84rem",
+  marginBottom: 14,
+  lineHeight: 1.5,
+  width: "100%",
+  textAlign: "left"
+});
+var skipStyle = (color) => ({
+  background: "transparent",
+  border: "none",
+  color,
+  cursor: "pointer",
+  fontFamily: "inherit",
+  fontSize: "0.88rem",
+  fontWeight: 500,
+  display: "block",
+  width: "100%",
+  textAlign: "center",
+  padding: "12px 0 0"
+});
+var WALLET_EMOJIS = {
+  metamask: "\u{1F98A}",
+  rabby: "\u{1F430}",
+  ora: "\u2666\uFE0F",
+  phantom: "\u{1F47B}"
+};
+function WalletPickerScreen({
+  providers,
+  onSelectProvider,
+  onBack
+}) {
+  const { tokens } = useSwypeConfig();
+  const [hoveredId, setHoveredId] = useState(null);
+  const displayProviders = providers.length > 0 ? providers : [
+    { id: "metamask", name: "MetaMask" },
+    { id: "rabby", name: "Rabby" },
+    { id: "ora", name: "Ora" },
+    { id: "phantom", name: "Phantom" }
+  ];
+  return /* @__PURE__ */ jsxs(
+    ScreenLayout,
+    {
+      footer: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("p", { style: hintStyle2(tokens.textMuted), children: "You'll set your deposit limit in your wallet app." }),
+        /* @__PURE__ */ jsx(PoweredByFooter, {})
+      ] }),
+      children: [
+        /* @__PURE__ */ jsx(ScreenHeader, { title: "Set up Swype", onBack }),
+        /* @__PURE__ */ jsx("h2", { style: headingStyle4(tokens.text), children: "Where are your stablecoins?" }),
+        /* @__PURE__ */ jsx("p", { style: subtitleStyle4(tokens.textSecondary), children: "Select the wallet you want to deposit from" }),
+        /* @__PURE__ */ jsxs("div", { style: gridStyle, children: [
+          displayProviders.map((p) => {
+            const emoji = WALLET_EMOJIS[p.name.toLowerCase()] ?? p.name.charAt(0);
+            const isHovered = hoveredId === p.id;
+            return /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: () => onSelectProvider(p.id),
+                onMouseEnter: () => setHoveredId(p.id),
+                onMouseLeave: () => setHoveredId(null),
+                style: cardStyle(tokens, isHovered),
+                children: [
+                  "logoURI" in p && p.logoURI ? /* @__PURE__ */ jsx(
+                    "img",
+                    {
+                      src: p.logoURI,
+                      alt: p.name,
+                      style: logoImgStyle
+                    }
+                  ) : /* @__PURE__ */ jsx("span", { style: emojiStyle, children: emoji }),
+                  /* @__PURE__ */ jsx("span", { style: nameStyle2(tokens.text), children: p.name })
+                ]
+              },
+              p.id
+            );
+          }),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: () => onSelectProvider("other"),
+              onMouseEnter: () => setHoveredId("other"),
+              onMouseLeave: () => setHoveredId(null),
+              style: cardStyle(tokens, hoveredId === "other"),
+              children: [
+                /* @__PURE__ */ jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", style: { margin: "0 auto" }, children: /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    d: "M19 19H5V5h7V3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z",
+                    fill: tokens.textMuted
+                  }
+                ) }),
+                /* @__PURE__ */ jsx("span", { style: nameStyle2(tokens.text), children: "Other" })
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+var headingStyle4 = (color) => ({
+  fontSize: "1.35rem",
+  fontWeight: 700,
+  letterSpacing: "-0.02em",
+  color,
+  margin: "8px 0 4px"
+});
+var subtitleStyle4 = (color) => ({
+  fontSize: "0.88rem",
+  color,
+  margin: "0 0 24px"
+});
+var gridStyle = {
+  display: "grid",
+  gridTemplateColumns: "1fr 1fr",
+  gap: 12
+};
+var cardStyle = (tokens, hovered) => ({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: 8,
+  padding: "20px 12px",
+  background: hovered ? tokens.bgHover : tokens.bgInput,
+  border: `1.5px solid ${tokens.border}`,
+  borderRadius: 16,
+  cursor: "pointer",
+  fontFamily: "inherit",
+  transition: "background 0.15s ease",
+  outline: "none"
+});
+var emojiStyle = {
+  fontSize: "1.75rem",
+  lineHeight: 1
+};
+var logoImgStyle = {
+  width: 32,
+  height: 32,
+  borderRadius: 8,
+  objectFit: "contain"
+};
+var nameStyle2 = (color) => ({
+  fontSize: "0.88rem",
+  fontWeight: 600,
+  color
+});
+var hintStyle2 = (color) => ({
+  textAlign: "center",
+  fontSize: "0.82rem",
+  color,
+  margin: "0 0 4px"
+});
+var DEFAULT_TICKS = [25, 100, 250, 500];
+var DEFAULT_MIN = 25;
+var DEFAULT_MAX = 500;
+function SetupScreen({
+  availableBalance,
+  tokenCount,
+  sourceName,
+  onSetupOneTap,
+  onBack,
+  loading,
+  error
+}) {
+  const { tokens } = useSwypeConfig();
+  const [limit, setLimit] = useState(100);
+  const effectiveMax = Math.min(DEFAULT_MAX, availableBalance > 0 ? availableBalance : DEFAULT_MAX);
+  return /* @__PURE__ */ jsxs(
+    ScreenLayout,
+    {
+      footer: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          PrimaryButton,
+          {
+            onClick: () => onSetupOneTap(limit),
+            disabled: loading,
+            loading,
+            children: "Set up One-Tap"
+          }
+        ),
+        /* @__PURE__ */ jsx(PoweredByFooter, {})
+      ] }),
+      children: [
+        /* @__PURE__ */ jsx(ScreenHeader, { title: "Swype Setup", badge: "Simple", onBack }),
+        /* @__PURE__ */ jsx("h2", { style: headingStyle5(tokens.text), children: "Set up One-Tap deposits" }),
+        /* @__PURE__ */ jsx("p", { style: subtitleStyle5(tokens.textSecondary), children: "Set your limit for instant deposits. Like a contactless card \u2014 you choose the max." }),
+        error && /* @__PURE__ */ jsx("div", { style: errorBannerStyle3(tokens), children: error }),
+        /* @__PURE__ */ jsxs("div", { style: balanceRowStyle, children: [
+          /* @__PURE__ */ jsxs("div", { style: balanceLeftStyle, children: [
+            /* @__PURE__ */ jsx("div", { style: coinIconStyle(tokens.accent), children: /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: [
+              /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10", fill: "currentColor" }),
+              /* @__PURE__ */ jsx("text", { x: "12", y: "16", textAnchor: "middle", fontSize: "12", fill: "#fff", fontWeight: "700", children: "$" })
+            ] }) }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("div", { style: balanceLabelStyle(tokens.textMuted), children: "Available" }),
+              /* @__PURE__ */ jsxs("div", { style: balanceValueStyle(tokens.text), children: [
+                "$",
+                availableBalance.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })
+              ] })
+            ] })
+          ] }),
+          tokenCount > 0 && /* @__PURE__ */ jsxs("div", { style: tokenBadgeStyle(tokens), children: [
+            /* @__PURE__ */ jsx("span", { style: tokenDotStyle(tokens.accent) }),
+            tokenCount,
+            " ",
+            /* @__PURE__ */ jsx("span", { style: chevronStyle, children: ">" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: limitSectionStyle, children: [
+          /* @__PURE__ */ jsx("div", { style: limitLabelStyle(tokens.textMuted), children: "Your One-Tap limit" }),
+          /* @__PURE__ */ jsxs("div", { style: limitValueStyle(tokens.text), children: [
+            "$",
+            limit
+          ] }),
+          /* @__PURE__ */ jsx(
+            LimitSlider,
+            {
+              value: limit,
+              min: DEFAULT_MIN,
+              max: effectiveMax,
+              step: 5,
+              ticks: DEFAULT_TICKS.filter((t) => t <= effectiveMax),
+              onChange: setLimit
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { style: bannerWrapStyle, children: /* @__PURE__ */ jsx(InfoBanner, { children: "Funds stay in your wallet until you deposit. Swype never holds your money." }) }),
+        /* @__PURE__ */ jsxs("button", { type: "button", style: linkStyle(tokens.accent), children: [
+          /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", style: { marginRight: 6 }, children: [
+            /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "2" }),
+            /* @__PURE__ */ jsx("path", { d: "M12 16v-4M12 8h.01", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+          ] }),
+          "How does this work?"
+        ] })
+      ]
+    }
+  );
+}
+var headingStyle5 = (color) => ({
+  fontSize: "1.3rem",
+  fontWeight: 700,
+  letterSpacing: "-0.02em",
+  color,
+  margin: "8px 0 4px"
+});
+var subtitleStyle5 = (color) => ({
+  fontSize: "0.86rem",
+  color,
+  margin: "0 0 24px",
+  lineHeight: 1.5
+});
+var errorBannerStyle3 = (tokens) => ({
+  background: tokens.errorBg,
+  border: `1px solid ${tokens.error}66`,
+  borderRadius: 16,
+  padding: "11px 14px",
+  color: tokens.error,
+  fontSize: "0.84rem",
+  marginBottom: 14,
+  lineHeight: 1.5
+});
+var balanceRowStyle = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  marginBottom: 24
+};
+var balanceLeftStyle = {
+  display: "flex",
+  alignItems: "center",
+  gap: 10
+};
+var coinIconStyle = (color) => ({
+  color,
+  display: "flex",
+  alignItems: "center"
+});
+var balanceLabelStyle = (color) => ({
+  fontSize: "0.72rem",
+  color,
+  fontWeight: 500
+});
+var balanceValueStyle = (color) => ({
+  fontSize: "1.1rem",
+  fontWeight: 700,
+  color
+});
+var tokenBadgeStyle = (tokens) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: 4,
+  fontSize: "0.78rem",
+  color: tokens.textMuted,
+  border: `1px solid ${tokens.border}`,
+  borderRadius: 999,
+  padding: "4px 10px"
+});
+var tokenDotStyle = (color) => ({
+  width: 8,
+  height: 8,
+  borderRadius: "50%",
+  background: color,
+  display: "inline-block"
+});
+var chevronStyle = { fontSize: "0.68rem", marginLeft: 2 };
+var limitSectionStyle = {
+  textAlign: "center",
+  marginBottom: 24
+};
+var limitLabelStyle = (color) => ({
+  fontSize: "0.8rem",
+  color,
+  marginBottom: 4
+});
+var limitValueStyle = (color) => ({
+  fontSize: "2.2rem",
+  fontWeight: 700,
+  color,
+  marginBottom: 12
+});
+var bannerWrapStyle = { marginBottom: 16 };
+var linkStyle = (color) => ({
+  background: "transparent",
+  border: "none",
+  color,
+  cursor: "pointer",
+  fontFamily: "inherit",
+  fontSize: "0.82rem",
+  fontWeight: 500,
+  display: "flex",
+  alignItems: "center",
+  padding: 0,
+  marginBottom: 16
+});
+function SetupStatusScreen({
+  complete,
+  limit,
+  tokensApproved,
+  currentStepLabel,
+  merchantName,
+  onContinue,
+  error
+}) {
+  const { tokens } = useSwypeConfig();
+  const steps = complete ? [
+    {
+      label: "One-Tap ready",
+      detail: `$${limit} limit \xB7 ${tokensApproved} token${tokensApproved !== 1 ? "s" : ""} approved`,
+      status: "complete"
+    },
+    { label: "Done", status: "complete" }
+  ] : [
+    {
+      label: currentStepLabel ?? "Approving tokens",
+      status: "active"
+    },
+    { label: "Done", status: "pending" }
+  ];
+  return /* @__PURE__ */ jsx(
+    ScreenLayout,
+    {
+      footer: complete ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(PrimaryButton, { onClick: onContinue, children: merchantName ? `Return to ${merchantName}` : "Continue" }),
+        /* @__PURE__ */ jsx("p", { style: swipeHintStyle(tokens.textMuted), children: "Swipe to deposit \u2014 no approvals needed." })
+      ] }) : void 0,
+      children: /* @__PURE__ */ jsxs("div", { style: contentStyle4, children: [
+        complete ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(IconCircle, { variant: "success", size: 64, children: /* @__PURE__ */ jsx("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z", fill: tokens.success }) }) }),
+          /* @__PURE__ */ jsx("h2", { style: headingStyle6(tokens.text), children: "You're all set!" })
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Spinner, { size: 48 }),
+          /* @__PURE__ */ jsx("h2", { style: headingStyle6(tokens.text), children: "Setting up One-Tap..." })
+        ] }),
+        error && /* @__PURE__ */ jsx("div", { style: errorBannerStyle4(tokens), children: error }),
+        /* @__PURE__ */ jsx("div", { style: stepsWrapStyle, children: /* @__PURE__ */ jsx(StepList, { steps }) }),
+        !complete && /* @__PURE__ */ jsx("p", { style: waitHintStyle(tokens.textMuted), children: "Usually takes a few seconds" }),
+        complete && /* @__PURE__ */ jsx("p", { style: readyHintStyle(tokens.textSecondary), children: "You can now deposit instantly from any partner app." })
+      ] })
+    }
+  );
+}
+var contentStyle4 = {
+  flex: 1,
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+  textAlign: "center",
+  padding: "0 24px"
+};
+var headingStyle6 = (color) => ({
+  fontSize: "1.45rem",
+  fontWeight: 700,
+  letterSpacing: "-0.02em",
+  color,
+  margin: "20px 0 16px"
+});
+var errorBannerStyle4 = (tokens) => ({
+  background: tokens.errorBg,
+  border: `1px solid ${tokens.error}66`,
+  borderRadius: 16,
+  padding: "11px 14px",
+  color: tokens.error,
+  fontSize: "0.84rem",
+  marginBottom: 14,
+  lineHeight: 1.5,
+  width: "100%",
+  textAlign: "left"
+});
+var stepsWrapStyle = {
+  width: "100%",
+  maxWidth: 280,
+  textAlign: "left",
+  marginBottom: 16
+};
+var waitHintStyle = (color) => ({
+  fontSize: "0.82rem",
+  color,
+  margin: 0
+});
+var readyHintStyle = (color) => ({
+  fontSize: "0.88rem",
+  color,
+  margin: "8px 0 0",
+  lineHeight: 1.5,
+  maxWidth: 280
+});
+var swipeHintStyle = (color) => ({
+  textAlign: "center",
+  fontSize: "0.8rem",
+  color,
+  margin: "12px 0 0"
+});
+var MIN_DEPOSIT = 1;
+function DepositScreen({
+  merchantName,
+  sourceName,
+  sourceAddress,
+  sourceVerified,
+  availableBalance,
+  remainingLimit,
+  tokenCount,
+  initialAmount,
+  estimatedFeePct,
+  estimatedFeeUsd,
+  processing,
+  error,
+  onDeposit,
+  onChangeSource,
+  onSwitchWallet,
+  onBack
+}) {
+  const { tokens } = useSwypeConfig();
+  const [amount, setAmount] = useState(initialAmount);
+  const sliderMax = Math.min(remainingLimit, availableBalance, 500);
+  const isLowBalance = availableBalance < MIN_DEPOSIT;
+  const canDeposit = amount >= MIN_DEPOSIT && amount <= remainingLimit && !isLowBalance && !processing;
+  const headerTitle = merchantName ? `Deposit to ${merchantName}` : "Deposit";
+  const trackRef = useRef(null);
+  const [swipeX, setSwipeX] = useState(0);
+  const [swiping, setSwiping] = useState(false);
+  const startXRef = useRef(0);
+  const handleTouchStart = useCallback((e) => {
+    if (!canDeposit) return;
+    startXRef.current = e.touches[0].clientX - swipeX;
+    setSwiping(true);
+  }, [canDeposit, swipeX]);
+  const handleTouchMove = useCallback((e) => {
+    if (!swiping || !trackRef.current) return;
+    const trackWidth = trackRef.current.offsetWidth - 52;
+    const x = Math.max(0, Math.min(e.touches[0].clientX - startXRef.current, trackWidth));
+    setSwipeX(x);
+  }, [swiping]);
+  const handleTouchEnd = useCallback(() => {
+    if (!trackRef.current) return;
+    const trackWidth = trackRef.current.offsetWidth - 52;
+    if (swipeX > trackWidth * 0.75) {
+      onDeposit(amount);
+    }
+    setSwipeX(0);
+    setSwiping(false);
+  }, [swipeX, amount, onDeposit]);
+  if (isLowBalance) {
+    return /* @__PURE__ */ jsxs(
+      ScreenLayout,
+      {
+        footer: /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(PrimaryButton, { onClick: onSwitchWallet, children: "Switch wallet" }),
+          /* @__PURE__ */ jsx("p", { style: switchHintStyle(tokens.textMuted), children: "Use a different wallet with more balance" }),
+          /* @__PURE__ */ jsx("div", { style: outlineBtnWrapStyle, children: /* @__PURE__ */ jsx(OutlineButton, { onClick: onBack, children: "Back to deposit options" }) }),
+          /* @__PURE__ */ jsx(PoweredByFooter, {})
+        ] }),
+        children: [
+          /* @__PURE__ */ jsx(ScreenHeader, { title: headerTitle, onBack }),
+          /* @__PURE__ */ jsx(
+            SourceCard,
+            {
+              name: sourceName,
+              address: sourceAddress,
+              verified: sourceVerified,
+              onChangeSource
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { style: amountDisplayStyle, children: /* @__PURE__ */ jsxs("span", { style: amountStyle({ ...tokens, dimmed: true }), children: [
+            "$",
+            amount.toFixed(2)
+          ] }) }),
+          /* @__PURE__ */ jsxs("div", { style: balanceRowStyle2, children: [
+            /* @__PURE__ */ jsxs("div", { style: balanceLeftStyle2, children: [
+              /* @__PURE__ */ jsx("div", { style: coinIconStyle2(tokens.warning), children: /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: [
+                /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10", fill: "currentColor" }),
+                /* @__PURE__ */ jsx("text", { x: "12", y: "16", textAnchor: "middle", fontSize: "12", fill: "#fff", fontWeight: "700", children: "$" })
+              ] }) }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("div", { style: balanceLabelStyle2(tokens.textMuted), children: "Available" }),
+                /* @__PURE__ */ jsxs("div", { style: { ...balanceAmountStyle, color: tokens.warning }, children: [
+                  "$",
+                  availableBalance.toFixed(2)
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z", fill: tokens.warning }) })
+          ] }),
+          /* @__PURE__ */ jsxs(WarningBanner, { title: "Not enough funds", children: [
+            "Your wallet balance is $",
+            availableBalance.toFixed(2),
+            " \u2014 you need at least $",
+            MIN_DEPOSIT.toFixed(2),
+            " to deposit via One-Tap."
+          ] })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    ScreenLayout,
+    {
+      footer: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: trackRef,
+            style: swipeTrackStyle(tokens),
+            onTouchStart: handleTouchStart,
+            onTouchMove: handleTouchMove,
+            onTouchEnd: handleTouchEnd,
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: swipeThumbStyle(tokens, swipeX),
+                  children: /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M8 5l8 7-8 7", stroke: "#fff", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { style: swipeLabelStyle, children: processing ? "Processing..." : `Deposit $${amount.toFixed(2)}` })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { style: desktopFallbackStyle, children: /* @__PURE__ */ jsxs(PrimaryButton, { onClick: () => onDeposit(amount), disabled: !canDeposit, loading: processing, children: [
+          "Deposit $",
+          amount.toFixed(2)
+        ] }) }),
+        /* @__PURE__ */ jsx("p", { style: noApprovalStyle(tokens.textMuted), children: "No approval needed \xB7 within your One-Tap limit" }),
+        /* @__PURE__ */ jsxs("p", { style: routeStyle(tokens.textMuted), children: [
+          "From ",
+          sourceName,
+          " ",
+          merchantName ? `\u2192 ${merchantName}` : ""
+        ] }),
+        /* @__PURE__ */ jsx(PoweredByFooter, {})
+      ] }),
+      children: [
+        /* @__PURE__ */ jsx(ScreenHeader, { title: headerTitle, badge: "Simple", onBack }),
+        /* @__PURE__ */ jsx(
+          SourceCard,
+          {
+            name: sourceName,
+            address: sourceAddress,
+            verified: sourceVerified,
+            onChangeSource
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { style: amountDisplayStyle, children: /* @__PURE__ */ jsxs("span", { style: amountStyle(tokens), children: [
+          "$",
+          amount.toFixed(2)
+        ] }) }),
+        /* @__PURE__ */ jsxs("div", { style: balanceRowStyle2, children: [
+          /* @__PURE__ */ jsxs("div", { style: balanceLeftStyle2, children: [
+            /* @__PURE__ */ jsx("div", { style: coinIconStyle2(tokens.accent), children: /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: [
+              /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10", fill: "currentColor" }),
+              /* @__PURE__ */ jsx("text", { x: "12", y: "16", textAnchor: "middle", fontSize: "12", fill: "#fff", fontWeight: "700", children: "$" })
+            ] }) }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsxs("div", { style: balanceLabelStyle2(tokens.textMuted), children: [
+                "Paying from ",
+                sourceName
+              ] }),
+              /* @__PURE__ */ jsxs("div", { style: balanceAmountStyle, children: [
+                "$",
+                availableBalance.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })
+              ] })
+            ] })
+          ] }),
+          tokenCount > 0 && /* @__PURE__ */ jsxs("div", { style: tokenBadgeStyle2(tokens), children: [
+            /* @__PURE__ */ jsx("span", { style: tokenDotStyle2(tokens.accent) }),
+            tokenCount,
+            " ",
+            /* @__PURE__ */ jsx("span", { style: chevronStyle2, children: ">" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          LimitSlider,
+          {
+            value: amount,
+            min: MIN_DEPOSIT,
+            max: sliderMax > MIN_DEPOSIT ? sliderMax : 20,
+            step: 0.5,
+            ticks: [MIN_DEPOSIT, 5, 10, 20].filter((t) => t <= sliderMax || t <= 20),
+            onChange: setAmount
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { style: detailsStyle, children: [
+          /* @__PURE__ */ jsxs("div", { style: detailRowStyle(tokens.textMuted), children: [
+            "Remaining limit: ",
+            /* @__PURE__ */ jsxs("strong", { style: { color: tokens.text }, children: [
+              "$",
+              remainingLimit.toFixed(2)
+            ] })
+          ] }),
+          estimatedFeeUsd != null && estimatedFeePct != null && /* @__PURE__ */ jsxs("div", { style: detailRowStyle(tokens.textMuted), children: [
+            "Fee: ~$",
+            estimatedFeeUsd.toFixed(2),
+            " (",
+            estimatedFeePct.toFixed(1),
+            "%)"
+          ] })
+        ] }),
+        error && /* @__PURE__ */ jsx("div", { style: errorBannerStyle5(tokens), children: error })
+      ]
+    }
+  );
+}
+var amountDisplayStyle = {
+  textAlign: "center",
+  padding: "20px 0 8px"
+};
+var amountStyle = (opts) => ({
+  fontSize: "2.5rem",
+  fontWeight: 700,
+  color: opts.dimmed ? "#ccc" : opts.text ?? "#12222b",
+  letterSpacing: "-0.02em"
+});
+var balanceRowStyle2 = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  marginBottom: 16
+};
+var balanceLeftStyle2 = {
+  display: "flex",
+  alignItems: "center",
+  gap: 10
+};
+var coinIconStyle2 = (color) => ({
+  color,
+  display: "flex",
+  alignItems: "center"
+});
+var balanceLabelStyle2 = (color) => ({
+  fontSize: "0.72rem",
+  color,
+  fontWeight: 500
+});
+var balanceAmountStyle = {
+  fontSize: "1rem",
+  fontWeight: 700
+};
+var tokenBadgeStyle2 = (tokens) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: 4,
+  fontSize: "0.78rem",
+  color: tokens.textMuted,
+  border: `1px solid ${tokens.border}`,
+  borderRadius: 999,
+  padding: "4px 10px"
+});
+var tokenDotStyle2 = (color) => ({
+  width: 8,
+  height: 8,
+  borderRadius: "50%",
+  background: color,
+  display: "inline-block"
+});
+var chevronStyle2 = { fontSize: "0.68rem", marginLeft: 2 };
+var detailsStyle = {
+  textAlign: "center",
+  marginTop: 12,
+  marginBottom: 8
+};
+var detailRowStyle = (color) => ({
+  fontSize: "0.8rem",
+  color,
+  marginBottom: 4
+});
+var errorBannerStyle5 = (tokens) => ({
+  background: tokens.errorBg,
+  border: `1px solid ${tokens.error}66`,
+  borderRadius: 16,
+  padding: "11px 14px",
+  color: tokens.error,
+  fontSize: "0.84rem",
+  marginTop: 8,
+  lineHeight: 1.5
+});
+var swipeTrackStyle = (tokens) => ({
+  position: "relative",
+  height: 56,
+  borderRadius: 999,
+  background: `linear-gradient(180deg, ${tokens.accent}, ${tokens.accent}dd)`,
+  overflow: "hidden",
+  display: "flex",
+  alignItems: "center",
+  touchAction: "none",
+  userSelect: "none"
+});
+var swipeThumbStyle = (tokens, x) => ({
+  position: "absolute",
+  left: 4 + x,
+  top: 4,
+  width: 48,
+  height: 48,
+  borderRadius: "50%",
+  background: `${tokens.accent}`,
+  border: "2px solid rgba(255,255,255,0.4)",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  zIndex: 2,
+  transition: x === 0 ? "left 0.25s ease" : "none",
+  cursor: "grab"
+});
+var swipeLabelStyle = {
+  flex: 1,
+  textAlign: "center",
+  color: "#fff",
+  fontWeight: 700,
+  fontSize: "0.95rem",
+  zIndex: 1,
+  pointerEvents: "none"
+};
+var desktopFallbackStyle = {
+  marginTop: 8
+};
+var noApprovalStyle = (color) => ({
+  textAlign: "center",
+  fontSize: "0.78rem",
+  color,
+  margin: "12px 0 2px"
+});
+var routeStyle = (color) => ({
+  textAlign: "center",
+  fontSize: "0.75rem",
+  color,
+  margin: "0 0 4px"
+});
+var switchHintStyle = (color) => ({
+  textAlign: "center",
+  fontSize: "0.8rem",
+  color,
+  margin: "10px 0"
+});
+var outlineBtnWrapStyle = {
+  marginBottom: 8
+};
+function SuccessScreen({
+  amount,
+  currency,
+  merchantName,
+  sourceName,
+  remainingLimit,
+  onDone,
+  onIncreaseLimits,
+  onManageAccount
+}) {
+  const { tokens } = useSwypeConfig();
+  return /* @__PURE__ */ jsxs(
+    ScreenLayout,
+    {
+      footer: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(PrimaryButton, { onClick: onDone, children: "Done" }),
+        onManageAccount && /* @__PURE__ */ jsx("button", { type: "button", onClick: onManageAccount, style: manageStyle(tokens.textMuted), children: "Manage Swype account \u2192" }),
+        /* @__PURE__ */ jsx(PoweredByFooter, {})
+      ] }),
+      children: [
+        /* @__PURE__ */ jsx(
+          ScreenHeader,
+          {
+            right: /* @__PURE__ */ jsx("button", { type: "button", onClick: onDone, style: closeButtonStyle(tokens.textMuted), "aria-label": "Close", children: /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M18 6L6 18M6 6l12 12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }) })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { style: contentStyle5, children: [
+          /* @__PURE__ */ jsx(IconCircle, { variant: "success", size: 64, children: /* @__PURE__ */ jsx("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z", fill: tokens.success }) }) }),
+          /* @__PURE__ */ jsxs("h2", { style: headingStyle7(tokens.text), children: [
+            "$",
+            amount.toFixed(2),
+            " deposited"
+          ] }),
+          merchantName && /* @__PURE__ */ jsxs("p", { style: subtitleStyle6(tokens.textSecondary), children: [
+            "to ",
+            merchantName
+          ] }),
+          /* @__PURE__ */ jsxs("div", { style: summaryCardStyle(tokens), children: [
+            sourceName && /* @__PURE__ */ jsxs("div", { style: summaryRowStyle, children: [
+              /* @__PURE__ */ jsx("span", { style: summaryLabelStyle(tokens.textMuted), children: "From" }),
+              /* @__PURE__ */ jsx("span", { style: summaryValueStyle(tokens.text), children: sourceName })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { style: summaryRowStyle, children: [
+              /* @__PURE__ */ jsx("span", { style: summaryLabelStyle(tokens.textMuted), children: "Time" }),
+              /* @__PURE__ */ jsx("span", { style: summaryValueStyle(tokens.text), children: "just now" })
+            ] }),
+            remainingLimit != null && /* @__PURE__ */ jsxs("div", { style: summaryRowStyle, children: [
+              /* @__PURE__ */ jsx("span", { style: summaryLabelStyle(tokens.textMuted), children: "Remaining limit" }),
+              /* @__PURE__ */ jsxs("span", { style: { ...summaryValueStyle(tokens.text), color: tokens.accent }, children: [
+                "$",
+                remainingLimit.toFixed(2)
+              ] })
+            ] })
+          ] }),
+          onIncreaseLimits && /* @__PURE__ */ jsxs("div", { style: upsellCardStyle(tokens), children: [
+            /* @__PURE__ */ jsxs("div", { style: upsellHeaderStyle, children: [
+              /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { marginRight: 6 }, children: /* @__PURE__ */ jsx("path", { d: "M7 14l5-5 5 5", stroke: tokens.accent, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+              /* @__PURE__ */ jsx("strong", { children: "Want higher limits?" })
+            ] }),
+            /* @__PURE__ */ jsx("p", { style: upsellBodyStyle(tokens.textSecondary), children: "Increase your One-Tap limit to deposit more without re-approving." }),
+            /* @__PURE__ */ jsx("button", { type: "button", onClick: onIncreaseLimits, style: upsellLinkStyle(tokens.accent), children: "Increase One-Tap limit" })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+var contentStyle5 = {
+  flex: 1,
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  paddingTop: 16
+};
+var headingStyle7 = (color) => ({
+  fontSize: "1.5rem",
+  fontWeight: 700,
+  letterSpacing: "-0.02em",
+  color,
+  margin: "20px 0 4px"
+});
+var subtitleStyle6 = (color) => ({
+  fontSize: "0.9rem",
+  color,
+  margin: "0 0 20px"
+});
+var summaryCardStyle = (tokens) => ({
+  width: "100%",
+  padding: "14px 16px",
+  background: tokens.bgInput,
+  border: `1px solid ${tokens.border}`,
+  borderRadius: 20,
+  marginBottom: 16
+});
+var summaryRowStyle = {
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "center",
+  padding: "6px 0"
+};
+var summaryLabelStyle = (color) => ({
+  fontSize: "0.84rem",
+  color
+});
+var summaryValueStyle = (color) => ({
+  fontSize: "0.88rem",
+  fontWeight: 600,
+  color
+});
+var upsellCardStyle = (tokens) => ({
+  width: "100%",
+  padding: "16px",
+  background: tokens.bgInput,
+  border: `1px solid ${tokens.border}`,
+  borderRadius: 20,
+  marginBottom: 16
+});
+var upsellHeaderStyle = {
+  display: "flex",
+  alignItems: "center",
+  fontSize: "0.88rem",
+  marginBottom: 4
+};
+var upsellBodyStyle = (color) => ({
+  fontSize: "0.8rem",
+  color,
+  margin: "4px 0 10px",
+  lineHeight: 1.5
+});
+var upsellLinkStyle = (color) => ({
+  background: "transparent",
+  border: "none",
+  color,
+  fontWeight: 600,
+  fontSize: "0.84rem",
+  cursor: "pointer",
+  fontFamily: "inherit",
+  padding: 0
+});
+var closeButtonStyle = (color) => ({
+  background: "transparent",
+  border: "none",
+  cursor: "pointer",
+  color,
+  padding: 4,
+  display: "flex",
+  alignItems: "center"
+});
+var manageStyle = (color) => ({
+  background: "transparent",
+  border: "none",
+  color,
+  cursor: "pointer",
+  fontFamily: "inherit",
+  fontSize: "0.84rem",
+  fontWeight: 500,
+  display: "block",
+  width: "100%",
+  textAlign: "center",
+  padding: "12px 0 0"
+});
+var ACTIVE_CREDENTIAL_STORAGE_KEY = "swype_active_credential_id";
+var MIN_SEND_AMOUNT_USD = 0.25;
+function computeSmartDefaults(accts, transferAmount) {
+  if (accts.length === 0) return null;
+  for (const acct of accts) {
+    for (const wallet of acct.wallets) {
+      if (wallet.status === "ACTIVE") {
+        const bestSource = wallet.sources.find(
+          (s) => s.balance.available.amount >= transferAmount
+        );
+        if (bestSource) {
+          return { accountId: acct.id, walletId: wallet.id };
+        }
+      }
+    }
+  }
+  let bestAccount = null;
+  let bestWallet = null;
+  let bestBalance = -1;
+  let bestIsActive = false;
+  for (const acct of accts) {
+    for (const wallet of acct.wallets) {
+      const walletBal = wallet.balance.available.amount;
+      const isActive = wallet.status === "ACTIVE";
+      if (walletBal > bestBalance || walletBal === bestBalance && isActive && !bestIsActive) {
+        bestBalance = walletBal;
+        bestAccount = acct;
+        bestWallet = wallet;
+        bestIsActive = isActive;
+      }
+    }
+  }
+  if (bestAccount) {
+    return {
+      accountId: bestAccount.id,
+      walletId: bestWallet?.id ?? null
+    };
+  }
+  return { accountId: accts[0].id, walletId: null };
+}
+function parseRawBalance(rawBalance, decimals) {
+  const parsed = Number(rawBalance);
+  if (!Number.isFinite(parsed)) return 0;
+  return parsed / 10 ** decimals;
+}
+function buildSelectSourceChoices(options) {
+  const chainChoices = [];
+  const chainIndexByName = /* @__PURE__ */ new Map();
+  for (const option of options) {
+    const { chainName, tokenSymbol } = option;
+    const balance = parseRawBalance(option.rawBalance, option.decimals);
+    let chainChoice;
+    const existingIdx = chainIndexByName.get(chainName);
+    if (existingIdx === void 0) {
+      chainChoice = { chainName, balance: 0, tokens: [] };
+      chainIndexByName.set(chainName, chainChoices.length);
+      chainChoices.push(chainChoice);
+    } else {
+      chainChoice = chainChoices[existingIdx];
+    }
+    chainChoice.balance += balance;
+    const existing = chainChoice.tokens.find((t) => t.tokenSymbol === tokenSymbol);
+    if (existing) {
+      existing.balance += balance;
+    } else {
+      chainChoice.tokens.push({ tokenSymbol, balance });
+    }
+  }
+  return chainChoices;
+}
+function SwypePayment({
+  destination,
+  onComplete,
+  onError,
+  useWalletConnector,
+  idempotencyKey,
+  merchantAuthorization,
+  merchantName,
+  onBack
+}) {
+  const { apiBaseUrl, tokens, depositAmount } = useSwypeConfig();
+  const { ready, authenticated, user, logout, getAccessToken } = usePrivy();
+  const {
+    sendCode: sendEmailCode,
+    loginWithCode: loginWithEmailCode,
+    state: emailLoginState
+  } = useLoginWithEmail();
+  const {
+    sendCode: sendSmsCode,
+    loginWithCode: loginWithSmsCode,
+    state: smsLoginState
+  } = useLoginWithSms();
+  const [step, setStep] = useState("login");
   const [error, setError] = useState(null);
   const [providers, setProviders] = useState([]);
   const [accounts, setAccounts] = useState([]);
@@ -2266,10 +3389,6 @@ function SwypePayment({
   const [amount, setAmount] = useState(
     depositAmount != null ? depositAmount.toString() : ""
   );
-  const [advancedSettings, setAdvancedSettings] = useState({
-    asset: null,
-    chain: null
-  });
   const [transfer, setTransfer] = useState(null);
   const [creatingTransfer, setCreatingTransfer] = useState(false);
   const [registeringPasskey, setRegisteringPasskey] = useState(false);
@@ -2278,10 +3397,11 @@ function SwypePayment({
     return window.localStorage.getItem(ACTIVE_CREDENTIAL_STORAGE_KEY);
   });
   const [authInput, setAuthInput] = useState("");
-  const [verificationTarget, setVerificationTarget] = useState(
-    null
-  );
+  const [verificationTarget, setVerificationTarget] = useState(null);
   const [otpCode, setOtpCode] = useState("");
+  const [oneTapLimit, setOneTapLimit] = useState(100);
+  const [setupComplete, setSetupComplete] = useState(false);
+  const [setupStepLabel, setSetupStepLabel] = useState(void 0);
   const [mobileFlow, setMobileFlow] = useState(false);
   const pollingTransferIdRef = useRef(null);
   const mobileSigningTransferIdRef = useRef(null);
@@ -2307,9 +3427,7 @@ function SwypePayment({
   const activeOtpStatus = verificationTarget?.kind === "email" ? emailLoginState.status : verificationTarget?.kind === "phone" ? smsLoginState.status : "initial";
   const activeOtpErrorMessage = verificationTarget?.kind === "email" && emailLoginState.status === "error" ? emailLoginState.error?.message ?? "Failed to continue with email." : verificationTarget?.kind === "phone" && smsLoginState.status === "error" ? smsLoginState.error?.message ?? "Failed to continue with phone number." : null;
   useEffect(() => {
-    if (activeOtpErrorMessage) {
-      setError(activeOtpErrorMessage);
-    }
+    if (activeOtpErrorMessage) setError(activeOtpErrorMessage);
   }, [activeOtpErrorMessage]);
   const handleSendLoginCode = useCallback(async () => {
     const normalizedIdentifier = normalizeAuthIdentifier(authInput);
@@ -2326,9 +3444,9 @@ function SwypePayment({
         await sendSmsCode({ phoneNumber: normalizedIdentifier.value });
       }
       setVerificationTarget(normalizedIdentifier);
+      setStep("otp-verify");
     } catch (err) {
-      const msg = err instanceof Error ? err.message : "Failed to send verification code";
-      setError(msg);
+      setError(err instanceof Error ? err.message : "Failed to send verification code");
     }
   }, [authInput, sendEmailCode, sendSmsCode]);
   const handleVerifyLoginCode = useCallback(async () => {
@@ -2346,8 +3464,7 @@ function SwypePayment({
         await loginWithSmsCode({ code: trimmedCode });
       }
     } catch (err) {
-      const msg = err instanceof Error ? err.message : "Failed to verify code";
-      setError(msg);
+      setError(err instanceof Error ? err.message : "Failed to verify code");
     }
   }, [verificationTarget, otpCode, loginWithEmailCode, loginWithSmsCode]);
   const handleResendLoginCode = useCallback(async () => {
@@ -2360,17 +3477,12 @@ function SwypePayment({
         await sendSmsCode({ phoneNumber: verificationTarget.value });
       }
     } catch (err) {
-      const msg = err instanceof Error ? err.message : "Failed to resend code";
-      setError(msg);
+      setError(err instanceof Error ? err.message : "Failed to resend code");
     }
   }, [verificationTarget, sendEmailCode, sendSmsCode]);
-  const handleEditIdentifier = useCallback(() => {
-    setError(null);
-    setVerificationTarget(null);
-    setOtpCode("");
-  }, []);
   useEffect(() => {
-    if (!ready || !authenticated || step !== "login") return;
+    if (!ready || !authenticated) return;
+    if (step !== "login" && step !== "otp-verify") return;
     let cancelled = false;
     setError(null);
     resetHeadlessLogin();
@@ -2382,15 +3494,11 @@ function SwypePayment({
         if (cancelled) return;
         const allPasskeys = config.passkeys ?? (config.passkey ? [config.passkey] : []);
         if (allPasskeys.length === 0) {
-          setStep("register-passkey");
+          setStep("create-passkey");
           return;
         }
         if (activeCredentialId && allPasskeys.some((p) => p.credentialId === activeCredentialId)) {
-          if (depositAmount != null && depositAmount > 0) {
-            setStep("ready");
-          } else {
-            setStep("enter-amount");
-          }
+          setStep("deposit");
           return;
         }
         if (cancelled) return;
@@ -2400,42 +3508,23 @@ function SwypePayment({
         if (matched) {
           setActiveCredentialId(matched);
           window.localStorage.setItem(ACTIVE_CREDENTIAL_STORAGE_KEY, matched);
-          if (depositAmount != null && depositAmount > 0) {
-            setStep("ready");
-          } else {
-            setStep("enter-amount");
-          }
+          setStep("deposit");
           return;
         }
-        setStep("register-passkey");
+        setStep("create-passkey");
       } catch {
-        if (!cancelled) {
-          if (depositAmount != null && depositAmount > 0) {
-            setStep("ready");
-          } else {
-            setStep("enter-amount");
-          }
-        }
+        if (!cancelled) setStep("deposit");
       }
     };
     checkPasskey();
     return () => {
       cancelled = true;
     };
-  }, [
-    ready,
-    authenticated,
-    step,
-    depositAmount,
-    apiBaseUrl,
-    getAccessToken,
-    activeCredentialId,
-    resetHeadlessLogin
-  ]);
+  }, [ready, authenticated, step, apiBaseUrl, getAccessToken, activeCredentialId, resetHeadlessLogin]);
   const loadingDataRef = useRef(false);
   useEffect(() => {
     if (!authenticated) return;
-    if (step === "login") return;
+    if (step === "login" || step === "otp-verify") return;
     if (accounts.length > 0 || loadingDataRef.current) return;
     if (!activeCredentialId) return;
     let cancelled = false;
@@ -2463,10 +3552,12 @@ function SwypePayment({
         } else if (prov.length > 0) {
           setSelectedProviderId(prov[0].id);
         }
+        if (accts.length === 0 && step === "deposit") {
+          setStep("wallet-picker");
+        }
       } catch (err) {
         if (!cancelled) {
-          const msg = err instanceof Error ? err.message : "Failed to load data";
-          setError(msg);
+          setError(err instanceof Error ? err.message : "Failed to load data");
         }
       } finally {
         if (!cancelled) {
@@ -2480,15 +3571,15 @@ function SwypePayment({
       cancelled = true;
       loadingDataRef.current = false;
     };
-  }, [authenticated, step, accounts.length, apiBaseUrl, getAccessToken, activeCredentialId]);
+  }, [authenticated, step, accounts.length, apiBaseUrl, getAccessToken, activeCredentialId, depositAmount]);
   useEffect(() => {
     if (!polling.transfer) return;
     if (polling.transfer.status === "COMPLETED") {
-      setStep("complete");
+      setStep("success");
       setTransfer(polling.transfer);
       onComplete?.(polling.transfer);
     } else if (polling.transfer.status === "FAILED") {
-      setStep("complete");
+      setStep("success");
       setTransfer(polling.transfer);
       setError("Transfer failed.");
     }
@@ -2504,13 +3595,11 @@ function SwypePayment({
     const elapsedMs = Date.now() - processingStartedAtRef.current;
     const remainingMs = PROCESSING_TIMEOUT_MS - elapsedMs;
     const handleTimeout = () => {
-      if (!hasProcessingTimedOut(processingStartedAtRef.current, Date.now())) {
-        return;
-      }
+      if (!hasProcessingTimedOut(processingStartedAtRef.current, Date.now())) return;
       const status = getTransferStatus(polling.transfer, transfer);
       const msg = buildProcessingTimeoutMessage(status);
       polling.stopPolling();
-      setStep("ready");
+      setStep("deposit");
       setError(msg);
       onError?.(msg);
     };
@@ -2519,15 +3608,12 @@ function SwypePayment({
       return;
     }
     const timeoutId = window.setTimeout(handleTimeout, remainingMs);
-    return () => {
-      window.clearTimeout(timeoutId);
-    };
+    return () => window.clearTimeout(timeoutId);
   }, [step, polling.transfer, transfer, polling.stopPolling, onError]);
   useEffect(() => {
     if (!mobileFlow) return;
     const polledTransfer = polling.transfer;
-    if (!polledTransfer) return;
-    if (polledTransfer.status !== "AUTHORIZED") return;
+    if (!polledTransfer || polledTransfer.status !== "AUTHORIZED") return;
     if (transferSigning.signing) return;
     if (mobileSigningTransferIdRef.current === polledTransfer.id) return;
     mobileSigningTransferIdRef.current = polledTransfer.id;
@@ -2548,18 +3634,14 @@ function SwypePayment({
     if (!mobileFlow) return;
     const transferIdToResume = pollingTransferIdRef.current ?? transfer?.id;
     if (!transferIdToResume) return;
-    if (!polling.isPolling) {
-      polling.startPolling(transferIdToResume);
-    }
+    if (!polling.isPolling) polling.startPolling(transferIdToResume);
     const handleVisibility = () => {
       if (document.visibilityState === "visible") {
         polling.startPolling(transferIdToResume);
       }
     };
     document.addEventListener("visibilitychange", handleVisibility);
-    return () => {
-      document.removeEventListener("visibilitychange", handleVisibility);
-    };
+    return () => document.removeEventListener("visibilitychange", handleVisibility);
   }, [mobileFlow, transfer?.id, polling.isPolling, polling.startPolling]);
   const pendingSelectSourceAction = authExecutor.pendingSelectSource;
   const selectSourceChoices = useMemo(() => {
@@ -2578,15 +3660,11 @@ function SwypePayment({
       setSelectSourceTokenSymbol("");
       return;
     }
-    if (initializedSelectSourceActionRef.current === pendingSelectSourceAction.id) {
-      return;
-    }
-    const hasRecommendedOption = !!selectSourceRecommended && selectSourceChoices.some(
-      (chain) => chain.chainName === selectSourceRecommended.chainName && chain.tokens.some(
-        (token) => token.tokenSymbol === selectSourceRecommended.tokenSymbol
-      )
+    if (initializedSelectSourceActionRef.current === pendingSelectSourceAction.id) return;
+    const hasRecommended = !!selectSourceRecommended && selectSourceChoices.some(
+      (chain) => chain.chainName === selectSourceRecommended.chainName && chain.tokens.some((t) => t.tokenSymbol === selectSourceRecommended.tokenSymbol)
     );
-    if (hasRecommendedOption && selectSourceRecommended) {
+    if (hasRecommended && selectSourceRecommended) {
       setSelectSourceChainName(selectSourceRecommended.chainName);
       setSelectSourceTokenSymbol(selectSourceRecommended.tokenSymbol);
     } else if (selectSourceChoices.length > 0 && selectSourceChoices[0].tokens.length > 0) {
@@ -2598,8 +3676,35 @@ function SwypePayment({
     }
     initializedSelectSourceActionRef.current = pendingSelectSourceAction.id;
   }, [pendingSelectSourceAction, selectSourceChoices, selectSourceRecommended]);
-  const handlePay = useCallback(async () => {
-    const parsedAmount = parseFloat(amount);
+  const selectedAccount = accounts.find((a) => a.id === selectedAccountId);
+  const selectedWallet = selectedAccount?.wallets.find((w) => w.id === selectedWalletId);
+  const sourceName = selectedAccount?.name ?? selectedWallet?.chain.name ?? "Wallet";
+  const sourceAddress = selectedWallet ? `${selectedWallet.name.slice(0, 6)}...${selectedWallet.name.slice(-4)}` : void 0;
+  const sourceVerified = selectedWallet?.status === "ACTIVE";
+  const maxSourceBalance = useMemo(() => {
+    let max = 0;
+    for (const acct of accounts) {
+      for (const wallet of acct.wallets) {
+        for (const source of wallet.sources) {
+          if (source.balance.available.amount > max) {
+            max = source.balance.available.amount;
+          }
+        }
+      }
+    }
+    return max;
+  }, [accounts]);
+  const tokenCount = useMemo(() => {
+    let count = 0;
+    for (const acct of accounts) {
+      for (const wallet of acct.wallets) {
+        count += wallet.sources.length;
+      }
+    }
+    return count;
+  }, [accounts]);
+  const handlePay = useCallback(async (depositAmount2) => {
+    const parsedAmount = depositAmount2;
     if (isNaN(parsedAmount) || parsedAmount < MIN_SEND_AMOUNT_USD) {
       setError(`Minimum amount is $${MIN_SEND_AMOUNT_USD.toFixed(2)}.`);
       return;
@@ -2610,7 +3715,7 @@ function SwypePayment({
     }
     if (!activeCredentialId) {
       setError("Create a passkey on this device before continuing.");
-      setStep("register-passkey");
+      setStep("create-passkey");
       return;
     }
     setStep("processing");
@@ -2680,12 +3785,11 @@ function SwypePayment({
       const msg = err instanceof Error ? err.message : "Transfer failed";
       setError(msg);
       onError?.(msg);
-      setStep("ready");
+      setStep("deposit");
     } finally {
       setCreatingTransfer(false);
     }
   }, [
-    amount,
     sourceId,
     sourceType,
     activeCredentialId,
@@ -2697,1164 +3801,312 @@ function SwypePayment({
     transferSigning,
     polling,
     onError,
-    useWalletConnector
+    useWalletConnector,
+    idempotencyKey,
+    merchantAuthorization
   ]);
-  const handleNewPayment = () => {
-    setStep("ready");
-    setTransfer(null);
+  const handleRegisterPasskey = useCallback(async () => {
+    setRegisteringPasskey(true);
     setError(null);
-    setAmount(depositAmount != null ? depositAmount.toString() : "");
-    setMobileFlow(false);
-    processingStartedAtRef.current = null;
-    pollingTransferIdRef.current = null;
-    mobileSigningTransferIdRef.current = null;
-    setConnectingNewAccount(false);
-    setSelectedWalletId(null);
-    setAdvancedSettings({ asset: null, chain: null });
-    if (accounts.length > 0) setSelectedAccountId(accounts[0].id);
-  };
-  const handleLogout = useCallback(async () => {
     try {
-      await logout();
-    } catch {
+      const token = await getAccessToken();
+      if (!token) throw new Error("Not authenticated");
+      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);
+      if (accounts.length === 0) {
+        setStep("wallet-picker");
+      } else {
+        setStep("deposit");
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to register passkey");
+    } finally {
+      setRegisteringPasskey(false);
     }
-    if (typeof window !== "undefined") {
-      window.localStorage.removeItem(ACTIVE_CREDENTIAL_STORAGE_KEY);
+  }, [getAccessToken, user, apiBaseUrl, accounts.length]);
+  const handleSkipPasskey = useCallback(() => {
+    if (accounts.length === 0) {
+      setStep("wallet-picker");
+    } else {
+      setStep("deposit");
     }
-    polling.stopPolling();
-    setActiveCredentialId(null);
-    setStep("login");
+  }, [accounts.length]);
+  const handleSetupOneTap = useCallback(async (limit) => {
+    setOneTapLimit(limit);
+    setStep("setup-status");
+    setSetupComplete(false);
+    setSetupStepLabel("Approving tokens");
     setError(null);
-    setTransfer(null);
-    setCreatingTransfer(false);
-    setRegisteringPasskey(false);
-    setProviders([]);
-    setAccounts([]);
-    setChains([]);
+    try {
+      const token = await getAccessToken();
+      if (!token) throw new Error("Not authenticated");
+      if (!sourceId) {
+        throw new Error("No wallet selected for setup.");
+      }
+      const t = await createTransfer(apiBaseUrl, token, {
+        credentialId: activeCredentialId ?? "",
+        merchantAuthorization,
+        sourceType,
+        sourceId,
+        destination,
+        amount: 0
+      });
+      if (t.authorizationSessions && t.authorizationSessions.length > 0) {
+        const shouldUseConnector = shouldUseWalletConnector({
+          useWalletConnector,
+          userAgent: typeof navigator === "undefined" ? void 0 : navigator.userAgent
+        });
+        if (!shouldUseConnector) {
+          setMobileFlow(true);
+          window.location.href = t.authorizationSessions[0].uri;
+        } else {
+          await authExecutor.executeSession(t);
+        }
+      }
+      setSetupStepLabel(void 0);
+      setSetupComplete(true);
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : "Setup failed";
+      setError(msg);
+      onError?.(msg);
+    }
+  }, [
+    getAccessToken,
+    sourceId,
+    sourceType,
+    activeCredentialId,
+    destination,
+    apiBaseUrl,
+    merchantAuthorization,
+    useWalletConnector,
+    authExecutor,
+    onError
+  ]);
+  const handleSelectProvider = useCallback((providerId) => {
+    setSelectedProviderId(providerId);
     setSelectedAccountId(null);
-    setSelectedWalletId(null);
-    setSelectedProviderId(null);
-    setConnectingNewAccount(false);
+    setConnectingNewAccount(true);
+    setStep("setup");
+  }, []);
+  const handleNewPayment = useCallback(() => {
+    setStep("deposit");
+    setTransfer(null);
+    setError(null);
     setAmount(depositAmount != null ? depositAmount.toString() : "");
-    setAdvancedSettings({ asset: null, chain: null });
     setMobileFlow(false);
-    setSelectSourceChainName("");
-    setSelectSourceTokenSymbol("");
-    initializedSelectSourceActionRef.current = null;
     processingStartedAtRef.current = null;
     pollingTransferIdRef.current = null;
     mobileSigningTransferIdRef.current = null;
-    resetHeadlessLogin();
-  }, [logout, polling, depositAmount, resetHeadlessLogin]);
-  const handleConnectNewAccount = (providerId) => {
-    setSelectedProviderId(providerId);
-    setSelectedAccountId(null);
-    setConnectingNewAccount(true);
-  };
-  const cardStyle = {
-    background: tokens.bgCard,
-    borderRadius: tokens.radiusLg,
-    border: `1px solid ${tokens.border}`,
-    padding: "30px 24px 24px",
-    maxWidth: 420,
-    width: "100%",
-    boxShadow: tokens.shadowLg,
-    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-    color: tokens.text
-  };
-  const headingStyle = {
-    fontSize: "2rem",
-    fontWeight: 700,
-    margin: "0 0 18px 0",
-    letterSpacing: "-0.02em",
-    color: tokens.text,
-    textAlign: "center"
-  };
-  const btnPrimary = {
-    width: "100%",
-    padding: "15px 18px",
-    background: `linear-gradient(180deg, ${tokens.accent}, ${tokens.accentHover})`,
-    color: tokens.accentText,
-    border: "none",
-    borderRadius: "999px",
-    fontSize: "1.03rem",
-    fontWeight: 700,
-    cursor: "pointer",
-    transition: "filter 0.15s ease, transform 0.15s ease",
-    fontFamily: "inherit",
-    boxShadow: "0 8px 18px rgba(40, 182, 122, 0.28)"
-  };
-  const btnDisabled = {
-    ...btnPrimary,
-    opacity: 0.5,
-    cursor: "not-allowed"
-  };
-  ({
-    ...btnPrimary,
-    background: tokens.bgCard,
-    color: tokens.textSecondary,
-    border: `1px solid ${tokens.border}`});
-  const textFieldStyle = {
-    width: "100%",
-    padding: "15px 16px",
-    borderRadius: "16px",
-    border: `1px solid ${tokens.border}`,
-    background: tokens.bgInput,
-    color: tokens.text,
-    fontSize: "0.98rem",
-    fontFamily: "inherit",
-    outline: "none",
-    boxSizing: "border-box"
-  };
-  const authCaptionStyle = {
-    fontSize: "0.84rem",
-    color: tokens.textSecondary,
-    margin: 0,
-    lineHeight: 1.5
-  };
-  const authTertiaryButtonStyle = {
-    background: "transparent",
-    border: "none",
-    color: tokens.textMuted,
-    cursor: "pointer",
-    fontFamily: "inherit",
-    fontSize: "0.84rem",
-    padding: 0
-  };
-  const errorStyle = {
-    background: tokens.errorBg,
-    border: `1px solid ${tokens.error}66`,
-    borderRadius: tokens.radiusLg,
-    padding: "11px 14px",
-    color: tokens.error,
-    fontSize: "0.86rem",
-    marginBottom: "14px",
-    lineHeight: 1.5
-  };
-  const stepBadge = (label) => /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        gap: "10px",
-        marginBottom: "20px"
-      },
-      children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              width: 28,
-              height: 7,
-              borderRadius: 999,
-              background: tokens.accent,
-              opacity: 0.95
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              width: 8,
-              height: 8,
-              borderRadius: 999,
-              background: tokens.border
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            style: {
-              fontSize: "0.75rem",
-              textTransform: "uppercase",
-              letterSpacing: "0.06em",
-              color: tokens.textMuted,
-              fontWeight: 600
-            },
-            children: label
-          }
-        )
-      ]
-    }
-  );
-  const placeholderProviders = ["A", "B", "C", "D", "E"];
-  const displayedSelectSourceChoices = selectSourceChoices.length > 0 ? selectSourceChoices : [
-    {
-      chainName: "Base",
-      balance: 0,
-      tokens: [{ tokenSymbol: "USDC", balance: 0 }]
-    }
-  ];
-  const selectedChainChoice = displayedSelectSourceChoices.find(
-    (choice) => choice.chainName === selectSourceChainName
-  ) ?? displayedSelectSourceChoices[0];
-  const selectSourceTokenChoices = selectedChainChoice?.tokens ?? [];
-  const resolvedSelectSourceChainName = selectedChainChoice?.chainName ?? selectSourceChainName;
-  const resolvedSelectSourceTokenSymbol = selectSourceTokenChoices.find(
-    (token) => token.tokenSymbol === selectSourceTokenSymbol
-  )?.tokenSymbol ?? selectSourceTokenChoices[0]?.tokenSymbol ?? "";
-  const canConfirmSelectSource = !!resolvedSelectSourceChainName && !!resolvedSelectSourceTokenSymbol;
-  const handleSelectSourceChainChange = (chainName) => {
-    setSelectSourceChainName(chainName);
-    const nextChain = displayedSelectSourceChoices.find(
-      (choice) => choice.chainName === chainName
-    );
-    if (!nextChain || nextChain.tokens.length === 0) {
-      setSelectSourceTokenSymbol("");
-      return;
-    }
-    const recommendedTokenForChain = selectSourceRecommended?.chainName === chainName ? selectSourceRecommended.tokenSymbol : null;
-    const hasRecommendedToken = !!recommendedTokenForChain && nextChain.tokens.some((token) => token.tokenSymbol === recommendedTokenForChain);
-    setSelectSourceTokenSymbol(
-      hasRecommendedToken && recommendedTokenForChain ? recommendedTokenForChain : nextChain.tokens[0].tokenSymbol
-    );
-  };
-  if (!ready) {
-    return /* @__PURE__ */ jsx("div", { style: cardStyle, children: /* @__PURE__ */ jsx("div", { style: { textAlign: "center", padding: "24px 0" }, children: /* @__PURE__ */ jsx(Spinner, { label: "Initializing..." }) }) });
-  }
-  if (step === "login" && !authenticated) {
-    const isAwaitingOtp = verificationTarget !== null;
-    const isSendingCode = activeOtpStatus === "sending-code";
-    const isSubmittingCode = activeOtpStatus === "submitting-code";
-    const continueDisabled = authInput.trim().length === 0 || isSendingCode || isSubmittingCode;
-    const verifyDisabled = otpCode.trim().length !== 6 || isSubmittingCode;
-    return /* @__PURE__ */ jsx("div", { style: cardStyle, children: /* @__PURE__ */ jsxs("div", { style: { textAlign: "center" }, children: [
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          style: {
-            width: 56,
-            height: 56,
-            borderRadius: 14,
-            background: tokens.accent,
-            color: tokens.accentText,
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            fontWeight: 700,
-            fontSize: "1.35rem",
-            margin: "0 auto 24px",
-            boxShadow: "0 10px 20px rgba(40, 182, 122, 0.22)"
-          },
-          children: "S"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "h2",
-        {
-          style: {
-            ...headingStyle,
-            fontSize: "2.05rem",
-            lineHeight: 1.15,
-            marginBottom: "10px",
-            whiteSpace: "pre-line"
-          },
-          children: isAwaitingOtp ? "Enter your code." : "One-time setup.\nOne-tap deposits after."
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "p",
-        {
-          style: {
-            ...authCaptionStyle,
-            margin: "0 0 26px 0",
-            whiteSpace: "pre-line"
-          },
-          children: isAwaitingOtp ? `We sent a 6-digit code to ${maskAuthIdentifier(verificationTarget)}.` : "Protected by Face ID."
-        }
-      ),
-      error && /* @__PURE__ */ jsx("div", { style: errorStyle, children: error }),
-      isAwaitingOtp ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            id: "swype-login-code",
-            type: "text",
-            inputMode: "numeric",
-            autoComplete: "one-time-code",
-            placeholder: "Verification code",
-            value: otpCode,
-            onChange: (event) => {
-              setOtpCode(event.target.value.replace(/\D/g, "").slice(0, 6));
-            },
-            style: {
-              ...textFieldStyle,
-              textAlign: "center",
-              letterSpacing: "0.24em",
-              marginBottom: "14px"
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            style: verifyDisabled ? btnDisabled : btnPrimary,
-            disabled: verifyDisabled,
-            onClick: handleVerifyLoginCode,
-            children: isSubmittingCode ? "Verifying..." : "Continue"
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              display: "flex",
-              justifyContent: "space-between",
-              gap: "12px",
-              marginTop: "14px"
-            },
-            children: [
-              /* @__PURE__ */ jsx("button", { type: "button", style: authTertiaryButtonStyle, onClick: handleEditIdentifier, children: "Use a different email or phone" }),
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  style: authTertiaryButtonStyle,
-                  onClick: handleResendLoginCode,
-                  disabled: isSendingCode || isSubmittingCode,
-                  children: isSendingCode ? "Sending..." : "Resend code"
-                }
-              )
-            ]
-          }
-        )
-      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            id: "swype-login-identifier",
-            type: "text",
-            inputMode: "text",
-            autoComplete: "username",
-            placeholder: "Email or phone number",
-            value: authInput,
-            onChange: (event) => setAuthInput(event.target.value),
-            style: { ...textFieldStyle, marginBottom: "14px" }
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            style: continueDisabled ? btnDisabled : btnPrimary,
-            disabled: continueDisabled,
-            onClick: handleSendLoginCode,
-            children: isSendingCode ? "Sending code..." : "Continue"
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              display: "flex",
-              alignItems: "center",
-              gap: "10px",
-              margin: "22px 0 14px",
-              color: tokens.textMuted,
-              fontSize: "0.82rem"
-            },
-            children: [
-              /* @__PURE__ */ jsx("div", { style: { flex: 1, height: 1, background: tokens.border } }),
-              /* @__PURE__ */ jsx("span", { children: "works with" }),
-              /* @__PURE__ */ jsx("div", { style: { flex: 1, height: 1, background: tokens.border } })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            "aria-label": "Works with placeholder providers",
-            style: {
-              display: "flex",
-              justifyContent: "center",
-              gap: "12px",
-              marginBottom: "18px"
-            },
-            children: placeholderProviders.map((providerLabel) => /* @__PURE__ */ jsx(
-              "div",
-              {
-                style: {
-                  width: 34,
-                  height: 34,
-                  borderRadius: 999,
-                  border: `1px solid ${tokens.border}`,
-                  background: tokens.bgInput,
-                  color: tokens.textMuted,
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  fontSize: "0.78rem",
-                  fontWeight: 600
-                },
-                children: providerLabel
-              },
-              providerLabel
-            ))
-          }
-        ),
-        /* @__PURE__ */ jsx("p", { style: { ...authCaptionStyle, color: tokens.textMuted }, children: "Powered by Swype. Non-custodial." })
-      ] })
-    ] }) });
+    setConnectingNewAccount(false);
+    setSelectedWalletId(null);
+    setSetupComplete(false);
+    if (accounts.length > 0) setSelectedAccountId(accounts[0].id);
+  }, [depositAmount, accounts]);
+  const handleLogout = useCallback(async () => {
+    try {
+      await logout();
+    } catch {
+    }
+    if (typeof window !== "undefined") {
+      window.localStorage.removeItem(ACTIVE_CREDENTIAL_STORAGE_KEY);
+    }
+    polling.stopPolling();
+    setActiveCredentialId(null);
+    setStep("login");
+    setError(null);
+    setTransfer(null);
+    setCreatingTransfer(false);
+    setRegisteringPasskey(false);
+    setProviders([]);
+    setAccounts([]);
+    setChains([]);
+    setSelectedAccountId(null);
+    setSelectedWalletId(null);
+    setSelectedProviderId(null);
+    setConnectingNewAccount(false);
+    setAmount(depositAmount != null ? depositAmount.toString() : "");
+    setMobileFlow(false);
+    setSetupComplete(false);
+    resetHeadlessLogin();
+  }, [logout, polling, depositAmount, resetHeadlessLogin]);
+  if (!ready) {
+    return /* @__PURE__ */ jsx(ScreenLayout, { children: /* @__PURE__ */ jsx("div", { style: { textAlign: "center", padding: "48px 0", flex: 1, display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx(Spinner, { label: "Initializing..." }) }) });
   }
-  if (step === "register-passkey") {
-    const handleRegisterPasskey = async () => {
-      setRegisteringPasskey(true);
-      setError(null);
-      try {
-        const token = await getAccessToken();
-        if (!token) throw new Error("Not authenticated");
-        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);
-        if (depositAmount != null && depositAmount > 0) {
-          setStep("ready");
-        } else {
-          setStep("enter-amount");
-        }
-      } catch (err) {
-        const msg = err instanceof Error ? err.message : "Failed to register passkey";
-        setError(msg);
-      } finally {
-        setRegisteringPasskey(false);
+  if (step === "login" && !authenticated) {
+    return /* @__PURE__ */ jsx(
+      LoginScreen,
+      {
+        authInput,
+        onAuthInputChange: setAuthInput,
+        onSubmit: handleSendLoginCode,
+        sending: activeOtpStatus === "sending-code",
+        error,
+        onBack
       }
-    };
-    return /* @__PURE__ */ jsx("div", { style: cardStyle, children: /* @__PURE__ */ jsxs("div", { style: { textAlign: "center" }, children: [
-      /* @__PURE__ */ jsxs(
-        "svg",
-        {
-          width: "48",
-          height: "48",
-          viewBox: "0 0 48 48",
-          fill: "none",
-          style: { margin: "0 auto 16px" },
-          children: [
-            /* @__PURE__ */ jsx("rect", { width: "48", height: "48", rx: "12", fill: tokens.accent + "20" }),
-            /* @__PURE__ */ jsx(
-              "path",
-              {
-                d: "M24 16c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 10c-4.42 0-8 1.79-8 4v2h16v-2c0-2.21-3.58-4-8-4z",
-                fill: tokens.accent
-              }
-            )
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsx("h2", { style: { ...headingStyle, marginBottom: "8px" }, children: "Set Up Passkey" }),
-      /* @__PURE__ */ jsx(
-        "p",
-        {
-          style: {
-            fontSize: "0.875rem",
-            color: tokens.textSecondary,
-            margin: "0 0 24px 0",
-            lineHeight: 1.5
-          },
-          children: "Create a passkey for secure, one-touch payments. This only needs to be done once."
-        }
-      ),
-      error && /* @__PURE__ */ jsx("div", { style: errorStyle, children: error }),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          style: registeringPasskey ? btnDisabled : btnPrimary,
-          disabled: registeringPasskey,
-          onClick: handleRegisterPasskey,
-          children: registeringPasskey ? "Creating passkey..." : "Create Passkey"
-        }
-      )
-    ] }) });
+    );
   }
-  if (step === "enter-amount") {
-    const parsedAmount = parseFloat(amount);
-    const canContinue = !isNaN(parsedAmount) && parsedAmount >= MIN_SEND_AMOUNT_USD;
-    let maxSourceBalance = null;
-    for (const acct of accounts) {
-      for (const wallet of acct.wallets) {
-        for (const source of wallet.sources) {
-          const bal = source.balance.available.amount;
-          if (maxSourceBalance === null || bal > maxSourceBalance) {
-            maxSourceBalance = bal;
-          }
-        }
+  if (step === "otp-verify" && !authenticated) {
+    return /* @__PURE__ */ jsx(
+      OtpVerifyScreen,
+      {
+        maskedIdentifier: verificationTarget ? maskAuthIdentifier(verificationTarget) : "",
+        otpCode,
+        onOtpChange: (code) => {
+          setOtpCode(code);
+          setError(null);
+        },
+        onVerify: handleVerifyLoginCode,
+        onResend: handleResendLoginCode,
+        onBack: () => {
+          setVerificationTarget(null);
+          setOtpCode("");
+          setError(null);
+          setStep("login");
+        },
+        verifying: activeOtpStatus === "submitting-code",
+        error
+      }
+    );
+  }
+  if (step === "create-passkey") {
+    return /* @__PURE__ */ jsx(
+      CreatePasskeyScreen,
+      {
+        onCreatePasskey: handleRegisterPasskey,
+        onSkip: handleSkipPasskey,
+        onBack: () => setStep("login"),
+        creating: registeringPasskey,
+        error
+      }
+    );
+  }
+  if (step === "wallet-picker") {
+    return /* @__PURE__ */ jsx(
+      WalletPickerScreen,
+      {
+        providers,
+        onSelectProvider: handleSelectProvider,
+        onBack: () => setStep("create-passkey")
+      }
+    );
+  }
+  if (step === "setup") {
+    return /* @__PURE__ */ jsx(
+      SetupScreen,
+      {
+        availableBalance: maxSourceBalance,
+        tokenCount,
+        sourceName,
+        onSetupOneTap: handleSetupOneTap,
+        onBack: () => setStep("wallet-picker"),
+        loading: loadingData,
+        error
+      }
+    );
+  }
+  if (step === "setup-status") {
+    return /* @__PURE__ */ jsx(
+      SetupStatusScreen,
+      {
+        complete: setupComplete,
+        limit: oneTapLimit,
+        tokensApproved: tokenCount,
+        currentStepLabel: setupStepLabel,
+        merchantName,
+        onContinue: () => setStep("deposit"),
+        error
       }
+    );
+  }
+  if (step === "deposit") {
+    if (loadingData) {
+      return /* @__PURE__ */ jsx(ScreenLayout, { children: /* @__PURE__ */ jsx("div", { style: { textAlign: "center", padding: "48px 0", flex: 1, display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx(Spinner, { label: "Loading..." }) }) });
     }
-    return /* @__PURE__ */ jsxs("div", { style: cardStyle, children: [
-      stepBadge("Enter amount"),
-      /* @__PURE__ */ jsx("h2", { style: headingStyle, children: "How much?" }),
-      error && /* @__PURE__ */ jsx("div", { style: errorStyle, children: error }),
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          style: {
-            display: "flex",
-            alignItems: "center",
-            gap: "8px",
-            background: tokens.bgInput,
-            border: `1px solid ${tokens.border}`,
-            borderRadius: tokens.radiusLg,
-            padding: "6px 14px 6px 8px",
-            marginBottom: "8px"
-          },
-          children: [
-            /* @__PURE__ */ jsx(
-              "span",
-              {
-                style: {
-                  fontSize: "1.5rem",
-                  fontWeight: 600,
-                  color: tokens.textMuted,
-                  paddingLeft: "10px",
-                  userSelect: "none"
-                },
-                children: "$"
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                type: "number",
-                min: MIN_SEND_AMOUNT_USD.toFixed(2),
-                step: "0.01",
-                value: amount,
-                onChange: (e) => setAmount(e.target.value),
-                placeholder: "0.00",
-                style: {
-                  flex: 1,
-                  background: "transparent",
-                  border: "none",
-                  outline: "none",
-                  color: tokens.text,
-                  fontSize: "1.5rem",
-                  fontWeight: 600,
-                  fontFamily: "inherit",
-                  padding: "10px 0"
-                },
-                autoFocus: true
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "span",
-              {
-                style: {
-                  fontSize: "0.825rem",
-                  fontWeight: 600,
-                  color: tokens.textMuted,
-                  background: tokens.bgCard,
-                  padding: "6px 12px",
-                  border: `1px solid ${tokens.border}`,
-                  borderRadius: "999px"
-                },
-                children: "USD"
-              }
-            )
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          style: {
-            fontSize: "0.8rem",
-            color: tokens.textMuted,
-            marginBottom: "20px",
-            paddingLeft: "2px"
-          },
-          children: loadingData ? /* @__PURE__ */ jsx("span", { children: "Loading balance..." }) : maxSourceBalance !== null && maxSourceBalance > 0 ? /* @__PURE__ */ jsxs("span", { children: [
-            "Available: ",
-            /* @__PURE__ */ jsxs("span", { style: { fontWeight: 600, color: tokens.textSecondary }, children: [
-              "$",
-              maxSourceBalance.toFixed(2)
-            ] })
-          ] }) : null
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          style: canContinue ? btnPrimary : btnDisabled,
-          disabled: !canContinue,
-          onClick: () => {
-            setError(null);
-            setStep("ready");
-          },
-          children: "Continue"
-        }
-      )
-    ] });
-  }
-  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__ */ jsxs("div", { style: cardStyle, children: [
-      /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
-        stepBadge("Review & pay"),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            onClick: handleLogout,
-            style: {
-              position: "absolute",
-              top: 0,
-              right: 0,
-              background: "transparent",
-              border: "none",
-              color: tokens.textMuted,
-              cursor: "pointer",
-              fontSize: "0.75rem",
-              fontWeight: 600,
-              letterSpacing: "0.04em",
-              textTransform: "uppercase",
-              fontFamily: "inherit",
-              padding: 0
-            },
-            children: "Logout"
-          }
-        )
-      ] }),
-      error && /* @__PURE__ */ jsx("div", { style: errorStyle, children: error }),
-      loadingData ? /* @__PURE__ */ jsx("div", { style: { padding: "24px 0", textAlign: "center" }, children: /* @__PURE__ */ jsx(Spinner, { label: "Loading..." }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              textAlign: "center",
-              marginBottom: "20px"
-            },
-            children: [
-              /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  style: {
-                    fontSize: "2rem",
-                    fontWeight: 700,
-                    color: tokens.text,
-                    lineHeight: 1.2
-                  },
-                  children: [
-                    "$",
-                    parsedAmount > 0 ? parsedAmount.toFixed(2) : "0.00"
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  onClick: () => setStep("enter-amount"),
-                  style: {
-                    background: "transparent",
-                    border: "none",
-                    cursor: "pointer",
-                    color: tokens.textMuted,
-                    fontSize: "0.75rem",
-                    fontFamily: "inherit",
-                    outline: "none",
-                    padding: "4px 8px",
-                    marginTop: "4px"
-                  },
-                  children: "Change amount"
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              fontSize: "0.825rem",
-              color: tokens.textSecondary,
-              marginBottom: "16px",
-              padding: "12px 14px",
-              background: tokens.bgInput,
-              borderRadius: tokens.radiusLg,
-              border: `1px solid ${tokens.border}`,
-              lineHeight: 1.7
-            },
-            children: /* @__PURE__ */ jsx(
-              "div",
-              {
-                style: {
-                  display: "flex",
-                  justifyContent: "space-between",
-                  alignItems: "center"
-                },
-                children: noAccounts ? /* @__PURE__ */ jsx(Fragment, {}) : /* @__PURE__ */ jsxs("div", { children: [
-                  /* @__PURE__ */ jsx("span", { children: "From" }),
-                  /* @__PURE__ */ jsx(
-                    AccountDropdown,
-                    {
-                      accounts,
-                      selectedAccountId,
-                      selectedWalletId,
-                      onSelect: (id) => {
-                        setSelectedAccountId(id);
-                        setSelectedWalletId(null);
-                        setConnectingNewAccount(false);
-                        setSelectedProviderId(null);
-                      },
-                      onWalletSelect: (accountId, walletId) => {
-                        setSelectedAccountId(accountId);
-                        setSelectedWalletId(walletId);
-                        setConnectingNewAccount(false);
-                        setSelectedProviderId(null);
-                      }
-                    }
-                  )
-                ] })
-              }
-            )
-          }
-        ),
-        noAccounts && /* @__PURE__ */ jsxs("div", { style: { marginBottom: "16px" }, children: [
-          /* @__PURE__ */ 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__ */ jsx(
-            "div",
-            {
-              style: {
-                display: "flex",
-                flexDirection: "column",
-                gap: "8px"
-              },
-              children: providers.map((p) => /* @__PURE__ */ jsx(
-                ProviderCard,
-                {
-                  provider: p,
-                  selected: selectedProviderId === p.id,
-                  onClick: () => {
-                    setSelectedProviderId(p.id);
-                    setSelectedAccountId(null);
-                    setConnectingNewAccount(false);
-                  }
-                },
-                p.id
-              ))
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs(
-          "button",
-          {
-            style: canPay ? btnPrimary : btnDisabled,
-            disabled: !canPay,
-            onClick: handlePay,
-            children: [
-              "Pay $",
-              parsedAmount > 0 ? parsedAmount.toFixed(2) : "0.00"
-            ]
-          }
-        ),
-        !noAccounts && /* @__PURE__ */ jsx(
-          AdvancedSettings,
-          {
-            settings: advancedSettings,
-            onChange: setAdvancedSettings,
-            chains,
-            providers,
-            onConnectNewAccount: handleConnectNewAccount,
-            connectingNewAccount
-          }
-        )
-      ] })
-    ] });
+    const parsedAmt = depositAmount != null ? depositAmount : 5;
+    return /* @__PURE__ */ jsx(
+      DepositScreen,
+      {
+        merchantName,
+        sourceName,
+        sourceAddress,
+        sourceVerified,
+        availableBalance: maxSourceBalance,
+        remainingLimit: oneTapLimit,
+        tokenCount,
+        initialAmount: parsedAmt,
+        estimatedFeePct: 0.6,
+        estimatedFeeUsd: parsedAmt * 6e-3,
+        processing: creatingTransfer,
+        error,
+        onDeposit: handlePay,
+        onChangeSource: () => setStep("wallet-picker"),
+        onSwitchWallet: () => setStep("wallet-picker"),
+        onBack: onBack ?? (() => handleLogout())
+      }
+    );
   }
   if (step === "processing") {
-    if (pendingSelectSourceAction) {
-      const chainValue = resolvedSelectSourceChainName;
-      const tokenValue = resolvedSelectSourceTokenSymbol;
-      return /* @__PURE__ */ jsxs("div", { style: cardStyle, children: [
-        stepBadge("Select source"),
-        /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", marginBottom: "16px" }, children: [
-          /* @__PURE__ */ jsx("h2", { style: { ...headingStyle, marginBottom: "8px" }, children: "Select payment source" }),
-          /* @__PURE__ */ jsx(
-            "p",
-            {
-              style: {
-                fontSize: "0.85rem",
-                color: tokens.textSecondary,
-                margin: 0,
-                lineHeight: 1.5
-              },
-              children: "Confirm the chain and token to use for this transfer."
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              fontSize: "0.825rem",
-              color: tokens.textSecondary,
-              marginBottom: "16px",
-              padding: "14px",
-              background: tokens.bgInput,
-              borderRadius: tokens.radius,
-              border: `1px solid ${tokens.border}`
-            },
-            children: [
-              /* @__PURE__ */ jsx(
-                "label",
-                {
-                  htmlFor: "swype-select-source-chain",
-                  style: {
-                    display: "block",
-                    fontSize: "0.75rem",
-                    fontWeight: 600,
-                    marginBottom: "6px",
-                    color: tokens.textMuted,
-                    textTransform: "uppercase",
-                    letterSpacing: "0.04em"
-                  },
-                  children: "Chain"
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "select",
-                {
-                  id: "swype-select-source-chain",
-                  value: chainValue,
-                  onChange: (event) => handleSelectSourceChainChange(event.target.value),
-                  style: {
-                    width: "100%",
-                    marginBottom: "12px",
-                    padding: "10px 12px",
-                    borderRadius: tokens.radiusLg,
-                    border: `1px solid ${tokens.border}`,
-                    background: tokens.bgInput,
-                    color: tokens.text,
-                    fontFamily: "inherit",
-                    fontSize: "0.875rem",
-                    outline: "none"
-                  },
-                  children: displayedSelectSourceChoices.map((chainChoice) => /* @__PURE__ */ jsxs("option", { value: chainChoice.chainName, children: [
-                    chainChoice.chainName,
-                    " ($",
-                    chainChoice.balance.toFixed(2),
-                    ")"
-                  ] }, chainChoice.chainName))
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "label",
-                {
-                  htmlFor: "swype-select-source-token",
-                  style: {
-                    display: "block",
-                    fontSize: "0.75rem",
-                    fontWeight: 600,
-                    marginBottom: "6px",
-                    color: tokens.textMuted,
-                    textTransform: "uppercase",
-                    letterSpacing: "0.04em"
-                  },
-                  children: "Token"
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "select",
-                {
-                  id: "swype-select-source-token",
-                  value: tokenValue,
-                  onChange: (event) => setSelectSourceTokenSymbol(event.target.value),
-                  style: {
-                    width: "100%",
-                    padding: "10px 12px",
-                    borderRadius: tokens.radiusLg,
-                    border: `1px solid ${tokens.border}`,
-                    background: tokens.bgInput,
-                    color: tokens.text,
-                    fontFamily: "inherit",
-                    fontSize: "0.875rem",
-                    outline: "none"
-                  },
-                  children: selectSourceTokenChoices.map((tokenChoice) => /* @__PURE__ */ jsxs("option", { value: tokenChoice.tokenSymbol, children: [
-                    tokenChoice.tokenSymbol,
-                    " ($",
-                    tokenChoice.balance.toFixed(2),
-                    ")"
-                  ] }, tokenChoice.tokenSymbol))
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            style: canConfirmSelectSource ? btnPrimary : btnDisabled,
-            disabled: !canConfirmSelectSource,
-            onClick: () => {
-              if (!canConfirmSelectSource) return;
-              authExecutor.resolveSelectSource({
-                chainName: resolvedSelectSourceChainName,
-                tokenSymbol: resolvedSelectSourceTokenSymbol
-              });
-            },
-            children: "Confirm source"
-          }
-        )
-      ] });
-    }
-    if (transferSigning.signing && transferSigning.signPayload) {
-      const payload = transferSigning.signPayload;
-      return /* @__PURE__ */ jsx("div", { style: cardStyle, children: /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", padding: "16px 0" }, children: [
-        /* @__PURE__ */ jsxs("svg", { width: "48", height: "48", viewBox: "0 0 48 48", fill: "none", style: { margin: "0 auto 16px" }, children: [
-          /* @__PURE__ */ jsx("rect", { width: "48", height: "48", rx: "12", fill: tokens.accent + "20" }),
-          /* @__PURE__ */ jsx("path", { d: "M24 14v8M20 18h8M24 26v2M24 32v2", stroke: tokens.accent, strokeWidth: "2", strokeLinecap: "round" })
-        ] }),
-        /* @__PURE__ */ jsx("h2", { style: { ...headingStyle, marginBottom: "8px" }, children: "Authorize Transfer" }),
-        /* @__PURE__ */ jsx("p", { style: { fontSize: "0.85rem", color: tokens.textSecondary, margin: "0 0 16px 0", lineHeight: 1.5 }, children: "Use your passkey to confirm this payment." }),
-        /* @__PURE__ */ jsxs("div", { style: { fontSize: "0.825rem", color: tokens.textSecondary, padding: "12px 14px", background: tokens.bgInput, borderRadius: tokens.radiusLg, border: `1px solid ${tokens.border}`, textAlign: "left", lineHeight: 1.7, marginBottom: "16px" }, children: [
-          payload.amount && payload.tokenSymbol && /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between" }, children: [
-            /* @__PURE__ */ jsx("span", { children: "Amount" }),
-            /* @__PURE__ */ jsxs("span", { style: { fontWeight: 600, color: tokens.text }, children: [
-              payload.amount,
-              " ",
-              payload.tokenSymbol
-            ] })
-          ] }),
-          payload.bridgeRelayAddress && /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between" }, children: [
-            /* @__PURE__ */ jsx("span", { children: "Bridge relay" }),
-            /* @__PURE__ */ jsxs("span", { style: { fontFamily: '"SF Mono", "Fira Code", monospace', fontSize: "0.75rem" }, children: [
-              payload.bridgeRelayAddress.slice(0, 6),
-              "...",
-              payload.bridgeRelayAddress.slice(-4)
-            ] })
-          ] }),
-          payload.estimatedFeeUsd && /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between" }, children: [
-            /* @__PURE__ */ jsx("span", { children: "Est. fee" }),
-            /* @__PURE__ */ jsxs("span", { style: { fontWeight: 600 }, children: [
-              "$",
-              payload.estimatedFeeUsd
-            ] })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx(Spinner, { label: "Waiting for passkey..." })
-      ] }) });
-    }
     const currentActionType = authExecutor.currentAction?.type;
-    const getRegistrationMessage = () => {
-      switch (currentActionType) {
-        case "CREATE_SMART_ACCOUNT":
-          return {
-            label: "Creating your smart account...",
-            description: "Setting up your smart account for gasless payments."
-          };
-        case "APPROVE_PERMIT2":
-          return {
-            label: "Approving token access...",
-            description: "Approve the prompt in your wallet to allow secure token transfers."
-          };
-        case "SIGN_PERMIT2":
-          return {
-            label: "Signing transfer permission...",
-            description: "Sign the permit to allow your smart account to transfer tokens on your behalf."
-          };
-        default:
-          return { label: "", description: "" };
-      }
-    };
-    const regMsg = getRegistrationMessage();
-    getDisplayTransferStatus(polling.transfer, transfer);
-    getTransferIdSuffix(polling.transfer, transfer);
-    const statusLabel = creatingTransfer ? "Creating Transfer" : mobileFlow ? "Waiting for Authorization" : authExecutor.executing && regMsg.label ? regMsg.label : authExecutor.executing ? "Authorizing" : transferSigning.signing ? "Sending transfer" : polling.isPolling ? "Transfer Sent" : "Please wait...";
-    return /* @__PURE__ */ jsx("div", { style: cardStyle, children: /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", padding: "16px 0" }, children: [
+    const statusLabel = creatingTransfer ? "Creating Transfer" : mobileFlow ? "Waiting for Authorization" : authExecutor.executing ? currentActionType?.replace(/_/g, " ") ?? "Authorizing" : transferSigning.signing ? "Sending transfer" : polling.isPolling ? "Transfer Sent" : "Please wait...";
+    return /* @__PURE__ */ jsx(ScreenLayout, { children: /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", padding: "48px 0", flex: 1, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center" }, children: [
       /* @__PURE__ */ jsx(Spinner, { size: 48 }),
-      /* @__PURE__ */ jsx(
-        "h2",
-        {
-          style: {
-            ...headingStyle,
-            marginTop: "20px",
-            marginBottom: "8px"
-          },
-          children: statusLabel
-        }
-      ),
-      polling.error && /* @__PURE__ */ jsxs(
-        "p",
-        {
-          style: {
-            marginTop: "8px",
-            marginBottom: 0,
-            fontSize: "0.75rem",
-            color: tokens.textMuted
-          },
-          children: [
-            "Last polling error: ",
-            polling.error
-          ]
-        }
-      ),
-      !mobileFlow && authExecutor.results.length > 0 && /* @__PURE__ */ jsx("div", { style: { marginTop: "20px", textAlign: "left" }, children: authExecutor.results.map((r) => /* @__PURE__ */ jsxs(
-        "div",
-        {
-          style: {
-            display: "flex",
-            alignItems: "center",
-            gap: "8px",
-            padding: "6px 0",
-            fontSize: "0.8rem",
-            color: r.status === "success" ? tokens.success : tokens.error
-          },
-          children: [
-            /* @__PURE__ */ jsx("span", { children: r.status === "success" ? "\u2713" : "\u2717" }),
-            /* @__PURE__ */ jsx("span", { children: r.type.replace(/_/g, " ") })
-          ]
-        },
-        r.actionId
-      )) }),
-      (error || authExecutor.error || transferSigning.error || polling.error) && /* @__PURE__ */ jsx(
-        "div",
-        {
-          style: { ...errorStyle, marginTop: "16px", textAlign: "left" },
-          children: error || authExecutor.error || transferSigning.error || polling.error
-        }
-      )
+      /* @__PURE__ */ jsx("h2", { style: { fontSize: "1.4rem", fontWeight: 700, color: tokens.text, marginTop: 20, marginBottom: 8 }, children: statusLabel }),
+      (error || authExecutor.error || transferSigning.error || polling.error) && /* @__PURE__ */ jsx("div", { style: {
+        background: tokens.errorBg,
+        border: `1px solid ${tokens.error}66`,
+        borderRadius: 16,
+        padding: "11px 14px",
+        color: tokens.error,
+        fontSize: "0.84rem",
+        marginTop: 16,
+        lineHeight: 1.5,
+        textAlign: "left",
+        maxWidth: 340
+      }, children: error || authExecutor.error || transferSigning.error || polling.error })
     ] }) });
   }
-  if (step === "complete") {
-    const succeeded = transfer?.status === "COMPLETED";
-    return /* @__PURE__ */ jsx("div", { style: cardStyle, children: /* @__PURE__ */ jsxs("div", { style: { textAlign: "center" }, children: [
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          style: {
-            width: 56,
-            height: 56,
-            borderRadius: "50%",
-            background: succeeded ? tokens.success + "20" : tokens.error + "20",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            margin: "0 auto 16px"
-          },
-          children: succeeded ? /* @__PURE__ */ jsx("svg", { width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
-            "path",
-            {
-              d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z",
-              fill: tokens.success
-            }
-          ) }) : /* @__PURE__ */ jsx("svg", { width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
-            "path",
-            {
-              d: "M18.3 5.71L12 12.01 5.7 5.71 4.29 7.12l6.3 6.3-6.3 6.29 1.41 1.41 6.3-6.29 6.29 6.29 1.41-1.41-6.29-6.29 6.29-6.3-1.41-1.41z",
-              fill: tokens.error
-            }
-          ) })
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "h2",
-        {
-          style: {
-            ...headingStyle,
-            marginBottom: "8px",
-            color: succeeded ? tokens.success : tokens.error
-          },
-          children: succeeded ? "Payment Complete" : "Payment Failed"
-        }
-      ),
-      transfer && /* @__PURE__ */ jsxs(
-        "div",
-        {
-          style: {
-            fontSize: "0.825rem",
-            color: tokens.textSecondary,
-            margin: "0 0 24px 0",
-            padding: "14px",
-            background: tokens.bgInput,
-            borderRadius: tokens.radiusLg,
-            border: `1px solid ${tokens.border}`,
-            textAlign: "left",
-            lineHeight: 1.8
-          },
-          children: [
-            /* @__PURE__ */ jsxs(
-              "div",
-              {
-                style: { display: "flex", justifyContent: "space-between" },
-                children: [
-                  /* @__PURE__ */ jsx("span", { children: "Amount" }),
-                  /* @__PURE__ */ jsxs("span", { style: { fontWeight: 600, color: tokens.text }, children: [
-                    "$",
-                    transfer.amount?.amount?.toFixed(2),
-                    " ",
-                    transfer.amount?.currency
-                  ] })
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxs(
-              "div",
-              {
-                style: { display: "flex", justifyContent: "space-between" },
-                children: [
-                  /* @__PURE__ */ jsx("span", { children: "Status" }),
-                  /* @__PURE__ */ jsx(
-                    "span",
-                    {
-                      style: {
-                        fontWeight: 600,
-                        color: succeeded ? tokens.success : tokens.error
-                      },
-                      children: transfer.status
-                    }
-                  )
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxs(
-              "div",
-              {
-                style: { display: "flex", justifyContent: "space-between" },
-                children: [
-                  /* @__PURE__ */ jsx("span", { children: "Transfer ID" }),
-                  /* @__PURE__ */ jsxs(
-                    "span",
-                    {
-                      style: {
-                        fontFamily: '"SF Mono", "Fira Code", monospace',
-                        fontSize: "0.75rem"
-                      },
-                      children: [
-                        transfer.id.slice(0, 8),
-                        "..."
-                      ]
-                    }
-                  )
-                ]
-              }
-            )
-          ]
-        }
-      ),
-      error && /* @__PURE__ */ jsx("div", { style: { ...errorStyle, textAlign: "left" }, children: error }),
-      /* @__PURE__ */ jsx("button", { style: btnPrimary, onClick: handleNewPayment, children: succeeded ? "Make Another Payment" : "Try Again" })
-    ] }) });
+  if (step === "success") {
+    transfer?.status === "COMPLETED";
+    const displayAmount = transfer?.amount?.amount ?? 0;
+    const displayCurrency = transfer?.amount?.currency ?? "USD";
+    return /* @__PURE__ */ jsx(
+      SuccessScreen,
+      {
+        amount: displayAmount,
+        currency: displayCurrency,
+        merchantName,
+        sourceName,
+        remainingLimit: oneTapLimit > displayAmount ? oneTapLimit - displayAmount : 0,
+        onDone: handleNewPayment
+      }
+    );
+  }
+  if (step === "low-balance") {
+    return /* @__PURE__ */ jsx(
+      DepositScreen,
+      {
+        merchantName,
+        sourceName,
+        sourceAddress,
+        sourceVerified,
+        availableBalance: 0,
+        remainingLimit: oneTapLimit,
+        tokenCount,
+        initialAmount: depositAmount ?? 5,
+        processing: false,
+        error,
+        onDeposit: handlePay,
+        onChangeSource: () => setStep("wallet-picker"),
+        onSwitchWallet: () => setStep("wallet-picker"),
+        onBack: onBack ?? (() => handleLogout())
+      }
+    );
   }
   return null;
 }