@swype-org/react-sdk 0.1.34 → 0.1.36

package/dist/index.d.cts

@@ -1,4 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
 
 /** Wallet provider (e.g. MetaMask) */
 interface Provider {
@@ -490,4 +491,95 @@ interface UseTransferSigningOptions {
  */
 declare function useTransferSigning(pollIntervalMs?: number, options?: UseTransferSigningOptions): UseTransferSigningResult;
 
-export { type Account, type ActionExecutionResult, type AdvancedSettings, type Amount, type AuthorizationAction, type AuthorizationSession, type AuthorizationSessionDetail, type Chain, type Destination, type ErrorResponse, type ListResponse, type MerchantAuthorization, type MerchantPublicKey, type PaymentStep, type Provider, type SourceOption, type SourceSelection, type SourceType, SwypePayment, type SwypePaymentProps, SwypeProvider, type SwypeProviderProps, type ThemeMode, type ThemeTokens, type TokenBalance, type Transfer, type TransferDestination, type UserConfig, type Wallet, type WalletSource, type WalletToken, createPasskeyCredential, darkTheme, deviceHasPasskey, findDevicePasskey, getTheme, lightTheme, api as swypeApi, useAuthorizationExecutor, useSwypeConfig, useSwypeDepositAmount, useTransferPolling, useTransferSigning };
+interface ScreenLayoutProps {
+    children: ReactNode;
+    /** Content pinned to the bottom of the screen (buttons, footer) */
+    footer?: ReactNode;
+}
+declare function ScreenLayout({ children, footer }: ScreenLayoutProps): react_jsx_runtime.JSX.Element;
+
+interface ScreenHeaderProps {
+    /** Center title text */
+    title?: string;
+    /** Right-aligned element (avatar, close button, etc.) */
+    right?: ReactNode;
+    /** Called when back arrow is pressed. Omit to hide the back arrow. */
+    onBack?: () => void;
+    /** Optional secondary label next to the title (e.g. "Simple") */
+    badge?: string;
+}
+declare function ScreenHeader({ title, right, onBack, badge }: ScreenHeaderProps): react_jsx_runtime.JSX.Element;
+
+declare function PoweredByFooter(): react_jsx_runtime.JSX.Element;
+
+interface PrimaryButtonProps {
+    children: ReactNode;
+    onClick?: () => void;
+    disabled?: boolean;
+    loading?: boolean;
+    /** Optional icon element rendered left of the label */
+    icon?: ReactNode;
+}
+declare function PrimaryButton({ children, onClick, disabled, loading, icon }: PrimaryButtonProps): react_jsx_runtime.JSX.Element;
+
+interface OutlineButtonProps {
+    children: ReactNode;
+    onClick?: () => void;
+    disabled?: boolean;
+}
+declare function OutlineButton({ children, onClick, disabled }: OutlineButtonProps): react_jsx_runtime.JSX.Element;
+
+type IconCircleVariant = 'accent' | 'success' | 'error';
+interface IconCircleProps {
+    children: ReactNode;
+    variant?: IconCircleVariant;
+    size?: number;
+}
+declare function IconCircle({ children, variant, size }: IconCircleProps): react_jsx_runtime.JSX.Element;
+
+interface StepItem {
+    label: string;
+    /** Optional sublabel (e.g. "$100 limit · 2 tokens approved") */
+    detail?: string;
+    status: 'pending' | 'active' | 'complete';
+}
+interface StepListProps {
+    steps: StepItem[];
+}
+declare function StepList({ steps }: StepListProps): react_jsx_runtime.JSX.Element;
+
+interface SettingsMenuProps {
+    onLogout: () => void;
+}
+declare function SettingsMenu({ onLogout }: SettingsMenuProps): react_jsx_runtime.JSX.Element;
+
+interface SpinnerProps {
+    size?: number;
+    label?: string;
+}
+declare function Spinner({ size, label }: SpinnerProps): react_jsx_runtime.JSX.Element;
+
+interface ChainChoice {
+    chainName: string;
+    balance: number;
+    tokens: {
+        tokenSymbol: string;
+        balance: number;
+    }[];
+}
+interface SelectSourceScreenProps {
+    choices: ChainChoice[];
+    selectedChainName: string;
+    selectedTokenSymbol: string;
+    recommended: {
+        chainName: string;
+        tokenSymbol: string;
+    } | null;
+    onChainChange: (chainName: string) => void;
+    onTokenChange: (tokenSymbol: string) => void;
+    onConfirm: () => void;
+    onLogout: () => void;
+}
+declare function SelectSourceScreen({ choices, selectedChainName, selectedTokenSymbol, recommended, onChainChange, onTokenChange, onConfirm, onLogout, }: SelectSourceScreenProps): react_jsx_runtime.JSX.Element;
+
+export { type Account, type ActionExecutionResult, type AdvancedSettings, type Amount, type AuthorizationAction, type AuthorizationSession, type AuthorizationSessionDetail, type Chain, type Destination, type ErrorResponse, IconCircle, type ListResponse, type MerchantAuthorization, type MerchantPublicKey, OutlineButton, type PaymentStep, PoweredByFooter, PrimaryButton, type Provider, ScreenHeader, ScreenLayout, SelectSourceScreen, SettingsMenu, type SourceOption, type SourceSelection, type SourceType, Spinner, type StepItem, StepList, SwypePayment, type SwypePaymentProps, SwypeProvider, type SwypeProviderProps, type ThemeMode, type ThemeTokens, type TokenBalance, type Transfer, type TransferDestination, type UserConfig, type Wallet, type WalletSource, type WalletToken, createPasskeyCredential, darkTheme, deviceHasPasskey, findDevicePasskey, getTheme, lightTheme, api as swypeApi, useAuthorizationExecutor, useSwypeConfig, useSwypeDepositAmount, useTransferPolling, useTransferSigning };

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
 
 /** Wallet provider (e.g. MetaMask) */
 interface Provider {
@@ -490,4 +491,95 @@ interface UseTransferSigningOptions {
  */
 declare function useTransferSigning(pollIntervalMs?: number, options?: UseTransferSigningOptions): UseTransferSigningResult;
 
-export { type Account, type ActionExecutionResult, type AdvancedSettings, type Amount, type AuthorizationAction, type AuthorizationSession, type AuthorizationSessionDetail, type Chain, type Destination, type ErrorResponse, type ListResponse, type MerchantAuthorization, type MerchantPublicKey, type PaymentStep, type Provider, type SourceOption, type SourceSelection, type SourceType, SwypePayment, type SwypePaymentProps, SwypeProvider, type SwypeProviderProps, type ThemeMode, type ThemeTokens, type TokenBalance, type Transfer, type TransferDestination, type UserConfig, type Wallet, type WalletSource, type WalletToken, createPasskeyCredential, darkTheme, deviceHasPasskey, findDevicePasskey, getTheme, lightTheme, api as swypeApi, useAuthorizationExecutor, useSwypeConfig, useSwypeDepositAmount, useTransferPolling, useTransferSigning };
+interface ScreenLayoutProps {
+    children: ReactNode;
+    /** Content pinned to the bottom of the screen (buttons, footer) */
+    footer?: ReactNode;
+}
+declare function ScreenLayout({ children, footer }: ScreenLayoutProps): react_jsx_runtime.JSX.Element;
+
+interface ScreenHeaderProps {
+    /** Center title text */
+    title?: string;
+    /** Right-aligned element (avatar, close button, etc.) */
+    right?: ReactNode;
+    /** Called when back arrow is pressed. Omit to hide the back arrow. */
+    onBack?: () => void;
+    /** Optional secondary label next to the title (e.g. "Simple") */
+    badge?: string;
+}
+declare function ScreenHeader({ title, right, onBack, badge }: ScreenHeaderProps): react_jsx_runtime.JSX.Element;
+
+declare function PoweredByFooter(): react_jsx_runtime.JSX.Element;
+
+interface PrimaryButtonProps {
+    children: ReactNode;
+    onClick?: () => void;
+    disabled?: boolean;
+    loading?: boolean;
+    /** Optional icon element rendered left of the label */
+    icon?: ReactNode;
+}
+declare function PrimaryButton({ children, onClick, disabled, loading, icon }: PrimaryButtonProps): react_jsx_runtime.JSX.Element;
+
+interface OutlineButtonProps {
+    children: ReactNode;
+    onClick?: () => void;
+    disabled?: boolean;
+}
+declare function OutlineButton({ children, onClick, disabled }: OutlineButtonProps): react_jsx_runtime.JSX.Element;
+
+type IconCircleVariant = 'accent' | 'success' | 'error';
+interface IconCircleProps {
+    children: ReactNode;
+    variant?: IconCircleVariant;
+    size?: number;
+}
+declare function IconCircle({ children, variant, size }: IconCircleProps): react_jsx_runtime.JSX.Element;
+
+interface StepItem {
+    label: string;
+    /** Optional sublabel (e.g. "$100 limit · 2 tokens approved") */
+    detail?: string;
+    status: 'pending' | 'active' | 'complete';
+}
+interface StepListProps {
+    steps: StepItem[];
+}
+declare function StepList({ steps }: StepListProps): react_jsx_runtime.JSX.Element;
+
+interface SettingsMenuProps {
+    onLogout: () => void;
+}
+declare function SettingsMenu({ onLogout }: SettingsMenuProps): react_jsx_runtime.JSX.Element;
+
+interface SpinnerProps {
+    size?: number;
+    label?: string;
+}
+declare function Spinner({ size, label }: SpinnerProps): react_jsx_runtime.JSX.Element;
+
+interface ChainChoice {
+    chainName: string;
+    balance: number;
+    tokens: {
+        tokenSymbol: string;
+        balance: number;
+    }[];
+}
+interface SelectSourceScreenProps {
+    choices: ChainChoice[];
+    selectedChainName: string;
+    selectedTokenSymbol: string;
+    recommended: {
+        chainName: string;
+        tokenSymbol: string;
+    } | null;
+    onChainChange: (chainName: string) => void;
+    onTokenChange: (tokenSymbol: string) => void;
+    onConfirm: () => void;
+    onLogout: () => void;
+}
+declare function SelectSourceScreen({ choices, selectedChainName, selectedTokenSymbol, recommended, onChainChange, onTokenChange, onConfirm, onLogout, }: SelectSourceScreenProps): react_jsx_runtime.JSX.Element;
+
+export { type Account, type ActionExecutionResult, type AdvancedSettings, type Amount, type AuthorizationAction, type AuthorizationSession, type AuthorizationSessionDetail, type Chain, type Destination, type ErrorResponse, IconCircle, type ListResponse, type MerchantAuthorization, type MerchantPublicKey, OutlineButton, type PaymentStep, PoweredByFooter, PrimaryButton, type Provider, ScreenHeader, ScreenLayout, SelectSourceScreen, SettingsMenu, type SourceOption, type SourceSelection, type SourceType, Spinner, type StepItem, StepList, SwypePayment, type SwypePaymentProps, SwypeProvider, type SwypeProviderProps, type ThemeMode, type ThemeTokens, type TokenBalance, type Transfer, type TransferDestination, type UserConfig, type Wallet, type WalletSource, type WalletToken, createPasskeyCredential, darkTheme, deviceHasPasskey, findDevicePasskey, getTheme, lightTheme, api as swypeApi, useAuthorizationExecutor, useSwypeConfig, useSwypeDepositAmount, useTransferPolling, useTransferSigning };

package/dist/index.js

@@ -2,6 +2,7 @@ import { createContext, useRef, useState, useCallback, useMemo, useContext, useE
 import { PrivyProvider, usePrivy, useLoginWithEmail, useLoginWithSms, useLoginWithOAuth } from '@privy-io/react-auth';
 import { createConfig, http, WagmiProvider, useConfig, useConnect, useSwitchChain } from 'wagmi';
 import { mainnet, arbitrum, base } from 'wagmi/chains';
+import { injected } from 'wagmi/connectors';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { recoverTypedDataAddress, decodeAbiParameters, walletActions, createClient, custom } from 'viem';
@@ -74,6 +75,7 @@ function getTheme(mode) {
 var SWYPE_PRIVY_APP_ID = "cmlil87uv004n0ck0blwumwek";
 var wagmiConfig = createConfig({
   chains: [mainnet, arbitrum, base],
+  connectors: [injected()],
   transports: {
     [mainnet.id]: http(),
     [arbitrum.id]: http(),
@@ -2560,13 +2562,20 @@ var WALLET_EMOJIS = {
   ora: "\u2666\uFE0F",
   phantom: "\u{1F47B}"
 };
+function truncateAddress(address) {
+  if (address.length <= 10) return address;
+  return `${address.slice(0, 6)}...${address.slice(-4)}`;
+}
 function WalletPickerScreen({
   providers,
+  pendingConnections,
   onSelectProvider,
+  onContinueConnection,
   onBack
 }) {
   const { tokens } = useSwypeConfig();
   const [hoveredId, setHoveredId] = useState(null);
+  const hasPending = pendingConnections != null && pendingConnections.length > 0;
   const displayProviders = providers.length > 0 ? providers : [
     { id: "metamask", name: "MetaMask" },
     { id: "rabby", name: "Rabby" },
@@ -2582,8 +2591,44 @@ function WalletPickerScreen({
       ] }),
       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" }),
+        hasPending && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("h2", { style: headingStyle4(tokens.text), children: "Continue where you left off" }),
+          /* @__PURE__ */ jsx("p", { style: subtitleStyle4(tokens.textSecondary), children: "You have a wallet that still needs setup" }),
+          /* @__PURE__ */ jsx("div", { style: pendingListStyle, children: pendingConnections.map((acct) => {
+            const wallet = acct.wallets[0];
+            const address = wallet ? truncateAddress(wallet.name) : void 0;
+            const isHovered = hoveredId === `pending-${acct.id}`;
+            return /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: () => onContinueConnection?.(acct.id),
+                onMouseEnter: () => setHoveredId(`pending-${acct.id}`),
+                onMouseLeave: () => setHoveredId(null),
+                style: pendingCardStyle(tokens, isHovered),
+                children: [
+                  /* @__PURE__ */ jsxs("div", { style: pendingCardContentStyle, children: [
+                    /* @__PURE__ */ jsx("div", { style: pendingIconStyle, children: /* @__PURE__ */ jsx("span", { style: emojiStyle, children: WALLET_EMOJIS[acct.name.toLowerCase()] ?? acct.name.charAt(0) }) }),
+                    /* @__PURE__ */ jsxs("div", { style: pendingInfoStyle, children: [
+                      /* @__PURE__ */ jsx("span", { style: pendingNameStyle(tokens.text), children: acct.name }),
+                      address && /* @__PURE__ */ jsx("span", { style: pendingAddressStyle(tokens.textMuted), children: address })
+                    ] }),
+                    /* @__PURE__ */ jsx("span", { style: pendingBadgeStyle(tokens), children: "Setup incomplete" })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { style: continueRowStyle(tokens), children: [
+                    "Continue setup",
+                    /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z", fill: "currentColor" }) })
+                  ] })
+                ]
+              },
+              acct.id
+            );
+          }) }),
+          /* @__PURE__ */ jsx("div", { style: dividerStyle2(tokens.border), children: /* @__PURE__ */ jsx("span", { style: dividerTextStyle(tokens.textMuted), children: "Or connect a new wallet" }) })
+        ] }),
+        !hasPending && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__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);
@@ -2687,6 +2732,86 @@ var hintStyle2 = (color) => ({
   color,
   margin: "0 0 4px"
 });
+var pendingListStyle = {
+  display: "flex",
+  flexDirection: "column",
+  gap: 10,
+  marginBottom: 20
+};
+var pendingCardStyle = (tokens, hovered) => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: 0,
+  padding: 0,
+  background: hovered ? tokens.bgHover : tokens.bgInput,
+  border: `1.5px solid ${tokens.warning}44`,
+  borderRadius: 16,
+  cursor: "pointer",
+  fontFamily: "inherit",
+  transition: "background 0.15s ease",
+  outline: "none",
+  overflow: "hidden",
+  textAlign: "left"
+});
+var pendingCardContentStyle = {
+  display: "flex",
+  alignItems: "center",
+  gap: 12,
+  padding: "14px 16px"
+};
+var pendingIconStyle = {
+  flexShrink: 0
+};
+var pendingInfoStyle = {
+  display: "flex",
+  flexDirection: "column",
+  gap: 2,
+  flex: 1,
+  minWidth: 0
+};
+var pendingNameStyle = (color) => ({
+  fontSize: "0.92rem",
+  fontWeight: 600,
+  color
+});
+var pendingAddressStyle = (color) => ({
+  fontSize: "0.78rem",
+  color,
+  fontFamily: "monospace"
+});
+var pendingBadgeStyle = (tokens) => ({
+  fontSize: "0.72rem",
+  fontWeight: 600,
+  color: tokens.warningText ?? tokens.warning,
+  background: tokens.warningBg ?? `${tokens.warning}1a`,
+  padding: "3px 8px",
+  borderRadius: 6,
+  whiteSpace: "nowrap",
+  flexShrink: 0
+});
+var continueRowStyle = (tokens) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: 4,
+  padding: "10px 16px",
+  fontSize: "0.84rem",
+  fontWeight: 600,
+  color: tokens.accent,
+  background: `${tokens.accent}0d`,
+  borderTop: `1px solid ${tokens.accent}22`
+});
+var dividerStyle2 = (borderColor) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: 12,
+  margin: "4px 0 16px"
+});
+var dividerTextStyle = (color) => ({
+  fontSize: "0.82rem",
+  color,
+  whiteSpace: "nowrap"
+});
 var DEFAULT_MAX = 500;
 var ABSOLUTE_MIN = 1;
 function buildTicks(min, max) {
@@ -3774,17 +3899,36 @@ function SwypePayment({
   const [setupComplete, setSetupComplete] = useState(false);
   const [setupStepLabel, setSetupStepLabel] = useState(void 0);
   const [mobileFlow, setMobileFlow] = useState(false);
+  const [mobileSetupFlow, setMobileSetupFlow] = useState(false);
   const pollingTransferIdRef = useRef(null);
   const mobileSigningTransferIdRef = useRef(null);
   const processingStartedAtRef = useRef(null);
   const [selectSourceChainName, setSelectSourceChainName] = useState("");
   const [selectSourceTokenSymbol, setSelectSourceTokenSymbol] = useState("");
   const initializedSelectSourceActionRef = useRef(null);
+  const preSelectSourceStepRef = useRef(null);
   const authExecutor = useAuthorizationExecutor();
   const polling = useTransferPolling();
   const transferSigning = useTransferSigning();
   const sourceType = connectingNewAccount ? "providerId" : selectedWalletId ? "walletId" : selectedAccountId ? "accountId" : "providerId";
   const sourceId = connectingNewAccount ? selectedProviderId ?? "" : selectedWalletId ? selectedWalletId : selectedAccountId ? selectedAccountId : selectedProviderId ?? "";
+  const reloadAccounts = useCallback(async () => {
+    const token = await getAccessToken();
+    if (!token || !activeCredentialId) return;
+    const [accts, prov] = await Promise.all([
+      fetchAccounts(apiBaseUrl, token, activeCredentialId),
+      fetchProviders(apiBaseUrl, token)
+    ]);
+    setAccounts(accts);
+    setProviders(prov);
+    const parsedAmt = depositAmount != null ? depositAmount : 0;
+    const defaults = computeSmartDefaults(accts, parsedAmt);
+    if (defaults) {
+      setSelectedAccountId(defaults.accountId);
+      setSelectedWalletId(defaults.walletId);
+      setConnectingNewAccount(false);
+    }
+  }, [getAccessToken, activeCredentialId, apiBaseUrl, depositAmount]);
   useEffect(() => {
     if (depositAmount != null) {
       setAmount(depositAmount.toString());
@@ -3795,7 +3939,7 @@ function SwypePayment({
     setVerificationTarget(null);
     setOtpCode("");
   }, []);
-  const handleSocialLogin = useCallback(async (provider) => {
+  useCallback(async (provider) => {
     setError(null);
     try {
       await initOAuth({ provider });
@@ -3934,7 +4078,10 @@ function SwypePayment({
         } else if (prov.length > 0) {
           setSelectedProviderId(prov[0].id);
         }
-        if (accts.length === 0 && step === "deposit") {
+        const hasActiveWallet = accts.some(
+          (a) => a.wallets.some((w) => w.status === "ACTIVE")
+        );
+        if ((accts.length === 0 || !hasActiveWallet) && step === "deposit") {
           setStep("wallet-picker");
         }
       } catch (err) {
@@ -3993,7 +4140,24 @@ function SwypePayment({
     return () => window.clearTimeout(timeoutId);
   }, [step, polling.transfer, transfer, polling.stopPolling, onError]);
   useEffect(() => {
-    if (!mobileFlow) return;
+    if (!mobileSetupFlow) return;
+    const polledTransfer = polling.transfer;
+    if (!polledTransfer) return;
+    if (polledTransfer.status !== "AUTHORIZED" && polledTransfer.status !== "COMPLETED") return;
+    polling.stopPolling();
+    setMobileFlow(false);
+    setMobileSetupFlow(false);
+    const finishSetup = async () => {
+      try {
+        await reloadAccounts();
+      } catch {
+      }
+      setStep("deposit");
+    };
+    void finishSetup();
+  }, [mobileSetupFlow, polling, reloadAccounts]);
+  useEffect(() => {
+    if (!mobileFlow || mobileSetupFlow) return;
     const polledTransfer = polling.transfer;
     if (!polledTransfer || polledTransfer.status !== "AUTHORIZED") return;
     if (transferSigning.signing) return;
@@ -4011,7 +4175,7 @@ function SwypePayment({
       }
     };
     void sign();
-  }, [mobileFlow, polling.transfer, transferSigning, onError]);
+  }, [mobileFlow, mobileSetupFlow, polling.transfer, transferSigning, onError]);
   useEffect(() => {
     if (!mobileFlow) return;
     const transferIdToResume = pollingTransferIdRef.current ?? transfer?.id;
@@ -4059,12 +4223,30 @@ function SwypePayment({
     initializedSelectSourceActionRef.current = pendingSelectSourceAction.id;
   }, [pendingSelectSourceAction, selectSourceChoices, selectSourceRecommended]);
   useEffect(() => {
-    if (pendingSelectSourceAction && step === "processing") {
+    if (pendingSelectSourceAction && (step === "processing" || step === "setup-status")) {
+      preSelectSourceStepRef.current = step;
       setStep("select-source");
     } else if (!pendingSelectSourceAction && step === "select-source") {
-      setStep("processing");
+      setStep(preSelectSourceStepRef.current ?? "processing");
+      preSelectSourceStepRef.current = null;
     }
   }, [pendingSelectSourceAction, step]);
+  const SETUP_ACTION_LABELS = useMemo(() => ({
+    OPEN_PROVIDER: "Connecting wallet",
+    SELECT_SOURCE: "Selecting source",
+    SWITCH_CHAIN: "Switching network",
+    APPROVE_PERMIT2: "Approving tokens",
+    SIGN_PERMIT2: "Signing permit",
+    DEPLOY_SMART_ACCOUNT: "Setting up account",
+    CREATE_SMART_ACCOUNT: "Creating account"
+  }), []);
+  useEffect(() => {
+    if (step !== "setup-status") return;
+    const actionType = authExecutor.currentAction?.type;
+    if (!actionType) return;
+    const label = SETUP_ACTION_LABELS[actionType];
+    if (label) setSetupStepLabel(label);
+  }, [step, authExecutor.currentAction, SETUP_ACTION_LABELS]);
   const handleSelectSourceChainChange = useCallback(
     (chainName) => {
       setSelectSourceChainName(chainName);
@@ -4078,6 +4260,12 @@ function SwypePayment({
     },
     [selectSourceChoices, selectSourceRecommended]
   );
+  const pendingConnections = useMemo(
+    () => accounts.filter(
+      (a) => a.wallets.length > 0 && !a.wallets.some((w) => w.status === "ACTIVE")
+    ),
+    [accounts]
+  );
   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";
@@ -4221,7 +4409,10 @@ function SwypePayment({
       await registerPasskey(apiBaseUrl, token, credentialId, publicKey);
       setActiveCredentialId(credentialId);
       window.localStorage.setItem(ACTIVE_CREDENTIAL_STORAGE_KEY, credentialId);
-      if (accounts.length === 0) {
+      const hasActiveWallet = accounts.some(
+        (a) => a.wallets.some((w) => w.status === "ACTIVE")
+      );
+      if (accounts.length === 0 || !hasActiveWallet) {
         setStep("wallet-picker");
       } else {
         setStep("deposit");
@@ -4231,19 +4422,22 @@ function SwypePayment({
     } finally {
       setRegisteringPasskey(false);
     }
-  }, [getAccessToken, user, apiBaseUrl, accounts.length]);
+  }, [getAccessToken, user, apiBaseUrl, accounts]);
   const handleSkipPasskey = useCallback(() => {
-    if (accounts.length === 0) {
+    const hasActiveWallet = accounts.some(
+      (a) => a.wallets.some((w) => w.status === "ACTIVE")
+    );
+    if (accounts.length === 0 || !hasActiveWallet) {
       setStep("wallet-picker");
     } else {
       setStep("deposit");
     }
-  }, [accounts.length]);
+  }, [accounts]);
   const handleSetupOneTap = useCallback(async (limit) => {
     setOneTapLimit(limit);
     setStep("setup-status");
     setSetupComplete(false);
-    setSetupStepLabel("Approving tokens");
+    setSetupStepLabel("Preparing");
     setError(null);
     try {
       const token = await getAccessToken();
@@ -4251,6 +4445,7 @@ function SwypePayment({
       if (!sourceId) {
         throw new Error("No wallet selected for setup.");
       }
+      await updateUserConfig(apiBaseUrl, token, { defaultAllowance: limit });
       const setupAmount = depositAmount ?? MIN_SEND_AMOUNT_USD;
       const t = await createTransfer(apiBaseUrl, token, {
         id: idempotencyKey,
@@ -4268,11 +4463,16 @@ function SwypePayment({
         });
         if (!shouldUseConnector) {
           setMobileFlow(true);
+          setMobileSetupFlow(true);
+          pollingTransferIdRef.current = t.id;
+          polling.startPolling(t.id);
           window.location.href = t.authorizationSessions[0].uri;
+          return;
         } else {
           await authExecutor.executeSession(t);
         }
       }
+      await reloadAccounts();
       setSetupStepLabel(void 0);
       setSetupComplete(true);
     } catch (err) {
@@ -4291,8 +4491,10 @@ function SwypePayment({
     merchantAuthorization,
     useWalletConnector,
     authExecutor,
+    polling,
     onError,
-    depositAmount
+    depositAmount,
+    reloadAccounts
   ]);
   const handleSelectProvider = useCallback((providerId) => {
     setSelectedProviderId(providerId);
@@ -4300,12 +4502,23 @@ function SwypePayment({
     setConnectingNewAccount(true);
     setStep("setup");
   }, []);
+  const handleContinueConnection = useCallback(
+    (accountId) => {
+      const acct = accounts.find((a) => a.id === accountId);
+      setSelectedAccountId(accountId);
+      setSelectedWalletId(acct?.wallets[0]?.id ?? null);
+      setConnectingNewAccount(false);
+      setStep("setup");
+    },
+    [accounts]
+  );
   const handleNewPayment = useCallback(() => {
     setStep("deposit");
     setTransfer(null);
     setError(null);
     setAmount(depositAmount != null ? depositAmount.toString() : "");
     setMobileFlow(false);
+    setMobileSetupFlow(false);
     processingStartedAtRef.current = null;
     pollingTransferIdRef.current = null;
     mobileSigningTransferIdRef.current = null;
@@ -4338,6 +4551,7 @@ function SwypePayment({
     setConnectingNewAccount(false);
     setAmount(depositAmount != null ? depositAmount.toString() : "");
     setMobileFlow(false);
+    setMobileSetupFlow(false);
     setSetupComplete(false);
     resetHeadlessLogin();
   }, [logout, polling, depositAmount, resetHeadlessLogin]);
@@ -4354,8 +4568,7 @@ function SwypePayment({
         sending: activeOtpStatus === "sending-code",
         error,
         onBack,
-        merchantInitials: merchantName ? merchantName.slice(0, 2).toUpperCase() : void 0,
-        onSocialLogin: handleSocialLogin
+        merchantInitials: merchantName ? merchantName.slice(0, 2).toUpperCase() : void 0
       }
     );
   }
@@ -4402,7 +4615,9 @@ function SwypePayment({
       WalletPickerScreen,
       {
         providers,
+        pendingConnections,
         onSelectProvider: handleSelectProvider,
+        onContinueConnection: handleContinueConnection,
         onBack: () => setStep("create-passkey")
       }
     );
@@ -4541,6 +4756,6 @@ function SwypePayment({
   return null;
 }
 
-export { SwypePayment, SwypeProvider, createPasskeyCredential, darkTheme, deviceHasPasskey, findDevicePasskey, getTheme, lightTheme, api_exports as swypeApi, useAuthorizationExecutor, useSwypeConfig, useSwypeDepositAmount, useTransferPolling, useTransferSigning };
+export { IconCircle, OutlineButton, PoweredByFooter, PrimaryButton, ScreenHeader, ScreenLayout, SelectSourceScreen, SettingsMenu, Spinner, StepList, SwypePayment, SwypeProvider, createPasskeyCredential, darkTheme, deviceHasPasskey, findDevicePasskey, getTheme, lightTheme, api_exports as swypeApi, useAuthorizationExecutor, useSwypeConfig, useSwypeDepositAmount, useTransferPolling, useTransferSigning };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map