@swype-org/react-sdk 0.1.287 → 0.1.300

package/dist/index.cjs

@@ -7,9 +7,9 @@ var chains = require('wagmi/chains');
 var connectors = require('wagmi/connectors');
 var reactQuery = require('@tanstack/react-query');
 var jsxRuntime = require('react/jsx-runtime');
+var core = require('@wagmi/core');
 var viem = require('viem');
 var utils = require('viem/utils');
-var actions = require('viem/actions');
 
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
 var __defProp = Object.defineProperty;
@@ -488,13 +488,14 @@ __export(api_exports, {
   fetchAuthorizationSessionByToken: () => fetchAuthorizationSessionByToken,
   fetchChains: () => fetchChains,
   fetchGuestAccount: () => fetchGuestAccount,
-  fetchGuestTransferBalances: () => fetchGuestTransferBalances,
   fetchMerchantPublicKey: () => fetchMerchantPublicKey,
   fetchProviders: () => fetchProviders,
   fetchTransfer: () => fetchTransfer,
   fetchUserConfig: () => fetchUserConfig,
   getGuestTransfer: () => getGuestTransfer,
   getTransferByGuestToken: () => getTransferByGuestToken,
+  postGuestTransferFeeQuote: () => postGuestTransferFeeQuote,
+  putGuestTransferSender: () => putGuestTransferSender,
   registerPasskey: () => registerPasskey,
   reportActionCompletion: () => reportActionCompletion,
   reportPasskeyActivity: () => reportPasskeyActivity,
@@ -749,18 +750,37 @@ async function getTransferByGuestToken(apiBaseUrl, guestToken) {
   if (!res.ok) await throwApiError(res);
   return await res.json();
 }
-async function setTransferSender(apiBaseUrl, transferId, guestSessionToken, senderAddress, sourceChainId, sourceToken) {
+async function postGuestTransferFeeQuote(apiBaseUrl, transferId, guestSessionToken, senderAddress, sourceChainId, sourceToken) {
+  const res = await fetch(`${apiBaseUrl}/v1/transfers/${transferId}/quotes`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      "x-guest-session-token": guestSessionToken
+    },
+    body: JSON.stringify({ senderAddress, sourceChainId, sourceToken })
+  });
+  if (!res.ok) await throwApiError(res);
+  return await res.json();
+}
+async function putGuestTransferSender(apiBaseUrl, transferId, guestSessionToken, body) {
   const res = await fetch(`${apiBaseUrl}/v1/transfers/${transferId}/sender`, {
     method: "PUT",
     headers: {
       "Content-Type": "application/json",
       "x-guest-session-token": guestSessionToken
     },
-    body: JSON.stringify({ senderAddress, sourceChainId, sourceToken })
+    body: JSON.stringify(body)
   });
   if (!res.ok) await throwApiError(res);
   return await res.json();
 }
+async function setTransferSender(apiBaseUrl, transferId, guestSessionToken, senderAddress, sourceChainId, sourceToken) {
+  return putGuestTransferSender(apiBaseUrl, transferId, guestSessionToken, {
+    senderAddress,
+    sourceChainId,
+    sourceToken
+  });
+}
 async function signGuestTransfer(apiBaseUrl, transferId, guestSessionToken, originTxHash) {
   const res = await fetch(`${apiBaseUrl}/v1/transfers/${transferId}`, {
     method: "PATCH",
@@ -782,20 +802,6 @@ async function getGuestTransfer(apiBaseUrl, transferId, guestSessionToken) {
   if (!res.ok) await throwApiError(res);
   return await res.json();
 }
-async function fetchGuestTransferBalances(apiBaseUrl, transferId, guestSessionToken, walletAddress) {
-  const params = new URLSearchParams({ walletAddress });
-  const res = await fetch(
-    `${apiBaseUrl}/v1/transfers/${transferId}/balances?${params.toString()}`,
-    {
-      headers: {
-        "x-guest-session-token": guestSessionToken
-      }
-    }
-  );
-  if (!res.ok) await throwApiError(res);
-  const data = await res.json();
-  return data.items;
-}
 async function fetchGuestAccount(apiBaseUrl, guestToken) {
   const params = new URLSearchParams({ guestToken });
   const res = await fetch(`${apiBaseUrl}/v1/accounts?${params.toString()}`);
@@ -910,304 +916,6 @@ function useTransferPolling(intervalMs = 3e3) {
   react.useEffect(() => () => stopPolling(), [stopPolling]);
   return { transfer, error, isPolling, startPolling, stopPolling };
 }
-
-// node_modules/@wagmi/core/dist/esm/utils/getAction.js
-function getAction(client, actionFn, name) {
-  const action_implicit = client[actionFn.name];
-  if (typeof action_implicit === "function")
-    return action_implicit;
-  const action_explicit = client[name];
-  if (typeof action_explicit === "function")
-    return action_explicit;
-  return (params) => actionFn(client, params);
-}
-
-// node_modules/@wagmi/core/dist/esm/version.js
-var version = "2.22.1";
-
-// node_modules/@wagmi/core/dist/esm/utils/getVersion.js
-var getVersion = () => `@wagmi/core@${version}`;
-
-// node_modules/@wagmi/core/dist/esm/errors/base.js
-var __classPrivateFieldGet = function(receiver, state, kind, f) {
-  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
-  return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-};
-var _BaseError_instances;
-var _BaseError_walk;
-var BaseError = class _BaseError extends Error {
-  get docsBaseUrl() {
-    return "https://wagmi.sh/core";
-  }
-  get version() {
-    return getVersion();
-  }
-  constructor(shortMessage, options = {}) {
-    super();
-    _BaseError_instances.add(this);
-    Object.defineProperty(this, "details", {
-      enumerable: true,
-      configurable: true,
-      writable: true,
-      value: void 0
-    });
-    Object.defineProperty(this, "docsPath", {
-      enumerable: true,
-      configurable: true,
-      writable: true,
-      value: void 0
-    });
-    Object.defineProperty(this, "metaMessages", {
-      enumerable: true,
-      configurable: true,
-      writable: true,
-      value: void 0
-    });
-    Object.defineProperty(this, "shortMessage", {
-      enumerable: true,
-      configurable: true,
-      writable: true,
-      value: void 0
-    });
-    Object.defineProperty(this, "name", {
-      enumerable: true,
-      configurable: true,
-      writable: true,
-      value: "WagmiCoreError"
-    });
-    const details = options.cause instanceof _BaseError ? options.cause.details : options.cause?.message ? options.cause.message : options.details;
-    const docsPath = options.cause instanceof _BaseError ? options.cause.docsPath || options.docsPath : options.docsPath;
-    this.message = [
-      shortMessage || "An error occurred.",
-      "",
-      ...options.metaMessages ? [...options.metaMessages, ""] : [],
-      ...docsPath ? [
-        `Docs: ${this.docsBaseUrl}${docsPath}.html${options.docsSlug ? `#${options.docsSlug}` : ""}`
-      ] : [],
-      ...details ? [`Details: ${details}`] : [],
-      `Version: ${this.version}`
-    ].join("\n");
-    if (options.cause)
-      this.cause = options.cause;
-    this.details = details;
-    this.docsPath = docsPath;
-    this.metaMessages = options.metaMessages;
-    this.shortMessage = shortMessage;
-  }
-  walk(fn) {
-    return __classPrivateFieldGet(this, _BaseError_instances, "m", _BaseError_walk).call(this, this, fn);
-  }
-};
-_BaseError_instances = /* @__PURE__ */ new WeakSet(), _BaseError_walk = function _BaseError_walk2(err, fn) {
-  if (fn?.(err))
-    return err;
-  if (err.cause)
-    return __classPrivateFieldGet(this, _BaseError_instances, "m", _BaseError_walk2).call(this, err.cause, fn);
-  return err;
-};
-
-// node_modules/@wagmi/core/dist/esm/errors/config.js
-var ConnectorNotConnectedError = class extends BaseError {
-  constructor() {
-    super("Connector not connected.");
-    Object.defineProperty(this, "name", {
-      enumerable: true,
-      configurable: true,
-      writable: true,
-      value: "ConnectorNotConnectedError"
-    });
-  }
-};
-var ConnectorAccountNotFoundError = class extends BaseError {
-  constructor({ address, connector }) {
-    super(`Account "${address}" not found for connector "${connector.name}".`);
-    Object.defineProperty(this, "name", {
-      enumerable: true,
-      configurable: true,
-      writable: true,
-      value: "ConnectorAccountNotFoundError"
-    });
-  }
-};
-var ConnectorChainMismatchError = class extends BaseError {
-  constructor({ connectionChainId, connectorChainId }) {
-    super(`The current chain of the connector (id: ${connectorChainId}) does not match the connection's chain (id: ${connectionChainId}).`, {
-      metaMessages: [
-        `Current Chain ID:  ${connectorChainId}`,
-        `Expected Chain ID: ${connectionChainId}`
-      ]
-    });
-    Object.defineProperty(this, "name", {
-      enumerable: true,
-      configurable: true,
-      writable: true,
-      value: "ConnectorChainMismatchError"
-    });
-  }
-};
-var ConnectorUnavailableReconnectingError = class extends BaseError {
-  constructor({ connector }) {
-    super(`Connector "${connector.name}" unavailable while reconnecting.`, {
-      details: [
-        "During the reconnection step, the only connector methods guaranteed to be available are: `id`, `name`, `type`, `uid`.",
-        "All other methods are not guaranteed to be available until reconnection completes and connectors are fully restored.",
-        "This error commonly occurs for connectors that asynchronously inject after reconnection has already started."
-      ].join(" ")
-    });
-    Object.defineProperty(this, "name", {
-      enumerable: true,
-      configurable: true,
-      writable: true,
-      value: "ConnectorUnavailableReconnectingError"
-    });
-  }
-};
-async function getConnectorClient(config, parameters = {}) {
-  const { assertChainId = true } = parameters;
-  let connection;
-  if (parameters.connector) {
-    const { connector: connector2 } = parameters;
-    if (config.state.status === "reconnecting" && !connector2.getAccounts && !connector2.getChainId)
-      throw new ConnectorUnavailableReconnectingError({ connector: connector2 });
-    const [accounts, chainId2] = await Promise.all([
-      connector2.getAccounts().catch((e) => {
-        if (parameters.account === null)
-          return [];
-        throw e;
-      }),
-      connector2.getChainId()
-    ]);
-    connection = {
-      accounts,
-      chainId: chainId2,
-      connector: connector2
-    };
-  } else
-    connection = config.state.connections.get(config.state.current);
-  if (!connection)
-    throw new ConnectorNotConnectedError();
-  const chainId = parameters.chainId ?? connection.chainId;
-  const connectorChainId = await connection.connector.getChainId();
-  if (assertChainId && connectorChainId !== chainId)
-    throw new ConnectorChainMismatchError({
-      connectionChainId: chainId,
-      connectorChainId
-    });
-  const connector = connection.connector;
-  if (connector.getClient)
-    return connector.getClient({ chainId });
-  const account = utils.parseAccount(parameters.account ?? connection.accounts[0]);
-  if (account)
-    account.address = utils.getAddress(account.address);
-  if (parameters.account && !connection.accounts.some((x) => x.toLowerCase() === account.address.toLowerCase()))
-    throw new ConnectorAccountNotFoundError({
-      address: account.address,
-      connector
-    });
-  const chain = config.chains.find((chain2) => chain2.id === chainId);
-  const provider = await connection.connector.getProvider({ chainId });
-  return viem.createClient({
-    account,
-    chain,
-    name: "Connector Client",
-    transport: (opts) => viem.custom(provider)({ ...opts, retryCount: 0 })
-  });
-}
-
-// node_modules/@wagmi/core/dist/esm/actions/getAccount.js
-function getAccount(config) {
-  const uid = config.state.current;
-  const connection = config.state.connections.get(uid);
-  const addresses = connection?.accounts;
-  const address = addresses?.[0];
-  const chain = config.chains.find((chain2) => chain2.id === connection?.chainId);
-  const status = config.state.status;
-  switch (status) {
-    case "connected":
-      return {
-        address,
-        addresses,
-        chain,
-        chainId: connection?.chainId,
-        connector: connection?.connector,
-        isConnected: true,
-        isConnecting: false,
-        isDisconnected: false,
-        isReconnecting: false,
-        status
-      };
-    case "reconnecting":
-      return {
-        address,
-        addresses,
-        chain,
-        chainId: connection?.chainId,
-        connector: connection?.connector,
-        isConnected: !!address,
-        isConnecting: false,
-        isDisconnected: false,
-        isReconnecting: true,
-        status
-      };
-    case "connecting":
-      return {
-        address,
-        addresses,
-        chain,
-        chainId: connection?.chainId,
-        connector: connection?.connector,
-        isConnected: false,
-        isConnecting: true,
-        isDisconnected: false,
-        isReconnecting: false,
-        status
-      };
-    case "disconnected":
-      return {
-        address: void 0,
-        addresses: void 0,
-        chain: void 0,
-        chainId: void 0,
-        connector: void 0,
-        isConnected: false,
-        isConnecting: false,
-        isDisconnected: true,
-        isReconnecting: false,
-        status
-      };
-  }
-}
-async function getWalletClient(config, parameters = {}) {
-  const client = await getConnectorClient(config, parameters);
-  return client.extend(viem.walletActions);
-}
-async function waitForTransactionReceipt(config, parameters) {
-  const { chainId, timeout = 0, ...rest } = parameters;
-  const client = config.getClient({ chainId });
-  const action = getAction(client, actions.waitForTransactionReceipt, "waitForTransactionReceipt");
-  const receipt = await action({ ...rest, timeout });
-  if (receipt.status === "reverted") {
-    const action_getTransaction = getAction(client, actions.getTransaction, "getTransaction");
-    const { from: account, ...txn } = await action_getTransaction({
-      hash: receipt.transactionHash
-    });
-    const action_call = getAction(client, actions.call, "call");
-    const code = await action_call({
-      ...txn,
-      account,
-      data: txn.input,
-      gasPrice: txn.type !== "eip1559" ? txn.gasPrice : void 0,
-      maxFeePerGas: txn.type === "eip1559" ? txn.maxFeePerGas : void 0,
-      maxPriorityFeePerGas: txn.type === "eip1559" ? txn.maxPriorityFeePerGas : void 0
-    });
-    const reason = code?.data ? viem.hexToString(`0x${code.data.substring(138)}`) : "unknown reason";
-    throw new Error(reason);
-  }
-  return {
-    ...receipt,
-    chainId: client.chain.id
-  };
-}
 var ERC_6492_MAGIC_SUFFIX = "6492649264926492649264926492649264926492649264926492649264926492";
 function normalizeSignature(sig) {
   const hex = sig.startsWith("0x") ? sig.slice(2) : sig;
@@ -1276,9 +984,9 @@ function isUserRejection(msg) {
 async function waitForWalletClient(wagmiConfig2, params = {}) {
   for (let i = 0; i < WALLET_CLIENT_MAX_ATTEMPTS; i++) {
     try {
-      const account = getAccount(wagmiConfig2);
+      const account = core.getAccount(wagmiConfig2);
       const enrichedParams = account.connector ? { ...params, connector: account.connector } : params;
-      return await getWalletClient(wagmiConfig2, enrichedParams);
+      return await core.getWalletClient(wagmiConfig2, enrichedParams);
     } catch {
       if (i === WALLET_CLIENT_MAX_ATTEMPTS - 1) {
         throw new Error("Wallet not ready. Please try again.");
@@ -1314,7 +1022,7 @@ function getPendingActions(session, completedIds) {
 }
 async function executeOpenProvider(action, wagmiConfig2, connectors, connectAsync) {
   try {
-    const account = getAccount(wagmiConfig2);
+    const account = core.getAccount(wagmiConfig2);
     if (account.isConnected && account.address) {
       const hexChainId2 = account.chainId ? `0x${account.chainId.toString(16)}` : void 0;
       return actionSuccess(
@@ -1381,7 +1089,7 @@ async function executeSelectSource(action, waitForSelection) {
 }
 async function executeSwitchChain(action, wagmiConfig2, switchChainAsync) {
   try {
-    const account = getAccount(wagmiConfig2);
+    const account = core.getAccount(wagmiConfig2);
     const targetChainIdHex = action.metadata?.targetChainId;
     if (!targetChainIdHex) {
       return actionError(action, "No targetChainId in action metadata.");
@@ -1423,7 +1131,7 @@ async function executeSwitchChain(action, wagmiConfig2, switchChainAsync) {
 async function executeApprovePermit2(action, wagmiConfig2) {
   try {
     const walletClient = await waitForWalletClient(wagmiConfig2);
-    const account = getAccount(wagmiConfig2);
+    const account = core.getAccount(wagmiConfig2);
     const sender = account.address ?? walletClient.account?.address;
     const expectedWallet = action.metadata?.walletAddress;
     if (!sender) {
@@ -1476,7 +1184,7 @@ async function executeSignPermit2(action, wagmiConfig2, apiBaseUrl, sessionId) {
       wagmiConfig2,
       expectedWallet ? { account: expectedWallet } : {}
     );
-    const account = getAccount(wagmiConfig2);
+    const account = core.getAccount(wagmiConfig2);
     const connectedAddress = account.address ?? walletClient.account?.address;
     const sender = expectedWallet ?? connectedAddress;
     if (!sender) {
@@ -2080,8 +1788,8 @@ function resolvePhase(state) {
   const needsPasskeyBootstrap = state.privyAuthenticated && !state.activeCredentialId;
   const guestPreauthPinsCurrentPhase = transferCompleted && state.guestPreauthorizing && !state.verificationTarget && isGuestPreauthCompletedTransferPinPhase(currentPhase);
   const guestPostPayLogin = transferCompleted && state.isGuestFlow && state.guestPreauthSessionId != null && !state.guestPreauthorizing && !state.verificationTarget && !state.privyAuthenticated;
-  const isFundingSourceSubflow = !state.loginRequested && (currentPhase.step === "token-picker" || currentPhase.step === "one-tap-setup" || currentPhase.step === "select-source" || currentPhase.step === "confirm-sign" || currentPhase.step === "guest-token-picker");
   const guestTokenPickerEligible = state.isGuestFlow && state.selectedProviderId != null && !state.transfer && !state.guestPreauthAccountId;
+  const isFundingSourceSubflow = !state.loginRequested && (currentPhase.step === "token-picker" || currentPhase.step === "one-tap-setup" || currentPhase.step === "select-source" || currentPhase.step === "confirm-sign" || currentPhase.step === "guest-token-picker" && guestTokenPickerEligible);
   const walletPickerSwitchEligible = currentPhase.step === "wallet-picker" && currentPhase.reason === "switch" && !state.creatingTransfer && !(state.mobileFlow && state.deeplinkUri);
   const missingActivePasskeyCredential = state.passkeyConfigLoaded && !state.activeCredentialId;
   const shouldPromptPasskeyVerification = missingActivePasskeyCredential && state.knownCredentialIds.length > 0 && state.passkeyPopupNeeded;
@@ -3513,10 +3221,15 @@ function LoginScreen({
   error,
   onBack,
   merchantInitials,
-  onSocialLogin
+  onSocialLogin,
+  heroTitle,
+  heroSubtitle,
+  inputPlaceholder
 }) {
   const { tokens } = useBlinkConfig();
   const disabled = authInput.trim().length === 0 || sending;
+  const heading = heroTitle ?? "Your Money. Any App.\nOne Tap.";
+  const placeholder = inputPlaceholder ?? "Email or phone number";
   return /* @__PURE__ */ jsxRuntime.jsxs(
     ScreenLayout,
     {
@@ -3551,7 +3264,8 @@ function LoginScreen({
         ),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle, children: [
           /* @__PURE__ */ jsxRuntime.jsx("img", { src: BLINK_LOGO, alt: "Blink", style: logoStyle }),
-          /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle(tokens.text), children: "Your Money. Any App.\nOne Tap." }),
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle(tokens.text), children: heading }),
+          heroSubtitle ? /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle(tokens.textMuted), children: heroSubtitle }) : null,
           error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: errorStyle(tokens), children: error }),
           /* @__PURE__ */ jsxRuntime.jsx(
             "input",
@@ -3560,7 +3274,7 @@ function LoginScreen({
               type: "text",
               inputMode: "text",
               autoComplete: "username",
-              placeholder: "Email or phone number",
+              placeholder,
               value: authInput,
               onChange: (e) => onAuthInputChange(e.target.value),
               onKeyDown: (e) => {
@@ -3605,6 +3319,14 @@ var headingStyle = (color) => ({
   margin: "20px 0 8px",
   whiteSpace: "pre-line"
 });
+var subtitleStyle = (color) => ({
+  fontSize: "0.9rem",
+  fontWeight: 500,
+  lineHeight: 1.45,
+  color,
+  margin: "0 0 16px",
+  maxWidth: 320
+});
 var inputStyle2 = (tokens) => ({
   width: "100%",
   padding: "15px 16px",
@@ -3727,7 +3449,7 @@ function OtpVerifyScreen({
         /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { onBack }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle2, children: [
           /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle2(tokens.text), children: "Confirm it is you" }),
-          /* @__PURE__ */ jsxRuntime.jsxs("p", { style: subtitleStyle(tokens.textSecondary), children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("p", { style: subtitleStyle2(tokens.textSecondary), children: [
             "We sent a 6-digit code to",
             "\n",
             /* @__PURE__ */ jsxRuntime.jsx("strong", { children: maskedIdentifier })
@@ -3763,7 +3485,7 @@ var headingStyle2 = (color) => ({
   color,
   margin: "20px 0 8px"
 });
-var subtitleStyle = (color) => ({
+var subtitleStyle2 = (color) => ({
   fontSize: "0.88rem",
   color,
   margin: "0 0 28px",
@@ -3816,7 +3538,7 @@ function PasskeyScreen({
         /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { onBack, onLogout }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle3, children: [
           /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle3(tokens.text), children: "Secure your account with a passkey" }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle2(tokens.textSecondary), children: "This enables secure one-tap deposits on this device" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle3(tokens.textSecondary), children: "This enables secure one-tap deposits on this device" }),
           error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: errorBannerStyle2(tokens), children: error })
         ] })
       ]
@@ -3838,7 +3560,7 @@ var headingStyle3 = (color) => ({
   color,
   margin: "24px 0 8px"
 });
-var subtitleStyle2 = (color) => ({
+var subtitleStyle3 = (color) => ({
   fontSize: "0.86rem",
   color,
   margin: "0 0 20px",
@@ -3856,6 +3578,72 @@ var errorBannerStyle2 = (tokens) => ({
   width: "100%",
   textAlign: "left"
 });
+function VerifyPasskeyScreen({
+  onVerify,
+  onBack,
+  verifying,
+  error
+}) {
+  const { tokens } = useBlinkConfig();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    ScreenLayout,
+    {
+      footer: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(PrimaryButton, { onClick: onVerify, disabled: verifying, loading: verifying, children: "Verify passkey" }),
+        /* @__PURE__ */ jsxRuntime.jsx(PoweredByFooter, {})
+      ] }),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { onBack }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle4, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(IconCircle, { variant: "accent", size: 64, children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "36", height: "36", viewBox: "0 0 24 24", fill: "none", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "4", y: "4", width: "16", height: "16", rx: "3", stroke: tokens.accent, strokeWidth: "1.5", strokeDasharray: "3 2" }),
+            /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "9", cy: "10", r: "1", fill: tokens.accent }),
+            /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "15", cy: "10", r: "1", fill: tokens.accent }),
+            /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 14c0 1.5 1.34 2.5 3 2.5s3-1 3-2.5", stroke: tokens.accent, strokeWidth: "1.2", strokeLinecap: "round" })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle4(tokens.text), children: "Verify your passkey" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle4(tokens.textSecondary), children: "Your browser requires a separate window to verify your passkey. Tap the button below to continue." }),
+          error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: errorBannerStyle3(tokens), children: error }),
+          /* @__PURE__ */ jsxRuntime.jsx(InfoBanner, { children: "Your passkey is stored securely on your device. Blink never sees your biometric data." })
+        ] })
+      ]
+    }
+  );
+}
+var contentStyle4 = {
+  textAlign: "center",
+  flex: 1,
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  paddingTop: 32
+};
+var headingStyle4 = (color) => ({
+  fontSize: "1.45rem",
+  fontWeight: 700,
+  letterSpacing: "-0.02em",
+  color,
+  margin: "24px 0 8px"
+});
+var subtitleStyle4 = (color) => ({
+  fontSize: "0.9rem",
+  color,
+  margin: "0 0 28px",
+  lineHeight: 1.5,
+  maxWidth: 280
+});
+var errorBannerStyle3 = (tokens) => ({
+  background: tokens.errorBg,
+  border: `1px solid ${tokens.error}66`,
+  borderRadius: 16,
+  padding: "11px 14px",
+  color: tokens.error,
+  fontSize: "0.84rem",
+  marginBottom: 14,
+  lineHeight: 1.5,
+  width: "100%",
+  textAlign: "left"
+});
 function Spinner({ size = 40, label }) {
   const { tokens } = useBlinkConfig();
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -3999,8 +3787,8 @@ function WalletPickerScreen({
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { title: "Set up Blink", onBack, onLogout }),
         hasPending && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle4(tokens.text), children: "Continue where you left off" }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle3(tokens.textSecondary), children: "You have a wallet that still needs setup" }),
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle5(tokens.text), children: "Continue where you left off" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle5(tokens.textSecondary), children: "You have a wallet that still needs setup" }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { style: pendingListStyle, children: pendingConnections.map((acct) => {
             const wallet = acct.wallets[0];
             const address = wallet ? truncateAddress(wallet.name) : void 0;
@@ -4039,7 +3827,7 @@ function WalletPickerScreen({
           }) }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { style: dividerStyle2(tokens.border), children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: dividerTextStyle(tokens.textMuted), children: "Or connect a new wallet" }) })
         ] }),
-        !hasPending && /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle4(tokens.text), children: "Where is your money?" }),
+        !hasPending && /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle5(tokens.text), children: "Where is your money?" }),
         /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
           {
@@ -4110,14 +3898,14 @@ function WalletPickerScreen({
     }
   );
 }
-var headingStyle4 = (color) => ({
+var headingStyle5 = (color) => ({
   fontSize: "1.35rem",
   fontWeight: 700,
   letterSpacing: "-0.02em",
   color,
   margin: "8px 0 4px"
 });
-var subtitleStyle3 = (color) => ({
+var subtitleStyle5 = (color) => ({
   fontSize: "0.88rem",
   color,
   margin: "0 0 24px"
@@ -4296,6 +4084,9 @@ var loginButtonStyle = (accentColor) => ({
 var DEFAULT_MAX = 1e7;
 var ABSOLUTE_MIN = 0.01;
 var PRESETS = [100, 250, 1e3];
+function tokenOptionKey(opt) {
+  return `${opt.chainName}-${opt.symbol}`;
+}
 function SetupScreen({
   availableBalance,
   onSetupOneTap,
@@ -4304,16 +4095,43 @@ function SetupScreen({
   onAdvanced,
   loading,
   error,
-  selectedTokenSymbol
+  selectedTokenSymbol,
+  tokenOptions,
+  onSelectToken
 }) {
   const { tokens } = useBlinkConfig();
   const effectiveMax = DEFAULT_MAX;
   const effectiveMin = Math.min(ABSOLUTE_MIN, effectiveMax);
   const [limit, setLimit] = react.useState(() => Math.min(availableBalance, effectiveMax));
   const [activePreset, setActivePreset] = react.useState(null);
+  const [showAdvanced, setShowAdvanced] = react.useState(false);
   const [editing, setEditing] = react.useState(false);
   const [inputValue, setInputValue] = react.useState("");
   const inputRef = react.useRef(null);
+  const hasDropdown = tokenOptions != null && tokenOptions.length > 0 && onSelectToken != null;
+  const [tokenDropdownOpen, setTokenDropdownOpen] = react.useState(false);
+  const pickerRef = react.useRef(null);
+  react.useEffect(() => {
+    if (!tokenDropdownOpen) return;
+    const handleMouseDown = (e) => {
+      if (pickerRef.current && !pickerRef.current.contains(e.target)) {
+        setTokenDropdownOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleMouseDown);
+    return () => document.removeEventListener("mousedown", handleMouseDown);
+  }, [tokenDropdownOpen]);
+  const handleTokenRowClick = react.useCallback(() => {
+    if (hasDropdown) {
+      setTokenDropdownOpen((v) => !v);
+    } else {
+      onAdvanced?.();
+    }
+  }, [hasDropdown, onAdvanced]);
+  const handlePickToken = react.useCallback((opt) => {
+    onSelectToken?.(opt.symbol, opt.chainName, opt.walletId);
+    setTokenDropdownOpen(false);
+  }, [onSelectToken]);
   const startEditing = react.useCallback(() => {
     setInputValue(limit.toFixed(2));
     setEditing(true);
@@ -4336,6 +4154,7 @@ function SetupScreen({
     setLimit(Math.min(availableBalance, effectiveMax));
     setActivePreset("max");
   };
+  const selectedOption = tokenOptions?.find((o) => o.symbol === selectedTokenSymbol);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     ScreenLayout,
     {
@@ -4346,17 +4165,90 @@ function SetupScreen({
             onClick: () => onSetupOneTap(limit),
             disabled: loading,
             loading,
-            children: "Approve"
+            children: "Continue"
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(PoweredByFooter, {})
       ] }),
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { onBack, onLogout }),
-        /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle5(tokens.text), children: "Set Spending Limit" }),
-        error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: errorBannerStyle3(tokens), children: error }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: amountRowStyle, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1 }, children: editing ? /* @__PURE__ */ jsxRuntime.jsxs("div", { style: limitValueStyle(tokens.text), children: [
+        /* @__PURE__ */ jsxRuntime.jsx("img", { src: BLINK_LOGO, alt: "Blink", width: 56, height: 56, style: mascotStyle2 }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { style: descriptionStyle(tokens.text), children: "Set a limit for one-tap deposits. You'll still confirm each one with your passkey." }),
+        error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: errorBannerStyle4(tokens), children: error }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: pickerRef, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: handleTokenRowClick,
+              style: tokenRowTriggerStyle(tokens, hasDropdown || !!onAdvanced),
+              "aria-expanded": hasDropdown ? tokenDropdownOpen : void 0,
+              "aria-haspopup": hasDropdown ? "listbox" : void 0,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { style: tokenRowLabelStyle(tokens.text), children: "Token for one tap" }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { style: tokenRowRightStyle, children: [
+                  selectedOption && /* @__PURE__ */ jsxRuntime.jsxs("span", { style: tokenRowSymbolStyle(tokens.textSecondary), children: [
+                    selectedOption.symbol,
+                    " \xB7 ",
+                    selectedOption.chainName
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { style: tokenIconWrapStyle, children: selectedTokenSymbol && TOKEN_LOGOS[selectedTokenSymbol] ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: TOKEN_LOGOS[selectedTokenSymbol], alt: selectedTokenSymbol, width: 36, height: 36, style: { borderRadius: "50%" } }) : /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "36", height: "36", viewBox: "0 0 36 36", fill: "none", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "18", cy: "18", r: "18", fill: "#2DB84B" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("text", { x: "18", y: "23", textAnchor: "middle", fontSize: "18", fill: "#fff", fontWeight: "700", children: "$" })
+                  ] }) }),
+                  /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", style: { opacity: 0.5 }, children: tokenDropdownOpen ? /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 15l-6-6-6 6", stroke: tokens.textMuted, strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }) : /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 9l6 6 6-6", stroke: tokens.textMuted, strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                ] })
+              ]
+            }
+          ),
+          tokenDropdownOpen && tokenOptions && tokenOptions.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: dropdownOuterStyle(tokens), children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { style: dropdownLabelStyle(tokens.textMuted), children: "Choose token" }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { style: dropdownInnerStyle(tokens), children: tokenOptions.map((opt, index) => {
+              const selected = opt.symbol === selectedTokenSymbol;
+              const isLast = index === tokenOptions.length - 1;
+              return /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => handlePickToken(opt),
+                  style: dropdownRowStyle(tokens, selected, isLast),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: dropdownRowLeftStyle, children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("div", { style: dropdownTokenIconStyle(tokens, !!TOKEN_LOGOS[opt.symbol]), children: TOKEN_LOGOS[opt.symbol] ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: TOKEN_LOGOS[opt.symbol], alt: opt.symbol, style: dropdownTokenLogoStyle }) : /* @__PURE__ */ jsxRuntime.jsx("span", { style: dropdownTokenFallbackStyle(tokens.textMuted), children: "$" }) }),
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: dropdownTokenInfoStyle, children: [
+                        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: dropdownTokenNameRowStyle, children: [
+                          /* @__PURE__ */ jsxRuntime.jsx("span", { style: dropdownTokenSymbolStyle(tokens.text), children: opt.symbol }),
+                          /* @__PURE__ */ jsxRuntime.jsx("span", { style: dropdownTokenDotStyle(tokens.textMuted), children: "\xB7" }),
+                          /* @__PURE__ */ jsxRuntime.jsx("span", { style: dropdownTokenChainStyle(tokens.textMuted), children: opt.chainName })
+                        ] }),
+                        opt.balance != null && /* @__PURE__ */ jsxRuntime.jsxs("span", { style: dropdownTokenBalanceStyle(tokens.textMuted), children: [
+                          "$",
+                          opt.balance.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })
+                        ] })
+                      ] })
+                    ] }),
+                    selected ? /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "22", height: "22", viewBox: "0 0 22 22", fill: "none", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "11", cy: "11", r: "11", fill: tokens.success }),
+                      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7 11l3 3 5-5", stroke: "#fff", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
+                    ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: dropdownRadioEmptyStyle(tokens.border) })
+                  ]
+                },
+                tokenOptionKey(opt)
+              );
+            }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => setShowAdvanced((v) => !v),
+            style: advancedToggleStyle(tokens.accent),
+            children: "Advanced"
+          }
+        ),
+        showAdvanced && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: amountSectionStyle, children: editing ? /* @__PURE__ */ jsxRuntime.jsxs("div", { style: limitValueStyle(tokens.text), children: [
             "$",
             /* @__PURE__ */ jsxRuntime.jsx(
               "input",
@@ -4381,63 +4273,94 @@ function SetupScreen({
               onClick: startEditing,
               children: [
                 "$",
-                limit.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })
+                limit.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 }),
+                /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", style: { marginLeft: 8, opacity: 0.45 }, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16.47 3.53a2.74 2.74 0 0 1 3.88 0l.12.12a2.74 2.74 0 0 1 0 3.88L8.84 19.16a2 2 0 0 1-.9.52l-4.56 1.3a.75.75 0 0 1-.93-.93l1.3-4.56a2 2 0 0 1 .52-.9L16.47 3.53Z", stroke: tokens.textMuted, strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) })
               ]
             }
           ) }),
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "button",
-            {
-              type: "button",
-              onClick: onAdvanced,
-              style: tokenIconButtonStyle(!!onAdvanced),
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { style: tokenIconWrapStyle, children: selectedTokenSymbol && TOKEN_LOGOS[selectedTokenSymbol] ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: TOKEN_LOGOS[selectedTokenSymbol], alt: selectedTokenSymbol, width: 36, height: 36, style: { borderRadius: "50%" } }) : /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "36", height: "36", viewBox: "0 0 36 36", fill: "none", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "18", cy: "18", r: "18", fill: "#2DB84B" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("text", { x: "18", y: "23", textAnchor: "middle", fontSize: "18", fill: "#fff", fontWeight: "700", children: "$" })
-                ] }) }),
-                /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", style: { opacity: 0.5 }, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 9l6 6 6-6", stroke: tokens.textMuted, strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
-              ]
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: presetsRowStyle, children: [
-          PRESETS.map((value) => /* @__PURE__ */ jsxRuntime.jsxs(
-            "button",
-            {
-              type: "button",
-              onClick: () => selectPreset(value),
-              style: presetButtonStyle(tokens, activePreset === value),
-              children: [
-                "$",
-                value.toLocaleString()
-              ]
-            },
-            value
-          )),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              onClick: selectMax,
-              style: presetButtonStyle(tokens, activePreset === "max"),
-              children: "Max"
-            }
-          )
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: presetsRowStyle, children: [
+            PRESETS.map((value) => /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => selectPreset(value),
+                style: presetButtonStyle(tokens, activePreset === value),
+                children: [
+                  "$",
+                  value.toLocaleString()
+                ]
+              },
+              value
+            )),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: selectMax,
+                style: presetButtonStyle(tokens, activePreset === "max"),
+                children: "Max"
+              }
+            )
+          ] })
         ] })
       ]
     }
   );
 }
