@swype-org/react-sdk 0.1.31 → 0.1.33

package/dist/index.cjs

@@ -1451,8 +1451,20 @@ function hasProcessingTimedOut(processingStartedAtMs, nowMs) {
   if (!processingStartedAtMs) return false;
   return nowMs - processingStartedAtMs >= PROCESSING_TIMEOUT_MS;
 }
+var STATUS_DISPLAY_LABELS = {
+  CREATED: "created",
+  AUTHORIZED: "authorized",
+  SENDING: "sending",
+  SENT: "confirming delivery",
+  COMPLETED: "completed",
+  FAILED: "failed"
+};
+function getStatusDisplayLabel(status) {
+  return STATUS_DISPLAY_LABELS[status] ?? status;
+}
 function buildProcessingTimeoutMessage(status) {
-  return `Payment is taking longer than expected (status: ${status}). Please try again.`;
+  const label = getStatusDisplayLabel(status);
+  return `Payment is taking longer than expected (status: ${label}). Please try again.`;
 }
 
 // src/walletFlow.ts
@@ -1801,7 +1813,7 @@ function LimitSlider({
     (e) => onChange(Number(e.target.value)),
     [onChange]
   );
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: wrapperStyle, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "swype-slider-wrap", style: wrapperStyle, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: trackContainerStyle, children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { style: trackBgStyle(tokens.border) }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { style: trackFillStyle(tokens.accent, pct) }),
@@ -1815,7 +1827,7 @@ function LimitSlider({
           value,
           onChange: handleChange,
           disabled,
-          style: rangeInputStyle(tokens.accent)
+          style: rangeInputStyle
         }
       )
     ] }),
@@ -1849,17 +1861,19 @@ var trackFillStyle = (color, pct) => ({
   borderRadius: 2,
   background: color
 });
