@swype-org/react-sdk 0.1.182 → 0.1.187

package/dist/index.cjs

@@ -2285,13 +2285,7 @@ function useFlowPhase() {
 function StepProgress({ phase }) {
   const { tokens } = useSwypeConfig();
   if (phase === "deposit") {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: containerStyle3, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { style: dotStyle(tokens.textMuted) }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { style: labelStyle(tokens.textMuted), children: "Link" }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { style: lineStyle(tokens.textMuted) }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { style: dotStyle(tokens.accent) }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { style: labelStyle(tokens.text), children: "Deposit" })
-    ] });
+    return /* @__PURE__ */ jsxRuntime.jsx("img", { src: SWYPE_MASCOT, alt: "Swype", style: mascotStyle });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: containerStyle3, children: [
     /* @__PURE__ */ jsxRuntime.jsx("span", { style: dotStyle(tokens.accent) }),
@@ -2326,16 +2320,102 @@ var labelStyle = (color) => ({
   color,
   whiteSpace: "nowrap"
 });
-function ScreenHeader({ title, right, onBack, badge }) {
+var mascotStyle = {
+  width: 28,
+  height: 28
+};
+function SettingsMenu({ onLogout }) {
+  const { tokens } = useSwypeConfig();
+  const [open, setOpen] = react.useState(false);
+  const menuRef = react.useRef(null);
+  const toggle = react.useCallback(() => setOpen((prev) => !prev), []);
+  react.useEffect(() => {
+    if (!open) return;
+    const handleClickOutside = (e) => {
+      if (menuRef.current && !menuRef.current.contains(e.target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [open]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: menuRef, style: containerStyle4, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: toggle, style: triggerStyle(tokens.text), "aria-label": "Settings", children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "5", r: "2", fill: "currentColor" }),
+      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "2", fill: "currentColor" }),
+      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "19", r: "2", fill: "currentColor" })
+    ] }) }),
+    open && /* @__PURE__ */ jsxRuntime.jsx("div", { style: dropdownStyle(tokens), children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => {
+          setOpen(false);
+          onLogout();
+        },
+        style: menuItemStyle(tokens),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { marginRight: 8, flexShrink: 0 }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4", stroke: tokens.error, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+            /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "16 17 21 12 16 7", stroke: tokens.error, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+            /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "21", y1: "12", x2: "9", y2: "12", stroke: tokens.error, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
+          ] }),
+          "Log out"
+        ]
+      }
+    ) })
+  ] });
+}
+var containerStyle4 = {
+  position: "relative"
+};
+var triggerStyle = (color) => ({
+  background: "transparent",
+  border: "none",
+  cursor: "pointer",
+  padding: 4,
+  color,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center"
+});
+var dropdownStyle = (tokens) => ({
+  position: "absolute",
+  right: 0,
+  top: "100%",
+  marginTop: 4,
+  minWidth: 140,
+  background: tokens.bgCard,
+  border: `1px solid ${tokens.border}`,
+  borderRadius: 12,
+  boxShadow: tokens.shadow,
+  zIndex: 100,
+  overflow: "hidden"
+});
+var menuItemStyle = (tokens) => ({
+  width: "100%",
+  display: "flex",
+  alignItems: "center",
+  padding: "12px 16px",
+  background: "transparent",
+  border: "none",
+  cursor: "pointer",
+  fontFamily: "inherit",
+  fontSize: "0.85rem",
+  fontWeight: 500,
+  color: tokens.error
+});
+function ScreenHeader({ title, right, onBack, badge, onLogout }) {
   const { tokens } = useSwypeConfig();
   const flowPhase = useFlowPhase();
+  const rightContent = onLogout ? /* @__PURE__ */ jsxRuntime.jsx(SettingsMenu, { onLogout }) : right;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: headerStyle, children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { style: leftSlotStyle, children: onBack && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: onBack, style: backButtonStyle(tokens.text), "aria-label": "Go back", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15 18l-6-6 6-6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }) }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { style: centerSlotStyle, children: flowPhase ? /* @__PURE__ */ jsxRuntime.jsx(StepProgress, { phase: flowPhase }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       title && /* @__PURE__ */ jsxRuntime.jsx("span", { style: titleStyle(tokens.text), children: title }),
       badge && /* @__PURE__ */ jsxRuntime.jsx("span", { style: badgeStyle(tokens.textMuted), children: badge })
     ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { style: rightSlotStyle, children: right })
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: rightSlotStyle, children: rightContent })
   ] });
 }
 var headerStyle = {
@@ -2376,7 +2456,7 @@ var badgeStyle = (color) => ({
 });
 function PoweredByFooter() {
   const { tokens } = useSwypeConfig();
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: containerStyle4(tokens.textMuted), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: containerStyle5(tokens.textMuted), children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: rowStyle, children: [
       /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
         "path",
@@ -2390,7 +2470,7 @@ function PoweredByFooter() {
     /* @__PURE__ */ jsxRuntime.jsx("span", { style: pillStyle(tokens.textMuted, tokens.border), children: "Beta Version" })
   ] });
 }
