@swype-org/react-sdk 0.1.88 → 0.1.90

package/dist/index.js

@@ -1,4 +1,4 @@
-import { createContext, useRef, useState, useCallback, useMemo, useContext, useEffect, Component } from 'react';
+import { createContext, useRef, useState, useCallback, useMemo, useContext, useEffect, useReducer, Component } from 'react';
 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';
@@ -1580,43 +1580,6 @@ function useTransferSigning(pollIntervalMs = 2e3, options) {
   );
   return { signing, signPayload, error, signTransfer: signTransfer2 };
 }
-function Spinner({ size = 40, label }) {
-  const { tokens } = useSwypeConfig();
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        gap: "12px"
-      },
-      children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              width: size,
-              height: size,
-              border: `4px solid ${tokens.bgInput}`,
-              borderTopColor: tokens.accent,
-              borderRightColor: tokens.accent + "66",
-              borderRadius: "50%",
-              boxShadow: "inset 0 0 0 1px rgba(255,255,255,0.1)",
-              animation: "swype-spin 0.9s linear infinite"
-            }
-          }
-        ),
-        label && /* @__PURE__ */ jsx("p", { style: { color: tokens.textSecondary, fontSize: "0.875rem", margin: 0 }, children: label }),
-        /* @__PURE__ */ jsx("style", { children: `
-        @keyframes swype-spin {
-          to { transform: rotate(360deg); }
-        }
-      ` })
-      ]
-    }
-  );
-}
 
 // src/auth.ts
 var EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
@@ -1778,6 +1741,426 @@ function resolveDataLoadAction({
   }
   return "load";
 }
