@swype-org/react-sdk 0.1.143 → 0.1.151

package/dist/index.js

@@ -2247,9 +2247,7 @@ function PoweredByFooter() {
         fill: "currentColor"
       }
     ) }),
-    /* @__PURE__ */ jsx("span", { children: "Powered by Swype" }),
-    /* @__PURE__ */ jsx("span", { style: dotStyle, children: "\xB7" }),
-    /* @__PURE__ */ jsx("span", { children: "Non-custodial" })
+    /* @__PURE__ */ jsx("span", { children: "Powered by Blink" })
   ] });
 }
 var containerStyle3 = (color) => ({
@@ -2261,7 +2259,6 @@ var containerStyle3 = (color) => ({
   color,
   padding: "12px 0 4px"
 });
-var dotStyle = { opacity: 0.5 };
 function PrimaryButton({ children, onClick, disabled, loading, icon }) {
   const { tokens } = useSwypeConfig();
   const isDisabled = disabled || loading;
@@ -3044,7 +3041,7 @@ function LoginScreen({
     ScreenLayout,
     {
       footer: /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(PrimaryButton, { onClick: onSubmit, disabled, loading: sending, children: "Continue" }),
+        /* @__PURE__ */ jsx(PrimaryButton, { onClick: onSubmit, disabled, loading: sending, children: "Next" }),
         onSocialLogin && /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsxs("div", { style: dividerStyle(tokens), children: [
             /* @__PURE__ */ jsx("div", { style: dividerLineStyle(tokens.border) }),
@@ -3062,10 +3059,6 @@ function LoginScreen({
             provider
           )) })
         ] }),
-        /* @__PURE__ */ jsxs("div", { style: walletSectionStyle, children: [
-          /* @__PURE__ */ jsx("span", { style: walletLabelStyle(tokens.textMuted), children: "Works with" }),
-          /* @__PURE__ */ jsx("div", { style: walletLogosStyle, children: walletIcons.map(({ key, logo }) => /* @__PURE__ */ jsx("img", { src: logo, alt: key, style: walletLogoImgStyle }, key)) })
-        ] }),
         /* @__PURE__ */ jsx(PoweredByFooter, {})
       ] }),
       children: [
@@ -3077,9 +3070,8 @@ function LoginScreen({
           }
         ),
         /* @__PURE__ */ jsxs("div", { style: contentStyle2, children: [
-          /* @__PURE__ */ jsx("div", { style: iconBoxStyle(tokens.accent), children: /* @__PURE__ */ jsx("span", { style: iconLetterStyle, children: "S" }) }),
-          /* @__PURE__ */ jsx("h2", { style: headingStyle(tokens.text), children: "One-time setup.\nOne-tap deposits after." }),
-          /* @__PURE__ */ jsx("p", { style: subtitleStyle(tokens.textSecondary), children: "Protected by Face ID." }),
+          /* @__PURE__ */ jsx("div", { style: iconBoxStyle(tokens.accent), children: /* @__PURE__ */ jsx("span", { style: iconLetterStyle, children: "B" }) }),
+          /* @__PURE__ */ jsx("h2", { style: headingStyle(tokens.text), children: "Your Money.\nAny App.\nOne Tap." }),
           error && /* @__PURE__ */ jsx("div", { style: errorStyle(tokens), children: error }),
           /* @__PURE__ */ jsx(
             "input",
@@ -3102,11 +3094,6 @@ function LoginScreen({
     }
   );
 }
-var walletIcons = [
-  { key: "metamask", logo: KNOWN_LOGOS["metamask"] },
-  { key: "base", logo: KNOWN_LOGOS["base"] },
-  { key: "trust wallet", logo: KNOWN_LOGOS["trust wallet"] }
-];
 function socialLabel(provider) {
   switch (provider) {
     case "google":
@@ -3123,7 +3110,7 @@ var contentStyle2 = {
   display: "flex",
   flexDirection: "column",
   alignItems: "center",
-  paddingTop: 24
+  justifyContent: "center"
 };
 var iconBoxStyle = (accent) => ({
   width: 56,
@@ -3149,12 +3136,6 @@ var headingStyle = (color) => ({
   margin: "20px 0 8px",
   whiteSpace: "pre-line"
 });
-var subtitleStyle = (color) => ({
-  fontSize: "0.84rem",
-  color,
-  margin: "0 0 24px",
-  lineHeight: 1.5
-});
 var inputStyle2 = (tokens) => ({
   width: "100%",
   padding: "15px 16px",
@@ -3209,27 +3190,6 @@ var socialButtonStyle = (tokens) => ({
   fontFamily: "inherit",
   cursor: "pointer"
 });
-var walletSectionStyle = {
-  textAlign: "center",
-  marginBottom: 8,
-  marginTop: 4
-};
-var walletLabelStyle = (color) => ({
-  fontSize: "0.78rem",
-  color,
-  display: "block",
-  marginBottom: 10
-});
-var walletLogosStyle = {
-  display: "flex",
-  justifyContent: "center",
-  gap: 16
-};
-var walletLogoImgStyle = {
-  width: 24,
-  height: 24,
-  objectFit: "contain"
-};
 var avatarStyle = (tokens) => ({
   width: 28,
   height: 28,
@@ -3287,40 +3247,38 @@ function OtpVerifyScreen({
       });
     }, 1e3);
   }, [cooldown, onResend]);
-  return /* @__PURE__ */ jsxs(ScreenLayout, { footer: /* @__PURE__ */ jsx(PoweredByFooter, {}), children: [
-    /* @__PURE__ */ jsx(ScreenHeader, { onBack }),
-    /* @__PURE__ */ jsxs("div", { style: contentStyle3, children: [
-      /* @__PURE__ */ jsx(IconCircle, { variant: "accent", size: 56, children: /* @__PURE__ */ jsx("svg", { width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
-        "path",
-        {
-          d: "M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z",
-          fill: tokens.accent
-        }
-      ) }) }),
-      /* @__PURE__ */ jsx("h2", { style: headingStyle2(tokens.text), children: "Check your email" }),
-      /* @__PURE__ */ jsxs("p", { style: subtitleStyle2(tokens.textSecondary), children: [
-        "We sent a 6-digit code to",
-        "\n",
-        /* @__PURE__ */ jsx("strong", { children: maskedIdentifier })
-      ] }),
-      error && /* @__PURE__ */ jsx("div", { style: errorBannerStyle(tokens), children: error }),
-      /* @__PURE__ */ jsx(OtpInput, { value: otpCode, onChange: onOtpChange, disabled: verifying }),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          onClick: handleResend,
-          disabled: cooldown > 0,
-          style: resendStyle(tokens.textMuted, cooldown > 0),
-          children: cooldown > 0 ? `Resend code in ${cooldown}s` : "Resend code"
-        }
-      ),
-      /* @__PURE__ */ jsxs("div", { style: actionStyle, children: [
+  return /* @__PURE__ */ jsxs(
+    ScreenLayout,
+    {
+      footer: /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(PrimaryButton, { onClick: onVerify, disabled, loading: verifying, children: "Verify" }),
-        /* @__PURE__ */ jsx("p", { style: hintStyle(tokens.textMuted), children: "Didn't get the code? Check your spam folder" })
-      ] })
-    ] })
-  ] });
+        /* @__PURE__ */ jsx(PoweredByFooter, {})
+      ] }),
+      children: [
+        /* @__PURE__ */ jsx(ScreenHeader, { onBack }),
+        /* @__PURE__ */ jsxs("div", { style: contentStyle3, children: [
+          /* @__PURE__ */ jsx("h2", { style: headingStyle2(tokens.text), children: "Confirm it is you" }),
+          /* @__PURE__ */ jsxs("p", { style: subtitleStyle(tokens.textSecondary), children: [
+            "We sent a 6-digit code to",
+            "\n",
+            /* @__PURE__ */ jsx("strong", { children: maskedIdentifier })
+          ] }),
+          error && /* @__PURE__ */ jsx("div", { style: errorBannerStyle(tokens), children: error }),
+          /* @__PURE__ */ jsx(OtpInput, { value: otpCode, onChange: onOtpChange, disabled: verifying }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleResend,
+              disabled: cooldown > 0,
+              style: resendStyle(tokens.textMuted, cooldown > 0),
+              children: cooldown > 0 ? `Resend code in ${cooldown}s` : "Resend code"
+            }
+          )
+        ] })
+      ]
+    }
+  );
 }
 var contentStyle3 = {
   textAlign: "center",
@@ -3336,7 +3294,7 @@ var headingStyle2 = (color) => ({
   color,
   margin: "20px 0 8px"
 });
-var subtitleStyle2 = (color) => ({
+var subtitleStyle = (color) => ({
   fontSize: "0.88rem",
   color,
   margin: "0 0 28px",
@@ -3366,16 +3324,6 @@ var resendStyle = (color, disabled) => ({
   padding: 0,
   opacity: disabled ? 0.6 : 1
 });
-var actionStyle = {
-  width: "100%",
-  marginTop: 32
-};
-var hintStyle = (color) => ({
-  textAlign: "center",
-  fontSize: "0.78rem",
-  color,
-  margin: "12px 0 0"
-});
 function PasskeyScreen({
   onCreatePasskey,
   onBack,
@@ -3386,7 +3334,7 @@ function PasskeyScreen({
 }) {
   const { tokens } = useSwypeConfig();
   const handleCreate = popupFallback && onCreatePasskeyViaPopup ? onCreatePasskeyViaPopup : onCreatePasskey;
-  const buttonLabel = popupFallback ? "Open passkey window" : "Create or verify passkey";
+  const buttonLabel = popupFallback ? "Open passkey window" : "Verify PassKey";
   return /* @__PURE__ */ jsxs(
     ScreenLayout,
     {
@@ -3397,16 +3345,8 @@ function PasskeyScreen({
       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: headingStyle3(tokens.text), children: "Create or verify your passkey" }),
-          /* @__PURE__ */ jsx("p", { style: subtitleStyle3(tokens.textSecondary), children: popupFallback ? "Your browser requires a separate window to continue. Tap the button below to continue." : "Use Face ID to sign in instantly \u2014 no passwords, no codes." }),
-          error && /* @__PURE__ */ jsx("div", { style: errorBannerStyle2(tokens), children: error }),
-          /* @__PURE__ */ jsx(InfoBanner, { children: "Your passkey is stored securely on your device. Swype never sees your biometric data." })
+          /* @__PURE__ */ jsx("h2", { style: headingStyle3(tokens.text), children: "Secure your account with a passkey" }),
+          error && /* @__PURE__ */ jsx("div", { style: errorBannerStyle2(tokens), children: error })
         ] })
       ]
     }
@@ -3418,7 +3358,7 @@ var contentStyle4 = {
   display: "flex",
   flexDirection: "column",
   alignItems: "center",
-  paddingTop: 32
+  justifyContent: "center"
 };
 var headingStyle3 = (color) => ({
   fontSize: "1.45rem",
@@ -3427,13 +3367,6 @@ var headingStyle3 = (color) => ({
   color,
   margin: "24px 0 8px"
 });
-var subtitleStyle3 = (color) => ({
-  fontSize: "0.9rem",
-  color,
-  margin: "0 0 28px",
-  lineHeight: 1.5,
-  maxWidth: 280
-});
 var errorBannerStyle2 = (tokens) => ({
   background: tokens.errorBg,
   border: `1px solid ${tokens.error}66`,
@@ -3502,6 +3435,8 @@ function WalletPickerScreen({
 }) {
   const { tokens } = useSwypeConfig();
   const [hoveredId, setHoveredId] = useState(null);
+  const [selectedProviderId, setSelectedProviderId] = useState(null);
+  const [cryptoExpanded, setCryptoExpanded] = useState(false);
   const hasPending = pendingConnections != null && pendingConnections.length > 0;
   const displayProviders = providers.length > 0 ? providers : [
     { id: "metamask", name: "MetaMask" },
@@ -3509,6 +3444,7 @@ function WalletPickerScreen({
     { id: "ora", name: "Ora" },
     { id: "phantom", name: "Phantom" }
   ];
+  const selectedProvider = displayProviders.find((p) => p.id === selectedProviderId);
   if (loading) {
     return /* @__PURE__ */ jsxs(ScreenLayout, { children: [
       /* @__PURE__ */ jsx(ScreenHeader, { title: "Set up Swype", onBack }),
@@ -3519,14 +3455,18 @@ function WalletPickerScreen({
     ScreenLayout,
     {
       footer: /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("p", { style: hintStyle2(tokens.textMuted), children: "You'll set your deposit limit in your wallet app." }),
+        selectedProvider && /* @__PURE__ */ jsxs(PrimaryButton, { onClick: () => onSelectProvider(selectedProvider.id), children: [
+          "Open ",
+          selectedProvider.name,
+          " to Link"
+        ] }),
         /* @__PURE__ */ jsx(PoweredByFooter, {})
       ] }),
       children: [
         /* @__PURE__ */ jsx(ScreenHeader, { title: "Set up Swype", onBack }),
         hasPending && /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx("h2", { style: headingStyle4(tokens.text), children: "Continue where you left off" }),
-          /* @__PURE__ */ jsx("p", { style: subtitleStyle4(tokens.textSecondary), children: "You have a wallet that still needs setup" }),
+          /* @__PURE__ */ jsx("p", { style: subtitleStyle2(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;
@@ -3565,21 +3505,41 @@ 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__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("h2", { style: headingStyle4(tokens.text), children: "Where are your stablecoins?" }),
-          /* @__PURE__ */ jsx("p", { style: subtitleStyle4(tokens.textSecondary), children: "Select the wallet you want to deposit from" })
-        ] }),
-        /* @__PURE__ */ jsx("div", { style: gridStyle, children: displayProviders.map((p) => {
+        !hasPending && /* @__PURE__ */ jsx("h2", { style: headingStyle4(tokens.text), children: "Where is your money?" }),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => setCryptoExpanded((v) => !v),
+            style: categoryRowStyle(tokens, cryptoExpanded),
+            children: [
+              /* @__PURE__ */ jsx("span", { style: categoryLabelStyle, children: "Crypto Wallet" }),
+              /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  width: "18",
+                  height: "18",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  style: { transform: cryptoExpanded ? "rotate(180deg)" : "none", transition: "transform 0.2s ease" },
+                  children: /* @__PURE__ */ jsx("path", { d: "M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z", fill: "currentColor" })
+                }
+              )
+            ]
+          }
+        ),
+        cryptoExpanded && /* @__PURE__ */ jsx("div", { style: gridStyle, children: displayProviders.map((p) => {
           const logoSrc = "logoURI" in p && p.logoURI || KNOWN_LOGOS[p.name.toLowerCase()];
           const emoji = WALLET_EMOJIS[p.name.toLowerCase()] ?? p.name.charAt(0);
+          const isSelected = selectedProviderId === p.id;
           const isHovered = hoveredId === p.id;
           return /* @__PURE__ */ jsxs(
             "button",
             {
-              onClick: () => onSelectProvider(p.id),
+              onClick: () => setSelectedProviderId(p.id),
               onMouseEnter: () => setHoveredId(p.id),
               onMouseLeave: () => setHoveredId(null),
-              style: cardStyle(tokens, isHovered),
+              style: cardStyle(tokens, isHovered, isSelected),
               children: [
                 logoSrc ? /* @__PURE__ */ jsx(
                   "img",
@@ -3594,7 +3554,11 @@ function WalletPickerScreen({
             },
             p.id
           );
-        }) })
+        }) }),
+        /* @__PURE__ */ jsxs("div", { style: categoryRowStyle(tokens, false, true), children: [
+          /* @__PURE__ */ jsx("span", { style: categoryLabelStyle, children: "Bank Account" }),
+          /* @__PURE__ */ jsx("span", { style: comingSoonBadgeStyle(tokens), children: "Coming Soon" })
+        ] })
       ]
     }
   );
@@ -3606,7 +3570,7 @@ var headingStyle4 = (color) => ({
   color,
   margin: "8px 0 4px"
 });
-var subtitleStyle4 = (color) => ({
+var subtitleStyle2 = (color) => ({
   fontSize: "0.88rem",
   color,
   margin: "0 0 24px"
@@ -3614,9 +3578,11 @@ var subtitleStyle4 = (color) => ({
 var gridStyle = {
   display: "grid",
   gridTemplateColumns: "1fr 1fr",
-  gap: 12
+  gap: 12,
+  marginBottom: 12
 };
-var cardStyle = (tokens, hovered) => ({
+var SELECTED_GREEN = "#22c55e";
+var cardStyle = (tokens, hovered, selected) => ({
   display: "flex",
   flexDirection: "column",
   alignItems: "center",
@@ -3624,11 +3590,12 @@ var cardStyle = (tokens, hovered) => ({
   gap: 8,
   padding: "20px 12px",
   background: hovered ? tokens.bgHover : tokens.bgInput,
-  border: `1.5px solid ${tokens.border}`,
+  border: selected ? `2px solid ${SELECTED_GREEN}` : `1.5px solid ${tokens.border}`,
+  boxShadow: selected ? `0 0 0 2px ${SELECTED_GREEN}44` : "none",
   borderRadius: 16,
   cursor: "pointer",
   fontFamily: "inherit",
-  transition: "background 0.15s ease",
+  transition: "background 0.15s ease, border 0.15s ease, box-shadow 0.15s ease",
   outline: "none"
 });
 var emojiStyle = {
@@ -3646,11 +3613,36 @@ var nameStyle2 = (color) => ({
   fontWeight: 600,
   color
 });
-var hintStyle2 = (color) => ({
-  textAlign: "center",
-  fontSize: "0.82rem",
-  color,
-  margin: "0 0 4px"
+var categoryRowStyle = (tokens, expanded, disabled) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  width: "100%",
+  padding: "16px 18px",
+  background: tokens.bgInput,
+  border: `1.5px solid ${tokens.border}`,
+  borderRadius: 14,
+  cursor: disabled ? "default" : "pointer",
+  fontFamily: "inherit",
+  fontSize: "0.95rem",
+  fontWeight: 600,
+  color: disabled ? tokens.textMuted : tokens.text,
+  opacity: disabled ? 0.6 : 1,
+  outline: "none",
+  marginBottom: expanded ? 12 : 12,
+  boxSizing: "border-box"
+});
+var categoryLabelStyle = {
+  lineHeight: 1
+};
+var comingSoonBadgeStyle = (tokens) => ({
+  fontSize: "0.72rem",
+  fontWeight: 600,
+  color: tokens.textMuted,
+  background: `${tokens.border}88`,
+  padding: "3px 10px",
+  borderRadius: 6,
+  whiteSpace: "nowrap"
 });
 var pendingListStyle = {
   display: "flex",
@@ -3775,15 +3767,14 @@ function SetupScreen({
             onClick: () => onSetupOneTap(limit),
             disabled: loading,
             loading,
-            children: "Set up One-Tap"
+            children: "Approve"
           }
         ),
         /* @__PURE__ */ jsx(PoweredByFooter, {})
       ] }),
       children: [
         /* @__PURE__ */ jsx(ScreenHeader, { title: "Swype Setup", onBack, right: /* @__PURE__ */ jsx(SettingsMenu, { onLogout }) }),
-        /* @__PURE__ */ jsx("h2", { style: headingStyle5(tokens.text), children: "Set up One-Tap deposits" }),
-        /* @__PURE__ */ jsx("p", { style: subtitleStyle5(tokens.textSecondary), children: "Set your limit for instant deposits. Like a contactless card \u2014 you choose the max." }),
+        /* @__PURE__ */ jsx("h2", { style: headingStyle5(tokens.text), children: "Set Spending Limit" }),
         error && /* @__PURE__ */ jsx("div", { style: errorBannerStyle3(tokens), children: error }),
         /* @__PURE__ */ jsxs("div", { style: balanceRowStyle, children: [
           /* @__PURE__ */ jsxs("div", { style: balanceLeftStyle, children: [
@@ -3853,14 +3844,6 @@ function SetupScreen({
               ]
             }
           )
-        ] }),
-        /* @__PURE__ */ jsx("div", { style: bannerWrapStyle, children: /* @__PURE__ */ jsx(InfoBanner, { children: "Funds stay in your wallet until you deposit. Swype never holds your money." }) }),
-        /* @__PURE__ */ jsxs("button", { type: "button", style: linkStyle(tokens.accent), children: [
-          /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", style: { marginRight: 6 }, children: [
-            /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "2" }),
-            /* @__PURE__ */ jsx("path", { d: "M12 16v-4M12 8h.01", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
-          ] }),
-          "How does this work?"
         ] })
       ]
     }
@@ -3871,13 +3854,8 @@ var headingStyle5 = (color) => ({
   fontWeight: 700,
   letterSpacing: "-0.02em",
   color,
-  margin: "8px 0 4px"
-});
-var subtitleStyle5 = (color) => ({
-  fontSize: "0.86rem",
-  color,
-  margin: "0 0 24px",
-  lineHeight: 1.5
+  margin: "24px 0 20px",
+  textAlign: "center"
 });
 var errorBannerStyle3 = (tokens) => ({
   background: tokens.errorBg,
@@ -3982,20 +3960,6 @@ var limitInputStyle = (color) => ({
   fontFamily: "inherit",
   padding: 0
 });
-var bannerWrapStyle = { marginBottom: 16 };
-var linkStyle = (color) => ({
-  background: "transparent",
-  border: "none",
-  color,
-  cursor: "pointer",
-  fontFamily: "inherit",
-  fontSize: "0.82rem",
-  fontWeight: 500,
-  display: "flex",
-  alignItems: "center",
-  padding: 0,
-  marginBottom: 16
-});
 function SetupStatusScreen({
   complete,
   limit,
@@ -4460,14 +4424,14 @@ function SuccessScreen({
               amount.toFixed(2),
               " deposited"
             ] }),
-            merchantName && /* @__PURE__ */ jsxs("p", { style: subtitleStyle6(tokens.textSecondary), children: [
+            merchantName && /* @__PURE__ */ jsxs("p", { style: subtitleStyle3(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: subtitleStyle6(tokens.error), children: error })
+            error && /* @__PURE__ */ jsx("p", { style: subtitleStyle3(tokens.error), children: error })
           ] }),
           /* @__PURE__ */ jsxs("div", { style: summaryCardStyle(tokens), children: [
             sourceName && /* @__PURE__ */ jsxs("div", { style: summaryRowStyle, children: [
@@ -4513,7 +4477,7 @@ var headingStyle7 = (color) => ({
   color,
   margin: "20px 0 4px"
 });
-var subtitleStyle6 = (color) => ({
+var subtitleStyle3 = (color) => ({
   fontSize: "0.9rem",
   color,
   margin: "0 0 20px"
@@ -4621,7 +4585,7 @@ function SelectSourceScreen({
             right: /* @__PURE__ */ jsx(SettingsMenu, { onLogout })
           }
         ),
-        /* @__PURE__ */ jsx("p", { style: subtitleStyle7(tokens.textMuted), children: "Choose which chain and token to pay from." }),
+        /* @__PURE__ */ jsx("p", { style: subtitleStyle4(tokens.textMuted), children: "Choose which chain and token to pay from." }),
         /* @__PURE__ */ jsx("label", { style: labelStyle2(tokens.textSecondary), children: "Chain" }),
         /* @__PURE__ */ jsx("div", { style: optionListStyle, children: choices.map((chain) => {
           const isSelected = chain.chainName === selectedChainName;
@@ -4678,7 +4642,7 @@ function SelectSourceScreen({
     }
   );
 }
-var subtitleStyle7 = (color) => ({
+var subtitleStyle4 = (color) => ({
   fontSize: "0.85rem",
   color,
   margin: "0 0 20px",
@@ -4794,7 +4758,7 @@ function AdvancedSourceScreen({
           }
         ),
         /* @__PURE__ */ jsx("h2", { style: headingStyle8(tokens.text), children: "Set up One-Tap deposits" }),
-        /* @__PURE__ */ jsx("p", { style: subtitleStyle8(tokens.textSecondary), children: "Select a token source for your One-Tap deposits." }),
+        /* @__PURE__ */ jsx("p", { style: subtitleStyle5(tokens.textSecondary), children: "Select a token source for your One-Tap deposits." }),
         /* @__PURE__ */ jsx("label", { style: labelStyle3(tokens.textSecondary), children: "Select tokens to approve" }),
         /* @__PURE__ */ jsx("div", { style: chainListStyle, children: choices.map((chain) => {
           const isExpanded = expandedChain === chain.chainName;
@@ -4864,7 +4828,7 @@ var headingStyle8 = (color) => ({
   color,
   margin: "8px 0 4px"
 });
-var subtitleStyle8 = (color) => ({
+var subtitleStyle5 = (color) => ({
   fontSize: "0.86rem",
   color,
   margin: "0 0 20px",
@@ -5096,14 +5060,14 @@ function OpenWalletScreen({
           displayName
         ] }),
         error && onRetryStatus && /* @__PURE__ */ jsx(OutlineButton, { onClick: onRetryStatus, children: "Retry status check" }),
-        /* @__PURE__ */ jsx("p", { style: hintStyle3(tokens.textMuted), children: loading ? "Preparing authorization..." : error ? "Retry the status check after returning to the browser, or reopen your wallet if needed." : "If your wallet didn't open automatically, tap the button above" })
+        /* @__PURE__ */ jsx("p", { style: hintStyle(tokens.textMuted), children: loading ? "Preparing authorization..." : error ? "Retry the status check after returning to the browser, or reopen your wallet if needed." : "If your wallet didn't open automatically, tap the button above" })
       ] }),
       children: [
         /* @__PURE__ */ jsx(ScreenHeader, { onBack, right: /* @__PURE__ */ jsx(SettingsMenu, { onLogout }) }),
         /* @__PURE__ */ jsxs("div", { style: contentStyle8, children: [
           logoSrc ? /* @__PURE__ */ jsx("img", { src: logoSrc, alt: displayName, style: logoStyle }) : /* @__PURE__ */ jsx(Spinner, { size: 48 }),
           /* @__PURE__ */ jsx("h2", { style: headingStyle10(tokens.text), children: loading ? "Connecting..." : `Open ${displayName}` }),
-          /* @__PURE__ */ jsx("p", { style: subtitleStyle9(tokens.textSecondary), children: loading ? "Creating transfer and preparing your wallet link..." : `Continue in ${displayName} to authorize this connection.` }),
+          /* @__PURE__ */ jsx("p", { style: subtitleStyle6(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..." })
@@ -5140,7 +5104,7 @@ var headingStyle10 = (color) => ({
   color,
   margin: "20px 0 8px"
 });
-var subtitleStyle9 = (color) => ({
+var subtitleStyle6 = (color) => ({
   fontSize: "0.9rem",
   color,
   margin: "0 0 24px",
@@ -5158,7 +5122,7 @@ var waitingBadgeStyle = (tokens) => ({
   color: tokens.textMuted,
   fontSize: "0.82rem"
 });
-var hintStyle3 = (color) => ({
+var hintStyle = (color) => ({
   textAlign: "center",
   fontSize: "0.82rem",
   color,
@@ -5180,14 +5144,14 @@ function ConfirmSignScreen({
       footer: /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(PrimaryButton, { onClick: onSign, disabled: signing, children: signing ? "Confirming..." : "Confirm payment" }),
         error && /* @__PURE__ */ jsx("p", { style: errorStyle2(tokens.textMuted), children: error }),
-        !error && /* @__PURE__ */ jsx("p", { style: hintStyle4(tokens.textMuted), children: "You may be prompted for biometric verification" })
+        !error && /* @__PURE__ */ jsx("p", { style: hintStyle2(tokens.textMuted), children: "You may be prompted for biometric verification" })
       ] }),
       children: [
         /* @__PURE__ */ jsx(ScreenHeader, { right: /* @__PURE__ */ jsx(SettingsMenu, { onLogout }) }),
         /* @__PURE__ */ jsxs("div", { style: contentStyle9, children: [
           logoSrc ? /* @__PURE__ */ jsx("img", { src: logoSrc, alt: displayName, style: logoStyle2 }) : /* @__PURE__ */ jsx(Spinner, { size: 48 }),
           /* @__PURE__ */ jsx("h2", { style: headingStyle11(tokens.text), children: "Wallet authorized" }),
-          /* @__PURE__ */ jsxs("p", { style: subtitleStyle10(tokens.textSecondary), children: [
+          /* @__PURE__ */ jsxs("p", { style: subtitleStyle7(tokens.textSecondary), children: [
             displayName,
             " approved the connection. Tap below to confirm your payment."
           ] }),
@@ -5222,7 +5186,7 @@ var headingStyle11 = (color) => ({
   color,
   margin: "20px 0 8px"
 });
-var subtitleStyle10 = (color) => ({
+var subtitleStyle7 = (color) => ({
   fontSize: "0.9rem",
   color,
   margin: "0 0 24px",
@@ -5244,7 +5208,7 @@ var checkmarkStyle = {
   fontWeight: 700,
   fontSize: "0.9rem"
 };
-var hintStyle4 = (color) => ({
+var hintStyle2 = (color) => ({
   textAlign: "center",
   fontSize: "0.82rem",
   color,
@@ -5319,7 +5283,7 @@ function TokenPickerScreen({
       ] }),
       children: [
         /* @__PURE__ */ jsx(ScreenHeader, { title: "Select Token", onBack }),
-        /* @__PURE__ */ jsx("p", { style: subtitleStyle11(themeTokens.textSecondary), children: "Choose a token to deposit with. Tokens that haven't been authorized yet will require a one-time wallet approval." }),
+        /* @__PURE__ */ jsx("p", { style: subtitleStyle8(themeTokens.textSecondary), children: "Choose a token to deposit with. Tokens that haven't been authorized yet will require a one-time wallet approval." }),
         /* @__PURE__ */ jsx("div", { style: chainListStyle2, children: [...chainGroups.entries()].map(([chainName, chainEntries]) => {
           const isExpanded = expandedChain === chainName;
           const chainTotal = chainEntries.reduce((sum, e) => sum + e.balance, 0);
@@ -5375,7 +5339,7 @@ function TokenPickerScreen({
     }
   );
 }
-var subtitleStyle11 = (color) => ({
+var subtitleStyle8 = (color) => ({
   fontSize: "0.86rem",
   color,
   margin: "0 0 20px",