-var containerStyle4 = (color) => ({
+var containerStyle5 = (color) => ({
   display: "flex",
   flexDirection: "column",
   alignItems: "center",
@@ -2489,12 +2569,12 @@ var defaultIcon = /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "18", height: "
 ) });
 function InfoBanner({ children, icon }) {
   const { tokens } = useSwypeConfig();
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: containerStyle5(tokens.accent), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: containerStyle6(tokens.accent), children: [
     /* @__PURE__ */ jsxRuntime.jsx("span", { style: iconStyle, children: icon ?? defaultIcon }),
     /* @__PURE__ */ jsxRuntime.jsx("span", { style: textStyle, children })
   ] });
 }
-var containerStyle5 = (accent) => ({
+var containerStyle6 = (accent) => ({
   display: "flex",
   alignItems: "flex-start",
   gap: 10,
@@ -2512,7 +2592,7 @@ var iconStyle = {
 };
 var textStyle = { flex: 1 };
 function WarningBanner({ title, children }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: containerStyle6, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: containerStyle7, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: headerStyle2, children: [
       /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", style: iconStyle2, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z", fill: "#F57C00" }) }),
       /* @__PURE__ */ jsxRuntime.jsx("strong", { children: title })
@@ -2520,7 +2600,7 @@ function WarningBanner({ title, children }) {
     /* @__PURE__ */ jsxRuntime.jsx("div", { style: bodyStyle2, children })
   ] });
 }
