@swype-org/react-sdk 0.1.31 → 0.1.32

package/dist/index.js

@@ -1798,7 +1798,7 @@ function LimitSlider({
     (e) => onChange(Number(e.target.value)),
     [onChange]
   );
-  return /* @__PURE__ */ jsxs("div", { style: wrapperStyle, children: [
+  return /* @__PURE__ */ jsxs("div", { className: "swype-slider-wrap", style: wrapperStyle, children: [
     /* @__PURE__ */ jsxs("div", { style: trackContainerStyle, children: [
       /* @__PURE__ */ jsx("div", { style: trackBgStyle(tokens.border) }),
       /* @__PURE__ */ jsx("div", { style: trackFillStyle(tokens.accent, pct) }),
@@ -1812,7 +1812,7 @@ function LimitSlider({
           value,
           onChange: handleChange,
           disabled,
-          style: rangeInputStyle(tokens.accent)
+          style: rangeInputStyle
         }
       )
     ] }),
@@ -1846,17 +1846,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",
@@ -1868,10 +1870,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 {
@@ -1883,6 +1883,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 }) {
@@ -2013,6 +2028,87 @@ var detailStyle = (color) => ({
   fontSize: "0.75rem",
   color
 });
+function SettingsMenu({ onLogout }) {
+  const { tokens } = useSwypeConfig();
+  const [open, setOpen] = useState(false);
+  const menuRef = useRef(null);
+  const toggle = useCallback(() => setOpen((prev) => !prev), []);
+  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__ */ jsxs("div", { ref: menuRef, style: containerStyle7, children: [
+    /* @__PURE__ */ jsx("button", { type: "button", onClick: toggle, style: triggerStyle(tokens.text), "aria-label": "Settings", children: /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", children: [
+      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "5", r: "2", fill: "currentColor" }),
+      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "2", fill: "currentColor" }),
+      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "19", r: "2", fill: "currentColor" })
+    ] }) }),
+    open && /* @__PURE__ */ jsx("div", { style: dropdownStyle(tokens), children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => {
+          setOpen(false);
+          onLogout();
+        },
+        style: menuItemStyle(tokens),
+        children: [
+          /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { marginRight: 8, flexShrink: 0 }, children: [
+            /* @__PURE__ */ jsx("path", { d: "M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4", stroke: tokens.error, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+            /* @__PURE__ */ jsx("polyline", { points: "16 17 21 12 16 7", stroke: tokens.error, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+            /* @__PURE__ */ 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,
@@ -2500,21 +2596,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] = 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] = useState(() => Math.min(100, effectiveMax));
   return /* @__PURE__ */ jsxs(
     ScreenLayout,
     {
@@ -2531,7 +2642,7 @@ function SetupScreen({
         /* @__PURE__ */ jsx(PoweredByFooter, {})
       ] }),
       children: [
-        /* @__PURE__ */ jsx(ScreenHeader, { title: "Swype Setup", badge: "Simple", onBack }),
+        /* @__PURE__ */ jsx(ScreenHeader, { title: "Swype Setup", badge: "Simple", onBack, right: /* @__PURE__ */ jsx(SettingsMenu, { onLogout }) }),
         /* @__PURE__ */ jsx("h2", { style: headingStyle5(tokens.text), children: "Set up One-Tap deposits" }),
         /* @__PURE__ */ jsx("p", { style: subtitleStyle5(tokens.textSecondary), children: "Set your limit for instant deposits. Like a contactless card \u2014 you choose the max." }),
         error && /* @__PURE__ */ jsx("div", { style: errorBannerStyle3(tokens), children: error }),
@@ -2566,10 +2677,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
             }
           )
@@ -2689,6 +2800,7 @@ function SetupStatusScreen({
   currentStepLabel,
   merchantName,
   onContinue,
+  onLogout,
   error
 }) {
   const { tokens } = useSwypeConfig();
@@ -2706,26 +2818,29 @@ function SetupStatusScreen({
     },
     { label: "Done", status: "pending" }
   ];
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     ScreenLayout,
     {
       footer: complete ? /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(PrimaryButton, { onClick: onContinue, children: merchantName ? `Return to ${merchantName}` : "Continue" }),
         /* @__PURE__ */ jsx("p", { style: swipeHintStyle(tokens.textMuted), children: "Swipe to deposit \u2014 no approvals needed." })
       ] }) : void 0,
-      children: /* @__PURE__ */ jsxs("div", { style: contentStyle4, children: [
-        complete ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(IconCircle, { variant: "success", size: 64, children: /* @__PURE__ */ jsx("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z", fill: tokens.success }) }) }),
-          /* @__PURE__ */ jsx("h2", { style: headingStyle6(tokens.text), children: "You're all set!" })
-        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Spinner, { size: 48 }),
-          /* @__PURE__ */ jsx("h2", { style: headingStyle6(tokens.text), children: "Setting up One-Tap..." })
-        ] }),
-        error && /* @__PURE__ */ jsx("div", { style: errorBannerStyle4(tokens), children: error }),
-        /* @__PURE__ */ jsx("div", { style: stepsWrapStyle, children: /* @__PURE__ */ jsx(StepList, { steps }) }),
-        !complete && /* @__PURE__ */ jsx("p", { style: waitHintStyle(tokens.textMuted), children: "Usually takes a few seconds" }),
-        complete && /* @__PURE__ */ jsx("p", { style: readyHintStyle(tokens.textSecondary), children: "You can now deposit instantly from any partner app." })
-      ] })
+      children: [
+        /* @__PURE__ */ jsx(ScreenHeader, { right: /* @__PURE__ */ jsx(SettingsMenu, { onLogout }) }),
+        /* @__PURE__ */ jsxs("div", { style: contentStyle4, children: [
+          complete ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(IconCircle, { variant: "success", size: 64, children: /* @__PURE__ */ jsx("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z", fill: tokens.success }) }) }),
+            /* @__PURE__ */ jsx("h2", { style: headingStyle6(tokens.text), children: "You're all set!" })
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Spinner, { size: 48 }),
+            /* @__PURE__ */ jsx("h2", { style: headingStyle6(tokens.text), children: "Setting up One-Tap..." })
+          ] }),
+          error && /* @__PURE__ */ jsx("div", { style: errorBannerStyle4(tokens), children: error }),
+          /* @__PURE__ */ jsx("div", { style: stepsWrapStyle, children: /* @__PURE__ */ jsx(StepList, { steps }) }),
+          !complete && /* @__PURE__ */ jsx("p", { style: waitHintStyle(tokens.textMuted), children: "Usually takes a few seconds" }),
+          complete && /* @__PURE__ */ jsx("p", { style: readyHintStyle(tokens.textSecondary), children: "You can now deposit instantly from any partner app." })
+        ] })
+      ]
     }
   );
 }
