@swype-org/react-sdk 0.1.287 → 0.1.293

package/dist/index.js

@@ -485,13 +485,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,
@@ -746,18 +747,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",
@@ -779,20 +799,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()}`);
@@ -3510,10 +3516,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__ */ jsxs(
     ScreenLayout,
     {
@@ -3548,7 +3559,8 @@ function LoginScreen({
         ),
         /* @__PURE__ */ jsxs("div", { style: contentStyle, children: [
           /* @__PURE__ */ jsx("img", { src: BLINK_LOGO, alt: "Blink", style: logoStyle }),
-          /* @__PURE__ */ jsx("h2", { style: headingStyle(tokens.text), children: "Your Money. Any App.\nOne Tap." }),
+          /* @__PURE__ */ jsx("h2", { style: headingStyle(tokens.text), children: heading }),
+          heroSubtitle ? /* @__PURE__ */ jsx("p", { style: subtitleStyle(tokens.textMuted), children: heroSubtitle }) : null,
           error && /* @__PURE__ */ jsx("div", { style: errorStyle(tokens), children: error }),
           /* @__PURE__ */ jsx(
             "input",
@@ -3557,7 +3569,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) => {
@@ -3602,6 +3614,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",
@@ -3724,7 +3744,7 @@ function OtpVerifyScreen({
         /* @__PURE__ */ jsx(ScreenHeader, { onBack }),
         /* @__PURE__ */ jsxs("div", { style: contentStyle2, children: [
           /* @__PURE__ */ jsx("h2", { style: headingStyle2(tokens.text), children: "Confirm it is you" }),
-          /* @__PURE__ */ jsxs("p", { style: subtitleStyle(tokens.textSecondary), children: [
+          /* @__PURE__ */ jsxs("p", { style: subtitleStyle2(tokens.textSecondary), children: [
             "We sent a 6-digit code to",
             "\n",
             /* @__PURE__ */ jsx("strong", { children: maskedIdentifier })
@@ -3760,7 +3780,7 @@ var headingStyle2 = (color) => ({
   color,
   margin: "20px 0 8px"
 });
-var subtitleStyle = (color) => ({
+var subtitleStyle2 = (color) => ({
   fontSize: "0.88rem",
   color,
   margin: "0 0 28px",
@@ -3813,7 +3833,7 @@ function PasskeyScreen({
         /* @__PURE__ */ jsx(ScreenHeader, { onBack, onLogout }),
         /* @__PURE__ */ jsxs("div", { style: contentStyle3, children: [
           /* @__PURE__ */ jsx("h2", { style: headingStyle3(tokens.text), children: "Secure your account with a passkey" }),
-          /* @__PURE__ */ jsx("p", { style: subtitleStyle2(tokens.textSecondary), children: "This enables secure one-tap deposits on this device" }),
+          /* @__PURE__ */ jsx("p", { style: subtitleStyle3(tokens.textSecondary), children: "This enables secure one-tap deposits on this device" }),
           error && /* @__PURE__ */ jsx("div", { style: errorBannerStyle2(tokens), children: error })
         ] })
       ]
@@ -3835,7 +3855,7 @@ var headingStyle3 = (color) => ({
   color,
   margin: "24px 0 8px"
 });
-var subtitleStyle2 = (color) => ({
+var subtitleStyle3 = (color) => ({
   fontSize: "0.86rem",
   color,
   margin: "0 0 20px",
@@ -3853,6 +3873,72 @@ var errorBannerStyle2 = (tokens) => ({
   width: "100%",
   textAlign: "left"
 });
+function VerifyPasskeyScreen({
+  onVerify,
+  onBack,
+  verifying,
+  error
+}) {
+  const { tokens } = useBlinkConfig();
+  return /* @__PURE__ */ jsxs(
+    ScreenLayout,
+    {
+      footer: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(PrimaryButton, { onClick: onVerify, disabled: verifying, loading: verifying, children: "Verify passkey" }),
+        /* @__PURE__ */ jsx(PoweredByFooter, {})
+      ] }),
+      children: [
+        /* @__PURE__ */ jsx(ScreenHeader, { onBack }),
+        /* @__PURE__ */ jsxs("div", { style: contentStyle4, children: [
+          /* @__PURE__ */ jsx(IconCircle, { variant: "accent", size: 64, children: /* @__PURE__ */ jsxs("svg", { width: "36", height: "36", viewBox: "0 0 24 24", fill: "none", children: [
+            /* @__PURE__ */ jsx("rect", { x: "4", y: "4", width: "16", height: "16", rx: "3", stroke: tokens.accent, strokeWidth: "1.5", strokeDasharray: "3 2" }),
+            /* @__PURE__ */ jsx("circle", { cx: "9", cy: "10", r: "1", fill: tokens.accent }),
+            /* @__PURE__ */ jsx("circle", { cx: "15", cy: "10", r: "1", fill: tokens.accent }),
+            /* @__PURE__ */ 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__ */ jsx("h2", { style: headingStyle4(tokens.text), children: "Verify your passkey" }),
+          /* @__PURE__ */ 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__ */ jsx("div", { style: errorBannerStyle3(tokens), children: error }),
+          /* @__PURE__ */ 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__ */ jsxs(
@@ -3996,8 +4082,8 @@ function WalletPickerScreen({
       children: [
         /* @__PURE__ */ jsx(ScreenHeader, { title: "Set up Blink", onBack, onLogout }),
         hasPending && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("h2", { style: headingStyle4(tokens.text), children: "Continue where you left off" }),
-          /* @__PURE__ */ jsx("p", { style: subtitleStyle3(tokens.textSecondary), children: "You have a wallet that still needs setup" }),
+          /* @__PURE__ */ jsx("h2", { style: headingStyle5(tokens.text), children: "Continue where you left off" }),
+          /* @__PURE__ */ jsx("p", { style: subtitleStyle5(tokens.textSecondary), children: "You have a wallet that still needs setup" }),
           /* @__PURE__ */ jsx("div", { style: pendingListStyle, children: pendingConnections.map((acct) => {
             const wallet = acct.wallets[0];
             const address = wallet ? truncateAddress(wallet.name) : void 0;
@@ -4036,7 +4122,7 @@ function WalletPickerScreen({
           }) }),
           /* @__PURE__ */ jsx("div", { style: dividerStyle2(tokens.border), children: /* @__PURE__ */ jsx("span", { style: dividerTextStyle(tokens.textMuted), children: "Or connect a new wallet" }) })
         ] }),
-        !hasPending && /* @__PURE__ */ jsx("h2", { style: headingStyle4(tokens.text), children: "Where is your money?" }),
+        !hasPending && /* @__PURE__ */ jsx("h2", { style: headingStyle5(tokens.text), children: "Where is your money?" }),
         /* @__PURE__ */ jsxs(
           "button",
           {
@@ -4107,14 +4193,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"
@@ -4350,8 +4436,8 @@ function SetupScreen({
       ] }),
       children: [
         /* @__PURE__ */ jsx(ScreenHeader, { onBack, onLogout }),
-        /* @__PURE__ */ jsx("h2", { style: headingStyle5(tokens.text), children: "Set Spending Limit" }),
-        error && /* @__PURE__ */ jsx("div", { style: errorBannerStyle3(tokens), children: error }),
+        /* @__PURE__ */ jsx("h2", { style: headingStyle6(tokens.text), children: "Set Spending Limit" }),
+        error && /* @__PURE__ */ jsx("div", { style: errorBannerStyle4(tokens), children: error }),
         /* @__PURE__ */ jsxs("div", { style: amountRowStyle, children: [
           /* @__PURE__ */ jsx("div", { style: { flex: 1 }, children: editing ? /* @__PURE__ */ jsxs("div", { style: limitValueStyle(tokens.text), children: [
             "$",
@@ -4426,7 +4512,7 @@ function SetupScreen({
     }
   );
 }
-var headingStyle5 = (color) => ({
+var headingStyle6 = (color) => ({
   fontSize: "1.1rem",
   fontWeight: 700,
   letterSpacing: "-0.02em",
@@ -4434,7 +4520,7 @@ var headingStyle5 = (color) => ({
   margin: "8px 0 24px",
   textAlign: "center"
 });
-var errorBannerStyle3 = (tokens) => ({
+var errorBannerStyle4 = (tokens) => ({
   background: tokens.errorBg,
   border: `1px solid ${tokens.error}66`,
   borderRadius: 16,
@@ -4525,10 +4611,10 @@ function SetupStatusScreen({
   if (complete) {
     return /* @__PURE__ */ jsxs(ScreenLayout, { footer: /* @__PURE__ */ jsx(PoweredByFooter, {}), children: [
       /* @__PURE__ */ jsx(ScreenHeader, { onBack: onContinue }),
-      /* @__PURE__ */ jsxs("div", { style: contentStyle4, children: [
+      /* @__PURE__ */ jsxs("div", { style: contentStyle5, children: [
         /* @__PURE__ */ jsx("img", { src: BLINK_LOGO, alt: "Blink", style: mascotStyle2 }),
-        /* @__PURE__ */ jsx("h2", { style: headingStyle6(tokens.text), children: "Done!" }),
-        /* @__PURE__ */ jsx("p", { style: subtitleStyle4(tokens.textSecondary), children: "Return to the app to try one-tap deposits." })
+        /* @__PURE__ */ jsx("h2", { style: headingStyle7(tokens.text), children: "Done!" }),
+        /* @__PURE__ */ jsx("p", { style: subtitleStyle6(tokens.textSecondary), children: "Return to the app to try one-tap deposits." })
       ] })
     ] });
   }
@@ -4538,16 +4624,16 @@ function SetupStatusScreen({
   ];
   return /* @__PURE__ */ jsxs(ScreenLayout, { children: [
     /* @__PURE__ */ jsx(ScreenHeader, { onLogout }),
-    /* @__PURE__ */ jsxs("div", { style: contentStyle4, children: [
+    /* @__PURE__ */ jsxs("div", { style: contentStyle5, children: [
       /* @__PURE__ */ jsx(Spinner, { size: 48 }),
-      /* @__PURE__ */ jsx("h2", { style: headingStyle6(tokens.text), children: "Setting up One-Tap..." }),
-      error && /* @__PURE__ */ jsx("div", { style: errorBannerStyle4(tokens), children: error }),
+      /* @__PURE__ */ jsx("h2", { style: headingStyle7(tokens.text), children: "Setting up One-Tap..." }),
+      error && /* @__PURE__ */ jsx("div", { style: errorBannerStyle5(tokens), children: error }),
       /* @__PURE__ */ jsx("div", { style: stepsWrapStyle, children: /* @__PURE__ */ jsx(StepList, { steps }) }),
       /* @__PURE__ */ jsx("p", { style: waitHintStyle(tokens.textMuted), children: "Usually takes a few seconds" })
     ] })
   ] });
 }
-var contentStyle4 = {
+var contentStyle5 = {
   flex: 1,
   display: "flex",
   flexDirection: "column",
@@ -4560,21 +4646,21 @@ var mascotStyle2 = {
   width: 56,
   height: 56
 };
-var headingStyle6 = (color) => ({
+var headingStyle7 = (color) => ({
   fontSize: "1.45rem",
   fontWeight: 700,
   letterSpacing: "-0.02em",
   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,
@@ -4779,7 +4865,7 @@ function DepositScreen({
           minDepositFloor.toFixed(2),
           " to deposit via One-Tap."
         ] }),
-        error && /* @__PURE__ */ jsx("div", { style: errorBannerStyle5(tokens), children: error })
+        error && /* @__PURE__ */ jsx("div", { style: errorBannerStyle6(tokens), children: error })
       ]
     }
   );
@@ -4965,7 +5051,7 @@ var spendingLimitStyle = (color) => ({
   color,
   marginBottom: 8
 });
-var errorBannerStyle5 = (tokens) => ({
+var errorBannerStyle6 = (tokens) => ({
   background: tokens.errorBg,
   border: `1px solid ${tokens.error}66`,
   borderRadius: 16,
@@ -5010,22 +5096,22 @@ function SuccessScreen({
       ] }),
       children: [
         /* @__PURE__ */ jsx(ScreenHeader, { onLogout }),
-        /* @__PURE__ */ jsxs("div", { style: contentStyle5, children: [
+        /* @__PURE__ */ jsxs("div", { style: contentStyle6, children: [
           succeeded ? /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx(IconCircle, { variant: "success", size: 64, children: /* @__PURE__ */ jsx("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z", fill: tokens.success }) }) }),
-            /* @__PURE__ */ jsxs("h2", { style: headingStyle7(tokens.text), children: [
+            /* @__PURE__ */ jsxs("h2", { style: headingStyle8(tokens.text), children: [
               "$",
               amount.toFixed(2),
               " deposited"
             ] }),
-            merchantName && /* @__PURE__ */ jsxs("p", { style: subtitleStyle5(tokens.textSecondary), children: [
+            merchantName && /* @__PURE__ */ jsxs("p", { style: subtitleStyle7(tokens.textSecondary), children: [
               "to ",
               merchantName
             ] })
           ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx(IconCircle, { variant: "error", size: 64, children: /* @__PURE__ */ jsx("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ 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__ */ jsx("h2", { style: headingStyle7(tokens.text), children: "Transfer failed" }),
-            error && /* @__PURE__ */ jsx("p", { style: subtitleStyle5(tokens.error), children: error })
+            /* @__PURE__ */ jsx("h2", { style: headingStyle8(tokens.text), children: "Transfer failed" }),
+            error && /* @__PURE__ */ jsx("p", { style: subtitleStyle7(tokens.error), children: error })
           ] }),
           /* @__PURE__ */ jsxs("div", { style: summaryCardStyle(tokens), children: [
             sourceName && /* @__PURE__ */ jsxs("div", { style: summaryRowStyle, children: [
@@ -5057,21 +5143,21 @@ function SuccessScreen({
     }
   );
 }
-var contentStyle5 = {
+var contentStyle6 = {
   flex: 1,
   display: "flex",
   flexDirection: "column",
   alignItems: "center",
   paddingTop: 16
 };
-var headingStyle7 = (color) => ({
+var headingStyle8 = (color) => ({
   fontSize: "1.5rem",
   fontWeight: 700,
   letterSpacing: "-0.02em",
   color,
   margin: "20px 0 4px"
 });
-var subtitleStyle5 = (color) => ({
+var subtitleStyle7 = (color) => ({
   fontSize: "0.9rem",
   color,
   margin: "0 0 20px"
@@ -5185,7 +5271,7 @@ function SelectSourceScreen({
             onLogout
           }
         ),
-        /* @__PURE__ */ jsx("p", { style: subtitleStyle6(tokens.textMuted), children: "Choose which chain and token to pay from." }),
+        /* @__PURE__ */ jsx("p", { style: subtitleStyle8(tokens.textMuted), children: "Choose which chain and token to pay from." }),
         /* @__PURE__ */ jsx("label", { style: labelStyle4(tokens.textSecondary), children: "Chain" }),
         /* @__PURE__ */ jsx("div", { style: optionListStyle, children: choices.map((chain) => {
           const isSelected = chain.chainName === selectedChainName;
@@ -5246,7 +5332,7 @@ function SelectSourceScreen({
     }
   );
 }
-var subtitleStyle6 = (color) => ({
+var subtitleStyle8 = (color) => ({
   fontSize: "0.85rem",
   color,
   margin: "0 0 20px",
@@ -5388,8 +5474,8 @@ function AdvancedSourceScreen({
             right: /* @__PURE__ */ jsx("span", { style: advancedBadgeStyle(tokens.accent), children: "Advanced" })
           }
         ),
-        /* @__PURE__ */ jsx("h2", { style: headingStyle8(tokens.text), children: "Set up One-Tap deposits" }),
-        /* @__PURE__ */ jsx("p", { style: subtitleStyle7(tokens.textSecondary), children: "Select a token source for your One-Tap deposits." }),
+        /* @__PURE__ */ jsx("h2", { style: headingStyle9(tokens.text), children: "Set up One-Tap deposits" }),
+        /* @__PURE__ */ jsx("p", { style: subtitleStyle9(tokens.textSecondary), children: "Select a token source for your One-Tap deposits." }),
         /* @__PURE__ */ jsx("label", { style: labelStyle5(tokens.textSecondary), children: "Select tokens to approve" }),
         /* @__PURE__ */ jsx("div", { style: chainListStyle, children: choices.map((chain) => {
           const isExpanded = expandedChain === chain.chainName;
@@ -5452,14 +5538,14 @@ var advancedBadgeStyle = (color) => ({
   padding: "3px 10px",
   letterSpacing: "0.02em"
 });
-var headingStyle8 = (color) => ({
+var headingStyle9 = (color) => ({
   fontSize: "1.3rem",
   fontWeight: 700,
   letterSpacing: "-0.02em",
   color,
   margin: "8px 0 4px"
 });
-var subtitleStyle7 = (color) => ({
+var subtitleStyle9 = (color) => ({
   fontSize: "0.86rem",
   color,
   margin: "0 0 20px",
@@ -5587,15 +5673,15 @@ function TransferStatusScreen({
   const steps = buildSteps(phase);
   return /* @__PURE__ */ jsxs(ScreenLayout, { footer: /* @__PURE__ */ jsx(PoweredByFooter, {}), children: [
     /* @__PURE__ */ jsx(ScreenHeader, { onLogout }),
-    /* @__PURE__ */ jsxs("div", { style: contentStyle6, children: [
+    /* @__PURE__ */ jsxs("div", { style: contentStyle7, children: [
       /* @__PURE__ */ jsx(Spinner, { size: 64 }),
-      /* @__PURE__ */ jsx("h2", { style: headingStyle9(tokens.text), children: "Depositing your money..." }),
-      error && /* @__PURE__ */ jsx("div", { style: errorBannerStyle6(tokens), children: error }),
+      /* @__PURE__ */ jsx("h2", { style: headingStyle10(tokens.text), children: "Depositing your money..." }),
+      error && /* @__PURE__ */ jsx("div", { style: errorBannerStyle7(tokens), children: error }),
       /* @__PURE__ */ jsx("div", { style: stepsWrapStyle2, children: /* @__PURE__ */ jsx(StepList, { steps }) })
     ] })
   ] });
 }
-var contentStyle6 = {
+var contentStyle7 = {
   flex: 1,
   display: "flex",
   flexDirection: "column",
@@ -5604,14 +5690,14 @@ var contentStyle6 = {
   textAlign: "center",
   padding: "0 24px"
 };
-var headingStyle9 = (color) => ({
+var headingStyle10 = (color) => ({
   fontSize: "1.45rem",
   fontWeight: 700,
   letterSpacing: "-0.02em",
   color,
   margin: "20px 0 16px"
 });
-var errorBannerStyle6 = (tokens) => ({
+var errorBannerStyle7 = (tokens) => ({
   background: tokens.errorBg,
   border: `1px solid ${tokens.error}66`,
   borderRadius: 16,
@@ -5665,14 +5751,14 @@ function OpenWalletScreen({
         ] }),
         children: [
           /* @__PURE__ */ jsx(ScreenHeader, { onLogout }),
-          /* @__PURE__ */ jsxs("div", { style: contentStyle7, children: [
+          /* @__PURE__ */ jsxs("div", { style: contentStyle8, children: [
             /* @__PURE__ */ jsx("div", { style: logoCircleStyle(tokens.bgInput), children: logoSrc ? /* @__PURE__ */ jsx("img", { src: logoSrc, alt: displayName, style: logoStyle2 }) : /* @__PURE__ */ jsx(Spinner, { size: 32 }) }),
-            /* @__PURE__ */ jsxs("h2", { style: headingStyle10(tokens.text), children: [
+            /* @__PURE__ */ jsxs("h2", { style: headingStyle11(tokens.text), children: [
               "Setting up ",
               displayName,
               "..."
             ] }),
-            /* @__PURE__ */ jsx("p", { style: subtitleStyle8(tokens.textSecondary), children: "Approve the connection in your wallet extension." }),
+            /* @__PURE__ */ jsx("p", { style: subtitleStyle10(tokens.textSecondary), children: "Approve the connection in your wallet extension." }),
             /* @__PURE__ */ jsxs("div", { style: waitingBadgeStyle(tokens), children: [
               /* @__PURE__ */ jsx(Spinner, { size: 14 }),
               /* @__PURE__ */ jsx("span", { children: "Waiting for authorization..." })
@@ -5698,10 +5784,10 @@ function OpenWalletScreen({
       ] }),
       children: [
         /* @__PURE__ */ jsx(ScreenHeader, { onBack, onLogout }),
-        /* @__PURE__ */ jsxs("div", { style: contentStyle7, children: [
+        /* @__PURE__ */ jsxs("div", { style: contentStyle8, children: [
           /* @__PURE__ */ jsx("div", { style: logoCircleStyle(tokens.bgInput), children: logoSrc ? /* @__PURE__ */ jsx("img", { src: logoSrc, alt: displayName, style: logoStyle2 }) : /* @__PURE__ */ jsx(Spinner, { size: 32 }) }),
-          /* @__PURE__ */ jsx("h2", { style: headingStyle10(tokens.text), children: loading ? "Connecting..." : `Open ${displayName}` }),
-          /* @__PURE__ */ jsx("p", { style: subtitleStyle8(tokens.textSecondary), children: loading ? "Creating transfer and preparing your wallet link..." : `Continue in ${displayName} to authorize this connection.` }),
+          /* @__PURE__ */ jsx("h2", { style: headingStyle11(tokens.text), children: loading ? "Connecting..." : `Open ${displayName}` }),
+          /* @__PURE__ */ jsx("p", { style: subtitleStyle10(tokens.textSecondary), children: loading ? "Creating transfer and preparing your wallet link..." : `Continue in ${displayName} to authorize this connection.` }),
           !loading && /* @__PURE__ */ jsxs("div", { style: waitingBadgeStyle(tokens), children: [
             /* @__PURE__ */ jsx(Spinner, { size: 14 }),
             /* @__PURE__ */ jsx("span", { children: "Waiting for authorization..." })
@@ -5711,7 +5797,7 @@ function OpenWalletScreen({
     }
   );
 }
-var contentStyle7 = {
+var contentStyle8 = {
   flex: 1,
   display: "flex",
   flexDirection: "column",
@@ -5741,14 +5827,14 @@ var logoStyle2 = {
   borderRadius: 12,
   objectFit: "contain"
 };
-var headingStyle10 = (color) => ({
+var headingStyle11 = (color) => ({
   fontSize: "1.45rem",
   fontWeight: 700,
   letterSpacing: "-0.02em",
   color,
   margin: "20px 0 8px"
 });
-var subtitleStyle8 = (color) => ({
+var subtitleStyle10 = (color) => ({
   fontSize: "0.9rem",
   color,
   margin: "0 0 24px",
@@ -5797,10 +5883,10 @@ function ConfirmSignScreen({
       ] }),
       children: [
         /* @__PURE__ */ jsx(ScreenHeader, { onLogout }),
-        /* @__PURE__ */ jsxs("div", { style: contentStyle8, children: [
+        /* @__PURE__ */ jsxs("div", { style: contentStyle9, children: [
           logoSrc ? /* @__PURE__ */ jsx("img", { src: logoSrc, alt: displayName, style: logoStyle3 }) : /* @__PURE__ */ jsx(Spinner, { size: 48 }),
-          /* @__PURE__ */ jsx("h2", { style: headingStyle11(tokens.text), children: "Wallet authorized" }),
-          /* @__PURE__ */ jsxs("p", { style: subtitleStyle9(tokens.textSecondary), children: [
+          /* @__PURE__ */ jsx("h2", { style: headingStyle12(tokens.text), children: "Wallet authorized" }),
+          /* @__PURE__ */ jsxs("p", { style: subtitleStyle11(tokens.textSecondary), children: [
             displayName,
             " approved the connection. Tap below to confirm your payment."
           ] }),
@@ -5813,7 +5899,7 @@ function ConfirmSignScreen({
     }
   );
 }
-var contentStyle8 = {
+var contentStyle9 = {
   flex: 1,
   display: "flex",
   flexDirection: "column",
@@ -5828,14 +5914,14 @@ var logoStyle3 = {
   borderRadius: 14,
   objectFit: "contain"
 };
-var headingStyle11 = (color) => ({
+var headingStyle12 = (color) => ({
   fontSize: "1.45rem",
   fontWeight: 700,
   letterSpacing: "-0.02em",
   color,
   margin: "20px 0 8px"
 });
-var subtitleStyle9 = (color) => ({
+var subtitleStyle11 = (color) => ({
   fontSize: "0.9rem",
   color,
   margin: "0 0 24px",
@@ -6105,60 +6191,232 @@ var selectCircleSelectedStyle = (color) => ({
   justifyContent: "center",
   flexShrink: 0
 });
+function entryKey(entry) {
+  return `${entry.sourceChainId}-${entry.tokenAddress.toLowerCase()}`;
+}
+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] = useState(defaultTokenListExpanded);
+  const pickerRef = useRef(null);
+  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__ */ jsxs(ScreenLayout, { children: [
-      /* @__PURE__ */ jsx(ScreenHeader, { title: "Select Token", onBack }),
+      /* @__PURE__ */ jsx(ScreenHeader, { onBack }),
       /* @__PURE__ */ jsx("div", { style: loadingWrapStyle, children: /* @__PURE__ */ jsx(Spinner, { label: "Loading balances..." }) })
     ] });
   }
-  return /* @__PURE__ */ jsxs(ScreenLayout, { footer: /* @__PURE__ */ jsx(PoweredByFooter, {}), children: [
-    /* @__PURE__ */ jsx(ScreenHeader, { title: "Select Token", onBack }),
-    depositAmount != null && /* @__PURE__ */ jsxs("div", { style: depositHeaderStyle, children: [
-      /* @__PURE__ */ jsx("div", { style: depositLabelStyle3(t.textMuted), children: "Depositing" }),
-      /* @__PURE__ */ jsxs("div", { style: depositAmountStyle2(t.text), children: [
-        "$",
-        depositAmount.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })
-      ] })
-    ] }),
-    error && /* @__PURE__ */ jsx("p", { style: errorStyle3(t.error), children: error }),
-    /* @__PURE__ */ jsx("div", { style: sectionLabelStyle2(t.textMuted), children: "Choose token to pay with" }),
-    /* @__PURE__ */ jsx("div", { style: tokenListStyle3, children: entries.map((entry) => /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        onClick: () => onSelect(entry),
-        disabled: setting,
-        style: tokenRowStyle3(t, setting),
-        children: [
-          /* @__PURE__ */ jsx("div", { style: tokenIconCircleStyle3(t, !!TOKEN_LOGOS[entry.tokenSymbol]), children: TOKEN_LOGOS[entry.tokenSymbol] ? /* @__PURE__ */ jsx("img", { src: TOKEN_LOGOS[entry.tokenSymbol], alt: entry.tokenSymbol, style: tokenLogoImgStyle3 }) : /* @__PURE__ */ jsx("span", { style: tokenIconTextStyle3(t.textMuted), children: "$" }) }),
-          /* @__PURE__ */ jsxs("div", { style: tokenInfoStyle3, children: [
-            /* @__PURE__ */ jsxs("div", { style: tokenNameRowStyle2, children: [
-              /* @__PURE__ */ jsx("span", { style: tokenSymbolTextStyle2(t.text), children: entry.tokenSymbol }),
-              /* @__PURE__ */ jsx("span", { style: tokenChainDotStyle2(t.textMuted), children: "\xB7" }),
-              /* @__PURE__ */ jsx("span", { style: tokenChainTextStyle2(t.textMuted), children: entry.chainName })
-            ] }),
-            /* @__PURE__ */ 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__ */ jsx("div", { style: feeRowStyle(t.textMuted), "aria-live": "polite", children: "Estimating fee\u2026" });
+    }
+    if (quoteFee) {
+      return /* @__PURE__ */ jsxs("div", { style: feeRowStyle(t.textMuted), "aria-live": "polite", children: [
+        "Estimated fee ",
+        formatPreciseMoneyForDisplay(quoteFee)
+      ] });
+    }
+    return null;
+  })();
+  return /* @__PURE__ */ jsxs(
+    ScreenLayout,
+    {
+      footer: /* @__PURE__ */ jsxs(Fragment, { children: [
+        canConfirm && /* @__PURE__ */ jsx(PrimaryButton, { onClick: () => void onConfirm(), loading: setting, disabled: setting, children: "Continue" }),
+        /* @__PURE__ */ jsx(PoweredByFooter, {})
+      ] }),
+      children: [
+        /* @__PURE__ */ jsx(ScreenHeader, { onBack }),
+        /* @__PURE__ */ jsxs("div", { ref: pickerRef, children: [
+          /* @__PURE__ */ jsxs("div", { style: depositCardSurfaceStyle(t, tokenListOpen), children: [
+            /* @__PURE__ */ jsx("div", { style: depositLabelStyle3(t.textMuted), children: "Deposit" }),
+            /* @__PURE__ */ jsxs("div", { style: amountBandStyle, children: [
+              /* @__PURE__ */ jsxs("div", { style: amountLeftColStyle, children: [
+                depositAmount != null && /* @__PURE__ */ jsxs("div", { style: depositAmountStyle2(t.text), children: [
+                  "$",
+                  depositAmount.toLocaleString("en-US", {
+                    minimumFractionDigits: 0,
+                    maximumFractionDigits: 2
+                  })
+                ] }),
+                feeLine
+              ] }),
+              /* @__PURE__ */ 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__ */ jsx("div", { style: tokenTriggerIconsStyle, children: pendingEntry && TOKEN_LOGOS[pendingEntry.tokenSymbol] ? /* @__PURE__ */ 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__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx(
+                        "img",
+                        {
+                          src: TOKEN_LOGOS[entries[0].tokenSymbol],
+                          alt: "",
+                          width: 28,
+                          height: 28,
+                          style: triggerLogoStyle(0)
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "img",
+                        {
+                          src: TOKEN_LOGOS[entries[1].tokenSymbol],
+                          alt: "",
+                          width: 28,
+                          height: 28,
+                          style: triggerLogoStyle(14)
+                        }
+                      )
+                    ] }) : displayEntry && TOKEN_LOGOS[displayEntry.tokenSymbol] ? /* @__PURE__ */ jsx(
+                      "img",
+                      {
+                        src: TOKEN_LOGOS[displayEntry.tokenSymbol],
+                        alt: "",
+                        width: 28,
+                        height: 28,
+                        style: triggerLogoStyle(0)
+                      }
+                    ) : null }),
+                    /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", style: { opacity: 0.5 }, children: tokenListOpen ? /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        d: "M18 15l-6-6-6 6",
+                        stroke: t.textMuted,
+                        strokeWidth: "2.5",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round"
+                      }
+                    ) : /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        d: "M6 9l6 6 6-6",
+                        stroke: t.textMuted,
+                        strokeWidth: "2.5",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round"
+                      }
+                    ) })
+                  ]
+                }
+              )
             ] })
           ] }),
-          /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: chevronStyle, children: /* @__PURE__ */ jsx("path", { d: "M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z", fill: t.textMuted }) })
-        ]
-      },
-      `${entry.chainId}-${entry.tokenAddress}`
-    )) }),
-    entries.length === 0 && /* @__PURE__ */ 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__ */ jsxs("div", { style: tokenDropdownOuterStyle(t), children: [
+            /* @__PURE__ */ jsx("div", { style: accountDropdownLabelStyle2(t.textMuted), children: "Choose token" }),
+            /* @__PURE__ */ jsx("div", { style: tokenDropdownInnerStyle(t), children: entries.map((entry, index) => {
+              const selected = pendingKey === entryKey(entry);
+              const isLast = index === entries.length - 1;
+              return /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => {
+                    void onSelect(entry);
+                  },
+                  disabled: rowBusy,
+                  style: pickerRowStyle(t, selected, isLast),
+                  children: [
+                    /* @__PURE__ */ jsxs("div", { style: pickerRowLeftStyle, children: [
+                      /* @__PURE__ */ jsx("div", { style: tokenIconCircleStyle3(t, !!TOKEN_LOGOS[entry.tokenSymbol]), children: TOKEN_LOGOS[entry.tokenSymbol] ? /* @__PURE__ */ jsx(
+                        "img",
+                        {
+                          src: TOKEN_LOGOS[entry.tokenSymbol],
+                          alt: entry.tokenSymbol,
+                          style: tokenLogoImgStyle3
+                        }
+                      ) : /* @__PURE__ */ jsx("span", { style: tokenIconTextStyle3(t.textMuted), children: "$" }) }),
+                      /* @__PURE__ */ jsxs("div", { style: pickerRowInfoStyle, children: [
+                        /* @__PURE__ */ jsxs("div", { style: tokenNameRowStyle2, children: [
+                          /* @__PURE__ */ jsx("span", { style: tokenSymbolTextStyle2(t.text), children: entry.tokenSymbol }),
+                          /* @__PURE__ */ jsx("span", { style: tokenChainDotStyle2(t.textMuted), children: "\xB7" }),
+                          /* @__PURE__ */ jsx("span", { style: tokenChainTextStyle2(t.textMuted), children: entry.chainName })
+                        ] }),
+                        /* @__PURE__ */ jsxs("span", { style: tokenBalanceStyle2(t.textMuted), children: [
+                          "$",
+                          entry.balance.toLocaleString("en-US", {
+                            minimumFractionDigits: 2,
+                            maximumFractionDigits: 2
+                          })
+                        ] })
+                      ] })
+                    ] }),
+                    selected ? /* @__PURE__ */ jsxs("svg", { width: "22", height: "22", viewBox: "0 0 22 22", fill: "none", children: [
+                      /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "11", fill: t.success }),
+                      /* @__PURE__ */ jsx(
+                        "path",
+                        {
+                          d: "M7 11l3 3 5-5",
+                          stroke: "#fff",
+                          strokeWidth: "2",
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round"
+                        }
+                      )
+                    ] }) : /* @__PURE__ */ jsx("div", { style: radioEmptyStyle2(t.border) })
+                  ]
+                },
+                entryKey(entry)
+              );
+            }) })
+          ] })
+        ] }),
+        error && /* @__PURE__ */ jsx("p", { style: errorStyle3(t.error), children: error }),
+        entries.length === 0 && /* @__PURE__ */ 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",
@@ -6168,52 +6426,129 @@ 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 feeRowStyle = (color) => ({
   fontSize: "0.84rem",
   fontWeight: 500,
   color,
-  marginBottom: 12
+  marginTop: 6
 });
-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,
@@ -6237,13 +6572,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",
@@ -6267,10 +6595,6 @@ var tokenBalanceStyle2 = (color) => ({
   fontSize: "0.78rem",
   color
 });
-var chevronStyle = {
-  flexShrink: 0,
-  opacity: 0.4
-};
 var emptyStyle = (color) => ({
   fontSize: "0.88rem",
   color,
@@ -6292,7 +6616,7 @@ function GuestPreauthSetupCompleteScreen({
       ] }),
       children: [
         /* @__PURE__ */ jsx(ScreenHeader, { onLogout }),
-        /* @__PURE__ */ jsxs("div", { style: contentStyle9, children: [
+        /* @__PURE__ */ jsxs("div", { style: contentStyle10, children: [
           /* @__PURE__ */ jsx(IconCircle, { variant: "success", size: 64, children: /* @__PURE__ */ jsx("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
             "path",
             {
@@ -6300,14 +6624,14 @@ function GuestPreauthSetupCompleteScreen({
               fill: tokens.success
             }
           ) }) }),
-          /* @__PURE__ */ jsx("h2", { style: headingStyle12(tokens.text), children: "Setup complete" }),
-          /* @__PURE__ */ jsx("p", { style: subtitleStyle10(tokens.textSecondary), children: "Your account is linked and ready. You can close this window or make another deposit." })
+          /* @__PURE__ */ jsx("h2", { style: headingStyle13(tokens.text), children: "Setup complete" }),
+          /* @__PURE__ */ 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",
@@ -6315,7 +6639,7 @@ var contentStyle9 = {
   gap: 12,
   paddingTop: 8
 };
-function headingStyle12(color) {
+function headingStyle13(color) {
   return {
     margin: 0,
     fontSize: 22,
@@ -6323,7 +6647,7 @@ function headingStyle12(color) {
     color
   };
 }
-function subtitleStyle10(color) {
+function subtitleStyle12(color) {
   return {
     margin: 0,
     fontSize: 15,
@@ -6336,14 +6660,14 @@ function GuestPreauthLinkingScreen({ onLogout }) {
   const { tokens } = useBlinkConfig();
   return /* @__PURE__ */ jsxs(ScreenLayout, { children: [
     /* @__PURE__ */ jsx(ScreenHeader, { onLogout }),
-    /* @__PURE__ */ jsxs("div", { style: contentStyle10, children: [
+    /* @__PURE__ */ jsxs("div", { style: contentStyle11, children: [
       /* @__PURE__ */ jsx(Spinner, { size: 48 }),
-      /* @__PURE__ */ jsx("h2", { style: headingStyle13(tokens.text), children: "Setting up your account..." }),
-      /* @__PURE__ */ jsx("p", { style: subtitleStyle11(tokens.textSecondary), children: "Linking your wallet to your Blink account. This usually takes a few seconds." })
+      /* @__PURE__ */ jsx("h2", { style: headingStyle14(tokens.text), children: "Setting up your account..." }),
+      /* @__PURE__ */ 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",
@@ -6352,7 +6676,7 @@ var contentStyle10 = {
   textAlign: "center",
   padding: "0 24px 32px"
 };
-function headingStyle13(color) {
+function headingStyle14(color) {
   return {
     margin: "20px 0 8px",
     fontSize: "1.45rem",
@@ -6361,7 +6685,7 @@ function headingStyle13(color) {
     color
   };
 }
-function subtitleStyle11(color) {
+function subtitleStyle13(color) {
   return {
     margin: 0,
     fontSize: "0.9rem",
@@ -6453,6 +6777,9 @@ function StepRendererContent({
     guestTokenEntries,
     guestLoadingBalances,
     guestSettingSender,
+    guestPendingEntry,
+    guestQuoteFee,
+    guestQuoteLoading,
     authInput,
     otpCode,
     selectSourceChainName,
@@ -6690,7 +7017,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
         }
       );
@@ -6795,7 +7126,7 @@ var PaymentErrorBoundary = class extends Component {
         /* @__PURE__ */ jsx("path", { d: "M12 8v5", stroke: "#ef4444", strokeWidth: "1.5", strokeLinecap: "round" }),
         /* @__PURE__ */ jsx("circle", { cx: "12", cy: "16", r: "0.75", fill: "#ef4444" })
       ] }) }),
-      /* @__PURE__ */ jsx("h2", { style: headingStyle14, children: "Something went wrong" }),
+      /* @__PURE__ */ jsx("h2", { style: headingStyle15, children: "Something went wrong" }),
       /* @__PURE__ */ jsx("p", { style: messageStyle, children: "An unexpected error occurred. Please try again." }),
       /* @__PURE__ */ jsx("button", { type: "button", onClick: this.handleReset, style: buttonStyle3, children: "Try again" })
     ] });
@@ -6815,7 +7146,7 @@ var containerStyle9 = {
 var iconStyle3 = {
   marginBottom: 20
 };
-var headingStyle14 = {
+var headingStyle15 = {
   fontSize: "1.25rem",
   fontWeight: 700,
   color: "#1a1a1a",
@@ -7994,8 +8325,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,
@@ -8004,7 +8335,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
@@ -8031,6 +8381,9 @@ function useGuestTransferHandlers(deps) {
   const [guestTokenEntries, setGuestTokenEntries] = useState([]);
   const [loadingBalances, setLoadingBalances] = useState(false);
   const [settingSender, setSettingSender] = useState(false);
+  const [pendingGuestEntry, setPendingGuestEntry] = useState(null);
+  const [guestFee, setGuestFee] = useState(null);
+  const [guestQuoteLoading, setGuestQuoteLoading] = useState(false);
   const executingBridgeRef = useRef(false);
   const fetchedRef = useRef(false);
   const selectedGuestTokenRef = useRef(null);
@@ -8040,21 +8393,65 @@ function useGuestTransferHandlers(deps) {
     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]);
   useEffect(() => {
     if (!isGuestFlow) {
       fetchedRef.current = false;
       selectedGuestTokenRef.current = null;
       setGuestTokenEntries([]);
+      setPendingGuestEntry(null);
+      setGuestFee(null);
+      setGuestQuoteLoading(false);
     }
   }, [isGuestFlow]);
   const handleSelectGuestToken = useCallback(async (entry) => {
@@ -8064,7 +8461,44 @@ function useGuestTransferHandlers(deps) {
       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 = useCallback(async () => {
+    if (!guestTransferId || !guestSessionToken || !pendingGuestEntry) return;
+    const account = 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}`
@@ -8086,7 +8520,15 @@ function useGuestTransferHandlers(deps) {
     } finally {
       setSettingSender(false);
     }
