@swype-org/react-sdk 0.1.0

package/dist/index.cjs

@@ -0,0 +1,1845 @@
+'use strict';
+
+var react = require('react');
+var reactAuth = require('@privy-io/react-auth');
+var wagmi = require('wagmi');
+var chains = require('wagmi/chains');
+var reactQuery = require('@tanstack/react-query');
+var jsxRuntime = require('react/jsx-runtime');
+
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+// src/theme.ts
+var darkTheme = {
+  bg: "#0a0a0a",
+  bgCard: "#141414",
+  bgInput: "#1e1e1e",
+  bgHover: "#252525",
+  bgOverlay: "rgba(0, 0, 0, 0.6)",
+  text: "#f5f5f5",
+  textSecondary: "#a1a1aa",
+  textMuted: "#71717a",
+  textInverse: "#09090b",
+  border: "#27272a",
+  borderFocus: "#3b82f6",
+  accent: "#3b82f6",
+  accentHover: "#2563eb",
+  accentText: "#ffffff",
+  success: "#22c55e",
+  successBg: "#052e16",
+  error: "#ef4444",
+  errorBg: "#450a0a",
+  shadow: "0 1px 3px rgba(0,0,0,0.4)",
+  shadowLg: "0 8px 32px rgba(0,0,0,0.5)",
+  radius: "10px",
+  radiusLg: "16px"
+};
+var lightTheme = {
+  bg: "#f8fafc",
+  bgCard: "#ffffff",
+  bgInput: "#f1f5f9",
+  bgHover: "#e2e8f0",
+  bgOverlay: "rgba(0, 0, 0, 0.3)",
+  text: "#0f172a",
+  textSecondary: "#475569",
+  textMuted: "#94a3b8",
+  textInverse: "#ffffff",
+  border: "#e2e8f0",
+  borderFocus: "#3b82f6",
+  accent: "#3b82f6",
+  accentHover: "#2563eb",
+  accentText: "#ffffff",
+  success: "#16a34a",
+  successBg: "#f0fdf4",
+  error: "#dc2626",
+  errorBg: "#fef2f2",
+  shadow: "0 1px 3px rgba(0,0,0,0.08)",
+  shadowLg: "0 8px 32px rgba(0,0,0,0.12)",
+  radius: "10px",
+  radiusLg: "16px"
+};
+function getTheme(mode) {
+  return mode === "dark" ? darkTheme : lightTheme;
+}
+var SWYPE_PRIVY_APP_ID = "cmlil87uv004n0ck0blwumwek";
+var wagmiConfig = wagmi.createConfig({
+  chains: [chains.mainnet, chains.arbitrum, chains.base],
+  transports: {
+    [chains.mainnet.id]: wagmi.http(),
+    [chains.arbitrum.id]: wagmi.http(),
+    [chains.base.id]: wagmi.http()
+  }
+});
+var SwypeContext = react.createContext(null);
+function SwypeProvider({
+  apiBaseUrl,
+  theme = "dark",
+  children
+}) {
+  const queryClientRef = react.useRef(null);
+  if (!queryClientRef.current) {
+    queryClientRef.current = new reactQuery.QueryClient();
+  }
+  const value = react.useMemo(
+    () => ({
+      apiBaseUrl,
+      theme,
+      tokens: getTheme(theme)
+    }),
+    [apiBaseUrl, theme]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(reactQuery.QueryClientProvider, { client: queryClientRef.current, children: /* @__PURE__ */ jsxRuntime.jsx(wagmi.WagmiProvider, { config: wagmiConfig, children: /* @__PURE__ */ jsxRuntime.jsx(
+    reactAuth.PrivyProvider,
+    {
+      appId: SWYPE_PRIVY_APP_ID,
+      config: {
+        appearance: {
+          theme
+        }
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(SwypeContext.Provider, { value, children })
+    }
+  ) }) });
+}
+function useSwypeConfig() {
+  const ctx = react.useContext(SwypeContext);
+  if (!ctx) {
+    throw new Error("useSwypeConfig must be used within a <SwypeProvider>");
+  }
+  return ctx;
+}
+
+// src/api.ts
+var api_exports = {};
+__export(api_exports, {
+  createTransfer: () => createTransfer,
+  fetchAccounts: () => fetchAccounts,
+  fetchAuthorizationSession: () => fetchAuthorizationSession,
+  fetchChains: () => fetchChains,
+  fetchProviders: () => fetchProviders,
+  fetchTransfer: () => fetchTransfer,
+  reportActionCompletion: () => reportActionCompletion,
+  updateUserConfig: () => updateUserConfig
+});
+async function throwApiError(res) {
+  const body = await res.json().catch(() => null);
+  const detail = body?.error ?? body;
+  const msg = detail?.message ?? res.statusText;
+  const code = detail?.code ?? String(res.status);
+  throw new Error(`${res.status} \u2014 ${code}: ${msg}`);
+}
+async function fetchProviders(apiBaseUrl, token) {
+  const res = await fetch(`${apiBaseUrl}/v1/providers`, {
+    headers: { Authorization: `Bearer ${token}` }
+  });
+  if (!res.ok) await throwApiError(res);
+  const data = await res.json();
+  return data.items;
+}
+async function fetchChains(apiBaseUrl, token) {
+  const res = await fetch(`${apiBaseUrl}/v1/chains`, {
+    headers: { Authorization: `Bearer ${token}` }
+  });
+  if (!res.ok) await throwApiError(res);
+  const data = await res.json();
+  return data.items;
+}
+async function fetchAccounts(apiBaseUrl, token) {
+  const res = await fetch(`${apiBaseUrl}/v1/accounts`, {
+    headers: { Authorization: `Bearer ${token}` }
+  });
+  if (!res.ok) await throwApiError(res);
+  const data = await res.json();
+  return data.items;
+}
+async function createTransfer(apiBaseUrl, token, params) {
+  const body = {
+    id: crypto.randomUUID(),
+    sources: [{ [params.sourceType]: params.sourceId }],
+    destinations: [
+      {
+        chainId: params.destination.chainId,
+        token: { symbol: params.destination.token.symbol },
+        address: params.destination.address
+      }
+    ],
+    amount: {
+      amount: params.amount,
+      currency: params.currency ?? "USD"
+    }
+  };
+  const res = await fetch(`${apiBaseUrl}/v1/transfers`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${token}`
+    },
+    body: JSON.stringify(body)
+  });
+  if (!res.ok) await throwApiError(res);
+  return await res.json();
+}
+async function fetchTransfer(apiBaseUrl, token, transferId) {
+  const res = await fetch(`${apiBaseUrl}/v1/transfers/${transferId}`, {
+    headers: { Authorization: `Bearer ${token}` }
+  });
+  if (!res.ok) await throwApiError(res);
+  return await res.json();
+}
+async function fetchAuthorizationSession(apiBaseUrl, sessionId) {
+  const res = await fetch(
+    `${apiBaseUrl}/v1/authorization-sessions/${sessionId}`
+  );
+  if (!res.ok) await throwApiError(res);
+  return await res.json();
+}
+async function updateUserConfig(apiBaseUrl, token, config) {
+  const res = await fetch(`${apiBaseUrl}/v1/users`, {
+    method: "PATCH",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${token}`
+    },
+    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}`,
+    {
+      method: "PATCH",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ status: "COMPLETED", result })
+    }
+  );
+  if (!res.ok) await throwApiError(res);
+  return await res.json();
+}
+function useTransferPolling(intervalMs = 3e3) {
+  const { apiBaseUrl } = useSwypeConfig();
+  const { getAccessToken } = reactAuth.usePrivy();
+  const [transfer, setTransfer] = react.useState(null);
+  const [error, setError] = react.useState(null);
+  const [isPolling, setIsPolling] = react.useState(false);
+  const intervalRef = react.useRef(null);
+  const transferIdRef = react.useRef(null);
+  const stopPolling = react.useCallback(() => {
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+    setIsPolling(false);
+  }, []);
+  const poll = react.useCallback(async () => {
+    if (!transferIdRef.current) return;
+    try {
+      const token = await getAccessToken();
+      if (!token) {
+        setError("Could not get access token");
+        stopPolling();
+        return;
+      }
+      const t = await fetchTransfer(apiBaseUrl, token, transferIdRef.current);
+      setTransfer(t);
+      if (t.status === "COMPLETED" || t.status === "FAILED") {
+        stopPolling();
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Polling error");
+      stopPolling();
+    }
+  }, [apiBaseUrl, getAccessToken, stopPolling]);
+  const startPolling = react.useCallback(
+    (transferId) => {
+      stopPolling();
+      transferIdRef.current = transferId;
+      setIsPolling(true);
+      setError(null);
+      poll();
+      intervalRef.current = setInterval(poll, intervalMs);
+    },
+    [poll, intervalMs, stopPolling]
+  );
+  react.useEffect(() => () => stopPolling(), [stopPolling]);
+  return { transfer, error, isPolling, startPolling, stopPolling };
+}
+function useAuthorizationExecutor() {
+  const { apiBaseUrl } = useSwypeConfig();
+  const { address, chainId: currentChainId, isConnected } = wagmi.useAccount();
+  const { connectAsync, connectors } = wagmi.useConnect();
+  const { switchChainAsync } = wagmi.useSwitchChain();
+  const { signTypedDataAsync } = wagmi.useSignTypedData();
+  const publicClient = wagmi.usePublicClient();
+  const { data: walletClient } = wagmi.useWalletClient();
+  const [executing, setExecuting] = react.useState(false);
+  const [results, setResults] = react.useState([]);
+  const [error, setError] = react.useState(null);
+  const executingRef = react.useRef(false);
+  const executeOpenProvider = react.useCallback(
+    async (action) => {
+      try {
+        if (isConnected && address) {
+          const hexChainId2 = currentChainId ? `0x${currentChainId.toString(16)}` : void 0;
+          return {
+            actionId: action.id,
+            type: action.type,
+            status: "success",
+            message: `Connected. Account: ${address}, Chain: ${hexChainId2}`,
+            data: { accounts: [address], chainId: hexChainId2 }
+          };
+        }
+        const targetId = action.metadata?.wagmiConnectorId;
+        const connector = targetId ? connectors.find((c) => c.id === targetId) ?? connectors[0] : connectors[0];
+        if (!connector) {
+          return {
+            actionId: action.id,
+            type: action.type,
+            status: "error",
+            message: "No wallet connector found. Please install a supported wallet."
+          };
+        }
+        const result = await connectAsync({ connector });
+        const hexChainId = `0x${result.chainId.toString(16)}`;
+        return {
+          actionId: action.id,
+          type: action.type,
+          status: "success",
+          message: `Connected to ${connector.name}. Account: ${result.accounts[0]}, Chain: ${hexChainId}`,
+          data: { accounts: [...result.accounts], chainId: hexChainId }
+        };
+      } catch (err) {
+        return {
+          actionId: action.id,
+          type: action.type,
+          status: "error",
+          message: err instanceof Error ? err.message : "Failed to connect wallet"
+        };
+      }
+    },
+    [isConnected, address, currentChainId, connectors, connectAsync]
+  );
+  const executeSwitchChain = react.useCallback(
+    async (action) => {
+      try {
+        const targetChainIdHex = action.metadata?.targetChainId;
+        if (!targetChainIdHex) {
+          return {
+            actionId: action.id,
+            type: action.type,
+            status: "error",
+            message: "No targetChainId in action metadata."
+          };
+        }
+        const targetChainIdNum = parseInt(targetChainIdHex, 16);
+        await switchChainAsync({ chainId: targetChainIdNum });
+        const hexChainId = `0x${targetChainIdNum.toString(16)}`;
+        return {
+          actionId: action.id,
+          type: action.type,
+          status: "success",
+          message: `Switched to chain ${hexChainId}.`,
+          data: { chainId: hexChainId, switched: true }
+        };
+      } catch (err) {
+        return {
+          actionId: action.id,
+          type: action.type,
+          status: "error",
+          message: err instanceof Error ? err.message : "Failed to switch chain"
+        };
+      }
+    },
+    [switchChainAsync]
+  );
+  const executeApprovePermit2 = react.useCallback(
+    async (action) => {
+      try {
+        const tokenAddress = action.metadata?.tokenAddress;
+        const permit2Address = action.metadata?.permit2Address;
+        if (!tokenAddress || !permit2Address) {
+          return {
+            actionId: action.id,
+            type: action.type,
+            status: "error",
+            message: "Missing tokenAddress or permit2Address in action metadata."
+          };
+        }
+        if (!address) {
+          return {
+            actionId: action.id,
+            type: action.type,
+            status: "error",
+            message: "Wallet not connected."
+          };
+        }
+        const ERC20_ABI = [
+          {
+            name: "allowance",
+            type: "function",
+            stateMutability: "view",
+            inputs: [
+              { name: "owner", type: "address" },
+              { name: "spender", type: "address" }
+            ],
+            outputs: [{ name: "", type: "uint256" }]
+          },
+          {
+            name: "approve",
+            type: "function",
+            stateMutability: "nonpayable",
+            inputs: [
+              { name: "spender", type: "address" },
+              { name: "amount", type: "uint256" }
+            ],
+            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() }
+            };
+          }
+        }
+        if (!walletClient) {
+          return {
+            actionId: action.id,
+            type: action.type,
+            status: "error",
+            message: "Wallet client not available."
+          };
+        }
+        const MAX_UINT256 = 2n ** 256n - 1n;
+        const txHash = await walletClient.writeContract({
+          address: tokenAddress,
+          abi: ERC20_ABI,
+          functionName: "approve",
+          args: [permit2Address, MAX_UINT256]
+        });
+        if (publicClient) {
+          await publicClient.waitForTransactionReceipt({ hash: txHash });
+        }
+        return {
+          actionId: action.id,
+          type: action.type,
+          status: "success",
+          message: `Permit2 approved. Tx: ${txHash}`,
+          data: { txHash, approved: true }
+        };
+      } catch (err) {
+        return {
+          actionId: action.id,
+          type: action.type,
+          status: "error",
+          message: err instanceof Error ? err.message : "Failed to approve Permit2"
+        };
+      }
+    },
+    [address, publicClient, walletClient]
+  );
+  const executeSignPermit2 = react.useCallback(
+    async (action) => {
+      try {
+        const PERMIT2_ADDRESS = "0x000000000022D473030F116dDEE9F6B43aC78BA3";
+        const PERMIT2_ALLOWANCE_ABI = [
+          {
+            name: "allowance",
+            type: "function",
+            stateMutability: "view",
+            inputs: [
+              { name: "owner", type: "address" },
+              { name: "token", type: "address" },
+              { name: "spender", type: "address" }
+            ],
+            outputs: [
+              { name: "amount", type: "uint160" },
+              { name: "expiration", type: "uint48" },
+              { name: "nonce", type: "uint48" }
+            ]
+          }
+        ];
+        const spenderAddress = action.metadata?.spenderAddress;
+        const tokenAddress = action.metadata?.tokenAddress;
+        const metadataChainId = action.metadata?.chainId;
+        const metadataAmount = action.metadata?.amount;
+        if (!spenderAddress || !tokenAddress) {
+          return {
+            actionId: action.id,
+            type: action.type,
+            status: "error",
+            message: "Missing spenderAddress or tokenAddress in action metadata."
+          };
+        }
+        if (publicClient && address && metadataAmount) {
+          try {
+            const [existingAmount, existingExpiration] = await publicClient.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() }
+              };
+            }
+          } 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 sigDeadline = BigInt(Math.floor(Date.now() / 1e3) + 3600);
+        const expiration = Math.floor(Date.now() / 1e3) + 30 * 24 * 60 * 60;
+        const signature = await signTypedDataAsync({
+          domain: {
+            name: "Permit2",
+            chainId: permit2ChainId,
+            verifyingContract: PERMIT2_ADDRESS
+          },
+          types: {
+            PermitSingle: [
+              { name: "details", type: "PermitDetails" },
+              { name: "spender", type: "address" },
+              { name: "sigDeadline", type: "uint256" }
+            ],
+            PermitDetails: [
+              { name: "token", type: "address" },
+              { name: "amount", type: "uint160" },
+              { name: "expiration", type: "uint48" },
+              { name: "nonce", type: "uint48" }
+            ]
+          },
+          primaryType: "PermitSingle",
+          message: {
+            details: {
+              token: tokenAddress,
+              amount: permitAmount,
+              expiration,
+              nonce
+            },
+            spender: spenderAddress,
+            sigDeadline
+          }
+        });
+        return {
+          actionId: action.id,
+          type: action.type,
+          status: "success",
+          message: "Permit2 allowance signature obtained.",
+          data: {
+            signature,
+            signer: address,
+            nonce: nonce.toString(),
+            sigDeadline: sigDeadline.toString(),
+            expiration: expiration.toString(),
+            amount: permitAmount.toString()
+          }
+        };
+      } catch (err) {
+        return {
+          actionId: action.id,
+          type: action.type,
+          status: "error",
+          message: err instanceof Error ? err.message : "Failed to sign Permit2"
+        };
+      }
+    },
+    [address, currentChainId, publicClient, signTypedDataAsync]
+  );
+  const executeAction = react.useCallback(
+    async (action) => {
+      switch (action.type) {
+        case "OPEN_PROVIDER":
+          return executeOpenProvider(action);
+        case "SWITCH_CHAIN":
+          return executeSwitchChain(action);
+        case "APPROVE_PERMIT_2":
+          return executeApprovePermit2(action);
+        case "SIGN_PERMIT2":
+          return executeSignPermit2(action);
+        default:
+          return {
+            actionId: action.id,
+            type: action.type,
+            status: "error",
+            message: `Unsupported action type: ${action.type}`
+          };
+      }
+    },
+    [executeOpenProvider, executeSwitchChain, executeApprovePermit2, executeSignPermit2]
+  );
+  const executeSession = react.useCallback(
+    async (transfer) => {
+      if (executingRef.current) return;
+      executingRef.current = true;
+      if (!transfer.authorizationSessions || transfer.authorizationSessions.length === 0) {
+        setError("No authorization sessions available.");
+        executingRef.current = false;
+        return;
+      }
+      const sessionId = transfer.authorizationSessions[0].id;
+      setExecuting(true);
+      setError(null);
+      setResults([]);
+      try {
+        let currentSession = await fetchAuthorizationSession(apiBaseUrl, sessionId);
+        const allResults = [];
+        const completedActionIds = /* @__PURE__ */ new Set();
+        let pendingActions = currentSession.actions.filter((a) => a.status === "PENDING").sort((a, b) => a.orderIndex - b.orderIndex);
+        while (pendingActions.length > 0) {
+          const action = pendingActions[0];
+          if (completedActionIds.has(action.id)) break;
+          const result = await executeAction(action);
+          if (result.status === "error") {
+            allResults.push(result);
+            setResults([...allResults]);
+            setError(result.message);
+            break;
+          }
+          completedActionIds.add(action.id);
+          const updatedSession = await reportActionCompletion(
+            apiBaseUrl,
+            action.id,
+            result.data ?? {}
+          );
+          currentSession = updatedSession;
+          pendingActions = currentSession.actions.filter((a) => a.status === "PENDING" && !completedActionIds.has(a.id)).sort((a, b) => a.orderIndex - b.orderIndex);
+          if (action.type === "OPEN_PROVIDER" && pendingActions.length > 0) {
+            const chainResults = [result];
+            let chainBroken = false;
+            while (pendingActions.length > 0) {
+              const nextAction = pendingActions[0];
+              const nextResult = await executeAction(nextAction);
+              if (nextResult.status === "error") {
+                chainResults.push(nextResult);
+                allResults.push(...chainResults);
+                setResults([...allResults]);
+                setError(nextResult.message);
+                chainBroken = true;
+                break;
+              }
+              completedActionIds.add(nextAction.id);
+              const nextSession = await reportActionCompletion(
+                apiBaseUrl,
+                nextAction.id,
+                nextResult.data ?? {}
+              );
+              currentSession = nextSession;
+              chainResults.push(nextResult);
+              pendingActions = currentSession.actions.filter((a) => a.status === "PENDING" && !completedActionIds.has(a.id)).sort((a, b) => a.orderIndex - b.orderIndex);
+            }
+            if (chainBroken) break;
+            allResults.push(...chainResults);
+            setResults([...allResults]);
+            continue;
+          }
+          allResults.push(result);
+          setResults([...allResults]);
+        }
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "Authorization failed");
+      } finally {
+        setExecuting(false);
+        executingRef.current = false;
+      }
+    },
+    [apiBaseUrl, executeAction]
+  );
+  return { executing, results, error, executeSession };
+}
+function Spinner({ size = 40, label }) {
+  const { tokens } = useSwypeConfig();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: "12px"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              width: size,
+              height: size,
+              border: `3px solid ${tokens.border}`,
+              borderTopColor: tokens.accent,
+              borderRadius: "50%",
+              animation: "swype-spin 0.8s linear infinite"
+            }
+          }
+        ),
+        label && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { color: tokens.textSecondary, fontSize: "0.875rem", margin: 0 }, children: label }),
+        /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+        @keyframes swype-spin {
+          to { transform: rotate(360deg); }
+        }
+      ` })
+      ]
+    }
+  );
+}
+function ProviderCard({ provider, selected, onClick }) {
+  const { tokens } = useSwypeConfig();
+  const [hovered, setHovered] = react.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      onClick,
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: "12px",
+        width: "100%",
+        padding: "14px 16px",
+        background: selected ? tokens.accent + "18" : hovered ? tokens.bgHover : tokens.bgInput,
+        border: `1.5px solid ${selected ? tokens.accent : tokens.border}`,
+        borderRadius: tokens.radius,
+        cursor: "pointer",
+        transition: "all 0.15s ease",
+        color: tokens.text,
+        fontFamily: "inherit",
+        fontSize: "0.95rem",
+        fontWeight: 500,
+        textAlign: "left",
+        outline: "none"
+      },
+      children: [
+        provider.logoURI ? /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src: provider.logoURI,
+            alt: provider.name,
+            style: {
+              width: 32,
+              height: 32,
+              borderRadius: "8px",
+              objectFit: "contain"
+            }
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              width: 32,
+              height: 32,
+              borderRadius: "8px",
+              background: tokens.accent + "30",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              fontSize: "0.875rem",
+              fontWeight: 700,
+              color: tokens.accent,
+              flexShrink: 0
+            },
+            children: provider.name.charAt(0).toUpperCase()
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: provider.name }),
+        selected && /* @__PURE__ */ jsxRuntime.jsx(
+          "svg",
+          {
+            width: "18",
+            height: "18",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            style: { marginLeft: "auto", flexShrink: 0 },
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "path",
+              {
+                d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z",
+                fill: tokens.accent
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function AccountWalletSelector({
+  accounts,
+  selection,
+  onSelect
+}) {
+  const { tokens } = useSwypeConfig();
+  const [expandedAccountId, setExpandedAccountId] = react.useState(null);
+  const activeAccounts = accounts.filter(
+    (a) => a.wallets.some((w) => w.status === "ACTIVE")
+  );
+  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})`
+        );
+      }
+    }
+    if (parts.length === 0 && wallet.balance) {
+      return `${wallet.balance.available.amount.toFixed(2)} ${wallet.balance.available.currency}`;
+    }
+    return parts.join(", ") || "No balance";
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { width: "100%" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "label",
+      {
+        style: {
+          display: "block",
+          fontSize: "0.8rem",
+          color: tokens.textMuted,
+          marginBottom: "8px",
+          fontWeight: 500,
+          textTransform: "uppercase",
+          letterSpacing: "0.05em"
+        },
+        children: "Or use a connected account"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          style: {
+            border: `1px solid ${hasSelection ? tokens.accent : tokens.border}`,
+            borderRadius: tokens.radius,
+            overflow: "hidden",
+            transition: "border-color 0.15s ease"
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                onClick: () => handleAccountClick(account.id),
+                style: {
+                  width: "100%",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  padding: "12px 14px",
+                  background: hasSelection ? tokens.accent + "10" : tokens.bgInput,
+                  border: "none",
+                  cursor: "pointer",
+                  color: tokens.text,
+                  fontFamily: "inherit",
+                  fontSize: "0.9rem",
+                  fontWeight: 500,
+                  textAlign: "left",
+                  outline: "none",
+                  transition: "background 0.15s ease"
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "10px" }, children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "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
+                        },
+                        children: account.name.charAt(0).toUpperCase()
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("div", { children: account.name }),
+                      /* @__PURE__ */ jsxRuntime.jsxs(
+                        "div",
+                        {
+                          style: {
+                            fontSize: "0.75rem",
+                            color: tokens.textMuted,
+                            marginTop: "2px"
+                          },
+                          children: [
+                            activeWallets.length,
+                            " wallet",
+                            activeWallets.length !== 1 ? "s" : ""
+                          ]
+                        }
+                      )
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.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
+                      },
+                      children: /* @__PURE__ */ jsxRuntime.jsx(
+                        "path",
+                        {
+                          d: "M7 10l5 5 5-5",
+                          stroke: tokens.textMuted,
+                          strokeWidth: "2",
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round"
+                        }
+                      )
+                    }
+                  )
+                ]
+              }
+            ),
+            isExpanded && /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                style: {
+                  borderTop: `1px solid ${tokens.border}`,
+                  background: tokens.bgCard
+                },
+                children: activeWallets.map((wallet) => {
+                  const isSelected = selection?.walletId === wallet.id;
+                  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { style: { minWidth: 0, flex: 1 }, children: [
+                          /* @__PURE__ */ jsxRuntime.jsxs(
+                            "div",
+                            {
+                              style: {
+                                display: "flex",
+                                alignItems: "center",
+                                gap: "6px"
+                              },
+                              children: [
+                                /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 500 }, children: wallet.name }),
+                                /* @__PURE__ */ jsxRuntime.jsx(
+                                  "span",
+                                  {
+                                    style: {
+                                      fontSize: "0.7rem",
+                                      color: tokens.textMuted,
+                                      background: tokens.bgHover,
+                                      padding: "1px 6px",
+                                      borderRadius: "4px"
+                                    },
+                                    children: wallet.chain.name
+                                  }
+                                )
+                              ]
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            "div",
+                            {
+                              style: {
+                                fontSize: "0.75rem",
+                                color: tokens.textSecondary,
+                                marginTop: "3px"
+                              },
+                              children: formatBalance(wallet)
+                            }
+                          )
+                        ] }),
+                        isSelected && /* @__PURE__ */ jsxRuntime.jsx(
+                          "svg",
+                          {
+                            width: "16",
+                            height: "16",
+                            viewBox: "0 0 24 24",
+                            fill: "none",
+                            style: { flexShrink: 0, marginLeft: "8px" },
+                            children: /* @__PURE__ */ jsxRuntime.jsx(
+                              "path",
+                              {
+                                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__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        style: {
+          marginTop: "8px",
+          fontSize: "0.8rem",
+          color: tokens.accent,
+          display: "flex",
+          alignItems: "center",
+          gap: "6px"
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "path",
+            {
+              d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z",
+              fill: tokens.accent
+            }
+          ) }),
+          "Using ",
+          selection.walletName,
+          " on ",
+          selection.chainName
+        ]
+      }
+    )
+  ] });
+}
+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 } = reactAuth.usePrivy();
+  const [step, setStep] = react.useState("login");
+  const [error, setError] = react.useState(null);
+  const [providers, setProviders] = react.useState([]);
+  const [accounts, setAccounts] = react.useState([]);
+  const [loadingData, setLoadingData] = react.useState(false);
+  const [selectedProviderId, setSelectedProviderId] = react.useState(
+    null
+  );
+  const [walletSelection, setWalletSelection] = react.useState(null);
+  const [amount, setAmount] = react.useState("0.10");
+  const [topUpBalance, setTopUpBalance] = react.useState("");
+  const [transfer, setTransfer] = react.useState(null);
+  const [creatingTransfer, setCreatingTransfer] = react.useState(false);
+  const [mobileFlow, setMobileFlow] = react.useState(false);
+  const pollingTransferIdRef = react.useRef(null);
+  const authExecutor = useAuthorizationExecutor();
+  const polling = useTransferPolling();
+  const sourceType = walletSelection ? "walletId" : "providerId";
+  const sourceId = walletSelection?.walletId ?? selectedProviderId ?? "";
+  react.useEffect(() => {
+    if (ready && authenticated && step === "login") {
+      setStep("select-source");
+    }
+  }, [ready, authenticated, step]);
+  react.useEffect(() => {
+    if (step !== "select-source") return;
+    if (providers.length > 0) return;
+    let cancelled = false;
+    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([
+          fetchProviders(apiBaseUrl, token),
+          fetchAccounts(apiBaseUrl, token)
+        ]);
+        if (cancelled) return;
+        setProviders(prov);
+        setAccounts(accts);
+        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);
+      }
+    };
+    load();
+    return () => {
+      cancelled = true;
+    };
+  }, [step, providers.length, apiBaseUrl, getAccessToken]);
+  react.useEffect(() => {
+    if (!polling.transfer) return;
+    if (polling.transfer.status === "COMPLETED") {
+      setStep("complete");
+      setTransfer(polling.transfer);
+      onComplete?.(polling.transfer);
+    } else if (polling.transfer.status === "FAILED") {
+      setStep("complete");
+      setTransfer(polling.transfer);
+      setError("Transfer failed.");
+    }
+  }, [polling.transfer, onComplete]);
+  react.useEffect(() => {
+    if (!mobileFlow || !polling.isPolling) return;
+    const handleVisibility = () => {
+      if (document.visibilityState === "visible") {
+        if (pollingTransferIdRef.current) {
+          polling.startPolling(pollingTransferIdRef.current);
+        }
+      }
+    };
+    document.addEventListener("visibilitychange", handleVisibility);
+    return () => {
+      document.removeEventListener("visibilitychange", handleVisibility);
+    };
+  }, [mobileFlow, polling]);
+  const handlePay = react.useCallback(async () => {
+    const parsedAmount = parseFloat(amount);
+    if (isNaN(parsedAmount) || parsedAmount <= 0) {
+      setError("Enter a valid amount.");
+      return;
+    }
+    if (!sourceId) {
+      setError("Select a source.");
+      return;
+    }
+    setStep("processing");
+    setError(null);
+    setCreatingTransfer(true);
+    setMobileFlow(false);
+    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,
+        destination,
+        amount: parsedAmount
+      });
+      setTransfer(t);
+      if (t.authorizationSessions && t.authorizationSessions.length > 0) {
+        if (isMobile()) {
+          setMobileFlow(true);
+          pollingTransferIdRef.current = t.id;
+          polling.startPolling(t.id);
+          window.location.href = t.authorizationSessions[0].uri;
+          return;
+        } else {
+          await authExecutor.executeSession(t);
+        }
+      }
+      polling.startPolling(t.id);
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : "Transfer creation failed";
+      setError(msg);
+      onError?.(msg);
+      setStep("enter-amount");
+    } finally {
+      setCreatingTransfer(false);
+    }
+  }, [
+    amount,
+    sourceId,
+    sourceType,
+    destination,
+    apiBaseUrl,
+    getAccessToken,
+    authExecutor,
+    polling,
+    onError,
+    topUpBalance
+  ]);
+  const handleNewPayment = () => {
+    setStep("select-source");
+    setTransfer(null);
+    setError(null);
+    setAmount("0.10");
+    setTopUpBalance("");
+    setMobileFlow(false);
+    pollingTransferIdRef.current = null;
+    setWalletSelection(null);
+    if (providers.length > 0) setSelectedProviderId(providers[0].id);
+  };
+  const cardStyle = {
+    background: tokens.bgCard,
+    borderRadius: tokens.radiusLg,
+    border: `1px solid ${tokens.border}`,
+    padding: "28px 24px",
+    maxWidth: 420,
+    width: "100%",
+    boxShadow: tokens.shadowLg,
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    color: tokens.text
+  };
+  const headingStyle = {
+    fontSize: "1.2rem",
+    fontWeight: 600,
+    margin: "0 0 20px 0",
+    color: tokens.text,
+    textAlign: "center"
+  };
+  const btnPrimary = {
+    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"
+  };
+  const btnDisabled = {
+    ...btnPrimary,
+    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"
+  };
+  const errorStyle = {
+    background: tokens.errorBg,
+    border: `1px solid ${tokens.error}`,
+    borderRadius: tokens.radius,
+    padding: "10px 14px",
+    color: tokens.error,
+    fontSize: "0.825rem",
+    marginBottom: "14px",
+    lineHeight: 1.5
+  };
+  const stepBadge = (label) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: "8px",
+        marginBottom: "20px"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              width: 6,
+              height: 6,
+              borderRadius: "50%",
+              background: tokens.accent
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            style: {
+              fontSize: "0.75rem",
+              textTransform: "uppercase",
+              letterSpacing: "0.06em",
+              color: tokens.textMuted,
+              fontWeight: 600
+            },
+            children: label
+          }
+        )
+      ]
+    }
+  );
+  if (!ready) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: cardStyle, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { textAlign: "center", padding: "24px 0" }, children: /* @__PURE__ */ jsxRuntime.jsx(Spinner, { label: "Initializing..." }) }) });
+  }
+  if (step === "login" && !authenticated) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: cardStyle, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { textAlign: "center" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "svg",
+        {
+          width: "48",
+          height: "48",
+          viewBox: "0 0 48 48",
+          fill: "none",
+          style: { margin: "0 auto 16px" },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "48", height: "48", rx: "12", fill: tokens.accent + "20" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "path",
+              {
+                d: "M24 14v20M14 24h20",
+                stroke: tokens.accent,
+                strokeWidth: "2.5",
+                strokeLinecap: "round"
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { style: { ...headingStyle, marginBottom: "8px" }, children: "Pay with Swype" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "p",
+        {
+          style: {
+            fontSize: "0.875rem",
+            color: tokens.textSecondary,
+            margin: "0 0 24px 0",
+            lineHeight: 1.5
+          },
+          children: "Connect your account to continue"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { style: btnPrimary, onClick: login, children: "Connect to Swype" })
+    ] }) });
+  }
+  if (step === "select-source") {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: cardStyle, children: [
+      stepBadge("Select payment source"),
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle, children: "Choose a provider" }),
+      error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: errorStyle, children: error }),
+      loadingData ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "24px 0", textAlign: "center" }, children: /* @__PURE__ */ jsxRuntime.jsx(Spinner, { label: "Loading providers..." }) }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        accounts.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginBottom: "16px" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+          AccountWalletSelector,
+          {
+            accounts,
+            selection: walletSelection,
+            onSelect: (sel) => {
+              setWalletSelection(sel);
+              if (sel) setSelectedProviderId(null);
+            }
+          }
+        ) }),
+        !walletSelection && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              gap: "8px",
+              marginBottom: "20px"
+            },
+            children: providers.map((p) => /* @__PURE__ */ jsxRuntime.jsx(
+              ProviderCard,
+              {
+                provider: p,
+                selected: selectedProviderId === p.id,
+                onClick: () => {
+                  setSelectedProviderId(p.id);
+                  setWalletSelection(null);
+                }
+              },
+              p.id
+            ))
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            style: sourceId ? btnPrimary : btnDisabled,
+            disabled: !sourceId,
+            onClick: () => {
+              setError(null);
+              setStep("enter-amount");
+            },
+            children: "Continue"
+          }
+        )
+      ] })
+    ] });
+  }
+  if (step === "enter-amount") {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: cardStyle, children: [
+      stepBadge("Enter amount"),
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle, children: "How much?" }),
+      error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: errorStyle, children: error }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "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"
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                style: {
+                  fontSize: "1.5rem",
+                  fontWeight: 600,
+                  color: tokens.textMuted,
+                  paddingLeft: "10px",
+                  userSelect: "none"
+                },
+                children: "$"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                type: "number",
+                min: "0.01",
+                step: "0.01",
+                value: amount,
+                onChange: (e) => setAmount(e.target.value),
+                style: {
+                  flex: 1,
+                  background: "transparent",
+                  border: "none",
+                  outline: "none",
+                  color: tokens.text,
+                  fontSize: "1.5rem",
+                  fontWeight: 600,
+                  fontFamily: "inherit",
+                  padding: "10px 0"
+                },
+                autoFocus: true
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                style: {
+                  fontSize: "0.825rem",
+                  fontWeight: 600,
+                  color: tokens.textMuted,
+                  background: tokens.bgHover,
+                  padding: "4px 10px",
+                  borderRadius: "6px"
+                },
+                children: "USD"
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "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"
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                style: {
+                  fontSize: "1rem",
+                  fontWeight: 600,
+                  color: tokens.textMuted,
+                  paddingLeft: "10px",
+                  userSelect: "none"
+                },
+                children: "$"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+              "span",
+              {
+                style: {
+                  fontSize: "0.75rem",
+                  fontWeight: 600,
+                  color: tokens.textMuted,
+                  background: tokens.bgHover,
+                  padding: "4px 10px",
+                  borderRadius: "6px",
+                  whiteSpace: "nowrap"
+                },
+                children: "USD"
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "p",
+        {
+          style: {
+            fontSize: "0.75rem",
+            color: tokens.textMuted,
+            margin: "-12px 0 16px 0",
+            lineHeight: 1.4
+          },
+          children: "Set a higher allowance to skip wallet prompts on future payments under this amount."
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between" }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "To" }),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "span",
+                {
+                  style: {
+                    fontFamily: '"SF Mono", "Fira Code", monospace',
+                    fontSize: "0.8rem"
+                  },
+                  children: [
+                    destination.address.slice(0, 6),
+                    "...",
+                    destination.address.slice(-4)
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between" }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Token" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 600 }, children: destination.token.symbol })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between" }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Source" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 600 }, children: walletSelection ? `${walletSelection.walletName} (${walletSelection.chainName})` : providers.find((p) => p.id === selectedProviderId)?.name ?? "Provider" })
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: "10px" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            style: btnSecondary,
+            onClick: () => {
+              setError(null);
+              setStep("select-source");
+            },
+            children: "Back"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            style: parseFloat(amount) > 0 ? btnPrimary : btnDisabled,
+            disabled: !(parseFloat(amount) > 0),
+            onClick: handlePay,
+            children: [
+              "Pay $",
+              parseFloat(amount || "0").toFixed(2)
+            ]
+          }
+        )
+      ] })
+    ] });
+  }
+  if (step === "processing") {
+    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__ */ jsxRuntime.jsx("div", { style: cardStyle, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { textAlign: "center", padding: "16px 0" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 48 }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "h2",
+        {
+          style: {
+            ...headingStyle,
+            marginTop: "20px",
+            marginBottom: "8px"
+          },
+          children: statusLabel
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "p",
+        {
+          style: {
+            fontSize: "0.85rem",
+            color: tokens.textSecondary,
+            margin: 0,
+            lineHeight: 1.5
+          },
+          children: statusDescription
+        }
+      ),
+      !mobileFlow && authExecutor.results.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: "20px", textAlign: "left" }, children: authExecutor.results.map((r) => /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: "8px",
+            padding: "6px 0",
+            fontSize: "0.8rem",
+            color: r.status === "success" ? tokens.success : tokens.error
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: r.status === "success" ? "\u2713" : "\u2717" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: r.type.replace(/_/g, " ") })
+          ]
+        },
+        r.actionId
+      )) }),
+      (error || authExecutor.error || polling.error) && /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          style: { ...errorStyle, marginTop: "16px", textAlign: "left" },
+          children: error || authExecutor.error || polling.error
+        }
+      )
+    ] }) });
+  }
+  if (step === "complete") {
+    const succeeded = transfer?.status === "COMPLETED";
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: cardStyle, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { textAlign: "center" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          style: {
+            width: 56,
+            height: 56,
+            borderRadius: "50%",
+            background: succeeded ? tokens.success + "20" : tokens.error + "20",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            margin: "0 auto 16px"
+          },
+          children: succeeded ? /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "path",
+            {
+              d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z",
+              fill: tokens.success
+            }
+          ) }) : /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "path",
+            {
+              d: "M18.3 5.71L12 12.01 5.7 5.71 4.29 7.12l6.3 6.3-6.3 6.29 1.41 1.41 6.3-6.29 6.29 6.29 1.41-1.41-6.29-6.29 6.29-6.3-1.41-1.41z",
+              fill: tokens.error
+            }
+          ) })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "h2",
+        {
+          style: {
+            ...headingStyle,
+            marginBottom: "8px",
+            color: succeeded ? tokens.success : tokens.error
+          },
+          children: succeeded ? "Payment Complete" : "Payment Failed"
+        }
+      ),
+      transfer && /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          style: {
+            fontSize: "0.825rem",
+            color: tokens.textSecondary,
+            margin: "0 0 24px 0",
+            padding: "14px",
+            background: tokens.bgInput,
+            borderRadius: tokens.radius,
+            textAlign: "left",
+            lineHeight: 1.8
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                style: { display: "flex", justifyContent: "space-between" },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Amount" }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontWeight: 600, color: tokens.text }, children: [
+                    "$",
+                    transfer.amount?.amount?.toFixed(2),
+                    " ",
+                    transfer.amount?.currency
+                  ] })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                style: { display: "flex", justifyContent: "space-between" },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Status" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      style: {
+                        fontWeight: 600,
+                        color: succeeded ? tokens.success : tokens.error
+                      },
+                      children: transfer.status
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                style: { display: "flex", justifyContent: "space-between" },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Transfer ID" }),
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    "span",
+                    {
+                      style: {
+                        fontFamily: '"SF Mono", "Fira Code", monospace',
+                        fontSize: "0.75rem"
+                      },
+                      children: [
+                        transfer.id.slice(0, 8),
+                        "..."
+                      ]
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        }
+      ),
+      error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { ...errorStyle, textAlign: "left" }, children: error }),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { style: btnPrimary, onClick: handleNewPayment, children: succeeded ? "Make Another Payment" : "Try Again" })
+    ] }) });
+  }
+  return null;
+}
+
+exports.SwypePayment = SwypePayment;
+exports.SwypeProvider = SwypeProvider;
+exports.darkTheme = darkTheme;
+exports.getTheme = getTheme;
+exports.lightTheme = lightTheme;
+exports.swypeApi = api_exports;
+exports.useAuthorizationExecutor = useAuthorizationExecutor;
+exports.useSwypeConfig = useSwypeConfig;
+exports.useTransferPolling = useTransferPolling;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map