@swype-org/react-sdk 0.1.112 → 0.1.114

package/dist/index.d.cts

@@ -26,6 +26,8 @@ interface WalletToken {
 /** A token source within a wallet (e.g. USDC on a specific chain) */
 interface WalletSource {
     id: string;
+    /** On-chain ERC-20 contract address (e.g. 0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913) */
+    address: string;
     token: WalletToken;
     balance: TokenBalance;
 }
@@ -78,6 +80,8 @@ interface AuthorizationSessionDetail {
     id: string;
     status: string;
     uri: string;
+    selectedTokenAddress?: string;
+    selectedChainId?: number;
     actions: AuthorizationAction[];
 }
 /** Monetary amount */
@@ -202,7 +206,7 @@ interface UserConfig {
 /** Theme mode */
 type ThemeMode = 'light' | 'dark';
 /** Steps in the payment flow */
-type PaymentStep = 'login' | 'otp-verify' | 'create-passkey' | 'verify-passkey' | 'wallet-picker' | 'open-wallet' | 'setup-status' | 'setup' | 'confirm-sign' | 'deposit' | 'low-balance' | 'processing' | 'select-source' | 'success';
+type PaymentStep = 'login' | 'otp-verify' | 'create-passkey' | 'verify-passkey' | 'wallet-picker' | 'open-wallet' | 'setup-status' | 'setup' | 'confirm-sign' | 'deposit' | 'low-balance' | 'processing' | 'select-source' | 'token-picker' | 'success';
 /** User-selected advanced settings for chain/asset override */
 interface AdvancedSettings {
     /** Override asset (e.g. 'USDC', 'USDT'). Null = let backend decide. */
@@ -310,7 +314,10 @@ interface CreateAccountParams {
     nickname?: string;
 }
 declare function createAccount(apiBaseUrl: string, token: string, params: CreateAccountParams): Promise<Account>;
-declare function createAccountAuthorizationSession(apiBaseUrl: string, token: string, accountId: string, credentialId: string): Promise<{
+declare function createAccountAuthorizationSession(apiBaseUrl: string, token: string, accountId: string, credentialId: string, options?: {
+    tokenAddress?: string;
+    chainId?: number;
+}): Promise<{
     id: string;
     status: string;
     uri: string;
@@ -775,4 +782,17 @@ interface AdvancedSourceScreenProps {
 }
 declare function AdvancedSourceScreen({ choices, selectedChainName, selectedTokenSymbol, onSelectSource, onBack, }: AdvancedSourceScreenProps): react_jsx_runtime.JSX.Element;
 
-export { type Account, type ActionExecutionResult, type AdvancedSettings, AdvancedSourceScreen, type Amount, type AuthorizationAction, type AuthorizationSession, type AuthorizationSessionDetail, type Chain, CreatePasskeyScreen, type Destination, type ErrorResponse, IconCircle, InfoBanner, type ListResponse, type MerchantAuthorization, type MerchantPublicKey, OutlineButton, PasskeyIframeBlockedError, type PaymentStep, PoweredByFooter, PrimaryButton, type Provider, ScreenHeader, ScreenLayout, SelectSourceScreen, SettingsMenu, SetupScreen, type SourceOption, type SourceSelection, type SourceType, Spinner, type StepItem, StepList, SwypeLoadingScreen, SwypePayment, type SwypePaymentProps, SwypeProvider, type SwypeProviderProps, type ThemeMode, type ThemeTokens, type TokenBalance, type Transfer, type TransferDestination, type UserConfig, type Wallet, type WalletSource, type WalletToken, buildPasskeyPopupOptions, createPasskeyCredential, createPasskeyViaPopup, darkTheme, deviceHasPasskey, findDevicePasskey, findDevicePasskeyViaPopup, getTheme, lightTheme, resolvePasskeyRpId, api as swypeApi, useAuthorizationExecutor, useSwypeConfig, useSwypeDepositAmount, useTransferPolling, useTransferSigning };
+interface TokenPickerScreenProps {
+    account: Account;
+    chains: Array<{
+        id: string;
+        name: string;
+        commonId: number | null;
+    }>;
+    onSelectAuthorized: (walletId: string, tokenSymbol: string) => void;
+    onAuthorizeToken: (walletId: string, tokenAddress: string, chainId: number, tokenSymbol: string) => void;
+    onBack: () => void;
+}
+declare function TokenPickerScreen({ account, chains, onSelectAuthorized, onAuthorizeToken, onBack, }: TokenPickerScreenProps): react_jsx_runtime.JSX.Element;
+
+export { type Account, type ActionExecutionResult, type AdvancedSettings, AdvancedSourceScreen, type Amount, type AuthorizationAction, type AuthorizationSession, type AuthorizationSessionDetail, type Chain, CreatePasskeyScreen, type Destination, type ErrorResponse, IconCircle, InfoBanner, type ListResponse, type MerchantAuthorization, type MerchantPublicKey, OutlineButton, PasskeyIframeBlockedError, type PaymentStep, PoweredByFooter, PrimaryButton, type Provider, ScreenHeader, ScreenLayout, SelectSourceScreen, SettingsMenu, SetupScreen, type SourceOption, type SourceSelection, type SourceType, Spinner, type StepItem, StepList, SwypeLoadingScreen, SwypePayment, type SwypePaymentProps, SwypeProvider, type SwypeProviderProps, type ThemeMode, type ThemeTokens, type TokenBalance, TokenPickerScreen, type Transfer, type TransferDestination, type UserConfig, type Wallet, type WalletSource, type WalletToken, buildPasskeyPopupOptions, createPasskeyCredential, createPasskeyViaPopup, darkTheme, deviceHasPasskey, findDevicePasskey, findDevicePasskeyViaPopup, getTheme, lightTheme, resolvePasskeyRpId, api as swypeApi, useAuthorizationExecutor, useSwypeConfig, useSwypeDepositAmount, useTransferPolling, useTransferSigning };

package/dist/index.d.ts

@@ -26,6 +26,8 @@ interface WalletToken {
 /** A token source within a wallet (e.g. USDC on a specific chain) */
 interface WalletSource {
     id: string;
+    /** On-chain ERC-20 contract address (e.g. 0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913) */
+    address: string;
     token: WalletToken;
     balance: TokenBalance;
 }
@@ -78,6 +80,8 @@ interface AuthorizationSessionDetail {
     id: string;
     status: string;
     uri: string;
+    selectedTokenAddress?: string;
+    selectedChainId?: number;
     actions: AuthorizationAction[];
 }
 /** Monetary amount */
@@ -202,7 +206,7 @@ interface UserConfig {
 /** Theme mode */
 type ThemeMode = 'light' | 'dark';
 /** Steps in the payment flow */
-type PaymentStep = 'login' | 'otp-verify' | 'create-passkey' | 'verify-passkey' | 'wallet-picker' | 'open-wallet' | 'setup-status' | 'setup' | 'confirm-sign' | 'deposit' | 'low-balance' | 'processing' | 'select-source' | 'success';
+type PaymentStep = 'login' | 'otp-verify' | 'create-passkey' | 'verify-passkey' | 'wallet-picker' | 'open-wallet' | 'setup-status' | 'setup' | 'confirm-sign' | 'deposit' | 'low-balance' | 'processing' | 'select-source' | 'token-picker' | 'success';
 /** User-selected advanced settings for chain/asset override */
 interface AdvancedSettings {
     /** Override asset (e.g. 'USDC', 'USDT'). Null = let backend decide. */
@@ -310,7 +314,10 @@ interface CreateAccountParams {
     nickname?: string;
 }
 declare function createAccount(apiBaseUrl: string, token: string, params: CreateAccountParams): Promise<Account>;
-declare function createAccountAuthorizationSession(apiBaseUrl: string, token: string, accountId: string, credentialId: string): Promise<{
+declare function createAccountAuthorizationSession(apiBaseUrl: string, token: string, accountId: string, credentialId: string, options?: {
+    tokenAddress?: string;
+    chainId?: number;
+}): Promise<{
     id: string;
     status: string;
     uri: string;
@@ -775,4 +782,17 @@ interface AdvancedSourceScreenProps {
 }
 declare function AdvancedSourceScreen({ choices, selectedChainName, selectedTokenSymbol, onSelectSource, onBack, }: AdvancedSourceScreenProps): react_jsx_runtime.JSX.Element;
 
-export { type Account, type ActionExecutionResult, type AdvancedSettings, AdvancedSourceScreen, type Amount, type AuthorizationAction, type AuthorizationSession, type AuthorizationSessionDetail, type Chain, CreatePasskeyScreen, type Destination, type ErrorResponse, IconCircle, InfoBanner, type ListResponse, type MerchantAuthorization, type MerchantPublicKey, OutlineButton, PasskeyIframeBlockedError, type PaymentStep, PoweredByFooter, PrimaryButton, type Provider, ScreenHeader, ScreenLayout, SelectSourceScreen, SettingsMenu, SetupScreen, type SourceOption, type SourceSelection, type SourceType, Spinner, type StepItem, StepList, SwypeLoadingScreen, SwypePayment, type SwypePaymentProps, SwypeProvider, type SwypeProviderProps, type ThemeMode, type ThemeTokens, type TokenBalance, type Transfer, type TransferDestination, type UserConfig, type Wallet, type WalletSource, type WalletToken, buildPasskeyPopupOptions, createPasskeyCredential, createPasskeyViaPopup, darkTheme, deviceHasPasskey, findDevicePasskey, findDevicePasskeyViaPopup, getTheme, lightTheme, resolvePasskeyRpId, api as swypeApi, useAuthorizationExecutor, useSwypeConfig, useSwypeDepositAmount, useTransferPolling, useTransferSigning };
+interface TokenPickerScreenProps {
+    account: Account;
+    chains: Array<{
+        id: string;
+        name: string;
+        commonId: number | null;
+    }>;
+    onSelectAuthorized: (walletId: string, tokenSymbol: string) => void;
+    onAuthorizeToken: (walletId: string, tokenAddress: string, chainId: number, tokenSymbol: string) => void;
+    onBack: () => void;
+}
+declare function TokenPickerScreen({ account, chains, onSelectAuthorized, onAuthorizeToken, onBack, }: TokenPickerScreenProps): react_jsx_runtime.JSX.Element;
+
+export { type Account, type ActionExecutionResult, type AdvancedSettings, AdvancedSourceScreen, type Amount, type AuthorizationAction, type AuthorizationSession, type AuthorizationSessionDetail, type Chain, CreatePasskeyScreen, type Destination, type ErrorResponse, IconCircle, InfoBanner, type ListResponse, type MerchantAuthorization, type MerchantPublicKey, OutlineButton, PasskeyIframeBlockedError, type PaymentStep, PoweredByFooter, PrimaryButton, type Provider, ScreenHeader, ScreenLayout, SelectSourceScreen, SettingsMenu, SetupScreen, type SourceOption, type SourceSelection, type SourceType, Spinner, type StepItem, StepList, SwypeLoadingScreen, SwypePayment, type SwypePaymentProps, SwypeProvider, type SwypeProviderProps, type ThemeMode, type ThemeTokens, type TokenBalance, TokenPickerScreen, type Transfer, type TransferDestination, type UserConfig, type Wallet, type WalletSource, type WalletToken, buildPasskeyPopupOptions, createPasskeyCredential, createPasskeyViaPopup, darkTheme, deviceHasPasskey, findDevicePasskey, findDevicePasskeyViaPopup, getTheme, lightTheme, resolvePasskeyRpId, api as swypeApi, useAuthorizationExecutor, useSwypeConfig, useSwypeDepositAmount, useTransferPolling, useTransferSigning };

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 {
@@ -4202,7 +4214,8 @@ function DepositScreen({
   selectedAccountId,
   onSelectAccount,
   onAuthorizeAccount,
-  onAddProvider
+  onAddProvider,
+  onSelectToken
 }) {
   const { tokens } = useSwypeConfig();
   const amount = initialAmount;
@@ -4332,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: [
@@ -4395,7 +4416,7 @@ var balanceAmountStyle = {
   fontSize: "1rem",
   fontWeight: 700
 };
-var tokenBadgeStyle = (tokens) => ({
+var tokenBadgeButtonStyle2 = (tokens, clickable) => ({
   display: "flex",
   alignItems: "center",
   gap: 4,
@@ -4403,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,
@@ -4412,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,
@@ -5301,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,
@@ -5480,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")
       }
     );
   }
@@ -5679,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;
@@ -6106,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;
@@ -6695,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,
@@ -6724,7 +7088,10 @@ function SwypePaymentInner({
     onSelectSourceChainChange: handleSelectSourceChainChange,
     onSetSelectSourceTokenSymbol: setSelectSourceTokenSymbol,
     onConfirmSelectSource: handleConfirmSelectSource,
-    onSetupOneTap: handleSetupOneTap
+    onSetupOneTap: handleSetupOneTap,
+    onSelectToken: handleNavigateToTokenPicker,
+    onSelectAuthorizedToken: handleSelectAuthorizedToken,
+    onAuthorizeToken: handleAuthorizeToken
   }), [
     handleSendLoginCode,
     handleVerifyLoginCode,
@@ -6743,7 +7110,10 @@ function SwypePaymentInner({
     handleNewPayment,
     handleSelectSourceChainChange,
     handleConfirmSelectSource,
-    handleSetupOneTap
+    handleSetupOneTap,
+    handleNavigateToTokenPicker,
+    handleSelectAuthorizedToken,
+    handleAuthorizeToken
   ]);
   return /* @__PURE__ */ jsx(
     StepRenderer,
@@ -6781,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