-  }, [guestTransferId, guestSessionToken, wagmiConfig2, apiBaseUrl, dispatch, onError]);
+  }, [
+    guestTransferId,
+    guestSessionToken,
+    pendingGuestEntry,
+    wagmiConfig2,
+    apiBaseUrl,
+    dispatch,
+    onError
+  ]);
   useEffect(() => {
     if (!isGuestFlow || !guestTransferId || !guestSessionToken || !selectedGuestTokenRef.current) return;
     if (executingBridgeRef.current) return;
@@ -8194,13 +8636,19 @@ function useGuestTransferHandlers(deps) {
     execute();
   }, [isGuestFlow, guestTransferId, guestSessionToken, settingSender, apiBaseUrl, wagmiConfig2, switchChainAsync, dispatch, onComplete, onError]);
   const handleGuestBackFromTokenPicker = useCallback(() => {
+    setPendingGuestEntry(null);
+    setGuestFee(null);
     dispatch({ type: "GUEST_BACK_FROM_TOKEN_PICKER" });
   }, [dispatch]);
   return {
     guestTokenEntries,
     loadingBalances,
     settingSender,
+    pendingGuestEntry,
+    guestFee,
+    guestQuoteLoading,
     handleSelectGuestToken,
+    handleConfirmGuestToken,
     handleGuestBackFromTokenPicker
   };
 }
