@swype-org/react-sdk 0.1.0 → 0.1.2

package/dist/index.js

@@ -1,9 +1,11 @@
-import { createContext, useRef, useMemo, useContext, useState, useCallback, useEffect } from 'react';
+import { createContext, useRef, useState, useCallback, useMemo, useContext, useEffect } from 'react';
 import { PrivyProvider, usePrivy } from '@privy-io/react-auth';
-import { createConfig, http, WagmiProvider, useAccount, useConnect, useSwitchChain, useSignTypedData, usePublicClient, useWalletClient } from 'wagmi';
+import { createConfig, http, WagmiProvider, useAccount, useConnect, useSwitchChain, useSignTypedData, useWalletClient } from 'wagmi';
 import { mainnet, arbitrum, base } from 'wagmi/chains';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { createPublicClient, http as http$1 } from 'viem';
+import { arbitrum as arbitrum$1, base as base$1, mainnet as mainnet$1 } from 'viem/chains';
 
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -82,13 +84,19 @@ function SwypeProvider({
   if (!queryClientRef.current) {
     queryClientRef.current = new QueryClient();
   }
+  const [depositAmount, setDepositAmountRaw] = useState(null);
+  const setDepositAmount = useCallback((amount) => {
+    setDepositAmountRaw(amount);
+  }, []);
   const value = useMemo(
     () => ({
       apiBaseUrl,
       theme,
-      tokens: getTheme(theme)
+      tokens: getTheme(theme),
+      depositAmount,
+      setDepositAmount
     }),
-    [apiBaseUrl, theme]
+    [apiBaseUrl, theme, depositAmount, setDepositAmount]
   );
   return /* @__PURE__ */ jsx(QueryClientProvider, { client: queryClientRef.current, children: /* @__PURE__ */ jsx(WagmiProvider, { config: wagmiConfig, children: /* @__PURE__ */ jsx(
     PrivyProvider,
@@ -110,6 +118,20 @@ function useSwypeConfig() {
   }
   return ctx;
 }
+function useSwypeDepositAmount() {
+  const ctx = useContext(SwypeContext);
+  if (!ctx) {
+    throw new Error(
+      "useSwypeDepositAmount must be used within a <SwypeProvider>"
+    );
+  }
+  return {
+    /** Current deposit amount, or null if not set */
+    amount: ctx.depositAmount,
+    /** Set the deposit amount (pass null to clear) */
+    setAmount: ctx.setDepositAmount
+  };
+}
 
 // src/api.ts
 var api_exports = {};
@@ -121,7 +143,8 @@ __export(api_exports, {
   fetchProviders: () => fetchProviders,
   fetchTransfer: () => fetchTransfer,
   reportActionCompletion: () => reportActionCompletion,
-  updateUserConfig: () => updateUserConfig
+  updateUserConfig: () => updateUserConfig,
+  updateUserConfigBySession: () => updateUserConfigBySession
 });
 async function throwApiError(res) {
   const body = await res.json().catch(() => null);
@@ -206,6 +229,17 @@ async function updateUserConfig(apiBaseUrl, token, config) {
   });
   if (!res.ok) await throwApiError(res);
 }
+async function updateUserConfigBySession(apiBaseUrl, sessionId, config) {
+  const res = await fetch(
+    `${apiBaseUrl}/v1/authorization-sessions/${sessionId}/user-config`,
+    {
+      method: "PATCH",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ config })
+    }
+  );
+  if (!res.ok) await throwApiError(res);
+}
 async function reportActionCompletion(apiBaseUrl, actionId, result) {
   const res = await fetch(
     `${apiBaseUrl}/v1/authorization-actions/${actionId}`,
@@ -218,6 +252,26 @@ async function reportActionCompletion(apiBaseUrl, actionId, result) {
   if (!res.ok) await throwApiError(res);
   return await res.json();
 }
+var VIEM_CHAINS = {
+  1: mainnet$1,
+  8453: base$1,
+  42161: arbitrum$1
+};
+var chainClientCache = /* @__PURE__ */ new Map();
+function getPublicClientForChain(numericChainId) {
+  const existing = chainClientCache.get(numericChainId);
+  if (existing) return existing;
+  const viemChain = VIEM_CHAINS[numericChainId];
+  if (!viemChain) {
+    throw new Error(`Unsupported chain ID: ${numericChainId}`);
+  }
+  const client = createPublicClient({
+    chain: viemChain,
+    transport: http$1()
+  });
+  chainClientCache.set(numericChainId, client);
+  return client;
+}
 function useTransferPolling(intervalMs = 3e3) {
   const { apiBaseUrl } = useSwypeConfig();
   const { getAccessToken } = usePrivy();
@@ -272,12 +326,30 @@ function useAuthorizationExecutor() {
   const { connectAsync, connectors } = useConnect();
   const { switchChainAsync } = useSwitchChain();
   const { signTypedDataAsync } = useSignTypedData();
-  const publicClient = usePublicClient();
   const { data: walletClient } = useWalletClient();
   const [executing, setExecuting] = useState(false);
   const [results, setResults] = useState([]);
   const [error, setError] = useState(null);
   const executingRef = useRef(false);
+  const [pendingSelectSource, setPendingSelectSource] = useState(null);
+  const selectSourceResolverRef = useRef(null);
+  const resolveSelectSource = useCallback((selection) => {
+    if (selectSourceResolverRef.current) {
+      selectSourceResolverRef.current(selection);
+      selectSourceResolverRef.current = null;
+      setPendingSelectSource(null);
+    }
+  }, []);
+  const [pendingAllowanceSelection, setPendingAllowanceSelection] = useState(null);
+  const allowanceSelectionResolverRef = useRef(null);
+  const sessionIdRef = useRef(null);
+  const resolveAllowanceSelection = useCallback((selection) => {
+    if (allowanceSelectionResolverRef.current) {
+      allowanceSelectionResolverRef.current(selection);
+      allowanceSelectionResolverRef.current = null;
+      setPendingAllowanceSelection(null);
+    }
+  }, []);
   const executeOpenProvider = useCallback(
     async (action) => {
       try {
@@ -321,6 +393,49 @@ function useAuthorizationExecutor() {
     },
     [isConnected, address, currentChainId, connectors, connectAsync]
   );
+  const executeSelectSource = useCallback(
+    async (action) => {
+      try {
+        const options = action.metadata?.options;
+        const recommended = action.metadata?.recommended;
+        if (!options || options.length <= 1) {
+          const selection2 = recommended ?? { chainName: "Base", tokenSymbol: "USDC" };
+          return {
+            actionId: action.id,
+            type: action.type,
+            status: "success",
+            message: `Auto-selected ${selection2.tokenSymbol} on ${selection2.chainName}.`,
+            data: {
+              selectedChainName: selection2.chainName,
+              selectedTokenSymbol: selection2.tokenSymbol
+            }
+          };
+        }
+        const selection = await new Promise((resolve) => {
+          selectSourceResolverRef.current = resolve;
+          setPendingSelectSource(action);
+        });
+        return {
+          actionId: action.id,
+          type: action.type,
+          status: "success",
+          message: `Selected ${selection.tokenSymbol} on ${selection.chainName}.`,
+          data: {
+            selectedChainName: selection.chainName,
+            selectedTokenSymbol: selection.tokenSymbol
+          }
+        };
+      } catch (err) {
+        return {
+          actionId: action.id,
+          type: action.type,
+          status: "error",
+          message: err instanceof Error ? err.message : "Failed to select source"
+        };
+      }
+    },
+    []
+  );
   const executeSwitchChain = useCallback(
     async (action) => {
       try {
@@ -334,8 +449,17 @@ function useAuthorizationExecutor() {
           };
         }
         const targetChainIdNum = parseInt(targetChainIdHex, 16);
-        await switchChainAsync({ chainId: targetChainIdNum });
         const hexChainId = `0x${targetChainIdNum.toString(16)}`;
+        if (currentChainId === targetChainIdNum) {
+          return {
+            actionId: action.id,
+            type: action.type,
+            status: "success",
+            message: `Already on chain ${hexChainId}. Skipped.`,
+            data: { chainId: hexChainId, switched: false }
+          };
+        }
+        await switchChainAsync({ chainId: targetChainIdNum });
         return {
           actionId: action.id,
           type: action.type,
@@ -352,13 +476,14 @@ function useAuthorizationExecutor() {
         };
       }
     },
-    [switchChainAsync]
+    [currentChainId, switchChainAsync]
   );
   const executeApprovePermit2 = useCallback(
     async (action) => {
       try {
         const tokenAddress = action.metadata?.tokenAddress;
         const permit2Address = action.metadata?.permit2Address;
+        const metadataChainId = action.metadata?.chainId;
         if (!tokenAddress || !permit2Address) {
           return {
             actionId: action.id,
@@ -397,21 +522,26 @@ function useAuthorizationExecutor() {
             outputs: [{ name: "", type: "bool" }]
           }
         ];
-        if (publicClient) {
-          const currentAllowance = await publicClient.readContract({
-            address: tokenAddress,
-            abi: ERC20_ABI,
-            functionName: "allowance",
-            args: [address, permit2Address]
-          });
-          if (currentAllowance > 0n) {
-            return {
-              actionId: action.id,
-              type: action.type,
-              status: "success",
-              message: `Permit2 already approved (allowance: ${currentAllowance.toString()}). Skipped.`,
-              data: { skipped: true, existingAllowance: currentAllowance.toString() }
-            };
+        const targetChainIdNum = metadataChainId ? parseInt(metadataChainId, 16) : currentChainId;
+        const chainClient = targetChainIdNum ? getPublicClientForChain(targetChainIdNum) : void 0;
+        if (chainClient) {
+          try {
+            const currentAllowance = await chainClient.readContract({
+              address: tokenAddress,
+              abi: ERC20_ABI,
+              functionName: "allowance",
+              args: [address, permit2Address]
+            });
+            if (currentAllowance > 0n) {
+              return {
+                actionId: action.id,
+                type: action.type,
+                status: "success",
+                message: `Permit2 already approved (allowance: ${currentAllowance.toString()}). Skipped.`,
+                data: { skipped: true, existingAllowance: currentAllowance.toString() }
+              };
+            }
+          } catch {
           }
         }
         if (!walletClient) {
@@ -429,8 +559,8 @@ function useAuthorizationExecutor() {
           functionName: "approve",
           args: [permit2Address, MAX_UINT256]
         });
-        if (publicClient) {
-          await publicClient.waitForTransactionReceipt({ hash: txHash });
+        if (chainClient) {
+          await chainClient.waitForTransactionReceipt({ hash: txHash });
         }
         return {
           actionId: action.id,
@@ -448,7 +578,7 @@ function useAuthorizationExecutor() {
         };
       }
     },
-    [address, publicClient, walletClient]
+    [address, currentChainId, walletClient]
   );
   const executeSignPermit2 = useCallback(
     async (action) => {
@@ -483,34 +613,55 @@ function useAuthorizationExecutor() {
             message: "Missing spenderAddress or tokenAddress in action metadata."
           };
         }
-        if (publicClient && address && metadataAmount) {
+        const permit2ChainId = metadataChainId ? parseInt(metadataChainId, 16) : currentChainId;
+        const chainClient = permit2ChainId ? getPublicClientForChain(permit2ChainId) : void 0;
+        let onChainNonce;
+        if (chainClient && address) {
           try {
-            const [existingAmount, existingExpiration] = await publicClient.readContract({
+            const [existingAmount, existingExpiration, chainNonce] = await chainClient.readContract({
               address: PERMIT2_ADDRESS,
               abi: PERMIT2_ALLOWANCE_ABI,
               functionName: "allowance",
               args: [address, tokenAddress, spenderAddress]
             });
-            const requiredSmallestUnit = BigInt(
-              Math.ceil(metadataAmount * 1e6)
-            );
-            const now = Math.floor(Date.now() / 1e3);
-            if (existingAmount >= requiredSmallestUnit && existingExpiration > now) {
-              return {
-                actionId: action.id,
-                type: action.type,
-                status: "success",
-                message: `Permit2 allowance already sufficient (${existingAmount.toString()}). Skipped.`,
-                data: { skipped: true, existingAllowance: existingAmount.toString() }
-              };
+            onChainNonce = chainNonce;
+            if (metadataAmount) {
+              const requiredSmallestUnit = BigInt(metadataAmount);
+              const now = Math.floor(Date.now() / 1e3);
+              if (existingAmount >= requiredSmallestUnit && existingExpiration > now) {
+                return {
+                  actionId: action.id,
+                  type: action.type,
+                  status: "success",
+                  message: `Permit2 allowance already sufficient (${existingAmount.toString()}). Skipped.`,
+                  data: { skipped: true, existingAllowance: existingAmount.toString() }
+                };
+              }
             }
           } catch {
           }
         }
-        const metadataAllowance = action.metadata?.allowance;
-        const permitAmount = metadataAllowance ? BigInt(Math.ceil(metadataAllowance * 1e6)) : metadataAmount ? BigInt(Math.ceil(metadataAmount * 1e6)) : BigInt(5e6);
-        const permit2ChainId = metadataChainId ? parseInt(metadataChainId, 16) : currentChainId;
-        const nonce = Number(action.metadata?.nonce ?? 0);
+        const allowanceSelection = await new Promise((resolve) => {
+          allowanceSelectionResolverRef.current = resolve;
+          setPendingAllowanceSelection(action);
+        });
+        if (allowanceSelection.topUpAmount > 0 && sessionIdRef.current) {
+          try {
+            await updateUserConfigBySession(
+              apiBaseUrl,
+              sessionIdRef.current,
+              { defaultAllowance: allowanceSelection.topUpAmount }
+            );
+          } catch {
+          }
+        }
+        const tokenDecimals = Number(action.metadata?.tokenDecimals ?? 6);
+        const topUpSmallestUnit = BigInt(
+          Math.round(allowanceSelection.topUpAmount * 10 ** tokenDecimals)
+        );
+        const baseAmount = metadataAmount ? BigInt(metadataAmount) : BigInt(0);
+        const permitAmount = baseAmount + topUpSmallestUnit;
+        const nonce = onChainNonce ?? Number(action.metadata?.nonce ?? 0);
         const sigDeadline = BigInt(Math.floor(Date.now() / 1e3) + 3600);
         const expiration = Math.floor(Date.now() / 1e3) + 30 * 24 * 60 * 60;
         const signature = await signTypedDataAsync({
@@ -567,13 +718,15 @@ function useAuthorizationExecutor() {
         };
       }
     },
-    [address, currentChainId, publicClient, signTypedDataAsync]
+    [address, currentChainId, signTypedDataAsync, apiBaseUrl]
   );
   const executeAction = useCallback(
     async (action) => {
       switch (action.type) {
         case "OPEN_PROVIDER":
           return executeOpenProvider(action);
+        case "SELECT_SOURCE":
+          return executeSelectSource(action);
         case "SWITCH_CHAIN":
           return executeSwitchChain(action);
         case "APPROVE_PERMIT_2":
@@ -589,7 +742,7 @@ function useAuthorizationExecutor() {
           };
       }
     },
-    [executeOpenProvider, executeSwitchChain, executeApprovePermit2, executeSignPermit2]
+    [executeOpenProvider, executeSelectSource, executeSwitchChain, executeApprovePermit2, executeSignPermit2]
   );
   const executeSession = useCallback(
     async (transfer) => {
@@ -601,6 +754,7 @@ function useAuthorizationExecutor() {
         return;
       }
       const sessionId = transfer.authorizationSessions[0].id;
+      sessionIdRef.current = sessionId;
       setExecuting(true);
       setError(null);
       setResults([]);
@@ -609,6 +763,19 @@ function useAuthorizationExecutor() {
         const allResults = [];
         const completedActionIds = /* @__PURE__ */ new Set();
         let pendingActions = currentSession.actions.filter((a) => a.status === "PENDING").sort((a, b) => a.orderIndex - b.orderIndex);
+        const ACTION_POLL_INTERVAL_MS = 500;
+        const ACTION_POLL_MAX_RETRIES = 20;
+        let actionPollRetries = 0;
+        while (pendingActions.length === 0 && currentSession.status !== "AUTHORIZED" && actionPollRetries < ACTION_POLL_MAX_RETRIES) {
+          await new Promise((r) => setTimeout(r, ACTION_POLL_INTERVAL_MS));
+          currentSession = await fetchAuthorizationSession(apiBaseUrl, sessionId);
+          pendingActions = currentSession.actions.filter((a) => a.status === "PENDING").sort((a, b) => a.orderIndex - b.orderIndex);
+          actionPollRetries++;
+        }
+        if (pendingActions.length === 0 && currentSession.status !== "AUTHORIZED") {
+          setError("Authorization actions were not created in time. Please try again.");
+          return;
+        }
         while (pendingActions.length > 0) {
           const action = pendingActions[0];
           if (completedActionIds.has(action.id)) break;
@@ -668,7 +835,16 @@ function useAuthorizationExecutor() {
     },
     [apiBaseUrl, executeAction]
   );
-  return { executing, results, error, executeSession };
+  return {
+    executing,
+    results,
+    error,
+    pendingSelectSource,
+    resolveSelectSource,
+    pendingAllowanceSelection,
+    resolveAllowanceSelection,
+    executeSession
+  };
 }
 function Spinner({ size = 40, label }) {
   const { tokens } = useSwypeConfig();
@@ -786,163 +962,232 @@ function ProviderCard({ provider, selected, onClick }) {
     }
   );
 }
-function AccountWalletSelector({
+function AccountDropdown({
   accounts,
-  selection,
-  onSelect
+  selectedAccountId,
+  onSelect,
+  selectedWalletId,
+  onWalletSelect
 }) {
   const { tokens } = useSwypeConfig();
-  const [expandedAccountId, setExpandedAccountId] = useState(null);
-  const activeAccounts = accounts.filter(
-    (a) => a.wallets.some((w) => w.status === "ACTIVE")
+  const [open, setOpen] = useState(false);
+  const containerRef = useRef(null);
+  const selected = accounts.find((a) => a.id === selectedAccountId);
+  const selectedWallet = selected?.wallets.find(
+    (w) => w.id === selectedWalletId
   );
-  if (activeAccounts.length === 0) return null;
-  const handleAccountClick = (accountId) => {
-    if (expandedAccountId === accountId) {
-      setExpandedAccountId(null);
-    } else {
-      setExpandedAccountId(accountId);
-    }
-  };
-  const handleWalletClick = (account, wallet) => {
-    const isAlreadySelected = selection?.accountId === account.id && selection?.walletId === wallet.id;
-    if (isAlreadySelected) {
-      onSelect(null);
-    } else {
-      onSelect({
-        accountId: account.id,
-        walletId: wallet.id,
-        accountName: account.name,
-        walletName: wallet.name,
-        chainName: wallet.chain.name
-      });
-    }
-  };
-  const formatBalance = (wallet) => {
-    const parts = [];
-    for (const src of wallet.sources) {
-      if (src.token.status === "ACTIVE") {
-        parts.push(
-          `${src.balance.available.amount.toFixed(2)} ${src.balance.available.currency} (${src.token.symbol})`
-        );
+  useEffect(() => {
+    if (!open) return;
+    const handleClick = (e) => {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setOpen(false);
       }
+    };
+    document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, [open]);
+  if (accounts.length === 0) return null;
+  const hasMultipleChoices = accounts.length > 1 || accounts.length === 1 && onWalletSelect && accounts[0].wallets.filter((w) => w.balance.available.amount > 0).length > 1;
+  if (!hasMultipleChoices) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: "6px",
+          fontSize: "0.85rem",
+          color: tokens.textSecondary
+        },
+        children: [
+          /* @__PURE__ */ jsx("span", { style: { fontWeight: 500 }, children: accounts[0].name }),
+          (selectedWallet ?? accounts[0].wallets[0]) && /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                fontSize: "0.75rem",
+                color: tokens.textMuted,
+                fontFamily: '"SF Mono", "Fira Code", monospace'
+              },
+              children: selectedWallet ? `${selectedWallet.chain.name} \xB7 ${selectedWallet.name}` : accounts[0].wallets[0]?.name
+            }
+          )
+        ]
+      }
+    );
+  }
+  const getAccountBalance = (account) => {
+    let total = 0;
+    for (const w of account.wallets) {
+      total += w.balance.available.amount;
     }
-    if (parts.length === 0 && wallet.balance) {
-      return `${wallet.balance.available.amount.toFixed(2)} ${wallet.balance.available.currency}`;
-    }
-    return parts.join(", ") || "No balance";
+    return total > 0 ? `$${total.toFixed(2)}` : "";
   };
-  return /* @__PURE__ */ jsxs("div", { style: { width: "100%" }, children: [
-    /* @__PURE__ */ jsx(
-      "label",
+  const hasActiveWallet = (account) => account.wallets.some((w) => w.status === "ACTIVE");
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, style: { position: "relative" }, children: [
+    /* @__PURE__ */ jsxs(
+      "button",
       {
+        onClick: () => setOpen(!open),
         style: {
-          display: "block",
-          fontSize: "0.8rem",
-          color: tokens.textMuted,
-          marginBottom: "8px",
-          fontWeight: 500,
-          textTransform: "uppercase",
-          letterSpacing: "0.05em"
+          display: "flex",
+          alignItems: "center",
+          gap: "6px",
+          background: "transparent",
+          border: "none",
+          cursor: "pointer",
+          padding: "4px 0",
+          color: tokens.textSecondary,
+          fontFamily: "inherit",
+          fontSize: "0.85rem",
+          outline: "none"
         },
-        children: "Or use a connected account"
+        children: [
+          /* @__PURE__ */ jsx("span", { style: { fontWeight: 500, color: tokens.text }, children: selected?.name ?? "Select account" }),
+          (selectedWallet ?? selected?.wallets?.[0]) && /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                fontSize: "0.75rem",
+                color: tokens.textMuted,
+                fontFamily: '"SF Mono", "Fira Code", monospace'
+              },
+              children: selectedWallet ? `${selectedWallet.chain.name} \xB7 ${selectedWallet.name}` : selected.wallets[0].name
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              width: "12",
+              height: "12",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              style: {
+                transform: open ? "rotate(180deg)" : "rotate(0deg)",
+                transition: "transform 0.15s ease",
+                flexShrink: 0
+              },
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: "M7 10l5 5 5-5",
+                  stroke: tokens.textMuted,
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round"
+                }
+              )
+            }
+          )
+        ]
       }
     ),
-    /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: activeAccounts.map((account) => {
-      const isExpanded = expandedAccountId === account.id;
-      const activeWallets = account.wallets.filter((w) => w.status === "ACTIVE");
-      const hasSelection = selection?.accountId === account.id;
-      return /* @__PURE__ */ jsxs(
-        "div",
-        {
-          style: {
-            border: `1px solid ${hasSelection ? tokens.accent : tokens.border}`,
-            borderRadius: tokens.radius,
-            overflow: "hidden",
-            transition: "border-color 0.15s ease"
-          },
-          children: [
+    open && /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          top: "100%",
+          left: 0,
+          right: 0,
+          marginTop: "4px",
+          background: tokens.bgCard,
+          border: `1px solid ${tokens.border}`,
+          borderRadius: tokens.radius,
+          boxShadow: tokens.shadowLg,
+          zIndex: 50,
+          overflow: "hidden",
+          minWidth: "220px"
+        },
+        children: accounts.map((account) => {
+          const isAcctSelected = account.id === selectedAccountId;
+          const balance = getAccountBalance(account);
+          const active = hasActiveWallet(account);
+          const walletsWithBalance = account.wallets.filter(
+            (w) => w.balance.available.amount > 0
+          );
+          const showWallets = onWalletSelect && walletsWithBalance.length > 0;
+          return /* @__PURE__ */ jsxs("div", { children: [
             /* @__PURE__ */ jsxs(
               "button",
               {
-                onClick: () => handleAccountClick(account.id),
+                onClick: () => {
+                  onSelect(account.id);
+                  if (!showWallets) setOpen(false);
+                },
                 style: {
-                  width: "100%",
                   display: "flex",
                   alignItems: "center",
                   justifyContent: "space-between",
-                  padding: "12px 14px",
-                  background: hasSelection ? tokens.accent + "10" : tokens.bgInput,
+                  width: "100%",
+                  padding: "10px 14px",
+                  background: isAcctSelected && !selectedWalletId ? tokens.accent + "12" : "transparent",
                   border: "none",
+                  borderBottom: showWallets ? "none" : `1px solid ${tokens.border}`,
                   cursor: "pointer",
                   color: tokens.text,
                   fontFamily: "inherit",
-                  fontSize: "0.9rem",
-                  fontWeight: 500,
+                  fontSize: "0.85rem",
                   textAlign: "left",
                   outline: "none",
-                  transition: "background 0.15s ease"
+                  transition: "background 0.1s ease"
                 },
                 children: [
-                  /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "10px" }, children: [
-                    /* @__PURE__ */ jsx(
+                  /* @__PURE__ */ jsxs("div", { style: { minWidth: 0, flex: 1 }, children: [
+                    /* @__PURE__ */ jsxs(
                       "div",
                       {
                         style: {
-                          width: 28,
-                          height: 28,
-                          borderRadius: "6px",
-                          background: tokens.accent + "25",
                           display: "flex",
                           alignItems: "center",
-                          justifyContent: "center",
-                          fontSize: "0.75rem",
-                          fontWeight: 700,
-                          color: tokens.accent,
-                          flexShrink: 0
+                          gap: "6px"
                         },
-                        children: account.name.charAt(0).toUpperCase()
+                        children: [
+                          /* @__PURE__ */ jsx("span", { style: { fontWeight: 500 }, children: account.name }),
+                          active && /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              style: {
+                                fontSize: "0.6rem",
+                                fontWeight: 600,
+                                color: tokens.success,
+                                background: tokens.successBg,
+                                padding: "1px 5px",
+                                borderRadius: "3px",
+                                textTransform: "uppercase",
+                                letterSpacing: "0.03em"
+                              },
+                              children: "Active"
+                            }
+                          )
+                        ]
                       }
                     ),
-                    /* @__PURE__ */ jsxs("div", { children: [
-                      /* @__PURE__ */ jsx("div", { children: account.name }),
-                      /* @__PURE__ */ jsxs(
-                        "div",
-                        {
-                          style: {
-                            fontSize: "0.75rem",
-                            color: tokens.textMuted,
-                            marginTop: "2px"
-                          },
-                          children: [
-                            activeWallets.length,
-                            " wallet",
-                            activeWallets.length !== 1 ? "s" : ""
-                          ]
-                        }
-                      )
-                    ] })
+                    balance && /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        style: {
+                          fontSize: "0.75rem",
+                          color: tokens.textMuted,
+                          marginTop: "2px"
+                        },
+                        children: balance
+                      }
+                    )
                   ] }),
-                  /* @__PURE__ */ jsx(
+                  isAcctSelected && !selectedWalletId && /* @__PURE__ */ jsx(
                     "svg",
                     {
                       width: "14",
                       height: "14",
                       viewBox: "0 0 24 24",
                       fill: "none",
-                      style: {
-                        transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)",
-                        transition: "transform 0.2s ease",
-                        flexShrink: 0
-                      },
+                      style: { flexShrink: 0, marginLeft: "8px" },
                       children: /* @__PURE__ */ jsx(
                         "path",
                         {
-                          d: "M7 10l5 5 5-5",
-                          stroke: tokens.textMuted,
-                          strokeWidth: "2",
-                          strokeLinecap: "round",
-                          strokeLinejoin: "round"
+                          d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z",
+                          fill: tokens.accent
                         }
                       )
                     }
@@ -950,202 +1195,720 @@ function AccountWalletSelector({
                 ]
               }
             ),
-            isExpanded && /* @__PURE__ */ jsx(
-              "div",
-              {
-                style: {
-                  borderTop: `1px solid ${tokens.border}`,
-                  background: tokens.bgCard
-                },
-                children: activeWallets.map((wallet) => {
-                  const isSelected = selection?.walletId === wallet.id;
-                  return /* @__PURE__ */ jsxs(
-                    "button",
-                    {
-                      onClick: () => handleWalletClick(account, wallet),
-                      style: {
-                        width: "100%",
-                        display: "flex",
-                        alignItems: "center",
-                        justifyContent: "space-between",
-                        padding: "10px 14px 10px 24px",
-                        background: isSelected ? tokens.accent + "12" : "transparent",
-                        border: "none",
-                        borderBottom: `1px solid ${tokens.border}`,
-                        cursor: "pointer",
-                        color: tokens.text,
-                        fontFamily: "inherit",
-                        fontSize: "0.85rem",
-                        textAlign: "left",
-                        outline: "none",
-                        transition: "background 0.1s ease"
-                      },
-                      children: [
-                        /* @__PURE__ */ jsxs("div", { style: { minWidth: 0, flex: 1 }, children: [
-                          /* @__PURE__ */ jsxs(
-                            "div",
+            showWallets && walletsWithBalance.map((wallet, wIdx) => {
+              const isWalletSelected = isAcctSelected && wallet.id === selectedWalletId;
+              const walletBal = wallet.balance.available.amount > 0 ? `$${wallet.balance.available.amount.toFixed(2)}` : "";
+              const isLastWallet = wIdx === walletsWithBalance.length - 1;
+              return /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  onClick: () => {
+                    onWalletSelect(account.id, wallet.id);
+                    setOpen(false);
+                  },
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    width: "100%",
+                    padding: "8px 14px 8px 28px",
+                    background: isWalletSelected ? tokens.accent + "12" : "transparent",
+                    border: "none",
+                    borderBottom: isLastWallet ? `1px solid ${tokens.border}` : "none",
+                    cursor: "pointer",
+                    color: tokens.text,
+                    fontFamily: "inherit",
+                    fontSize: "0.8rem",
+                    textAlign: "left",
+                    outline: "none",
+                    transition: "background 0.1s ease"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        style: {
+                          display: "flex",
+                          alignItems: "center",
+                          gap: "6px",
+                          minWidth: 0,
+                          flex: 1
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx(
+                            "span",
                             {
                               style: {
-                                display: "flex",
-                                alignItems: "center",
-                                gap: "6px"
+                                fontWeight: 500,
+                                fontSize: "0.8rem"
                               },
-                              children: [
-                                /* @__PURE__ */ jsx("span", { style: { fontWeight: 500 }, children: wallet.name }),
-                                /* @__PURE__ */ jsx(
-                                  "span",
-                                  {
-                                    style: {
-                                      fontSize: "0.7rem",
-                                      color: tokens.textMuted,
-                                      background: tokens.bgHover,
-                                      padding: "1px 6px",
-                                      borderRadius: "4px"
-                                    },
-                                    children: wallet.chain.name
-                                  }
-                                )
-                              ]
+                              children: wallet.chain.name
                             }
                           ),
                           /* @__PURE__ */ jsx(
-                            "div",
+                            "span",
                             {
                               style: {
-                                fontSize: "0.75rem",
-                                color: tokens.textSecondary,
-                                marginTop: "3px"
+                                fontSize: "0.7rem",
+                                color: tokens.textMuted,
+                                fontFamily: '"SF Mono", "Fira Code", monospace'
                               },
-                              children: formatBalance(wallet)
+                              children: wallet.name
+                            }
+                          ),
+                          walletBal && /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              style: {
+                                fontSize: "0.7rem",
+                                color: tokens.textMuted,
+                                marginLeft: "auto"
+                              },
+                              children: walletBal
                             }
                           )
-                        ] }),
-                        isSelected && /* @__PURE__ */ jsx(
-                          "svg",
+                        ]
+                      }
+                    ),
+                    isWalletSelected && /* @__PURE__ */ jsx(
+                      "svg",
+                      {
+                        width: "12",
+                        height: "12",
+                        viewBox: "0 0 24 24",
+                        fill: "none",
+                        style: {
+                          flexShrink: 0,
+                          marginLeft: "8px"
+                        },
+                        children: /* @__PURE__ */ jsx(
+                          "path",
                           {
-                            width: "16",
-                            height: "16",
-                            viewBox: "0 0 24 24",
-                            fill: "none",
-                            style: { flexShrink: 0, marginLeft: "8px" },
-                            children: /* @__PURE__ */ jsx(
-                              "path",
-                              {
-                                d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z",
-                                fill: tokens.accent
-                              }
-                            )
+                            d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z",
+                            fill: tokens.accent
                           }
                         )
-                      ]
-                    },
-                    wallet.id
-                  );
-                })
-              }
-            )
-          ]
-        },
-        account.id
-      );
-    }) }),
-    selection && /* @__PURE__ */ jsxs(
-      "div",
+                      }
+                    )
+                  ]
+                },
+                wallet.id
+              );
+            })
+          ] }, account.id);
+        })
+      }
+    )
+  ] });
+}
+var ASSETS = ["USDC", "USDT"];
+function AdvancedSettings({
+  settings,
+  onChange,
+  chains,
+  providers,
+  onConnectNewAccount,
+  connectingNewAccount
+}) {
+  const { tokens } = useSwypeConfig();
+  const [open, setOpen] = useState(false);
+  const [showProviders, setShowProviders] = useState(false);
+  return /* @__PURE__ */ jsxs("div", { style: { marginTop: "12px" }, children: [
+    /* @__PURE__ */ jsxs(
+      "button",
       {
+        onClick: () => setOpen(!open),
         style: {
-          marginTop: "8px",
-          fontSize: "0.8rem",
-          color: tokens.accent,
           display: "flex",
           alignItems: "center",
-          gap: "6px"
+          gap: "6px",
+          background: "transparent",
+          border: "none",
+          cursor: "pointer",
+          padding: "4px 0",
+          color: tokens.textMuted,
+          fontFamily: "inherit",
+          fontSize: "0.8rem",
+          fontWeight: 500,
+          outline: "none",
+          letterSpacing: "0.02em"
         },
         children: [
-          /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
-            "path",
+          /* @__PURE__ */ jsx(
+            "svg",
             {
-              d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z",
-              fill: tokens.accent
+              width: "10",
+              height: "10",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              style: {
+                transform: open ? "rotate(180deg)" : "rotate(0deg)",
+                transition: "transform 0.15s ease"
+              },
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: "M7 10l5 5 5-5",
+                  stroke: tokens.textMuted,
+                  strokeWidth: "2.5",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round"
+                }
+              )
             }
-          ) }),
-          "Using ",
-          selection.walletName,
-          " on ",
-          selection.chainName
+          ),
+          "Advanced options"
         ]
       }
-    )
-  ] });
-}
-function isMobile() {
-  if (typeof navigator === "undefined") return false;
-  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
-    navigator.userAgent
-  );
-}
-function SwypePayment({
-  destination,
-  onComplete,
-  onError
-}) {
-  const { apiBaseUrl, tokens } = useSwypeConfig();
-  const { ready, authenticated, login, getAccessToken } = usePrivy();
-  const [step, setStep] = useState("login");
-  const [error, setError] = useState(null);
-  const [providers, setProviders] = useState([]);
-  const [accounts, setAccounts] = useState([]);
-  const [loadingData, setLoadingData] = useState(false);
-  const [selectedProviderId, setSelectedProviderId] = useState(
-    null
-  );
-  const [walletSelection, setWalletSelection] = useState(null);
-  const [amount, setAmount] = useState("0.10");
-  const [topUpBalance, setTopUpBalance] = useState("");
-  const [transfer, setTransfer] = useState(null);
-  const [creatingTransfer, setCreatingTransfer] = useState(false);
-  const [mobileFlow, setMobileFlow] = useState(false);
-  const pollingTransferIdRef = useRef(null);
-  const authExecutor = useAuthorizationExecutor();
+    ),
+    open && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          marginTop: "10px",
+          padding: "14px",
+          background: tokens.bgInput,
+          borderRadius: tokens.radius,
+          border: `1px solid ${tokens.border}`
+        },
+        children: [
+          /* @__PURE__ */ jsxs("div", { style: { marginBottom: "14px" }, children: [
+            /* @__PURE__ */ jsx(
+              "label",
+              {
+                style: {
+                  display: "block",
+                  fontSize: "0.7rem",
+                  fontWeight: 600,
+                  color: tokens.textMuted,
+                  textTransform: "uppercase",
+                  letterSpacing: "0.05em",
+                  marginBottom: "6px"
+                },
+                children: "Asset"
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: "6px" }, children: ASSETS.map((asset) => {
+              const isSelected = settings.asset === asset;
+              return /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => onChange({
+                    ...settings,
+                    asset: isSelected ? null : asset
+                  }),
+                  style: {
+                    padding: "6px 14px",
+                    fontSize: "0.8rem",
+                    fontWeight: 600,
+                    fontFamily: "inherit",
+                    borderRadius: "6px",
+                    border: `1.5px solid ${isSelected ? tokens.accent : tokens.border}`,
+                    background: isSelected ? tokens.accent + "18" : "transparent",
+                    color: isSelected ? tokens.accent : tokens.text,
+                    cursor: "pointer",
+                    outline: "none",
+                    transition: "all 0.12s ease"
+                  },
+                  children: asset
+                },
+                asset
+              );
+            }) })
+          ] }),
+          chains.length > 0 && /* @__PURE__ */ jsxs("div", { style: { marginBottom: "14px" }, children: [
+            /* @__PURE__ */ jsx(
+              "label",
+              {
+                style: {
+                  display: "block",
+                  fontSize: "0.7rem",
+                  fontWeight: 600,
+                  color: tokens.textMuted,
+                  textTransform: "uppercase",
+                  letterSpacing: "0.05em",
+                  marginBottom: "6px"
+                },
+                children: "Chain"
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: "6px" }, children: chains.map((chain) => {
+              const isSelected = settings.chain === chain.name;
+              return /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => onChange({
+                    ...settings,
+                    chain: isSelected ? null : chain.name
+                  }),
+                  style: {
+                    padding: "6px 14px",
+                    fontSize: "0.8rem",
+                    fontWeight: 600,
+                    fontFamily: "inherit",
+                    borderRadius: "6px",
+                    border: `1.5px solid ${isSelected ? tokens.accent : tokens.border}`,
+                    background: isSelected ? tokens.accent + "18" : "transparent",
+                    color: isSelected ? tokens.accent : tokens.text,
+                    cursor: "pointer",
+                    outline: "none",
+                    transition: "all 0.12s ease"
+                  },
+                  children: chain.name
+                },
+                chain.id
+              );
+            }) })
+          ] }),
+          /* @__PURE__ */ jsx("div", { children: !showProviders ? /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: () => setShowProviders(true),
+              disabled: connectingNewAccount,
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: "6px",
+                background: "transparent",
+                border: `1px dashed ${tokens.border}`,
+                borderRadius: tokens.radius,
+                padding: "10px 14px",
+                width: "100%",
+                cursor: connectingNewAccount ? "not-allowed" : "pointer",
+                color: tokens.textSecondary,
+                fontFamily: "inherit",
+                fontSize: "0.825rem",
+                fontWeight: 500,
+                outline: "none",
+                opacity: connectingNewAccount ? 0.5 : 1,
+                transition: "opacity 0.1s ease"
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    width: "14",
+                    height: "14",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    children: /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        d: "M12 5v14M5 12h14",
+                        stroke: tokens.textMuted,
+                        strokeWidth: "2",
+                        strokeLinecap: "round"
+                      }
+                    )
+                  }
+                ),
+                "Connect new account"
+              ]
+            }
+          ) : /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  marginBottom: "8px"
+                },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "label",
+                    {
+                      style: {
+                        fontSize: "0.7rem",
+                        fontWeight: 600,
+                        color: tokens.textMuted,
+                        textTransform: "uppercase",
+                        letterSpacing: "0.05em"
+                      },
+                      children: "Select provider"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      onClick: () => setShowProviders(false),
+                      style: {
+                        background: "transparent",
+                        border: "none",
+                        cursor: "pointer",
+                        color: tokens.textMuted,
+                        fontSize: "0.75rem",
+                        fontFamily: "inherit",
+                        outline: "none",
+                        padding: "2px 4px"
+                      },
+                      children: "Cancel"
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: "6px"
+                },
+                children: providers.map((p) => /* @__PURE__ */ jsx(
+                  ProviderCard,
+                  {
+                    provider: p,
+                    selected: false,
+                    onClick: () => {
+                      onConnectNewAccount(p.id);
+                      setShowProviders(false);
+                    }
+                  },
+                  p.id
+                ))
+              }
+            )
+          ] }) })
+        ]
+      }
+    )
+  ] });
+}
+var TOP_UP_OPTIONS = [0, 25, 50, 100, 500];
+function AllowanceSelector({ action, onSelect }) {
+  const { tokens } = useSwypeConfig();
+  const metadataAmount = action.metadata?.amount;
+  const tokenDecimals = Number(action.metadata?.tokenDecimals ?? 6);
+  const currency = action.metadata?.currency ?? "USD";
+  const transferAmountRaw = metadataAmount ? Number(BigInt(metadataAmount)) / 10 ** tokenDecimals : 0;
+  const [selectedTopUp, setSelectedTopUp] = useState(0);
+  const totalAllowance = transferAmountRaw + selectedTopUp;
+  const formatAmount = (amount) => `$${amount.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        padding: "4px 0",
+        textAlign: "left"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "h3",
+          {
+            style: {
+              fontSize: "1rem",
+              fontWeight: 600,
+              color: tokens.text,
+              margin: "0 0 6px 0",
+              textAlign: "center"
+            },
+            children: "Set spending limit"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "p",
+          {
+            style: {
+              fontSize: "0.8rem",
+              color: tokens.textMuted,
+              margin: "0 0 16px 0",
+              lineHeight: 1.5,
+              textAlign: "center"
+            },
+            children: "Pre-authorize a higher amount so future payments go through instantly without wallet prompts."
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              padding: "10px 14px",
+              background: tokens.bgInput,
+              borderRadius: tokens.radius,
+              marginBottom: "12px",
+              fontSize: "0.825rem"
+            },
+            children: [
+              /* @__PURE__ */ jsx("span", { style: { color: tokens.textSecondary }, children: "This payment" }),
+              /* @__PURE__ */ jsxs("span", { style: { fontWeight: 600, color: tokens.text }, children: [
+                formatAmount(transferAmountRaw),
+                " ",
+                currency
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              gap: "6px",
+              marginBottom: "16px"
+            },
+            children: TOP_UP_OPTIONS.map((topUp) => {
+              const isSelected = selectedTopUp === topUp;
+              const total = transferAmountRaw + topUp;
+              const label = topUp === 0 ? "Just this payment" : `+${formatAmount(topUp)} for future payments`;
+              return /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  onClick: () => setSelectedTopUp(topUp),
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    width: "100%",
+                    padding: "12px 14px",
+                    background: isSelected ? tokens.accent + "14" : "transparent",
+                    border: `1.5px solid ${isSelected ? tokens.accent : tokens.border}`,
+                    borderRadius: tokens.radius,
+                    cursor: "pointer",
+                    color: tokens.text,
+                    fontFamily: "inherit",
+                    fontSize: "0.825rem",
+                    textAlign: "left",
+                    outline: "none",
+                    transition: "all 0.12s ease"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          style: {
+                            width: 16,
+                            height: 16,
+                            borderRadius: "50%",
+                            border: `2px solid ${isSelected ? tokens.accent : tokens.border}`,
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            flexShrink: 0
+                          },
+                          children: isSelected && /* @__PURE__ */ jsx(
+                            "div",
+                            {
+                              style: {
+                                width: 8,
+                                height: 8,
+                                borderRadius: "50%",
+                                background: tokens.accent
+                              }
+                            }
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("span", { style: { fontWeight: isSelected ? 600 : 400 }, children: label })
+                    ] }),
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        style: {
+                          fontWeight: 600,
+                          color: isSelected ? tokens.accent : tokens.textMuted,
+                          fontSize: "0.8rem",
+                          flexShrink: 0,
+                          marginLeft: "8px"
+                        },
+                        children: formatAmount(total)
+                      }
+                    )
+                  ]
+                },
+                topUp
+              );
+            })
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              padding: "10px 14px",
+              background: tokens.bgInput,
+              borderRadius: tokens.radius,
+              marginBottom: "14px",
+              fontSize: "0.825rem"
+            },
+            children: [
+              /* @__PURE__ */ jsx("span", { style: { color: tokens.textSecondary }, children: "Total authorization" }),
+              /* @__PURE__ */ jsxs("span", { style: { fontWeight: 700, color: tokens.text, fontSize: "0.9rem" }, children: [
+                formatAmount(totalAllowance),
+                " ",
+                currency
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => onSelect({ topUpAmount: selectedTopUp }),
+            style: {
+              width: "100%",
+              padding: "14px",
+              background: tokens.accent,
+              color: tokens.accentText,
+              border: "none",
+              borderRadius: tokens.radius,
+              fontSize: "1rem",
+              fontWeight: 600,
+              cursor: "pointer",
+              transition: "background 0.15s ease",
+              fontFamily: "inherit"
+            },
+            children: "Authorize & Sign"
+          }
+        )
+      ]
+    }
+  );
+}
+function isMobile() {
+  if (typeof navigator === "undefined") return false;
+  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+    navigator.userAgent
+  );
+}
+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" && wallet.lastAuthorizedToken) {
+        const matchingSource = wallet.sources.find(
+          (s) => s.token.symbol === wallet.lastAuthorizedToken.symbol
+        );
+        if (matchingSource && matchingSource.balance.available.amount >= transferAmount) {
+          return { accountId: acct.id, walletId: wallet.id };
+        }
+      }
+    }
+  }
+  let bestAccount = null;
+  let bestWallet = null;
+  let bestBalance = -1;
+  for (const acct of accts) {
+    for (const wallet of acct.wallets) {
+      const walletBal = wallet.balance.available.amount;
+      if (walletBal > bestBalance) {
+        bestBalance = walletBal;
+        bestAccount = acct;
+        bestWallet = wallet;
+      }
+    }
+  }
+  if (bestAccount) {
+    return {
+      accountId: bestAccount.id,
+      walletId: bestWallet?.id ?? null
+    };
+  }
+  return { accountId: accts[0].id, walletId: null };
+}
+function SwypePayment({
+  destination,
+  onComplete,
+  onError
+}) {
+  const { apiBaseUrl, tokens, depositAmount } = useSwypeConfig();
+  const { ready, authenticated, login, getAccessToken } = usePrivy();
+  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 [advancedSettings, setAdvancedSettings] = useState({
+    asset: null,
+    chain: null
+  });
+  const [transfer, setTransfer] = useState(null);
+  const [creatingTransfer, setCreatingTransfer] = useState(false);
+  const [mobileFlow, setMobileFlow] = useState(false);
+  const pollingTransferIdRef = useRef(null);
+  const authExecutor = useAuthorizationExecutor();
   const polling = useTransferPolling();
-  const sourceType = walletSelection ? "walletId" : "providerId";
-  const sourceId = walletSelection?.walletId ?? selectedProviderId ?? "";
+  const sourceType = connectingNewAccount ? "providerId" : selectedWalletId ? "walletId" : selectedAccountId ? "accountId" : "providerId";
+  const sourceId = connectingNewAccount ? selectedProviderId ?? "" : selectedWalletId ? selectedWalletId : selectedAccountId ? selectedAccountId : selectedProviderId ?? "";
+  useEffect(() => {
+    if (depositAmount != null) {
+      setAmount(depositAmount.toString());
+    }
+  }, [depositAmount]);
   useEffect(() => {
     if (ready && authenticated && step === "login") {
-      setStep("select-source");
+      if (depositAmount != null && depositAmount > 0) {
+        setStep("ready");
+      } else {
+        setStep("enter-amount");
+      }
     }
-  }, [ready, authenticated, step]);
+  }, [ready, authenticated, step, depositAmount]);
+  const loadingDataRef = useRef(false);
   useEffect(() => {
-    if (step !== "select-source") return;
-    if (providers.length > 0) return;
+    if (!authenticated) return;
+    if (accounts.length > 0 || loadingDataRef.current) return;
     let cancelled = false;
+    loadingDataRef.current = true;
     const load = async () => {
       setLoadingData(true);
       setError(null);
       try {
         const token = await getAccessToken();
         if (!token) throw new Error("Not authenticated");
-        const [prov, accts] = await Promise.all([
+        const [prov, accts, chn] = await Promise.all([
           fetchProviders(apiBaseUrl, token),
-          fetchAccounts(apiBaseUrl, token)
+          fetchAccounts(apiBaseUrl, token),
+          fetchChains(apiBaseUrl, token)
         ]);
         if (cancelled) return;
         setProviders(prov);
         setAccounts(accts);
-        if (prov.length > 0) setSelectedProviderId(prov[0].id);
+        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) {
+          setSelectedProviderId(prov[0].id);
+        }
       } catch (err) {
         if (!cancelled) {
           const msg = err instanceof Error ? err.message : "Failed to load data";
           setError(msg);
         }
       } finally {
-        if (!cancelled) setLoadingData(false);
+        if (!cancelled) {
+          setLoadingData(false);
+          loadingDataRef.current = false;
+        }
       }
     };
     load();
     return () => {
       cancelled = true;
+      loadingDataRef.current = false;
     };
-  }, [step, providers.length, apiBaseUrl, getAccessToken]);
+  }, [authenticated, accounts.length, apiBaseUrl, getAccessToken]);
   useEffect(() => {
     if (!polling.transfer) return;
     if (polling.transfer.status === "COMPLETED") {
@@ -1172,6 +1935,61 @@ function SwypePayment({
       document.removeEventListener("visibilitychange", handleVisibility);
     };
   }, [mobileFlow, polling]);
+  useEffect(() => {
+    if (!authExecutor.pendingSelectSource) return;
+    const action = authExecutor.pendingSelectSource;
+    const hasAdvancedOverride = advancedSettings.asset !== null || advancedSettings.chain !== null;
+    if (hasAdvancedOverride) {
+      const options = action.metadata?.options ?? [];
+      const recommended = action.metadata?.recommended;
+      const match = options.find(
+        (opt) => (advancedSettings.chain === null || opt.chainName === advancedSettings.chain) && (advancedSettings.asset === null || opt.tokenSymbol === advancedSettings.asset)
+      );
+      if (match) {
+        authExecutor.resolveSelectSource({
+          chainName: match.chainName,
+          tokenSymbol: match.tokenSymbol
+        });
+      } else if (recommended) {
+        authExecutor.resolveSelectSource({
+          chainName: recommended.chainName,
+          tokenSymbol: recommended.tokenSymbol
+        });
+      }
+    } else {
+      const options = action.metadata?.options ?? [];
+      const recommended = action.metadata?.recommended;
+      const selWallet = selectedWalletId ? accounts.find((a) => a.id === selectedAccountId)?.wallets.find((w) => w.id === selectedWalletId) : null;
+      if (selWallet) {
+        const walletMatch = options.find(
+          (opt) => opt.chainName === selWallet.chain.name
+        );
+        if (walletMatch) {
+          authExecutor.resolveSelectSource({
+            chainName: walletMatch.chainName,
+            tokenSymbol: walletMatch.tokenSymbol
+          });
+          return;
+        }
+      }
+      if (recommended) {
+        authExecutor.resolveSelectSource({
+          chainName: recommended.chainName,
+          tokenSymbol: recommended.tokenSymbol
+        });
+      } else if (options.length > 0) {
+        authExecutor.resolveSelectSource({
+          chainName: options[0].chainName,
+          tokenSymbol: options[0].tokenSymbol
+        });
+      } else {
+        authExecutor.resolveSelectSource({
+          chainName: "Base",
+          tokenSymbol: "USDC"
+        });
+      }
+    }
+  }, [authExecutor, authExecutor.pendingSelectSource, advancedSettings, selectedWalletId, selectedAccountId, accounts]);
   const handlePay = useCallback(async () => {
     const parsedAmount = parseFloat(amount);
     if (isNaN(parsedAmount) || parsedAmount <= 0) {
@@ -1179,7 +1997,7 @@ function SwypePayment({
       return;
     }
     if (!sourceId) {
-      setError("Select a source.");
+      setError("No account or provider selected.");
       return;
     }
     setStep("processing");
@@ -1189,12 +2007,6 @@ function SwypePayment({
     try {
       const token = await getAccessToken();
       if (!token) throw new Error("Not authenticated");
-      const parsedTopUp = parseFloat(topUpBalance);
-      if (!isNaN(parsedTopUp) && parsedTopUp > 0) {
-        await updateUserConfig(apiBaseUrl, token, {
-          defaultAllowance: parsedTopUp
-        });
-      }
       const t = await createTransfer(apiBaseUrl, token, {
         sourceType,
         sourceId,
@@ -1218,7 +2030,7 @@ function SwypePayment({
       const msg = err instanceof Error ? err.message : "Transfer creation failed";
       setError(msg);
       onError?.(msg);
-      setStep("enter-amount");
+      setStep("ready");
     } finally {
       setCreatingTransfer(false);
     }
@@ -1231,19 +2043,24 @@ function SwypePayment({
     getAccessToken,
     authExecutor,
     polling,
-    onError,
-    topUpBalance
+    onError
   ]);
   const handleNewPayment = () => {
-    setStep("select-source");
+    setStep("ready");
     setTransfer(null);
     setError(null);
-    setAmount("0.10");
-    setTopUpBalance("");
+    setAmount(depositAmount != null ? depositAmount.toString() : "");
     setMobileFlow(false);
     pollingTransferIdRef.current = null;
-    setWalletSelection(null);
-    if (providers.length > 0) setSelectedProviderId(providers[0].id);
+    setConnectingNewAccount(false);
+    setSelectedWalletId(null);
+    setAdvancedSettings({ asset: null, chain: null });
+    if (accounts.length > 0) setSelectedAccountId(accounts[0].id);
+  };
+  const handleConnectNewAccount = (providerId) => {
+    setSelectedProviderId(providerId);
+    setSelectedAccountId(null);
+    setConnectingNewAccount(true);
   };
   const cardStyle = {
     background: tokens.bgCard,
@@ -1281,15 +2098,10 @@ function SwypePayment({
     opacity: 0.5,
     cursor: "not-allowed"
   };
-  const btnSecondary = {
+  ({
     ...btnPrimary,
-    background: "transparent",
     color: tokens.textSecondary,
-    border: `1px solid ${tokens.border}`,
-    width: "auto",
-    flex: "0 0 auto",
-    padding: "14px 20px"
-  };
+    border: `1px solid ${tokens.border}`});
   const errorStyle = {
     background: tokens.errorBg,
     border: `1px solid ${tokens.error}`,
@@ -1380,62 +2192,20 @@ function SwypePayment({
       /* @__PURE__ */ jsx("button", { style: btnPrimary, onClick: login, children: "Connect to Swype" })
     ] }) });
   }
-  if (step === "select-source") {
-    return /* @__PURE__ */ jsxs("div", { style: cardStyle, children: [
-      stepBadge("Select payment source"),
-      /* @__PURE__ */ jsx("h2", { style: headingStyle, children: "Choose a provider" }),
-      error && /* @__PURE__ */ jsx("div", { style: errorStyle, children: error }),
-      loadingData ? /* @__PURE__ */ jsx("div", { style: { padding: "24px 0", textAlign: "center" }, children: /* @__PURE__ */ jsx(Spinner, { label: "Loading providers..." }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        accounts.length > 0 && /* @__PURE__ */ jsx("div", { style: { marginBottom: "16px" }, children: /* @__PURE__ */ jsx(
-          AccountWalletSelector,
-          {
-            accounts,
-            selection: walletSelection,
-            onSelect: (sel) => {
-              setWalletSelection(sel);
-              if (sel) setSelectedProviderId(null);
-            }
-          }
-        ) }),
-        !walletSelection && /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              display: "flex",
-              flexDirection: "column",
-              gap: "8px",
-              marginBottom: "20px"
-            },
-            children: providers.map((p) => /* @__PURE__ */ jsx(
-              ProviderCard,
-              {
-                provider: p,
-                selected: selectedProviderId === p.id,
-                onClick: () => {
-                  setSelectedProviderId(p.id);
-                  setWalletSelection(null);
-                }
-              },
-              p.id
-            ))
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            style: sourceId ? btnPrimary : btnDisabled,
-            disabled: !sourceId,
-            onClick: () => {
-              setError(null);
-              setStep("enter-amount");
-            },
-            children: "Continue"
-          }
-        )
-      ] })
-    ] });
-  }
   if (step === "enter-amount") {
+    const parsedAmount = parseFloat(amount);
+    const canContinue = !isNaN(parsedAmount) && parsedAmount > 0;
+    let maxSourceBalance = null;
+    for (const acct of accounts) {
+      for (const wallet of acct.wallets) {
+        for (const source of wallet.sources) {
+          const bal = source.balance.available.amount;
+          if (maxSourceBalance === null || bal > maxSourceBalance) {
+            maxSourceBalance = bal;
+          }
+        }
+      }
+    }
     return /* @__PURE__ */ jsxs("div", { style: cardStyle, children: [
       stepBadge("Enter amount"),
       /* @__PURE__ */ jsx("h2", { style: headingStyle, children: "How much?" }),
@@ -1451,7 +2221,7 @@ function SwypePayment({
             border: `1px solid ${tokens.border}`,
             borderRadius: tokens.radius,
             padding: "4px 14px 4px 4px",
-            marginBottom: "20px"
+            marginBottom: "8px"
           },
           children: [
             /* @__PURE__ */ jsx(
@@ -1475,6 +2245,7 @@ function SwypePayment({
                 step: "0.01",
                 value: amount,
                 onChange: (e) => setAmount(e.target.value),
+                placeholder: "0.00",
                 style: {
                   flex: 1,
                   background: "transparent",
@@ -1506,154 +2277,248 @@ function SwypePayment({
           ]
         }
       ),
-      /* @__PURE__ */ jsxs(
+      /* @__PURE__ */ jsx(
         "div",
         {
           style: {
-            display: "flex",
-            alignItems: "center",
-            gap: "8px",
-            background: tokens.bgInput,
-            border: `1px solid ${tokens.border}`,
-            borderRadius: tokens.radius,
-            padding: "4px 14px 4px 4px",
-            marginBottom: "20px"
+            fontSize: "0.8rem",
+            color: tokens.textMuted,
+            marginBottom: "20px",
+            paddingLeft: "2px"
           },
-          children: [
-            /* @__PURE__ */ jsx(
-              "span",
-              {
-                style: {
-                  fontSize: "1rem",
-                  fontWeight: 600,
-                  color: tokens.textMuted,
-                  paddingLeft: "10px",
-                  userSelect: "none"
-                },
-                children: "$"
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                type: "number",
-                min: "0",
-                step: "1",
-                placeholder: "Top up balance (optional)",
-                value: topUpBalance,
-                onChange: (e) => setTopUpBalance(e.target.value),
-                style: {
-                  flex: 1,
-                  background: "transparent",
-                  border: "none",
-                  outline: "none",
-                  color: tokens.text,
-                  fontSize: "1rem",
-                  fontWeight: 600,
-                  fontFamily: "inherit",
-                  padding: "10px 0"
-                }
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "span",
-              {
-                style: {
-                  fontSize: "0.75rem",
-                  fontWeight: 600,
-                  color: tokens.textMuted,
-                  background: tokens.bgHover,
-                  padding: "4px 10px",
-                  borderRadius: "6px",
-                  whiteSpace: "nowrap"
-                },
-                children: "USD"
-              }
-            )
-          ]
+          children: loadingData ? /* @__PURE__ */ jsx("span", { children: "Loading balance..." }) : maxSourceBalance !== null && maxSourceBalance > 0 ? /* @__PURE__ */ jsxs("span", { children: [
+            "Available: ",
+            /* @__PURE__ */ jsxs("span", { style: { fontWeight: 600, color: tokens.textSecondary }, children: [
+              "$",
+              maxSourceBalance.toFixed(2)
+            ] })
+          ] }) : null
         }
       ),
       /* @__PURE__ */ jsx(
-        "p",
+        "button",
         {
-          style: {
-            fontSize: "0.75rem",
-            color: tokens.textMuted,
-            margin: "-12px 0 16px 0",
-            lineHeight: 1.4
+          style: canContinue ? btnPrimary : btnDisabled,
+          disabled: !canContinue,
+          onClick: () => {
+            setError(null);
+            setStep("ready");
           },
-          children: "Set a higher allowance to skip wallet prompts on future payments under this amount."
+          children: "Continue"
         }
-      ),
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          style: {
-            fontSize: "0.825rem",
-            color: tokens.textSecondary,
-            marginBottom: "20px",
-            padding: "12px 14px",
-            background: tokens.bgInput,
-            borderRadius: tokens.radius,
-            lineHeight: 1.7
-          },
-          children: [
-            /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between" }, children: [
-              /* @__PURE__ */ jsx("span", { children: "To" }),
+      )
+    ] });
+  }
+  if (step === "ready") {
+    const parsedAmount = parseFloat(amount);
+    const canPay = !isNaN(parsedAmount) && parsedAmount > 0 && !!sourceId && !loadingData;
+    const noAccounts = !loadingData && accounts.length === 0;
+    return /* @__PURE__ */ jsxs("div", { style: cardStyle, children: [
+      stepBadge("Review & pay"),
+      error && /* @__PURE__ */ jsx("div", { style: errorStyle, children: error }),
+      loadingData ? /* @__PURE__ */ jsx("div", { style: { padding: "24px 0", textAlign: "center" }, children: /* @__PURE__ */ jsx(Spinner, { label: "Loading..." }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              textAlign: "center",
+              marginBottom: "20px"
+            },
+            children: [
               /* @__PURE__ */ jsxs(
-                "span",
+                "div",
                 {
                   style: {
-                    fontFamily: '"SF Mono", "Fira Code", monospace',
-                    fontSize: "0.8rem"
+                    fontSize: "2rem",
+                    fontWeight: 700,
+                    color: tokens.text,
+                    lineHeight: 1.2
                   },
                   children: [
-                    destination.address.slice(0, 6),
-                    "...",
-                    destination.address.slice(-4)
+                    "$",
+                    parsedAmount > 0 ? parsedAmount.toFixed(2) : "0.00"
                   ]
                 }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => setStep("enter-amount"),
+                  style: {
+                    background: "transparent",
+                    border: "none",
+                    cursor: "pointer",
+                    color: tokens.textMuted,
+                    fontSize: "0.75rem",
+                    fontFamily: "inherit",
+                    outline: "none",
+                    padding: "4px 8px",
+                    marginTop: "4px"
+                  },
+                  children: "Change amount"
+                }
               )
-            ] }),
-            /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between" }, children: [
-              /* @__PURE__ */ jsx("span", { children: "Token" }),
-              /* @__PURE__ */ jsx("span", { style: { fontWeight: 600 }, children: destination.token.symbol })
-            ] }),
-            /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between" }, children: [
-              /* @__PURE__ */ jsx("span", { children: "Source" }),
-              /* @__PURE__ */ jsx("span", { style: { fontWeight: 600 }, children: walletSelection ? `${walletSelection.walletName} (${walletSelection.chainName})` : providers.find((p) => p.id === selectedProviderId)?.name ?? "Provider" })
-            ] })
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "10px" }, children: [
-        /* @__PURE__ */ jsx(
-          "button",
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
           {
-            style: btnSecondary,
-            onClick: () => {
-              setError(null);
-              setStep("select-source");
+            style: {
+              fontSize: "0.825rem",
+              color: tokens.textSecondary,
+              marginBottom: "16px",
+              padding: "12px 14px",
+              background: tokens.bgInput,
+              borderRadius: tokens.radius,
+              lineHeight: 1.7
             },
-            children: "Back"
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: { display: "flex", justifyContent: "space-between" },
+                  children: [
+                    /* @__PURE__ */ jsx("span", { children: "To" }),
+                    /* @__PURE__ */ jsxs(
+                      "span",
+                      {
+                        style: {
+                          fontFamily: '"SF Mono", "Fira Code", monospace',
+                          fontSize: "0.8rem"
+                        },
+                        children: [
+                          destination.address.slice(0, 6),
+                          "...",
+                          destination.address.slice(-4)
+                        ]
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: { display: "flex", justifyContent: "space-between" },
+                  children: [
+                    /* @__PURE__ */ jsx("span", { children: "Token" }),
+                    /* @__PURE__ */ jsx("span", { style: { fontWeight: 600 }, children: destination.token.symbol })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    justifyContent: "space-between",
+                    alignItems: "center"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx("span", { children: "From" }),
+                    noAccounts ? /* @__PURE__ */ jsx("span", { style: { fontWeight: 500, color: tokens.textMuted }, children: "New account" }) : /* @__PURE__ */ jsx(
+                      AccountDropdown,
+                      {
+                        accounts,
+                        selectedAccountId,
+                        selectedWalletId,
+                        onSelect: (id) => {
+                          setSelectedAccountId(id);
+                          setSelectedWalletId(null);
+                          setConnectingNewAccount(false);
+                          setSelectedProviderId(null);
+                        },
+                        onWalletSelect: (accountId, walletId) => {
+                          setSelectedAccountId(accountId);
+                          setSelectedWalletId(walletId);
+                          setConnectingNewAccount(false);
+                          setSelectedProviderId(null);
+                        }
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
           }
         ),
+        noAccounts && /* @__PURE__ */ jsxs("div", { style: { marginBottom: "16px" }, children: [
+          /* @__PURE__ */ jsx(
+            "label",
+            {
+              style: {
+                display: "block",
+                fontSize: "0.8rem",
+                color: tokens.textMuted,
+                marginBottom: "8px",
+                fontWeight: 500,
+                textTransform: "uppercase",
+                letterSpacing: "0.05em"
+              },
+              children: "Connect a wallet"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                display: "flex",
+                flexDirection: "column",
+                gap: "8px"
+              },
+              children: providers.map((p) => /* @__PURE__ */ jsx(
+                ProviderCard,
+                {
+                  provider: p,
+                  selected: selectedProviderId === p.id,
+                  onClick: () => {
+                    setSelectedProviderId(p.id);
+                    setSelectedAccountId(null);
+                    setConnectingNewAccount(false);
+                  }
+                },
+                p.id
+              ))
+            }
+          )
+        ] }),
         /* @__PURE__ */ jsxs(
           "button",
           {
-            style: parseFloat(amount) > 0 ? btnPrimary : btnDisabled,
-            disabled: !(parseFloat(amount) > 0),
+            style: canPay ? btnPrimary : btnDisabled,
+            disabled: !canPay,
             onClick: handlePay,
             children: [
               "Pay $",
-              parseFloat(amount || "0").toFixed(2)
+              parsedAmount > 0 ? parsedAmount.toFixed(2) : "0.00"
             ]
           }
+        ),
+        !noAccounts && /* @__PURE__ */ jsx(
+          AdvancedSettings,
+          {
+            settings: advancedSettings,
+            onChange: setAdvancedSettings,
+            chains,
+            providers,
+            onConnectNewAccount: handleConnectNewAccount,
+            connectingNewAccount
+          }
         )
       ] })
     ] });
   }
   if (step === "processing") {
+    if (authExecutor.pendingAllowanceSelection) {
+      return /* @__PURE__ */ jsx("div", { style: cardStyle, children: /* @__PURE__ */ jsx(
+        AllowanceSelector,
+        {
+          action: authExecutor.pendingAllowanceSelection,
+          onSelect: authExecutor.resolveAllowanceSelection
+        }
+      ) });
+    }
     const statusLabel = creatingTransfer ? "Creating transfer..." : mobileFlow ? "Waiting for authorization..." : authExecutor.executing ? "Authorizing..." : polling.isPolling ? "Processing payment..." : "Please wait...";
     const statusDescription = creatingTransfer ? "Setting up your transfer..." : mobileFlow ? "Complete the authorization in your wallet app, then return here." : authExecutor.executing ? "Complete the wallet prompts to authorize this payment." : polling.isPolling ? "Your payment is being processed. This usually takes a few moments." : "Hang tight...";
     return /* @__PURE__ */ jsx("div", { style: cardStyle, children: /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", padding: "16px 0" }, children: [
@@ -1830,6 +2695,6 @@ function SwypePayment({
   return null;
 }
 
-export { SwypePayment, SwypeProvider, darkTheme, getTheme, lightTheme, api_exports as swypeApi, useAuthorizationExecutor, useSwypeConfig, useTransferPolling };
+export { SwypePayment, SwypeProvider, darkTheme, getTheme, lightTheme, api_exports as swypeApi, useAuthorizationExecutor, useSwypeConfig, useSwypeDepositAmount, useTransferPolling };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map