@swype-org/react-sdk 0.1.183 → 0.1.189

package/dist/index.cjs

@@ -2324,16 +2324,98 @@ var mascotStyle = {
   width: 28,
   height: 28
 };
-function ScreenHeader({ title, right, onBack, badge }) {
+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 = {
@@ -2374,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",
@@ -2388,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",
@@ -2487,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,
@@ -2510,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 })
@@ -2518,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",
@@ -2597,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) => {
@@ -2618,7 +2700,7 @@ function OtpInput({ value, onChange, length = 6, disabled }) {
     i
   )) });
 }
-var containerStyle7 = {
+var containerStyle8 = {
   display: "flex",
   gap: 8,
   justifyContent: "center",
@@ -2632,365 +2714,14 @@ var inputStyle = (tokens, filled) => ({
   borderRadius: 12,
   border: `1.5px solid ${filled ? tokens.borderFocus : tokens.border}`,
   background: tokens.bgInput,
-  color: tokens.text,
-  fontSize: "1.25rem",
-  fontWeight: 600,
-  fontFamily: "inherit",
-  textAlign: "center",
-  outline: "none",
-  caretColor: tokens.borderFocus,
-  transition: "border-color 0.15s ease"
-});
-function SourceCard({
-  name,
-  address,
-  verified,
-  accounts,
-  selectedAccountId,
-  depositAmount,
-  onSelectAccount,
-  onAuthorizeAccount,
-  onAddProvider
-}) {
-  const { tokens } = useSwypeConfig();
-  const [open, setOpen] = react.useState(false);
-  const containerRef = react.useRef(null);
-  const hasDropdown = accounts != null && accounts.length > 0;
-  react.useEffect(() => {
-    if (!open) return;
-    const handleClick = (e) => {
-      if (containerRef.current && !containerRef.current.contains(e.target)) {
-        setOpen(false);
-      }
-    };
-    document.addEventListener("mousedown", handleClick);
-    return () => document.removeEventListener("mousedown", handleClick);
-  }, [open]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, style: { position: "relative" }, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: cardContainerStyle(tokens), children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: leftStyle, children: [
-        KNOWN_LOGOS[name.toLowerCase()] ? /* @__PURE__ */ jsxRuntime.jsx(
-          "img",
-          {
-            src: KNOWN_LOGOS[name.toLowerCase()],
-            alt: name,
-            style: logoImgStyle
-          }
-        ) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: iconStyle3(tokens.textMuted), children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.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",
-            fill: "currentColor"
-          }
-        ) }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: nameRowStyle, children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { style: nameStyle(tokens.text), children: name }),
-            verified && /* @__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: tokens.accent }) })
-          ] }),
-          address && /* @__PURE__ */ jsxRuntime.jsx("span", { style: addressStyle(tokens.textMuted), children: address })
-        ] })
-      ] }),
-      hasDropdown && /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
-        {
-          type: "button",
-          onClick: () => setOpen(!open),
-          style: changeStyle(tokens.accent),
-          children: [
-            "Change source",
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "svg",
-              {
-                width: "10",
-                height: "10",
-                viewBox: "0 0 24 24",
-                fill: "none",
-                style: {
-                  marginLeft: 4,
-                  transform: open ? "rotate(180deg)" : "rotate(0deg)",
-                  transition: "transform 0.15s ease"
-                },
-                children: /* @__PURE__ */ jsxRuntime.jsx(
-                  "path",
-                  {
-                    d: "M7 10l5 5 5-5",
-                    stroke: tokens.accent,
-                    strokeWidth: "2.5",
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round"
-                  }
-                )
-              }
-            )
-          ]
-        }
-      )
-    ] }),
-    open && hasDropdown && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: dropdownStyle(tokens), children: [
-      accounts.map((account) => {
-        const preferredWallet = getPreferredDepositWallet(account, depositAmount ?? 0);
-        const active = hasActiveDepositWallet(account);
-        const isSelected = account.id === selectedAccountId;
-        const displayName = account.nickname ?? account.name;
-        const walletAddress = preferredWallet ? getWalletAddress(preferredWallet) : null;
-        const hasAllowance = active && account.remainingAllowance != null;
-        const exceedsLimit = hasAllowance && depositAmount != null && depositAmount > account.remainingAllowance;
-        return /* @__PURE__ */ jsxRuntime.jsxs(
-          "button",
-          {
-            type: "button",
-            onClick: () => {
-              if (active) {
-                onSelectAccount?.(account.id);
-              } else {
-                onAuthorizeAccount?.(account.id);
-              }
-              setOpen(false);
-            },
-            style: dropdownRowStyle(tokens, active, isSelected),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: dropdownRowLeftStyle, children: [
-                KNOWN_LOGOS[account.name.toLowerCase()] ? /* @__PURE__ */ jsxRuntime.jsx(
-                  "img",
-                  {
-                    src: KNOWN_LOGOS[account.name.toLowerCase()],
-                    alt: account.name,
-                    style: dropdownLogoStyle
-                  }
-                ) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: dropdownFallbackIconStyle(active ? tokens.textMuted : tokens.border), children: account.name.charAt(0) }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { style: dropdownNameColumnStyle, children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { style: dropdownNameStyle(active ? tokens.text : tokens.textMuted), children: displayName }),
-                  walletAddress && /* @__PURE__ */ jsxRuntime.jsx("span", { style: dropdownAddressStyle(active ? tokens.textMuted : tokens.border), children: walletAddress }),
-                  hasAllowance && /* @__PURE__ */ jsxRuntime.jsxs("span", { style: remainingAllowanceStyle(exceedsLimit ? tokens.warning : tokens.textMuted), children: [
-                    "$",
-                    account.remainingAllowance.toFixed(2),
-                    " remaining"
-                  ] })
-                ] })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { style: dropdownRowRightStyle, children: active ? exceedsLimit ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: exceedsLimitBadgeStyle(tokens), children: "Exceeds limit" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { style: activeBadgeStyle(tokens), children: "Active" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { style: inactiveBadgeStyle(tokens), children: "Setup incomplete" }) })
-            ]
-          },
-          account.id
-        );
-      }),
-      onAddProvider && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: dropdownDividerStyle(tokens.border) }),
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "button",
-          {
-            type: "button",
-            onClick: () => {
-              onAddProvider();
-              setOpen(false);
-            },
-            style: addProviderStyle(tokens),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 5v14M5 12h14", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round" }) }),
-              "Add Account"
-            ]
-          }
-        )
-      ] })
-    ] })
-  ] });
-}
-var cardContainerStyle = (tokens) => ({
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "space-between",
-  padding: "12px 16px",
-  background: tokens.bgInput,
-  border: `1px solid ${tokens.border}`,
-  borderRadius: 16
-});
-var leftStyle = {
-  display: "flex",
-  alignItems: "center",
-  gap: 10
-};
-var logoImgStyle = {
-  width: 20,
-  height: 20,
-  borderRadius: "50%",
-  objectFit: "contain"
-};
-var iconStyle3 = (color) => ({
-  color,
-  display: "flex",
-  alignItems: "center"
-});
-var nameRowStyle = {
-  display: "flex",
-  alignItems: "center",
-  gap: 4
-};
-var nameStyle = (color) => ({
-  fontWeight: 600,
-  fontSize: "0.9rem",
-  color
-});
-var addressStyle = (color) => ({
-  fontSize: "0.72rem",
-  color,
-  fontFamily: '"SF Mono", "Fira Code", monospace'
-});
-var changeStyle = (color) => ({
-  display: "flex",
-  alignItems: "center",
-  background: "transparent",
-  border: "none",
-  color,
-  fontWeight: 600,
-  fontSize: "0.82rem",
-  cursor: "pointer",
-  fontFamily: "inherit",
-  padding: 0
-});
-var dropdownStyle = (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,
-  overflow: "hidden"
-});
-var dropdownRowStyle = (tokens, active, isSelected) => ({
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "space-between",
-  width: "100%",
-  padding: "10px 14px",
-  background: isSelected ? tokens.accent + "12" : "transparent",
-  border: "none",
-  borderBottom: `1px solid ${tokens.border}`,
-  cursor: "pointer",
-  fontFamily: "inherit",
-  fontSize: "0.85rem",
-  textAlign: "left",
-  outline: "none",
-  opacity: active ? 1 : 0.55,
-  transition: "background 0.1s ease"
-});
-var dropdownRowLeftStyle = {
-  display: "flex",
-  alignItems: "center",
-  gap: 10,
-  minWidth: 0,
-  flex: 1
-};
-var dropdownRowRightStyle = {
-  display: "flex",
-  alignItems: "center",
-  gap: 8,
-  flexShrink: 0
-};
-var dropdownLogoStyle = {
-  width: 20,
-  height: 20,
-  borderRadius: "50%",
-  objectFit: "contain",
-  flexShrink: 0
-};
-var dropdownFallbackIconStyle = (color) => ({
-  width: 20,
-  height: 20,
-  borderRadius: "50%",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  fontSize: "0.72rem",
-  fontWeight: 700,
-  color,
-  flexShrink: 0
-});
-var dropdownNameColumnStyle = {
-  display: "flex",
-  flexDirection: "column",
-  gap: 2,
-  minWidth: 0
-};
-var dropdownNameStyle = (color) => ({
-  fontWeight: 500,
-  color,
-  whiteSpace: "nowrap",
-  overflow: "hidden",
-  textOverflow: "ellipsis"
-});
-var dropdownAddressStyle = (color) => ({
-  fontSize: "0.72rem",
-  color,
-  fontFamily: '"SF Mono", "Fira Code", monospace',
-  whiteSpace: "nowrap",
-  overflow: "hidden",
-  textOverflow: "ellipsis"
-});
-var activeBadgeStyle = (tokens) => ({
-  fontSize: "0.6rem",
-  fontWeight: 600,
-  color: tokens.success,
-  background: tokens.successBg,
-  padding: "2px 7px",
-  borderRadius: 999,
-  textTransform: "uppercase",
-  letterSpacing: "0.03em",
-  whiteSpace: "nowrap"
-});
-var inactiveBadgeStyle = (tokens) => ({
-  fontSize: "0.6rem",
-  fontWeight: 600,
-  color: tokens.warning,
-  background: tokens.warningBg ?? `${tokens.warning}1a`,
-  padding: "2px 7px",
-  borderRadius: 999,
-  textTransform: "uppercase",
-  letterSpacing: "0.03em",
-  whiteSpace: "nowrap"
-});
-var dropdownDividerStyle = (borderColor) => ({
-  height: 0,
-  borderTop: `1px solid ${borderColor}`
-});
-var remainingAllowanceStyle = (color) => ({
-  fontSize: "0.68rem",
-  color,
-  fontWeight: 500,
-  whiteSpace: "nowrap",
-  overflow: "hidden",
-  textOverflow: "ellipsis"
-});
-var exceedsLimitBadgeStyle = (tokens) => ({
-  fontSize: "0.6rem",
-  fontWeight: 600,
-  color: tokens.warning,
-  background: tokens.warningBg ?? `${tokens.warning}1a`,
-  padding: "2px 7px",
-  borderRadius: 999,
-  textTransform: "uppercase",
-  letterSpacing: "0.03em",
-  whiteSpace: "nowrap"
-});
-var addProviderStyle = (tokens) => ({
-  display: "flex",
-  alignItems: "center",
-  gap: 8,
-  width: "100%",
-  padding: "10px 14px",
-  background: "transparent",
-  border: "none",
-  color: tokens.accent,
+  color: tokens.text,
+  fontSize: "1.25rem",
   fontWeight: 600,
-  fontSize: "0.85rem",
-  cursor: "pointer",
   fontFamily: "inherit",
-  textAlign: "left",
-  outline: "none"
+  textAlign: "center",
+  outline: "none",
+  caretColor: tokens.borderFocus,
+  transition: "border-color 0.15s ease"
 });
 function StepList({ steps }) {
   const { tokens } = useSwypeConfig();
@@ -3001,11 +2732,11 @@ function StepList({ steps }) {
       /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
-          style: isActive ? activeBadgeContainerStyle : badgeStyle2(
-            isComplete ? tokens.accent : tokens.border,
+          style: badgeStyle2(
+            isComplete || isActive ? 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" }) }) : isActive ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: activeDotStyle(tokens.accent) }) : /* @__PURE__ */ jsxRuntime.jsx("span", { style: badgeNumberStyle, 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" }) }) : /* @__PURE__ */ jsxRuntime.jsx("span", { style: isActive ? activeBadgeNumberStyle(tokens.accent) : badgeNumberStyle, children: i + 1 })
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { style: labelContainerStyle, children: [
@@ -3036,26 +2767,16 @@ var badgeStyle2 = (color, filled) => ({
   justifyContent: "center",
   flexShrink: 0
 });
-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: "inherit"
 };
+var activeBadgeNumberStyle = (color) => ({
+  fontSize: "0.75rem",
+  fontWeight: 600,
+  color
+});
 var labelContainerStyle = {
   display: "flex",
   flexDirection: "column"
@@ -3069,87 +2790,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,
@@ -3441,6 +3081,7 @@ var resendStyle = (color, disabled) => ({
 function PasskeyScreen({
   onCreatePasskey,
   onBack,
+  onLogout,
   creating,
   error,
   popupFallback = false,
@@ -3457,7 +3098,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 })
@@ -3547,7 +3188,8 @@ function WalletPickerScreen({
   onPrepareProvider,
   onSelectProvider,
   onContinueConnection,
-  onBack
+  onBack,
+  onLogout
 }) {
   const { tokens } = useSwypeConfig();
   const [hoveredId, setHoveredId] = react.useState(null);
@@ -3584,7 +3226,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..." }) })
     ] });
   }
@@ -3614,7 +3256,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" }),
@@ -3636,7 +3278,7 @@ function WalletPickerScreen({
                       {
                         src: KNOWN_LOGOS[acct.name.toLowerCase()],
                         alt: acct.name,
-                        style: logoImgStyle2
+                        style: logoImgStyle
                       }
                     ) : /* @__PURE__ */ jsxRuntime.jsx("span", { style: emojiStyle, children: WALLET_EMOJIS[acct.name.toLowerCase()] ?? acct.name.charAt(0) }) }),
                     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: pendingInfoStyle, children: [
@@ -3697,10 +3339,10 @@ function WalletPickerScreen({
                   {
                     src: logoSrc,
                     alt: p.name,
-                    style: logoImgStyle2
+                    style: logoImgStyle
                   }
                 ) : /* @__PURE__ */ jsxRuntime.jsx("span", { style: emojiStyle, children: emoji }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { style: nameStyle2(tokens.text), children: p.name })
+                /* @__PURE__ */ jsxRuntime.jsx("span", { style: nameStyle(tokens.text), children: p.name })
               ]
             },
             p.id