+
+// src/paymentHelpers.ts
+var ACTIVE_CREDENTIAL_STORAGE_KEY = "swype_active_credential_id";
+var MOBILE_FLOW_STORAGE_KEY = "swype_mobile_flow";
+var MIN_SEND_AMOUNT_USD = 0.25;
+function persistMobileFlowState(data) {
+  try {
+    sessionStorage.setItem(MOBILE_FLOW_STORAGE_KEY, JSON.stringify(data));
+  } catch {
+  }
+}
+function loadMobileFlowState() {
+  try {
+    const raw = sessionStorage.getItem(MOBILE_FLOW_STORAGE_KEY);
+    if (!raw) return null;
+    return JSON.parse(raw);
+  } catch {
+    return null;
+  }
+}
+function clearMobileFlowState() {
+  try {
+    sessionStorage.removeItem(MOBILE_FLOW_STORAGE_KEY);
+  } catch {
+  }
+}
+function computeSmartDefaults(accts, transferAmount) {
+  if (accts.length === 0) return null;
+  for (const acct of accts) {
+    for (const wallet of acct.wallets) {
+      if (wallet.status === "ACTIVE") {
+        const bestSource = wallet.sources.find(
+          (s) => s.balance.available.amount >= transferAmount
+        );
+        if (bestSource) {
+          return { accountId: acct.id, walletId: wallet.id };
+        }
+      }
+    }
+  }
+  let bestAccount = null;
+  let bestWallet = null;
+  let bestBalance = -1;
+  let bestIsActive = false;
+  for (const acct of accts) {
+    for (const wallet of acct.wallets) {
+      const walletBal = wallet.balance.available.amount;
+      const isActive = wallet.status === "ACTIVE";
+      if (walletBal > bestBalance || walletBal === bestBalance && isActive && !bestIsActive) {
+        bestBalance = walletBal;
+        bestAccount = acct;
+        bestWallet = wallet;
+        bestIsActive = isActive;
+      }
+    }
+  }
+  if (bestAccount) {
+    return {
+      accountId: bestAccount.id,
+      walletId: bestWallet?.id ?? null
+    };
+  }
+  return { accountId: accts[0].id, walletId: null };
+}
+function parseRawBalance(rawBalance, decimals) {
+  const parsed = Number(rawBalance);
+  if (!Number.isFinite(parsed)) return 0;
+  return parsed / 10 ** decimals;
+}
+function buildSelectSourceChoices(options) {
+  const chainChoices = [];
+  const chainIndexByName = /* @__PURE__ */ new Map();
+  for (const option of options) {
+    const { chainName, tokenSymbol } = option;
+    const balance = parseRawBalance(option.rawBalance, option.decimals);
+    let chainChoice;
+    const existingIdx = chainIndexByName.get(chainName);
+    if (existingIdx === void 0) {
+      chainChoice = { chainName, balance: 0, tokens: [] };
+      chainIndexByName.set(chainName, chainChoices.length);
+      chainChoices.push(chainChoice);
+    } else {
+      chainChoice = chainChoices[existingIdx];
+    }
+    chainChoice.balance += balance;
+    const existing = chainChoice.tokens.find((t) => t.tokenSymbol === tokenSymbol);
+    if (existing) {
+      existing.balance += balance;
+    } else {
+      chainChoice.tokens.push({ tokenSymbol, balance });
+    }
+  }
+  return chainChoices;
+}
+
+// src/paymentReducer.ts
+function deriveSourceTypeAndId(state) {
+  if (state.connectingNewAccount) {
+    return { sourceType: "providerId", sourceId: state.selectedProviderId ?? "" };
+  }
+  if (state.selectedWalletId) {
+    return { sourceType: "walletId", sourceId: state.selectedWalletId };
+  }
+  if (state.selectedAccountId) {
+    return { sourceType: "accountId", sourceId: state.selectedAccountId };
+  }
+  return { sourceType: "providerId", sourceId: state.selectedProviderId ?? "" };
+}
+function createInitialState(config) {
+  return {
+    step: "login",
+    error: null,
+    providers: [],
+    accounts: [],
+    chains: [],
+    loadingData: false,
+    selectedAccountId: null,
+    selectedWalletId: null,
+    selectedProviderId: null,
+    connectingNewAccount: false,
+    amount: config.depositAmount != null ? config.depositAmount.toString() : "",
+    transfer: null,
+    creatingTransfer: false,
+    registeringPasskey: false,
+    verifyingPasskeyPopup: false,
+    passkeyPopupNeeded: config.passkeyPopupNeeded,
+    activeCredentialId: config.activeCredentialId,
+    knownCredentialIds: [],
+    verificationTarget: null,
+    oneTapLimit: 100,
+    mobileFlow: false,
+    deeplinkUri: null,
+    increasingLimit: false
+  };
+}
+function paymentReducer(state, action) {
+  switch (action.type) {
+    // ── Auth ──────────────────────────────────────────────────────
+    case "CODE_SENT":
+      return {
+        ...state,
+        verificationTarget: action.target,
+        error: null,
+        step: "otp-verify"
+      };
+    case "BACK_TO_LOGIN":
+      return {
+        ...state,
+        verificationTarget: null,
+        error: null,
+        step: "login"
+      };
+    // ── Passkey ──────────────────────────────────────────────────
+    case "PASSKEY_CONFIG_LOADED":
+      return {
+        ...state,
+        knownCredentialIds: action.knownIds,
+        oneTapLimit: action.oneTapLimit ?? state.oneTapLimit
+      };
+    case "PASSKEY_ACTIVATED":
+      return {
+        ...state,
+        activeCredentialId: action.credentialId,
+        passkeyPopupNeeded: false
+      };
+    case "SET_PASSKEY_POPUP_NEEDED":
+      return { ...state, passkeyPopupNeeded: action.needed };
+    case "SET_REGISTERING_PASSKEY":
+      return { ...state, registeringPasskey: action.value };
+    case "SET_VERIFYING_PASSKEY":
+      return { ...state, verifyingPasskeyPopup: action.value };
+    // ── Data loading ─────────────────────────────────────────────
+    case "DATA_LOAD_START":
+      return { ...state, loadingData: true, error: null };
+    case "DATA_LOADED": {
+      const next = {
+        ...state,
+        providers: action.providers,
+        accounts: action.accounts,
+        chains: action.chains
+      };
+      if (action.defaults) {
+        next.selectedAccountId = action.defaults.accountId;
+        next.selectedWalletId = action.defaults.walletId;
+      } else if (action.fallbackProviderId && !state.connectingNewAccount) {
+        next.selectedProviderId = action.fallbackProviderId;
+      }
+      if (action.clearMobileState) {
+        next.mobileFlow = false;
+        next.deeplinkUri = null;
+      }
+      if (action.resolvedStep !== void 0) {
+        next.step = action.resolvedStep;
+      }
+      return next;
+    }
+    case "DATA_LOAD_END":
+      return { ...state, loadingData: false };
+    case "ACCOUNTS_RELOADED": {
+      const next = {
+        ...state,
+        accounts: action.accounts,
+        providers: action.providers
+      };
+      if (action.defaults) {
+        next.selectedAccountId = action.defaults.accountId;
+        next.selectedWalletId = action.defaults.walletId;
+        next.connectingNewAccount = false;
+      }
+      return next;
+    }
+    // ── Source selection ──────────────────────────────────────────
+    case "SELECT_PROVIDER":
+      return {
+        ...state,
+        selectedProviderId: action.providerId,
+        selectedAccountId: null,
+        connectingNewAccount: true
+      };
+    case "SELECT_ACCOUNT":
+      return {
+        ...state,
+        selectedAccountId: action.accountId,
+        selectedWalletId: action.walletId,
+        connectingNewAccount: false,
+        step: "deposit"
+      };
+    // ── Transfer lifecycle ───────────────────────────────────────
+    case "PAY_STARTED":
+      return {
+        ...state,
+        step: action.isSetupRedirect ? "open-wallet" : "processing",
+        error: null,
+        creatingTransfer: true,
+        deeplinkUri: null,
+        mobileFlow: false
+      };
+    case "PAY_ENDED":
+      return { ...state, creatingTransfer: false };
+    case "PAY_ERROR":
+      return {
+        ...state,
+        error: action.error,
+        step: action.fallbackStep
+      };
+    case "TRANSFER_CREATED":
+      return { ...state, transfer: action.transfer };
+    case "TRANSFER_SIGNED":
+      return { ...state, transfer: action.transfer };
+    case "TRANSFER_COMPLETED":
+      return {
+        ...state,
+        transfer: action.transfer,
+        step: "success",
+        mobileFlow: false,
+        deeplinkUri: null
+      };
+    case "TRANSFER_FAILED":
+      return {
+        ...state,
+        transfer: action.transfer,
+        error: action.error,
+        step: "success",
+        mobileFlow: false,
+        deeplinkUri: null
+      };
+    case "PROCESSING_TIMEOUT":
+      return { ...state, error: action.error, step: "deposit" };
+    case "CONFIRM_SIGN_SUCCESS":
+      return {
+        ...state,
+        transfer: action.transfer,
+        step: "processing",
+        mobileFlow: false,
+        deeplinkUri: null
+      };
+    // ── Mobile flow ──────────────────────────────────────────────
+    case "MOBILE_DEEPLINK_READY":
+      return {
+        ...state,
+        mobileFlow: true,
+        deeplinkUri: action.deeplinkUri,
+        step: "open-wallet"
+      };
+    case "MOBILE_SETUP_COMPLETE":
+      return {
+        ...state,
+        transfer: action.transfer,
+        error: null,
+        mobileFlow: false,
+        deeplinkUri: null,
+        step: "deposit"
+      };
+    case "MOBILE_SIGN_READY":
+      return {
+        ...state,
+        transfer: action.transfer,
+        error: null,
+        mobileFlow: false,
+        deeplinkUri: null,
+        step: "confirm-sign"
+      };
+    case "CLEAR_MOBILE_STATE":
+      return { ...state, mobileFlow: false, deeplinkUri: null };
+    case "ENTER_MOBILE_FLOW":
+      return {
+        ...state,
+        mobileFlow: true,
+        deeplinkUri: action.deeplinkUri,
+        selectedProviderId: action.providerId,
+        error: action.error ?? null,
+        step: "open-wallet"
+      };
+    case "MOBILE_RESUME_SUCCESS":
+      return {
+        ...state,
+        transfer: action.transfer,
+        error: null,
+        mobileFlow: false,
+        deeplinkUri: null,
+        step: "success"
+      };
+    case "MOBILE_RESUME_FAILED":
+      return {
+        ...state,
+        transfer: action.transfer,
+        error: "Transfer failed.",
+        mobileFlow: false,
+        deeplinkUri: null,
+        step: "success"
+      };
+    case "MOBILE_RESUME_PROCESSING":
+      return {
+        ...state,
+        transfer: action.transfer,
+        error: null,
+        mobileFlow: false,
+        deeplinkUri: null,
+        step: "processing"
+      };
+    // ── Increase limit ───────────────────────────────────────────
+    case "SET_INCREASING_LIMIT":
+      return { ...state, increasingLimit: action.value };
+    case "INCREASE_LIMIT_DEEPLINK":
+      return {
+        ...state,
+        transfer: action.transfer,
+        mobileFlow: true,
+        deeplinkUri: action.deeplinkUri
+      };
+    // ── Navigation & error ───────────────────────────────────────
+    case "NAVIGATE":
+      return { ...state, step: action.step };
+    case "SET_ERROR":
+      return { ...state, error: action.error };
+    // ── Lifecycle ────────────────────────────────────────────────
+    case "NEW_PAYMENT":
+      return {
+        ...state,
+        step: "deposit",
+        transfer: null,
+        error: null,
+        amount: action.depositAmount != null ? action.depositAmount.toString() : "",
+        mobileFlow: false,
+        deeplinkUri: null,
+        connectingNewAccount: false,
+        selectedWalletId: null,
+        selectedAccountId: action.firstAccountId
+      };
+    case "LOGOUT":
+      return {
+        ...createInitialState({
+          depositAmount: action.depositAmount,
+          passkeyPopupNeeded: state.passkeyPopupNeeded,
+          activeCredentialId: null
+        })
+      };
+    case "SYNC_AMOUNT":
+      return { ...state, amount: action.amount };
+    default:
+      return state;
+  }
+}
+function Spinner({ size = 40, label }) {
+  const { tokens } = useSwypeConfig();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: "12px"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              width: size,
+              height: size,
+              border: `4px solid ${tokens.bgInput}`,
+              borderTopColor: tokens.accent,
+              borderRightColor: tokens.accent + "66",
+              borderRadius: "50%",
+              boxShadow: "inset 0 0 0 1px rgba(255,255,255,0.1)",
+              animation: "swype-spin 0.9s linear infinite"
+            }
+          }
+        ),
+        label && /* @__PURE__ */ jsx("p", { style: { color: tokens.textSecondary, fontSize: "0.875rem", margin: 0 }, children: label }),
+        /* @__PURE__ */ jsx("style", { children: `
+        @keyframes swype-spin {
+          to { transform: rotate(360deg); }
+        }
+      ` })
+      ]
+    }
+  );
+}
 var FOOTER_CSS = `
 .swype-screen-footer {
   padding-bottom: max(24px, env(safe-area-inset-bottom, 24px));
@@ -4494,22 +4877,259 @@ var errorStyle2 = (color) => ({
   color: "#ef4444",
   margin: "8px 0 0"
 });
-var PaymentErrorBoundary = class extends Component {
-  constructor(props) {
-    super(props);
-    this.state = { hasError: false };
-  }
-  static getDerivedStateFromError() {
-    return { hasError: true };
-  }
-  componentDidCatch(error, _info) {
-    captureException(error);
+function CenteredSpinner({ label }) {
+  return /* @__PURE__ */ jsx(ScreenLayout, { children: /* @__PURE__ */ jsx("div", { style: { textAlign: "center", padding: "48px 0", flex: 1, display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx(Spinner, { label }) }) });
+}
+function StepRenderer({
+  state,
+  ready,
+  authenticated,
+  activeOtpStatus,
+  pollingTransfer,
+  pollingError,
+  authExecutorError,
+  transferSigningSigning,
+  transferSigningError,
+  pendingConnections,
+  sourceName,
+  sourceAddress,
+  sourceVerified,
+  maxSourceBalance,
+  tokenCount,
+  selectedAccount,
+  selectSourceChoices,
+  selectSourceRecommended,
+  authInput,
+  otpCode,
+  selectSourceChainName,
+  selectSourceTokenSymbol,
+  merchantName,
+  onBack,
+  onDismiss,
+  autoCloseSeconds,
+  depositAmount,
+  handlers
+}) {
+  const { step } = state;
+  if (!ready) {
+    return /* @__PURE__ */ jsx(CenteredSpinner, { label: "Initializing..." });
   }
-  handleReset = () => {
-    this.setState({ hasError: false });
-    this.props.onReset();
-  };
-  render() {
+  if (step === "login" && !authenticated) {
+    return /* @__PURE__ */ jsx(
+      LoginScreen,
+      {
+        authInput,
+        onAuthInputChange: handlers.onSetAuthInput,
+        onSubmit: handlers.onSendLoginCode,
+        sending: activeOtpStatus === "sending-code",
+        error: state.error,
+        onBack,
+        merchantInitials: merchantName ? merchantName.slice(0, 2).toUpperCase() : void 0
+      }
+    );
+  }
+  if (step === "otp-verify" && !authenticated) {
+    return /* @__PURE__ */ jsx(
+      OtpVerifyScreen,
+      {
+        maskedIdentifier: state.verificationTarget ? maskAuthIdentifier(state.verificationTarget) : "",
+        otpCode,
+        onOtpChange: (code) => {
+          handlers.onSetOtpCode(code);
+        },
+        onVerify: handlers.onVerifyLoginCode,
+        onResend: handlers.onResendLoginCode,
+        onBack: handlers.onBackFromOtp,
+        verifying: activeOtpStatus === "submitting-code",
+        error: state.error
+      }
+    );
+  }
+  if ((step === "login" || step === "otp-verify") && authenticated) {
+    return /* @__PURE__ */ jsx(CenteredSpinner, { label: "Verifying your passkey..." });
+  }
+  if (step === "verify-passkey") {
+    return /* @__PURE__ */ jsx(
+      VerifyPasskeyScreen,
+      {
+        onVerify: handlers.onVerifyPasskeyViaPopup,
+        onBack: handlers.onLogout,
+        verifying: state.verifyingPasskeyPopup,
+        error: state.error
+      }
+    );
+  }
+  if (step === "create-passkey") {
+    return /* @__PURE__ */ jsx(
+      CreatePasskeyScreen,
+      {
+        onCreatePasskey: handlers.onRegisterPasskey,
+        onBack: handlers.onLogout,
+        creating: state.registeringPasskey,
+        error: state.error,
+        popupFallback: state.passkeyPopupNeeded,
+        onCreatePasskeyViaPopup: handlers.onCreatePasskeyViaPopup
+      }
+    );
+  }
+  if (step === "wallet-picker") {
+    return /* @__PURE__ */ jsx(
+      WalletPickerScreen,
+      {
+        providers: state.providers,
+        pendingConnections,
+        loading: state.creatingTransfer,
+        onSelectProvider: handlers.onSelectProvider,
+        onContinueConnection: handlers.onContinueConnection,
+        onBack: () => handlers.onNavigate(state.activeCredentialId ? "deposit" : "create-passkey")
+      }
+    );
+  }
+  if (step === "open-wallet") {
+    const providerName = state.providers.find((p) => p.id === state.selectedProviderId)?.name ?? null;
+    return /* @__PURE__ */ jsx(
+      OpenWalletScreen,
+      {
+        walletName: providerName,
+        deeplinkUri: state.deeplinkUri ?? "",
+        loading: state.creatingTransfer || !state.deeplinkUri,
+        error: state.error || pollingError,
+        onRetryStatus: handlers.onRetryMobileStatus,
+        onLogout: handlers.onLogout
+      }
+    );
+  }
+  if (step === "confirm-sign") {
+    const providerName = state.providers.find((p) => p.id === state.selectedProviderId)?.name ?? null;
+    return /* @__PURE__ */ jsx(
+      ConfirmSignScreen,
+      {
+        walletName: providerName,
+        signing: transferSigningSigning,
+        error: state.error || transferSigningError,
+        onSign: handlers.onConfirmSign,
+        onLogout: handlers.onLogout
+      }
+    );
+  }
+  if (step === "deposit") {
+    if (state.loadingData) {
+      return /* @__PURE__ */ jsx(CenteredSpinner, { label: "Loading..." });
+    }
+    const parsedAmt = depositAmount != null ? depositAmount : 5;
+    return /* @__PURE__ */ jsx(
+      DepositScreen,
+      {
+        merchantName,
+        sourceName,
+        sourceAddress,
+        sourceVerified,
+        availableBalance: maxSourceBalance,
+        remainingLimit: selectedAccount?.remainingAllowance ?? state.oneTapLimit,
+        tokenCount,
+        initialAmount: parsedAmt,
+        processing: state.creatingTransfer,
+        error: state.error,
+        onDeposit: handlers.onPay,
+        onChangeSource: () => handlers.onNavigate("wallet-picker"),
+        onSwitchWallet: () => handlers.onNavigate("wallet-picker"),
+        onBack: onBack ?? (() => handlers.onLogout()),
+        onLogout: handlers.onLogout,
+        onIncreaseLimit: handlers.onIncreaseLimit,
+        increasingLimit: state.increasingLimit
+      }
+    );
+  }
+  if (step === "processing") {
+    const polledStatus = pollingTransfer?.status;
+    const transferPhase = state.creatingTransfer ? "creating" : polledStatus === "SENDING" || polledStatus === "SENT" ? "sent" : "verifying";
+    return /* @__PURE__ */ jsx(
+      TransferStatusScreen,
+      {
+        phase: transferPhase,
+        error: state.error || authExecutorError || transferSigningError || pollingError,
+        onLogout: handlers.onLogout
+      }
+    );
+  }
+  if (step === "select-source") {
+    return /* @__PURE__ */ jsx(
+      SelectSourceScreen,
+      {
+        choices: selectSourceChoices,
+        selectedChainName: selectSourceChainName,
+        selectedTokenSymbol: selectSourceTokenSymbol,
+        recommended: selectSourceRecommended,
+        onChainChange: handlers.onSelectSourceChainChange,
+        onTokenChange: handlers.onSetSelectSourceTokenSymbol,
+        onConfirm: handlers.onConfirmSelectSource,
+        onLogout: handlers.onLogout
+      }
+    );
+  }
+  if (step === "success") {
+    const succeeded = state.transfer?.status === "COMPLETED";
+    const displayAmount = state.transfer?.amount?.amount ?? 0;
+    const displayCurrency = state.transfer?.amount?.currency ?? "USD";
+    return /* @__PURE__ */ jsx(
+      SuccessScreen,
+      {
+        amount: displayAmount,
+        currency: displayCurrency,
+        succeeded,
+        error: state.error,
+        merchantName,
+        sourceName,
+        remainingLimit: succeeded ? (() => {
+          const limit = selectedAccount?.remainingAllowance ?? state.oneTapLimit;
+          return limit > displayAmount ? limit - displayAmount : 0;
+        })() : void 0,
+        onDone: onDismiss ?? handlers.onNewPayment,
+        onLogout: handlers.onLogout,
+        autoCloseSeconds
+      }
+    );
+  }
+  if (step === "low-balance") {
+    return /* @__PURE__ */ jsx(
+      DepositScreen,
+      {
+        merchantName,
+        sourceName,
+        sourceAddress,
+        sourceVerified,
+        availableBalance: 0,
+        remainingLimit: selectedAccount?.remainingAllowance ?? state.oneTapLimit,
+        tokenCount,
+        initialAmount: depositAmount ?? 5,
+        processing: false,
+        error: state.error,
+        onDeposit: handlers.onPay,
+        onChangeSource: () => handlers.onNavigate("wallet-picker"),
+        onSwitchWallet: () => handlers.onNavigate("wallet-picker"),
+        onBack: onBack ?? (() => handlers.onLogout()),
+        onLogout: handlers.onLogout
+      }
+    );
+  }
+  return null;
+}
+var PaymentErrorBoundary = class extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+  componentDidCatch(error, _info) {
+    captureException(error);
+  }
+  handleReset = () => {
+    this.setState({ hasError: false });
+    this.props.onReset();
+  };
+  render() {
     if (!this.state.hasError) {
       return this.props.children;
     }
@@ -4562,98 +5182,6 @@ var buttonStyle3 = {
   fontFamily: "inherit",
   cursor: "pointer"
 };
-var ACTIVE_CREDENTIAL_STORAGE_KEY = "swype_active_credential_id";
-var MOBILE_FLOW_STORAGE_KEY = "swype_mobile_flow";
-var MIN_SEND_AMOUNT_USD = 0.25;
-function persistMobileFlowState(data) {
-  try {
-    sessionStorage.setItem(MOBILE_FLOW_STORAGE_KEY, JSON.stringify(data));
-  } catch {
-  }
-}
-function loadMobileFlowState() {
-  try {
-    const raw = sessionStorage.getItem(MOBILE_FLOW_STORAGE_KEY);
-    if (!raw) return null;
-    return JSON.parse(raw);
-  } catch {
-    return null;
-  }
-}
-function clearMobileFlowState() {
-  try {
-    sessionStorage.removeItem(MOBILE_FLOW_STORAGE_KEY);
-  } catch {
-  }
-}
-function computeSmartDefaults(accts, transferAmount) {
-  if (accts.length === 0) return null;
-  for (const acct of accts) {
-    for (const wallet of acct.wallets) {
-      if (wallet.status === "ACTIVE") {
-        const bestSource = wallet.sources.find(
-          (s) => s.balance.available.amount >= transferAmount
-        );
-        if (bestSource) {
-          return { accountId: acct.id, walletId: wallet.id };
-        }
-      }
-    }
-  }
-  let bestAccount = null;
-  let bestWallet = null;
-  let bestBalance = -1;
-  let bestIsActive = false;
-  for (const acct of accts) {
-    for (const wallet of acct.wallets) {
-      const walletBal = wallet.balance.available.amount;
-      const isActive = wallet.status === "ACTIVE";
-      if (walletBal > bestBalance || walletBal === bestBalance && isActive && !bestIsActive) {
-        bestBalance = walletBal;
-        bestAccount = acct;
-        bestWallet = wallet;
-        bestIsActive = isActive;
-      }
-    }
-  }
-  if (bestAccount) {
-    return {
-      accountId: bestAccount.id,
-      walletId: bestWallet?.id ?? null
-    };
-  }
-  return { accountId: accts[0].id, walletId: null };
-}
-function parseRawBalance(rawBalance, decimals) {
-  const parsed = Number(rawBalance);
-  if (!Number.isFinite(parsed)) return 0;
-  return parsed / 10 ** decimals;
-}
-function buildSelectSourceChoices(options) {
-  const chainChoices = [];
-  const chainIndexByName = /* @__PURE__ */ new Map();
-  for (const option of options) {
-    const { chainName, tokenSymbol } = option;
-    const balance = parseRawBalance(option.rawBalance, option.decimals);
-    let chainChoice;
-    const existingIdx = chainIndexByName.get(chainName);
-    if (existingIdx === void 0) {
-      chainChoice = { chainName, balance: 0, tokens: [] };
-      chainIndexByName.set(chainName, chainChoices.length);
-      chainChoices.push(chainChoice);
-    } else {
-      chainChoice = chainChoices[existingIdx];
-    }
-    chainChoice.balance += balance;
-    const existing = chainChoice.tokens.find((t) => t.tokenSymbol === tokenSymbol);
-    if (existing) {
-      existing.balance += balance;
-    } else {
-      chainChoice.tokens.push({ tokenSymbol, balance });
-    }
-  }
-  return chainChoices;
-}
 function SwypePayment(props) {
   const resetKey = useRef(0);
   const handleBoundaryReset = useCallback(() => {
@@ -4665,7 +5193,7 @@ function SwypePaymentInner({
   destination,
   onComplete,
   onError,
-  useWalletConnector,
+  useWalletConnector: useWalletConnectorProp,
   idempotencyKey,
   merchantAuthorization,
   merchantName,
@@ -4673,7 +5201,7 @@ function SwypePaymentInner({
   onDismiss,
   autoCloseSeconds
 }) {
-  const { apiBaseUrl, tokens, depositAmount } = useSwypeConfig();
+  const { apiBaseUrl, depositAmount } = useSwypeConfig();
   const { ready, authenticated, user, logout, getAccessToken } = usePrivy();
   const {
     sendCode: sendEmailCode,
@@ -4685,161 +5213,74 @@ function SwypePaymentInner({
     loginWithCode: loginWithSmsCode,
     state: smsLoginState
   } = useLoginWithSms();
-  const { initOAuth } = useLoginWithOAuth();
-  const [step, setStep] = useState("login");
-  const [error, setError] = useState(null);
-  const [providers, setProviders] = useState([]);
-  const [accounts, setAccounts] = useState([]);
-  const [chains, setChains] = useState([]);
-  const [loadingData, setLoadingData] = useState(false);
-  const [selectedAccountId, setSelectedAccountId] = useState(null);
-  const [selectedWalletId, setSelectedWalletId] = useState(null);
-  const [selectedProviderId, setSelectedProviderId] = useState(null);
-  const [connectingNewAccount, setConnectingNewAccount] = useState(false);
-  const [amount, setAmount] = useState(
-    depositAmount != null ? depositAmount.toString() : ""
-  );
-  const [transfer, setTransfer] = useState(null);
-  const [creatingTransfer, setCreatingTransfer] = useState(false);
-  const [registeringPasskey, setRegisteringPasskey] = useState(false);
-  const [verifyingPasskeyPopup, setVerifyingPasskeyPopup] = useState(false);
-  const [passkeyPopupNeeded, setPasskeyPopupNeeded] = useState(
-    () => isSafari() && isInCrossOriginIframe()
+  useLoginWithOAuth();
+  const [state, dispatch] = useReducer(
+    paymentReducer,
+    {
+      depositAmount,
+      passkeyPopupNeeded: isSafari() && isInCrossOriginIframe(),
+      activeCredentialId: typeof window === "undefined" ? null : window.localStorage.getItem(ACTIVE_CREDENTIAL_STORAGE_KEY)
+    },
+    createInitialState
   );
-  const [activeCredentialId, setActiveCredentialId] = useState(() => {
-    if (typeof window === "undefined") return null;
-    return window.localStorage.getItem(ACTIVE_CREDENTIAL_STORAGE_KEY);
-  });
-  const [knownCredentialIds, setKnownCredentialIds] = useState([]);
-  const [authInput, setAuthInput] = useState("");
-  const [verificationTarget, setVerificationTarget] = useState(null);
-  const [otpCode, setOtpCode] = useState("");
-  const [oneTapLimit, setOneTapLimit] = useState(100);
-  const [mobileFlow, setMobileFlow] = useState(false);
-  const [deeplinkUri, setDeeplinkUri] = useState(null);
   const loadingDataRef = useRef(false);
   const pollingTransferIdRef = useRef(null);
-  const mobileSigningTransferIdRef = useRef(null);
   const mobileSetupFlowRef = useRef(false);
   const handlingMobileReturnRef = useRef(false);
   const processingStartedAtRef = useRef(null);
-  const [selectSourceChainName, setSelectSourceChainName] = useState("");
-  const [selectSourceTokenSymbol, setSelectSourceTokenSymbol] = useState("");
   const initializedSelectSourceActionRef = useRef(null);
   const preSelectSourceStepRef = useRef(null);
+  const [authInput, setAuthInput] = useState("");
+  const [otpCode, setOtpCode] = useState("");
+  const [selectSourceChainName, setSelectSourceChainName] = useState("");
+  const [selectSourceTokenSymbol, setSelectSourceTokenSymbol] = useState("");
   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]);
-  const resetDataLoadingState = useCallback(() => {
-    loadingDataRef.current = false;
-    setLoadingData(false);
-  }, []);
-  const enterPersistedMobileFlow = useCallback((persisted, errorMessage) => {
-    setMobileFlow(true);
-    setDeeplinkUri(persisted.deeplinkUri);
-    setSelectedProviderId(persisted.providerId);
-    pollingTransferIdRef.current = persisted.transferId;
-    mobileSetupFlowRef.current = persisted.isSetup;
-    setError(errorMessage ?? null);
-    setStep("open-wallet");
-    polling.startPolling(persisted.transferId);
-  }, [polling]);
-  const handleAuthorizedMobileReturn = useCallback(async (authorizedTransfer, isSetup) => {
-    if (handlingMobileReturnRef.current) return;
-    handlingMobileReturnRef.current = true;
-    polling.stopPolling();
-    if (isSetup) {
-      mobileSetupFlowRef.current = false;
-      clearMobileFlowState();
-      try {
-        await reloadAccounts();
-        resetDataLoadingState();
-        setTransfer(authorizedTransfer);
-        setError(null);
-        setDeeplinkUri(null);
-        setMobileFlow(false);
-        setStep("deposit");
-      } catch (err) {
-        handlingMobileReturnRef.current = false;
-        setError(
-          err instanceof Error ? err.message : "Wallet authorized, but we could not refresh your account yet."
-        );
-        setStep("open-wallet");
+  const { sourceType, sourceId } = deriveSourceTypeAndId(state);
+  const selectedAccount = state.accounts.find((a) => a.id === state.selectedAccountId);
+  const selectedWallet = selectedAccount?.wallets.find(
+    (w) => w.id === state.selectedWalletId
+  );
+  const sourceName = selectedAccount?.name ?? selectedWallet?.chain.name ?? "Wallet";
+  const sourceAddress = selectedWallet ? `${selectedWallet.name.slice(0, 6)}...${selectedWallet.name.slice(-4)}` : void 0;
+  const sourceVerified = selectedWallet?.status === "ACTIVE";
+  const pendingConnections = useMemo(
+    () => state.accounts.filter(
+      (a) => a.wallets.length > 0 && !a.wallets.some((w) => w.status === "ACTIVE")
+    ),
+    [state.accounts]
+  );
+  const maxSourceBalance = useMemo(() => {
+    let max = 0;
+    for (const acct of state.accounts) {
+      for (const wallet of acct.wallets) {
+        for (const source of wallet.sources) {
+          if (source.balance.available.amount > max) {
+            max = source.balance.available.amount;
+          }
+        }
       }
-      return;
-    }
-    setTransfer(authorizedTransfer);
-    mobileSetupFlowRef.current = false;
-    clearMobileFlowState();
-    setError(null);
-    setDeeplinkUri(null);
-    setMobileFlow(false);
-    setStep("confirm-sign");
-  }, [polling.stopPolling, reloadAccounts, resetDataLoadingState]);
-  const handleRetryMobileStatus = useCallback(() => {
-    setError(null);
-    handlingMobileReturnRef.current = false;
-    const currentTransfer = polling.transfer ?? transfer;
-    if (currentTransfer?.status === "AUTHORIZED") {
-      void handleAuthorizedMobileReturn(currentTransfer, mobileSetupFlowRef.current);
-      return;
-    }
-    const transferIdToResume = pollingTransferIdRef.current ?? currentTransfer?.id;
-    if (transferIdToResume) {
-      polling.startPolling(transferIdToResume);
-    }
-  }, [handleAuthorizedMobileReturn, polling, transfer]);
-  useEffect(() => {
-    if (depositAmount != null) {
-      setAmount(depositAmount.toString());
     }
-  }, [depositAmount]);
-  const resetHeadlessLogin = useCallback(() => {
-    setAuthInput("");
-    setVerificationTarget(null);
-    setOtpCode("");
-  }, []);
-  useCallback(async (provider) => {
-    setError(null);
-    try {
-      await initOAuth({ provider });
-    } catch (err) {
-      captureException(err);
-      setError(err instanceof Error ? err.message : "Social login failed");
+    return max;
+  }, [state.accounts]);
+  const tokenCount = useMemo(() => {
+    let count = 0;
+    for (const acct of state.accounts) {
+      for (const wallet of acct.wallets) {
+        count += wallet.sources.length;
+      }
     }
-  }, [initOAuth]);
-  const activeOtpStatus = verificationTarget?.kind === "email" ? emailLoginState.status : verificationTarget?.kind === "phone" ? smsLoginState.status : "initial";
-  const activeOtpErrorMessage = verificationTarget?.kind === "email" && emailLoginState.status === "error" ? emailLoginState.error?.message ?? "Failed to continue with email." : verificationTarget?.kind === "phone" && smsLoginState.status === "error" ? smsLoginState.error?.message ?? "Failed to continue with phone number." : null;
-  useEffect(() => {
-    if (authenticated) return;
-    if (activeOtpErrorMessage) setError(activeOtpErrorMessage);
-  }, [activeOtpErrorMessage, authenticated]);
+    return count;
+  }, [state.accounts]);
+  const activeOtpStatus = state.verificationTarget?.kind === "email" ? emailLoginState.status : state.verificationTarget?.kind === "phone" ? smsLoginState.status : "initial";
+  const activeOtpErrorMessage = state.verificationTarget?.kind === "email" && emailLoginState.status === "error" ? emailLoginState.error?.message ?? "Failed to continue with email." : state.verificationTarget?.kind === "phone" && smsLoginState.status === "error" ? smsLoginState.error?.message ?? "Failed to continue with phone number." : null;
   const handleSendLoginCode = useCallback(async () => {
     const normalizedIdentifier = normalizeAuthIdentifier(authInput);
     if (!normalizedIdentifier) {
-      setError("Enter a valid email address or phone number.");
+      dispatch({ type: "SET_ERROR", error: "Enter a valid email address or phone number." });
       return;
     }
-    setError(null);
     setOtpCode("");
     try {
       if (normalizedIdentifier.kind === "email") {
@@ -4847,468 +5288,229 @@ function SwypePaymentInner({
       } else {
         await sendSmsCode({ phoneNumber: normalizedIdentifier.value });
       }
-      setVerificationTarget(normalizedIdentifier);
-      setStep("otp-verify");
+      dispatch({ type: "CODE_SENT", target: normalizedIdentifier });
     } catch (err) {
       captureException(err);
-      setError(err instanceof Error ? err.message : "Failed to send verification code");
+      dispatch({
+        type: "SET_ERROR",
+        error: err instanceof Error ? err.message : "Failed to send verification code"
+      });
     }
   }, [authInput, sendEmailCode, sendSmsCode]);
   const handleVerifyLoginCode = useCallback(async () => {
-    if (!verificationTarget) return;
+    if (!state.verificationTarget) return;
     const trimmedCode = otpCode.trim();
     if (!/^\d{6}$/.test(trimmedCode)) {
-      setError("Enter the 6-digit verification code.");
+      dispatch({ type: "SET_ERROR", error: "Enter the 6-digit verification code." });
       return;
     }
-    setError(null);
+    dispatch({ type: "SET_ERROR", error: null });
     try {
-      if (verificationTarget.kind === "email") {
+      if (state.verificationTarget.kind === "email") {
         await loginWithEmailCode({ code: trimmedCode });
       } else {
         await loginWithSmsCode({ code: trimmedCode });
       }
     } catch (err) {
       captureException(err);
-      setError(err instanceof Error ? err.message : "Failed to verify code");
-    }
-  }, [verificationTarget, otpCode, loginWithEmailCode, loginWithSmsCode]);
-  useEffect(() => {
-    if (step === "otp-verify" && /^\d{6}$/.test(otpCode.trim()) && activeOtpStatus !== "submitting-code") {
-      handleVerifyLoginCode();
+      dispatch({
+        type: "SET_ERROR",
+        error: err instanceof Error ? err.message : "Failed to verify code"
+      });
     }
-  }, [otpCode, step, activeOtpStatus, handleVerifyLoginCode]);
+  }, [state.verificationTarget, otpCode, loginWithEmailCode, loginWithSmsCode]);
   const handleResendLoginCode = useCallback(async () => {
-    if (!verificationTarget) return;
-    setError(null);
+    if (!state.verificationTarget) return;
+    dispatch({ type: "SET_ERROR", error: null });
     try {
-      if (verificationTarget.kind === "email") {
-        await sendEmailCode({ email: verificationTarget.value });
+      if (state.verificationTarget.kind === "email") {
+        await sendEmailCode({ email: state.verificationTarget.value });
       } else {
-        await sendSmsCode({ phoneNumber: verificationTarget.value });
+        await sendSmsCode({ phoneNumber: state.verificationTarget.value });
       }
     } catch (err) {
       captureException(err);
-      setError(err instanceof Error ? err.message : "Failed to resend code");
+      dispatch({
+        type: "SET_ERROR",
+        error: err instanceof Error ? err.message : "Failed to resend code"
+      });
     }
-  }, [verificationTarget, sendEmailCode, sendSmsCode]);
-  useEffect(() => {
-    if (!ready || !authenticated) return;
-    if (step !== "login" && step !== "otp-verify") return;
-    let cancelled = false;
-    setError(null);
-    resetHeadlessLogin();
-    const restoreOrDeposit = async (credId, token) => {
-      const persisted = loadMobileFlowState();
-      let accts = [];
-      try {
-        accts = await fetchAccounts(apiBaseUrl, token, credId);
-        if (cancelled) return;
-      } catch {
+  }, [state.verificationTarget, sendEmailCode, sendSmsCode]);
+  const completePasskeyRegistration = useCallback(async (credentialId, publicKey) => {
+    const token = await getAccessToken();
+    if (!token) throw new Error("Not authenticated");
+    await registerPasskey(apiBaseUrl, token, credentialId, publicKey);
+    dispatch({ type: "PASSKEY_ACTIVATED", credentialId });
+    window.localStorage.setItem(ACTIVE_CREDENTIAL_STORAGE_KEY, credentialId);
+    const resolved = resolvePostAuthStep({
+      hasPasskey: true,
+      accounts: state.accounts,
+      persistedMobileFlow: loadMobileFlowState(),
+      mobileSetupInProgress: mobileSetupFlowRef.current,
+      connectingNewAccount: state.connectingNewAccount
+    });
+    if (resolved.clearPersistedFlow) clearMobileFlowState();
+    dispatch({ type: "NAVIGATE", step: resolved.step });
+  }, [getAccessToken, apiBaseUrl, state.accounts, state.connectingNewAccount]);
+  const handleRegisterPasskey = useCallback(async () => {
+    dispatch({ type: "SET_REGISTERING_PASSKEY", value: true });
+    dispatch({ type: "SET_ERROR", error: null });
+    try {
+      const passkeyDisplayName = user?.email?.address ?? user?.google?.name ?? user?.id ?? "Swype User";
+      const { credentialId, publicKey } = await createPasskeyCredential({
+        userId: user?.id ?? "unknown",
+        displayName: passkeyDisplayName
+      });
+      await completePasskeyRegistration(credentialId, publicKey);
+    } catch (err) {
+      if (err instanceof PasskeyIframeBlockedError) {
+        dispatch({ type: "SET_PASSKEY_POPUP_NEEDED", needed: true });
+      } else {
+        captureException(err);
+        dispatch({
+          type: "SET_ERROR",
+          error: err instanceof Error ? err.message : "Failed to register passkey"
+        });
       }
+    } finally {
+      dispatch({ type: "SET_REGISTERING_PASSKEY", value: false });
+    }
+  }, [user, completePasskeyRegistration]);
+  const handleCreatePasskeyViaPopup = useCallback(async () => {
+    dispatch({ type: "SET_REGISTERING_PASSKEY", value: true });
+    dispatch({ type: "SET_ERROR", error: null });
+    try {
+      const token = await getAccessToken();
+      const passkeyDisplayName = user?.email?.address ?? user?.google?.name ?? user?.id ?? "Swype User";
+      const popupOptions = buildPasskeyPopupOptions({
+        userId: user?.id ?? "unknown",
+        displayName: passkeyDisplayName,
+        authToken: token ?? void 0,
+        apiBaseUrl
+      });
+      const { credentialId } = await createPasskeyViaPopup(popupOptions);
+      dispatch({ type: "PASSKEY_ACTIVATED", credentialId });
+      localStorage.setItem(ACTIVE_CREDENTIAL_STORAGE_KEY, credentialId);
       const resolved = resolvePostAuthStep({
         hasPasskey: true,
-        accounts: accts,
-        persistedMobileFlow: persisted,
-        mobileSetupInProgress: false,
-        connectingNewAccount: false
+        accounts: state.accounts,
+        persistedMobileFlow: loadMobileFlowState(),
+        mobileSetupInProgress: mobileSetupFlowRef.current,
+        connectingNewAccount: state.connectingNewAccount
       });
-      if (resolved.clearPersistedFlow) {
-        clearMobileFlowState();
-      }
-      if (resolved.step === "deposit" && persisted && persisted.isSetup) {
-        try {
-          const existingTransfer = await fetchTransfer(apiBaseUrl, token, persisted.transferId);
-          if (cancelled) return;
-          if (existingTransfer.status === "AUTHORIZED") {
-            await handleAuthorizedMobileReturn(existingTransfer, true);
-            return;
-          }
-        } catch {
-        }
-      }
-      if (resolved.step === "open-wallet" && persisted) {
-        try {
-          const existingTransfer = await fetchTransfer(apiBaseUrl, token, persisted.transferId);
-          if (cancelled) return;
-          const mobileResolution = resolveRestoredMobileFlow(
-            existingTransfer.status,
-            persisted.isSetup
-          );
-          if (mobileResolution.kind === "resume-setup-deposit") {
-            await handleAuthorizedMobileReturn(existingTransfer, true);
-            return;
-          }
-          if (mobileResolution.kind === "resume-confirm-sign") {
-            await handleAuthorizedMobileReturn(existingTransfer, false);
-            return;
-          }
-          if (mobileResolution.kind === "resume-success") {
-            clearMobileFlowState();
-            setMobileFlow(false);
-            setDeeplinkUri(null);
-            setTransfer(existingTransfer);
-            setError(null);
-            setStep("success");
-            onComplete?.(existingTransfer);
-            return;
-          }
-          if (mobileResolution.kind === "resume-failed") {
-            clearMobileFlowState();
-            setMobileFlow(false);
-            setDeeplinkUri(null);
-            setTransfer(existingTransfer);
-            setError("Transfer failed.");
-            setStep("success");
-            return;
-          }
-          if (mobileResolution.kind === "resume-processing") {
-            clearMobileFlowState();
-            setMobileFlow(false);
-            setDeeplinkUri(null);
-            setTransfer(existingTransfer);
-            setError(null);
-            setStep("processing");
-            polling.startPolling(existingTransfer.id);
-            return;
-          }
-          if (mobileResolution.kind === "resume-stale-setup") {
-            clearMobileFlowState();
-            if (!cancelled) setStep("wallet-picker");
-            return;
-          }
-        } catch (err) {
-          if (cancelled) return;
-          enterPersistedMobileFlow(
-            persisted,
-            err instanceof Error ? err.message : "Unable to refresh wallet authorization status."
-          );
-          return;
-        }
-        enterPersistedMobileFlow(persisted);
-        return;
-      }
-      setStep(resolved.step);
-    };
-    const checkPasskey = async () => {
-      try {
-        const token = await getAccessToken();
-        if (!token || cancelled) return;
-        const { config } = await fetchUserConfig(apiBaseUrl, token);
-        if (cancelled) return;
-        if (config.defaultAllowance != null) {
-          setOneTapLimit(config.defaultAllowance);
-        }
-        const allPasskeys = config.passkeys ?? (config.passkey ? [config.passkey] : []);
-        setKnownCredentialIds(allPasskeys.map((p) => p.credentialId));
-        if (allPasskeys.length === 0) {
-          setStep("create-passkey");
-          return;
-        }
-        if (activeCredentialId && allPasskeys.some((p) => p.credentialId === activeCredentialId)) {
-          await restoreOrDeposit(activeCredentialId, token);
-          return;
-        }
-        if (cancelled) return;
-        const credentialIds = allPasskeys.map((p) => p.credentialId);
-        if (isSafari() && isInCrossOriginIframe()) {
-          setStep("verify-passkey");
-          return;
-        }
-        const matched = await findDevicePasskey(credentialIds);
-        if (cancelled) return;
-        if (matched) {
-          setActiveCredentialId(matched);
-          window.localStorage.setItem(ACTIVE_CREDENTIAL_STORAGE_KEY, matched);
+      if (resolved.clearPersistedFlow) clearMobileFlowState();
+      dispatch({ type: "NAVIGATE", step: resolved.step });
+    } catch (err) {
+      captureException(err);
+      dispatch({
+        type: "SET_ERROR",
+        error: err instanceof Error ? err.message : "Failed to register passkey"
+      });
+    } finally {
+      dispatch({ type: "SET_REGISTERING_PASSKEY", value: false });
+    }
+  }, [user, getAccessToken, apiBaseUrl, state.accounts, state.connectingNewAccount]);
+  const handleVerifyPasskeyViaPopup = useCallback(async () => {
+    dispatch({ type: "SET_VERIFYING_PASSKEY", value: true });
+    dispatch({ type: "SET_ERROR", error: null });
+    try {
+      const token = await getAccessToken();
+      const matched = await findDevicePasskeyViaPopup({
+        credentialIds: state.knownCredentialIds,
+        rpId: resolvePasskeyRpId(),
+        authToken: token ?? void 0,
+        apiBaseUrl
+      });
+      if (matched) {
+        dispatch({ type: "PASSKEY_ACTIVATED", credentialId: matched });
+        window.localStorage.setItem(ACTIVE_CREDENTIAL_STORAGE_KEY, matched);
+        if (token) {
           reportPasskeyActivity(apiBaseUrl, token, matched).catch(() => {
           });
-          await restoreOrDeposit(matched, token);
-          return;
         }
-        setStep("create-passkey");
-      } catch {
-        if (!cancelled) setStep("create-passkey");
+        const resolved = resolvePostAuthStep({
+          hasPasskey: true,
+          accounts: state.accounts,
+          persistedMobileFlow: loadMobileFlowState(),
+          mobileSetupInProgress: mobileSetupFlowRef.current,
+          connectingNewAccount: state.connectingNewAccount
+        });
+        if (resolved.clearPersistedFlow) clearMobileFlowState();
+        dispatch({ type: "NAVIGATE", step: resolved.step });
+      } else {
+        dispatch({
+          type: "SET_ERROR",
+          error: "Passkey verification was not completed. Please try again."
+        });
       }
-    };
-    checkPasskey();
-    return () => {
-      cancelled = true;
-    };
-  }, [
-    ready,
-    authenticated,
-    step,
-    apiBaseUrl,
-    getAccessToken,
-    activeCredentialId,
-    resetHeadlessLogin,
-    enterPersistedMobileFlow,
-    handleAuthorizedMobileReturn,
-    onComplete
-  ]);
-  useEffect(() => {
-    const loadAction = resolveDataLoadAction({
-      authenticated,
-      step,
-      accountsCount: accounts.length,
-      hasActiveCredential: !!activeCredentialId,
-      loading: loadingDataRef.current
-    });
-    if (loadAction === "reset") {
-      resetDataLoadingState();
-      return;
-    }
-    if (loadAction === "wait") {
-      return;
-    }
-    const credentialId = activeCredentialId;
-    if (!credentialId) {
-      resetDataLoadingState();
-      return;
+    } catch (err) {
+      captureException(err);
+      dispatch({
+        type: "SET_ERROR",
+        error: err instanceof Error ? err.message : "Passkey verification failed. Please try again."
+      });
+    } finally {
+      dispatch({ type: "SET_VERIFYING_PASSKEY", value: false });
     }
-    let cancelled = false;
-    loadingDataRef.current = true;
-    const load = async () => {
-      setLoadingData(true);
-      setError(null);
+  }, [state.knownCredentialIds, getAccessToken, apiBaseUrl, state.accounts, state.connectingNewAccount]);
+  const reloadAccounts = useCallback(async () => {
+    const token = await getAccessToken();
+    if (!token || !state.activeCredentialId) return;
+    const [accts, prov] = await Promise.all([
+      fetchAccounts(apiBaseUrl, token, state.activeCredentialId),
+      fetchProviders(apiBaseUrl, token)
+    ]);
+    const parsedAmt = depositAmount != null ? depositAmount : 0;
+    const defaults = computeSmartDefaults(accts, parsedAmt);
+    dispatch({ type: "ACCOUNTS_RELOADED", accounts: accts, providers: prov, defaults });
+  }, [getAccessToken, state.activeCredentialId, apiBaseUrl, depositAmount]);
+  const handleAuthorizedMobileReturn = useCallback(async (authorizedTransfer, isSetup) => {
+    if (handlingMobileReturnRef.current) return;
+    handlingMobileReturnRef.current = true;
+    polling.stopPolling();
+    if (isSetup) {
+      mobileSetupFlowRef.current = false;
+      clearMobileFlowState();
       try {
-        const token = await getAccessToken();
-        if (!token) throw new Error("Not authenticated");
-        const [prov, accts, chn] = await Promise.all([
-          fetchProviders(apiBaseUrl, token),
-          fetchAccounts(apiBaseUrl, token, credentialId),
-          fetchChains(apiBaseUrl, token)
-        ]);
-        if (cancelled) return;
-        setProviders(prov);
-        setAccounts(accts);
-        setChains(chn);
-        const parsedAmt = depositAmount != null ? depositAmount : 0;
-        const defaults = computeSmartDefaults(accts, parsedAmt);
-        if (defaults) {
-          setSelectedAccountId(defaults.accountId);
-          setSelectedWalletId(defaults.walletId);
-        } else if (prov.length > 0 && !connectingNewAccount) {
-          setSelectedProviderId(prov[0].id);
-        }
-        const persisted = loadMobileFlowState();
-        const resolved = resolvePostAuthStep({
-          hasPasskey: !!activeCredentialId,
-          accounts: accts,
-          persistedMobileFlow: persisted,
-          mobileSetupInProgress: mobileSetupFlowRef.current,
-          connectingNewAccount
-        });
-        if (resolved.clearPersistedFlow) {
-          clearMobileFlowState();
-          setMobileFlow(false);
-          setDeeplinkUri(null);
-        }
-        const correctableSteps = ["deposit", "wallet-picker", "open-wallet"];
-        if (correctableSteps.includes(step)) {
-          setStep(resolved.step);
-        }
+        await reloadAccounts();
+        loadingDataRef.current = false;
+        dispatch({ type: "MOBILE_SETUP_COMPLETE", transfer: authorizedTransfer });
       } catch (err) {
-        if (!cancelled) {
-          captureException(err);
-          setError(err instanceof Error ? err.message : "Failed to load data");
-        }
-      } finally {
-        if (!cancelled) {
-          resetDataLoadingState();
-        }
-      }
-    };
-    load();
-    return () => {
-      cancelled = true;
-      loadingDataRef.current = false;
-    };
-  }, [authenticated, step, accounts.length, apiBaseUrl, getAccessToken, activeCredentialId, depositAmount, connectingNewAccount, resetDataLoadingState]);
-  useEffect(() => {
-    if (!polling.transfer) return;
-    if (polling.transfer.status === "COMPLETED") {
-      clearMobileFlowState();
-      setStep("success");
-      setTransfer(polling.transfer);
-      onComplete?.(polling.transfer);
-    } else if (polling.transfer.status === "FAILED") {
-      clearMobileFlowState();
-      setStep("success");
-      setTransfer(polling.transfer);
-      setError("Transfer failed.");
-    }
-  }, [polling.transfer, onComplete]);
-  useEffect(() => {
-    if (step !== "processing") {
-      processingStartedAtRef.current = null;
-      return;
-    }
-    if (!processingStartedAtRef.current) {
-      processingStartedAtRef.current = Date.now();
-    }
-    const elapsedMs = Date.now() - processingStartedAtRef.current;
-    const remainingMs = PROCESSING_TIMEOUT_MS - elapsedMs;
-    const handleTimeout = () => {
-      if (!hasProcessingTimedOut(processingStartedAtRef.current, Date.now())) return;
-      const status = getTransferStatus(polling.transfer, transfer);
-      const msg = buildProcessingTimeoutMessage(status);
-      captureException(new Error(msg));
-      polling.stopPolling();
-      setStep("deposit");
-      setError(msg);
-      onError?.(msg);
-    };
-    if (remainingMs <= 0) {
-      handleTimeout();
-      return;
-    }
-    const timeoutId = window.setTimeout(handleTimeout, remainingMs);
-    return () => window.clearTimeout(timeoutId);
-  }, [step, polling.transfer, transfer, polling.stopPolling, onError]);
-  useEffect(() => {
-    if (!mobileFlow) {
-      handlingMobileReturnRef.current = false;
-      return;
-    }
-    if (handlingMobileReturnRef.current) return;
-    const polledTransfer = polling.transfer;
-    if (!polledTransfer || polledTransfer.status !== "AUTHORIZED") return;
-    void handleAuthorizedMobileReturn(polledTransfer, mobileSetupFlowRef.current);
-  }, [mobileFlow, polling.transfer, handleAuthorizedMobileReturn]);
-  useEffect(() => {
-    if (!mobileFlow) return;
-    if (handlingMobileReturnRef.current) return;
-    const transferIdToResume = pollingTransferIdRef.current ?? transfer?.id;
-    if (!transferIdToResume) return;
-    if (!polling.isPolling) polling.startPolling(transferIdToResume);
-    const handleVisibility = () => {
-      if (document.visibilityState === "visible" && !handlingMobileReturnRef.current) {
-        polling.startPolling(transferIdToResume);
+        handlingMobileReturnRef.current = false;
+        dispatch({
+          type: "SET_ERROR",
+          error: err instanceof Error ? err.message : "Wallet authorized, but we could not refresh your account yet."
+        });
+        dispatch({ type: "NAVIGATE", step: "open-wallet" });
       }
-    };
-    document.addEventListener("visibilitychange", handleVisibility);
-    return () => document.removeEventListener("visibilitychange", handleVisibility);
-  }, [mobileFlow, transfer?.id, polling.isPolling, polling.startPolling]);
-  const pendingSelectSourceAction = authExecutor.pendingSelectSource;
-  const selectSourceChoices = useMemo(() => {
-    if (!pendingSelectSourceAction) return [];
-    const options = pendingSelectSourceAction.metadata?.options ?? [];
-    return buildSelectSourceChoices(options);
-  }, [pendingSelectSourceAction]);
-  const selectSourceRecommended = useMemo(() => {
-    if (!pendingSelectSourceAction) return null;
-    return pendingSelectSourceAction.metadata?.recommended ?? null;
-  }, [pendingSelectSourceAction]);
-  useEffect(() => {
-    if (!pendingSelectSourceAction) {
-      initializedSelectSourceActionRef.current = null;
-      setSelectSourceChainName("");
-      setSelectSourceTokenSymbol("");
       return;
     }
-    if (initializedSelectSourceActionRef.current === pendingSelectSourceAction.id) return;
-    const hasRecommended = !!selectSourceRecommended && selectSourceChoices.some(
-      (chain) => chain.chainName === selectSourceRecommended.chainName && chain.tokens.some((t) => t.tokenSymbol === selectSourceRecommended.tokenSymbol)
-    );
-    if (hasRecommended && selectSourceRecommended) {
-      setSelectSourceChainName(selectSourceRecommended.chainName);
-      setSelectSourceTokenSymbol(selectSourceRecommended.tokenSymbol);
-    } else if (selectSourceChoices.length > 0 && selectSourceChoices[0].tokens.length > 0) {
-      setSelectSourceChainName(selectSourceChoices[0].chainName);
-      setSelectSourceTokenSymbol(selectSourceChoices[0].tokens[0].tokenSymbol);
-    } else {
-      setSelectSourceChainName("Base");
-      setSelectSourceTokenSymbol("USDC");
-    }
-    initializedSelectSourceActionRef.current = pendingSelectSourceAction.id;
-  }, [pendingSelectSourceAction, selectSourceChoices, selectSourceRecommended]);
-  useEffect(() => {
-    if (pendingSelectSourceAction && step === "processing") {
-      preSelectSourceStepRef.current = step;
-      setStep("select-source");
-    } else if (!pendingSelectSourceAction && step === "select-source") {
-      setStep(preSelectSourceStepRef.current ?? "processing");
-      preSelectSourceStepRef.current = null;
-    }
-  }, [pendingSelectSourceAction, step]);
-  const handleSelectSourceChainChange = useCallback(
-    (chainName) => {
-      setSelectSourceChainName(chainName);
-      const chain = selectSourceChoices.find((c) => c.chainName === chainName);
-      if (!chain || chain.tokens.length === 0) return;
-      const recommendedToken = selectSourceRecommended?.chainName === chainName ? selectSourceRecommended.tokenSymbol : null;
-      const hasRecommended = !!recommendedToken && chain.tokens.some((t) => t.tokenSymbol === recommendedToken);
-      setSelectSourceTokenSymbol(
-        hasRecommended ? recommendedToken : chain.tokens[0].tokenSymbol
-      );
-    },
-    [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";
-  const sourceAddress = selectedWallet ? `${selectedWallet.name.slice(0, 6)}...${selectedWallet.name.slice(-4)}` : void 0;
-  const sourceVerified = selectedWallet?.status === "ACTIVE";
-  const maxSourceBalance = useMemo(() => {
-    let max = 0;
-    for (const acct of accounts) {
-      for (const wallet of acct.wallets) {
-        for (const source of wallet.sources) {
-          if (source.balance.available.amount > max) {
-            max = source.balance.available.amount;
-          }
-        }
-      }
-    }
-    return max;
-  }, [accounts]);
-  const tokenCount = useMemo(() => {
-    let count = 0;
-    for (const acct of accounts) {
-      for (const wallet of acct.wallets) {
-        count += wallet.sources.length;
-      }
-    }
-    return count;
-  }, [accounts]);
-  const handlePay = useCallback(async (depositAmount2, sourceOverrides) => {
-    const parsedAmount = depositAmount2;
-    if (isNaN(parsedAmount) || parsedAmount < MIN_SEND_AMOUNT_USD) {
-      setError(`Minimum amount is $${MIN_SEND_AMOUNT_USD.toFixed(2)}.`);
+    mobileSetupFlowRef.current = false;
+    clearMobileFlowState();
+    dispatch({ type: "MOBILE_SIGN_READY", transfer: authorizedTransfer });
+  }, [polling.stopPolling, reloadAccounts]);
+  const handlePay = useCallback(async (payAmount, sourceOverrides) => {
+    if (isNaN(payAmount) || payAmount < MIN_SEND_AMOUNT_USD) {
+      dispatch({ type: "SET_ERROR", error: `Minimum amount is $${MIN_SEND_AMOUNT_USD.toFixed(2)}.` });
       return;
     }
     if (!sourceOverrides?.sourceId && !sourceId) {
-      setError("No account or provider selected.");
+      dispatch({ type: "SET_ERROR", error: "No account or provider selected." });
       return;
     }
-    if (!activeCredentialId) {
-      setError("Create a passkey on this device before continuing.");
-      setStep("create-passkey");
+    if (!state.activeCredentialId) {
+      dispatch({ type: "SET_ERROR", error: "Create a passkey on this device before continuing." });
+      dispatch({ type: "NAVIGATE", step: "create-passkey" });
       return;
     }
     const isSetupRedirect = mobileSetupFlowRef.current;
-    if (isSetupRedirect) {
-      setStep("open-wallet");
-    } else {
-      setStep("processing");
-    }
+    dispatch({ type: "PAY_STARTED", isSetupRedirect });
     processingStartedAtRef.current = Date.now();
-    setError(null);
-    setCreatingTransfer(true);
-    setDeeplinkUri(null);
-    setMobileFlow(false);
     try {
-      if (transfer?.status === "AUTHORIZED") {
-        const signedTransfer2 = await transferSigning.signTransfer(transfer.id);
-        setTransfer(signedTransfer2);
-        polling.startPolling(transfer.id);
+      if (state.transfer?.status === "AUTHORIZED") {
+        const signedTransfer2 = await transferSigning.signTransfer(state.transfer.id);
+        dispatch({ type: "TRANSFER_SIGNED", transfer: signedTransfer2 });
+        polling.startPolling(state.transfer.id);
         return;
       }
       const token = await getAccessToken();
@@ -5316,21 +5518,21 @@ function SwypePaymentInner({
       let effectiveSourceType = sourceOverrides?.sourceType ?? sourceType;
       let effectiveSourceId = sourceOverrides?.sourceId ?? sourceId;
       if (effectiveSourceType === "accountId") {
-        const acct = accounts.find((a) => a.id === effectiveSourceId);
+        const acct = state.accounts.find((a) => a.id === effectiveSourceId);
         const activeWallet = acct?.wallets.find((w) => w.status === "ACTIVE");
         if (activeWallet) {
           effectiveSourceType = "walletId";
           effectiveSourceId = activeWallet.id;
         }
       }
-      const isActiveWallet = effectiveSourceType === "walletId" && accounts.some(
+      const isActiveWallet = effectiveSourceType === "walletId" && state.accounts.some(
         (a) => a.wallets.some((w) => w.id === effectiveSourceId && w.status === "ACTIVE")
       );
       if (!isActiveWallet && !isSetupRedirect) {
         let found = false;
-        for (const acct of accounts) {
+        for (const acct of state.accounts) {
           for (const wallet of acct.wallets) {
-            if (wallet.status === "ACTIVE" && wallet.sources.some((s) => s.balance.available.amount >= parsedAmount)) {
+            if (wallet.status === "ACTIVE" && wallet.sources.some((s) => s.balance.available.amount >= payAmount)) {
               effectiveSourceType = "walletId";
               effectiveSourceId = wallet.id;
               found = true;
@@ -5342,30 +5544,28 @@ function SwypePaymentInner({
       }
       const t = await createTransfer(apiBaseUrl, token, {
         id: idempotencyKey,
-        credentialId: activeCredentialId,
+        credentialId: state.activeCredentialId,
         merchantAuthorization,
         sourceType: effectiveSourceType,
         sourceId: effectiveSourceId,
         destination,
-        amount: parsedAmount
+        amount: payAmount
       });
-      setTransfer(t);
+      dispatch({ type: "TRANSFER_CREATED", transfer: t });
       if (t.authorizationSessions && t.authorizationSessions.length > 0) {
-        const shouldUseConnector = shouldUseWalletConnector({
-          useWalletConnector,
+        const useConnector = shouldUseWalletConnector({
+          useWalletConnector: useWalletConnectorProp,
           userAgent: typeof navigator === "undefined" ? void 0 : navigator.userAgent
         });
-        if (!shouldUseConnector) {
+        if (!useConnector) {
           const uri = t.authorizationSessions[0].uri;
-          setMobileFlow(true);
           pollingTransferIdRef.current = t.id;
           polling.startPolling(t.id);
-          setDeeplinkUri(uri);
-          setStep("open-wallet");
+          dispatch({ type: "MOBILE_DEEPLINK_READY", deeplinkUri: uri });
           persistMobileFlowState({
             transferId: t.id,
             deeplinkUri: uri,
-            providerId: sourceOverrides?.sourceType === "providerId" ? sourceOverrides.sourceId : selectedProviderId,
+            providerId: sourceOverrides?.sourceType === "providerId" ? sourceOverrides.sourceId : state.selectedProviderId,
             isSetup: mobileSetupFlowRef.current
           });
           triggerDeeplink(uri);
@@ -5375,55 +5575,58 @@ function SwypePaymentInner({
         }
       }
       const signedTransfer = await transferSigning.signTransfer(t.id);
-      setTransfer(signedTransfer);
+      dispatch({ type: "TRANSFER_SIGNED", transfer: signedTransfer });
       polling.startPolling(t.id);
     } catch (err) {
       captureException(err);
       const msg = err instanceof Error ? err.message : "Transfer failed";
-      setError(msg);
+      dispatch({
+        type: "PAY_ERROR",
+        error: msg,
+        fallbackStep: isSetupRedirect ? "wallet-picker" : "deposit"
+      });
       onError?.(msg);
-      setStep(isSetupRedirect ? "wallet-picker" : "deposit");
     } finally {
-      setCreatingTransfer(false);
+      dispatch({ type: "PAY_ENDED" });
     }
   }, [
     sourceId,
     sourceType,
-    activeCredentialId,
+    state.activeCredentialId,
+    state.transfer,
+    state.accounts,
+    state.selectedProviderId,
     destination,
     apiBaseUrl,
     getAccessToken,
-    accounts,
     authExecutor,
     transferSigning,
     polling,
     onError,
-    useWalletConnector,
+    useWalletConnectorProp,
     idempotencyKey,
-    merchantAuthorization,
-    transfer
+    merchantAuthorization
   ]);
-  const [increasingLimit, setIncreasingLimit] = useState(false);
   const handleIncreaseLimit = useCallback(async () => {
     const parsedAmount = depositAmount ?? 5;
     if (!sourceId) {
-      setError("No account or provider selected.");
+      dispatch({ type: "SET_ERROR", error: "No account or provider selected." });
       return;
     }
-    if (!activeCredentialId) {
-      setError("Create a passkey on this device before continuing.");
-      setStep("create-passkey");
+    if (!state.activeCredentialId) {
+      dispatch({ type: "SET_ERROR", error: "Create a passkey on this device before continuing." });
+      dispatch({ type: "NAVIGATE", step: "create-passkey" });
       return;
     }
-    setError(null);
-    setIncreasingLimit(true);
+    dispatch({ type: "SET_ERROR", error: null });
+    dispatch({ type: "SET_INCREASING_LIMIT", value: true });
     try {
       const token = await getAccessToken();
       if (!token) throw new Error("Not authenticated");
       let effectiveSourceType = sourceType;
       let effectiveSourceId = sourceId;
       if (effectiveSourceType === "accountId") {
-        const acct = accounts.find((a) => a.id === effectiveSourceId);
+        const acct = state.accounts.find((a) => a.id === effectiveSourceId);
         const activeWallet = acct?.wallets.find((w) => w.status === "ACTIVE");
         if (activeWallet) {
           effectiveSourceType = "walletId";
@@ -5432,198 +5635,118 @@ function SwypePaymentInner({
       }
       const t = await createTransfer(apiBaseUrl, token, {
         id: idempotencyKey,
-        credentialId: activeCredentialId,
+        credentialId: state.activeCredentialId,
         merchantAuthorization,
         sourceType: effectiveSourceType,
         sourceId: effectiveSourceId,
         destination,
         amount: parsedAmount
       });
-      setTransfer(t);
       if (t.authorizationSessions && t.authorizationSessions.length > 0) {
         const uri = t.authorizationSessions[0].uri;
-        setMobileFlow(true);
         pollingTransferIdRef.current = t.id;
         mobileSetupFlowRef.current = true;
         handlingMobileReturnRef.current = false;
         polling.startPolling(t.id);
-        setDeeplinkUri(uri);
+        dispatch({ type: "INCREASE_LIMIT_DEEPLINK", transfer: t, deeplinkUri: uri });
         persistMobileFlowState({
           transferId: t.id,
           deeplinkUri: uri,
-          providerId: selectedProviderId,
+          providerId: state.selectedProviderId,
           isSetup: true
         });
         triggerDeeplink(uri);
+      } else {
+        dispatch({ type: "TRANSFER_CREATED", transfer: t });
       }
     } catch (err) {
       captureException(err);
       const msg = err instanceof Error ? err.message : "Failed to increase limit";
-      setError(msg);
+      dispatch({ type: "SET_ERROR", error: msg });
       onError?.(msg);
     } finally {
-      setIncreasingLimit(false);
+      dispatch({ type: "SET_INCREASING_LIMIT", value: false });
     }
   }, [
     depositAmount,
     sourceId,
     sourceType,
-    activeCredentialId,
+    state.activeCredentialId,
+    state.accounts,
+    state.selectedProviderId,
     apiBaseUrl,
     getAccessToken,
-    accounts,
     polling,
     onError,
     idempotencyKey,
     merchantAuthorization,
-    destination,
-    selectedProviderId
+    destination
   ]);
-  const completePasskeyRegistration = useCallback(async (credentialId, publicKey) => {
-    const token = await getAccessToken();
-    if (!token) throw new Error("Not authenticated");
-    await registerPasskey(apiBaseUrl, token, credentialId, publicKey);
-    setActiveCredentialId(credentialId);
-    window.localStorage.setItem(ACTIVE_CREDENTIAL_STORAGE_KEY, credentialId);
-    setPasskeyPopupNeeded(false);
-    const resolved = resolvePostAuthStep({
-      hasPasskey: true,
-      accounts,
-      persistedMobileFlow: loadMobileFlowState(),
-      mobileSetupInProgress: mobileSetupFlowRef.current,
-      connectingNewAccount
-    });
-    if (resolved.clearPersistedFlow) {
-      clearMobileFlowState();
-    }
-    setStep(resolved.step);
-  }, [getAccessToken, apiBaseUrl, accounts, connectingNewAccount]);
-  const handleRegisterPasskey = useCallback(async () => {
-    setRegisteringPasskey(true);
-    setError(null);
-    try {
-      const passkeyDisplayName = user?.email?.address ?? user?.google?.name ?? user?.id ?? "Swype User";
-      const { credentialId, publicKey } = await createPasskeyCredential({
-        userId: user?.id ?? "unknown",
-        displayName: passkeyDisplayName
-      });
-      await completePasskeyRegistration(credentialId, publicKey);
-    } catch (err) {
-      if (err instanceof PasskeyIframeBlockedError) {
-        setPasskeyPopupNeeded(true);
-      } else {
-        captureException(err);
-        setError(err instanceof Error ? err.message : "Failed to register passkey");
-      }
-    } finally {
-      setRegisteringPasskey(false);
-    }
-  }, [user, completePasskeyRegistration]);
-  const handleCreatePasskeyViaPopup = useCallback(async () => {
-    setRegisteringPasskey(true);
-    setError(null);
+  const handleConfirmSign = useCallback(async () => {
+    const t = state.transfer ?? polling.transfer;
+    if (!t) return;
     try {
-      const token = await getAccessToken();
-      const passkeyDisplayName = user?.email?.address ?? user?.google?.name ?? user?.id ?? "Swype User";
-      const popupOptions = buildPasskeyPopupOptions({
-        userId: user?.id ?? "unknown",
-        displayName: passkeyDisplayName,
-        authToken: token ?? void 0,
-        apiBaseUrl
-      });
-      const { credentialId } = await createPasskeyViaPopup(popupOptions);
-      setActiveCredentialId(credentialId);
-      localStorage.setItem(ACTIVE_CREDENTIAL_STORAGE_KEY, credentialId);
-      setPasskeyPopupNeeded(false);
-      const resolved = resolvePostAuthStep({
-        hasPasskey: true,
-        accounts,
-        persistedMobileFlow: loadMobileFlowState(),
-        mobileSetupInProgress: mobileSetupFlowRef.current,
-        connectingNewAccount
-      });
-      if (resolved.clearPersistedFlow) {
-        clearMobileFlowState();
-      }
-      setStep(resolved.step);
+      const signedTransfer = await transferSigning.signTransfer(t.id);
+      clearMobileFlowState();
+      dispatch({ type: "CONFIRM_SIGN_SUCCESS", transfer: signedTransfer });
+      polling.startPolling(t.id);
     } catch (err) {
       captureException(err);
-      setError(err instanceof Error ? err.message : "Failed to register passkey");
-    } finally {
-      setRegisteringPasskey(false);
+      const msg = err instanceof Error ? err.message : "Failed to sign transfer";
+      dispatch({ type: "SET_ERROR", error: msg });
+      onError?.(msg);
     }
-  }, [user, getAccessToken, apiBaseUrl, accounts, connectingNewAccount]);
-  const handleVerifyPasskeyViaPopup = useCallback(async () => {
-    setVerifyingPasskeyPopup(true);
-    setError(null);
-    try {
-      const token = await getAccessToken();
-      const matched = await findDevicePasskeyViaPopup({
-        credentialIds: knownCredentialIds,
-        rpId: resolvePasskeyRpId(),
-        authToken: token ?? void 0,
-        apiBaseUrl
-      });
-      if (matched) {
-        setActiveCredentialId(matched);
-        window.localStorage.setItem(ACTIVE_CREDENTIAL_STORAGE_KEY, matched);
-        if (token) {
-          reportPasskeyActivity(apiBaseUrl, token, matched).catch(() => {
-          });
-        }
-        setStep("login");
-      } else {
-        setStep("create-passkey");
-      }
-    } catch {
-      setStep("create-passkey");
-    } finally {
-      setVerifyingPasskeyPopup(false);
+  }, [state.transfer, polling.transfer, polling.startPolling, transferSigning, onError]);
+  const handleRetryMobileStatus = useCallback(() => {
+    dispatch({ type: "SET_ERROR", error: null });
+    handlingMobileReturnRef.current = false;
+    const currentTransfer = polling.transfer ?? state.transfer;
+    if (currentTransfer?.status === "AUTHORIZED") {
+      void handleAuthorizedMobileReturn(currentTransfer, mobileSetupFlowRef.current);
+      return;
     }
-  }, [knownCredentialIds, getAccessToken, apiBaseUrl]);
+    const transferIdToResume = pollingTransferIdRef.current ?? currentTransfer?.id;
+    if (transferIdToResume) {
+      polling.startPolling(transferIdToResume);
+    }
+  }, [handleAuthorizedMobileReturn, polling, state.transfer]);
   const handleSelectProvider = useCallback((providerId) => {
-    setSelectedProviderId(providerId);
-    setSelectedAccountId(null);
-    setConnectingNewAccount(true);
+    dispatch({ type: "SELECT_PROVIDER", providerId });
     const isMobile = !shouldUseWalletConnector({
-      useWalletConnector,
+      useWalletConnector: useWalletConnectorProp,
       userAgent: typeof navigator === "undefined" ? void 0 : navigator.userAgent
     });
     if (isMobile) {
       handlingMobileReturnRef.current = false;
       mobileSetupFlowRef.current = true;
-      const amount2 = depositAmount ?? 5;
-      handlePay(amount2, { sourceType: "providerId", sourceId: providerId });
+      const amount = depositAmount ?? 5;
+      handlePay(amount, { sourceType: "providerId", sourceId: providerId });
     } else {
-      setStep("deposit");
+      dispatch({ type: "NAVIGATE", step: "deposit" });
     }
-  }, [useWalletConnector, depositAmount, handlePay]);
+  }, [useWalletConnectorProp, depositAmount, handlePay]);
   const handleContinueConnection = useCallback(
     (accountId) => {
-      const acct = accounts.find((a) => a.id === accountId);
-      setSelectedAccountId(accountId);
-      setSelectedWalletId(acct?.wallets[0]?.id ?? null);
-      setConnectingNewAccount(false);
-      setStep("deposit");
+      const acct = state.accounts.find((a) => a.id === accountId);
+      dispatch({
+        type: "SELECT_ACCOUNT",
+        accountId,
+        walletId: acct?.wallets[0]?.id ?? null
+      });
     },
-    [accounts]
+    [state.accounts]
   );
   const handleNewPayment = useCallback(() => {
     clearMobileFlowState();
-    setStep("deposit");
-    setTransfer(null);
-    setError(null);
-    setAmount(depositAmount != null ? depositAmount.toString() : "");
-    setMobileFlow(false);
-    setDeeplinkUri(null);
     processingStartedAtRef.current = null;
     pollingTransferIdRef.current = null;
-    mobileSigningTransferIdRef.current = null;
     preSelectSourceStepRef.current = null;
-    setConnectingNewAccount(false);
-    setSelectedWalletId(null);
-    if (accounts.length > 0) setSelectedAccountId(accounts[0].id);
-  }, [depositAmount, accounts]);
+    dispatch({
+      type: "NEW_PAYMENT",
+      depositAmount,
+      firstAccountId: state.accounts.length > 0 ? state.accounts[0].id : null
+    });
+  }, [depositAmount, state.accounts]);
   const handleLogout = useCallback(async () => {
     try {
       await logout();
@@ -5634,254 +5757,464 @@ function SwypePaymentInner({
       window.localStorage.removeItem(ACTIVE_CREDENTIAL_STORAGE_KEY);
     }
     polling.stopPolling();
-    setActiveCredentialId(null);
-    setStep("login");
-    setError(null);
-    setTransfer(null);
-    setCreatingTransfer(false);
-    setRegisteringPasskey(false);
-    setProviders([]);
-    setAccounts([]);
-    setChains([]);
-    setSelectedAccountId(null);
-    setSelectedWalletId(null);
-    setSelectedProviderId(null);
-    setConnectingNewAccount(false);
-    setAmount(depositAmount != null ? depositAmount.toString() : "");
-    setMobileFlow(false);
-    setDeeplinkUri(null);
     preSelectSourceStepRef.current = null;
-    resetHeadlessLogin();
-  }, [logout, polling, depositAmount, resetHeadlessLogin]);
-  const handleConfirmSign = useCallback(async () => {
-    const t = transfer ?? polling.transfer;
-    if (!t) return;
-    try {
-      const signedTransfer = await transferSigning.signTransfer(t.id);
-      setTransfer(signedTransfer);
-      clearMobileFlowState();
-      setStep("processing");
-      polling.startPolling(t.id);
-    } catch (err) {
-      captureException(err);
-      const msg = err instanceof Error ? err.message : "Failed to sign transfer";
-      setError(msg);
-      onError?.(msg);
+    setAuthInput("");
+    setOtpCode("");
+    dispatch({ type: "LOGOUT", depositAmount });
+  }, [logout, polling, depositAmount]);
+  const pendingSelectSourceAction = authExecutor.pendingSelectSource;
+  const selectSourceChoices = useMemo(() => {
+    if (!pendingSelectSourceAction) return [];
+    const options = pendingSelectSourceAction.metadata?.options ?? [];
+    return buildSelectSourceChoices(options);
+  }, [pendingSelectSourceAction]);
+  const selectSourceRecommended = useMemo(() => {
+    if (!pendingSelectSourceAction) return null;
+    return pendingSelectSourceAction.metadata?.recommended ?? null;
+  }, [pendingSelectSourceAction]);
+  const handleSelectSourceChainChange = useCallback(
+    (chainName) => {
+      setSelectSourceChainName(chainName);
+      const chain = selectSourceChoices.find((c) => c.chainName === chainName);
+      if (!chain || chain.tokens.length === 0) return;
+      const recommendedToken = selectSourceRecommended?.chainName === chainName ? selectSourceRecommended.tokenSymbol : null;
+      const hasRecommended = !!recommendedToken && chain.tokens.some((t) => t.tokenSymbol === recommendedToken);
+      setSelectSourceTokenSymbol(
+        hasRecommended ? recommendedToken : chain.tokens[0].tokenSymbol
+      );
+    },
+    [selectSourceChoices, selectSourceRecommended]
+  );
+  const handleConfirmSelectSource = useCallback(() => {
+    authExecutor.resolveSelectSource({
+      chainName: selectSourceChainName,
+      tokenSymbol: selectSourceTokenSymbol
+    });
+  }, [authExecutor, selectSourceChainName, selectSourceTokenSymbol]);
+  useEffect(() => {
+    if (depositAmount != null) {
+      dispatch({ type: "SYNC_AMOUNT", amount: depositAmount.toString() });
     }
-  }, [transfer, polling.transfer, polling.startPolling, transferSigning, onError]);
-  if (!ready) {
-    return /* @__PURE__ */ jsx(ScreenLayout, { children: /* @__PURE__ */ jsx("div", { style: { textAlign: "center", padding: "48px 0", flex: 1, display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx(Spinner, { label: "Initializing..." }) }) });
-  }
-  if (step === "login" && !authenticated) {
-    return /* @__PURE__ */ jsx(
-      LoginScreen,
-      {
-        authInput,
-        onAuthInputChange: setAuthInput,
-        onSubmit: handleSendLoginCode,
-        sending: activeOtpStatus === "sending-code",
-        error,
-        onBack,
-        merchantInitials: merchantName ? merchantName.slice(0, 2).toUpperCase() : void 0
-      }
-    );
-  }
-  if (step === "otp-verify" && !authenticated) {
-    return /* @__PURE__ */ jsx(
-      OtpVerifyScreen,
-      {
-        maskedIdentifier: verificationTarget ? maskAuthIdentifier(verificationTarget) : "",
-        otpCode,
-        onOtpChange: (code) => {
-          setOtpCode(code);
-          setError(null);
-        },
-        onVerify: handleVerifyLoginCode,
-        onResend: handleResendLoginCode,
-        onBack: () => {
-          setVerificationTarget(null);
-          setOtpCode("");
-          setError(null);
-          setStep("login");
-        },
-        verifying: activeOtpStatus === "submitting-code",
-        error
-      }
-    );
-  }
-  if ((step === "login" || step === "otp-verify") && authenticated) {
-    return /* @__PURE__ */ jsx(ScreenLayout, { children: /* @__PURE__ */ jsx("div", { style: { textAlign: "center", padding: "48px 0", flex: 1, display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx(Spinner, { label: "Verifying your passkey..." }) }) });
-  }
-  if (step === "verify-passkey") {
-    return /* @__PURE__ */ jsx(
-      VerifyPasskeyScreen,
-      {
-        onVerify: handleVerifyPasskeyViaPopup,
-        onBack: handleLogout,
-        verifying: verifyingPasskeyPopup,
-        error
-      }
-    );
-  }
-  if (step === "create-passkey") {
-    return /* @__PURE__ */ jsx(
-      CreatePasskeyScreen,
-      {
-        onCreatePasskey: handleRegisterPasskey,
-        onBack: handleLogout,
-        creating: registeringPasskey,
-        error,
-        popupFallback: passkeyPopupNeeded,
-        onCreatePasskeyViaPopup: handleCreatePasskeyViaPopup
+  }, [depositAmount]);
+  useEffect(() => {
+    if (authenticated) return;
+    if (activeOtpErrorMessage) dispatch({ type: "SET_ERROR", error: activeOtpErrorMessage });
+  }, [activeOtpErrorMessage, authenticated]);
+  useEffect(() => {
+    if (state.step === "otp-verify" && /^\d{6}$/.test(otpCode.trim()) && activeOtpStatus !== "submitting-code") {
+      handleVerifyLoginCode();
+    }
+  }, [otpCode, state.step, activeOtpStatus, handleVerifyLoginCode]);
+  useEffect(() => {
+    if (!ready || !authenticated) return;
+    if (state.step !== "login" && state.step !== "otp-verify") return;
+    let cancelled = false;
+    dispatch({ type: "SET_ERROR", error: null });
+    setAuthInput("");
+    setOtpCode("");
+    const restoreOrDeposit = async (credId, token) => {
+      const persisted = loadMobileFlowState();
+      let accts = [];
+      try {
+        accts = await fetchAccounts(apiBaseUrl, token, credId);
+        if (cancelled) return;
+      } catch {
       }
-    );
-  }
-  if (step === "wallet-picker") {
-    return /* @__PURE__ */ jsx(
-      WalletPickerScreen,
-      {
-        providers,
-        pendingConnections,
-        loading: creatingTransfer,
-        onSelectProvider: handleSelectProvider,
-        onContinueConnection: handleContinueConnection,
-        onBack: () => setStep(activeCredentialId ? "deposit" : "create-passkey")
+      const resolved = resolvePostAuthStep({
+        hasPasskey: true,
+        accounts: accts,
+        persistedMobileFlow: persisted,
+        mobileSetupInProgress: false,
+        connectingNewAccount: false
+      });
+      if (resolved.clearPersistedFlow) clearMobileFlowState();
+      if (resolved.step === "deposit" && persisted && persisted.isSetup) {
+        try {
+          const existingTransfer = await fetchTransfer(apiBaseUrl, token, persisted.transferId);
+          if (cancelled) return;
+          if (existingTransfer.status === "AUTHORIZED") {
+            await handleAuthorizedMobileReturn(existingTransfer, true);
+            return;
+          }
+        } catch {
+        }
       }
-    );
-  }
-  if (step === "open-wallet") {
-    const providerName = providers.find((p) => p.id === selectedProviderId)?.name ?? null;
-    return /* @__PURE__ */ jsx(
-      OpenWalletScreen,
-      {
-        walletName: providerName,
-        deeplinkUri: deeplinkUri ?? "",
-        loading: creatingTransfer || !deeplinkUri,
-        error: error || polling.error,
-        onRetryStatus: handleRetryMobileStatus,
-        onLogout: handleLogout
+      if (resolved.step === "open-wallet" && persisted) {
+        try {
+          const existingTransfer = await fetchTransfer(apiBaseUrl, token, persisted.transferId);
+          if (cancelled) return;
+          const mobileResolution = resolveRestoredMobileFlow(
+            existingTransfer.status,
+            persisted.isSetup
+          );
+          if (mobileResolution.kind === "resume-setup-deposit") {
+            await handleAuthorizedMobileReturn(existingTransfer, true);
+            return;
+          }
+          if (mobileResolution.kind === "resume-confirm-sign") {
+            await handleAuthorizedMobileReturn(existingTransfer, false);
+            return;
+          }
+          if (mobileResolution.kind === "resume-success") {
+            clearMobileFlowState();
+            dispatch({ type: "MOBILE_RESUME_SUCCESS", transfer: existingTransfer });
+            onComplete?.(existingTransfer);
+            return;
+          }
+          if (mobileResolution.kind === "resume-failed") {
+            clearMobileFlowState();
+            dispatch({ type: "MOBILE_RESUME_FAILED", transfer: existingTransfer });
+            return;
+          }
+          if (mobileResolution.kind === "resume-processing") {
+            clearMobileFlowState();
+            dispatch({ type: "MOBILE_RESUME_PROCESSING", transfer: existingTransfer });
+            polling.startPolling(existingTransfer.id);
+            return;
+          }
+          if (mobileResolution.kind === "resume-stale-setup") {
+            clearMobileFlowState();
+            if (!cancelled) dispatch({ type: "NAVIGATE", step: "wallet-picker" });
+            return;
+          }
+        } catch (err) {
+          if (cancelled) return;
+          dispatch({
+            type: "ENTER_MOBILE_FLOW",
+            deeplinkUri: persisted.deeplinkUri,
+            providerId: persisted.providerId,
+            error: err instanceof Error ? err.message : "Unable to refresh wallet authorization status."
+          });
+          pollingTransferIdRef.current = persisted.transferId;
+          mobileSetupFlowRef.current = persisted.isSetup;
+          polling.startPolling(persisted.transferId);
+          return;
+        }
+        dispatch({
+          type: "ENTER_MOBILE_FLOW",
+          deeplinkUri: persisted.deeplinkUri,
+          providerId: persisted.providerId
+        });
+        pollingTransferIdRef.current = persisted.transferId;
+        mobileSetupFlowRef.current = persisted.isSetup;
+        polling.startPolling(persisted.transferId);
+        return;
       }
-    );
-  }
-  if (step === "confirm-sign") {
-    const providerName = providers.find((p) => p.id === selectedProviderId)?.name ?? null;
-    return /* @__PURE__ */ jsx(
-      ConfirmSignScreen,
-      {
-        walletName: providerName,
-        signing: transferSigning.signing,
-        error: error || transferSigning.error,
-        onSign: handleConfirmSign,
-        onLogout: handleLogout
+      dispatch({ type: "NAVIGATE", step: resolved.step });
+    };
+    const checkPasskey = async () => {
+      try {
+        const token = await getAccessToken();
+        if (!token || cancelled) return;
+        const { config } = await fetchUserConfig(apiBaseUrl, token);
+        if (cancelled) return;
+        const allPasskeys = config.passkeys ?? (config.passkey ? [config.passkey] : []);
+        dispatch({
+          type: "PASSKEY_CONFIG_LOADED",
+          knownIds: allPasskeys.map((p) => p.credentialId),
+          oneTapLimit: config.defaultAllowance ?? void 0
+        });
+        if (allPasskeys.length === 0) {
+          dispatch({ type: "NAVIGATE", step: "create-passkey" });
+          return;
+        }
+        if (state.activeCredentialId && allPasskeys.some((p) => p.credentialId === state.activeCredentialId)) {
+          await restoreOrDeposit(state.activeCredentialId, token);
+          return;
+        }
+        if (cancelled) return;
+        if (isSafari() && isInCrossOriginIframe()) {
+          dispatch({ type: "NAVIGATE", step: "verify-passkey" });
+          return;
+        }
+        const credentialIds = allPasskeys.map((p) => p.credentialId);
+        const matched = await findDevicePasskey(credentialIds);
+        if (cancelled) return;
+        if (matched) {
+          dispatch({ type: "PASSKEY_ACTIVATED", credentialId: matched });
+          window.localStorage.setItem(ACTIVE_CREDENTIAL_STORAGE_KEY, matched);
+          reportPasskeyActivity(apiBaseUrl, token, matched).catch(() => {
+          });
+          await restoreOrDeposit(matched, token);
+          return;
+        }
+        dispatch({ type: "NAVIGATE", step: "create-passkey" });
+      } catch {
+        if (!cancelled) dispatch({ type: "NAVIGATE", step: "create-passkey" });
       }
-    );
-  }
-  if (step === "deposit") {
-    if (loadingData) {
-      return /* @__PURE__ */ jsx(ScreenLayout, { children: /* @__PURE__ */ jsx("div", { style: { textAlign: "center", padding: "48px 0", flex: 1, display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx(Spinner, { label: "Loading..." }) }) });
+    };
+    checkPasskey();
+    return () => {
+      cancelled = true;
+    };
+  }, [
+    ready,
+    authenticated,
+    state.step,
+    apiBaseUrl,
+    getAccessToken,
+    state.activeCredentialId,
+    handleAuthorizedMobileReturn,
+    onComplete,
+    polling
+  ]);
+  useEffect(() => {
+    const loadAction = resolveDataLoadAction({
+      authenticated,
+      step: state.step,
+      accountsCount: state.accounts.length,
+      hasActiveCredential: !!state.activeCredentialId,
+      loading: loadingDataRef.current
+    });
+    if (loadAction === "reset") {
+      loadingDataRef.current = false;
+      dispatch({ type: "DATA_LOAD_END" });
+      return;
     }
-    const parsedAmt = depositAmount != null ? depositAmount : 5;
-    return /* @__PURE__ */ jsx(
-      DepositScreen,
-      {
-        merchantName,
-        sourceName,
-        sourceAddress,
-        sourceVerified,
-        availableBalance: maxSourceBalance,
-        remainingLimit: selectedAccount?.remainingAllowance ?? oneTapLimit,
-        tokenCount,
-        initialAmount: parsedAmt,
-        processing: creatingTransfer,
-        error,
-        onDeposit: handlePay,
-        onChangeSource: () => setStep("wallet-picker"),
-        onSwitchWallet: () => setStep("wallet-picker"),
-        onBack: onBack ?? (() => handleLogout()),
-        onLogout: handleLogout,
-        onIncreaseLimit: handleIncreaseLimit,
-        increasingLimit
-      }
-    );
-  }
-  if (step === "processing") {
-    const polledStatus = polling.transfer?.status;
-    const transferPhase = creatingTransfer ? "creating" : polledStatus === "SENDING" || polledStatus === "SENT" ? "sent" : "verifying";
-    return /* @__PURE__ */ jsx(
-      TransferStatusScreen,
-      {
-        phase: transferPhase,
-        error: error || authExecutor.error || transferSigning.error || polling.error,
-        onLogout: handleLogout
-      }
-    );
-  }
-  if (step === "select-source") {
-    return /* @__PURE__ */ jsx(
-      SelectSourceScreen,
-      {
-        choices: selectSourceChoices,
-        selectedChainName: selectSourceChainName,
-        selectedTokenSymbol: selectSourceTokenSymbol,
-        recommended: selectSourceRecommended,
-        onChainChange: handleSelectSourceChainChange,
-        onTokenChange: setSelectSourceTokenSymbol,
-        onConfirm: () => {
-          authExecutor.resolveSelectSource({
-            chainName: selectSourceChainName,
-            tokenSymbol: selectSourceTokenSymbol
+    if (loadAction === "wait") return;
+    const credentialId = state.activeCredentialId;
+    if (!credentialId) {
+      loadingDataRef.current = false;
+      dispatch({ type: "DATA_LOAD_END" });
+      return;
+    }
+    let cancelled = false;
+    loadingDataRef.current = true;
+    const load = async () => {
+      dispatch({ type: "DATA_LOAD_START" });
+      try {
+        const token = await getAccessToken();
+        if (!token) throw new Error("Not authenticated");
+        const [prov, accts, chn] = await Promise.all([
+          fetchProviders(apiBaseUrl, token),
+          fetchAccounts(apiBaseUrl, token, credentialId),
+          fetchChains(apiBaseUrl, token)
+        ]);
+        if (cancelled) return;
+        const parsedAmt = depositAmount != null ? depositAmount : 0;
+        const defaults = computeSmartDefaults(accts, parsedAmt);
+        const persisted = loadMobileFlowState();
+        const resolved = resolvePostAuthStep({
+          hasPasskey: !!state.activeCredentialId,
+          accounts: accts,
+          persistedMobileFlow: persisted,
+          mobileSetupInProgress: mobileSetupFlowRef.current,
+          connectingNewAccount: state.connectingNewAccount
+        });
+        const correctableSteps = ["deposit", "wallet-picker", "open-wallet"];
+        dispatch({
+          type: "DATA_LOADED",
+          providers: prov,
+          accounts: accts,
+          chains: chn,
+          defaults,
+          fallbackProviderId: !defaults && prov.length > 0 ? prov[0].id : null,
+          resolvedStep: correctableSteps.includes(state.step) ? resolved.step : void 0,
+          clearMobileState: resolved.clearPersistedFlow
+        });
+        if (resolved.clearPersistedFlow) clearMobileFlowState();
+      } catch (err) {
+        if (!cancelled) {
+          captureException(err);
+          dispatch({
+            type: "SET_ERROR",
+            error: err instanceof Error ? err.message : "Failed to load data"
           });
-        },
-        onLogout: handleLogout
-      }
-    );
-  }
-  if (step === "success") {
-    const succeeded = transfer?.status === "COMPLETED";
-    const displayAmount = transfer?.amount?.amount ?? 0;
-    const displayCurrency = transfer?.amount?.currency ?? "USD";
-    return /* @__PURE__ */ jsx(
-      SuccessScreen,
-      {
-        amount: displayAmount,
-        currency: displayCurrency,
-        succeeded,
-        error,
-        merchantName,
-        sourceName,
-        remainingLimit: succeeded ? (() => {
-          const limit = selectedAccount?.remainingAllowance ?? oneTapLimit;
-          return limit > displayAmount ? limit - displayAmount : 0;
-        })() : void 0,
-        onDone: onDismiss ?? handleNewPayment,
-        onLogout: handleLogout,
-        autoCloseSeconds
+        }
+      } finally {
+        if (!cancelled) {
+          loadingDataRef.current = false;
+          dispatch({ type: "DATA_LOAD_END" });
+        }
       }
-    );
-  }
-  if (step === "low-balance") {
-    return /* @__PURE__ */ jsx(
-      DepositScreen,
-      {
-        merchantName,
-        sourceName,
-        sourceAddress,
-        sourceVerified,
-        availableBalance: 0,
-        remainingLimit: selectedAccount?.remainingAllowance ?? oneTapLimit,
-        tokenCount,
-        initialAmount: depositAmount ?? 5,
-        processing: false,
-        error,
-        onDeposit: handlePay,
-        onChangeSource: () => setStep("wallet-picker"),
-        onSwitchWallet: () => setStep("wallet-picker"),
-        onBack: onBack ?? (() => handleLogout()),
-        onLogout: handleLogout
+    };
+    load();
+    return () => {
+      cancelled = true;
+      loadingDataRef.current = false;
+    };
+  }, [
+    authenticated,
+    state.step,
+    state.accounts.length,
+    apiBaseUrl,
+    getAccessToken,
+    state.activeCredentialId,
+    depositAmount,
+    state.connectingNewAccount
+  ]);
+  useEffect(() => {
+    if (!polling.transfer) return;
+    if (polling.transfer.status === "COMPLETED") {
+      clearMobileFlowState();
+      dispatch({ type: "TRANSFER_COMPLETED", transfer: polling.transfer });
+      onComplete?.(polling.transfer);
+    } else if (polling.transfer.status === "FAILED") {
+      clearMobileFlowState();
+      dispatch({ type: "TRANSFER_FAILED", transfer: polling.transfer, error: "Transfer failed." });
+    }
+  }, [polling.transfer, onComplete]);
+  useEffect(() => {
+    if (state.step !== "processing") {
+      processingStartedAtRef.current = null;
+      return;
+    }
+    if (!processingStartedAtRef.current) {
+      processingStartedAtRef.current = Date.now();
+    }
+    const elapsedMs = Date.now() - processingStartedAtRef.current;
+    const remainingMs = PROCESSING_TIMEOUT_MS - elapsedMs;
+    const handleTimeout = () => {
+      if (!hasProcessingTimedOut(processingStartedAtRef.current, Date.now())) return;
+      const status = getTransferStatus(polling.transfer, state.transfer);
+      const msg = buildProcessingTimeoutMessage(status);
+      captureException(new Error(msg));
+      polling.stopPolling();
+      dispatch({ type: "PROCESSING_TIMEOUT", error: msg });
+      onError?.(msg);
+    };
+    if (remainingMs <= 0) {
+      handleTimeout();
+      return;
+    }
+    const timeoutId = window.setTimeout(handleTimeout, remainingMs);
+    return () => window.clearTimeout(timeoutId);
+  }, [state.step, polling.transfer, state.transfer, polling.stopPolling, onError]);
+  useEffect(() => {
+    if (!state.mobileFlow) {
+      handlingMobileReturnRef.current = false;
+      return;
+    }
+    if (handlingMobileReturnRef.current) return;
+    const polledTransfer = polling.transfer;
+    if (!polledTransfer || polledTransfer.status !== "AUTHORIZED") return;
+    void handleAuthorizedMobileReturn(polledTransfer, mobileSetupFlowRef.current);
+  }, [state.mobileFlow, polling.transfer, handleAuthorizedMobileReturn]);
+  useEffect(() => {
+    if (!state.mobileFlow) return;
+    if (handlingMobileReturnRef.current) return;
+    const transferIdToResume = pollingTransferIdRef.current ?? state.transfer?.id;
+    if (!transferIdToResume) return;
+    if (!polling.isPolling) polling.startPolling(transferIdToResume);
+    const handleVisibility = () => {
+      if (document.visibilityState === "visible" && !handlingMobileReturnRef.current) {
+        polling.startPolling(transferIdToResume);
       }
+    };
+    document.addEventListener("visibilitychange", handleVisibility);
+    return () => document.removeEventListener("visibilitychange", handleVisibility);
+  }, [state.mobileFlow, state.transfer?.id, polling.isPolling, polling.startPolling]);
+  useEffect(() => {
+    if (!pendingSelectSourceAction) {
+      initializedSelectSourceActionRef.current = null;
+      setSelectSourceChainName("");
+      setSelectSourceTokenSymbol("");
+      return;
+    }
+    if (initializedSelectSourceActionRef.current === pendingSelectSourceAction.id) return;
+    const hasRecommended = !!selectSourceRecommended && selectSourceChoices.some(
+      (chain) => chain.chainName === selectSourceRecommended.chainName && chain.tokens.some((t) => t.tokenSymbol === selectSourceRecommended.tokenSymbol)
     );
-  }
-  return null;
+    if (hasRecommended && selectSourceRecommended) {
+      setSelectSourceChainName(selectSourceRecommended.chainName);
+      setSelectSourceTokenSymbol(selectSourceRecommended.tokenSymbol);
+    } else if (selectSourceChoices.length > 0 && selectSourceChoices[0].tokens.length > 0) {
+      setSelectSourceChainName(selectSourceChoices[0].chainName);
+      setSelectSourceTokenSymbol(selectSourceChoices[0].tokens[0].tokenSymbol);
+    } else {
+      setSelectSourceChainName("Base");
+      setSelectSourceTokenSymbol("USDC");
+    }
+    initializedSelectSourceActionRef.current = pendingSelectSourceAction.id;
+  }, [pendingSelectSourceAction, selectSourceChoices, selectSourceRecommended]);
+  useEffect(() => {
+    if (pendingSelectSourceAction && state.step === "processing") {
+      preSelectSourceStepRef.current = state.step;
+      dispatch({ type: "NAVIGATE", step: "select-source" });
+    } else if (!pendingSelectSourceAction && state.step === "select-source") {
+      dispatch({ type: "NAVIGATE", step: preSelectSourceStepRef.current ?? "processing" });
+      preSelectSourceStepRef.current = null;
+    }
+  }, [pendingSelectSourceAction, state.step]);
+  const handlers = useMemo(() => ({
+    onSendLoginCode: handleSendLoginCode,
+    onVerifyLoginCode: handleVerifyLoginCode,
+    onResendLoginCode: handleResendLoginCode,
+    onBackFromOtp: () => {
+      setOtpCode("");
+      dispatch({ type: "BACK_TO_LOGIN" });
+    },
+    onRegisterPasskey: handleRegisterPasskey,
+    onCreatePasskeyViaPopup: handleCreatePasskeyViaPopup,
+    onVerifyPasskeyViaPopup: handleVerifyPasskeyViaPopup,
+    onSelectProvider: handleSelectProvider,
+    onContinueConnection: handleContinueConnection,
+    onPay: handlePay,
+    onIncreaseLimit: handleIncreaseLimit,
+    onConfirmSign: handleConfirmSign,
+    onRetryMobileStatus: handleRetryMobileStatus,
+    onLogout: handleLogout,
+    onNewPayment: handleNewPayment,
+    onNavigate: (step) => dispatch({ type: "NAVIGATE", step }),
+    onSetAuthInput: setAuthInput,
+    onSetOtpCode: (code) => {
+      setOtpCode(code);
+      dispatch({ type: "SET_ERROR", error: null });
+    },
+    onSelectSourceChainChange: handleSelectSourceChainChange,
+    onSetSelectSourceTokenSymbol: setSelectSourceTokenSymbol,
+    onConfirmSelectSource: handleConfirmSelectSource
+  }), [
+    handleSendLoginCode,
+    handleVerifyLoginCode,
+    handleResendLoginCode,
+    handleRegisterPasskey,
+    handleCreatePasskeyViaPopup,
+    handleVerifyPasskeyViaPopup,
+    handleSelectProvider,
+    handleContinueConnection,
+    handlePay,
+    handleIncreaseLimit,
+    handleConfirmSign,
+    handleRetryMobileStatus,
+    handleLogout,
+    handleNewPayment,
+    handleSelectSourceChainChange,
+    handleConfirmSelectSource
+  ]);
+  return /* @__PURE__ */ jsx(
+    StepRenderer,
+    {
+      state,
+      ready,
+      authenticated,
+      activeOtpStatus,
+      pollingTransfer: polling.transfer,
+      pollingError: polling.error,
+      authExecutorError: authExecutor.error,
+      transferSigningSigning: transferSigning.signing,
+      transferSigningError: transferSigning.error,
+      pendingConnections,
+      sourceName,
+      sourceAddress,
+      sourceVerified,
+      maxSourceBalance,
+      tokenCount,
+      selectedAccount,
+      selectSourceChoices,
+      selectSourceRecommended,
+      authInput,
+      otpCode,
+      selectSourceChainName,
+      selectSourceTokenSymbol,
+      merchantName,
+      onBack,
+      onDismiss,
+      autoCloseSeconds,
+      depositAmount,
+      handlers
+    }
+  );
 }
 
 export { AdvancedSourceScreen, CreatePasskeyScreen, IconCircle, InfoBanner, OutlineButton, PasskeyIframeBlockedError, PoweredByFooter, PrimaryButton, ScreenHeader, ScreenLayout, SelectSourceScreen, SettingsMenu, SetupScreen, Spinner, StepList, SwypePayment, SwypeProvider, buildPasskeyPopupOptions, createPasskeyCredential, createPasskeyViaPopup, darkTheme, deviceHasPasskey, findDevicePasskey, findDevicePasskeyViaPopup, getTheme, lightTheme, resolvePasskeyRpId, api_exports as swypeApi, useAuthorizationExecutor, useSwypeConfig, useSwypeDepositAmount, useTransferPolling, useTransferSigning };