@swype-org/react-sdk 0.1.112 → 0.1.114

package/dist/index.cjs

@@ -238,7 +238,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`,
     {
@@ -247,7 +250,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);
@@ -1929,6 +1932,7 @@ function createInitialState(config) {
     selectedProviderId: null,
     selectedAccountId: null,
     selectedWalletId: null,
+    selectedTokenSymbol: null,
     amount: config.depositAmount != null ? config.depositAmount.toString() : "",
     transfer: null,
     creatingTransfer: false,
@@ -2023,7 +2027,8 @@ function paymentReducer(state, action) {
         ...state,
         selectedProviderId: action.providerId,
         selectedAccountId: null,
-        selectedWalletId: null
+        selectedWalletId: null,
+        selectedTokenSymbol: null
       };
     case "SELECT_ACCOUNT":
       return {
@@ -2032,6 +2037,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 {
@@ -4205,7 +4217,8 @@ function DepositScreen({
   selectedAccountId,
   onSelectAccount,
   onAuthorizeAccount,
-  onAddProvider
+  onAddProvider,
+  onSelectToken
 }) {
   const { tokens } = useSwypeConfig();
   const amount = initialAmount;
@@ -4335,12 +4348,20 @@ function DepositScreen({
               ] })
             ] })
           ] }),
-          tokenCount > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: tokenBadgeStyle(tokens), children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { style: tokenDotStyle2(tokens.accent) }),
-            tokenCount,
-            " ",
-            /* @__PURE__ */ jsxRuntime.jsx("span", { style: chevronStyle2, children: ">" })
-          ] })
+          tokenCount > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: onSelectToken,
+              style: tokenBadgeButtonStyle2(tokens, !!onSelectToken),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { style: tokenDotStyle2(tokens.accent) }),
+                tokenCount,
+                " ",
+                /* @__PURE__ */ jsxRuntime.jsx("span", { style: chevronInlineStyle, children: ">" })
+              ]
+            }
+          )
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { style: detailsStyle, children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { style: detailRowStyle(tokens.textMuted), children: [
@@ -4398,7 +4419,7 @@ var balanceAmountStyle = {
   fontSize: "1rem",
   fontWeight: 700
 };
-var tokenBadgeStyle = (tokens) => ({
+var tokenBadgeButtonStyle2 = (tokens, clickable) => ({
   display: "flex",
   alignItems: "center",
   gap: 4,
@@ -4406,7 +4427,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,
@@ -4415,7 +4439,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,
@@ -5304,6 +5328,236 @@ var errorStyle2 = (color) => ({
   color: "#ef4444",
   margin: "8px 0 0"
 });
+function TokenPickerScreen({
+  account,
+  chains,
+  onSelectAuthorized,
+  onAuthorizeToken,
+  onBack
+}) {
+  const { tokens: themeTokens } = useSwypeConfig();
+  const [selectedIndex, setSelectedIndex] = react.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] = react.useState(
+    entries.length > 0 ? entries[0].chainName : null
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    ScreenLayout,
+    {
+      footer: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          PrimaryButton,
+          {
+            onClick: handleConfirm,
+            disabled: selected == null,
+            children: selected == null ? "Select a token" : isAuthorized ? "Select Source" : "Authorize Token"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(PoweredByFooter, {})
+      ] }),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { title: "Select Token", onBack }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { style: chainCardStyle2(themeTokens), children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => setExpandedChain((prev) => prev === chainName ? null : chainName),
+                style: chainHeaderStyle2(themeTokens),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: chainHeaderLeftStyle2, children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { style: chainNameStyle2(themeTokens.text), children: chainName }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("span", { style: chainBalanceStyle2(themeTokens.textMuted), children: [
+                      "$",
+                      chainTotal.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { style: chevronStyle2(themeTokens.textMuted), children: isExpanded ? "\u25BE" : "\u25B8" })
+                ]
+              }
+            ),
+            isExpanded && /* @__PURE__ */ jsxRuntime.jsx("div", { style: tokenListStyle2, children: chainEntries.map((entry) => {
+              const globalIdx = entries.indexOf(entry);
+              const isSelected = selectedIndex === globalIdx;
+              const authorized = entry.status === "AUTHORIZED";
+              return /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setSelectedIndex(globalIdx),
+                  style: tokenRowStyle2(themeTokens, isSelected),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: tokenInfoStyle2, children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: tokenHeaderRowStyle, children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { style: tokenSymbolStyle2(themeTokens.text), children: entry.tokenSymbol }),
+                        authorized ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: statusBadgeStyle(themeTokens.success), children: "Authorized" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { style: statusBadgeStyle(themeTokens.textMuted), children: "Not authorized" })
+                      ] }),
+                      /* @__PURE__ */ jsxRuntime.jsxs("span", { style: tokenBalStyle2(themeTokens.textMuted), children: [
+                        "$",
+                        entry.balance.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { style: radioStyle3(themeTokens, isSelected), children: isSelected && /* @__PURE__ */ jsxRuntime.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,
@@ -5483,7 +5737,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__ */ jsxRuntime.jsx(SwypeLoadingScreen, {});
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      TokenPickerScreen,
+      {
+        account: selectedAccount,
+        chains: state.chains,
+        onSelectAuthorized: handlers.onSelectAuthorizedToken,
+        onAuthorizeToken: handlers.onAuthorizeToken,
+        onBack: () => handlers.onNavigate("deposit")
       }
     );
   }
@@ -5682,6 +5952,7 @@ function SwypePaymentInner({
   const processingStartedAtRef = react.useRef(null);
   const initializedSelectSourceActionRef = react.useRef(null);
   const preSelectSourceStepRef = react.useRef(null);
+  const pendingTokenAuthRef = react.useRef(null);
   const checkingPasskeyRef = react.useRef(false);
   const onCompleteRef = react.useRef(onComplete);
   onCompleteRef.current = onComplete;
@@ -6109,6 +6380,84 @@ function SwypePaymentInner({
     reloadAccounts,
     onError
   ]);
+  const handleNavigateToTokenPicker = react.useCallback(() => {
+    dispatch({ type: "NAVIGATE", step: "token-picker" });
+  }, []);
+  const handleSelectAuthorizedToken = react.useCallback((walletId, tokenSymbol) => {
+    dispatch({ type: "SELECT_TOKEN", walletId, tokenSymbol });
+  }, []);
+  const handleAuthorizeToken = react.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 = react.useCallback(async () => {
     const t = state.transfer ?? polling.transfer;
     if (!t) return;
@@ -6698,6 +7047,21 @@ function SwypePaymentInner({
       preSelectSourceStepRef.current = null;
     }
   }, [pendingSelectSourceAction, state.step]);
+  react.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 = react.useMemo(() => ({
     onSendLoginCode: handleSendLoginCode,
     onVerifyLoginCode: handleVerifyLoginCode,
@@ -6727,7 +7091,10 @@ function SwypePaymentInner({
     onSelectSourceChainChange: handleSelectSourceChainChange,
     onSetSelectSourceTokenSymbol: setSelectSourceTokenSymbol,
     onConfirmSelectSource: handleConfirmSelectSource,
-    onSetupOneTap: handleSetupOneTap
+    onSetupOneTap: handleSetupOneTap,
+    onSelectToken: handleNavigateToTokenPicker,
+    onSelectAuthorizedToken: handleSelectAuthorizedToken,
+    onAuthorizeToken: handleAuthorizeToken
   }), [
     handleSendLoginCode,
     handleVerifyLoginCode,
@@ -6746,7 +7113,10 @@ function SwypePaymentInner({
     handleNewPayment,
     handleSelectSourceChainChange,
     handleConfirmSelectSource,
-    handleSetupOneTap
+    handleSetupOneTap,
+    handleNavigateToTokenPicker,
+    handleSelectAuthorizedToken,
+    handleAuthorizeToken
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     StepRenderer,
@@ -6802,6 +7172,7 @@ exports.StepList = StepList;
 exports.SwypeLoadingScreen = SwypeLoadingScreen;
 exports.SwypePayment = SwypePayment;
 exports.SwypeProvider = SwypeProvider;
+exports.TokenPickerScreen = TokenPickerScreen;
 exports.buildPasskeyPopupOptions = buildPasskeyPopupOptions;
 exports.createPasskeyCredential = createPasskeyCredential;
 exports.createPasskeyViaPopup = createPasskeyViaPopup;