@swype-org/react-sdk 0.1.33 → 0.1.35

package/dist/index.cjs

@@ -1727,7 +1727,7 @@ var circleStyle = (bg, size) => ({
 function OtpInput({ value, onChange, length = 6, disabled }) {
   const { tokens } = useSwypeConfig();
   const inputsRef = react.useRef([]);
-  const digits = value.padEnd(length, "").split("").slice(0, length);
+  const digits = value.padEnd(length).split("").slice(0, length);
   const focusInput = react.useCallback((index) => {
     const clamped = Math.max(0, Math.min(index, length - 1));
     inputsRef.current[clamped]?.focus();
@@ -3011,8 +3011,7 @@ function DepositScreen({
   onLogout
 }) {
   const { tokens } = useSwypeConfig();
-  const [amount, setAmount] = react.useState(initialAmount);
-  const sliderMax = Math.min(remainingLimit, availableBalance, 500);
+  const amount = initialAmount;
   const isLowBalance = availableBalance < MIN_DEPOSIT;
   const canDeposit = amount >= MIN_DEPOSIT && amount <= remainingLimit && !isLowBalance && !processing;
   const headerTitle = merchantName ? `Deposit to ${merchantName}` : "Deposit";
@@ -3124,17 +3123,6 @@ function DepositScreen({
             /* @__PURE__ */ jsxRuntime.jsx("span", { style: chevronStyle2, children: ">" })
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          LimitSlider,
-          {
-            value: amount,
-            min: MIN_DEPOSIT,
-            max: sliderMax > MIN_DEPOSIT ? sliderMax : 20,
-            step: 0.5,
-            ticks: [MIN_DEPOSIT, 1, 5, 10, 20].filter((t) => t <= sliderMax || t <= 20),
-            onChange: setAmount
-          }
-        ),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { style: detailsStyle, children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { style: detailRowStyle(tokens.textMuted), children: [
             "Remaining limit: ",
@@ -3259,14 +3247,45 @@ function SuccessScreen({
   onDone,
   onLogout,
   onIncreaseLimits,
-  onManageAccount
+  onManageAccount,
+  autoCloseSeconds
 }) {
   const { tokens } = useSwypeConfig();
+  const [countdown, setCountdown] = react.useState(autoCloseSeconds ?? 0);
+  const doneCalledRef = react.useRef(false);
+  const handleDone = react.useCallback(() => {
+    if (doneCalledRef.current) return;
+    doneCalledRef.current = true;
+    onDone();
+  }, [onDone]);
+  react.useEffect(() => {
+    if (!autoCloseSeconds || autoCloseSeconds <= 0) return;
+    const intervalId = window.setInterval(() => {
+      setCountdown((prev) => {
+        if (prev <= 1) {
+          window.clearInterval(intervalId);
+          return 0;
+        }
+        return prev - 1;
+      });
+    }, 1e3);
+    return () => window.clearInterval(intervalId);
+  }, [autoCloseSeconds]);
+  react.useEffect(() => {
+    if (autoCloseSeconds && countdown === 0) {
+      handleDone();
+    }
+  }, [autoCloseSeconds, countdown, handleDone]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     ScreenLayout,
     {
       footer: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(PrimaryButton, { onClick: onDone, children: "Done" }),
+        /* @__PURE__ */ jsxRuntime.jsx(PrimaryButton, { onClick: handleDone, children: "Done" }),
+        autoCloseSeconds != null && autoCloseSeconds > 0 && /* @__PURE__ */ jsxRuntime.jsxs("p", { style: countdownStyle(tokens.textMuted), children: [
+          "Returning to app in ",
+          countdown,
+          "s\u2026"
+        ] }),
         onManageAccount && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: onManageAccount, style: manageStyle(tokens.textMuted), children: "Manage Swype account \u2192" }),
         /* @__PURE__ */ jsxRuntime.jsx(PoweredByFooter, {})
       ] }),
@@ -3390,6 +3409,12 @@ var upsellLinkStyle = (color) => ({
   fontFamily: "inherit",
   padding: 0
 });
+var countdownStyle = (color) => ({
+  fontSize: "0.82rem",
+  color,
+  margin: "10px 0 0",
+  textAlign: "center"
+});
 var manageStyle = (color) => ({
   background: "transparent",
   border: "none",
@@ -3403,6 +3428,233 @@ var manageStyle = (color) => ({
   textAlign: "center",
   padding: "12px 0 0"
 });
+function SelectSourceScreen({
+  choices,
+  selectedChainName,
+  selectedTokenSymbol,
+  recommended,
+  onChainChange,
+  onTokenChange,
+  onConfirm,
+  onLogout
+}) {
+  const { tokens } = useSwypeConfig();
+  const selectedChain = choices.find((c) => c.chainName === selectedChainName) ?? choices[0];
+  const tokenChoices = selectedChain?.tokens ?? [];
+  const canConfirm = !!selectedChainName && !!selectedTokenSymbol;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    ScreenLayout,
+    {
+      footer: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(PrimaryButton, { onClick: onConfirm, disabled: !canConfirm, children: "Confirm source" }),
+        /* @__PURE__ */ jsxRuntime.jsx(PoweredByFooter, {})
+      ] }),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ScreenHeader,
+          {
+            title: "Select Source",
+            right: /* @__PURE__ */ jsxRuntime.jsx(SettingsMenu, { onLogout })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle7(tokens.textMuted), children: "Choose which chain and token to pay from." }),
+        /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle2(tokens.textSecondary), children: "Chain" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: optionListStyle, children: choices.map((chain) => {
+          const isSelected = chain.chainName === selectedChainName;
+          const isRecommended = chain.chainName === recommended?.chainName;
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => onChainChange(chain.chainName),
+              style: optionButtonStyle(tokens, isSelected),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { style: optionContentStyle, children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("span", { style: optionNameStyle(tokens.text), children: [
+                    chain.chainName,
+                    isRecommended && /* @__PURE__ */ jsxRuntime.jsx("span", { style: recommendedBadgeStyle(tokens.accent), children: " recommended" })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("span", { style: optionBalanceStyle(tokens.textMuted), children: [
+                    "$",
+                    chain.balance.toFixed(2)
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { style: radioStyle(tokens, isSelected), children: isSelected && /* @__PURE__ */ jsxRuntime.jsx("div", { style: radioDotStyle(tokens.accent) }) })
+              ]
+            },
+            chain.chainName
+          );
+        }) }),
+        tokenChoices.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle2(tokens.textSecondary), children: "Token" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: optionListStyle, children: tokenChoices.map((token) => {
+            const isSelected = token.tokenSymbol === selectedTokenSymbol;
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => onTokenChange(token.tokenSymbol),
+                style: optionButtonStyle(tokens, isSelected),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: optionContentStyle, children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { style: optionNameStyle(tokens.text), children: token.tokenSymbol }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("span", { style: optionBalanceStyle(tokens.textMuted), children: [
+                      "$",
+                      token.balance.toFixed(2)
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { style: radioStyle(tokens, isSelected), children: isSelected && /* @__PURE__ */ jsxRuntime.jsx("div", { style: radioDotStyle(tokens.accent) }) })
+                ]
+              },
+              token.tokenSymbol
+            );
+          }) })
+        ] })
+      ]
+    }
+  );
+}
+var subtitleStyle7 = (color) => ({
+  fontSize: "0.85rem",
+  color,
+  margin: "0 0 20px",
+  lineHeight: 1.5
+});
+var labelStyle2 = (color) => ({
+  display: "block",
+  fontSize: "0.75rem",
+  fontWeight: 600,
+  color,
+  textTransform: "uppercase",
+  letterSpacing: "0.05em",
+  marginBottom: 8
+});
+var optionListStyle = {
+  display: "flex",
+  flexDirection: "column",
+  gap: 8,
+  marginBottom: 20
+};
+var optionButtonStyle = (tokens, selected) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  padding: "14px 16px",
+  background: tokens.bgInput,
+  border: `1.5px solid ${selected ? tokens.accent : tokens.border}`,
+  borderRadius: 14,
+  cursor: "pointer",
+  fontFamily: "inherit",
+  textAlign: "left",
+  transition: "border-color 0.15s ease"
+});
+var optionContentStyle = {
+  display: "flex",
+  flexDirection: "column",
+  gap: 2
+};
+var optionNameStyle = (color) => ({
+  fontSize: "0.9rem",
+  fontWeight: 600,
+  color
+});
+var recommendedBadgeStyle = (color) => ({
+  fontSize: "0.7rem",
+  fontWeight: 500,
+  color,
+  marginLeft: 6
+});
+var optionBalanceStyle = (color) => ({
+  fontSize: "0.78rem",
+  color
+});
+var radioStyle = (tokens, selected) => ({
+  width: 20,
+  height: 20,
+  borderRadius: "50%",
+  border: `2px solid ${selected ? tokens.accent : tokens.border}`,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  flexShrink: 0
+});
+var radioDotStyle = (color) => ({
+  width: 10,
+  height: 10,
+  borderRadius: "50%",
+  background: color
+});
+var STEP_LABELS = ["Creating transfer", "Verifying", "Sent", "Done"];
+var PHASE_ACTIVE_INDEX = {
+  creating: 0,
+  verifying: 1,
+  sent: 2,
+  done: 4
+};
+function buildSteps(phase) {
+  const activeIdx = PHASE_ACTIVE_INDEX[phase];
+  return STEP_LABELS.map((label, i) => ({
+    label,
+    status: i < activeIdx ? "complete" : i === activeIdx ? "active" : "pending"
+  }));
+}
+function TransferStatusScreen({
+  phase,
+  error,
+  onLogout
+}) {
+  const { tokens } = useSwypeConfig();
+  const steps = buildSteps(phase);
+  return /* @__PURE__ */ jsxRuntime.jsxs(ScreenLayout, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { right: /* @__PURE__ */ jsxRuntime.jsx(SettingsMenu, { onLogout }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle6, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 48 }),
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle8(tokens.text), children: "Processing Transfer..." }),
+      error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: errorBannerStyle6(tokens), children: error }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: stepsWrapStyle2, children: /* @__PURE__ */ jsxRuntime.jsx(StepList, { steps }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { style: waitHintStyle2(tokens.textMuted), children: "Usually takes a few seconds" })
+    ] })
+  ] });
+}
+var contentStyle6 = {
+  flex: 1,
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+  textAlign: "center",
+  padding: "0 24px"
+};
+var headingStyle8 = (color) => ({
+  fontSize: "1.45rem",
+  fontWeight: 700,
+  letterSpacing: "-0.02em",
+  color,
+  margin: "20px 0 16px"
+});
+var errorBannerStyle6 = (tokens) => ({
+  background: tokens.errorBg,
+  border: `1px solid ${tokens.error}66`,
+  borderRadius: 16,
+  padding: "11px 14px",
+  color: tokens.error,
+  fontSize: "0.84rem",
+  marginBottom: 14,
+  lineHeight: 1.5,
+  width: "100%",
+  textAlign: "left"
+});
+var stepsWrapStyle2 = {
+  width: "100%",
+  maxWidth: 280,
+  textAlign: "left",
+  marginBottom: 16
+};
+var waitHintStyle2 = (color) => ({
+  fontSize: "0.82rem",
+  color,
+  margin: 0
+});
 var ACTIVE_CREDENTIAL_STORAGE_KEY = "swype_active_credential_id";
 var MIN_SEND_AMOUNT_USD = 0.25;
 function computeSmartDefaults(accts, transferAmount) {
@@ -3481,7 +3733,9 @@ function SwypePayment({
   idempotencyKey,
   merchantAuthorization,
   merchantName,
-  onBack
+  onBack,
+  onDismiss,
+  autoCloseSeconds
 }) {
   const { apiBaseUrl, tokens, depositAmount } = useSwypeConfig();
   const { ready, authenticated, user, logout, getAccessToken } = reactAuth.usePrivy();
@@ -3529,6 +3783,7 @@ function SwypePayment({
   const [selectSourceChainName, setSelectSourceChainName] = react.useState("");
   const [selectSourceTokenSymbol, setSelectSourceTokenSymbol] = react.useState("");
   const initializedSelectSourceActionRef = react.useRef(null);
+  const preSelectSourceStepRef = react.useRef(null);
   const authExecutor = useAuthorizationExecutor();
   const polling = useTransferPolling();
   const transferSigning = useTransferSigning();
@@ -3544,7 +3799,7 @@ function SwypePayment({
     setVerificationTarget(null);
     setOtpCode("");
   }, []);
-  const handleSocialLogin = react.useCallback(async (provider) => {
+  react.useCallback(async (provider) => {
     setError(null);
     try {
       await initOAuth({ provider });
@@ -3807,6 +4062,44 @@ function SwypePayment({
     }
     initializedSelectSourceActionRef.current = pendingSelectSourceAction.id;
   }, [pendingSelectSourceAction, selectSourceChoices, selectSourceRecommended]);
+  react.useEffect(() => {
+    if (pendingSelectSourceAction && (step === "processing" || step === "setup-status")) {
+      preSelectSourceStepRef.current = step;
+      setStep("select-source");
+    } else if (!pendingSelectSourceAction && step === "select-source") {
+      setStep(preSelectSourceStepRef.current ?? "processing");
+      preSelectSourceStepRef.current = null;
+    }
+  }, [pendingSelectSourceAction, step]);
+  const SETUP_ACTION_LABELS = react.useMemo(() => ({
+    OPEN_PROVIDER: "Connecting wallet",
+    SELECT_SOURCE: "Selecting source",
+    SWITCH_CHAIN: "Switching network",
+    APPROVE_PERMIT2: "Approving tokens",
+    SIGN_PERMIT2: "Signing permit",
+    DEPLOY_SMART_ACCOUNT: "Setting up account",
+    CREATE_SMART_ACCOUNT: "Creating account"
+  }), []);
+  react.useEffect(() => {
+    if (step !== "setup-status") return;
+    const actionType = authExecutor.currentAction?.type;
+    if (!actionType) return;
+    const label = SETUP_ACTION_LABELS[actionType];
+    if (label) setSetupStepLabel(label);
+  }, [step, authExecutor.currentAction, SETUP_ACTION_LABELS]);
+  const handleSelectSourceChainChange = react.useCallback(
+    (chainName) => {
+      setSelectSourceChainName(chainName);
+      const chain = selectSourceChoices.find((c) => c.chainName === chainName);
+      if (!chain || chain.tokens.length === 0) return;
+      const recommendedToken = selectSourceRecommended?.chainName === chainName ? selectSourceRecommended.tokenSymbol : null;
+      const hasRecommended = !!recommendedToken && chain.tokens.some((t) => t.tokenSymbol === recommendedToken);
+      setSelectSourceTokenSymbol(
+        hasRecommended ? recommendedToken : chain.tokens[0].tokenSymbol
+      );
+    },
+    [selectSourceChoices, selectSourceRecommended]
+  );
   const selectedAccount = accounts.find((a) => a.id === selectedAccountId);
   const selectedWallet = selectedAccount?.wallets.find((w) => w.id === selectedWalletId);
   const sourceName = selectedAccount?.name ?? selectedWallet?.chain.name ?? "Wallet";
@@ -3972,7 +4265,7 @@ function SwypePayment({
     setOneTapLimit(limit);
     setStep("setup-status");
     setSetupComplete(false);
-    setSetupStepLabel("Approving tokens");
+    setSetupStepLabel("Preparing");
     setError(null);
     try {
       const token = await getAccessToken();
@@ -4083,8 +4376,7 @@ function SwypePayment({
         sending: activeOtpStatus === "sending-code",
         error,
         onBack,
-        merchantInitials: merchantName ? merchantName.slice(0, 2).toUpperCase() : void 0,
-        onSocialLogin: handleSocialLogin
+        merchantInitials: merchantName ? merchantName.slice(0, 2).toUpperCase() : void 0
       }
     );
   }
@@ -4111,6 +4403,9 @@ function SwypePayment({
       }
     );
   }
+  if ((step === "login" || step === "otp-verify") && authenticated) {
+    return /* @__PURE__ */ jsxRuntime.jsx(ScreenLayout, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { textAlign: "center", padding: "48px 0", flex: 1, display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsxRuntime.jsx(Spinner, { label: "Verifying your passkey..." }) }) });
+  }
   if (step === "create-passkey") {
     return /* @__PURE__ */ jsxRuntime.jsx(
       CreatePasskeyScreen,
@@ -4176,7 +4471,7 @@ function SwypePayment({
         sourceAddress,
         sourceVerified,
         availableBalance: maxSourceBalance,
-        remainingLimit: oneTapLimit,
+        remainingLimit: selectedAccount?.remainingAllowance ?? oneTapLimit,
         tokenCount,
         initialAmount: parsedAmt,
         processing: creatingTransfer,
@@ -4190,25 +4485,36 @@ function SwypePayment({
     );
   }
   if (step === "processing") {
-    const currentActionType = authExecutor.currentAction?.type;
     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 }),
-      (error || authExecutor.error || transferSigning.error || polling.error) && /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
-        background: tokens.errorBg,
-        border: `1px solid ${tokens.error}66`,
-        borderRadius: 16,
-        padding: "11px 14px",
-        color: tokens.error,
-        fontSize: "0.84rem",
-        marginTop: 16,
-        lineHeight: 1.5,
-        textAlign: "left",
-        maxWidth: 340
-      }, children: error || authExecutor.error || transferSigning.error || polling.error })
-    ] }) });
+    const transferPhase = creatingTransfer ? "creating" : mobileFlow || authExecutor.executing || transferSigning.signing ? "verifying" : polledStatus === "SENDING" || polledStatus === "SENT" || polling.isPolling ? "sent" : "creating";
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      TransferStatusScreen,
+      {
+        phase: transferPhase,
+        error: error || authExecutor.error || transferSigning.error || polling.error,
+        onLogout: handleLogout
+      }
+    );
+  }
+  if (step === "select-source") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      SelectSourceScreen,
+      {
+        choices: selectSourceChoices,
+        selectedChainName: selectSourceChainName,
+        selectedTokenSymbol: selectSourceTokenSymbol,
+        recommended: selectSourceRecommended,
+        onChainChange: handleSelectSourceChainChange,
+        onTokenChange: setSelectSourceTokenSymbol,
+        onConfirm: () => {
+          authExecutor.resolveSelectSource({
+            chainName: selectSourceChainName,
+            tokenSymbol: selectSourceTokenSymbol
+          });
+        },
+        onLogout: handleLogout
+      }
+    );
   }
   if (step === "success") {
     transfer?.status === "COMPLETED";
@@ -4221,9 +4527,13 @@ function SwypePayment({
         currency: displayCurrency,
         merchantName,
         sourceName,
-        remainingLimit: oneTapLimit > displayAmount ? oneTapLimit - displayAmount : 0,
-        onDone: handleNewPayment,
-        onLogout: handleLogout
+        remainingLimit: (() => {
+          const limit = selectedAccount?.remainingAllowance ?? oneTapLimit;
+          return limit > displayAmount ? limit - displayAmount : 0;
+        })(),
+        onDone: onDismiss ?? handleNewPayment,
+        onLogout: handleLogout,
+        autoCloseSeconds
       }
     );
   }
@@ -4236,7 +4546,7 @@ function SwypePayment({
         sourceAddress,
         sourceVerified,
         availableBalance: 0,
-        remainingLimit: oneTapLimit,
+        remainingLimit: selectedAccount?.remainingAllowance ?? oneTapLimit,
         tokenCount,
         initialAmount: depositAmount ?? 5,
         processing: false,