-var rangeInputStyle = (_accent) => ({
+var rangeInputStyle = {
   position: "absolute",
   left: 0,
   right: 0,
   width: "100%",
   height: 28,
   margin: 0,
-  opacity: 0,
   cursor: "pointer",
-  zIndex: 2
-});
+  zIndex: 2,
+  WebkitAppearance: "none",
+  appearance: "none",
+  background: "transparent"
+};
 var ticksStyle = {
   display: "flex",
   justifyContent: "space-between",
@@ -1871,10 +1885,8 @@ var tickLabelStyle = (color) => ({
   color
 });
 var sliderThumbCss = (accent) => `
-  .swype-slider-wrap input[type="range"] {
-    -webkit-appearance: none;
-    appearance: none;
-    opacity: 1 !important;
+  .swype-slider-wrap input[type="range"]::-webkit-slider-runnable-track {
+    height: 4px;
     background: transparent;
   }
   .swype-slider-wrap input[type="range"]::-webkit-slider-thumb {
@@ -1886,6 +1898,21 @@ var sliderThumbCss = (accent) => `
     border: 3px solid #fff;
     box-shadow: 0 2px 6px rgba(0,0,0,0.15);
     cursor: pointer;
+    margin-top: -8px;
+  }
+  .swype-slider-wrap input[type="range"]::-moz-range-track {
+    height: 4px;
+    background: transparent;
+    border: none;
+  }
+  .swype-slider-wrap input[type="range"]::-moz-range-thumb {
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    background: ${accent};
+    border: 3px solid #fff;
+    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
+    cursor: pointer;
   }
 `;
 function SourceCard({ name, address, verified, onChangeSource }) {
@@ -2016,40 +2043,137 @@ 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: containerStyle7, 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 containerStyle7 = {
+  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 LoginScreen({
   authInput,
   onAuthInputChange,
   onSubmit,
   sending,
   error,
-  onBack
+  onBack,
+  merchantInitials,
+  onSocialLogin
 }) {
   const { tokens } = useSwypeConfig();
   const disabled = authInput.trim().length === 0 || sending;
-  const walletLogos = ["MM", "R", "O", "P", "+"];
   return /* @__PURE__ */ jsxRuntime.jsxs(
     ScreenLayout,
     {
       footer: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(PrimaryButton, { onClick: onSubmit, disabled, loading: sending, children: "Continue" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: dividerStyle(tokens), children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { style: dividerLineStyle(tokens.border) }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "works with" }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { style: dividerLineStyle(tokens.border) })
+        onSocialLogin && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: dividerStyle(tokens), children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { style: dividerLineStyle(tokens.border) }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "or continue with" }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { style: dividerLineStyle(tokens.border) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: socialRowStyle, children: ["google", "apple", "twitter"].map((provider) => /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => onSocialLogin(provider),
+              style: socialButtonStyle(tokens),
+              children: socialLabel(provider)
+            },
+            provider
+          )) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: walletSectionStyle, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: walletLabelStyle(tokens.textMuted), children: "Works with" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: walletLogosStyle, children: walletIcons.map(({ key, emoji }) => /* @__PURE__ */ jsxRuntime.jsx("span", { style: walletEmojiStyle, children: emoji }, key)) })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: logosRowStyle, children: walletLogos.map((label) => /* @__PURE__ */ jsxRuntime.jsx("div", { style: logoCircleStyle(tokens), children: label }, label)) }),
         /* @__PURE__ */ jsxRuntime.jsx(PoweredByFooter, {})
       ] }),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { onBack }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ScreenHeader,
+          {
+            onBack,
+            right: merchantInitials ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: avatarStyle(tokens), children: merchantInitials }) : void 0
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(IconCircle, { variant: "accent", size: 56, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
-            "path",
-            {
-              d: "M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z",
-              fill: tokens.accent
-            }
-          ) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: iconBoxStyle(tokens.accent), children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: iconLetterStyle, children: "S" }) }),
           /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle(tokens.text), children: "One-time setup.\nOne-tap deposits after." }),
           /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle(tokens.textSecondary), children: "Protected by Face ID." }),
           error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: errorStyle(tokens), children: error }),
@@ -2074,6 +2198,23 @@ function LoginScreen({
     }
   );
 }
+var walletIcons = [
+  { key: "metamask", emoji: "\u{1F98A}" },
+  { key: "rabby", emoji: "\u{1F430}" },
+  { key: "phantom", emoji: "\u25C6" },
+  { key: "rainbow", emoji: "\u{1F439}" },
+  { key: "coinbase", emoji: "\u{1F535}" }
+];
+function socialLabel(provider) {
+  switch (provider) {
+    case "google":
+      return "Google";
+    case "apple":
+      return "Apple";
+    case "twitter":
+      return "X";
+  }
+}
 var contentStyle = {
   textAlign: "center",
   flex: 1,
@@ -2082,10 +2223,25 @@ var contentStyle = {
   alignItems: "center",
   paddingTop: 24
 };
+var iconBoxStyle = (accent) => ({
+  width: 56,
+  height: 56,
+  borderRadius: 16,
+  background: accent,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center"
+});
+var iconLetterStyle = {
+  color: "#fff",
+  fontSize: "1.5rem",
+  fontWeight: 700,
+  lineHeight: 1
+};
 var headingStyle = (color) => ({
-  fontSize: "1.65rem",
+  fontSize: "1.45rem",
   fontWeight: 700,
-  lineHeight: 1.2,
+  lineHeight: 1.25,
   letterSpacing: "-0.02em",
   color,
   margin: "20px 0 8px",
@@ -2134,24 +2290,55 @@ var dividerLineStyle = (color) => ({
   height: 1,
   background: color
 });
-var logosRowStyle = {
+var socialRowStyle = {
+  display: "flex",
+  gap: 10,
+  marginBottom: 20
+};
+var socialButtonStyle = (tokens) => ({
+  flex: 1,
+  padding: "12px 0",
+  borderRadius: 12,
+  border: `1px solid ${tokens.border}`,
+  background: "transparent",
+  color: tokens.text,
+  fontSize: "0.88rem",
+  fontWeight: 600,
+  fontFamily: "inherit",
+  cursor: "pointer"
+});
+var walletSectionStyle = {
+  textAlign: "center",
+  marginBottom: 8,
+  marginTop: 4
+};
+var walletLabelStyle = (color) => ({
+  fontSize: "0.78rem",
+  color,
+  display: "block",
+  marginBottom: 10
+});
+var walletLogosStyle = {
   display: "flex",
   justifyContent: "center",
-  gap: 12,
-  marginBottom: 8
+  gap: 16
 };
-var logoCircleStyle = (tokens) => ({
-  width: 34,
-  height: 34,
-  borderRadius: 999,
+var walletEmojiStyle = {
+  fontSize: "1.4rem",
+  lineHeight: 1
+};
+var avatarStyle = (tokens) => ({
+  width: 28,
+  height: 28,
+  borderRadius: "50%",
   border: `1px solid ${tokens.border}`,
-  background: tokens.bgInput,
-  color: tokens.textMuted,
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
-  fontSize: "0.72rem",
-  fontWeight: 600
+  fontSize: "0.6rem",
+  fontWeight: 700,
+  color: tokens.textMuted,
+  background: "transparent"
 });
 var RESEND_COOLDOWN_SECONDS = 30;
 function OtpVerifyScreen({
@@ -2503,21 +2690,36 @@ var hintStyle2 = (color) => ({
   color,
   margin: "0 0 4px"
 });
-var DEFAULT_TICKS = [25, 100, 250, 500];
-var DEFAULT_MIN = 25;
 var DEFAULT_MAX = 500;
+var ABSOLUTE_MIN = 1;
+function buildTicks(min, max) {
+  if (max <= min) return [min];
+  const range = max - min;
+  const candidates = [1, 2, 5, 10, 25, 50, 100, 250];
+  const step = candidates.find((s) => range / s <= 5) ?? Math.ceil(range / 4);
+  const ticks = [];
+  for (let v = min; v <= max; v += step) {
+    ticks.push(Math.round(v * 100) / 100);
+  }
+  if (ticks[ticks.length - 1] !== max) ticks.push(max);
+  return ticks;
+}
 function SetupScreen({
   availableBalance,
   tokenCount,
   sourceName,
   onSetupOneTap,
   onBack,
+  onLogout,
   loading,
   error
 }) {
   const { tokens } = useSwypeConfig();
-  const [limit, setLimit] = react.useState(100);
   const effectiveMax = Math.min(DEFAULT_MAX, availableBalance > 0 ? availableBalance : DEFAULT_MAX);
+  const effectiveMin = Math.min(ABSOLUTE_MIN, effectiveMax);
+  const sliderStep = effectiveMax <= 10 ? 0.5 : effectiveMax <= 50 ? 1 : 5;
+  const ticks = buildTicks(effectiveMin, effectiveMax);
+  const [limit, setLimit] = react.useState(() => Math.min(100, effectiveMax));
   return /* @__PURE__ */ jsxRuntime.jsxs(
     ScreenLayout,
     {
@@ -2534,7 +2736,7 @@ function SetupScreen({
         /* @__PURE__ */ jsxRuntime.jsx(PoweredByFooter, {})
       ] }),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { title: "Swype Setup", badge: "Simple", onBack }),
+        /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { title: "Swype Setup", badge: "Simple", onBack, right: /* @__PURE__ */ jsxRuntime.jsx(SettingsMenu, { onLogout }) }),
         /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle5(tokens.text), children: "Set up One-Tap deposits" }),
         /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle5(tokens.textSecondary), children: "Set your limit for instant deposits. Like a contactless card \u2014 you choose the max." }),
         error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: errorBannerStyle3(tokens), children: error }),
@@ -2569,10 +2771,10 @@ function SetupScreen({
             LimitSlider,
             {
               value: limit,
-              min: DEFAULT_MIN,
+              min: effectiveMin,
               max: effectiveMax,
-              step: 5,
-              ticks: DEFAULT_TICKS.filter((t) => t <= effectiveMax),
+              step: sliderStep,
+              ticks,
               onChange: setLimit
             }
           )
@@ -2692,6 +2894,7 @@ function SetupStatusScreen({
   currentStepLabel,
   merchantName,
   onContinue,
+  onLogout,
   error
 }) {
   const { tokens } = useSwypeConfig();
@@ -2709,26 +2912,29 @@ function SetupStatusScreen({
     },
     { label: "Done", status: "pending" }
   ];
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     ScreenLayout,
     {
       footer: complete ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(PrimaryButton, { onClick: onContinue, children: merchantName ? `Return to ${merchantName}` : "Continue" }),
         /* @__PURE__ */ jsxRuntime.jsx("p", { style: swipeHintStyle(tokens.textMuted), children: "Swipe to deposit \u2014 no approvals needed." })
       ] }) : void 0,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle4, children: [
-        complete ? /* @__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 }) }) }),
-          /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle6(tokens.text), children: "You're all set!" })
-        ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 48 }),
-          /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle6(tokens.text), children: "Setting up One-Tap..." })
-        ] }),
-        error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: errorBannerStyle4(tokens), children: error }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: stepsWrapStyle, children: /* @__PURE__ */ jsxRuntime.jsx(StepList, { steps }) }),
-        !complete && /* @__PURE__ */ jsxRuntime.jsx("p", { style: waitHintStyle(tokens.textMuted), children: "Usually takes a few seconds" }),
-        complete && /* @__PURE__ */ jsxRuntime.jsx("p", { style: readyHintStyle(tokens.textSecondary), children: "You can now deposit instantly from any partner app." })
-      ] })
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { right: /* @__PURE__ */ jsxRuntime.jsx(SettingsMenu, { onLogout }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle4, children: [
+          complete ? /* @__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 }) }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle6(tokens.text), children: "You're all set!" })
+          ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 48 }),
+            /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle6(tokens.text), children: "Setting up One-Tap..." })
+          ] }),
+          error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: errorBannerStyle4(tokens), children: error }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: stepsWrapStyle, children: /* @__PURE__ */ jsxRuntime.jsx(StepList, { steps }) }),
+          !complete && /* @__PURE__ */ jsxRuntime.jsx("p", { style: waitHintStyle(tokens.textMuted), children: "Usually takes a few seconds" }),
+          complete && /* @__PURE__ */ jsxRuntime.jsx("p", { style: readyHintStyle(tokens.textSecondary), children: "You can now deposit instantly from any partner app." })
+        ] })
+      ]
     }
   );
 }
@@ -2784,7 +2990,7 @@ var swipeHintStyle = (color) => ({
   color,
   margin: "12px 0 0"
 });
-var MIN_DEPOSIT = 1;
+var MIN_DEPOSIT = 0.25;
 function DepositScreen({
   merchantName,
   sourceName,
@@ -2801,7 +3007,8 @@ function DepositScreen({
   onDeposit,
   onChangeSource,
   onSwitchWallet,
-  onBack
+  onBack,
+  onLogout
 }) {
   const { tokens } = useSwypeConfig();
   const [amount, setAmount] = react.useState(initialAmount);
@@ -2809,30 +3016,6 @@ function DepositScreen({
   const isLowBalance = availableBalance < MIN_DEPOSIT;
   const canDeposit = amount >= MIN_DEPOSIT && amount <= remainingLimit && !isLowBalance && !processing;
   const headerTitle = merchantName ? `Deposit to ${merchantName}` : "Deposit";
-  const trackRef = react.useRef(null);
-  const [swipeX, setSwipeX] = react.useState(0);
-  const [swiping, setSwiping] = react.useState(false);
-  const startXRef = react.useRef(0);
-  const handleTouchStart = react.useCallback((e) => {
-    if (!canDeposit) return;
-    startXRef.current = e.touches[0].clientX - swipeX;
-    setSwiping(true);
-  }, [canDeposit, swipeX]);
-  const handleTouchMove = react.useCallback((e) => {
-    if (!swiping || !trackRef.current) return;
-    const trackWidth = trackRef.current.offsetWidth - 52;
-    const x = Math.max(0, Math.min(e.touches[0].clientX - startXRef.current, trackWidth));
-    setSwipeX(x);
-  }, [swiping]);
-  const handleTouchEnd = react.useCallback(() => {
-    if (!trackRef.current) return;
-    const trackWidth = trackRef.current.offsetWidth - 52;
-    if (swipeX > trackWidth * 0.75) {
-      onDeposit(amount);
-    }
-    setSwipeX(0);
-    setSwiping(false);
-  }, [swipeX, amount, onDeposit]);
   if (isLowBalance) {
     return /* @__PURE__ */ jsxRuntime.jsxs(
       ScreenLayout,
@@ -2844,7 +3027,7 @@ function DepositScreen({
           /* @__PURE__ */ jsxRuntime.jsx(PoweredByFooter, {})
         ] }),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { title: headerTitle, onBack }),
+          /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { title: headerTitle, onBack, right: /* @__PURE__ */ jsxRuntime.jsx(SettingsMenu, { onLogout }) }),
           /* @__PURE__ */ jsxRuntime.jsx(
             SourceCard,
             {
@@ -2889,30 +3072,10 @@ function DepositScreen({
     ScreenLayout,
     {
       footer: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            ref: trackRef,
-            style: swipeTrackStyle(tokens),
-            onTouchStart: handleTouchStart,
-            onTouchMove: handleTouchMove,
-            onTouchEnd: handleTouchEnd,
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  style: swipeThumbStyle(tokens, swipeX),
-                  children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 5l8 7-8 7", stroke: "#fff", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { style: swipeLabelStyle, children: processing ? "Processing..." : `Deposit $${amount.toFixed(2)}` })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: desktopFallbackStyle, children: /* @__PURE__ */ jsxRuntime.jsxs(PrimaryButton, { onClick: () => onDeposit(amount), disabled: !canDeposit, loading: processing, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(PrimaryButton, { onClick: () => onDeposit(amount), disabled: !canDeposit, loading: processing, children: [
           "Deposit $",
           amount.toFixed(2)
-        ] }) }),
+        ] }),
         /* @__PURE__ */ jsxRuntime.jsx("p", { style: noApprovalStyle(tokens.textMuted), children: "No approval needed \xB7 within your One-Tap limit" }),
         /* @__PURE__ */ jsxRuntime.jsxs("p", { style: routeStyle(tokens.textMuted), children: [
           "From ",
@@ -2923,7 +3086,7 @@ function DepositScreen({
         /* @__PURE__ */ jsxRuntime.jsx(PoweredByFooter, {})
       ] }),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { title: headerTitle, badge: "Simple", onBack }),
+        /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { title: headerTitle, badge: "Simple", onBack, right: /* @__PURE__ */ jsxRuntime.jsx(SettingsMenu, { onLogout }) }),
         /* @__PURE__ */ jsxRuntime.jsx(
           SourceCard,
           {
@@ -2968,7 +3131,7 @@ function DepositScreen({
             min: MIN_DEPOSIT,
             max: sliderMax > MIN_DEPOSIT ? sliderMax : 20,
             step: 0.5,
-            ticks: [MIN_DEPOSIT, 5, 10, 20].filter((t) => t <= sliderMax || t <= 20),
+            ticks: [MIN_DEPOSIT, 1, 5, 10, 20].filter((t) => t <= sliderMax || t <= 20),
             onChange: setAmount
           }
         ),
@@ -2980,13 +3143,13 @@ function DepositScreen({
               remainingLimit.toFixed(2)
             ] })
           ] }),
-          estimatedFeeUsd != null && estimatedFeePct != null && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: detailRowStyle(tokens.textMuted), children: [
+          estimatedFeeUsd != null && estimatedFeePct != null ? /* @__PURE__ */ jsxRuntime.jsxs("div", { style: detailRowStyle(tokens.textMuted), children: [
             "Fee: ~$",
             estimatedFeeUsd.toFixed(2),
             " (",
             estimatedFeePct.toFixed(1),
             "%)"
-          ] })
+          ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: detailRowStyle(tokens.textMuted), children: "Fees calculated at time of transfer" })
         ] }),
         error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: errorBannerStyle5(tokens), children: error })
       ]
@@ -3066,45 +3229,6 @@ var errorBannerStyle5 = (tokens) => ({
   marginTop: 8,
   lineHeight: 1.5
 });
-var swipeTrackStyle = (tokens) => ({
-  position: "relative",
-  height: 56,
-  borderRadius: 999,
-  background: `linear-gradient(180deg, ${tokens.accent}, ${tokens.accent}dd)`,
-  overflow: "hidden",
-  display: "flex",
-  alignItems: "center",
-  touchAction: "none",
-  userSelect: "none"
-});
-var swipeThumbStyle = (tokens, x) => ({
-  position: "absolute",
-  left: 4 + x,
-  top: 4,
-  width: 48,
-  height: 48,
-  borderRadius: "50%",
-  background: `${tokens.accent}`,
-  border: "2px solid rgba(255,255,255,0.4)",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  zIndex: 2,
-  transition: x === 0 ? "left 0.25s ease" : "none",
-  cursor: "grab"
-});
-var swipeLabelStyle = {
-  flex: 1,
-  textAlign: "center",
-  color: "#fff",
-  fontWeight: 700,
-  fontSize: "0.95rem",
-  zIndex: 1,
-  pointerEvents: "none"
-};
-var desktopFallbackStyle = {
-  marginTop: 8
-};
 var noApprovalStyle = (color) => ({
   textAlign: "center",
   fontSize: "0.78rem",
@@ -3133,6 +3257,7 @@ function SuccessScreen({
   sourceName,
   remainingLimit,
   onDone,
+  onLogout,
   onIncreaseLimits,
   onManageAccount
 }) {
@@ -3149,7 +3274,7 @@ function SuccessScreen({
         /* @__PURE__ */ jsxRuntime.jsx(
           ScreenHeader,
           {
-            right: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: onDone, style: closeButtonStyle(tokens.textMuted), "aria-label": "Close", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6L6 18M6 6l12 12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }) })
+            right: /* @__PURE__ */ jsxRuntime.jsx(SettingsMenu, { onLogout })
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle5, children: [
@@ -3265,15 +3390,6 @@ var upsellLinkStyle = (color) => ({
   fontFamily: "inherit",
   padding: 0
 });
-var closeButtonStyle = (color) => ({
-  background: "transparent",
-  border: "none",
-  cursor: "pointer",
-  color,
-  padding: 4,
-  display: "flex",
-  alignItems: "center"
-});
 var manageStyle = (color) => ({
   background: "transparent",
   border: "none",
@@ -3379,6 +3495,7 @@ function SwypePayment({
     loginWithCode: loginWithSmsCode,
     state: smsLoginState
   } = reactAuth.useLoginWithSms();
+  const { initOAuth } = reactAuth.useLoginWithOAuth();
   const [step, setStep] = react.useState("login");
   const [error, setError] = react.useState(null);
   const [providers, setProviders] = react.useState([]);
@@ -3427,6 +3544,14 @@ function SwypePayment({
     setVerificationTarget(null);
     setOtpCode("");
   }, []);
+  const handleSocialLogin = react.useCallback(async (provider) => {
+    setError(null);
+    try {
+      await initOAuth({ provider });
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Social login failed");
+    }
+  }, [initOAuth]);
   const activeOtpStatus = verificationTarget?.kind === "email" ? emailLoginState.status : verificationTarget?.kind === "phone" ? smsLoginState.status : "initial";
   const activeOtpErrorMessage = verificationTarget?.kind === "email" && emailLoginState.status === "error" ? emailLoginState.error?.message ?? "Failed to continue with email." : verificationTarget?.kind === "phone" && smsLoginState.status === "error" ? smsLoginState.error?.message ?? "Failed to continue with phone number." : null;
   react.useEffect(() => {
@@ -3495,6 +3620,9 @@ function SwypePayment({
         if (!token || cancelled) return;
         const { config } = await fetchUserConfig(apiBaseUrl, token);
         if (cancelled) return;
+        if (config.defaultAllowance != null) {
+          setOneTapLimit(config.defaultAllowance);
+        }
         const allPasskeys = config.passkeys ?? (config.passkey ? [config.passkey] : []);
         if (allPasskeys.length === 0) {
           setStep("create-passkey");
@@ -3852,13 +3980,15 @@ function SwypePayment({
       if (!sourceId) {
         throw new Error("No wallet selected for setup.");
       }
+      const setupAmount = depositAmount ?? MIN_SEND_AMOUNT_USD;
       const t = await createTransfer(apiBaseUrl, token, {
+        id: idempotencyKey,
         credentialId: activeCredentialId ?? "",
         merchantAuthorization,
         sourceType,
         sourceId,
         destination,
-        amount: 0
+        amount: setupAmount
       });
       if (t.authorizationSessions && t.authorizationSessions.length > 0) {
         const shouldUseConnector = shouldUseWalletConnector({
@@ -3881,6 +4011,7 @@ function SwypePayment({
     }
   }, [
     getAccessToken,
+    idempotencyKey,
     sourceId,
     sourceType,
     activeCredentialId,
@@ -3889,7 +4020,8 @@ function SwypePayment({
     merchantAuthorization,
     useWalletConnector,
     authExecutor,
-    onError
+    onError,
+    depositAmount
   ]);
   const handleSelectProvider = react.useCallback((providerId) => {
     setSelectedProviderId(providerId);
@@ -3950,7 +4082,9 @@ function SwypePayment({
         onSubmit: handleSendLoginCode,
         sending: activeOtpStatus === "sending-code",
         error,
-        onBack
+        onBack,
+        merchantInitials: merchantName ? merchantName.slice(0, 2).toUpperCase() : void 0,
+        onSocialLogin: handleSocialLogin
       }
     );
   }
@@ -4008,6 +4142,7 @@ function SwypePayment({
         sourceName,
         onSetupOneTap: handleSetupOneTap,
         onBack: () => setStep("wallet-picker"),
+        onLogout: handleLogout,
         loading: loadingData,
         error
       }
@@ -4023,6 +4158,7 @@ function SwypePayment({
         currentStepLabel: setupStepLabel,
         merchantName,
         onContinue: () => setStep("deposit"),
+        onLogout: handleLogout,
         error
       }
     );
@@ -4043,20 +4179,20 @@ function SwypePayment({
         remainingLimit: oneTapLimit,
         tokenCount,
         initialAmount: parsedAmt,
-        estimatedFeePct: 0.6,
-        estimatedFeeUsd: parsedAmt * 6e-3,
         processing: creatingTransfer,
         error,
         onDeposit: handlePay,
         onChangeSource: () => setStep("wallet-picker"),
         onSwitchWallet: () => setStep("wallet-picker"),
-        onBack: onBack ?? (() => handleLogout())
+        onBack: onBack ?? (() => handleLogout()),
+        onLogout: handleLogout
       }
     );
   }
   if (step === "processing") {
     const currentActionType = authExecutor.currentAction?.type;
-    const statusLabel = creatingTransfer ? "Creating Transfer" : mobileFlow ? "Waiting for Authorization" : authExecutor.executing ? currentActionType?.replace(/_/g, " ") ?? "Authorizing" : transferSigning.signing ? "Sending transfer" : polling.isPolling ? "Transfer Sent" : "Please wait...";
+    const polledStatus = polling.transfer?.status;
+    const statusLabel = creatingTransfer ? "Creating Transfer" : mobileFlow ? "Waiting for Authorization" : authExecutor.executing ? currentActionType?.replace(/_/g, " ") ?? "Authorizing" : transferSigning.signing ? "Sending transfer" : polledStatus === "SENDING" ? "Sending transfer..." : polledStatus === "SENT" ? "Confirming delivery..." : polling.isPolling ? "Transfer Sent" : "Please wait...";
     return /* @__PURE__ */ jsxRuntime.jsx(ScreenLayout, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { textAlign: "center", padding: "48px 0", flex: 1, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center" }, children: [
       /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 48 }),
       /* @__PURE__ */ jsxRuntime.jsx("h2", { style: { fontSize: "1.4rem", fontWeight: 700, color: tokens.text, marginTop: 20, marginBottom: 8 }, children: statusLabel }),
@@ -4086,7 +4222,8 @@ function SwypePayment({
         merchantName,
         sourceName,
         remainingLimit: oneTapLimit > displayAmount ? oneTapLimit - displayAmount : 0,
-        onDone: handleNewPayment
+        onDone: handleNewPayment,
+        onLogout: handleLogout
       }
     );
   }
@@ -4107,7 +4244,8 @@ function SwypePayment({
         onDeposit: handlePay,
         onChangeSource: () => setStep("wallet-picker"),
         onSwitchWallet: () => setStep("wallet-picker"),
-        onBack: onBack ?? (() => handleLogout())
+        onBack: onBack ?? (() => handleLogout()),
+        onLogout: handleLogout
       }
     );
   }