@swype-org/react-sdk 0.1.35 → 0.1.38

package/dist/index.js

@@ -2,6 +2,7 @@ import { createContext, useRef, useState, useCallback, useMemo, useContext, useE
 import { PrivyProvider, usePrivy, useLoginWithEmail, useLoginWithSms, useLoginWithOAuth } from '@privy-io/react-auth';
 import { createConfig, http, WagmiProvider, useConfig, useConnect, useSwitchChain } from 'wagmi';
 import { mainnet, arbitrum, base } from 'wagmi/chains';
+import { injected } from 'wagmi/connectors';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { recoverTypedDataAddress, decodeAbiParameters, walletActions, createClient, custom } from 'viem';
@@ -74,6 +75,7 @@ function getTheme(mode) {
 var SWYPE_PRIVY_APP_ID = "cmlil87uv004n0ck0blwumwek";
 var wagmiConfig = createConfig({
   chains: [mainnet, arbitrum, base],
+  connectors: [injected()],
   transports: {
     [mainnet.id]: http(),
     [arbitrum.id]: http(),
@@ -1778,10 +1780,12 @@ function OtpInput({ value, onChange, length = 6, disabled }) {
 var containerStyle5 = {
   display: "flex",
   gap: 8,
-  justifyContent: "center"
+  justifyContent: "center",
+  width: "100%"
 };
 var inputStyle = (tokens, filled) => ({
   width: 44,
+  maxWidth: "calc((100% - 40px) / 6)",
   height: 52,
   borderRadius: 12,
   border: `1.5px solid ${filled ? tokens.borderFocus : tokens.border}`,
@@ -1793,7 +1797,8 @@ var inputStyle = (tokens, filled) => ({
   textAlign: "center",
   outline: "none",
   caretColor: tokens.borderFocus,
-  transition: "border-color 0.15s ease"
+  transition: "border-color 0.15s ease",
+  flexShrink: 0
 });
 function LimitSlider({
   value,
@@ -1912,11 +1917,61 @@ var sliderThumbCss = (accent) => `
     cursor: pointer;
   }
 `;
+
+// src/assets/logos.ts
+function svgToDataUri(svg) {
+  return `data:image/svg+xml,${encodeURIComponent(svg)}`;
+}
+var BASE_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 111 111" fill="none">
+<path d="M54.921 110.034C85.359 110.034 110.034 85.402 110.034 55.017C110.034 24.6319 85.359 0 54.921 0C26.0432 0 2.35281 22.1714 0 50.3923H72.8467V59.6416H0C2.35281 87.8625 26.0432 110.034 54.921 110.034Z" fill="#0052FF"/>
+</svg>`;
+var METAMASK_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 318.6 318.6">
+<polygon fill="#E2761B" stroke="#E2761B" stroke-linecap="round" stroke-linejoin="round" points="274.1,35.5 174.6,109.4 193,65.8"/>
+<polygon fill="#E4761B" stroke="#E4761B" stroke-linecap="round" stroke-linejoin="round" points="44.4,35.5 143.1,110.1 125.6,65.8"/>
+<polygon fill="#D7C1B3" stroke="#D7C1B3" stroke-linecap="round" stroke-linejoin="round" points="238.3,206.8 211.8,247.4 268.5,263.2 285.8,207.7"/>
+<polygon fill="#D7C1B3" stroke="#D7C1B3" stroke-linecap="round" stroke-linejoin="round" points="33.9,207.7 51.1,263.2 107.8,247.4 81.3,206.8"/>
+<polygon fill="#233447" stroke="#233447" stroke-linecap="round" stroke-linejoin="round" points="103.6,138.2 87.8,162.1 143.1,164.6 141.1,104.1"/>
+<polygon fill="#233447" stroke="#233447" stroke-linecap="round" stroke-linejoin="round" points="214.9,138.2 175.9,103.4 174.6,164.6 230.8,162.1"/>
+<polygon fill="#CD6116" stroke="#CD6116" stroke-linecap="round" stroke-linejoin="round" points="107.8,247.4 140.6,230.9 111.4,208.1"/>
+<polygon fill="#CD6116" stroke="#CD6116" stroke-linecap="round" stroke-linejoin="round" points="177.9,230.9 211.8,247.4 207.1,208.1"/>
+<polygon fill="#E4761B" stroke="#E4761B" stroke-linecap="round" stroke-linejoin="round" points="211.8,247.4 177.9,230.9 180.6,253 180.3,262.3"/>
+<polygon fill="#E4761B" stroke="#E4761B" stroke-linecap="round" stroke-linejoin="round" points="107.8,247.4 138.3,262.3 138.1,253 140.6,230.9"/>
+<polygon fill="#763D16" stroke="#763D16" stroke-linecap="round" stroke-linejoin="round" points="138.8,193.5 110.6,185.2 130.5,176.1"/>
+<polygon fill="#763D16" stroke="#763D16" stroke-linecap="round" stroke-linejoin="round" points="179.7,193.5 188,176.1 208,185.2"/>
+<polygon fill="#F6851B" stroke="#F6851B" stroke-linecap="round" stroke-linejoin="round" points="107.8,247.4 111.6,206.8 81.3,207.7"/>
+<polygon fill="#F6851B" stroke="#F6851B" stroke-linecap="round" stroke-linejoin="round" points="207,206.8 211.8,247.4 238.3,207.7"/>
+<polygon fill="#F6851B" stroke="#F6851B" stroke-linecap="round" stroke-linejoin="round" points="230.8,162.1 174.6,164.6 179.8,193.5 188.1,176.1 208.1,185.2"/>
+<polygon fill="#F6851B" stroke="#F6851B" stroke-linecap="round" stroke-linejoin="round" points="110.6,185.2 130.6,176.1 138.8,193.5 143.1,164.6 87.8,162.1"/>
+<polygon fill="#E4751F" stroke="#E4751F" stroke-linecap="round" stroke-linejoin="round" points="87.8,162.1 111.4,208.1 110.6,185.2"/>
+<polygon fill="#E4751F" stroke="#E4751F" stroke-linecap="round" stroke-linejoin="round" points="208.1,185.2 207.1,208.1 230.8,162.1"/>
+<polygon fill="#E4751F" stroke="#E4751F" stroke-linecap="round" stroke-linejoin="round" points="143.1,164.6 138.8,193.5 144.1,218.9 145.3,182.8"/>
+<polygon fill="#E4751F" stroke="#E4751F" stroke-linecap="round" stroke-linejoin="round" points="174.6,164.6 173.1,182.6 174.4,218.9 179.8,193.5"/>
+<polygon fill="#F6851B" stroke="#F6851B" stroke-linecap="round" stroke-linejoin="round" points="179.8,193.5 174.4,218.9 177.9,230.9 207.1,208.1 208.1,185.2"/>
+<polygon fill="#F6851B" stroke="#F6851B" stroke-linecap="round" stroke-linejoin="round" points="110.6,185.2 111.4,208.1 140.6,230.9 144.1,218.9 138.8,193.5"/>
+<polygon fill="#C0AD9E" stroke="#C0AD9E" stroke-linecap="round" stroke-linejoin="round" points="180.3,262.3 180.6,253 178.1,250.8 140.4,250.8 138.1,253 138.3,262.3 107.8,247.4 117.8,255.1 140.1,271.9 178.4,271.9 200.8,255.1 211.8,247.4"/>
+<polygon fill="#161616" stroke="#161616" stroke-linecap="round" stroke-linejoin="round" points="177.9,230.9 174.4,218.9 178.1,250.8 180.6,253"/>
+<polygon fill="#161616" stroke="#161616" stroke-linecap="round" stroke-linejoin="round" points="140.6,230.9 138.1,253 140.4,250.8 144.1,218.9"/>
+<polygon fill="#763D16" stroke="#763D16" stroke-linecap="round" stroke-linejoin="round" points="278.3,114.2 286.8,73.7 274.1,35.5 174.6,109.4 214.9,138.2 267.2,153.5 278.8,140 273.8,136.4 281.8,129.1 275.4,124.1 283.4,118"/>
+<polygon fill="#763D16" stroke="#763D16" stroke-linecap="round" stroke-linejoin="round" points="31.8,73.7 40.3,114.2 35.5,118 43.5,124.1 36.8,129.1 44.8,136.4 39.8,140 51.3,153.5 103.6,138.2 143.1,110.1 44.4,35.5"/>
+</svg>`;
+var BASE_LOGO = svgToDataUri(BASE_SVG);
+var METAMASK_LOGO = svgToDataUri(METAMASK_SVG);
+var KNOWN_LOGOS = {
+  metamask: METAMASK_LOGO,
+  base: BASE_LOGO
+};
 function SourceCard({ name, address, verified, onChangeSource }) {
   const { tokens } = useSwypeConfig();
   return /* @__PURE__ */ jsxs("div", { style: containerStyle6(tokens), children: [
     /* @__PURE__ */ jsxs("div", { style: leftStyle, children: [
-      /* @__PURE__ */ jsx("div", { style: iconStyle3(tokens.textMuted), children: /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
+      KNOWN_LOGOS[name.toLowerCase()] ? /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: KNOWN_LOGOS[name.toLowerCase()],
+          alt: name,
+          style: logoImgStyle
+        }
+      ) : /* @__PURE__ */ jsx("div", { style: iconStyle3(tokens.textMuted), children: /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
         "path",
         {
           d: "M21 7H3c-1.1 0-2 .9-2 2v6c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2zm0 8H3V9h18v6z",
@@ -1948,6 +2003,12 @@ var leftStyle = {
   alignItems: "center",
   gap: 10
 };
+var logoImgStyle = {
+  width: 20,
+  height: 20,
+  borderRadius: "50%",
+  objectFit: "contain"
+};
 var iconStyle3 = (color) => ({
   color,
   display: "flex",
@@ -2157,7 +2218,7 @@ function LoginScreen({
         ] }),
         /* @__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, emoji }) => /* @__PURE__ */ jsx("span", { style: walletEmojiStyle, children: emoji }, key)) })
+          /* @__PURE__ */ jsx("div", { style: walletLogosStyle, children: walletIcons.map(({ key, emoji, logo }) => logo ? /* @__PURE__ */ jsx("img", { src: logo, alt: key, style: walletLogoImgStyle }, key) : /* @__PURE__ */ jsx("span", { style: walletEmojiStyle, children: emoji }, key)) })
         ] }),
         /* @__PURE__ */ jsx(PoweredByFooter, {})
       ] }),
@@ -2196,11 +2257,11 @@ function LoginScreen({
   );
 }
 var walletIcons = [
-  { key: "metamask", emoji: "\u{1F98A}" },
+  { key: "metamask", emoji: "\u{1F98A}", logo: KNOWN_LOGOS["metamask"] },
   { key: "rabby", emoji: "\u{1F430}" },
   { key: "phantom", emoji: "\u25C6" },
   { key: "rainbow", emoji: "\u{1F439}" },
-  { key: "coinbase", emoji: "\u{1F535}" }
+  { key: "coinbase", emoji: "\u{1F535}", logo: KNOWN_LOGOS["base"] }
 ];
 function socialLabel(provider) {
   switch (provider) {
@@ -2324,6 +2385,11 @@ var walletEmojiStyle = {
   fontSize: "1.4rem",
   lineHeight: 1
 };
+var walletLogoImgStyle = {
+  width: 24,
+  height: 24,
+  objectFit: "contain"
+};
 var avatarStyle = (tokens) => ({
   width: 28,
   height: 28,
@@ -2381,50 +2447,43 @@ function OtpVerifyScreen({
       });
     }, 1e3);
   }, [cooldown, onResend]);
-  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, {})
+  return /* @__PURE__ */ jsxs(ScreenLayout, { footer: /* @__PURE__ */ jsx(PoweredByFooter, {}), children: [
+    /* @__PURE__ */ jsx(ScreenHeader, { onBack }),
+    /* @__PURE__ */ jsxs("div", { style: contentStyle2, 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 })
       ] }),
-      children: [
-        /* @__PURE__ */ jsx(ScreenHeader, { onBack }),
-        /* @__PURE__ */ jsxs("div", { style: contentStyle2, 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"
-            }
-          )
-        ] })
-      ]
-    }
-  );
+      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: [
+        /* @__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" })
+      ] })
+    ] })
+  ] });
 }
 var contentStyle2 = {
   textAlign: "center",
-  flex: 1,
   display: "flex",
   flexDirection: "column",
   alignItems: "center",
@@ -2467,6 +2526,10 @@ 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",
@@ -2555,18 +2618,24 @@ var skipStyle = (color) => ({
   padding: "12px 0 0"
 });
 var WALLET_EMOJIS = {
-  metamask: "\u{1F98A}",
   rabby: "\u{1F430}",
   ora: "\u2666\uFE0F",
   phantom: "\u{1F47B}"
 };
+function truncateAddress(address) {
+  if (address.length <= 10) return address;
+  return `${address.slice(0, 6)}...${address.slice(-4)}`;
+}
 function WalletPickerScreen({
   providers,
+  pendingConnections,
   onSelectProvider,
+  onContinueConnection,
   onBack
 }) {
   const { tokens } = useSwypeConfig();
   const [hoveredId, setHoveredId] = useState(null);
+  const hasPending = pendingConnections != null && pendingConnections.length > 0;
   const displayProviders = providers.length > 0 ? providers : [
     { id: "metamask", name: "MetaMask" },
     { id: "rabby", name: "Rabby" },
@@ -2582,10 +2651,54 @@ function WalletPickerScreen({
       ] }),
       children: [
         /* @__PURE__ */ jsx(ScreenHeader, { title: "Set up Swype", onBack }),
-        /* @__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" }),
+        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("div", { style: pendingListStyle, children: pendingConnections.map((acct) => {
+            const wallet = acct.wallets[0];
+            const address = wallet ? truncateAddress(wallet.name) : void 0;
+            const isHovered = hoveredId === `pending-${acct.id}`;
+            return /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: () => onContinueConnection?.(acct.id),
+                onMouseEnter: () => setHoveredId(`pending-${acct.id}`),
+                onMouseLeave: () => setHoveredId(null),
+                style: pendingCardStyle(tokens, isHovered),
+                children: [
+                  /* @__PURE__ */ jsxs("div", { style: pendingCardContentStyle, children: [
+                    /* @__PURE__ */ jsx("div", { style: pendingIconStyle, children: KNOWN_LOGOS[acct.name.toLowerCase()] ? /* @__PURE__ */ jsx(
+                      "img",
+                      {
+                        src: KNOWN_LOGOS[acct.name.toLowerCase()],
+                        alt: acct.name,
+                        style: logoImgStyle2
+                      }
+                    ) : /* @__PURE__ */ jsx("span", { style: emojiStyle, children: WALLET_EMOJIS[acct.name.toLowerCase()] ?? acct.name.charAt(0) }) }),
+                    /* @__PURE__ */ jsxs("div", { style: pendingInfoStyle, children: [
+                      /* @__PURE__ */ jsx("span", { style: pendingNameStyle(tokens.text), children: acct.name }),
+                      address && /* @__PURE__ */ jsx("span", { style: pendingAddressStyle(tokens.textMuted), children: address })
+                    ] }),
+                    /* @__PURE__ */ jsx("span", { style: pendingBadgeStyle(tokens), children: "Setup incomplete" })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { style: continueRowStyle(tokens), children: [
+                    "Continue setup",
+                    /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z", fill: "currentColor" }) })
+                  ] })
+                ]
+              },
+              acct.id
+            );
+          }) }),
+          /* @__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__ */ jsxs("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 isHovered = hoveredId === p.id;
             return /* @__PURE__ */ jsxs(
@@ -2596,12 +2709,12 @@ function WalletPickerScreen({
                 onMouseLeave: () => setHoveredId(null),
                 style: cardStyle(tokens, isHovered),
                 children: [
-                  "logoURI" in p && p.logoURI ? /* @__PURE__ */ jsx(
+                  logoSrc ? /* @__PURE__ */ jsx(
                     "img",
                     {
-                      src: p.logoURI,
+                      src: logoSrc,
                       alt: p.name,
-                      style: logoImgStyle
+                      style: logoImgStyle2
                     }
                   ) : /* @__PURE__ */ jsx("span", { style: emojiStyle, children: emoji }),
                   /* @__PURE__ */ jsx("span", { style: nameStyle2(tokens.text), children: p.name })
@@ -2670,7 +2783,7 @@ var emojiStyle = {
   fontSize: "1.75rem",
   lineHeight: 1
 };
-var logoImgStyle = {
+var logoImgStyle2 = {
   width: 32,
   height: 32,
   borderRadius: 8,
@@ -2687,6 +2800,86 @@ var hintStyle2 = (color) => ({
   color,
   margin: "0 0 4px"
 });
+var pendingListStyle = {
+  display: "flex",
+  flexDirection: "column",
+  gap: 10,
+  marginBottom: 20
+};
+var pendingCardStyle = (tokens, hovered) => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: 0,
+  padding: 0,
+  background: hovered ? tokens.bgHover : tokens.bgInput,
+  border: `1.5px solid ${tokens.warning}44`,
+  borderRadius: 16,
+  cursor: "pointer",
+  fontFamily: "inherit",
+  transition: "background 0.15s ease",
+  outline: "none",
+  overflow: "hidden",
+  textAlign: "left"
+});
+var pendingCardContentStyle = {
+  display: "flex",
+  alignItems: "center",
+  gap: 12,
+  padding: "14px 16px"
+};
+var pendingIconStyle = {
+  flexShrink: 0
+};
+var pendingInfoStyle = {
+  display: "flex",
+  flexDirection: "column",
+  gap: 2,
+  flex: 1,
+  minWidth: 0
+};
+var pendingNameStyle = (color) => ({
+  fontSize: "0.92rem",
+  fontWeight: 600,
+  color
+});
+var pendingAddressStyle = (color) => ({
+  fontSize: "0.78rem",
+  color,
+  fontFamily: "monospace"
+});
+var pendingBadgeStyle = (tokens) => ({
+  fontSize: "0.72rem",
+  fontWeight: 600,
+  color: tokens.warningText ?? tokens.warning,
+  background: tokens.warningBg ?? `${tokens.warning}1a`,
+  padding: "3px 8px",
+  borderRadius: 6,
+  whiteSpace: "nowrap",
+  flexShrink: 0
+});
+var continueRowStyle = (tokens) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: 4,
+  padding: "10px 16px",
+  fontSize: "0.84rem",
+  fontWeight: 600,
+  color: tokens.accent,
+  background: `${tokens.accent}0d`,
+  borderTop: `1px solid ${tokens.accent}22`
+});
+var dividerStyle2 = (borderColor) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: 12,
+  margin: "4px 0 16px"
+});
+var dividerTextStyle = (color) => ({
+  fontSize: "0.82rem",
+  color,
+  whiteSpace: "nowrap"
+});
 var DEFAULT_MAX = 500;
 var ABSOLUTE_MIN = 1;
 function buildTicks(min, max) {
@@ -2733,7 +2926,7 @@ function SetupScreen({
         /* @__PURE__ */ jsx(PoweredByFooter, {})
       ] }),
       children: [
-        /* @__PURE__ */ jsx(ScreenHeader, { title: "Swype Setup", badge: "Simple", onBack, right: /* @__PURE__ */ jsx(SettingsMenu, { onLogout }) }),
+        /* @__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." }),
         error && /* @__PURE__ */ jsx("div", { style: errorBannerStyle3(tokens), children: error }),
@@ -2888,7 +3081,6 @@ function SetupStatusScreen({
   complete,
   limit,
   tokensApproved,
-  currentStepLabel,
   merchantName,
   onContinue,
   onLogout,
@@ -2904,7 +3096,7 @@ function SetupStatusScreen({
     { label: "Done", status: "complete" }
   ] : [
     {
-      label: currentStepLabel ?? "Approving tokens",
+      label: "Setting up Wallet",
       status: "active"
     },
     { label: "Done", status: "pending" }
@@ -2942,7 +3134,7 @@ var contentStyle4 = {
   alignItems: "center",
   justifyContent: "center",
   textAlign: "center",
-  padding: "0 24px"
+  padding: "0 24px 32px"
 };
 var headingStyle6 = (color) => ({
   fontSize: "1.45rem",
@@ -3082,7 +3274,7 @@ function DepositScreen({
         /* @__PURE__ */ jsx(PoweredByFooter, {})
       ] }),
       children: [
-        /* @__PURE__ */ jsx(ScreenHeader, { title: headerTitle, badge: "Simple", onBack, right: /* @__PURE__ */ jsx(SettingsMenu, { onLogout }) }),
+        /* @__PURE__ */ jsx(ScreenHeader, { title: headerTitle, onBack, right: /* @__PURE__ */ jsx(SettingsMenu, { onLogout }) }),
         /* @__PURE__ */ jsx(
           SourceCard,
           {
@@ -3774,6 +3966,7 @@ function SwypePayment({
   const [setupComplete, setSetupComplete] = useState(false);
   const [setupStepLabel, setSetupStepLabel] = useState(void 0);
   const [mobileFlow, setMobileFlow] = useState(false);
+  const [mobileSetupFlow, setMobileSetupFlow] = useState(false);
   const pollingTransferIdRef = useRef(null);
   const mobileSigningTransferIdRef = useRef(null);
   const processingStartedAtRef = useRef(null);
@@ -3786,6 +3979,23 @@ function SwypePayment({
   const transferSigning = useTransferSigning();
   const sourceType = connectingNewAccount ? "providerId" : selectedWalletId ? "walletId" : selectedAccountId ? "accountId" : "providerId";
   const sourceId = connectingNewAccount ? selectedProviderId ?? "" : selectedWalletId ? selectedWalletId : selectedAccountId ? selectedAccountId : selectedProviderId ?? "";
+  const reloadAccounts = useCallback(async () => {
+    const token = await getAccessToken();
+    if (!token || !activeCredentialId) return;
+    const [accts, prov] = await Promise.all([
+      fetchAccounts(apiBaseUrl, token, activeCredentialId),
+      fetchProviders(apiBaseUrl, token)
+    ]);
+    setAccounts(accts);
+    setProviders(prov);
+    const parsedAmt = depositAmount != null ? depositAmount : 0;
+    const defaults = computeSmartDefaults(accts, parsedAmt);
+    if (defaults) {
+      setSelectedAccountId(defaults.accountId);
+      setSelectedWalletId(defaults.walletId);
+      setConnectingNewAccount(false);
+    }
+  }, [getAccessToken, activeCredentialId, apiBaseUrl, depositAmount]);
   useEffect(() => {
     if (depositAmount != null) {
       setAmount(depositAmount.toString());
@@ -3935,7 +4145,10 @@ function SwypePayment({
         } else if (prov.length > 0) {
           setSelectedProviderId(prov[0].id);
         }
-        if (accts.length === 0 && step === "deposit") {
+        const hasActiveWallet = accts.some(
+          (a) => a.wallets.some((w) => w.status === "ACTIVE")
+        );
+        if ((accts.length === 0 || !hasActiveWallet) && step === "deposit") {
           setStep("wallet-picker");
         }
       } catch (err) {
@@ -3994,7 +4207,24 @@ function SwypePayment({
     return () => window.clearTimeout(timeoutId);
   }, [step, polling.transfer, transfer, polling.stopPolling, onError]);
   useEffect(() => {
-    if (!mobileFlow) return;
+    if (!mobileSetupFlow) return;
+    const polledTransfer = polling.transfer;
+    if (!polledTransfer) return;
+    if (polledTransfer.status !== "AUTHORIZED" && polledTransfer.status !== "COMPLETED") return;
+    polling.stopPolling();
+    setMobileFlow(false);
+    setMobileSetupFlow(false);
+    const finishSetup = async () => {
+      try {
+        await reloadAccounts();
+      } catch {
+      }
+      setStep("deposit");
+    };
+    void finishSetup();
+  }, [mobileSetupFlow, polling, reloadAccounts]);
+  useEffect(() => {
+    if (!mobileFlow || mobileSetupFlow) return;
     const polledTransfer = polling.transfer;
     if (!polledTransfer || polledTransfer.status !== "AUTHORIZED") return;
     if (transferSigning.signing) return;
@@ -4012,7 +4242,7 @@ function SwypePayment({
       }
     };
     void sign();
-  }, [mobileFlow, polling.transfer, transferSigning, onError]);
+  }, [mobileFlow, mobileSetupFlow, polling.transfer, transferSigning, onError]);
   useEffect(() => {
     if (!mobileFlow) return;
     const transferIdToResume = pollingTransferIdRef.current ?? transfer?.id;
@@ -4097,6 +4327,12 @@ function SwypePayment({
     },
     [selectSourceChoices, selectSourceRecommended]
   );
+  const pendingConnections = useMemo(
+    () => accounts.filter(
+      (a) => a.wallets.length > 0 && !a.wallets.some((w) => w.status === "ACTIVE")
+    ),
+    [accounts]
+  );
   const selectedAccount = accounts.find((a) => a.id === selectedAccountId);
   const selectedWallet = selectedAccount?.wallets.find((w) => w.id === selectedWalletId);
   const sourceName = selectedAccount?.name ?? selectedWallet?.chain.name ?? "Wallet";
@@ -4240,7 +4476,10 @@ function SwypePayment({
       await registerPasskey(apiBaseUrl, token, credentialId, publicKey);
       setActiveCredentialId(credentialId);
       window.localStorage.setItem(ACTIVE_CREDENTIAL_STORAGE_KEY, credentialId);
-      if (accounts.length === 0) {
+      const hasActiveWallet = accounts.some(
+        (a) => a.wallets.some((w) => w.status === "ACTIVE")
+      );
+      if (accounts.length === 0 || !hasActiveWallet) {
         setStep("wallet-picker");
       } else {
         setStep("deposit");
@@ -4250,14 +4489,17 @@ function SwypePayment({
     } finally {
       setRegisteringPasskey(false);
     }
-  }, [getAccessToken, user, apiBaseUrl, accounts.length]);
+  }, [getAccessToken, user, apiBaseUrl, accounts]);
   const handleSkipPasskey = useCallback(() => {
-    if (accounts.length === 0) {
+    const hasActiveWallet = accounts.some(
+      (a) => a.wallets.some((w) => w.status === "ACTIVE")
+    );
+    if (accounts.length === 0 || !hasActiveWallet) {
       setStep("wallet-picker");
     } else {
       setStep("deposit");
     }
-  }, [accounts.length]);
+  }, [accounts]);
   const handleSetupOneTap = useCallback(async (limit) => {
     setOneTapLimit(limit);
     setStep("setup-status");
@@ -4270,6 +4512,7 @@ function SwypePayment({
       if (!sourceId) {
         throw new Error("No wallet selected for setup.");
       }
+      await updateUserConfig(apiBaseUrl, token, { defaultAllowance: limit });
       const setupAmount = depositAmount ?? MIN_SEND_AMOUNT_USD;
       const t = await createTransfer(apiBaseUrl, token, {
         id: idempotencyKey,
@@ -4287,11 +4530,16 @@ function SwypePayment({
         });
         if (!shouldUseConnector) {
           setMobileFlow(true);
+          setMobileSetupFlow(true);
+          pollingTransferIdRef.current = t.id;
+          polling.startPolling(t.id);
           window.location.href = t.authorizationSessions[0].uri;
+          return;
         } else {
           await authExecutor.executeSession(t);
         }
       }
+      await reloadAccounts();
       setSetupStepLabel(void 0);
       setSetupComplete(true);
     } catch (err) {
@@ -4310,8 +4558,10 @@ function SwypePayment({
     merchantAuthorization,
     useWalletConnector,
     authExecutor,
+    polling,
     onError,
-    depositAmount
+    depositAmount,
+    reloadAccounts
   ]);
   const handleSelectProvider = useCallback((providerId) => {
     setSelectedProviderId(providerId);
@@ -4319,12 +4569,23 @@ function SwypePayment({
     setConnectingNewAccount(true);
     setStep("setup");
   }, []);
+  const handleContinueConnection = useCallback(
+    (accountId) => {
+      const acct = accounts.find((a) => a.id === accountId);
+      setSelectedAccountId(accountId);
+      setSelectedWalletId(acct?.wallets[0]?.id ?? null);
+      setConnectingNewAccount(false);
+      setStep("setup");
+    },
+    [accounts]
+  );
   const handleNewPayment = useCallback(() => {
     setStep("deposit");
     setTransfer(null);
     setError(null);
     setAmount(depositAmount != null ? depositAmount.toString() : "");
     setMobileFlow(false);
+    setMobileSetupFlow(false);
     processingStartedAtRef.current = null;
     pollingTransferIdRef.current = null;
     mobileSigningTransferIdRef.current = null;
@@ -4357,6 +4618,7 @@ function SwypePayment({
     setConnectingNewAccount(false);
     setAmount(depositAmount != null ? depositAmount.toString() : "");
     setMobileFlow(false);
+    setMobileSetupFlow(false);
     setSetupComplete(false);
     resetHeadlessLogin();
   }, [logout, polling, depositAmount, resetHeadlessLogin]);
@@ -4420,7 +4682,9 @@ function SwypePayment({
       WalletPickerScreen,
       {
         providers,
+        pendingConnections,
         onSelectProvider: handleSelectProvider,
+        onContinueConnection: handleContinueConnection,
         onBack: () => setStep("create-passkey")
       }
     );
@@ -4447,7 +4711,6 @@ function SwypePayment({
         complete: setupComplete,
         limit: oneTapLimit,
         tokensApproved: tokenCount,
-        currentStepLabel: setupStepLabel,
         merchantName,
         onContinue: () => setStep("deposit"),
         onLogout: handleLogout,
@@ -4559,6 +4822,6 @@ function SwypePayment({
   return null;
 }
 
-export { SwypePayment, SwypeProvider, createPasskeyCredential, darkTheme, deviceHasPasskey, findDevicePasskey, getTheme, lightTheme, api_exports as swypeApi, useAuthorizationExecutor, useSwypeConfig, useSwypeDepositAmount, useTransferPolling, useTransferSigning };
+export { IconCircle, OutlineButton, PoweredByFooter, PrimaryButton, ScreenHeader, ScreenLayout, SelectSourceScreen, SettingsMenu, Spinner, StepList, SwypePayment, SwypeProvider, createPasskeyCredential, darkTheme, deviceHasPasskey, findDevicePasskey, getTheme, lightTheme, api_exports as swypeApi, useAuthorizationExecutor, useSwypeConfig, useSwypeDepositAmount, useTransferPolling, useTransferSigning };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map