@@ -2798,7 +2913,8 @@ function DepositScreen({
   onDeposit,
   onChangeSource,
   onSwitchWallet,
-  onBack
+  onBack,
+  onLogout
 }) {
   const { tokens } = useSwypeConfig();
   const [amount, setAmount] = useState(initialAmount);
@@ -2806,30 +2922,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 = useRef(null);
-  const [swipeX, setSwipeX] = useState(0);
-  const [swiping, setSwiping] = useState(false);
-  const startXRef = useRef(0);
-  const handleTouchStart = useCallback((e) => {
-    if (!canDeposit) return;
-    startXRef.current = e.touches[0].clientX - swipeX;
-    setSwiping(true);
-  }, [canDeposit, swipeX]);
-  const handleTouchMove = 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 = 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__ */ jsxs(
       ScreenLayout,
@@ -2841,7 +2933,7 @@ function DepositScreen({
           /* @__PURE__ */ jsx(PoweredByFooter, {})
         ] }),
         children: [
-          /* @__PURE__ */ jsx(ScreenHeader, { title: headerTitle, onBack }),
+          /* @__PURE__ */ jsx(ScreenHeader, { title: headerTitle, onBack, right: /* @__PURE__ */ jsx(SettingsMenu, { onLogout }) }),
           /* @__PURE__ */ jsx(
             SourceCard,
             {
@@ -2886,30 +2978,10 @@ function DepositScreen({
     ScreenLayout,
     {
       footer: /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            ref: trackRef,
-            style: swipeTrackStyle(tokens),
-            onTouchStart: handleTouchStart,
-            onTouchMove: handleTouchMove,
-            onTouchEnd: handleTouchEnd,
-            children: [
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  style: swipeThumbStyle(tokens, swipeX),
-                  children: /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M8 5l8 7-8 7", stroke: "#fff", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
-                }
-              ),
-              /* @__PURE__ */ jsx("span", { style: swipeLabelStyle, children: processing ? "Processing..." : `Deposit $${amount.toFixed(2)}` })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx("div", { style: desktopFallbackStyle, children: /* @__PURE__ */ jsxs(PrimaryButton, { onClick: () => onDeposit(amount), disabled: !canDeposit, loading: processing, children: [
+        /* @__PURE__ */ jsxs(PrimaryButton, { onClick: () => onDeposit(amount), disabled: !canDeposit, loading: processing, children: [
           "Deposit $",
           amount.toFixed(2)
-        ] }) }),
+        ] }),
         /* @__PURE__ */ jsx("p", { style: noApprovalStyle(tokens.textMuted), children: "No approval needed \xB7 within your One-Tap limit" }),
         /* @__PURE__ */ jsxs("p", { style: routeStyle(tokens.textMuted), children: [
           "From ",
@@ -2920,7 +2992,7 @@ function DepositScreen({
         /* @__PURE__ */ jsx(PoweredByFooter, {})
       ] }),
       children: [
-        /* @__PURE__ */ jsx(ScreenHeader, { title: headerTitle, badge: "Simple", onBack }),
+        /* @__PURE__ */ jsx(ScreenHeader, { title: headerTitle, badge: "Simple", onBack, right: /* @__PURE__ */ jsx(SettingsMenu, { onLogout }) }),
         /* @__PURE__ */ jsx(
           SourceCard,
           {
@@ -3063,45 +3135,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",
@@ -3130,6 +3163,7 @@ function SuccessScreen({
   sourceName,
   remainingLimit,
   onDone,
+  onLogout,
   onIncreaseLimits,
   onManageAccount
 }) {
@@ -3146,7 +3180,7 @@ function SuccessScreen({
         /* @__PURE__ */ jsx(
           ScreenHeader,
           {
-            right: /* @__PURE__ */ jsx("button", { type: "button", onClick: onDone, style: closeButtonStyle(tokens.textMuted), "aria-label": "Close", children: /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M18 6L6 18M6 6l12 12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }) })
+            right: /* @__PURE__ */ jsx(SettingsMenu, { onLogout })
           }
         ),
         /* @__PURE__ */ jsxs("div", { style: contentStyle5, children: [
@@ -3262,15 +3296,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",
@@ -3849,13 +3874,14 @@ 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, {
         credentialId: activeCredentialId ?? "",
         merchantAuthorization,
         sourceType,
         sourceId,
         destination,
-        amount: 0
+        amount: setupAmount
       });
       if (t.authorizationSessions && t.authorizationSessions.length > 0) {
         const shouldUseConnector = shouldUseWalletConnector({
@@ -3886,7 +3912,8 @@ function SwypePayment({
     merchantAuthorization,
     useWalletConnector,
     authExecutor,
-    onError
+    onError,
+    depositAmount
   ]);
   const handleSelectProvider = useCallback((providerId) => {
     setSelectedProviderId(providerId);
@@ -4005,6 +4032,7 @@ function SwypePayment({
         sourceName,
         onSetupOneTap: handleSetupOneTap,
         onBack: () => setStep("wallet-picker"),
+        onLogout: handleLogout,
         loading: loadingData,
         error
       }
@@ -4020,6 +4048,7 @@ function SwypePayment({
         currentStepLabel: setupStepLabel,
         merchantName,
         onContinue: () => setStep("deposit"),
+        onLogout: handleLogout,
         error
       }
     );
@@ -4047,7 +4076,8 @@ function SwypePayment({
         onDeposit: handlePay,
         onChangeSource: () => setStep("wallet-picker"),
         onSwitchWallet: () => setStep("wallet-picker"),
-        onBack: onBack ?? (() => handleLogout())
+        onBack: onBack ?? (() => handleLogout()),
+        onLogout: handleLogout
       }
     );
   }
@@ -4083,7 +4113,8 @@ function SwypePayment({
         merchantName,
         sourceName,
         remainingLimit: oneTapLimit > displayAmount ? oneTapLimit - displayAmount : 0,
-        onDone: handleNewPayment
+        onDone: handleNewPayment,
+        onLogout: handleLogout
       }
     );
   }
@@ -4104,7 +4135,8 @@ function SwypePayment({
         onDeposit: handlePay,
         onChangeSource: () => setStep("wallet-picker"),
         onSwitchWallet: () => setStep("wallet-picker"),
-        onBack: onBack ?? (() => handleLogout())
+        onBack: onBack ?? (() => handleLogout()),
+        onLogout: handleLogout
       }
     );
   }