-var containerStyle6 = {
+var containerStyle7 = {
   padding: "14px 16px",
   background: "#FFF8E1",
   border: "1px solid #FFE082",
@@ -2599,7 +2679,7 @@ function OtpInput({ value, onChange, length = 6, disabled }) {
     onChange(pasted);
     focusInput(Math.min(pasted.length, length - 1));
   }, [onChange, length, focusInput]);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: containerStyle7, children: digits.map((digit, i) => /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: containerStyle8, children: digits.map((digit, i) => /* @__PURE__ */ jsxRuntime.jsx(
     "input",
     {
       ref: (el) => {
@@ -2620,7 +2700,7 @@ function OtpInput({ value, onChange, length = 6, disabled }) {
     i
   )) });
 }
-var containerStyle7 = {
+var containerStyle8 = {
   display: "flex",
   gap: 8,
   justifyContent: "center",
@@ -2729,7 +2809,7 @@ function SourceCard({
         }
       )
     ] }),
-    open && hasDropdown && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: dropdownStyle(tokens), children: [
+    open && hasDropdown && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: dropdownStyle2(tokens), children: [
       accounts.map((account) => {
         const preferredWallet = getPreferredDepositWallet(account, depositAmount ?? 0);
         const active = hasActiveDepositWallet(account);
@@ -2850,7 +2930,7 @@ var changeStyle = (color) => ({
   fontFamily: "inherit",
   padding: 0
 });
-var dropdownStyle = (tokens) => ({
+var dropdownStyle2 = (tokens) => ({
   position: "absolute",
   top: "100%",
   left: 0,
@@ -3003,11 +3083,11 @@ function StepList({ steps }) {
       /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
-          style: badgeStyle2(
-            isComplete ? tokens.accent : isActive ? tokens.accent : tokens.border,
-            isComplete || isActive
+          style: isActive ? activeBadgeContainerStyle : badgeStyle2(
+            isComplete ? tokens.accent : tokens.border,
+            isComplete
           ),
-          children: isComplete ? /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z", fill: "#fff" }) }) : /* @__PURE__ */ jsxRuntime.jsx("span", { style: badgeNumberStyle(isActive), children: i + 1 })
+          children: isComplete ? /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z", fill: "#fff" }) }) : isActive ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: activeDotStyle(tokens.accent) }) : /* @__PURE__ */ jsxRuntime.jsx("span", { style: badgeNumberStyle, children: i + 1 })
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { style: labelContainerStyle, children: [
@@ -3038,11 +3118,26 @@ var badgeStyle2 = (color, filled) => ({
   justifyContent: "center",
   flexShrink: 0
 });
-var badgeNumberStyle = (active) => ({
+var activeBadgeContainerStyle = {
+  width: 28,
+  height: 28,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  flexShrink: 0
+};
+var activeDotStyle = (color) => ({
+  width: 8,
+  height: 8,
+  borderRadius: "50%",
+  backgroundColor: color,
+  display: "block"
+});
+var badgeNumberStyle = {
   fontSize: "0.75rem",
   fontWeight: 600,
-  color: active ? "#fff" : "inherit"
-});
+  color: "inherit"
+};
 var labelContainerStyle = {
   display: "flex",
   flexDirection: "column"
@@ -3056,87 +3151,6 @@ var detailStyle = (color) => ({
   fontSize: "0.75rem",
   color
 });
-function SettingsMenu({ onLogout }) {
-  const { tokens } = useSwypeConfig();
-  const [open, setOpen] = react.useState(false);
-  const menuRef = react.useRef(null);
-  const toggle = react.useCallback(() => setOpen((prev) => !prev), []);
-  react.useEffect(() => {
-    if (!open) return;
-    const handleClickOutside = (e) => {
-      if (menuRef.current && !menuRef.current.contains(e.target)) {
-        setOpen(false);
-      }
-    };
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, [open]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: menuRef, style: containerStyle8, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: toggle, style: triggerStyle(tokens.text), "aria-label": "Settings", children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "5", r: "2", fill: "currentColor" }),
-      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "2", fill: "currentColor" }),
-      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "19", r: "2", fill: "currentColor" })
-    ] }) }),
-    open && /* @__PURE__ */ jsxRuntime.jsx("div", { style: dropdownStyle2(tokens), children: /* @__PURE__ */ jsxRuntime.jsxs(
-      "button",
-      {
-        type: "button",
-        onClick: () => {
-          setOpen(false);
-          onLogout();
-        },
-        style: menuItemStyle(tokens),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { marginRight: 8, flexShrink: 0 }, children: [
-            /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4", stroke: tokens.error, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
-            /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "16 17 21 12 16 7", stroke: tokens.error, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
-            /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "21", y1: "12", x2: "9", y2: "12", stroke: tokens.error, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
-          ] }),
-          "Log out"
-        ]
-      }
-    ) })
-  ] });
-}
-var containerStyle8 = {
-  position: "relative"
-};
-var triggerStyle = (color) => ({
-  background: "transparent",
-  border: "none",
-  cursor: "pointer",
-  padding: 4,
-  color,
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center"
-});
-var dropdownStyle2 = (tokens) => ({
-  position: "absolute",
-  right: 0,
-  top: "100%",
-  marginTop: 4,
-  minWidth: 140,
-  background: tokens.bgCard,
-  border: `1px solid ${tokens.border}`,
-  borderRadius: 12,
-  boxShadow: tokens.shadow,
-  zIndex: 100,
-  overflow: "hidden"
-});
-var menuItemStyle = (tokens) => ({
-  width: "100%",
-  display: "flex",
-  alignItems: "center",
-  padding: "12px 16px",
-  background: "transparent",
-  border: "none",
-  cursor: "pointer",
-  fontFamily: "inherit",
-  fontSize: "0.85rem",
-  fontWeight: 500,
-  color: tokens.error
-});
 function LoginScreen({
   authInput,
   onAuthInputChange,
@@ -3428,6 +3442,7 @@ var resendStyle = (color, disabled) => ({
 function PasskeyScreen({
   onCreatePasskey,
   onBack,
+  onLogout,
   creating,
   error,
   popupFallback = false,
@@ -3444,7 +3459,7 @@ function PasskeyScreen({
         /* @__PURE__ */ jsxRuntime.jsx(PoweredByFooter, {})
       ] }),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { onBack }),
+        /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { onBack, onLogout }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle4, children: [
           /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle3(tokens.text), children: "Secure your account with a passkey" }),
           error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: errorBannerStyle2(tokens), children: error })
@@ -3534,7 +3549,8 @@ function WalletPickerScreen({
   onPrepareProvider,
   onSelectProvider,
   onContinueConnection,
-  onBack
+  onBack,
+  onLogout
 }) {
   const { tokens } = useSwypeConfig();
   const [hoveredId, setHoveredId] = react.useState(null);
@@ -3571,7 +3587,7 @@ function WalletPickerScreen({
   const selectedProvider = displayProviders.find((p) => p.id === selectedProviderId);
   if (loading) {
     return /* @__PURE__ */ jsxRuntime.jsxs(ScreenLayout, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { title: "Set up Swype", onBack }),
+      /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { title: "Set up Swype", onBack, onLogout }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { style: { textAlign: "center", padding: "48px 0", flex: 1, display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsxRuntime.jsx(Spinner, { label: "Connecting..." }) })
     ] });
   }
@@ -3601,7 +3617,7 @@ function WalletPickerScreen({
         /* @__PURE__ */ jsxRuntime.jsx(PoweredByFooter, {})
       ] }),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { title: "Set up Swype", onBack }),