-var headingStyle5 = (color) => ({
-  fontSize: "1.1rem",
-  fontWeight: 700,
-  letterSpacing: "-0.02em",
+var mascotStyle2 = {
+  display: "block",
+  margin: "0 auto 12px"
+};
+var descriptionStyle = (color) => ({
+  fontSize: "1.05rem",
+  fontWeight: 600,
+  lineHeight: 1.45,
   color,
-  margin: "8px 0 24px",
+  margin: "0 0 24px",
   textAlign: "center"
 });
-var errorBannerStyle3 = (tokens) => ({
+var tokenRowTriggerStyle = (themeTokens, clickable) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  width: "100%",
+  padding: "10px 14px",
+  borderRadius: 999,
+  background: themeTokens.bgCard,
+  border: `1px solid ${themeTokens.border}`,
+  cursor: clickable ? "pointer" : "default",
+  fontFamily: "inherit",
+  marginBottom: 8
+});
+var tokenRowLabelStyle = (color) => ({
+  fontSize: "0.95rem",
+  fontWeight: 500,
+  color
+});
+var tokenRowRightStyle = {
+  display: "flex",
+  alignItems: "center",
+  gap: 6,
+  flexShrink: 0
+};
+var tokenRowSymbolStyle = (color) => ({
+  fontSize: "0.84rem",
+  fontWeight: 500,
+  color
+});
+var advancedToggleStyle = (accentColor) => ({
+  display: "block",
+  margin: "4px auto 24px",
+  background: "transparent",
+  border: "none",
+  color: accentColor,
+  fontSize: "0.92rem",
+  fontWeight: 600,
+  fontFamily: "inherit",
+  cursor: "pointer",
+  padding: "4px 8px"
+});
+var errorBannerStyle4 = (tokens) => ({
   background: tokens.errorBg,
   border: `1px solid ${tokens.error}66`,
   borderRadius: 16,
@@ -4447,27 +4370,25 @@ var errorBannerStyle3 = (tokens) => ({
   marginBottom: 14,
   lineHeight: 1.5
 });
-var amountRowStyle = {
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "space-between",
-  marginBottom: 24,
-  gap: 12
+var amountSectionStyle = {
+  textAlign: "center",
+  marginBottom: 16
 };
 var limitValueStyle = (color) => ({
-  fontSize: "2.4rem",
+  fontSize: "2.8rem",
   fontWeight: 700,
   color,
   letterSpacing: "-0.02em",
   display: "flex",
-  alignItems: "baseline"
+  alignItems: "center",
+  justifyContent: "center"
 });
 var editableLimitStyle = (color) => ({
   ...limitValueStyle(color),
   cursor: "pointer"
 });
 var limitInputStyle = (color) => ({
-  fontSize: "2.4rem",
+  fontSize: "2.8rem",
   fontWeight: 700,
   color,
   background: "transparent",
@@ -4477,25 +4398,117 @@ var limitInputStyle = (color) => ({
   width: "6ch",
   fontFamily: "inherit",
   padding: 0,
-  letterSpacing: "-0.02em"
+  letterSpacing: "-0.02em",
+  textAlign: "center"
 });
-var tokenIconButtonStyle = (clickable) => ({
+var tokenIconWrapStyle = {
+  position: "relative",
+  width: 36,
+  height: 36
+};
+var dropdownOuterStyle = (themeTokens) => ({
+  marginTop: 4,
+  marginBottom: 12,
+  background: themeTokens.bgCard,
+  border: `1px solid ${themeTokens.border}`,
+  borderRadius: themeTokens.radiusLg,
+  boxShadow: themeTokens.shadowLg,
+  padding: "12px 14px 14px"
+});
+var dropdownLabelStyle = (color) => ({
+  fontSize: "0.78rem",
+  fontWeight: 500,
+  color,
+  marginBottom: 8
+});
+var dropdownInnerStyle = (themeTokens) => ({
+  background: themeTokens.bgInput,
+  border: `1px solid ${themeTokens.border}`,
+  borderRadius: themeTokens.radiusLg,
+  overflow: "hidden"
+});
+var dropdownRowStyle = (themeTokens, isSelected, isLast) => ({
   display: "flex",
   alignItems: "center",
-  gap: 4,
-  background: "transparent",
+  justifyContent: "space-between",
+  width: "100%",
+  padding: "14px 16px",
+  background: isSelected ? `${themeTokens.accent}18` : "transparent",
   border: "none",
-  cursor: clickable ? "pointer" : "default",
-  padding: 0,
-  flexShrink: 0
+  borderBottom: isLast ? "none" : `1px solid ${themeTokens.border}`,
+  cursor: "pointer",
+  fontFamily: "inherit",
+  textAlign: "left",
+  outline: "none"
 });
-var tokenIconWrapStyle = {
-  position: "relative",
+var dropdownRowLeftStyle = {
+  display: "flex",
+  alignItems: "center",
+  gap: 12,
+  minWidth: 0,
+  flex: 1
+};
+var dropdownTokenIconStyle = (themeTokens, hasLogo) => ({
   width: 36,
-  height: 36
+  height: 36,
+  borderRadius: "50%",
+  border: hasLogo ? "none" : `1.5px solid ${themeTokens.border}`,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  flexShrink: 0,
+  overflow: "hidden"
+});
+var dropdownTokenLogoStyle = {
+  width: 36,
+  height: 36,
+  borderRadius: "50%",
+  objectFit: "cover"
 };
+var dropdownTokenFallbackStyle = (color) => ({
+  fontSize: "1rem",
+  fontWeight: 700,
+  color
+});
+var dropdownTokenInfoStyle = {
+  display: "flex",
+  flexDirection: "column",
+  gap: 2,
+  minWidth: 0
+};
+var dropdownTokenNameRowStyle = {
+  display: "flex",
+  alignItems: "center",
+  gap: 4
+};
+var dropdownTokenSymbolStyle = (color) => ({
+  fontSize: "0.92rem",
+  fontWeight: 600,
+  color
+});
+var dropdownTokenDotStyle = (color) => ({
+  fontSize: "0.8rem",
+  color
+});
+var dropdownTokenChainStyle = (color) => ({
+  fontSize: "0.84rem",
+  fontWeight: 400,
+  color
+});
+var dropdownTokenBalanceStyle = (color) => ({
+  fontSize: "0.78rem",
+  color
+});
+var dropdownRadioEmptyStyle = (borderColor) => ({
+  width: 22,
+  height: 22,
+  borderRadius: "50%",
+  border: `2px solid ${borderColor}`,
+  flexShrink: 0
+});
 var presetsRowStyle = {
   display: "flex",
+  justifyContent: "center",
   gap: 10,
   marginBottom: 24
 };
@@ -4528,10 +4541,10 @@ function SetupStatusScreen({
   if (complete) {
     return /* @__PURE__ */ jsxRuntime.jsxs(ScreenLayout, { footer: /* @__PURE__ */ jsxRuntime.jsx(PoweredByFooter, {}), children: [
       /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { onBack: onContinue }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle4, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("img", { src: BLINK_LOGO, alt: "Blink", style: mascotStyle2 }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle5, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("img", { src: BLINK_LOGO, alt: "Blink", style: mascotStyle3 }),
         /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle6(tokens.text), children: "Done!" }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle4(tokens.textSecondary), children: "Return to the app to try one-tap deposits." })
+        /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle6(tokens.textSecondary), children: "Return to the app to try one-tap deposits." })
       ] })
     ] });
   }
@@ -4541,16 +4554,16 @@ function SetupStatusScreen({
   ];
   return /* @__PURE__ */ jsxRuntime.jsxs(ScreenLayout, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { onLogout }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle4, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle5, children: [
       /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 48 }),
       /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle6(tokens.text), children: "Setting up One-Tap..." }),
-      error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: errorBannerStyle4(tokens), children: error }),
+      error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: errorBannerStyle5(tokens), children: error }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { style: stepsWrapStyle, children: /* @__PURE__ */ jsxRuntime.jsx(StepList, { steps }) }),
       /* @__PURE__ */ jsxRuntime.jsx("p", { style: waitHintStyle(tokens.textMuted), children: "Usually takes a few seconds" })
     ] })
   ] });
 }
