@swype-org/react-sdk 0.1.190 → 0.1.202

package/dist/index.js

@@ -2119,51 +2119,59 @@ function isMobileUserAgent(userAgent) {
 function shouldUseWalletConnector(options) {
   return options.useWalletConnector ?? !isMobileUserAgent(options.userAgent);
 }
-var ACCENT = "#28b67a";
-var BG_RING = "#d2e4ea";
+var MUTED = "#7fa4b0";
+var LOGO_SIZE = 48;
 function SwypeLoadingScreen() {
   return /* @__PURE__ */ jsxs("div", { style: containerStyle, children: [
-    /* @__PURE__ */ jsxs("div", { style: contentStyle, children: [
-      /* @__PURE__ */ jsx("p", { style: wordmarkStyle, children: "BLINK" }),
-      /* @__PURE__ */ jsx("div", { style: spinnerStyle })
-    ] }),
+    /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        width: LOGO_SIZE,
+        height: LOGO_SIZE,
+        viewBox: "0 0 100 100",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        style: { borderRadius: 10 },
+        children: [
+          /* @__PURE__ */ jsxs("g", { clipPath: "url(#swype-loading-clip)", children: [
+            /* @__PURE__ */ jsx("rect", { width: "100", height: "100", rx: "18.5874", fill: "white" }),
+            /* @__PURE__ */ jsx("path", { d: "M64.0138 36.6191C68.3952 36.7025 70.2512 42.3038 65.1932 44.0399C61.4251 44.2617 60.8419 41.8557 61.3059 38.6113C62.3258 37.4916 62.6562 37.2326 64.0138 36.6191Z", fill: "white" }),
+            /* @__PURE__ */ jsx("path", { d: "M34.7441 36.6714C36.6646 36.3309 38.4839 37.6898 38.813 39.71C39.1407 41.7302 37.8542 43.6499 35.9352 43.9994C34.7427 44.2169 33.5274 43.7774 32.7154 42.8325C31.8492 41.8262 31.5728 40.4029 31.9959 39.1191C32.419 37.8367 33.4719 36.8979 34.7441 36.6714Z", fill: "white" }),
+            /* @__PURE__ */ jsx("g", { style: { transformOrigin: "50px 62px", animation: "swype-legs-walk 0.8s ease-in-out infinite" }, children: /* @__PURE__ */ jsx("path", { d: "M37.719 72.0299C39.0372 70.605 40.611 68.9843 41.7888 67.4312L50.1528 61.6651L57.6601 61.4468C57.4965 63.5289 61.7342 75.3729 61.6981 77.5158C62.154 77.0628 63.0658 76.3318 63.567 75.9876C65.9954 74.3365 68.8384 73.8223 71.4833 74.5554C72.8167 74.9328 73.9331 75.9251 74.58 77.3075C75.2967 78.8451 75.3771 80.3207 74.9127 82.0281C73.8912 85.7844 71.5792 88.6365 68.624 90.5357C66.125 92.1415 61.7077 93.9276 58.9822 93.0828C58.078 92.7956 56.4567 92.015 55.9204 91.1399C55.1385 89.8648 54.5613 88.8907 54.1469 87.3736C53.3686 84.4709 53.3459 86.0793 52.7439 77.9085C52.8102 75.0919 52.9961 69.1199 52.9088 66.782C52.1044 67.8121 48.6686 72.1053 47.7896 73.7937L43.7186 79.5555C45.2316 79.4947 47.0626 79.5314 48.354 80.4535C49.2813 81.1277 49.9192 82.2144 50.1273 83.4755C50.2332 83.8294 50.3132 84.6855 50.3258 85.0634C50.4307 88.2051 49.4337 91.7462 46.8974 93.4764C45.8189 94.2126 44.2654 94.598 43.01 94.7341C37.9909 95.3115 33.0817 93.5835 29.3502 89.9257C28.3222 88.8994 27.4875 87.705 27.4333 86.0333C27.4046 85.1165 27.6099 84.1963 28.0241 83.3859C28.6301 82.2147 30.2471 80.3005 31.0794 79.3156C33.2057 76.7997 35.4975 74.4306 37.719 72.0299Z", fill: "black" }) }),
+            /* @__PURE__ */ jsx("path", { d: "M25.2815 30.5666C25.6441 30.6182 25.869 30.0928 25.5864 29.8598C23.1701 27.868 21.5484 25.4469 21.0444 22.6545C20.3641 19.1251 21.516 15.5212 24.2422 12.6488C26.8514 9.91783 30.7518 8.12575 35.0552 7.68041C40.5681 7.11357 44.9544 9.44386 49.0355 11.908C49.1016 11.9479 49.1793 11.964 49.2559 11.9535L49.6641 11.8975C49.7772 11.882 49.8729 11.8099 49.9313 11.7118C50.7042 10.4132 53.3609 9.13558 54.9428 8.55183C63.274 5.47733 72.1015 8.67608 75.6217 15.0543C77.4169 18.3043 77.4637 21.9922 75.7515 25.2845C74.8719 26.99 73.8277 28.1868 72.3742 29.4156C72.1074 29.6412 72.3057 30.099 72.652 30.0534C78.3434 29.3036 83.6958 29.6535 88.1602 33.0995C88.1743 33.1104 88.1896 33.1204 88.2051 33.1289C94.9326 36.8336 95.4063 45.4019 90.8735 50.5016C88.6438 53.0434 85.3883 54.9193 81.641 55.8268C81.4786 55.8662 81.3675 56.017 81.3778 56.1837C81.627 60.2197 80.6407 63.7049 77.0957 66.8558C74.3594 69.31 72.2572 70.905 68.1242 71.1594C66.1317 71.2671 64.5824 71.0823 61.0405 69.4728C57.7759 67.9894 53.6996 61.9918 52.509 57.7058C52.4204 57.3871 51.9326 57.3204 51.7644 57.6052C49.4075 61.5961 43.2088 67.6787 38.7227 69.4728C35.1404 70.8919 32.2895 71.8779 28.5005 70.8789C24.3706 69.7951 20.9698 67.4623 19.0499 64.3964C18.0021 62.7282 16.7577 59.3144 17.4723 57.5087C17.4921 57.4587 17.5023 57.4056 17.4951 57.3522C17.4647 57.1259 17.359 56.7067 17.1377 56.6504C8.17592 54.367 2.58735 48.0815 5.03045 40.4013C6.14562 36.9784 8.95444 34.0395 12.8321 32.2381C16.7957 30.3763 20.9323 29.9475 25.2815 30.5666Z", fill: "black" }),
+            /* @__PURE__ */ jsx("rect", { x: "44.3433", y: "56.4863", width: "10.1195", height: "9.10751", fill: "black" }),
+            /* @__PURE__ */ jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M45.6929 25.6221C49.2323 25.6223 52.1021 31.512 52.1021 38.7773C52.102 46.0426 49.2323 51.9323 45.6929 51.9326C42.2373 51.9326 39.4213 46.3188 39.2896 39.292C41.4308 38.8166 43.9097 38.7264 46.1079 39.1299C47.0121 39.2956 47.8949 38.5389 47.4956 37.7109C46.0273 34.6668 42.4111 34.0327 39.686 34.1816C40.5942 29.1824 42.9408 25.6221 45.6929 25.6221Z", fill: "white" }),
+            /* @__PURE__ */ jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M63.2471 25.6216C66.7865 25.6219 69.6562 31.5116 69.6562 38.7769C69.6562 46.0422 66.7865 51.9319 63.2471 51.9321C59.7916 51.9321 56.9756 46.319 56.8438 39.2925C58.985 38.8171 61.4639 38.7259 63.6621 39.1294C64.5663 39.2952 65.4491 38.5394 65.0498 37.7114C63.5816 34.6669 59.9654 34.0322 57.2402 34.1812C58.1484 29.1821 60.4951 25.6216 63.2471 25.6216Z", fill: "white" })
+          ] }),
+          /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: "swype-loading-clip", children: /* @__PURE__ */ jsx("rect", { width: "100", height: "100", rx: "18.5874", fill: "white" }) }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { style: labelStyle, children: "Loading..." }),
     /* @__PURE__ */ jsx("style", { children: `
-        @keyframes swype-loading-spin {
-          to { transform: rotate(360deg); }
+        @keyframes swype-legs-walk {
+          0%, 100% { transform: rotate(0deg); }
+          25%      { transform: rotate(5deg); }
+          75%      { transform: rotate(-5deg); }
         }
       ` })
   ] });
 }
 var containerStyle = {
   display: "flex",
+  flexDirection: "column",
   alignItems: "center",
   justifyContent: "center",
+  gap: 12,
   height: "100%",
   flex: 1,
   background: "transparent"
 };