+        /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { title: "Set up Swype", onBack, onLogout }),
         hasPending && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle4(tokens.text), children: "Continue where you left off" }),
           /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle2(tokens.textSecondary), children: "You have a wallet that still needs setup" }),
@@ -3869,6 +3885,7 @@ function SetupScreen({
   availableBalance,
   onSetupOneTap,
   onBack,
+  onLogout,
   onAdvanced,
   loading,
   error
@@ -3877,12 +3894,14 @@ function SetupScreen({
   const effectiveMax = DEFAULT_MAX;
   const effectiveMin = Math.min(ABSOLUTE_MIN, effectiveMax);
   const [limit, setLimit] = react.useState(() => Math.min(availableBalance, effectiveMax));
+  const [activePreset, setActivePreset] = react.useState(null);
   const [editing, setEditing] = react.useState(false);
   const [inputValue, setInputValue] = react.useState("");
   const inputRef = react.useRef(null);
   const startEditing = react.useCallback(() => {
     setInputValue(limit.toFixed(2));
     setEditing(true);
+    setActivePreset(null);
     requestAnimationFrame(() => inputRef.current?.focus());
   }, [limit]);
   const commitEdit = react.useCallback(() => {
@@ -3890,16 +3909,17 @@ function SetupScreen({
     if (!isNaN(parsed)) {
       setLimit(Math.min(effectiveMax, Math.max(effectiveMin, Math.round(parsed * 100) / 100)));
     }
+    setActivePreset(null);
     setEditing(false);
   }, [inputValue, effectiveMax, effectiveMin]);
   const selectPreset = (value) => {
     setLimit(Math.min(value, effectiveMax));
+    setActivePreset(value);
   };
   const selectMax = () => {
     setLimit(Math.min(availableBalance, effectiveMax));
+    setActivePreset("max");
   };
-  const isPresetActive = (value) => Math.abs(limit - value) < 5e-3;
-  const isMaxActive = Math.abs(limit - Math.min(availableBalance, effectiveMax)) < 5e-3 && !PRESETS.some((p) => isPresetActive(p));
   return /* @__PURE__ */ jsxRuntime.jsxs(
     ScreenLayout,
     {
@@ -3916,7 +3936,7 @@ function SetupScreen({
         /* @__PURE__ */ jsxRuntime.jsx(PoweredByFooter, {})
       ] }),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { onBack }),
+        /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { onBack, onLogout }),
         /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle5(tokens.text), children: "Set Spending Limit" }),
         error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: errorBannerStyle3(tokens), children: error }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { style: amountRowStyle, children: [
@@ -3977,7 +3997,7 @@ function SetupScreen({
             {
               type: "button",
               onClick: () => selectPreset(value),
-              style: presetButtonStyle(tokens, isPresetActive(value)),
+              style: presetButtonStyle(tokens, activePreset === value),
               children: [
                 "$",
                 value.toLocaleString()
@@ -3990,7 +4010,7 @@ function SetupScreen({
             {
               type: "button",
               onClick: selectMax,
-              style: presetButtonStyle(tokens, isMaxActive),
+              style: presetButtonStyle(tokens, activePreset === "max"),
               children: "Max"
             }
           )
@@ -4104,7 +4124,7 @@ function SetupStatusScreen({
     return /* @__PURE__ */ jsxRuntime.jsxs(ScreenLayout, { footer: /* @__PURE__ */ jsxRuntime.jsx(PoweredByFooter, {}), children: [
       /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { onBack: onContinue }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle5, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("img", { src: SWYPE_MASCOT, alt: "Swype", style: mascotStyle }),
+        /* @__PURE__ */ jsxRuntime.jsx("img", { src: SWYPE_MASCOT, alt: "Swype", style: mascotStyle2 }),
         /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle6(tokens.text), children: "Done!" }),
         /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle3(tokens.textSecondary), children: "Return to the app to try one-tap deposits." })
       ] })
@@ -4115,7 +4135,7 @@ function SetupStatusScreen({
     { label: "Done", status: "pending" }
   ];
   return /* @__PURE__ */ jsxRuntime.jsxs(ScreenLayout, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { right: /* @__PURE__ */ jsxRuntime.jsx(SettingsMenu, { onLogout }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { onLogout }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle5, children: [
       /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 48 }),
       /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle6(tokens.text), children: "Setting up One-Tap..." }),
@@ -4134,7 +4154,7 @@ var contentStyle5 = {
   textAlign: "center",
   padding: "0 24px 32px"
 };
-var mascotStyle = {
+var mascotStyle2 = {
   width: 56,
   height: 56
 };
@@ -4204,7 +4224,7 @@ function DepositScreen({
   const { tokens } = useSwypeConfig();
   const amount = initialAmount;
   const isLowBalance = availableBalance < MIN_DEPOSIT;
-  const exceedsLimit = amount > remainingLimit && !isLowBalance;
+  const exceedsLimit = remainingLimit != null && amount > remainingLimit && !isLowBalance;
   const canDeposit = amount >= MIN_DEPOSIT && !exceedsLimit && !isLowBalance && !processing;
   const headerTitle = merchantName ? `Deposit to ${merchantName}` : "Deposit";
   if (isLowBalance) {
@@ -4218,7 +4238,7 @@ function DepositScreen({
           /* @__PURE__ */ jsxRuntime.jsx(PoweredByFooter, {})
         ] }),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { title: headerTitle, onBack, right: /* @__PURE__ */ jsxRuntime.jsx(SettingsMenu, { onLogout }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { title: headerTitle, onBack, onLogout }),
           /* @__PURE__ */ jsxRuntime.jsx(
             SourceCard,
             {
@@ -4275,7 +4295,7 @@ function DepositScreen({
             "Your deposit of $",
             amount.toFixed(2),
             " exceeds your One-Tap limit of $",
-            remainingLimit.toFixed(2),
+            remainingLimit?.toFixed(2) ?? "0.00",
             ". Increase your limit to continue."
           ] })
         ] }) : /* @__PURE__ */ jsxRuntime.jsx(PrimaryButton, { onClick: () => onDeposit(amount), disabled: !canDeposit, loading: processing, children: "Confirm" }),
@@ -4283,7 +4303,20 @@ function DepositScreen({
       ] }),
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { onBack }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: mascotWrapStyle, children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: SWYPE_MASCOT, alt: "Swype", style: mascotStyle2 }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          SourceCard,
+          {
+            name: sourceName,
+            address: sourceAddress,
+            verified: sourceVerified,
+            accounts,
+            selectedAccountId,
+            depositAmount: amount,
+            onSelectAccount,
+            onAuthorizeAccount,
+            onAddProvider
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { style: depositCardStyle(tokens), children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { style: depositLabelStyle(tokens.textMuted), children: "Depositing" }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { style: amountRowStyle2, children: [
@@ -4322,7 +4355,7 @@ function DepositScreen({
             /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", style: { opacity: 0.4 }, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7 10l5-5 5 5M7 14l5 5 5-5", stroke: tokens.textMuted, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: spendingLimitStyle(tokens.textMuted), children: [
+        remainingLimit != null && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: spendingLimitStyle(tokens.textMuted), children: [
           "Spending Limit",
           " ",
           /* @__PURE__ */ jsxRuntime.jsxs("strong", { style: { color: tokens.text }, children: [
@@ -4335,15 +4368,6 @@ function DepositScreen({
     }
   );
 }
-var mascotWrapStyle = {
-  display: "flex",
-  justifyContent: "center",
-  marginBottom: 16
-};
-var mascotStyle2 = {
-  width: 36,
-  height: 36
-};
 var depositCardStyle = (tokens) => ({
   background: tokens.bgInput,
   border: `1px solid ${tokens.border}`,
@@ -4535,12 +4559,7 @@ function SuccessScreen({
         /* @__PURE__ */ jsxRuntime.jsx(PoweredByFooter, {})
       ] }),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ScreenHeader,
-          {
-            right: /* @__PURE__ */ jsxRuntime.jsx(SettingsMenu, { onLogout })
-          }
-        ),
+        /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { onLogout }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle6, children: [
           succeeded ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(IconCircle, { variant: "success", size: 64, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z", fill: tokens.success }) }) }),
@@ -4707,7 +4726,7 @@ function SelectSourceScreen({
           {
             title: "Select Source",
             onBack,
-            right: /* @__PURE__ */ jsxRuntime.jsx(SettingsMenu, { onLogout })
+            onLogout
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle5(tokens.textMuted), children: "Choose which chain and token to pay from." }),
@@ -5074,12 +5093,13 @@ function buildSteps(phase) {
 }
 function TransferStatusScreen({
   phase,
-  error
+  error,
+  onLogout
 }) {
   const { tokens } = useSwypeConfig();
   const steps = buildSteps(phase);
   return /* @__PURE__ */ jsxRuntime.jsxs(ScreenLayout, { footer: /* @__PURE__ */ jsxRuntime.jsx(PoweredByFooter, {}), children: [
-    /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { onLogout }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle7, children: [
       /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 64 }),
       /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle9(tokens.text), children: "Depositing your money..." }),
@@ -5148,6 +5168,7 @@ function OpenWalletScreen({
   walletName,
   deeplinkUri,
   loading,
+  useDeeplink = true,
   error,
   onRetryStatus,
   onBack,
@@ -5158,16 +5179,44 @@ function OpenWalletScreen({
   const logoSrc = walletName ? KNOWN_LOGOS[walletName.toLowerCase()] : void 0;
   const autoOpenedRef = react.useRef(null);
   react.useEffect(() => {
-    if (loading || !deeplinkUri || autoOpenedRef.current === deeplinkUri) return;
+    if (!useDeeplink || loading || !deeplinkUri || autoOpenedRef.current === deeplinkUri) return;
     autoOpenedRef.current = deeplinkUri;
     triggerDeeplink(deeplinkUri);
-  }, [loading, deeplinkUri]);
+  }, [useDeeplink, loading, deeplinkUri]);
   const handleOpen = react.useCallback(() => {
     const opened = window.open(deeplinkUri, "_blank");
     if (!opened && window === window.parent) {
       window.location.href = deeplinkUri;
     }
   }, [deeplinkUri]);
+  if (!useDeeplink) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      ScreenLayout,
+      {
+        footer: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: footerContentStyle, children: [
+          error && /* @__PURE__ */ jsxRuntime.jsx(InfoBanner, { children: error }),
+          /* @__PURE__ */ jsxRuntime.jsx(PoweredByFooter, {})
+        ] }),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { onLogout }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle8, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { style: logoCircleStyle(tokens.bgInput), children: logoSrc ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: logoSrc, alt: displayName, style: logoStyle2 }) : /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 32 }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("h2", { style: headingStyle10(tokens.text), children: [
+              "Setting up ",
+              displayName,
+              "..."
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle7(tokens.textSecondary), children: "Approve the connection in your wallet extension." }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: waitingBadgeStyle(tokens), children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 14 }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Waiting for authorization..." })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { style: waitHintStyle2(tokens.textMuted), children: "Usually takes a few seconds" })
+          ] })
+        ]
+      }
+    );
+  }
   return /* @__PURE__ */ jsxRuntime.jsxs(
     ScreenLayout,
     {
@@ -5182,7 +5231,7 @@ function OpenWalletScreen({
         /* @__PURE__ */ jsxRuntime.jsx(PoweredByFooter, {})
       ] }),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { onBack, right: /* @__PURE__ */ jsxRuntime.jsx(SettingsMenu, { onLogout }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { onBack, onLogout }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle8, children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { style: logoCircleStyle(tokens.bgInput), children: logoSrc ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: logoSrc, alt: displayName, style: logoStyle2 }) : /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 32 }) }),
           /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle10(tokens.text), children: loading ? "Connecting..." : `Open ${displayName}` }),
@@ -5257,6 +5306,11 @@ var hintStyle = (color) => ({
   color,
   margin: "8px 0 0"
 });
+var waitHintStyle2 = (color) => ({
+  fontSize: "0.82rem",
+  color,
+  margin: "16px 0 0"
+});
 function ConfirmSignScreen({
   walletName,
   signing,
@@ -5276,7 +5330,7 @@ function ConfirmSignScreen({
         !error && /* @__PURE__ */ jsxRuntime.jsx("p", { style: hintStyle2(tokens.textMuted), children: "You may be prompted for biometric verification" })
       ] }),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { right: /* @__PURE__ */ jsxRuntime.jsx(SettingsMenu, { onLogout }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { onLogout }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle9, children: [
           logoSrc ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: logoSrc, alt: displayName, style: logoStyle3 }) : /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 48 }),
           /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle11(tokens.text), children: "Wallet authorized" }),
@@ -5355,6 +5409,7 @@ function TokenPickerScreen({
   onSelectAuthorized,
   onAuthorizeToken,
   onBack,
+  onLogout,
   depositAmount
 }) {
   const { tokens: t } = useSwypeConfig();
@@ -5383,8 +5438,8 @@ function TokenPickerScreen({
     }
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(ScreenLayout, { footer: /* @__PURE__ */ jsxRuntime.jsx(PoweredByFooter, {}), children: [
-    /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { onBack }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { style: mascotWrapStyle2, children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: SWYPE_MASCOT, alt: "Swype", style: mascotImgStyle }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { onBack, onLogout }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: mascotWrapStyle, children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: SWYPE_MASCOT, alt: "Swype", style: mascotImgStyle }) }),
     depositAmount != null && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: depositCardStyle2(t), children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { style: depositLabelStyle2(t.textMuted), children: "Depositing" }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { style: depositAmountRowStyle, children: [
@@ -5437,7 +5492,7 @@ function TokenPickerScreen({
     }) })
   ] });
 }
-var mascotWrapStyle2 = {
+var mascotWrapStyle = {
   display: "flex",
   justifyContent: "center",
   marginBottom: 16
@@ -5688,6 +5743,7 @@ function StepRendererContent({
       {
         onCreatePasskey: handlers.onRegisterPasskey,
         onBack: handlers.onLogout,
+        onLogout: handlers.onLogout,
         creating: state.registeringPasskey,
         error: state.error,
         popupFallback: state.passkeyPopupNeeded,
@@ -5701,6 +5757,7 @@ function StepRendererContent({
       {
         onCreatePasskey: handlers.onRegisterPasskey,
         onBack: handlers.onLogout,
+        onLogout: handlers.onLogout,
         creating: state.verifyingPasskeyPopup,
         error: state.error,
         popupFallback: true,
@@ -5721,21 +5778,26 @@ function StepRendererContent({
         onPrepareProvider: handlers.onPrepareProvider,
         onSelectProvider: handlers.onSelectProvider,
         onContinueConnection: handlers.onContinueConnection,
-        onBack: () => handlers.onNavigate(state.activeCredentialId ? "deposit" : "create-passkey")
+        onBack: () => handlers.onNavigate(state.activeCredentialId ? "deposit" : "create-passkey"),
+        onLogout: handlers.onLogout
       }
     );
   }
   if (step === "open-wallet") {
     const providerName = state.providers.find((p) => p.id === state.selectedProviderId)?.name ?? null;
+    const useDeeplink = !shouldUseWalletConnector({
+      userAgent: typeof navigator === "undefined" ? void 0 : navigator.userAgent
+    });
     return /* @__PURE__ */ jsxRuntime.jsx(
       OpenWalletScreen,
       {
         walletName: providerName,
         deeplinkUri: state.deeplinkUri ?? "",
-        loading: state.creatingTransfer || !state.deeplinkUri,
-        error: state.error || pollingError,
-        onRetryStatus: handlers.onRetryMobileStatus,
-        onBack: () => handlers.onNavigate("wallet-picker"),
+        loading: useDeeplink ? state.creatingTransfer || !state.deeplinkUri : state.creatingTransfer,
+        useDeeplink,
+        error: state.error || (useDeeplink ? pollingError : authExecutorError),
+        onRetryStatus: useDeeplink ? handlers.onRetryMobileStatus : void 0,
+        onBack: useDeeplink ? () => handlers.onNavigate("wallet-picker") : void 0,
         onLogout: handlers.onLogout
       }
     );
@@ -5803,7 +5865,7 @@ function StepRendererContent({
         sourceAddress,
         sourceVerified,
         availableBalance: selectedSource ? selectedSource.balance.available.amount : selectedAccount ? selectedAccount.wallets.reduce((sum, w) => sum + w.balance.available.amount, 0) : maxSourceBalance,
-        remainingLimit: selectedSource?.remainingAllowance ?? selectedAccount?.remainingAllowance ?? state.oneTapLimit,
+        remainingLimit: selectedSource?.remainingAllowance ?? selectedAccount?.remainingAllowance ?? null,
         tokenCount,
         initialAmount: parsedAmt,
         processing: state.creatingTransfer,
@@ -5836,6 +5898,7 @@ function StepRendererContent({
         onSelectAuthorized: handlers.onSelectAuthorizedToken,
         onAuthorizeToken: handlers.onAuthorizeToken,
         onBack: () => handlers.onNavigate(state.previousStep === "setup" ? "setup" : "deposit"),
+        onLogout: handlers.onLogout,
         depositAmount: depositAmount ?? void 0
       }
     );
@@ -5883,7 +5946,8 @@ function StepRendererContent({
         merchantName,
         sourceName,
         remainingLimit: succeeded ? (() => {
-          const limit = selectedSource?.remainingAllowance ?? selectedAccount?.remainingAllowance ?? state.oneTapLimit;
+          const limit = selectedSource?.remainingAllowance ?? selectedAccount?.remainingAllowance ?? null;
+          if (limit == null) return null;
           return limit > displayAmount ? limit - displayAmount : 0;
         })() : void 0,
         onDone: onDismiss ?? handlers.onNewPayment,
@@ -5901,7 +5965,7 @@ function StepRendererContent({
         sourceAddress,
         sourceVerified,
         availableBalance: 0,
-        remainingLimit: selectedSource?.remainingAllowance ?? selectedAccount?.remainingAllowance ?? state.oneTapLimit,
+        remainingLimit: selectedSource?.remainingAllowance ?? selectedAccount?.remainingAllowance ?? null,
         tokenCount,
         initialAmount: depositAmount ?? 5,
         processing: false,
@@ -6692,7 +6756,7 @@ function useProviderHandlers(deps) {
     });
     if (!isMobile) {
       dispatch({ type: "PAY_STARTED", isSetupRedirect: false });
-      dispatch({ type: "NAVIGATE", step: "setup-status" });
+      dispatch({ type: "NAVIGATE", step: "open-wallet" });
     }
     try {
       let accountId;
@@ -6847,7 +6911,7 @@ function useProviderHandlers(deps) {
         dispatch({ type: "MOBILE_DEEPLINK_READY", deeplinkUri: session.uri });
         triggerDeeplink(session.uri);
       } else {
-        dispatch({ type: "NAVIGATE", step: "setup-status" });
+        dispatch({ type: "NAVIGATE", step: "open-wallet" });
         await authExecutor.executeSessionById(session.id);
         await reloadAccounts();
         dispatch({ type: "NAVIGATE", step: "deposit" });
@@ -6940,7 +7004,7 @@ function useProviderHandlers(deps) {
         dispatch({ type: "MOBILE_DEEPLINK_READY", deeplinkUri: session.uri });
         triggerDeeplink(session.uri);
       } else {
-        dispatch({ type: "NAVIGATE", step: "setup-status" });
+        dispatch({ type: "NAVIGATE", step: "open-wallet" });
         await authExecutor.executeSessionById(session.id);
         await reloadAccounts();
         dispatch({ type: "SELECT_TOKEN", walletId: _walletId, tokenSymbol });
@@ -7015,7 +7079,7 @@ function useOneTapSetupHandlers(deps) {
         }
         oneTapLimitSavedDuringSetupRef.current = true;
         authExecutor.resolveSelectSource({ chainName, tokenSymbol });
-        dispatch({ type: "NAVIGATE", step: "setup-status" });
+        dispatch({ type: "NAVIGATE", step: "open-wallet" });
       } else if (authExecutor.pendingOneTapSetup) {
         authExecutor.resolveOneTapSetup();
       } else {
@@ -7653,7 +7717,7 @@ function usePaymentEffects(deps) {
         useWalletConnector: useWalletConnectorProp,
         userAgent: typeof navigator === "undefined" ? void 0 : navigator.userAgent
       });
-      if (isDesktop && state.step === "setup-status") {
+      if (isDesktop && (state.step === "setup-status" || state.step === "open-wallet")) {
         preSelectSourceStepRef.current = state.step;
         dispatch({ type: "NAVIGATE", step: "setup" });
         return;
@@ -7668,7 +7732,7 @@ function usePaymentEffects(deps) {
   const pendingOneTapSetupAction = authExecutor.pendingOneTapSetup;
   const preOneTapSetupStepRef = react.useRef(null);
   react.useEffect(() => {
-    if (pendingOneTapSetupAction && state.step === "setup-status") {
+    if (pendingOneTapSetupAction && (state.step === "setup-status" || state.step === "open-wallet")) {
       if (oneTapLimitSavedDuringSetupRef.current) {
         oneTapLimitSavedDuringSetupRef.current = false;
         authExecutor.resolveOneTapSetup();