@@ -3753,13 +3395,13 @@ var emojiStyle = {
   fontSize: "1.75rem",
   lineHeight: 1
 };
-var logoImgStyle2 = {
+var logoImgStyle = {
   width: 32,
   height: 32,
   borderRadius: 8,
   objectFit: "contain"
 };
-var nameStyle2 = (color) => ({
+var nameStyle = (color) => ({
   fontSize: "0.88rem",
   fontWeight: 600,
   color
@@ -3882,6 +3524,7 @@ function SetupScreen({
   availableBalance,
   onSetupOneTap,
   onBack,
+  onLogout,
   onAdvanced,
   loading,
   error
@@ -3890,12 +3533,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(() => {
@@ -3903,16 +3548,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,
     {
@@ -3929,7 +3575,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: [
@@ -3990,7 +3636,7 @@ function SetupScreen({
             {
               type: "button",
               onClick: () => selectPreset(value),
-              style: presetButtonStyle(tokens, isPresetActive(value)),
+              style: presetButtonStyle(tokens, activePreset === value),
               children: [
                 "$",
                 value.toLocaleString()
@@ -4003,7 +3649,7 @@ function SetupScreen({
             {
               type: "button",
               onClick: selectMax,
-              style: presetButtonStyle(tokens, isMaxActive),
+              style: presetButtonStyle(tokens, activePreset === "max"),
               children: "Max"
             }
           )
@@ -4128,7 +3774,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..." }),
@@ -4191,9 +3837,6 @@ var waitHintStyle = (color) => ({
 var MIN_DEPOSIT = 0.25;
 function DepositScreen({
   merchantName,
-  sourceName,
-  sourceAddress,
-  sourceVerified,
   availableBalance,
   remainingLimit,
   tokenCount,
@@ -4217,7 +3860,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) {
@@ -4231,21 +3874,7 @@ function DepositScreen({
           /* @__PURE__ */ jsxRuntime.jsx(PoweredByFooter, {})
         ] }),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { title: headerTitle, onBack, right: /* @__PURE__ */ jsxRuntime.jsx(SettingsMenu, { onLogout }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            SourceCard,
-            {
-              name: sourceName,
-              address: sourceAddress,
-              verified: sourceVerified,
-              accounts,
-              selectedAccountId,
-              depositAmount: amount,
-              onSelectAccount,
-              onAuthorizeAccount,
-              onAddProvider
-            }
-          ),
+          /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { title: headerTitle, onBack, onLogout }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { style: lowBalanceAmountDisplayStyle, children: /* @__PURE__ */ jsxRuntime.jsxs("span", { style: lowBalanceAmountStyle, children: [
             "$",
             amount.toFixed(2)
@@ -4277,7 +3906,6 @@ function DepositScreen({
       }
     );
   }
-  const providerLogo = KNOWN_LOGOS[sourceName.toLowerCase()];
   return /* @__PURE__ */ jsxRuntime.jsxs(
     ScreenLayout,
     {
@@ -4288,7 +3916,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" }),
@@ -4296,7 +3924,6 @@ 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: mascotStyle3 }) }),
         /* @__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: [
@@ -4325,17 +3952,69 @@ function DepositScreen({
                 ]
               }
             )
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: walletBalanceRowStyle, children: [
-            providerLogo ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: providerLogo, alt: sourceName, style: providerLogoStyle }) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: providerFallbackStyle(tokens.textMuted), children: sourceName.charAt(0) }),
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { style: walletBalanceStyle(tokens.text), children: [
-              "$",
-              availableBalance.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })
-            ] }),
-            /* @__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: [
+        accounts && accounts.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: accountSectionStyle, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: accountSectionLabelStyle(tokens.textMuted), children: "Choose account" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: accountListStyle(tokens), children: [
+            accounts.map((account) => {
+              const preferredWallet = getPreferredDepositWallet(account, amount);
+              const active = hasActiveDepositWallet(account);
+              const isSelected = account.id === selectedAccountId;
+              const walletAddress = preferredWallet ? getWalletAddress(preferredWallet) : null;
+              const truncatedAddress = walletAddress ? `${walletAddress.slice(0, 6)}...${walletAddress.slice(-4)}` : null;
+              const accountBalance = account.wallets.reduce(
+                (sum, w) => sum + w.balance.available.amount,
+                0
+              );
+              const providerLogo = KNOWN_LOGOS[account.name.toLowerCase()];
+              return /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => {
+                    if (active) {
+                      onSelectAccount?.(account.id);
+                    } else {
+                      onAuthorizeAccount?.(account.id);
+                    }
+                  },
+                  style: accountRowStyle(tokens),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: accountRowLeftStyle, children: [
+                      providerLogo ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: providerLogo, alt: account.name, style: accountLogoStyle }) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: accountFallbackIconStyle(tokens.textMuted), children: account.name.charAt(0) }),
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: accountInfoStyle, children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { style: accountAddressStyle(tokens.text), children: truncatedAddress ?? account.nickname ?? account.name }),
+                        /* @__PURE__ */ jsxRuntime.jsxs("span", { style: accountBalanceTextStyle(tokens.textMuted), children: [
+                          "$",
+                          accountBalance.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })
+                        ] })
+                      ] })
+                    ] }),
+                    isSelected ? /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "22", height: "22", viewBox: "0 0 22 22", fill: "none", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "11", cy: "11", r: "11", fill: tokens.success }),
+                      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7 11l3 3 5-5", stroke: "#fff", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
+                    ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: radioEmptyStyle(tokens.border) })
+                  ]
+                },
+                account.id
+              );
+            }),
+            onAddProvider && /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: onAddProvider,
+                style: addAccountBtnStyle(tokens),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 5v14M5 12h14", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round" }) }),
+                  "Add Account"
+                ]
+              }
+            )
+          ] })
+        ] }),
+        remainingLimit != null && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: spendingLimitStyle(tokens.textMuted), children: [
           "Spending Limit",
           " ",
           /* @__PURE__ */ jsxRuntime.jsxs("strong", { style: { color: tokens.text }, children: [
@@ -4348,15 +4027,6 @@ function DepositScreen({
     }
   );
 }
-var mascotWrapStyle = {
-  display: "flex",
-  justifyContent: "center",
-  marginBottom: 16
-};
-var mascotStyle3 = {
-  width: 36,
-  height: 36
-};
 var depositCardStyle = (tokens) => ({
   background: tokens.bgInput,
   border: `1px solid ${tokens.border}`,
@@ -4402,33 +4072,102 @@ var checkBadgeStyle2 = {
   bottom: -1,
   right: -3
 };
-var walletBalanceRowStyle = {
+var accountSectionStyle = {
+  marginBottom: 20
+};
+var accountSectionLabelStyle = (color) => ({
+  fontSize: "0.78rem",
+  fontWeight: 500,
+  color,
+  marginBottom: 8
+});
+var accountListStyle = (tokens) => ({
+  background: tokens.bgInput,
+  border: `1px solid ${tokens.border}`,
+  borderRadius: tokens.radiusLg,
+  overflow: "hidden"
+});
+var accountRowStyle = (tokens, isSelected) => ({
   display: "flex",
   alignItems: "center",
-  gap: 8
+  justifyContent: "space-between",
+  width: "100%",
+  padding: "14px 16px",
+  background: "transparent",
+  border: "none",
+  borderBottom: `1px solid ${tokens.border}`,
+  cursor: "pointer",
+  fontFamily: "inherit",
+  textAlign: "left",
+  outline: "none"
+});
+var accountRowLeftStyle = {
+  display: "flex",
+  alignItems: "center",
+  gap: 12,
+  minWidth: 0,
+  flex: 1
 };
-var providerLogoStyle = {
-  width: 18,
-  height: 18,
+var accountLogoStyle = {
+  width: 28,
+  height: 28,
   borderRadius: "50%",
-  objectFit: "contain"
+  objectFit: "contain",
+  flexShrink: 0
 };
-var providerFallbackStyle = (color) => ({
-  width: 18,
-  height: 18,
+var accountFallbackIconStyle = (color) => ({
+  width: 28,
+  height: 28,
   borderRadius: "50%",
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
-  fontSize: "0.65rem",
+  fontSize: "0.75rem",
   fontWeight: 700,
   color,
   flexShrink: 0
 });
-var walletBalanceStyle = (color) => ({
-  fontSize: "0.9rem",
+var accountInfoStyle = {
+  display: "flex",
+  flexDirection: "column",
+  gap: 2,
+  minWidth: 0
+};
+var accountAddressStyle = (color) => ({
   fontWeight: 600,
-  color
+  fontSize: "0.88rem",
+  color,
+  whiteSpace: "nowrap",
+  overflow: "hidden",
+  textOverflow: "ellipsis"
+});
+var accountBalanceTextStyle = (color) => ({
+  fontSize: "0.76rem",
+  color,
+  fontWeight: 500
+});
+var radioEmptyStyle = (borderColor) => ({
+  width: 22,
+  height: 22,
+  borderRadius: "50%",
+  border: `2px solid ${borderColor}`,
+  flexShrink: 0
+});
+var addAccountBtnStyle = (tokens) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: 8,
+  width: "100%",
+  padding: "12px 16px",
+  background: "transparent",
+  border: "none",
+  color: tokens.accent,
+  fontWeight: 600,
+  fontSize: "0.85rem",
+  cursor: "pointer",
+  fontFamily: "inherit",
+  textAlign: "left",
+  outline: "none"
 });
 var spendingLimitStyle = (color) => ({
   textAlign: "center",
@@ -4548,12 +4287,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 }) }) }),
@@ -4720,7 +4454,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." }),
@@ -5087,12 +4821,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..." }),
@@ -5161,6 +4896,7 @@ function OpenWalletScreen({
   walletName,
   deeplinkUri,
   loading,
+  useDeeplink = true,
   error,
   onRetryStatus,
   onBack,
@@ -5171,16 +4907,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,
     {
@@ -5195,7 +4959,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}` }),
@@ -5270,6 +5034,11 @@ var hintStyle = (color) => ({
   color,
   margin: "8px 0 0"
 });
+var waitHintStyle2 = (color) => ({
+  fontSize: "0.82rem",
+  color,
+  margin: "16px 0 0"
+});
 function ConfirmSignScreen({
   walletName,
   signing,
@@ -5289,7 +5058,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" }),
@@ -5368,6 +5137,7 @@ function TokenPickerScreen({
   onSelectAuthorized,
   onAuthorizeToken,
   onBack,
+  onLogout,
   depositAmount
 }) {
   const { tokens: t } = useSwypeConfig();
@@ -5396,8 +5166,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: [
@@ -5450,7 +5220,7 @@ function TokenPickerScreen({
     }) })
   ] });
 }
-var mascotWrapStyle2 = {
+var mascotWrapStyle = {
   display: "flex",
   justifyContent: "center",
   marginBottom: 16
@@ -5634,8 +5404,6 @@ function StepRendererContent({
   pendingConnections,
   depositEligibleAccounts,
   sourceName,
-  sourceAddress,
-  sourceVerified,
   maxSourceBalance,
   tokenCount,
   selectedAccount,
@@ -5701,6 +5469,7 @@ function StepRendererContent({
       {
         onCreatePasskey: handlers.onRegisterPasskey,
         onBack: handlers.onLogout,
+        onLogout: handlers.onLogout,
         creating: state.registeringPasskey,
         error: state.error,
         popupFallback: state.passkeyPopupNeeded,
@@ -5714,6 +5483,7 @@ function StepRendererContent({
       {
         onCreatePasskey: handlers.onRegisterPasskey,
         onBack: handlers.onLogout,
+        onLogout: handlers.onLogout,
         creating: state.verifyingPasskeyPopup,
         error: state.error,
         popupFallback: true,
@@ -5734,21 +5504,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
       }
     );
@@ -5812,11 +5587,8 @@ function StepRendererContent({
       DepositScreen,
       {
         merchantName,
-        sourceName,
-        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,
@@ -5849,6 +5621,7 @@ function StepRendererContent({
         onSelectAuthorized: handlers.onSelectAuthorizedToken,
         onAuthorizeToken: handlers.onAuthorizeToken,
         onBack: () => handlers.onNavigate(state.previousStep === "setup" ? "setup" : "deposit"),
+        onLogout: handlers.onLogout,
         depositAmount: depositAmount ?? void 0
       }
     );
@@ -5896,7 +5669,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,
@@ -5910,11 +5684,8 @@ function StepRendererContent({
       DepositScreen,
       {
         merchantName,
-        sourceName,
-        sourceAddress,
-        sourceVerified,
         availableBalance: 0,
-        remainingLimit: selectedSource?.remainingAllowance ?? selectedAccount?.remainingAllowance ?? state.oneTapLimit,
+        remainingLimit: selectedSource?.remainingAllowance ?? selectedAccount?.remainingAllowance ?? null,
         tokenCount,
         initialAmount: depositAmount ?? 5,
         processing: false,
@@ -5970,7 +5741,7 @@ var PaymentErrorBoundary = class extends react.Component {
       return this.props.children;
     }
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: containerStyle9, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { style: iconStyle4, children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: iconStyle3, children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", children: [
         /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10", stroke: "#ef4444", strokeWidth: "1.5" }),
         /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 8v5", stroke: "#ef4444", strokeWidth: "1.5", strokeLinecap: "round" }),
         /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "16", r: "0.75", fill: "#ef4444" })
@@ -5992,7 +5763,7 @@ var containerStyle9 = {
   maxWidth: 420,
   margin: "0 auto"
 };
-var iconStyle4 = {
+var iconStyle3 = {
   marginBottom: 20
 };
 var headingStyle12 = {
@@ -6034,8 +5805,6 @@ function useDerivedState(state) {
     return selectedWallet.sources.find((s) => s.token.status === "AUTHORIZED") ?? selectedWallet.sources[0] ?? null;
   }, [selectedWallet, state.selectedTokenSymbol]);
   const sourceName = selectedAccount?.name ?? selectedWallet?.chain.name ?? "Wallet";
-  const sourceAddress = selectedWallet ? `${selectedWallet.name.slice(0, 6)}...${selectedWallet.name.slice(-4)}` : void 0;
-  const sourceVerified = selectedWallet?.status === "ACTIVE";
   const pendingConnections = react.useMemo(
     () => state.accounts.filter(
       (a) => a.wallets.length > 0 && !a.wallets.some((w) => w.status === "ACTIVE")
@@ -6077,8 +5846,6 @@ function useDerivedState(state) {
     selectedWallet,
     selectedSource,
     sourceName,
-    sourceAddress,
-    sourceVerified,
     pendingConnections,
     depositEligibleAccounts,
     maxSourceBalance,
@@ -6705,7 +6472,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;
@@ -6860,7 +6627,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" });
@@ -6953,7 +6720,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 });
@@ -7028,7 +6795,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 {
@@ -7666,7 +7433,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;
@@ -7681,7 +7448,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();
@@ -7934,8 +7701,6 @@ function SwypePaymentInner({
       pendingConnections: derived.pendingConnections,
       depositEligibleAccounts: derived.depositEligibleAccounts,
       sourceName: derived.sourceName,
-      sourceAddress: derived.sourceAddress,
-      sourceVerified: derived.sourceVerified,
       maxSourceBalance: derived.maxSourceBalance,
       tokenCount: derived.tokenCount,
       selectedAccount: derived.selectedAccount,