@swype-org/react-sdk 0.1.189 → 0.1.192

package/dist/index.cjs

@@ -2288,18 +2288,30 @@ function StepProgress({ phase }) {
     return /* @__PURE__ */ jsxRuntime.jsx("img", { src: SWYPE_MASCOT, alt: "Swype", style: mascotStyle });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: containerStyle3, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { style: dotStyle(tokens.accent) }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { style: labelStyle(tokens.text), children: "Link" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: sectionStyle("flex-end"), children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { style: labelStyle(tokens.text), children: "Link" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { style: dotStyle(tokens.accent) })
+    ] }),
     /* @__PURE__ */ jsxRuntime.jsx("span", { style: lineStyle(tokens.textMuted) }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { style: dotStyle(tokens.textMuted) }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { style: labelStyle(tokens.textMuted), children: "Deposit" })
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: sectionStyle("flex-start"), children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { style: dotStyle(tokens.textMuted) }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { style: labelStyle(tokens.textMuted), children: "Deposit" })
+    ] })
   ] });
 }
 var containerStyle3 = {
   display: "flex",
   alignItems: "center",
-  gap: 6
+  gap: 6,
+  width: "100%"
 };
+var sectionStyle = (justify) => ({
+  flex: 1,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: justify,
+  gap: 6
+});
 var dotStyle = (color) => ({
   width: 8,
   height: 8,
@@ -2456,19 +2468,16 @@ var badgeStyle = (color) => ({
 });
 function PoweredByFooter() {
   const { tokens } = useSwypeConfig();
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: containerStyle5(tokens.textMuted), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: rowStyle, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
-        "path",
-        {
-          d: "M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM12 17c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3-9H9V6c0-1.66 1.34-3 3-3s3 1.34 3 3v2z",
-          fill: "currentColor"
-        }
-      ) }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Powered by Blink" })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { style: pillStyle(tokens.textMuted, tokens.border), children: "Beta Version" })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: containerStyle5(tokens.textMuted), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: rowStyle, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        d: "M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM12 17c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3-9H9V6c0-1.66 1.34-3 3-3s3 1.34 3 3v2z",
+        fill: "currentColor"
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Powered by Blink" })
+  ] }) });
 }
 var containerStyle5 = (color) => ({
   display: "flex",
@@ -2485,14 +2494,6 @@ var rowStyle = {
   alignItems: "center",
   gap: 6
 };
-var pillStyle = (color, border) => ({
-  fontSize: "0.65rem",
-  fontWeight: 600,
-  padding: "2px 8px",
-  borderRadius: 999,
-  border: `1px solid ${border}`,
-  color
-});
 function PrimaryButton({ children, onClick, disabled, loading, icon }) {
   const { tokens } = useSwypeConfig();
   const isDisabled = disabled || loading;
@@ -2512,7 +2513,7 @@ function PrimaryButton({ children, onClick, disabled, loading, icon }) {
 }
 var buttonStyle = (tokens, disabled) => ({
   width: "100%",
-  padding: "16px 24px",
+  padding: "18px 24px",
   background: `linear-gradient(180deg, ${tokens.accent}, ${tokens.accentHover})`,
   color: tokens.accentText,
   border: "none",
@@ -2523,7 +2524,7 @@ var buttonStyle = (tokens, disabled) => ({
   opacity: disabled ? 0.5 : 1,
   transition: "filter 0.15s ease, transform 0.15s ease",
   fontFamily: "inherit",
-  boxShadow: "0 8px 18px rgba(178, 255, 147, 0.35)",
+  boxShadow: "0 6px 20px rgba(178, 255, 147, 0.25)",
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
@@ -3101,6 +3102,7 @@ function PasskeyScreen({
         /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { onBack, onLogout }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle4, 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" }),
           error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: errorBannerStyle2(tokens), children: error })
         ] })
       ]
@@ -3122,6 +3124,12 @@ var headingStyle3 = (color) => ({
   color,
   margin: "24px 0 8px"
 });
+var subtitleStyle2 = (color) => ({
+  fontSize: "0.86rem",
+  color,
+  margin: "0 0 20px",
+  lineHeight: 1.5
+});
 var errorBannerStyle2 = (tokens) => ({
   background: tokens.errorBg,
   border: `1px solid ${tokens.error}66`,
@@ -3259,7 +3267,7 @@ function WalletPickerScreen({
         /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { title: "Set up Swype", 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: subtitleStyle2(tokens.textSecondary), children: "You have a wallet that still needs setup" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle3(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;
@@ -3363,7 +3371,7 @@ var headingStyle4 = (color) => ({
   color,
   margin: "8px 0 4px"
 });
-var subtitleStyle2 = (color) => ({
+var subtitleStyle3 = (color) => ({
   fontSize: "0.88rem",
   color,
   margin: "0 0 24px"
@@ -3765,7 +3773,7 @@ function SetupStatusScreen({
       /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle5, children: [
         /* @__PURE__ */ jsxRuntime.jsx("img", { src: SWYPE_MASCOT, alt: "Swype", style: mascotStyle2 }),
         /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle6(tokens.text), children: "Done!" }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle3(tokens.textSecondary), children: "Return to the app to try one-tap deposits." })
+        /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle4(tokens.textSecondary), children: "Return to the app to try one-tap deposits." })
       ] })
     ] });
   }
@@ -3804,7 +3812,7 @@ var headingStyle6 = (color) => ({
   color,
   margin: "20px 0 8px"
 });
-var subtitleStyle3 = (color) => ({
+var subtitleStyle4 = (color) => ({
   fontSize: "0.9rem",
   color,
   margin: "0 0 28px",
@@ -3859,6 +3867,22 @@ function DepositScreen({
 }) {
   const { tokens } = useSwypeConfig();
   const amount = initialAmount;
+  const [accountPickerOpen, setAccountPickerOpen] = react.useState(false);
+  const pickerRef = react.useRef(null);
+  react.useEffect(() => {
+    if (!accountPickerOpen) return;
+    const handleClick = (e) => {
+      if (pickerRef.current && !pickerRef.current.contains(e.target)) {
+        setAccountPickerOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, [accountPickerOpen]);
+  const selectedAccount = accounts?.find((a) => a.id === selectedAccountId);
+  const selectedProviderName = selectedAccount?.name ?? "Wallet";
+  const selectedProviderLogo = KNOWN_LOGOS[selectedProviderName.toLowerCase()];
+  const hasMultipleAccounts = accounts != null && accounts.length > 1;
   const isLowBalance = availableBalance < MIN_DEPOSIT;
   const exceedsLimit = remainingLimit != null && amount > remainingLimit && !isLowBalance;
   const canDeposit = amount >= MIN_DEPOSIT && !exceedsLimit && !isLowBalance && !processing;
@@ -3924,94 +3948,116 @@ function DepositScreen({
       ] }),
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { onBack }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: depositCardStyle(tokens), children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { style: depositLabelStyle(tokens.textMuted), children: "Depositing" }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: amountRowStyle2, children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: amountValueStyle(tokens.text), children: [
-              "$",
-              amount.toLocaleString("en-US", { minimumFractionDigits: 0, maximumFractionDigits: 2 })
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: pickerRef, style: depositCardWrapStyle, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: depositCardStyle(tokens), children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { style: depositLabelStyle(tokens.textMuted), children: "Depositing" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: amountRowStyle2, children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: amountValueStyle(tokens.text), children: [
+                "$",
+                amount.toLocaleString("en-US", { minimumFractionDigits: 0, maximumFractionDigits: 2 })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: onSelectToken,
+                  style: tokenIconButtonStyle2(!!onSelectToken),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: tokenIconWrapStyle2, children: [
+                      /* @__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.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", style: checkBadgeStyle2, children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8", cy: "8", r: "8", fill: "#2775CA" }),
+                        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 8l2 2 4-4", stroke: "#fff", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round" })
+                      ] })
+                    ] }),
+                    /* @__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(
               "button",
               {
                 type: "button",
-                onClick: onSelectToken,
-                style: tokenIconButtonStyle2(!!onSelectToken),
+                onClick: hasMultipleAccounts ? () => setAccountPickerOpen(!accountPickerOpen) : void 0,
+                style: walletBalanceRowStyle(hasMultipleAccounts),
                 children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: tokenIconWrapStyle2, children: [
-                    /* @__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.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", style: checkBadgeStyle2, children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8", cy: "8", r: "8", fill: "#2775CA" }),
-                      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 8l2 2 4-4", stroke: "#fff", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round" })
-                    ] })
+                  selectedProviderLogo ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: selectedProviderLogo, alt: selectedProviderName, style: providerLogoStyle }) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: providerFallbackStyle(tokens.textMuted), children: selectedProviderName.charAt(0) }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("span", { style: walletBalanceStyle(tokens.text), children: [
+                    "$",
+                    availableBalance.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })
                   ] }),
-                  /* @__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" }) })
+                  hasMultipleAccounts && /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", style: { opacity: 0.4 }, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7 10l5-5 5 5M7 14l5 5 5-5", stroke: tokens.textMuted, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
                 ]
               }
             )
-          ] })
-        ] }),
-        accounts && accounts.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: accountSectionStyle, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { style: accountSectionLabelStyle(tokens.textMuted), children: "Choose account" }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: accountListStyle(tokens), children: [
-            accounts.map((account) => {
-              const preferredWallet = getPreferredDepositWallet(account, amount);
-              const active = hasActiveDepositWallet(account);
-              const isSelected = account.id === selectedAccountId;
-              const walletAddress = preferredWallet ? getWalletAddress(preferredWallet) : null;
-              const truncatedAddress = walletAddress ? `${walletAddress.slice(0, 6)}...${walletAddress.slice(-4)}` : null;
-              const accountBalance = account.wallets.reduce(
-                (sum, w) => sum + w.balance.available.amount,
-                0
-              );
-              const providerLogo = KNOWN_LOGOS[account.name.toLowerCase()];
-              return /* @__PURE__ */ jsxRuntime.jsxs(
+          ] }),
+          accountPickerOpen && accounts && accounts.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: accountDropdownOuterStyle(tokens), children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { style: accountDropdownLabelStyle(tokens.textMuted), children: "Choose account" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: accountDropdownInnerStyle(tokens), children: [
+              accounts.map((account) => {
+                const preferredWallet = getPreferredDepositWallet(account, amount);
+                const active = hasActiveDepositWallet(account);
+                const isSelected = account.id === selectedAccountId;
+                const walletAddress = preferredWallet ? getWalletAddress(preferredWallet) : null;
+                const truncatedAddress = walletAddress ? `${walletAddress.slice(0, 6)}...${walletAddress.slice(-4)}` : null;
+                const accountBalance = account.wallets.reduce(
+                  (sum, w) => sum + w.balance.available.amount,
+                  0
+                );
+                const providerLogo = KNOWN_LOGOS[account.name.toLowerCase()];
+                return /* @__PURE__ */ jsxRuntime.jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => {
+                      if (active) {
+                        onSelectAccount?.(account.id);
+                      } else {
+                        onAuthorizeAccount?.(account.id);
+                      }
+                      setAccountPickerOpen(false);
+                    },
+                    style: accountRowStyle(tokens, isSelected),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: accountRowLeftStyle, children: [
+                        providerLogo ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: providerLogo, alt: account.name, style: accountLogoStyle }) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: accountFallbackIconStyle(tokens.textMuted), children: account.name.charAt(0) }),
+                        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: accountInfoStyle, children: [
+                          /* @__PURE__ */ jsxRuntime.jsx("span", { style: accountAddressStyle(tokens.text), children: truncatedAddress ?? account.nickname ?? account.name }),
+                          /* @__PURE__ */ jsxRuntime.jsxs("span", { style: accountBalanceTextStyle(tokens.textMuted), children: [
+                            "$",
+                            accountBalance.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })
+                          ] })
+                        ] })
+                      ] }),
+                      isSelected ? /* @__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: radioEmptyStyle(tokens.border) })
+                    ]
+                  },
+                  account.id
+                );
+              }),
+              onAddProvider && /* @__PURE__ */ jsxRuntime.jsxs(
                 "button",
                 {
                   type: "button",
                   onClick: () => {
-                    if (active) {
-                      onSelectAccount?.(account.id);
-                    } else {
-                      onAuthorizeAccount?.(account.id);
-                    }
+                    onAddProvider();
+                    setAccountPickerOpen(false);
                   },
-                  style: accountRowStyle(tokens),
+                  style: addAccountBtnStyle(tokens),
                   children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: accountRowLeftStyle, children: [
-                      providerLogo ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: providerLogo, alt: account.name, style: accountLogoStyle }) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: accountFallbackIconStyle(tokens.textMuted), children: account.name.charAt(0) }),
-                      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: accountInfoStyle, children: [
-                        /* @__PURE__ */ jsxRuntime.jsx("span", { style: accountAddressStyle(tokens.text), children: truncatedAddress ?? account.nickname ?? account.name }),
-                        /* @__PURE__ */ jsxRuntime.jsxs("span", { style: accountBalanceTextStyle(tokens.textMuted), children: [
-                          "$",
-                          accountBalance.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })
-                        ] })
-                      ] })
-                    ] }),
-                    isSelected ? /* @__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: radioEmptyStyle(tokens.border) })
+                    /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 5v14M5 12h14", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round" }) }),
+                    "Add Account"
                   ]
-                },
-                account.id
-              );
-            }),
-            onAddProvider && /* @__PURE__ */ jsxRuntime.jsxs(
-              "button",
-              {
-                type: "button",
-                onClick: onAddProvider,
-                style: addAccountBtnStyle(tokens),
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 5v14M5 12h14", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round" }) }),
-                  "Add Account"
-                ]
-              }
-            )
+                }
+              )
+            ] })
           ] })
         ] }),
         remainingLimit != null && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: spendingLimitStyle(tokens.textMuted), children: [
@@ -4027,12 +4073,15 @@ function DepositScreen({
     }
   );
 }