-var contentStyle = {
-  display: "flex",
-  flexDirection: "column",
-  alignItems: "center",
-  gap: 16
-};
-var wordmarkStyle = {
-  fontSize: 28,
-  fontWeight: 700,
-  letterSpacing: "-0.04em",
-  color: ACCENT,
-  margin: 0,
-  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
-};
-var spinnerStyle = {
-  width: 44,
-  height: 44,
-  border: `4px solid ${BG_RING}`,
-  borderTopColor: ACCENT,
-  borderRightColor: `${ACCENT}66`,
-  borderRadius: "50%",
-  animation: "swype-loading-spin 0.9s linear infinite"
+var labelStyle = {
+  color: MUTED,
+  fontSize: 13,
+  fontFamily: "system-ui, -apple-system, sans-serif",
+  letterSpacing: "0.02em"
 };
 
 // src/assets/logos.ts
@@ -2213,25 +2221,32 @@ var SWYPE_SVG = `<svg width="100" height="100" viewBox="0 0 100 100" fill="none"
 </clipPath>
 </defs>
 </svg>`;
-var SWYPE_LOGO = svgToDataUri(SWYPE_SVG);
-var SWYPE_MASCOT_SVG = `<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M64.0138 36.6191C68.3952 36.7025 70.2512 42.3038 65.1932 44.0399C61.4251 44.2617 60.8419 41.8557 61.3059 38.6113C62.3258 37.4916 62.6562 37.2326 64.0138 36.6191Z" fill="#1a5c2a"/>
-<path d="M34.7441 36.6714C36.6646 36.3309 38.4839 37.6898 38.813 39.71C39.1407 41.7302 37.8542 43.6499 35.9352 43.9994C34.7427 44.2169 33.5274 43.7774 32.7154 42.8325C31.8492 41.8262 31.5728 40.4029 31.9959 39.1191C32.419 37.8367 33.4719 36.8979 34.7441 36.6714Z" fill="#1a5c2a"/>
-<path d="M37.719 72.0299C39.0372 70.605 40.611 68.9843 41.7888 67.4312L50.1528 61.6651L57.6601 61.4468C57.4965 63.5289 61.7342 75.3729 61.6981 77.5158C62.154 77.0628 63.0658 76.3318 63.567 75.9876C65.9954 74.3365 68.8384 73.8223 71.4833 74.5554C72.8167 74.9328 73.9331 75.9251 74.58 77.3075C75.2967 78.8451 75.3771 80.3207 74.9127 82.0281C73.8912 85.7844 71.5792 88.6365 68.624 90.5357C66.125 92.1415 61.7077 93.9276 58.9822 93.0828C58.078 92.7956 56.4567 92.015 55.9204 91.1399C55.1385 89.8648 54.5613 88.8907 54.1469 87.3736C53.3686 84.4709 53.3459 86.0793 52.7439 77.9085C52.8102 75.0919 52.9961 69.1199 52.9088 66.782C52.1044 67.8121 48.6686 72.1053 47.7896 73.7937L43.7186 79.5555C45.2316 79.4947 47.0626 79.5314 48.354 80.4535C49.2813 81.1277 49.9192 82.2144 50.1273 83.4755C50.2332 83.8294 50.3132 84.6855 50.3258 85.0634C50.4307 88.2051 49.4337 91.7462 46.8974 93.4764C45.8189 94.2126 44.2654 94.598 43.01 94.7341C37.9909 95.3115 33.0817 93.5835 29.3502 89.9257C28.3222 88.8994 27.4875 87.705 27.4333 86.0333C27.4046 85.1165 27.6099 84.1963 28.0241 83.3859C28.6301 82.2147 30.2471 80.3005 31.0794 79.3156C33.2057 76.7997 35.4975 74.4306 37.719 72.0299Z" fill="#4ABA5A"/>
-<path d="M25.2815 30.5666C25.6441 30.6182 25.869 30.0928 25.5864 29.8598C23.1701 27.868 21.5484 25.4469 21.0444 22.6545C20.3641 19.1251 21.516 15.5212 24.2422 12.6488C26.8514 9.91783 30.7518 8.12575 35.0552 7.68041C40.5681 7.11357 44.9544 9.44386 49.0355 11.908C49.1016 11.9479 49.1793 11.964 49.2559 11.9535L49.6641 11.8975C49.7772 11.882 49.8729 11.8099 49.9313 11.7118C50.7042 10.4132 53.3609 9.13558 54.9428 8.55183C63.274 5.47733 72.1015 8.67608 75.6217 15.0543C77.4169 18.3043 77.4637 21.9922 75.7515 25.2845C74.8719 26.99 73.8277 28.1868 72.3742 29.4156C72.1074 29.6412 72.3057 30.099 72.652 30.0534C78.3434 29.3036 83.6958 29.6535 88.1602 33.0995C88.1743 33.1104 88.1896 33.1204 88.2051 33.1289C94.9326 36.8336 95.4063 45.4019 90.8735 50.5016C88.6438 53.0434 85.3883 54.9193 81.641 55.8268C81.4786 55.8662 81.3675 56.017 81.3778 56.1837C81.627 60.2197 80.6407 63.7049 77.0957 66.8558C74.3594 69.31 72.2572 70.905 68.1242 71.1594C66.1317 71.2671 64.5824 71.0823 61.0405 69.4728C57.7759 67.9894 53.6996 61.9918 52.509 57.7058C52.4204 57.3871 51.9326 57.3204 51.7644 57.6052C49.4075 61.5961 43.2088 67.6787 38.7227 69.4728C35.1404 70.8919 32.2895 71.8779 28.5005 70.8789C24.3706 69.7951 20.9698 67.4623 19.0499 64.3964C18.0021 62.7282 16.7577 59.3144 17.4723 57.5087C17.4921 57.4587 17.5023 57.4056 17.4951 57.3522C17.4647 57.1259 17.359 56.7067 17.1377 56.6504C8.17592 54.367 2.58735 48.0815 5.03045 40.4013C6.14562 36.9784 8.95444 34.0395 12.8321 32.2381C16.7957 30.3763 20.9323 29.9475 25.2815 30.5666Z" fill="#4ABA5A"/>
-<rect x="44.3433" y="56.4863" width="10.1195" height="9.10751" fill="#4ABA5A"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M45.6929 25.6221C49.2323 25.6223 52.1021 31.512 52.1021 38.7773C52.102 46.0426 49.2323 51.9323 45.6929 51.9326C42.2373 51.9326 39.4213 46.3188 39.2896 39.292C41.4308 38.8166 43.9097 38.7264 46.1079 39.1299C47.0121 39.2956 47.8949 38.5389 47.4956 37.7109C46.0273 34.6668 42.4111 34.0327 39.686 34.1816C40.5942 29.1824 42.9408 25.6221 45.6929 25.6221Z" fill="#1a5c2a"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M63.2471 25.6216C66.7865 25.6219 69.6562 31.5116 69.6562 38.7769C69.6562 46.0422 66.7865 51.9319 63.2471 51.9321C59.7916 51.9321 56.9756 46.319 56.8438 39.2925C58.985 38.8171 61.4639 38.7259 63.6621 39.1294C64.5663 39.2952 65.4491 38.5394 65.0498 37.7114C63.5816 34.6669 59.9654 34.0322 57.2402 34.1812C58.1484 29.1821 60.4951 25.6216 63.2471 25.6216Z" fill="#1a5c2a"/>
+var USDC_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 2000">
+<path d="M1000 2000c554.17 0 1000-445.83 1000-1000S1554.17 0 1000 0 0 445.83 0 1000s445.83 1000 1000 1000z" fill="#2775ca"/>
+<path d="M1275 1158.33c0-145.83-87.5-195.83-262.5-216.66-125-16.67-150-50-150-108.34s41.67-95.83 125-95.83c75 0 116.67 25 137.5 87.5 4.17 12.5 16.67 20.83 29.17 20.83h66.66c16.67 0 29.17-12.5 29.17-29.16v-4.17c-16.67-91.67-91.67-162.5-187.5-170.83v-100c0-16.67-12.5-29.17-33.33-33.34h-62.5c-16.67 0-29.17 12.5-33.34 33.34v95.83c-125 16.67-204.16 100-204.16 204.17 0 137.5 83.33 191.66 258.33 212.5 116.67 20.83 154.17 45.83 154.17 112.5s-58.34 112.5-137.5 112.5c-108.34 0-145.84-45.84-158.34-108.34-4.16-16.66-16.66-25-29.16-25h-70.84c-16.66 0-29.16 12.5-29.16 29.17v4.17c16.66 104.16 83.33 179.16 220.83 200v100c0 16.66 12.5 29.16 33.33 33.33h62.5c16.67 0 29.17-12.5 33.34-33.33v-100c125-20.84 208.33-108.34 208.33-220.84z" fill="#fff"/>
+<path d="M787.5 1595.83c-325-116.66-491.67-479.16-370.83-800 62.5-175 200-308.33 370.83-370.83 16.67-8.33 25-20.83 25-41.67V325c0-16.67-8.33-29.17-25-33.33-4.17 0-12.5 0-16.67 4.16-395.83 125-612.5 545.84-487.5 941.67 75 233.33 254.17 412.5 487.5 487.5 16.67 8.33 33.34 0 37.5-16.67 4.17-4.16 4.17-8.33 4.17-16.66v-58.34c0-12.5-12.5-29.16-25-37.5zM1229.17 295.83c-16.67-8.33-33.34 0-37.5 16.67-4.17 4.17-4.17 8.33-4.17 16.67v58.33c0 16.67 12.5 33.33 25 41.67 325 116.66 491.67 479.16 370.83 800-62.5 175-200 308.33-370.83 370.83-16.67 8.33-25 20.83-25 41.67V1700c0 16.67 8.33 29.17 25 33.33 4.17 0 12.5 0 16.67-4.16 395.83-125 612.5-545.84 487.5-941.67-75-237.5-258.34-416.67-487.5-491.67z" fill="#fff"/>
 </svg>`;
-var SWYPE_MASCOT = svgToDataUri(SWYPE_MASCOT_SVG);
+var TETHER_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800">
+<circle fill="#009393" cx="400" cy="400" r="400"/>
+<path fill="#fff" fill-rule="evenodd" d="M400.49,428.59c68.79,0,126.28-11.63,140.33-27.17-11.93-13.18-55.08-23.56-109.88-26.4v32.83c-9.81.51-20.01.76-30.46.76s-20.65-.25-30.48-.76v-32.83c-54.78,2.84-97.95,13.22-109.88,26.4,14.07,15.54,71.57,27.17,140.36,27.17ZM522.71,274.06v45.21h-91.77v31.35c64.46,3.35,112.83,17.13,113.19,33.62v34.38c-.36,16.49-48.73,30.24-113.19,33.6v76.94h-60.93v-76.94c-64.46-3.35-112.81-17.11-113.17-33.6v-34.38c.36-16.49,48.71-30.27,113.17-33.62v-31.35h-91.77v-45.21h244.48ZM242.15,202.11h322.16c7.7,0,14.79,4.05,18.63,10.63l93.85,161.16c4.86,8.36,3.42,18.91-3.52,25.68l-258.34,252.18c-8.38,8.17-21.84,8.17-30.2,0L126.71,399.92c-7.09-6.94-8.43-17.79-3.2-26.19l100.33-161.49c3.91-6.28,10.85-10.12,18.32-10.12Z"/>
+</svg>`;
+var SWYPE_LOGO = svgToDataUri(SWYPE_SVG);
+var SWYPE_MASCOT = SWYPE_LOGO;
 var BASE_LOGO = svgToDataUri(BASE_SVG);
 var METAMASK_LOGO = svgToDataUri(METAMASK_SVG);
 var TRUST_WALLET_LOGO = svgToDataUri(TRUST_WALLET_SVG);
+var USDC_LOGO = svgToDataUri(USDC_SVG);
+var TETHER_LOGO = svgToDataUri(TETHER_SVG);
 var KNOWN_LOGOS = {
   metamask: METAMASK_LOGO,
   base: BASE_LOGO,
   "trust wallet": TRUST_WALLET_LOGO
 };
+var TOKEN_LOGOS = {
+  USDC: USDC_LOGO,
+  "USDC.e": USDC_LOGO,
+  USDT: TETHER_LOGO
+};
 var FOOTER_CSS = `
 .swype-screen-footer {
   padding-bottom: max(32px, env(safe-area-inset-bottom, 32px));
@@ -2282,21 +2297,33 @@ function useFlowPhase() {
 function StepProgress({ phase }) {
   const { tokens } = useSwypeConfig();
   if (phase === "deposit") {
-    return /* @__PURE__ */ jsx("img", { src: SWYPE_MASCOT, alt: "Swype", style: mascotStyle });
+    return /* @__PURE__ */ jsx("img", { src: SWYPE_LOGO, alt: "Swype", style: mascotStyle });
   }
   return /* @__PURE__ */ jsxs("div", { style: containerStyle3, children: [
-    /* @__PURE__ */ jsx("span", { style: dotStyle(tokens.accent) }),
-    /* @__PURE__ */ jsx("span", { style: labelStyle(tokens.text), children: "Link" }),
+    /* @__PURE__ */ jsxs("div", { style: sectionStyle("flex-end"), children: [
+      /* @__PURE__ */ jsx("span", { style: labelStyle2(tokens.text), children: "Link" }),
+      /* @__PURE__ */ jsx("span", { style: dotStyle(tokens.accent) })
+    ] }),
     /* @__PURE__ */ jsx("span", { style: lineStyle(tokens.textMuted) }),
-    /* @__PURE__ */ jsx("span", { style: dotStyle(tokens.textMuted) }),
-    /* @__PURE__ */ jsx("span", { style: labelStyle(tokens.textMuted), children: "Deposit" })
+    /* @__PURE__ */ jsxs("div", { style: sectionStyle("flex-start"), children: [
+      /* @__PURE__ */ jsx("span", { style: dotStyle(tokens.textMuted) }),
+      /* @__PURE__ */ jsx("span", { style: labelStyle2(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,
@@ -2311,7 +2338,7 @@ var lineStyle = (color) => ({
   opacity: 0.4,
   flexShrink: 0
 });
-var labelStyle = (color) => ({
+var labelStyle2 = (color) => ({
   fontSize: "0.82rem",
   fontWeight: 600,
   color,
@@ -2453,19 +2480,16 @@ var badgeStyle = (color) => ({
 });
 function PoweredByFooter() {
   const { tokens } = useSwypeConfig();
-  return /* @__PURE__ */ jsxs("div", { style: containerStyle5(tokens.textMuted), children: [
-    /* @__PURE__ */ jsxs("div", { style: rowStyle, children: [
-      /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ 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__ */ jsx("span", { children: "Powered by Blink" })
-    ] }),
-    /* @__PURE__ */ jsx("span", { style: pillStyle(tokens.textMuted, tokens.border), children: "Beta Version" })
-  ] });
+  return /* @__PURE__ */ jsx("div", { style: containerStyle5(tokens.textMuted), children: /* @__PURE__ */ jsxs("div", { style: rowStyle, children: [
+    /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ 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__ */ jsx("span", { children: "Powered by Blink" })
+  ] }) });
 }
 var containerStyle5 = (color) => ({
   display: "flex",
@@ -2482,14 +2506,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;
@@ -2509,7 +2525,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",
@@ -2520,7 +2536,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",
@@ -2737,7 +2753,7 @@ function StepList({ steps }) {
         }
       ),
       /* @__PURE__ */ jsxs("div", { style: labelContainerStyle, children: [
-        /* @__PURE__ */ jsx("span", { style: labelStyle2(isComplete || isActive ? tokens.text : tokens.textMuted), children: step.label }),
+        /* @__PURE__ */ jsx("span", { style: labelStyle3(isComplete || isActive ? tokens.text : tokens.textMuted), children: step.label }),
         step.detail && /* @__PURE__ */ jsx("span", { style: detailStyle(tokens.textMuted), children: step.detail })
       ] })
     ] }, i);
@@ -2778,7 +2794,7 @@ var labelContainerStyle = {
   display: "flex",
   flexDirection: "column"
 };
-var labelStyle2 = (color) => ({
+var labelStyle3 = (color) => ({
   fontSize: "0.9rem",
   fontWeight: 500,
   color
@@ -2831,7 +2847,7 @@ function LoginScreen({
             right: merchantInitials ? /* @__PURE__ */ jsx("div", { style: avatarStyle(tokens), children: merchantInitials }) : void 0
           }
         ),
-        /* @__PURE__ */ jsxs("div", { style: contentStyle2, children: [
+        /* @__PURE__ */ jsxs("div", { style: contentStyle, children: [
           /* @__PURE__ */ jsx("img", { src: SWYPE_LOGO, alt: "Swype", style: logoStyle }),
           /* @__PURE__ */ jsx("h2", { style: headingStyle(tokens.text), children: "Your Money. Any App.\nOne Tap." }),
           error && /* @__PURE__ */ jsx("div", { style: errorStyle(tokens), children: error }),
@@ -2866,7 +2882,7 @@ function socialLabel(provider) {
       return "X";
   }
 }
-var contentStyle2 = {
+var contentStyle = {
   textAlign: "center",
   flex: 1,
   display: "flex",
@@ -3007,7 +3023,7 @@ function OtpVerifyScreen({
       ] }),
       children: [
         /* @__PURE__ */ jsx(ScreenHeader, { onBack }),
-        /* @__PURE__ */ jsxs("div", { style: contentStyle3, children: [
+        /* @__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: [
             "We sent a 6-digit code to",
@@ -3031,7 +3047,7 @@ function OtpVerifyScreen({
     }
   );
 }
-var contentStyle3 = {
+var contentStyle2 = {
   textAlign: "center",
   display: "flex",
   flexDirection: "column",
@@ -3096,15 +3112,16 @@ function PasskeyScreen({
       ] }),
       children: [
         /* @__PURE__ */ jsx(ScreenHeader, { onBack, onLogout }),
-        /* @__PURE__ */ jsxs("div", { style: contentStyle4, children: [
+        /* @__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" }),
           error && /* @__PURE__ */ jsx("div", { style: errorBannerStyle2(tokens), children: error })
         ] })
       ]
     }
   );
 }
-var contentStyle4 = {
+var contentStyle3 = {
   textAlign: "center",
   flex: 1,
   display: "flex",
@@ -3119,6 +3136,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`,
@@ -3256,7 +3279,7 @@ function WalletPickerScreen({
         /* @__PURE__ */ jsx(ScreenHeader, { title: "Set up Swype", onBack, onLogout }),
         hasPending && /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx("h2", { style: headingStyle4(tokens.text), children: "Continue where you left off" }),
-          /* @__PURE__ */ jsx("p", { style: subtitleStyle2(tokens.textSecondary), children: "You have a wallet that still needs setup" }),
+          /* @__PURE__ */ jsx("p", { style: subtitleStyle3(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;
@@ -3360,7 +3383,7 @@ var headingStyle4 = (color) => ({
   color,
   margin: "8px 0 4px"
 });
-var subtitleStyle2 = (color) => ({
+var subtitleStyle3 = (color) => ({
   fontSize: "0.88rem",
   color,
   margin: "0 0 24px"
@@ -3524,7 +3547,8 @@ function SetupScreen({
   onLogout,
   onAdvanced,
   loading,
-  error
+  error,
+  selectedTokenSymbol
 }) {
   const { tokens } = useSwypeConfig();
   const effectiveMax = DEFAULT_MAX;
@@ -3613,7 +3637,7 @@ function SetupScreen({
               style: tokenIconButtonStyle(!!onAdvanced),
               children: [
                 /* @__PURE__ */ jsxs("div", { style: tokenIconWrapStyle, children: [
-                  /* @__PURE__ */ jsxs("svg", { width: "36", height: "36", viewBox: "0 0 36 36", fill: "none", children: [
+                  selectedTokenSymbol && TOKEN_LOGOS[selectedTokenSymbol] ? /* @__PURE__ */ jsx("img", { src: TOKEN_LOGOS[selectedTokenSymbol], alt: selectedTokenSymbol, width: 36, height: 36, style: { borderRadius: "50%" } }) : /* @__PURE__ */ jsxs("svg", { width: "36", height: "36", viewBox: "0 0 36 36", fill: "none", children: [
                     /* @__PURE__ */ jsx("circle", { cx: "18", cy: "18", r: "18", fill: "#2DB84B" }),
                     /* @__PURE__ */ jsx("text", { x: "18", y: "23", textAnchor: "middle", fontSize: "18", fill: "#fff", fontWeight: "700", children: "$" })
                   ] }),
@@ -3759,10 +3783,10 @@ function SetupStatusScreen({
   if (complete) {
     return /* @__PURE__ */ jsxs(ScreenLayout, { footer: /* @__PURE__ */ jsx(PoweredByFooter, {}), children: [
       /* @__PURE__ */ jsx(ScreenHeader, { onBack: onContinue }),
-      /* @__PURE__ */ jsxs("div", { style: contentStyle5, children: [
-        /* @__PURE__ */ jsx("img", { src: SWYPE_MASCOT, alt: "Swype", style: mascotStyle2 }),
+      /* @__PURE__ */ jsxs("div", { style: contentStyle4, children: [
+        /* @__PURE__ */ jsx("img", { src: SWYPE_LOGO, alt: "Swype", style: mascotStyle2 }),
         /* @__PURE__ */ jsx("h2", { style: headingStyle6(tokens.text), children: "Done!" }),
-        /* @__PURE__ */ jsx("p", { style: subtitleStyle3(tokens.textSecondary), children: "Return to the app to try one-tap deposits." })
+        /* @__PURE__ */ jsx("p", { style: subtitleStyle4(tokens.textSecondary), children: "Return to the app to try one-tap deposits." })
       ] })
     ] });
   }
@@ -3772,7 +3796,7 @@ function SetupStatusScreen({
   ];
   return /* @__PURE__ */ jsxs(ScreenLayout, { children: [
     /* @__PURE__ */ jsx(ScreenHeader, { onLogout }),
-    /* @__PURE__ */ jsxs("div", { style: contentStyle5, children: [
+    /* @__PURE__ */ jsxs("div", { style: contentStyle4, 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 }),
@@ -3781,7 +3805,7 @@ function SetupStatusScreen({
     ] })
   ] });
 }
-var contentStyle5 = {
+var contentStyle4 = {
   flex: 1,
   display: "flex",
   flexDirection: "column",
@@ -3801,7 +3825,7 @@ var headingStyle6 = (color) => ({
   color,
   margin: "20px 0 8px"
 });
-var subtitleStyle3 = (color) => ({
+var subtitleStyle4 = (color) => ({
   fontSize: "0.9rem",
   color,
   margin: "0 0 28px",
@@ -3852,7 +3876,8 @@ function DepositScreen({
   onAuthorizeAccount,
   onAddProvider,
   onSelectToken,
-  selectedSourceLabel
+  selectedSourceLabel,
+  selectedTokenSymbol
 }) {
   const { tokens } = useSwypeConfig();
   const amount = initialAmount;
@@ -3871,7 +3896,6 @@ function DepositScreen({
   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;
@@ -3923,27 +3947,18 @@ function DepositScreen({
     ScreenLayout,
     {
       footer: /* @__PURE__ */ jsxs(Fragment, { children: [
-        exceedsLimit && onIncreaseLimit ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(PrimaryButton, { onClick: onIncreaseLimit, loading: increasingLimit, children: "Increase limit" }),
-          /* @__PURE__ */ jsxs("p", { style: limitExceededHintStyle(tokens.warning), children: [
-            "Your deposit of $",
-            amount.toFixed(2),
-            " exceeds your One-Tap limit of $",
-            remainingLimit?.toFixed(2) ?? "0.00",
-            ". Increase your limit to continue."
-          ] })
-        ] }) : /* @__PURE__ */ jsx(PrimaryButton, { onClick: () => onDeposit(amount), disabled: !canDeposit, loading: processing, children: "Confirm" }),
+        !accountPickerOpen && (exceedsLimit && onIncreaseLimit ? /* @__PURE__ */ jsx(PrimaryButton, { onClick: onIncreaseLimit, loading: increasingLimit, children: "Increase limit" }) : /* @__PURE__ */ jsx(PrimaryButton, { onClick: () => onDeposit(amount), disabled: !canDeposit, loading: processing, children: "Confirm" })),
         /* @__PURE__ */ jsx(PoweredByFooter, {})
       ] }),
       children: [
-        /* @__PURE__ */ jsx(ScreenHeader, { onBack }),
+        /* @__PURE__ */ jsx(ScreenHeader, { onBack, onLogout }),
         /* @__PURE__ */ jsxs("div", { ref: pickerRef, style: depositCardWrapStyle, children: [
-          /* @__PURE__ */ jsxs("div", { style: depositCardStyle(tokens), children: [
+          /* @__PURE__ */ jsxs("div", { children: [
             /* @__PURE__ */ jsx("div", { style: depositLabelStyle(tokens.textMuted), children: "Depositing" }),
             /* @__PURE__ */ jsxs("div", { style: amountRowStyle2, children: [
               /* @__PURE__ */ jsxs("div", { style: amountValueStyle(tokens.text), children: [
                 "$",
-                amount.toLocaleString("en-US", { minimumFractionDigits: 0, maximumFractionDigits: 2 })
+                amount.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })
               ] }),
               /* @__PURE__ */ jsxs(
                 "button",
@@ -3952,34 +3967,28 @@ function DepositScreen({
                   onClick: onSelectToken,
                   style: tokenIconButtonStyle2(!!onSelectToken),
                   children: [
-                    /* @__PURE__ */ jsxs("div", { style: tokenIconWrapStyle2, children: [
-                      /* @__PURE__ */ jsxs("svg", { width: "36", height: "36", viewBox: "0 0 36 36", fill: "none", children: [
-                        /* @__PURE__ */ jsx("circle", { cx: "18", cy: "18", r: "18", fill: "#2DB84B" }),
-                        /* @__PURE__ */ jsx("text", { x: "18", y: "23", textAnchor: "middle", fontSize: "18", fill: "#fff", fontWeight: "700", children: "$" })
-                      ] }),
-                      /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", style: checkBadgeStyle2, children: [
-                        /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "8", fill: "#2775CA" }),
-                        /* @__PURE__ */ jsx("path", { d: "M5 8l2 2 4-4", stroke: "#fff", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round" })
-                      ] })
-                    ] }),
+                    /* @__PURE__ */ jsx("div", { style: tokenIconWrapStyle2, children: selectedTokenSymbol && TOKEN_LOGOS[selectedTokenSymbol] ? /* @__PURE__ */ jsx("img", { src: TOKEN_LOGOS[selectedTokenSymbol], alt: selectedTokenSymbol, width: 36, height: 36, style: { borderRadius: "50%" } }) : /* @__PURE__ */ jsxs("svg", { width: "36", height: "36", viewBox: "0 0 36 36", fill: "none", children: [
+                      /* @__PURE__ */ jsx("circle", { cx: "18", cy: "18", r: "18", fill: "#2DB84B" }),
+                      /* @__PURE__ */ jsx("text", { x: "18", y: "23", textAnchor: "middle", fontSize: "18", fill: "#fff", fontWeight: "700", children: "$" })
+                    ] }) }),
                     /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", style: { opacity: 0.5 }, children: /* @__PURE__ */ jsx("path", { d: "M6 9l6 6 6-6", stroke: tokens.textMuted, strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
                   ]
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxs(
+            !accountPickerOpen && /* @__PURE__ */ jsxs(
               "button",
               {
                 type: "button",
-                onClick: hasMultipleAccounts ? () => setAccountPickerOpen(!accountPickerOpen) : void 0,
-                style: walletBalanceRowStyle(hasMultipleAccounts),
+                onClick: () => setAccountPickerOpen(!accountPickerOpen),
+                style: walletBalanceRowStyle,
                 children: [
                   selectedProviderLogo ? /* @__PURE__ */ jsx("img", { src: selectedProviderLogo, alt: selectedProviderName, style: providerLogoStyle }) : /* @__PURE__ */ jsx("div", { style: providerFallbackStyle(tokens.textMuted), children: selectedProviderName.charAt(0) }),
                   /* @__PURE__ */ jsxs("span", { style: walletBalanceStyle(tokens.text), children: [
                     "$",
                     availableBalance.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })
                   ] }),
-                  hasMultipleAccounts && /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", style: { opacity: 0.4 }, children: /* @__PURE__ */ jsx("path", { d: "M7 10l5-5 5 5M7 14l5 5 5-5", stroke: tokens.textMuted, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                  /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", style: { opacity: 0.4 }, children: /* @__PURE__ */ jsx("path", { d: "M7 10l5-5 5 5M7 14l5 5 5-5", stroke: tokens.textMuted, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
                 ]
               }
             )
@@ -4049,12 +4058,19 @@ function DepositScreen({
             ] })
           ] })
         ] }),
-        remainingLimit != null && /* @__PURE__ */ jsxs("div", { style: spendingLimitStyle(tokens.textMuted), children: [
+        !accountPickerOpen && remainingLimit != null && /* @__PURE__ */ jsxs("div", { style: spendingLimitStyle(tokens.textMuted), children: [
           "Spending Limit",
           " ",
           /* @__PURE__ */ jsxs("strong", { style: { color: tokens.text }, children: [
             "$",
-            remainingLimit.toLocaleString("en-US", { minimumFractionDigits: 0, maximumFractionDigits: 0 })
+            remainingLimit.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })
+          ] }),
+          exceedsLimit && /* @__PURE__ */ jsxs("p", { style: limitExceededHintStyle(tokens.warning), children: [
+            "Your deposit of $",
+            amount.toFixed(2),
+            " exceeds your One-Tap limit of $",
+            remainingLimit?.toFixed(2) ?? "0.00",
+            ". Increase your limit to continue."
           ] })
         ] }),
         error && /* @__PURE__ */ jsx("div", { style: errorBannerStyle5(tokens), children: error })
@@ -4066,12 +4082,6 @@ var depositCardWrapStyle = {
   position: "relative",
   marginBottom: 20
 };
-var depositCardStyle = (tokens) => ({
-  background: tokens.bgInput,
-  border: `1px solid ${tokens.border}`,
-  borderRadius: tokens.radiusLg,
-  padding: "16px 20px"
-});
 var depositLabelStyle = (color) => ({
   fontSize: "0.75rem",
   fontWeight: 500,
@@ -4105,22 +4115,19 @@ var tokenIconWrapStyle2 = {
   width: 36,
   height: 36
 };
-var checkBadgeStyle2 = {
-  position: "absolute",
-  bottom: -1,
-  right: -3
-};
-var walletBalanceRowStyle = (clickable) => ({
+var walletBalanceRowStyle = {
   display: "flex",
   alignItems: "center",
+  justifyContent: "center",
   gap: 8,
   background: "transparent",
   border: "none",
   padding: 0,
-  cursor: clickable ? "pointer" : "default",
+  width: "100%",
+  cursor: "pointer",
   fontFamily: "inherit",
   outline: "none"
-});
+};
 var providerLogoStyle = {
   width: 18,
   height: 18,
@@ -4145,16 +4152,11 @@ var walletBalanceStyle = (color) => ({
   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) => ({
@@ -4243,7 +4245,7 @@ var addAccountBtnStyle = (tokens) => ({
   padding: "12px 16px",
   background: "transparent",
   border: "none",
-  color: tokens.accent,
+  color: tokens.textMuted,
   fontWeight: 600,
   fontSize: "0.85rem",
   cursor: "pointer",
@@ -4370,7 +4372,7 @@ function SuccessScreen({
       ] }),
       children: [
         /* @__PURE__ */ jsx(ScreenHeader, { onLogout }),
-        /* @__PURE__ */ jsxs("div", { style: contentStyle6, children: [
+        /* @__PURE__ */ jsxs("div", { style: contentStyle5, 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: [
@@ -4378,14 +4380,14 @@ function SuccessScreen({
               amount.toFixed(2),
               " deposited"
             ] }),
-            merchantName && /* @__PURE__ */ jsxs("p", { style: subtitleStyle4(tokens.textSecondary), children: [
+            merchantName && /* @__PURE__ */ jsxs("p", { style: subtitleStyle5(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: subtitleStyle4(tokens.error), children: error })
+            error && /* @__PURE__ */ jsx("p", { style: subtitleStyle5(tokens.error), children: error })
           ] }),
           /* @__PURE__ */ jsxs("div", { style: summaryCardStyle(tokens), children: [
             sourceName && /* @__PURE__ */ jsxs("div", { style: summaryRowStyle, children: [
@@ -4417,7 +4419,7 @@ function SuccessScreen({
     }
   );
 }
-var contentStyle6 = {
+var contentStyle5 = {
   flex: 1,
   display: "flex",
   flexDirection: "column",
@@ -4431,7 +4433,7 @@ var headingStyle7 = (color) => ({
   color,
   margin: "20px 0 4px"
 });
-var subtitleStyle4 = (color) => ({
+var subtitleStyle5 = (color) => ({
   fontSize: "0.9rem",
   color,
   margin: "0 0 20px"
@@ -4539,8 +4541,8 @@ function SelectSourceScreen({
             onLogout
           }
         ),
-        /* @__PURE__ */ jsx("p", { style: subtitleStyle5(tokens.textMuted), children: "Choose which chain and token to pay from." }),
-        /* @__PURE__ */ jsx("label", { style: labelStyle3(tokens.textSecondary), children: "Chain" }),
+        /* @__PURE__ */ jsx("p", { style: subtitleStyle6(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;
           const isRecommended = chain.chainName === recommended?.chainName;
@@ -4568,7 +4570,7 @@ function SelectSourceScreen({
           );
         }) }),
         tokenChoices.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("label", { style: labelStyle3(tokens.textSecondary), children: "Token" }),
+          /* @__PURE__ */ jsx("label", { style: labelStyle4(tokens.textSecondary), children: "Token" }),
           /* @__PURE__ */ jsx("div", { style: optionListStyle, children: tokenChoices.map((token) => {
             const isSelected = token.tokenSymbol === selectedTokenSymbol;
             return /* @__PURE__ */ jsxs(
@@ -4596,13 +4598,13 @@ function SelectSourceScreen({
     }
   );
 }
-var subtitleStyle5 = (color) => ({
+var subtitleStyle6 = (color) => ({
   fontSize: "0.85rem",
   color,
   margin: "0 0 20px",
   lineHeight: 1.5
 });
-var labelStyle3 = (color) => ({
+var labelStyle4 = (color) => ({
   display: "block",
   fontSize: "0.75rem",
   fontWeight: 600,
@@ -4712,8 +4714,8 @@ function AdvancedSourceScreen({
           }
         ),
         /* @__PURE__ */ jsx("h2", { style: headingStyle8(tokens.text), children: "Set up One-Tap deposits" }),
-        /* @__PURE__ */ jsx("p", { style: subtitleStyle6(tokens.textSecondary), children: "Select a token source for your One-Tap deposits." }),
-        /* @__PURE__ */ jsx("label", { style: labelStyle4(tokens.textSecondary), children: "Select tokens to approve" }),
+        /* @__PURE__ */ jsx("p", { style: subtitleStyle7(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;
           const chainHasSelection = localChain === chain.chainName;
@@ -4782,13 +4784,13 @@ var headingStyle8 = (color) => ({
   color,
   margin: "8px 0 4px"
 });
-var subtitleStyle6 = (color) => ({
+var subtitleStyle7 = (color) => ({
   fontSize: "0.86rem",
   color,
   margin: "0 0 20px",
   lineHeight: 1.5
 });
-var labelStyle4 = (color) => ({
+var labelStyle5 = (color) => ({
   display: "block",
   fontSize: "0.75rem",
   fontWeight: 600,
@@ -4910,7 +4912,7 @@ function TransferStatusScreen({
   const steps = buildSteps(phase);
   return /* @__PURE__ */ jsxs(ScreenLayout, { footer: /* @__PURE__ */ jsx(PoweredByFooter, {}), children: [
     /* @__PURE__ */ jsx(ScreenHeader, { onLogout }),
-    /* @__PURE__ */ jsxs("div", { style: contentStyle7, children: [
+    /* @__PURE__ */ jsxs("div", { style: contentStyle6, 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 }),
@@ -4918,7 +4920,7 @@ function TransferStatusScreen({
     ] })
   ] });
 }
-var contentStyle7 = {
+var contentStyle6 = {
   flex: 1,
   display: "flex",
   flexDirection: "column",
@@ -5009,14 +5011,14 @@ function OpenWalletScreen({
         ] }),
         children: [
           /* @__PURE__ */ jsx(ScreenHeader, { onLogout }),
-          /* @__PURE__ */ jsxs("div", { style: contentStyle8, children: [
+          /* @__PURE__ */ jsxs("div", { style: contentStyle7, 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: [
               "Setting up ",
               displayName,
               "..."
             ] }),
-            /* @__PURE__ */ jsx("p", { style: subtitleStyle7(tokens.textSecondary), children: "Approve the connection in your wallet extension." }),
+            /* @__PURE__ */ jsx("p", { style: subtitleStyle8(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..." })
@@ -5042,10 +5044,10 @@ function OpenWalletScreen({
       ] }),
       children: [
         /* @__PURE__ */ jsx(ScreenHeader, { onBack, onLogout }),
-        /* @__PURE__ */ jsxs("div", { style: contentStyle8, children: [
+        /* @__PURE__ */ jsxs("div", { style: contentStyle7, 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: subtitleStyle7(tokens.textSecondary), children: loading ? "Creating transfer and preparing your wallet link..." : `Continue in ${displayName} to authorize this connection.` }),
+          /* @__PURE__ */ jsx("p", { style: subtitleStyle8(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..." })
@@ -5055,7 +5057,7 @@ function OpenWalletScreen({
     }
   );
 }
-var contentStyle8 = {
+var contentStyle7 = {
   flex: 1,
   display: "flex",
   flexDirection: "column",
@@ -5092,7 +5094,7 @@ var headingStyle10 = (color) => ({
   color,
   margin: "20px 0 8px"
 });
-var subtitleStyle7 = (color) => ({
+var subtitleStyle8 = (color) => ({
   fontSize: "0.9rem",
   color,
   margin: "0 0 24px",
@@ -5141,10 +5143,10 @@ function ConfirmSignScreen({
       ] }),
       children: [
         /* @__PURE__ */ jsx(ScreenHeader, { onLogout }),
-        /* @__PURE__ */ jsxs("div", { style: contentStyle9, children: [
+        /* @__PURE__ */ jsxs("div", { style: contentStyle8, 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: subtitleStyle8(tokens.textSecondary), children: [
+          /* @__PURE__ */ jsxs("p", { style: subtitleStyle9(tokens.textSecondary), children: [
             displayName,
             " approved the connection. Tap below to confirm your payment."
           ] }),
@@ -5157,7 +5159,7 @@ function ConfirmSignScreen({
     }
   );
 }
-var contentStyle9 = {
+var contentStyle8 = {
   flex: 1,
   display: "flex",
   flexDirection: "column",
@@ -5179,7 +5181,7 @@ var headingStyle11 = (color) => ({
   color,
   margin: "20px 0 8px"
 });
-var subtitleStyle8 = (color) => ({
+var subtitleStyle9 = (color) => ({
   fontSize: "0.9rem",
   color,
   margin: "0 0 24px",
@@ -5220,7 +5222,8 @@ function TokenPickerScreen({
   onAuthorizeToken,
   onBack,
   onLogout,
-  depositAmount
+  depositAmount,
+  selectedTokenSymbol
 }) {
   const { tokens: t } = useSwypeConfig();
   const entries = [];
@@ -5249,24 +5252,28 @@ function TokenPickerScreen({
   };
   return /* @__PURE__ */ jsxs(ScreenLayout, { footer: /* @__PURE__ */ jsx(PoweredByFooter, {}), children: [
     /* @__PURE__ */ jsx(ScreenHeader, { onBack, onLogout }),
-    /* @__PURE__ */ jsx("div", { style: mascotWrapStyle, children: /* @__PURE__ */ jsx("img", { src: SWYPE_MASCOT, alt: "Swype", style: mascotImgStyle }) }),
-    depositAmount != null && /* @__PURE__ */ jsxs("div", { style: depositCardStyle2(t), children: [
+    depositAmount != null && /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsx("div", { style: depositLabelStyle2(t.textMuted), children: "Depositing" }),
       /* @__PURE__ */ jsxs("div", { style: depositAmountRowStyle, children: [
         /* @__PURE__ */ jsxs("div", { style: depositAmountStyle(t.text), children: [
           "$",
-          depositAmount.toLocaleString("en-US", { minimumFractionDigits: 0, maximumFractionDigits: 2 })
+          depositAmount.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })
         ] }),
-        /* @__PURE__ */ jsxs("div", { style: tokenIconWrapStyle3, children: [
-          /* @__PURE__ */ jsxs("svg", { width: "32", height: "32", viewBox: "0 0 36 36", fill: "none", children: [
-            /* @__PURE__ */ jsx("circle", { cx: "18", cy: "18", r: "18", fill: "#2DB84B" }),
-            /* @__PURE__ */ jsx("text", { x: "18", y: "23", textAnchor: "middle", fontSize: "18", fill: "#fff", fontWeight: "700", children: "$" })
-          ] }),
-          /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", style: checkBadgeStyle3, children: [
-            /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "8", fill: "#2775CA" }),
-            /* @__PURE__ */ jsx("path", { d: "M5 8l2 2 4-4", stroke: "#fff", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round" })
-          ] })
-        ] })
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: onBack,
+            style: tokenIconButtonStyle3,
+            children: [
+              /* @__PURE__ */ jsx("div", { style: tokenIconWrapStyle3, children: selectedTokenSymbol && TOKEN_LOGOS[selectedTokenSymbol] ? /* @__PURE__ */ jsx("img", { src: TOKEN_LOGOS[selectedTokenSymbol], alt: selectedTokenSymbol, width: 36, height: 36, style: { borderRadius: "50%" } }) : /* @__PURE__ */ jsxs("svg", { width: "36", height: "36", viewBox: "0 0 36 36", fill: "none", children: [
+                /* @__PURE__ */ jsx("circle", { cx: "18", cy: "18", r: "18", fill: "#2DB84B" }),
+                /* @__PURE__ */ jsx("text", { x: "18", y: "23", textAnchor: "middle", fontSize: "18", fill: "#fff", fontWeight: "700", children: "$" })
+              ] }) }),
+              /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", style: { opacity: 0.5 }, children: /* @__PURE__ */ jsx("path", { d: "M6 9l6 6 6-6", stroke: t.textMuted, strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
+            ]
+          }
+        )
       ] })
     ] }),
     /* @__PURE__ */ jsx("div", { style: sectionLabelStyle(t.textMuted), children: "Choose token" }),
@@ -5279,7 +5286,7 @@ function TokenPickerScreen({
           onClick: () => handleSelect(entry),
           style: tokenRowStyle2(t),
           children: [
-            /* @__PURE__ */ jsx("div", { style: tokenIconCircleStyle(t), children: /* @__PURE__ */ jsx("span", { style: tokenIconTextStyle(t.textMuted), children: "$" }) }),
+            /* @__PURE__ */ jsx("div", { style: tokenIconCircleStyle(t, !!TOKEN_LOGOS[entry.tokenSymbol]), children: TOKEN_LOGOS[entry.tokenSymbol] ? /* @__PURE__ */ jsx("img", { src: TOKEN_LOGOS[entry.tokenSymbol], alt: entry.tokenSymbol, style: tokenLogoImgStyle }) : /* @__PURE__ */ jsx("span", { style: tokenIconTextStyle(t.textMuted), children: "$" }) }),
             /* @__PURE__ */ jsxs("div", { style: tokenInfoStyle2, children: [
               /* @__PURE__ */ jsxs("div", { style: tokenNameRowStyle, children: [
                 /* @__PURE__ */ jsx("span", { style: tokenSymbolTextStyle(t.text), children: entry.tokenSymbol }),
@@ -5302,22 +5309,6 @@ function TokenPickerScreen({
     }) })
   ] });
 }
-var mascotWrapStyle = {
-  display: "flex",
-  justifyContent: "center",
-  marginBottom: 16
-};
-var mascotImgStyle = {
-  width: 36,
-  height: 36
-};
-var depositCardStyle2 = (tokens) => ({
-  background: tokens.bgInput,
-  border: `1px solid ${tokens.border}`,
-  borderRadius: tokens.radiusLg,
-  padding: "16px 20px",
-  marginBottom: 24
-});
 var depositLabelStyle2 = (color) => ({
   fontSize: "0.75rem",
   fontWeight: 500,
@@ -5330,22 +5321,27 @@ var depositAmountRowStyle = {
   justifyContent: "space-between"
 };
 var depositAmountStyle = (color) => ({
-  fontSize: "2.2rem",
+  fontSize: "2.4rem",
   fontWeight: 700,
   letterSpacing: "-0.02em",
   color
 });
+var tokenIconButtonStyle3 = {
+  display: "flex",
+  alignItems: "center",
+  gap: 4,
+  background: "transparent",
+  border: "none",
+  cursor: "pointer",
+  padding: 0,
+  flexShrink: 0
+};
 var tokenIconWrapStyle3 = {
   position: "relative",
-  width: 32,
-  height: 32,
+  width: 36,
+  height: 36,
   flexShrink: 0
 };
-var checkBadgeStyle3 = {
-  position: "absolute",
-  bottom: -1,
-  right: -3
-};
 var sectionLabelStyle = (color) => ({
   fontSize: "0.84rem",
   fontWeight: 500,
@@ -5370,16 +5366,23 @@ var tokenRowStyle2 = (tokens) => ({
   textAlign: "left",
   width: "100%"
 });
-var tokenIconCircleStyle = (tokens) => ({
+var tokenIconCircleStyle = (tokens, hasLogo) => ({
   width: 36,
   height: 36,
   borderRadius: "50%",
-  border: `1.5px solid ${tokens.border}`,
+  border: hasLogo ? "none" : `1.5px solid ${tokens.border}`,
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
-  flexShrink: 0
+  flexShrink: 0,
+  overflow: "hidden"
 });
+var tokenLogoImgStyle = {
+  width: 36,
+  height: 36,
+  borderRadius: "50%",
+  objectFit: "cover"
+};
 var tokenIconTextStyle = (color) => ({
   fontSize: "1rem",
   fontWeight: 700,
@@ -5643,7 +5646,8 @@ function StepRendererContent({
         onAdvanced: handlers.onSelectToken,
         selectedSourceLabel: effectiveSourceLabel,
         loading: savingOneTapLimit,
-        error: state.error
+        error: state.error,
+        selectedTokenSymbol: selectedSource?.token.symbol
       }
     );
   }
@@ -5687,7 +5691,8 @@ function StepRendererContent({
         onAuthorizeAccount: handlers.onContinueConnection,
         onAddProvider: () => handlers.onNavigate("wallet-picker"),
         onSelectToken: handlers.onSelectToken,
-        selectedSourceLabel
+        selectedSourceLabel,
+        selectedTokenSymbol: selectedSource?.token.symbol
       }
     );
   }
@@ -5704,7 +5709,8 @@ function StepRendererContent({
         onAuthorizeToken: handlers.onAuthorizeToken,
         onBack: () => handlers.onNavigate(state.previousStep === "setup" ? "setup" : "deposit"),
         onLogout: handlers.onLogout,
-        depositAmount: depositAmount ?? void 0
+        depositAmount: depositAmount ?? void 0,
+        selectedTokenSymbol: selectedSource?.token.symbol
       }
     );
   }
@@ -5781,7 +5787,8 @@ function StepRendererContent({
         onSelectAccount: handlers.onSelectAccount,
         onAuthorizeAccount: handlers.onContinueConnection,
         onAddProvider: () => handlers.onNavigate("wallet-picker"),
-        selectedSourceLabel
+        selectedSourceLabel,
+        selectedTokenSymbol: selectedSource?.token.symbol
       }
     );
   }