-var contentStyle4 = {
+var contentStyle5 = {
   flex: 1,
   display: "flex",
   flexDirection: "column",
@@ -4559,7 +4572,7 @@ var contentStyle4 = {
   textAlign: "center",
   padding: "0 24px 32px"
 };
-var mascotStyle2 = {
+var mascotStyle3 = {
   width: 56,
   height: 56
 };
@@ -4570,14 +4583,14 @@ var headingStyle6 = (color) => ({
   color,
   margin: "20px 0 8px"
 });
-var subtitleStyle4 = (color) => ({
+var subtitleStyle6 = (color) => ({
   fontSize: "0.9rem",
   color,
   margin: "0 0 28px",
   lineHeight: 1.5,
   maxWidth: 260
 });
-var errorBannerStyle4 = (tokens) => ({
+var errorBannerStyle5 = (tokens) => ({
   background: tokens.errorBg,
   border: `1px solid ${tokens.error}66`,
   borderRadius: 16,
@@ -4657,7 +4670,7 @@ function DepositScreen({
         /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: pickerRef, style: depositCardWrapStyle, children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { style: depositLabelStyle(tokens.textMuted), children: "Depositing" }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: amountRowStyle2, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: amountRowStyle, children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { style: amountValueStyle(tokens.text), children: [
                 "$",
                 amount.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })
@@ -4667,7 +4680,7 @@ function DepositScreen({
                 {
                   type: "button",
                   onClick: onSelectToken,
-                  style: tokenIconButtonStyle2(!!onSelectToken),
+                  style: tokenIconButtonStyle(!!onSelectToken),
                   children: [
                     /* @__PURE__ */ jsxRuntime.jsx("div", { style: tokenIconWrapStyle2, children: selectedTokenSymbol && TOKEN_LOGOS[selectedTokenSymbol] ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: TOKEN_LOGOS[selectedTokenSymbol], alt: selectedTokenSymbol, width: 36, height: 36, style: { borderRadius: "50%" } }) : /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "36", height: "36", viewBox: "0 0 36 36", fill: "none", children: [
                       /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "18", cy: "18", r: "18", fill: "#2DB84B" }),
@@ -4782,7 +4795,7 @@ function DepositScreen({
           minDepositFloor.toFixed(2),
           " to deposit via One-Tap."
         ] }),
-        error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: errorBannerStyle5(tokens), children: error })
+        error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: errorBannerStyle6(tokens), children: error })
       ]
     }
   );
@@ -4797,7 +4810,7 @@ var depositLabelStyle = (color) => ({
   color,
   marginBottom: 4
 });
-var amountRowStyle2 = {
+var amountRowStyle = {
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
@@ -4809,7 +4822,7 @@ var amountValueStyle = (color) => ({
   letterSpacing: "-0.02em",
   color
 });
-var tokenIconButtonStyle2 = (clickable) => ({
+var tokenIconButtonStyle = (clickable) => ({
   display: "flex",
   alignItems: "center",
   gap: 4,
@@ -4968,7 +4981,7 @@ var spendingLimitStyle = (color) => ({
   color,
   marginBottom: 8
 });
-var errorBannerStyle5 = (tokens) => ({
+var errorBannerStyle6 = (tokens) => ({
   background: tokens.errorBg,
   border: `1px solid ${tokens.error}66`,
   borderRadius: 16,
@@ -5013,7 +5026,7 @@ function SuccessScreen({
       ] }),
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { onLogout }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle5, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle6, children: [
           succeeded ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(IconCircle, { variant: "success", size: 64, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "32", height: "32", 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.jsxs("h2", { style: headingStyle7(tokens.text), children: [
@@ -5021,14 +5034,14 @@ function SuccessScreen({
               amount.toFixed(2),
               " deposited"
             ] }),
-            merchantName && /* @__PURE__ */ jsxRuntime.jsxs("p", { style: subtitleStyle5(tokens.textSecondary), children: [
+            merchantName && /* @__PURE__ */ jsxRuntime.jsxs("p", { style: subtitleStyle7(tokens.textSecondary), children: [
               "to ",
               merchantName
             ] })
           ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(IconCircle, { variant: "error", size: 64, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z", fill: tokens.error }) }) }),
             /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle7(tokens.text), children: "Transfer failed" }),
-            error && /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle5(tokens.error), children: error })
+            error && /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle7(tokens.error), children: error })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { style: summaryCardStyle(tokens), children: [
             sourceName && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: summaryRowStyle, children: [
@@ -5060,7 +5073,7 @@ function SuccessScreen({
     }
   );
 }
-var contentStyle5 = {
+var contentStyle6 = {
   flex: 1,
   display: "flex",
   flexDirection: "column",
@@ -5074,7 +5087,7 @@ var headingStyle7 = (color) => ({
   color,
   margin: "20px 0 4px"
 });
-var subtitleStyle5 = (color) => ({
+var subtitleStyle7 = (color) => ({
   fontSize: "0.9rem",
   color,
   margin: "0 0 20px"
@@ -5188,7 +5201,7 @@ function SelectSourceScreen({
             onLogout
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle6(tokens.textMuted), children: "Choose which chain and token to pay from." }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle8(tokens.textMuted), children: "Choose which chain and token to pay from." }),
         /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle4(tokens.textSecondary), children: "Chain" }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { style: optionListStyle, children: choices.map((chain) => {
           const isSelected = chain.chainName === selectedChainName;
@@ -5249,7 +5262,7 @@ function SelectSourceScreen({
     }
   );
 }
-var subtitleStyle6 = (color) => ({
+var subtitleStyle8 = (color) => ({
   fontSize: "0.85rem",
   color,
   margin: "0 0 20px",
@@ -5392,7 +5405,7 @@ function AdvancedSourceScreen({
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle8(tokens.text), children: "Set up One-Tap deposits" }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle7(tokens.textSecondary), children: "Select a token source for your One-Tap deposits." }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle9(tokens.textSecondary), children: "Select a token source for your One-Tap deposits." }),
         /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle5(tokens.textSecondary), children: "Select tokens to approve" }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { style: chainListStyle, children: choices.map((chain) => {
           const isExpanded = expandedChain === chain.chainName;
@@ -5462,7 +5475,7 @@ var headingStyle8 = (color) => ({
   color,
   margin: "8px 0 4px"
 });
-var subtitleStyle7 = (color) => ({
+var subtitleStyle9 = (color) => ({
   fontSize: "0.86rem",
   color,
   margin: "0 0 20px",
@@ -5590,15 +5603,15 @@ function TransferStatusScreen({
   const steps = buildSteps(phase);
   return /* @__PURE__ */ jsxRuntime.jsxs(ScreenLayout, { footer: /* @__PURE__ */ jsxRuntime.jsx(PoweredByFooter, {}), children: [
     /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { onLogout }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle6, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle7, children: [
       /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 64 }),
       /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle9(tokens.text), children: "Depositing your money..." }),
-      error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: errorBannerStyle6(tokens), children: error }),
+      error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: errorBannerStyle7(tokens), children: error }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { style: stepsWrapStyle2, children: /* @__PURE__ */ jsxRuntime.jsx(StepList, { steps }) })
     ] })
   ] });
 }
-var contentStyle6 = {
+var contentStyle7 = {
   flex: 1,
   display: "flex",
   flexDirection: "column",
@@ -5614,7 +5627,7 @@ var headingStyle9 = (color) => ({
   color,
   margin: "20px 0 16px"
 });
-var errorBannerStyle6 = (tokens) => ({
+var errorBannerStyle7 = (tokens) => ({
   background: tokens.errorBg,
   border: `1px solid ${tokens.error}66`,
   borderRadius: 16,
@@ -5668,14 +5681,14 @@ function OpenWalletScreen({
         ] }),
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { onLogout }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle7, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle8, children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { style: logoCircleStyle(tokens.bgInput), children: logoSrc ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: logoSrc, alt: displayName, style: logoStyle2 }) : /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 32 }) }),
             /* @__PURE__ */ jsxRuntime.jsxs("h2", { style: headingStyle10(tokens.text), children: [
               "Setting up ",
               displayName,
               "..."
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle8(tokens.textSecondary), children: "Approve the connection in your wallet extension." }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle10(tokens.textSecondary), children: "Approve the connection in your wallet extension." }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { style: waitingBadgeStyle(tokens), children: [
               /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 14 }),
               /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Waiting for authorization..." })
@@ -5701,10 +5714,10 @@ function OpenWalletScreen({
       ] }),
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { onBack, onLogout }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle7, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle8, children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { style: logoCircleStyle(tokens.bgInput), children: logoSrc ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: logoSrc, alt: displayName, style: logoStyle2 }) : /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 32 }) }),
           /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle10(tokens.text), children: loading ? "Connecting..." : `Open ${displayName}` }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle8(tokens.textSecondary), children: loading ? "Creating transfer and preparing your wallet link..." : `Continue in ${displayName} to authorize this connection.` }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle10(tokens.textSecondary), children: loading ? "Creating transfer and preparing your wallet link..." : `Continue in ${displayName} to authorize this connection.` }),
           !loading && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: waitingBadgeStyle(tokens), children: [
             /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 14 }),
             /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Waiting for authorization..." })
@@ -5714,7 +5727,7 @@ function OpenWalletScreen({
     }
   );
 }
-var contentStyle7 = {
+var contentStyle8 = {
   flex: 1,
   display: "flex",
   flexDirection: "column",
@@ -5751,7 +5764,7 @@ var headingStyle10 = (color) => ({
   color,
   margin: "20px 0 8px"
 });
-var subtitleStyle8 = (color) => ({
+var subtitleStyle10 = (color) => ({
   fontSize: "0.9rem",
   color,
   margin: "0 0 24px",
@@ -5800,10 +5813,10 @@ function ConfirmSignScreen({
       ] }),
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { onLogout }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle8, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle9, children: [
           logoSrc ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: logoSrc, alt: displayName, style: logoStyle3 }) : /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 48 }),
           /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle11(tokens.text), children: "Wallet authorized" }),
-          /* @__PURE__ */ jsxRuntime.jsxs("p", { style: subtitleStyle9(tokens.textSecondary), children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("p", { style: subtitleStyle11(tokens.textSecondary), children: [
             displayName,
             " approved the connection. Tap below to confirm your payment."
           ] }),
@@ -5816,7 +5829,7 @@ function ConfirmSignScreen({
     }
   );
 }
-var contentStyle8 = {
+var contentStyle9 = {
   flex: 1,
   display: "flex",
   flexDirection: "column",
@@ -5838,7 +5851,7 @@ var headingStyle11 = (color) => ({
   color,
   margin: "20px 0 8px"
 });
-var subtitleStyle9 = (color) => ({
+var subtitleStyle11 = (color) => ({
   fontSize: "0.9rem",
   color,
   margin: "0 0 24px",
@@ -5922,7 +5935,7 @@ function TokenPickerScreen({
           {
             type: "button",
             onClick: onBack,
-            style: tokenIconButtonStyle3,
+            style: tokenIconButtonStyle2,
             children: [
               /* @__PURE__ */ jsxRuntime.jsx("div", { style: tokenIconWrapStyle3, children: selectedTokenSymbol && TOKEN_LOGOS[selectedTokenSymbol] ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: TOKEN_LOGOS[selectedTokenSymbol], alt: selectedTokenSymbol, width: 36, height: 36, style: { borderRadius: "50%" } }) : /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "36", height: "36", viewBox: "0 0 36 36", fill: "none", children: [
                 /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "18", cy: "18", r: "18", fill: "#2DB84B" }),
@@ -5985,7 +5998,7 @@ var depositAmountStyle = (color) => ({
   letterSpacing: "-0.02em",
   color
 });
-var tokenIconButtonStyle3 = {
+var tokenIconButtonStyle2 = {
   display: "flex",
   alignItems: "center",
   gap: 4,
@@ -6108,60 +6121,243 @@ var selectCircleSelectedStyle = (color) => ({
   justifyContent: "center",
   flexShrink: 0
 });
+function entryKey(entry) {
+  return `${entry.sourceChainId}-${entry.tokenAddress.toLowerCase()}`;
+}
+function isPreciseMoneyNonPositive(fee) {
+  const raw = fee.value.trim();
+  if (!/^-?\d+(\.\d*)?$/.test(raw)) return false;
+  const n = Number(raw);
+  return Number.isFinite(n) && n <= 0;
+}
+function formatNonPositiveFeeDisplay(fee) {
+  if (fee.currency === "USD") return "Under $0.01";
+  return `Less than 0.01 ${fee.currency}`;
+}
+function formatPreciseMoneyForDisplay(fee) {
+  const raw = fee.value.trim();
+  if (fee.currency === "USD") {
+    if (!/^\d+(\.\d*)?$/.test(raw)) {
+      return `$${raw}`;
+    }
+    const [whole, frac = ""] = raw.split(".");
+    const dec = `${frac}00`.slice(0, 2);
+    const intFmt = whole.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+    return `$${intFmt}.${dec}`;
+  }
+  return `${raw} ${fee.currency}`;
+}
 function GuestTokenPickerScreen({
   entries,
   loading,
   setting,
   depositAmount,
   error,
+  pendingEntry,
+  quoteFee,
+  quoteLoading,
   onSelect,
-  onBack
+  onConfirm,
+  onBack,
+  defaultTokenListExpanded = false
 }) {
   const { tokens: t } = useBlinkConfig();
+  const pendingKey = pendingEntry ? entryKey(pendingEntry) : null;
+  const [tokenListOpen, setTokenListOpen] = react.useState(defaultTokenListExpanded);
+  const pickerRef = react.useRef(null);
+  react.useEffect(() => {
+    if (!tokenListOpen) return;
+    const handleMouseDown = (e) => {
+      if (pickerRef.current && !pickerRef.current.contains(e.target)) {
+        setTokenListOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleMouseDown);
+    return () => document.removeEventListener("mousedown", handleMouseDown);
+  }, [tokenListOpen]);
   if (loading) {
     return /* @__PURE__ */ jsxRuntime.jsxs(ScreenLayout, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { title: "Select Token", onBack }),
+      /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { onBack }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { style: loadingWrapStyle, children: /* @__PURE__ */ jsxRuntime.jsx(Spinner, { label: "Loading balances..." }) })
     ] });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(ScreenLayout, { footer: /* @__PURE__ */ jsxRuntime.jsx(PoweredByFooter, {}), children: [
-    /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { title: "Select Token", onBack }),
-    depositAmount != null && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: depositHeaderStyle, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { style: depositLabelStyle3(t.textMuted), children: "Depositing" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: depositAmountStyle2(t.text), children: [
-        "$",
-        depositAmount.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })
-      ] })
-    ] }),
-    error && /* @__PURE__ */ jsxRuntime.jsx("p", { style: errorStyle3(t.error), children: error }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { style: sectionLabelStyle2(t.textMuted), children: "Choose token to pay with" }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { style: tokenListStyle3, children: entries.map((entry) => /* @__PURE__ */ jsxRuntime.jsxs(
-      "button",
-      {
-        type: "button",
-        onClick: () => onSelect(entry),
-        disabled: setting,
-        style: tokenRowStyle3(t, setting),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { style: tokenIconCircleStyle3(t, !!TOKEN_LOGOS[entry.tokenSymbol]), children: TOKEN_LOGOS[entry.tokenSymbol] ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: TOKEN_LOGOS[entry.tokenSymbol], alt: entry.tokenSymbol, style: tokenLogoImgStyle3 }) : /* @__PURE__ */ jsxRuntime.jsx("span", { style: tokenIconTextStyle3(t.textMuted), children: "$" }) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: tokenInfoStyle3, children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: tokenNameRowStyle2, children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { style: tokenSymbolTextStyle2(t.text), children: entry.tokenSymbol }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { style: tokenChainDotStyle2(t.textMuted), children: "\xB7" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { style: tokenChainTextStyle2(t.textMuted), children: entry.chainName })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { style: tokenBalanceStyle2(t.textMuted), children: [
-              "$",
-              entry.balance.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })
+  const rowBusy = setting || quoteLoading;
+  const displayEntry = pendingEntry ?? entries[0] ?? null;
+  const canConfirm = Boolean(quoteFee && pendingEntry && !quoteLoading);
+  const feeLine = (() => {
+    if (quoteLoading && pendingEntry) {
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { style: feeRowContainerStyle, "aria-live": "polite", children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: feeRowLabelStyle(t.textMuted), children: "Getting fee estimate\u2026" }) });
+    }
+    if (quoteFee) {
+      const feeText = isPreciseMoneyNonPositive(quoteFee) ? formatNonPositiveFeeDisplay(quoteFee) : formatPreciseMoneyForDisplay(quoteFee);
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: feeRowContainerStyle, "aria-live": "polite", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: feeRowLabelStyle(t.textMuted), children: "Fee estimate: " }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: feeRowAmountStyle(t.textSecondary), children: feeText })
+      ] });
+    }
+    return null;
+  })();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    ScreenLayout,
+    {
+      footer: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        canConfirm && /* @__PURE__ */ jsxRuntime.jsx(PrimaryButton, { onClick: () => void onConfirm(), loading: setting, disabled: setting, children: "Continue" }),
+        /* @__PURE__ */ jsxRuntime.jsx(PoweredByFooter, {})
+      ] }),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { onBack }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: pickerRef, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: depositCardSurfaceStyle(t, tokenListOpen), children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { style: depositLabelStyle3(t.textMuted), children: "Deposit" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: amountBandStyle, children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: amountLeftColStyle, children: [
+                depositAmount != null && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: depositAmountStyle2(t.text), children: [
+                  "$",
+                  depositAmount.toLocaleString("en-US", {
+                    minimumFractionDigits: 0,
+                    maximumFractionDigits: 2
+                  })
+                ] }),
+                feeLine
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => entries.length > 0 && setTokenListOpen((o) => !o),
+                  disabled: entries.length === 0 || rowBusy,
+                  style: tokenTriggerStyle(t, entries.length > 0 && !rowBusy),
+                  "aria-expanded": tokenListOpen,
+                  "aria-haspopup": "listbox",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { style: tokenTriggerIconsStyle, children: pendingEntry && TOKEN_LOGOS[pendingEntry.tokenSymbol] ? /* @__PURE__ */ jsxRuntime.jsx(
+                      "img",
+                      {
+                        src: TOKEN_LOGOS[pendingEntry.tokenSymbol],
+                        alt: "",
+                        width: 28,
+                        height: 28,
+                        style: triggerLogoStyle(0)
+                      }
+                    ) : entries[0] && entries[1] && TOKEN_LOGOS[entries[0].tokenSymbol] && TOKEN_LOGOS[entries[1].tokenSymbol] ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "img",
+                        {
+                          src: TOKEN_LOGOS[entries[0].tokenSymbol],
+                          alt: "",
+                          width: 28,
+                          height: 28,
+                          style: triggerLogoStyle(0)
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "img",
+                        {
+                          src: TOKEN_LOGOS[entries[1].tokenSymbol],
+                          alt: "",
+                          width: 28,
+                          height: 28,
+                          style: triggerLogoStyle(14)
+                        }
+                      )
+                    ] }) : displayEntry && TOKEN_LOGOS[displayEntry.tokenSymbol] ? /* @__PURE__ */ jsxRuntime.jsx(
+                      "img",
+                      {
+                        src: TOKEN_LOGOS[displayEntry.tokenSymbol],
+                        alt: "",
+                        width: 28,
+                        height: 28,
+                        style: triggerLogoStyle(0)
+                      }
+                    ) : null }),
+                    /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", style: { opacity: 0.5 }, children: tokenListOpen ? /* @__PURE__ */ jsxRuntime.jsx(
+                      "path",
+                      {
+                        d: "M18 15l-6-6-6 6",
+                        stroke: t.textMuted,
+                        strokeWidth: "2.5",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round"
+                      }
+                    ) : /* @__PURE__ */ jsxRuntime.jsx(
+                      "path",
+                      {
+                        d: "M6 9l6 6 6-6",
+                        stroke: t.textMuted,
+                        strokeWidth: "2.5",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round"
+                      }
+                    ) })
+                  ]
+                }
+              )
             ] })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: chevronStyle, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z", fill: t.textMuted }) })
-        ]
-      },
-      `${entry.chainId}-${entry.tokenAddress}`
-    )) }),
-    entries.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { style: emptyStyle(t.textMuted), children: "No supported tokens found in your wallet. Please ensure you have USDC or USDT." })
-  ] });
+          tokenListOpen && entries.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: tokenDropdownOuterStyle(t), children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { style: accountDropdownLabelStyle2(t.textMuted), children: "Choose token" }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { style: tokenDropdownInnerStyle(t), children: entries.map((entry, index) => {
+              const selected = pendingKey === entryKey(entry);
+              const isLast = index === entries.length - 1;
+              return /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => {
+                    void onSelect(entry);
+                  },
+                  disabled: rowBusy,
+                  style: pickerRowStyle(t, selected, isLast),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: pickerRowLeftStyle, children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("div", { style: tokenIconCircleStyle3(t, !!TOKEN_LOGOS[entry.tokenSymbol]), children: TOKEN_LOGOS[entry.tokenSymbol] ? /* @__PURE__ */ jsxRuntime.jsx(
+                        "img",
+                        {
+                          src: TOKEN_LOGOS[entry.tokenSymbol],
+                          alt: entry.tokenSymbol,
+                          style: tokenLogoImgStyle3
+                        }
+                      ) : /* @__PURE__ */ jsxRuntime.jsx("span", { style: tokenIconTextStyle3(t.textMuted), children: "$" }) }),
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: pickerRowInfoStyle, children: [
+                        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: tokenNameRowStyle2, children: [
+                          /* @__PURE__ */ jsxRuntime.jsx("span", { style: tokenSymbolTextStyle2(t.text), children: entry.tokenSymbol }),
+                          /* @__PURE__ */ jsxRuntime.jsx("span", { style: tokenChainDotStyle2(t.textMuted), children: "\xB7" }),
+                          /* @__PURE__ */ jsxRuntime.jsx("span", { style: tokenChainTextStyle2(t.textMuted), children: entry.chainName })
+                        ] }),
+                        /* @__PURE__ */ jsxRuntime.jsxs("span", { style: tokenBalanceStyle2(t.textMuted), children: [
+                          "$",
+                          entry.balance.toLocaleString("en-US", {
+                            minimumFractionDigits: 2,
+                            maximumFractionDigits: 2
+                          })
+                        ] })
+                      ] })
+                    ] }),
+                    selected ? /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "22", height: "22", viewBox: "0 0 22 22", fill: "none", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "11", cy: "11", r: "11", fill: t.success }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "path",
+                        {
+                          d: "M7 11l3 3 5-5",
+                          stroke: "#fff",
+                          strokeWidth: "2",
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round"
+                        }
+                      )
+                    ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: radioEmptyStyle2(t.border) })
+                  ]
+                },
+                entryKey(entry)
+              );
+            }) })
+          ] })
+        ] }),
+        error && /* @__PURE__ */ jsxRuntime.jsx("p", { style: errorStyle3(t.error), children: error }),
+        entries.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { style: emptyStyle(t.textMuted), children: "No supported tokens found in your wallet. Please ensure you have USDC or USDT." })
+      ]
+    }
+  );
 }
 var loadingWrapStyle = {
   textAlign: "center",
@@ -6171,52 +6367,133 @@ var loadingWrapStyle = {
   alignItems: "center",
   justifyContent: "center"
 };
-var depositHeaderStyle = {
-  marginBottom: 20
-};
+var depositCardSurfaceStyle = (tokens, listOpen) => ({
+  background: tokens.bgCard,
+  border: `1px solid ${tokens.border}`,
+  borderRadius: tokens.radiusLg,
+  padding: "16px 20px",
+  marginBottom: listOpen ? 4 : 16
+});
 var depositLabelStyle3 = (color) => ({
   fontSize: "0.75rem",
   fontWeight: 500,
   color,
   marginBottom: 4
 });
+var amountBandStyle = {
+  display: "flex",
+  alignItems: "flex-start",
+  justifyContent: "space-between",
+  gap: 12
+};
+var amountLeftColStyle = {
+  flex: 1,
+  minWidth: 0
+};
 var depositAmountStyle2 = (color) => ({
   fontSize: "2.4rem",
   fontWeight: 700,
   letterSpacing: "-0.02em",
-  color
-});
-var errorStyle3 = (color) => ({
-  fontSize: "0.84rem",
   color,
-  margin: "0 0 12px",
-  lineHeight: 1.5
+  lineHeight: 1.05
 });
-var sectionLabelStyle2 = (color) => ({
+var feeRowContainerStyle = {
   fontSize: "0.84rem",
   fontWeight: 500,
+  marginTop: 6
+};
+var feeRowLabelStyle = (color) => ({ color });
+var feeRowAmountStyle = (color) => ({
   color,
-  marginBottom: 12
+  fontVariantNumeric: "tabular-nums"
 });
-var tokenListStyle3 = {
+var tokenTriggerStyle = (tokens, interactive) => ({
   display: "flex",
-  flexDirection: "column",
-  gap: 10
+  alignItems: "center",
+  gap: 6,
+  flexShrink: 0,
+  marginTop: 4,
+  padding: "6px 10px",
+  background: tokens.bgInput,
+  border: `1px solid ${tokens.border}`,
+  borderRadius: 999,
+  cursor: interactive ? "pointer" : "default",
+  fontFamily: "inherit"
+});
+var tokenTriggerIconsStyle = {
+  position: "relative",
+  width: 40,
+  height: 28
 };
-var tokenRowStyle3 = (tokens, disabled) => ({
+var triggerLogoStyle = (left) => ({
+  position: "absolute",
+  left,
+  top: 0,
+  borderRadius: "50%",
+  objectFit: "cover",
+  border: "2px solid rgba(255,255,255,0.9)",
+  boxSizing: "content-box"
+});
+var tokenDropdownOuterStyle = (tokens) => ({
+  marginTop: 4,
+  marginBottom: 16,
+  background: tokens.bgCard,
+  border: `1px solid ${tokens.border}`,
+  borderRadius: tokens.radiusLg,
+  boxShadow: tokens.shadowLg,
+  padding: "12px 14px 14px"
+});
+var accountDropdownLabelStyle2 = (color) => ({
+  fontSize: "0.78rem",
+  fontWeight: 500,
+  color,
+  marginBottom: 8
+});
+var tokenDropdownInnerStyle = (tokens) => ({
+  background: tokens.bgInput,
+  border: `1px solid ${tokens.border}`,
+  borderRadius: tokens.radiusLg,
+  overflow: "hidden"
+});
+var pickerRowStyle = (tokens, isSelected, isLast) => ({
   display: "flex",
   alignItems: "center",
-  gap: 14,
+  justifyContent: "space-between",
+  width: "100%",
   padding: "14px 16px",
-  background: tokens.bgInput,
-  border: `1px solid ${tokens.border}`,
-  borderRadius: 16,
-  cursor: disabled ? "default" : "pointer",
+  background: isSelected ? `${tokens.accent}18` : "transparent",
+  border: "none",
+  borderBottom: isLast ? "none" : `1px solid ${tokens.border}`,
+  cursor: "pointer",
   fontFamily: "inherit",
   textAlign: "left",
-  width: "100%",
-  opacity: disabled ? 0.6 : 1,
-  transition: "opacity 0.15s ease"
+  outline: "none"
+});
+var pickerRowLeftStyle = {
+  display: "flex",
+  alignItems: "center",
+  gap: 12,
+  minWidth: 0,
+  flex: 1
+};
+var pickerRowInfoStyle = {
+  display: "flex",
+  flexDirection: "column",
+  gap: 2,
+  minWidth: 0
+};
+var radioEmptyStyle2 = (borderColor) => ({
+  width: 22,
+  height: 22,
+  borderRadius: "50%",
+  border: `2px solid ${borderColor}`,
+  flexShrink: 0
+});
+var errorStyle3 = (color) => ({
+  fontSize: "0.84rem",
+  color,
+  margin: "0 0 12px",
+  lineHeight: 1.5
 });
 var tokenIconCircleStyle3 = (tokens, hasLogo) => ({
   width: 36,
@@ -6240,13 +6517,6 @@ var tokenIconTextStyle3 = (color) => ({
   fontWeight: 700,
   color
 });
-var tokenInfoStyle3 = {
-  display: "flex",
-  flexDirection: "column",
-  gap: 2,
-  flex: 1,
-  minWidth: 0
-};
 var tokenNameRowStyle2 = {
   display: "flex",
   alignItems: "center",
@@ -6270,10 +6540,6 @@ var tokenBalanceStyle2 = (color) => ({
   fontSize: "0.78rem",
   color
 });
-var chevronStyle = {
-  flexShrink: 0,
-  opacity: 0.4
-};
 var emptyStyle = (color) => ({
   fontSize: "0.88rem",
   color,
@@ -6295,7 +6561,7 @@ function GuestPreauthSetupCompleteScreen({
       ] }),
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { onLogout }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle9, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle10, children: [
           /* @__PURE__ */ jsxRuntime.jsx(IconCircle, { variant: "success", size: 64, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
             "path",
             {
@@ -6304,13 +6570,13 @@ function GuestPreauthSetupCompleteScreen({
             }
           ) }) }),
           /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle12(tokens.text), children: "Setup complete" }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle10(tokens.textSecondary), children: "Your account is linked and ready. You can close this window or make another deposit." })
+          /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle12(tokens.textSecondary), children: "Your account is linked and ready. You can close this window or make another deposit." })
         ] })
       ]
     }
   );
 }
