@swype-org/react-sdk 0.1.110 → 0.1.114

package/dist/index.js

@@ -235,7 +235,10 @@ async function createAccount(apiBaseUrl, token, params) {
   if (!res.ok) await throwApiError(res);
   return await res.json();
 }
-async function createAccountAuthorizationSession(apiBaseUrl, token, accountId, credentialId) {
+async function createAccountAuthorizationSession(apiBaseUrl, token, accountId, credentialId, options) {
+  const body = { credentialId };
+  if (options?.tokenAddress) body.tokenAddress = options.tokenAddress;
+  if (options?.chainId != null) body.chainId = options.chainId;
   const res = await fetch(
     `${apiBaseUrl}/v1/accounts/${accountId}/authorization-sessions`,
     {
@@ -244,7 +247,7 @@ async function createAccountAuthorizationSession(apiBaseUrl, token, accountId, c
         "Content-Type": "application/json",
         Authorization: `Bearer ${token}`
       },
-      body: JSON.stringify({ credentialId })
+      body: JSON.stringify(body)
     }
   );
   if (!res.ok) await throwApiError(res);
@@ -1926,6 +1929,7 @@ function createInitialState(config) {
     selectedProviderId: null,
     selectedAccountId: null,
     selectedWalletId: null,
+    selectedTokenSymbol: null,
     amount: config.depositAmount != null ? config.depositAmount.toString() : "",
     transfer: null,
     creatingTransfer: false,
@@ -2020,7 +2024,8 @@ function paymentReducer(state, action) {
         ...state,
         selectedProviderId: action.providerId,
         selectedAccountId: null,
-        selectedWalletId: null
+        selectedWalletId: null,
+        selectedTokenSymbol: null
       };
     case "SELECT_ACCOUNT":
       return {
@@ -2029,6 +2034,13 @@ function paymentReducer(state, action) {
         selectedWalletId: action.walletId,
         step: "deposit"
       };
+    case "SELECT_TOKEN":
+      return {
+        ...state,
+        selectedWalletId: action.walletId,
+        selectedTokenSymbol: action.tokenSymbol,
+        step: "deposit"
+      };
     // ── Transfer lifecycle ───────────────────────────────────────
     case "PAY_STARTED":
       return {
@@ -3813,7 +3825,7 @@ var dividerTextStyle = (color) => ({
   whiteSpace: "nowrap"
 });
 var DEFAULT_MAX = 500;
-var ABSOLUTE_MIN = 1;
+var ABSOLUTE_MIN = 0.01;
 function SetupScreen({
   availableBalance,
   tokenCount,
@@ -3827,7 +3839,7 @@ function SetupScreen({
   error
 }) {
   const { tokens } = useSwypeConfig();
-  const effectiveMax = Math.floor(Math.min(DEFAULT_MAX, availableBalance > 0 ? availableBalance : DEFAULT_MAX) * 100) / 100;
+  const effectiveMax = DEFAULT_MAX;
   const effectiveMin = Math.min(ABSOLUTE_MIN, effectiveMax);
   const [limit, setLimit] = useState(() => effectiveMax);
   const [editing, setEditing] = useState(false);
@@ -3921,11 +3933,15 @@ function SetupScreen({
           ] }) : /* @__PURE__ */ jsxs(
             "div",
             {
-              style: { ...limitValueStyle(tokens.text), cursor: "pointer" },
+              style: editableLimitStyle(tokens.text),
               onClick: startEditing,
               children: [
                 "$",
-                limit.toFixed(2)
+                limit.toFixed(2),
+                /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", style: pencilIconStyle(tokens.textMuted), children: [
+                  /* @__PURE__ */ jsx("path", { d: "M16.474 5.408l2.118 2.117m-.756-3.982L12.109 9.27a2.118 2.118 0 00-.58 1.082L11 13l2.648-.53c.41-.082.786-.283 1.082-.579l5.727-5.727a1.853 1.853 0 10-2.621-2.621z", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }),
+                  /* @__PURE__ */ jsx("path", { d: "M19 15v3a2 2 0 01-2 2H5a2 2 0 01-2-2V6a2 2 0 012-2h3", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" })
+                ] })
               ]
             }
           )
@@ -4033,6 +4049,18 @@ var limitValueStyle = (color) => ({
   color,
   marginBottom: 12
 });
+var editableLimitStyle = (color) => ({
+  ...limitValueStyle(color),
+  cursor: "pointer",
+  display: "inline-flex",
+  alignItems: "center",
+  gap: 6
+});
+var pencilIconStyle = (color) => ({
+  color,
+  opacity: 0.6,
+  flexShrink: 0
+});
 var limitInputStyle = (color) => ({
   fontSize: "2.2rem",
   fontWeight: 700,
@@ -4060,6 +4088,108 @@ var linkStyle = (color) => ({
   padding: 0,
   marginBottom: 16
 });
+function SetupStatusScreen({
+  complete,
+  limit,
+  tokensApproved,
+  merchantName,
+  onContinue,
+  onLogout,
+  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: "Setting up Wallet",
+      status: "active"
+    },
+    { label: "Done", status: "pending" }
+  ];
+  return /* @__PURE__ */ jsxs(
+    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__ */ jsx(ScreenHeader, { right: /* @__PURE__ */ jsx(SettingsMenu, { onLogout }) }),
+        /* @__PURE__ */ jsxs("div", { style: contentStyle5, 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 contentStyle5 = {
+  flex: 1,
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+  textAlign: "center",
+  padding: "0 24px 32px"
+};
+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 = 0.25;
 function DepositScreen({
   merchantName,
@@ -4084,7 +4214,8 @@ function DepositScreen({
   selectedAccountId,
   onSelectAccount,
   onAuthorizeAccount,
-  onAddProvider
+  onAddProvider,
+  onSelectToken
 }) {
   const { tokens } = useSwypeConfig();
   const amount = initialAmount;
@@ -4214,12 +4345,20 @@ function DepositScreen({
               ] })
             ] })
           ] }),
-          tokenCount > 0 && /* @__PURE__ */ jsxs("div", { style: tokenBadgeStyle(tokens), children: [
-            /* @__PURE__ */ jsx("span", { style: tokenDotStyle2(tokens.accent) }),
-            tokenCount,
-            " ",
-            /* @__PURE__ */ jsx("span", { style: chevronStyle2, children: ">" })
-          ] })
+          tokenCount > 0 && /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: onSelectToken,
+              style: tokenBadgeButtonStyle2(tokens, !!onSelectToken),
+              children: [
+                /* @__PURE__ */ jsx("span", { style: tokenDotStyle2(tokens.accent) }),
+                tokenCount,
+                " ",
+                /* @__PURE__ */ jsx("span", { style: chevronInlineStyle, children: ">" })
+              ]
+            }
+          )
         ] }),
         /* @__PURE__ */ jsxs("div", { style: detailsStyle, children: [
           /* @__PURE__ */ jsxs("div", { style: detailRowStyle(tokens.textMuted), children: [
@@ -4237,7 +4376,7 @@ function DepositScreen({
             "%)"
           ] }) : /* @__PURE__ */ jsx("div", { style: detailRowStyle(tokens.textMuted), children: "Fees calculated at time of transfer" })
         ] }),
-        error && /* @__PURE__ */ jsx("div", { style: errorBannerStyle4(tokens), children: error })
+        error && /* @__PURE__ */ jsx("div", { style: errorBannerStyle5(tokens), children: error })
       ]
     }
   );
@@ -4277,7 +4416,7 @@ var balanceAmountStyle = {
   fontSize: "1rem",
   fontWeight: 700
 };
-var tokenBadgeStyle = (tokens) => ({
+var tokenBadgeButtonStyle2 = (tokens, clickable) => ({
   display: "flex",
   alignItems: "center",
   gap: 4,
@@ -4285,7 +4424,10 @@ var tokenBadgeStyle = (tokens) => ({
   color: tokens.textMuted,
   border: `1px solid ${tokens.border}`,
   borderRadius: 999,
-  padding: "4px 10px"
+  padding: "4px 10px",
+  background: "transparent",
+  fontFamily: "inherit",
+  cursor: clickable ? "pointer" : "default"
 });
 var tokenDotStyle2 = (color) => ({
   width: 8,
@@ -4294,7 +4436,7 @@ var tokenDotStyle2 = (color) => ({
   background: color,
   display: "inline-block"
 });
-var chevronStyle2 = { fontSize: "0.68rem", marginLeft: 2 };
+var chevronInlineStyle = { fontSize: "0.68rem", marginLeft: 2 };
 var detailsStyle = {
   textAlign: "center",
   marginTop: 12,
@@ -4305,7 +4447,7 @@ var detailRowStyle = (color) => ({
   color,
   marginBottom: 4
 });
-var errorBannerStyle4 = (tokens) => ({
+var errorBannerStyle5 = (tokens) => ({
   background: tokens.errorBg,
   border: `1px solid ${tokens.error}66`,
   borderRadius: 16,
@@ -4404,10 +4546,10 @@ function SuccessScreen({
             right: /* @__PURE__ */ jsx(SettingsMenu, { onLogout })
           }
         ),
-        /* @__PURE__ */ jsxs("div", { style: contentStyle5, children: [
+        /* @__PURE__ */ jsxs("div", { style: contentStyle6, children: [
           succeeded ? /* @__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__ */ jsxs("h2", { style: headingStyle6(tokens.text), children: [
+            /* @__PURE__ */ jsxs("h2", { style: headingStyle7(tokens.text), children: [
               "$",
               amount.toFixed(2),
               " deposited"
@@ -4418,7 +4560,7 @@ function SuccessScreen({
             ] })
           ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx(IconCircle, { variant: "error", size: 64, children: /* @__PURE__ */ jsx("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z", fill: tokens.error }) }) }),
-            /* @__PURE__ */ jsx("h2", { style: headingStyle6(tokens.text), children: "Transfer failed" }),
+            /* @__PURE__ */ jsx("h2", { style: headingStyle7(tokens.text), children: "Transfer failed" }),
             error && /* @__PURE__ */ jsx("p", { style: subtitleStyle6(tokens.error), children: error })
           ] }),
           /* @__PURE__ */ jsxs("div", { style: summaryCardStyle(tokens), children: [
@@ -4451,14 +4593,14 @@ function SuccessScreen({
     }
   );
 }
-var contentStyle5 = {
+var contentStyle6 = {
   flex: 1,
   display: "flex",
   flexDirection: "column",
   alignItems: "center",
   paddingTop: 16
 };
-var headingStyle6 = (color) => ({
+var headingStyle7 = (color) => ({
   fontSize: "1.5rem",
   fontWeight: 700,
   letterSpacing: "-0.02em",
@@ -4743,7 +4885,7 @@ function AdvancedSourceScreen({
             right: /* @__PURE__ */ jsx("span", { style: advancedBadgeStyle(tokens.accent), children: "Advanced" })
           }
         ),
-        /* @__PURE__ */ jsx("h2", { style: headingStyle7(tokens.text), children: "Set up One-Tap deposits" }),
+        /* @__PURE__ */ jsx("h2", { style: headingStyle8(tokens.text), children: "Set up One-Tap deposits" }),
         /* @__PURE__ */ jsx("p", { style: subtitleStyle8(tokens.textSecondary), children: "Select a token source for your One-Tap deposits." }),
         /* @__PURE__ */ jsx("label", { style: labelStyle3(tokens.textSecondary), children: "Select tokens to approve" }),
         /* @__PURE__ */ jsx("div", { style: chainListStyle, children: choices.map((chain) => {
@@ -4807,7 +4949,7 @@ var advancedBadgeStyle = (color) => ({
   padding: "3px 10px",
   letterSpacing: "0.02em"
 });
-var headingStyle7 = (color) => ({
+var headingStyle8 = (color) => ({
   fontSize: "1.3rem",
   fontWeight: 700,
   letterSpacing: "-0.02em",
@@ -4942,16 +5084,16 @@ function TransferStatusScreen({
   const steps = buildSteps(phase);
   return /* @__PURE__ */ jsxs(ScreenLayout, { children: [
     /* @__PURE__ */ jsx(ScreenHeader, { right: /* @__PURE__ */ jsx(SettingsMenu, { onLogout }) }),
-    /* @__PURE__ */ jsxs("div", { style: contentStyle6, children: [
+    /* @__PURE__ */ jsxs("div", { style: contentStyle7, children: [
       /* @__PURE__ */ jsx(Spinner, { size: 48 }),
-      /* @__PURE__ */ jsx("h2", { style: headingStyle8(tokens.text), children: "Processing Transfer..." }),
-      error && /* @__PURE__ */ jsx("div", { style: errorBannerStyle5(tokens), children: error }),
-      /* @__PURE__ */ jsx("div", { style: stepsWrapStyle, children: /* @__PURE__ */ jsx(StepList, { steps }) }),
-      /* @__PURE__ */ jsx("p", { style: waitHintStyle(tokens.textMuted), children: "Usually takes a few seconds" })
+      /* @__PURE__ */ jsx("h2", { style: headingStyle9(tokens.text), children: "Processing Transfer..." }),
+      error && /* @__PURE__ */ jsx("div", { style: errorBannerStyle6(tokens), children: error }),
+      /* @__PURE__ */ jsx("div", { style: stepsWrapStyle2, children: /* @__PURE__ */ jsx(StepList, { steps }) }),
+      /* @__PURE__ */ jsx("p", { style: waitHintStyle2(tokens.textMuted), children: "Usually takes a few seconds" })
     ] })
   ] });
 }
-var contentStyle6 = {
+var contentStyle7 = {
   flex: 1,
   display: "flex",
   flexDirection: "column",
@@ -4960,14 +5102,14 @@ var contentStyle6 = {
   textAlign: "center",
   padding: "0 24px"
 };
-var headingStyle8 = (color) => ({
+var headingStyle9 = (color) => ({
   fontSize: "1.45rem",
   fontWeight: 700,
   letterSpacing: "-0.02em",
   color,
   margin: "20px 0 16px"
 });
-var errorBannerStyle5 = (tokens) => ({
+var errorBannerStyle6 = (tokens) => ({
   background: tokens.errorBg,
   border: `1px solid ${tokens.error}66`,
   borderRadius: 16,
@@ -4979,13 +5121,13 @@ var errorBannerStyle5 = (tokens) => ({
   width: "100%",
   textAlign: "left"
 });
-var stepsWrapStyle = {
+var stepsWrapStyle2 = {
   width: "100%",
   maxWidth: 280,
   textAlign: "left",
   marginBottom: 16
 };
-var waitHintStyle = (color) => ({
+var waitHintStyle2 = (color) => ({
   fontSize: "0.82rem",
   color,
   margin: 0
@@ -5027,9 +5169,9 @@ function OpenWalletScreen({
       ] }),
       children: [
         /* @__PURE__ */ jsx(ScreenHeader, { right: /* @__PURE__ */ jsx(SettingsMenu, { onLogout }) }),
-        /* @__PURE__ */ jsxs("div", { style: contentStyle7, children: [
+        /* @__PURE__ */ jsxs("div", { style: contentStyle8, children: [
           logoSrc ? /* @__PURE__ */ jsx("img", { src: logoSrc, alt: displayName, style: logoStyle }) : /* @__PURE__ */ jsx(Spinner, { size: 48 }),
-          /* @__PURE__ */ jsx("h2", { style: headingStyle9(tokens.text), children: loading ? "Connecting..." : `Open ${displayName}` }),
+          /* @__PURE__ */ jsx("h2", { style: headingStyle10(tokens.text), children: loading ? "Connecting..." : `Open ${displayName}` }),
           /* @__PURE__ */ jsx("p", { style: subtitleStyle9(tokens.textSecondary), children: loading ? "Creating transfer and preparing your wallet link..." : `Continue in ${displayName} to authorize this connection.` }),
           !loading && /* @__PURE__ */ jsxs("div", { style: waitingBadgeStyle(tokens), children: [
             /* @__PURE__ */ jsx(Spinner, { size: 14 }),
@@ -5040,7 +5182,7 @@ function OpenWalletScreen({
     }
   );
 }
-var contentStyle7 = {
+var contentStyle8 = {
   flex: 1,
   display: "flex",
   flexDirection: "column",
@@ -5060,7 +5202,7 @@ var logoStyle = {
   borderRadius: 14,
   objectFit: "contain"
 };
-var headingStyle9 = (color) => ({
+var headingStyle10 = (color) => ({
   fontSize: "1.45rem",
   fontWeight: 700,
   letterSpacing: "-0.02em",
@@ -5111,9 +5253,9 @@ function ConfirmSignScreen({
       ] }),
       children: [
         /* @__PURE__ */ jsx(ScreenHeader, { right: /* @__PURE__ */ jsx(SettingsMenu, { onLogout }) }),
-        /* @__PURE__ */ jsxs("div", { style: contentStyle8, children: [
+        /* @__PURE__ */ jsxs("div", { style: contentStyle9, children: [
           logoSrc ? /* @__PURE__ */ jsx("img", { src: logoSrc, alt: displayName, style: logoStyle2 }) : /* @__PURE__ */ jsx(Spinner, { size: 48 }),
-          /* @__PURE__ */ jsx("h2", { style: headingStyle10(tokens.text), children: "Wallet authorized" }),
+          /* @__PURE__ */ jsx("h2", { style: headingStyle11(tokens.text), children: "Wallet authorized" }),
           /* @__PURE__ */ jsxs("p", { style: subtitleStyle10(tokens.textSecondary), children: [
             displayName,
             " approved the connection. Tap below to confirm your payment."
@@ -5127,7 +5269,7 @@ function ConfirmSignScreen({
     }
   );
 }
-var contentStyle8 = {
+var contentStyle9 = {
   flex: 1,
   display: "flex",
   flexDirection: "column",
@@ -5142,7 +5284,7 @@ var logoStyle2 = {
   borderRadius: 14,
   objectFit: "contain"
 };
-var headingStyle10 = (color) => ({
+var headingStyle11 = (color) => ({
   fontSize: "1.45rem",
   fontWeight: 700,
   letterSpacing: "-0.02em",
@@ -5183,6 +5325,236 @@ var errorStyle2 = (color) => ({
   color: "#ef4444",
   margin: "8px 0 0"
 });
+function TokenPickerScreen({
+  account,
+  chains,
+  onSelectAuthorized,
+  onAuthorizeToken,
+  onBack
+}) {
+  const { tokens: themeTokens } = useSwypeConfig();
+  const [selectedIndex, setSelectedIndex] = useState(null);
+  const entries = [];
+  for (const wallet of account.wallets) {
+    for (const source of wallet.sources) {
+      entries.push({
+        walletId: wallet.id,
+        chainName: wallet.chain.name,
+        tokenSymbol: source.token.symbol,
+        tokenAddress: source.address,
+        balance: source.balance.total.amount,
+        status: source.token.status
+      });
+    }
+  }
+  const selected = selectedIndex != null ? entries[selectedIndex] : null;
+  const isAuthorized = selected?.status === "AUTHORIZED";
+  const handleConfirm = () => {
+    if (!selected) return;
+    if (isAuthorized) {
+      onSelectAuthorized(selected.walletId, selected.tokenSymbol);
+    } else {
+      const chain = chains.find((c) => c.name === selected.chainName);
+      const evmChainId = chain?.commonId;
+      if (evmChainId == null) return;
+      onAuthorizeToken(selected.walletId, selected.tokenAddress, evmChainId, selected.tokenSymbol);
+    }
+  };
+  const chainGroups = /* @__PURE__ */ new Map();
+  for (const entry of entries) {
+    const group = chainGroups.get(entry.chainName);
+    if (group) {
+      group.push(entry);
+    } else {
+      chainGroups.set(entry.chainName, [entry]);
+    }
+  }
+  const [expandedChain, setExpandedChain] = useState(
+    entries.length > 0 ? entries[0].chainName : null
+  );
+  return /* @__PURE__ */ jsxs(
+    ScreenLayout,
+    {
+      footer: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          PrimaryButton,
+          {
+            onClick: handleConfirm,
+            disabled: selected == null,
+            children: selected == null ? "Select a token" : isAuthorized ? "Select Source" : "Authorize Token"
+          }
+        ),
+        /* @__PURE__ */ jsx(PoweredByFooter, {})
+      ] }),
+      children: [
+        /* @__PURE__ */ jsx(ScreenHeader, { title: "Select Token", onBack }),
+        /* @__PURE__ */ jsx("p", { style: subtitleStyle11(themeTokens.textSecondary), children: "Choose a token to deposit with. Tokens that haven't been authorized yet will require a one-time wallet approval." }),
+        /* @__PURE__ */ jsx("div", { style: chainListStyle2, children: [...chainGroups.entries()].map(([chainName, chainEntries]) => {
+          const isExpanded = expandedChain === chainName;
+          const chainTotal = chainEntries.reduce((sum, e) => sum + e.balance, 0);
+          return /* @__PURE__ */ jsxs("div", { style: chainCardStyle2(themeTokens), children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => setExpandedChain((prev) => prev === chainName ? null : chainName),
+                style: chainHeaderStyle2(themeTokens),
+                children: [
+                  /* @__PURE__ */ jsxs("div", { style: chainHeaderLeftStyle2, children: [
+                    /* @__PURE__ */ jsx("span", { style: chainNameStyle2(themeTokens.text), children: chainName }),
+                    /* @__PURE__ */ jsxs("span", { style: chainBalanceStyle2(themeTokens.textMuted), children: [
+                      "$",
+                      chainTotal.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsx("span", { style: chevronStyle2(themeTokens.textMuted), children: isExpanded ? "\u25BE" : "\u25B8" })
+                ]
+              }
+            ),
+            isExpanded && /* @__PURE__ */ jsx("div", { style: tokenListStyle2, children: chainEntries.map((entry) => {
+              const globalIdx = entries.indexOf(entry);
+              const isSelected = selectedIndex === globalIdx;
+              const authorized = entry.status === "AUTHORIZED";
+              return /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setSelectedIndex(globalIdx),
+                  style: tokenRowStyle2(themeTokens, isSelected),
+                  children: [
+                    /* @__PURE__ */ jsxs("div", { style: tokenInfoStyle2, children: [
+                      /* @__PURE__ */ jsxs("div", { style: tokenHeaderRowStyle, children: [
+                        /* @__PURE__ */ jsx("span", { style: tokenSymbolStyle2(themeTokens.text), children: entry.tokenSymbol }),
+                        authorized ? /* @__PURE__ */ jsx("span", { style: statusBadgeStyle(themeTokens.success), children: "Authorized" }) : /* @__PURE__ */ jsx("span", { style: statusBadgeStyle(themeTokens.textMuted), children: "Not authorized" })
+                      ] }),
+                      /* @__PURE__ */ jsxs("span", { style: tokenBalStyle2(themeTokens.textMuted), children: [
+                        "$",
+                        entry.balance.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsx("div", { style: radioStyle3(themeTokens, isSelected), children: isSelected && /* @__PURE__ */ jsx("div", { style: radioDotStyle3(themeTokens.accent) }) })
+                  ]
+                },
+                `${entry.walletId}-${entry.tokenSymbol}`
+              );
+            }) })
+          ] }, chainName);
+        }) })
+      ]
+    }
+  );
+}
+var subtitleStyle11 = (color) => ({
+  fontSize: "0.86rem",
+  color,
+  margin: "0 0 20px",
+  lineHeight: 1.5
+});
+var chainListStyle2 = {
+  display: "flex",
+  flexDirection: "column",
+  gap: 10
+};
+var chainCardStyle2 = (tokens) => ({
+  border: `1px solid ${tokens.border}`,
+  borderRadius: 14,
+  overflow: "hidden",
+  background: tokens.bgInput
+});
+var chainHeaderStyle2 = (tokens) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  width: "100%",
+  padding: "14px 16px",
+  background: tokens.bgInput,
+  border: "none",
+  cursor: "pointer",
+  fontFamily: "inherit",
+  textAlign: "left"
+});
+var chainHeaderLeftStyle2 = {
+  display: "flex",
+  flexDirection: "column",
+  gap: 2
+};
+var chainNameStyle2 = (color) => ({
+  fontSize: "0.92rem",
+  fontWeight: 600,
+  color
+});
+var chainBalanceStyle2 = (color) => ({
+  fontSize: "0.76rem",
+  color
+});
+var chevronStyle2 = (color) => ({
+  fontSize: "0.9rem",
+  color
+});
+var tokenListStyle2 = {
+  padding: "0 12px 12px",
+  display: "flex",
+  flexDirection: "column",
+  gap: 6
+};
+var tokenRowStyle2 = (tokens, selected) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  padding: "12px 14px",
+  background: tokens.bgCard,
+  border: `1.5px solid ${selected ? tokens.accent : tokens.border}`,
+  borderRadius: 10,
+  cursor: "pointer",
+  fontFamily: "inherit",
+  textAlign: "left",
+  transition: "border-color 0.15s ease"
+});
+var tokenInfoStyle2 = {
+  display: "flex",
+  flexDirection: "column",
+  gap: 4,
+  flex: 1
+};
+var tokenHeaderRowStyle = {
+  display: "flex",
+  alignItems: "center",
+  gap: 8
+};
+var tokenSymbolStyle2 = (color) => ({
+  fontSize: "0.88rem",
+  fontWeight: 600,
+  color
+});
+var statusBadgeStyle = (color) => ({
+  fontSize: "0.65rem",
+  fontWeight: 600,
+  color,
+  border: `1px solid ${color}44`,
+  borderRadius: 999,
+  padding: "1px 7px",
+  letterSpacing: "0.02em"
+});
+var tokenBalStyle2 = (color) => ({
+  fontSize: "0.74rem",
+  color
+});
+var radioStyle3 = (tokens, selected) => ({
+  width: 20,
+  height: 20,
+  borderRadius: "50%",
+  border: `2px solid ${selected ? tokens.accent : tokens.border}`,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  flexShrink: 0
+});
+var radioDotStyle3 = (color) => ({
+  width: 10,
+  height: 10,
+  borderRadius: "50%",
+  background: color
+});
 function StepRenderer({
   state,
   ready,
@@ -5292,6 +5664,35 @@ function StepRenderer({
       }
     );
   }
+  if (step === "setup-status") {
+    return /* @__PURE__ */ jsx(
+      SetupStatusScreen,
+      {
+        complete: false,
+        limit: state.oneTapLimit,
+        tokensApproved: 0,
+        merchantName,
+        onContinue: () => handlers.onNavigate("setup"),
+        onLogout: handlers.onLogout,
+        error: state.error || authExecutorError
+      }
+    );
+  }
+  if (step === "setup") {
+    return /* @__PURE__ */ jsx(
+      SetupScreen,
+      {
+        availableBalance: selectedAccount ? selectedAccount.wallets.reduce((sum, w) => sum + w.balance.available.amount, 0) : maxSourceBalance,
+        tokenCount,
+        sourceName,
+        onSetupOneTap: handlers.onSetupOneTap,
+        onBack: () => handlers.onNavigate("deposit"),
+        onLogout: handlers.onLogout,
+        loading: state.creatingTransfer,
+        error: state.error
+      }
+    );
+  }
   if (step === "confirm-sign") {
     const providerName = state.providers.find((p) => p.id === state.selectedProviderId)?.name ?? null;
     return /* @__PURE__ */ jsx(
@@ -5333,7 +5734,23 @@ function StepRenderer({
         selectedAccountId: state.selectedAccountId,
         onSelectAccount: handlers.onSelectAccount,
         onAuthorizeAccount: handlers.onContinueConnection,
-        onAddProvider: () => handlers.onNavigate("wallet-picker")
+        onAddProvider: () => handlers.onNavigate("wallet-picker"),
+        onSelectToken: handlers.onSelectToken
+      }
+    );
+  }
+  if (step === "token-picker") {
+    if (!selectedAccount) {
+      return /* @__PURE__ */ jsx(SwypeLoadingScreen, {});
+    }
+    return /* @__PURE__ */ jsx(
+      TokenPickerScreen,
+      {
+        account: selectedAccount,
+        chains: state.chains,
+        onSelectAuthorized: handlers.onSelectAuthorizedToken,
+        onAuthorizeToken: handlers.onAuthorizeToken,
+        onBack: () => handlers.onNavigate("deposit")
       }
     );
   }
@@ -5440,7 +5857,7 @@ var PaymentErrorBoundary = class extends Component {
         /* @__PURE__ */ jsx("path", { d: "M12 8v5", stroke: "#ef4444", strokeWidth: "1.5", strokeLinecap: "round" }),
         /* @__PURE__ */ jsx("circle", { cx: "12", cy: "16", r: "0.75", fill: "#ef4444" })
       ] }) }),
-      /* @__PURE__ */ jsx("h2", { style: headingStyle11, children: "Something went wrong" }),
+      /* @__PURE__ */ jsx("h2", { style: headingStyle12, children: "Something went wrong" }),
       /* @__PURE__ */ jsx("p", { style: messageStyle, children: "An unexpected error occurred. Please try again." }),
       /* @__PURE__ */ jsx("button", { type: "button", onClick: this.handleReset, style: buttonStyle3, children: "Try again" })
     ] });
@@ -5460,7 +5877,7 @@ var containerStyle8 = {
 var iconStyle4 = {
   marginBottom: 20
 };
-var headingStyle11 = {
+var headingStyle12 = {
   fontSize: "1.25rem",
   fontWeight: 700,
   color: "#1a1a1a",
@@ -5532,6 +5949,7 @@ function SwypePaymentInner({
   const processingStartedAtRef = useRef(null);
   const initializedSelectSourceActionRef = useRef(null);
   const preSelectSourceStepRef = useRef(null);
+  const pendingTokenAuthRef = useRef(null);
   const checkingPasskeyRef = useRef(false);
   const onCompleteRef = useRef(onComplete);
   onCompleteRef.current = onComplete;
@@ -5959,6 +6377,84 @@ function SwypePaymentInner({
     reloadAccounts,
     onError
   ]);
+  const handleNavigateToTokenPicker = useCallback(() => {
+    dispatch({ type: "NAVIGATE", step: "token-picker" });
+  }, []);
+  const handleSelectAuthorizedToken = useCallback((walletId, tokenSymbol) => {
+    dispatch({ type: "SELECT_TOKEN", walletId, tokenSymbol });
+  }, []);
+  const handleAuthorizeToken = useCallback(async (_walletId, tokenAddress, chainId, tokenSymbol) => {
+    if (!state.selectedAccountId) {
+      dispatch({ type: "SET_ERROR", error: "No account selected." });
+      return;
+    }
+    if (!state.activeCredentialId) {
+      dispatch({ type: "SET_ERROR", error: "Create a passkey on this device before continuing." });
+      dispatch({ type: "NAVIGATE", step: "create-passkey" });
+      return;
+    }
+    const acct = state.accounts.find((a) => a.id === state.selectedAccountId);
+    const matchedProvider = acct ? state.providers.find((p) => p.name === acct.name) : void 0;
+    if (matchedProvider) {
+      dispatch({ type: "SELECT_PROVIDER", providerId: matchedProvider.id });
+    }
+    dispatch({ type: "SET_ERROR", error: null });
+    dispatch({ type: "SET_INCREASING_LIMIT", value: true });
+    pendingTokenAuthRef.current = { tokenAddress, chainId, tokenSymbol, walletId: _walletId };
+    try {
+      const token = await getAccessToken();
+      if (!token) throw new Error("Not authenticated");
+      const session = await createAccountAuthorizationSession(
+        apiBaseUrl,
+        token,
+        state.selectedAccountId,
+        state.activeCredentialId,
+        { tokenAddress, chainId }
+      );
+      const isMobile = !shouldUseWalletConnector({
+        useWalletConnector: useWalletConnectorProp,
+        userAgent: typeof navigator === "undefined" ? void 0 : navigator.userAgent
+      });
+      if (isMobile) {
+        handlingMobileReturnRef.current = false;
+        mobileSetupFlowRef.current = true;
+        setupAccountIdRef.current = state.selectedAccountId;
+        persistMobileFlowState({
+          accountId: state.selectedAccountId,
+          sessionId: session.id,
+          deeplinkUri: session.uri,
+          providerId: matchedProvider?.id ?? null,
+          isSetup: true
+        });
+        dispatch({ type: "MOBILE_DEEPLINK_READY", deeplinkUri: session.uri });
+        triggerDeeplink(session.uri);
+      } else {
+        dispatch({ type: "NAVIGATE", step: "setup-status" });
+        await authExecutor.executeSessionById(session.id);
+        await reloadAccounts();
+        dispatch({ type: "SELECT_TOKEN", walletId: _walletId, tokenSymbol });
+      }
+    } catch (err) {
+      captureException(err);
+      const msg = err instanceof Error ? err.message : "Failed to authorize token";
+      dispatch({ type: "SET_ERROR", error: msg });
+      onError?.(msg);
+    } finally {
+      pendingTokenAuthRef.current = null;
+      dispatch({ type: "SET_INCREASING_LIMIT", value: false });
+    }
+  }, [
+    state.selectedAccountId,
+    state.activeCredentialId,
+    state.accounts,
+    state.providers,
+    apiBaseUrl,
+    getAccessToken,
+    authExecutor,
+    useWalletConnectorProp,
+    reloadAccounts,
+    onError
+  ]);
   const handleConfirmSign = useCallback(async () => {
     const t = state.transfer ?? polling.transfer;
     if (!t) return;
@@ -5996,7 +6492,16 @@ function SwypePaymentInner({
     }
     const provider = state.providers.find((p) => p.id === providerId);
     const providerName = provider?.name ?? "Wallet";
-    dispatch({ type: "PAY_STARTED", isSetupRedirect: true });
+    const isMobile = !shouldUseWalletConnector({
+      useWalletConnector: useWalletConnectorProp,
+      userAgent: typeof navigator === "undefined" ? void 0 : navigator.userAgent
+    });
+    if (isMobile) {
+      dispatch({ type: "PAY_STARTED", isSetupRedirect: true });
+    } else {
+      dispatch({ type: "PAY_STARTED", isSetupRedirect: false });
+      dispatch({ type: "NAVIGATE", step: "setup-status" });
+    }
     try {
       const token = await getAccessToken();
       if (!token) throw new Error("Not authenticated");
@@ -6009,10 +6514,6 @@ function SwypePaymentInner({
       });
       const session = account.authorizationSessions?.[0];
       if (!session) throw new Error("No authorization session returned.");
-      const isMobile = !shouldUseWalletConnector({
-        useWalletConnector: useWalletConnectorProp,
-        userAgent: typeof navigator === "undefined" ? void 0 : navigator.userAgent
-      });
       if (isMobile) {
         handlingMobileReturnRef.current = false;
         mobileSetupFlowRef.current = true;
@@ -6029,7 +6530,7 @@ function SwypePaymentInner({
       } else {
         await authExecutor.executeSessionById(session.id);
         await reloadAccounts();
-        dispatch({ type: "NAVIGATE", step: "deposit" });
+        dispatch({ type: "NAVIGATE", step: "setup" });
       }
     } catch (err) {
       captureException(err);
@@ -6073,6 +6574,20 @@ function SwypePaymentInner({
     },
     [state.accounts, depositAmount]
   );
+  const handleSetupOneTap = useCallback(async (limit) => {
+    try {
+      const token = await getAccessToken();
+      if (!token) throw new Error("Not authenticated");
+      await updateUserConfig(apiBaseUrl, token, { defaultAllowance: limit });
+      dispatch({ type: "NAVIGATE", step: "deposit" });
+    } catch (err) {
+      captureException(err);
+      dispatch({
+        type: "SET_ERROR",
+        error: err instanceof Error ? err.message : "Failed to save One-Tap limit"
+      });
+    }
+  }, [getAccessToken, apiBaseUrl]);
   const handleNewPayment = useCallback(() => {
     clearMobileFlowState();
     processingStartedAtRef.current = null;
@@ -6309,6 +6824,7 @@ function SwypePaymentInner({
     checkPasskey();
     return () => {
       cancelled = true;
+      checkingPasskeyRef.current = false;
     };
   }, [ready, authenticated, state.step, apiBaseUrl, state.activeCredentialId]);
   useEffect(() => {
@@ -6520,7 +7036,7 @@ function SwypePaymentInner({
     initializedSelectSourceActionRef.current = pendingSelectSourceAction.id;
   }, [pendingSelectSourceAction, selectSourceChoices, selectSourceRecommended]);
   useEffect(() => {
-    if (pendingSelectSourceAction && (state.step === "processing" || state.step === "open-wallet")) {
+    if (pendingSelectSourceAction && (state.step === "processing" || state.step === "open-wallet" || state.step === "setup-status")) {
       preSelectSourceStepRef.current = state.step;
       dispatch({ type: "NAVIGATE", step: "select-source" });
     } else if (!pendingSelectSourceAction && state.step === "select-source") {
@@ -6528,6 +7044,21 @@ function SwypePaymentInner({
       preSelectSourceStepRef.current = null;
     }
   }, [pendingSelectSourceAction, state.step]);
+  useEffect(() => {
+    if (!pendingSelectSourceAction || !pendingTokenAuthRef.current) return;
+    const { tokenAddress, chainId } = pendingTokenAuthRef.current;
+    const chainIdHex = `0x${chainId.toString(16)}`;
+    const options = pendingSelectSourceAction.metadata?.options ?? [];
+    const match = options.find(
+      (opt) => opt.tokenAddress.toLowerCase() === tokenAddress.toLowerCase() && opt.chainId.toLowerCase() === chainIdHex.toLowerCase()
+    );
+    if (match) {
+      authExecutor.resolveSelectSource({
+        chainName: match.chainName,
+        tokenSymbol: match.tokenSymbol
+      });
+    }
+  }, [pendingSelectSourceAction, authExecutor]);
   const handlers = useMemo(() => ({
     onSendLoginCode: handleSendLoginCode,
     onVerifyLoginCode: handleVerifyLoginCode,
@@ -6556,7 +7087,11 @@ function SwypePaymentInner({
     },
     onSelectSourceChainChange: handleSelectSourceChainChange,
     onSetSelectSourceTokenSymbol: setSelectSourceTokenSymbol,
-    onConfirmSelectSource: handleConfirmSelectSource
+    onConfirmSelectSource: handleConfirmSelectSource,
+    onSetupOneTap: handleSetupOneTap,
+    onSelectToken: handleNavigateToTokenPicker,
+    onSelectAuthorizedToken: handleSelectAuthorizedToken,
+    onAuthorizeToken: handleAuthorizeToken
   }), [
     handleSendLoginCode,
     handleVerifyLoginCode,
@@ -6574,7 +7109,11 @@ function SwypePaymentInner({
     handleLogout,
     handleNewPayment,
     handleSelectSourceChainChange,
-    handleConfirmSelectSource
+    handleConfirmSelectSource,
+    handleSetupOneTap,
+    handleNavigateToTokenPicker,
+    handleSelectAuthorizedToken,
+    handleAuthorizeToken
   ]);
   return /* @__PURE__ */ jsx(
     StepRenderer,
@@ -6612,6 +7151,6 @@ function SwypePaymentInner({
   );
 }
 
-export { AdvancedSourceScreen, CreatePasskeyScreen, IconCircle, InfoBanner, OutlineButton, PasskeyIframeBlockedError, PoweredByFooter, PrimaryButton, ScreenHeader, ScreenLayout, SelectSourceScreen, SettingsMenu, SetupScreen, Spinner, StepList, SwypeLoadingScreen, SwypePayment, SwypeProvider, buildPasskeyPopupOptions, createPasskeyCredential, createPasskeyViaPopup, darkTheme, deviceHasPasskey, findDevicePasskey, findDevicePasskeyViaPopup, getTheme, lightTheme, resolvePasskeyRpId, api_exports as swypeApi, useAuthorizationExecutor, useSwypeConfig, useSwypeDepositAmount, useTransferPolling, useTransferSigning };
+export { AdvancedSourceScreen, CreatePasskeyScreen, IconCircle, InfoBanner, OutlineButton, PasskeyIframeBlockedError, PoweredByFooter, PrimaryButton, ScreenHeader, ScreenLayout, SelectSourceScreen, SettingsMenu, SetupScreen, Spinner, StepList, SwypeLoadingScreen, SwypePayment, SwypeProvider, TokenPickerScreen, buildPasskeyPopupOptions, createPasskeyCredential, createPasskeyViaPopup, darkTheme, deviceHasPasskey, findDevicePasskey, findDevicePasskeyViaPopup, getTheme, lightTheme, resolvePasskeyRpId, api_exports as swypeApi, useAuthorizationExecutor, useSwypeConfig, useSwypeDepositAmount, useTransferPolling, useTransferSigning };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map