@@ -9950,6 +10398,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,
@@ -10015,13 +10464,16 @@ 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
     }
   );
 }
 
-export { AdvancedSourceScreen, BLINK_LOGO, BLINK_MASCOT, BlinkLoadingScreen, BlinkPayment, BlinkProvider, FlowPhaseProvider, IconCircle, InfoBanner, OutlineButton, PasskeyIframeBlockedError, PasskeyScreen, PoweredByFooter, PrimaryButton, ScreenHeader, ScreenLayout, SelectSourceScreen, SettingsMenu, SetupScreen, Spinner, StepList, TokenPickerScreen, api_exports as blinkApi, buildPasskeyPopupOptions, createPasskeyCredential, createPasskeyViaPopup, darkTheme, deviceHasPasskey, findDevicePasskey, findDevicePasskeyViaPopup, getTheme, lightTheme, resolvePasskeyRpId, screenForPhase, useAuthorizationExecutor, useBlinkConfig, useBlinkDepositAmount, useTransferPolling, useTransferSigning };
+export { AdvancedSourceScreen, BLINK_LOGO, BLINK_MASCOT, BlinkLoadingScreen, BlinkPayment, BlinkProvider, ConfirmSignScreen, DepositScreen, FlowPhaseProvider, GuestPreauthLinkingScreen, GuestPreauthSetupCompleteScreen, GuestTokenPickerScreen, IconCircle, InfoBanner, LoginScreen, OpenWalletScreen, OtpVerifyScreen, OutlineButton, PasskeyIframeBlockedError, PasskeyScreen, PoweredByFooter, PrimaryButton, ScreenHeader, ScreenLayout, SelectSourceScreen, SettingsMenu, SetupScreen, SetupStatusScreen, Spinner, StepList, SuccessScreen, TokenPickerScreen, TransferStatusScreen, VerifyPasskeyScreen, WalletPickerScreen, api_exports as blinkApi, buildPasskeyPopupOptions, createPasskeyCredential, createPasskeyViaPopup, darkTheme, deviceHasPasskey, findDevicePasskey, findDevicePasskeyViaPopup, getTheme, guestEntryMatchingRecommended, lightTheme, mapGuestPickerEntries, resolvePasskeyRpId, screenForPhase, useAuthorizationExecutor, useBlinkConfig, useBlinkDepositAmount, useTransferPolling, useTransferSigning };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map