-var contentStyle9 = {
+var contentStyle10 = {
   display: "flex",
   flexDirection: "column",
   alignItems: "center",
@@ -6326,7 +6592,7 @@ function headingStyle12(color) {
     color
   };
 }
-function subtitleStyle10(color) {
+function subtitleStyle12(color) {
   return {
     margin: 0,
     fontSize: 15,
@@ -6339,14 +6605,14 @@ function GuestPreauthLinkingScreen({ onLogout }) {
   const { tokens } = useBlinkConfig();
   return /* @__PURE__ */ jsxRuntime.jsxs(ScreenLayout, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { onLogout }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle10, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle11, children: [
       /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 48 }),
       /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle13(tokens.text), children: "Setting up your account..." }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle11(tokens.textSecondary), children: "Linking your wallet to your Blink account. This usually takes a few seconds." })
+      /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle13(tokens.textSecondary), children: "Linking your wallet to your Blink account. This usually takes a few seconds." })
     ] })
   ] });
 }
-var contentStyle10 = {
+var contentStyle11 = {
   flex: 1,
   display: "flex",
   flexDirection: "column",
@@ -6364,7 +6630,7 @@ function headingStyle13(color) {
     color
   };
 }
-function subtitleStyle11(color) {
+function subtitleStyle13(color) {
   return {
     margin: 0,
     fontSize: "0.9rem",
@@ -6456,6 +6722,9 @@ function StepRendererContent({
     guestTokenEntries,
     guestLoadingBalances,
     guestSettingSender,
+    guestPendingEntry,
+    guestQuoteFee,
+    guestQuoteLoading,
     authInput,
     otpCode,
     selectSourceChainName,
@@ -6579,6 +6848,28 @@ function StepRendererContent({
       );
       const effectiveTokenCount = tokenCount > 0 ? tokenCount : selectSourceTokenCount;
       const effectiveSourceLabel = selectedSourceLabel ?? (selectSourceChainName && selectSourceTokenSymbol ? `${selectSourceTokenSymbol} on ${selectSourceChainName}` : void 0);
+      const setupTokenOptions = selectedAccount ? selectedAccount.wallets.flatMap(
+        (w) => w.sources.filter((s) => s.balance.total.amount > 0).map((s) => ({
+          symbol: s.token.symbol,
+          chainName: w.chain.name,
+          balance: s.balance.available.amount,
+          walletId: w.id
+        }))
+      ) : selectSourceChoices.flatMap(
+        (chain) => chain.tokens.map((t) => ({
+          symbol: t.tokenSymbol,
+          chainName: chain.chainName,
+          balance: t.balance
+        }))
+      );
+      const handleSetupSelectToken = (symbol, chainName, walletId) => {
+        if (walletId) {
+          handlers.onSelectAuthorizedToken(walletId, symbol);
+        } else {
+          handlers.onSelectSourceChainChange(chainName);
+          handlers.onSetSelectSourceTokenSymbol(symbol);
+        }
+      };
       return /* @__PURE__ */ jsxRuntime.jsx(
         SetupScreen,
         {
@@ -6592,7 +6883,9 @@ function StepRendererContent({
           selectedSourceLabel: effectiveSourceLabel,
           loading: savingOneTapLimit,
           error: state.error,
-          selectedTokenSymbol: selectedSource?.token.symbol ?? selectSourceTokenSymbol
+          selectedTokenSymbol: selectedSource?.token.symbol ?? selectSourceTokenSymbol,
+          tokenOptions: setupTokenOptions,
+          onSelectToken: handleSetupSelectToken
         }
       );
     }
@@ -6693,7 +6986,11 @@ function StepRendererContent({
           setting: guestSettingSender,
           depositAmount: depositAmount ?? void 0,
           error: state.error,
+          pendingEntry: forms.guestPendingEntry,
+          quoteFee: forms.guestQuoteFee,
+          quoteLoading: forms.guestQuoteLoading,
           onSelect: handlers.onSelectGuestToken,
+          onConfirm: handlers.onConfirmGuestToken,
           onBack: handlers.onGuestBackFromTokenPicker
         }
       );
@@ -7578,7 +7875,7 @@ function useProviderHandlers(deps) {
           guestSessionToken: result.guestSessionToken
         });
       } else {
-        const account = getAccount(wagmiConfig2);
+        const account = core.getAccount(wagmiConfig2);
         if (!account.isConnected) {
           const connector = connectors.find((c) => c.type === "injected") ?? connectors[0];
           if (!connector) {
@@ -7997,8 +8294,8 @@ function useProviderHandlers(deps) {
 }
 
 // src/guestTokens.ts
-function mapBalancesToGuestTokenEntries(options) {
-  return options.map((opt) => ({
+function mapGuestPickerEntries(options) {
+  const mapped = options.map((opt) => ({
     chainId: opt.chainId,
     sourceChainId: opt.sourceChainId,
     chainName: opt.chainName,
@@ -8007,7 +8304,26 @@ function mapBalancesToGuestTokenEntries(options) {
     decimals: opt.decimals,
     rawBalance: opt.rawBalance,
     balance: Number(opt.rawBalance) / 10 ** opt.decimals
-  })).filter((entry) => entry.balance > 0).sort((a, b) => b.balance - a.balance);
+  }));
+  const positive = mapped.filter((e) => e.balance > 0).sort((a, b) => b.balance - a.balance);
+  if (positive.length > 0) return positive;
+  return mapped.sort((a, b) => b.balance - a.balance);
+}
+function guestEntryMatchingRecommended(balances, recommended) {
+  const raw = balances.find(
+    (b) => b.sourceChainId === recommended.sourceChainId && b.tokenAddress.toLowerCase() === recommended.tokenAddress.toLowerCase()
+  );
+  if (!raw) return null;
+  return {
+    chainId: raw.chainId,
+    sourceChainId: raw.sourceChainId,
+    chainName: raw.chainName,
+    tokenSymbol: raw.tokenSymbol,
+    tokenAddress: raw.tokenAddress,
+    decimals: raw.decimals,
+    rawBalance: raw.rawBalance,
+    balance: Number(raw.rawBalance) / 10 ** raw.decimals
+  };
 }
 
 // src/hooks/useGuestTransferHandlers.ts
@@ -8034,40 +8350,133 @@ function useGuestTransferHandlers(deps) {
   const [guestTokenEntries, setGuestTokenEntries] = react.useState([]);
   const [loadingBalances, setLoadingBalances] = react.useState(false);
   const [settingSender, setSettingSender] = react.useState(false);
+  const [pendingGuestEntry, setPendingGuestEntry] = react.useState(null);
+  const [guestFee, setGuestFee] = react.useState(null);
+  const [guestQuoteLoading, setGuestQuoteLoading] = react.useState(false);
   const executingBridgeRef = react.useRef(false);
   const fetchedRef = react.useRef(false);
   const selectedGuestTokenRef = react.useRef(null);
+  react.useEffect(() => {
+    if (guestTransferId != null) return;
+    fetchedRef.current = false;
+    setGuestTokenEntries([]);
+    setPendingGuestEntry(null);
+    setGuestFee(null);
+    setGuestQuoteLoading(false);
+    setLoadingBalances(false);
+  }, [guestTransferId]);
   react.useEffect(() => {
     if (!isGuestFlow || !guestTransferId || !guestSessionToken || fetchedRef.current) return;
-    const account = getAccount(wagmiConfig2);
+    const account = core.getAccount(wagmiConfig2);
     if (!account.address) return;
     fetchedRef.current = true;
     setLoadingBalances(true);
-    fetchGuestTransferBalances(apiBaseUrl, guestTransferId, guestSessionToken, account.address).then((options) => mapBalancesToGuestTokenEntries(options)).then((entries) => {
+    putGuestTransferSender(apiBaseUrl, guestTransferId, guestSessionToken, {
+      senderAddress: account.address
+    }).then(async (res) => {
+      const balances = res.source?.balances;
+      if (!balances?.length) {
+        dispatch({ type: "SET_ERROR", error: "No supported tokens found for this transfer." });
+        return;
+      }
+      const entries = mapGuestPickerEntries(balances);
       setGuestTokenEntries(entries);
       if (entries.length === 0) {
         dispatch({ type: "SET_ERROR", error: "No supported tokens found in your wallet." });
+        return;
+      }
+      const recommended = res.source?.recommended;
+      const autoEntry = recommended ? guestEntryMatchingRecommended(balances, recommended) : null;
+      const pick = autoEntry && entries.some(
+        (e) => e.sourceChainId === autoEntry.sourceChainId && e.tokenAddress.toLowerCase() === autoEntry.tokenAddress.toLowerCase()
+      ) ? autoEntry : entries[0];
+      setPendingGuestEntry(pick);
+      setGuestFee(null);
+      if (res.fee?.quote != null) {
+        setGuestFee(res.fee);
+        return;
+      }
+      setGuestQuoteLoading(true);
+      try {
+        const quote = await postGuestTransferFeeQuote(
+          apiBaseUrl,
+          guestTransferId,
+          guestSessionToken,
+          account.address,
+          pick.sourceChainId,
+          pick.tokenAddress
+        );
+        setGuestFee(quote);
+      } catch (err) {
+        captureException(err);
+        setPendingGuestEntry(null);
+        setGuestFee(null);
+        const msg = err instanceof Error ? err.message : "Failed to load fee estimate";
+        dispatch({ type: "SET_ERROR", error: msg });
+        onError?.(msg);
+      } finally {
+        setGuestQuoteLoading(false);
       }
     }).catch((err) => {
       captureException(err);
-      dispatch({ type: "SET_ERROR", error: "Failed to fetch token balances." });
+      dispatch({ type: "SET_ERROR", error: "Failed to load payment sources." });
     }).finally(() => setLoadingBalances(false));
-  }, [isGuestFlow, guestTransferId, guestSessionToken, apiBaseUrl, wagmiConfig2, dispatch]);
+  }, [isGuestFlow, guestTransferId, guestSessionToken, apiBaseUrl, wagmiConfig2, dispatch, onError]);
   react.useEffect(() => {
     if (!isGuestFlow) {
       fetchedRef.current = false;
       selectedGuestTokenRef.current = null;
       setGuestTokenEntries([]);
+      setPendingGuestEntry(null);
+      setGuestFee(null);
+      setGuestQuoteLoading(false);
     }
   }, [isGuestFlow]);
   const handleSelectGuestToken = react.useCallback(async (entry) => {
     if (!guestTransferId || !guestSessionToken) return;
-    const account = getAccount(wagmiConfig2);
+    const account = core.getAccount(wagmiConfig2);
     if (!account.address) {
       dispatch({ type: "SET_ERROR", error: "Wallet not connected." });
       return;
     }
+    setGuestQuoteLoading(true);
+    dispatch({ type: "SET_ERROR", error: null });
+    setPendingGuestEntry(entry);
+    setGuestFee(null);
+    try {
+      console.info(
+        `[blink-sdk] type=guest Fee quote preview: address=${account.address}, chain=${entry.sourceChainId}, token=${entry.tokenSymbol}`
+      );
+      const quote = await postGuestTransferFeeQuote(
+        apiBaseUrl,
+        guestTransferId,
+        guestSessionToken,
+        account.address,
+        entry.sourceChainId,
+        entry.tokenAddress
+      );
+      setGuestFee(quote);
+    } catch (err) {
+      captureException(err);
+      setPendingGuestEntry(null);
+      setGuestFee(null);
+      const msg = err instanceof Error ? err.message : "Failed to load fee estimate";
+      dispatch({ type: "SET_ERROR", error: msg });
+      onError?.(msg);
+    } finally {
+      setGuestQuoteLoading(false);
+    }
+  }, [guestTransferId, guestSessionToken, wagmiConfig2, apiBaseUrl, dispatch, onError]);
+  const handleConfirmGuestToken = react.useCallback(async () => {
+    if (!guestTransferId || !guestSessionToken || !pendingGuestEntry) return;
+    const account = core.getAccount(wagmiConfig2);
+    if (!account.address) {
+      dispatch({ type: "SET_ERROR", error: "Wallet not connected." });
+      return;
+    }
+    const entry = pendingGuestEntry;
     setSettingSender(true);
+    dispatch({ type: "SET_ERROR", error: null });
     try {
       console.info(
         `[blink-sdk] type=guest Setting sender: address=${account.address}, chain=${entry.sourceChainId}, token=${entry.tokenSymbol}`
@@ -8089,7 +8498,15 @@ function useGuestTransferHandlers(deps) {
     } finally {
       setSettingSender(false);
     }
-  }, [guestTransferId, guestSessionToken, wagmiConfig2, apiBaseUrl, dispatch, onError]);
+  }, [
+    guestTransferId,
+    guestSessionToken,
+    pendingGuestEntry,
+    wagmiConfig2,
+    apiBaseUrl,
+    dispatch,
+    onError
+  ]);
   react.useEffect(() => {
     if (!isGuestFlow || !guestTransferId || !guestSessionToken || !selectedGuestTokenRef.current) return;
     if (executingBridgeRef.current) return;
@@ -8122,7 +8539,7 @@ function useGuestTransferHandlers(deps) {
           `[blink-sdk] type=guest Bridge quote ready: ${signPayload.bridgeSteps.length} step(s), token=${signPayload.tokenSymbol}, chain=${signPayload.chainName}`
         );
         const selectedToken = selectedGuestTokenRef.current;
-        const account = getAccount(wagmiConfig2);
+        const account = core.getAccount(wagmiConfig2);
         const targetChainId = selectedToken?.chainId;
         if (targetChainId) {
           const numericChainId = Number(targetChainId);
@@ -8131,7 +8548,7 @@ function useGuestTransferHandlers(deps) {
             await switchChainAsync({ chainId: numericChainId });
           }
         }
-        const walletClient = await getWalletClient(wagmiConfig2);
+        const walletClient = await core.getWalletClient(wagmiConfig2);
         const sender = account.address;
         if (!sender) {
           dispatch({ type: "PAY_ERROR", error: "Wallet not connected." });
@@ -8153,7 +8570,7 @@ function useGuestTransferHandlers(deps) {
             }]
           });
           console.info(`[blink-sdk] type=guest Bridge step ${stepIdx + 1} tx sent: ${txHash}`);
-          await waitForTransactionReceipt(wagmiConfig2, {
+          await core.waitForTransactionReceipt(wagmiConfig2, {
             hash: txHash
           });
           lastTxHash = txHash;
@@ -8197,13 +8614,19 @@ function useGuestTransferHandlers(deps) {
     execute();
   }, [isGuestFlow, guestTransferId, guestSessionToken, settingSender, apiBaseUrl, wagmiConfig2, switchChainAsync, dispatch, onComplete, onError]);
   const handleGuestBackFromTokenPicker = react.useCallback(() => {
+    setPendingGuestEntry(null);
+    setGuestFee(null);
     dispatch({ type: "GUEST_BACK_FROM_TOKEN_PICKER" });
   }, [dispatch]);
   return {
     guestTokenEntries,
     loadingBalances,
     settingSender,
+    pendingGuestEntry,
+    guestFee,
+    guestQuoteLoading,
     handleSelectGuestToken,
+    handleConfirmGuestToken,
     handleGuestBackFromTokenPicker
   };
 }
@@ -9953,6 +10376,7 @@ function BlinkPaymentInner({
     onSelectAuthorizedToken: provider.handleSelectAuthorizedToken,
     onAuthorizeToken: provider.handleAuthorizeToken,
     onSelectGuestToken: guestTransfer.handleSelectGuestToken,
+    onConfirmGuestToken: guestTransfer.handleConfirmGuestToken,
     onGuestBackFromTokenPicker: guestTransfer.handleGuestBackFromTokenPicker,
     onLogin: () => dispatch({ type: "REQUEST_LOGIN" }),
     onPreauthorize: provider.handlePreauthorize,
@@ -10018,7 +10442,10 @@ function BlinkPaymentInner({
         savingOneTapLimit: oneTapSetup.savingOneTapLimit,
         guestTokenEntries: guestTransfer.guestTokenEntries,
         guestLoadingBalances: guestTransfer.loadingBalances,
-        guestSettingSender: guestTransfer.settingSender
+        guestSettingSender: guestTransfer.settingSender,
+        guestPendingEntry: guestTransfer.pendingGuestEntry,
+        guestQuoteFee: guestTransfer.guestFee?.quote ?? null,
+        guestQuoteLoading: guestTransfer.guestQuoteLoading
       },
       handlers
     }
@@ -10031,9 +10458,17 @@ exports.BLINK_MASCOT = BLINK_MASCOT;
 exports.BlinkLoadingScreen = BlinkLoadingScreen;
 exports.BlinkPayment = BlinkPayment;
 exports.BlinkProvider = BlinkProvider;
+exports.ConfirmSignScreen = ConfirmSignScreen;
+exports.DepositScreen = DepositScreen;
 exports.FlowPhaseProvider = FlowPhaseProvider;
+exports.GuestPreauthLinkingScreen = GuestPreauthLinkingScreen;
+exports.GuestPreauthSetupCompleteScreen = GuestPreauthSetupCompleteScreen;
+exports.GuestTokenPickerScreen = GuestTokenPickerScreen;
 exports.IconCircle = IconCircle;
 exports.InfoBanner = InfoBanner;
+exports.LoginScreen = LoginScreen;
+exports.OpenWalletScreen = OpenWalletScreen;
+exports.OtpVerifyScreen = OtpVerifyScreen;
 exports.OutlineButton = OutlineButton;
 exports.PasskeyIframeBlockedError = PasskeyIframeBlockedError;
 exports.PasskeyScreen = PasskeyScreen;
@@ -10044,9 +10479,14 @@ exports.ScreenLayout = ScreenLayout;
 exports.SelectSourceScreen = SelectSourceScreen;
 exports.SettingsMenu = SettingsMenu;
 exports.SetupScreen = SetupScreen;
+exports.SetupStatusScreen = SetupStatusScreen;
 exports.Spinner = Spinner;
 exports.StepList = StepList;
+exports.SuccessScreen = SuccessScreen;
 exports.TokenPickerScreen = TokenPickerScreen;
+exports.TransferStatusScreen = TransferStatusScreen;
+exports.VerifyPasskeyScreen = VerifyPasskeyScreen;
+exports.WalletPickerScreen = WalletPickerScreen;
 exports.blinkApi = api_exports;
 exports.buildPasskeyPopupOptions = buildPasskeyPopupOptions;
 exports.createPasskeyCredential = createPasskeyCredential;
@@ -10056,7 +10496,9 @@ exports.deviceHasPasskey = deviceHasPasskey;
 exports.findDevicePasskey = findDevicePasskey;
 exports.findDevicePasskeyViaPopup = findDevicePasskeyViaPopup;
 exports.getTheme = getTheme;
+exports.guestEntryMatchingRecommended = guestEntryMatchingRecommended;
 exports.lightTheme = lightTheme;
+exports.mapGuestPickerEntries = mapGuestPickerEntries;
 exports.resolvePasskeyRpId = resolvePasskeyRpId;
 exports.screenForPhase = screenForPhase;
 exports.useAuthorizationExecutor = useAuthorizationExecutor;