+var depositCardWrapStyle = {
+  position: "relative",
+  marginBottom: 20
+};
 var depositCardStyle = (tokens) => ({
   background: tokens.bgInput,
   border: `1px solid ${tokens.border}`,
   borderRadius: tokens.radiusLg,
-  padding: "16px 20px",
-  marginBottom: 20
+  padding: "16px 20px"
 });
 var depositLabelStyle = (color) => ({
   fontSize: "0.75rem",
@@ -4072,16 +4121,60 @@ var checkBadgeStyle2 = {
   bottom: -1,
   right: -3
 };
-var accountSectionStyle = {
-  marginBottom: 20
+var walletBalanceRowStyle = (clickable) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: 8,
+  background: "transparent",
+  border: "none",
+  padding: 0,
+  cursor: clickable ? "pointer" : "default",
+  fontFamily: "inherit",
+  outline: "none"
+});
+var providerLogoStyle = {
+  width: 18,
+  height: 18,
+  borderRadius: "50%",
+  objectFit: "contain"
 };
-var accountSectionLabelStyle = (color) => ({
+var providerFallbackStyle = (color) => ({
+  width: 18,
+  height: 18,
+  borderRadius: "50%",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  fontSize: "0.65rem",
+  fontWeight: 700,
+  color,
+  flexShrink: 0
+});
+var walletBalanceStyle = (color) => ({
+  fontSize: "0.9rem",
+  fontWeight: 600,
+  color
+});
+var accountDropdownOuterStyle = (tokens) => ({
+  position: "absolute",
+  top: "100%",
+  left: 0,
+  right: 0,
+  marginTop: 4,
+  background: tokens.bgCard,
+  border: `1px solid ${tokens.border}`,
+  borderRadius: tokens.radiusLg,
+  boxShadow: tokens.shadowLg,
+  zIndex: 50,
+  padding: "12px 14px 14px"
+});
+var accountDropdownLabelStyle = (color) => ({
   fontSize: "0.78rem",
   fontWeight: 500,
   color,
   marginBottom: 8
 });
-var accountListStyle = (tokens) => ({
+var accountDropdownInnerStyle = (tokens) => ({
   background: tokens.bgInput,
   border: `1px solid ${tokens.border}`,
   borderRadius: tokens.radiusLg,
@@ -4093,7 +4186,7 @@ var accountRowStyle = (tokens, isSelected) => ({
   justifyContent: "space-between",
   width: "100%",
   padding: "14px 16px",
-  background: "transparent",
+  background: isSelected ? `${tokens.accent}10` : "transparent",
   border: "none",
   borderBottom: `1px solid ${tokens.border}`,
   cursor: "pointer",
@@ -4296,14 +4389,14 @@ function SuccessScreen({
               amount.toFixed(2),
               " deposited"
             ] }),
-            merchantName && /* @__PURE__ */ jsxRuntime.jsxs("p", { style: subtitleStyle4(tokens.textSecondary), children: [
+            merchantName && /* @__PURE__ */ jsxRuntime.jsxs("p", { style: subtitleStyle5(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: subtitleStyle4(tokens.error), children: error })
+            error && /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle5(tokens.error), children: error })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { style: summaryCardStyle(tokens), children: [
             sourceName && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: summaryRowStyle, children: [
@@ -4349,7 +4442,7 @@ var headingStyle7 = (color) => ({
   color,
   margin: "20px 0 4px"
 });
-var subtitleStyle4 = (color) => ({
+var subtitleStyle5 = (color) => ({
   fontSize: "0.9rem",
   color,
   margin: "0 0 20px"
@@ -4457,7 +4550,7 @@ function SelectSourceScreen({
             onLogout
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle5(tokens.textMuted), children: "Choose which chain and token to pay from." }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle6(tokens.textMuted), children: "Choose which chain and token to pay from." }),
         /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle3(tokens.textSecondary), children: "Chain" }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { style: optionListStyle, children: choices.map((chain) => {
           const isSelected = chain.chainName === selectedChainName;
@@ -4514,7 +4607,7 @@ function SelectSourceScreen({
     }
   );
 }
-var subtitleStyle5 = (color) => ({
+var subtitleStyle6 = (color) => ({
   fontSize: "0.85rem",
   color,
   margin: "0 0 20px",
@@ -4630,7 +4723,7 @@ function AdvancedSourceScreen({
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle8(tokens.text), children: "Set up One-Tap deposits" }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle6(tokens.textSecondary), children: "Select a token source for your One-Tap deposits." }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle7(tokens.textSecondary), children: "Select a token source for your One-Tap deposits." }),
         /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle4(tokens.textSecondary), children: "Select tokens to approve" }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { style: chainListStyle, children: choices.map((chain) => {
           const isExpanded = expandedChain === chain.chainName;
@@ -4700,7 +4793,7 @@ var headingStyle8 = (color) => ({
   color,
   margin: "8px 0 4px"
 });
-var subtitleStyle6 = (color) => ({
+var subtitleStyle7 = (color) => ({
   fontSize: "0.86rem",
   color,
   margin: "0 0 20px",
@@ -4934,7 +5027,7 @@ function OpenWalletScreen({
               displayName,
               "..."
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle7(tokens.textSecondary), children: "Approve the connection in your wallet extension." }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle8(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..." })
@@ -4963,7 +5056,7 @@ function OpenWalletScreen({
         /* @__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: subtitleStyle7(tokens.textSecondary), children: loading ? "Creating transfer and preparing your wallet link..." : `Continue in ${displayName} to authorize this connection.` }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle8(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..." })
@@ -5010,7 +5103,7 @@ var headingStyle10 = (color) => ({
   color,
   margin: "20px 0 8px"
 });
-var subtitleStyle7 = (color) => ({
+var subtitleStyle8 = (color) => ({
   fontSize: "0.9rem",
   color,
   margin: "0 0 24px",
@@ -5062,7 +5155,7 @@ function ConfirmSignScreen({
         /* @__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: subtitleStyle8(tokens.textSecondary), children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("p", { style: subtitleStyle9(tokens.textSecondary), children: [
             displayName,
             " approved the connection. Tap below to confirm your payment."
           ] }),
@@ -5097,7 +5190,7 @@ var headingStyle11 = (color) => ({
   color,
   margin: "20px 0 8px"
 });
-var subtitleStyle8 = (color) => ({
+var subtitleStyle9 = (color) => ({
   fontSize: "0.9rem",
   color,
   margin: "0 0 24px",