@swype-org/react-sdk 0.1.131 → 0.1.133

package/dist/index.cjs

@@ -4251,7 +4251,9 @@ function DepositScreen({
   onSelectAccount,
   onAuthorizeAccount,
   onAddProvider,
-  onSelectToken
+  onSelectToken,
+  pendingSetup,
+  onStartSetup
 }) {
   const { tokens } = useSwypeConfig();
   const amount = initialAmount;
@@ -4259,6 +4261,29 @@ function DepositScreen({
   const exceedsLimit = amount > remainingLimit && !isLowBalance;
   const canDeposit = amount >= MIN_DEPOSIT && !exceedsLimit && !isLowBalance && !processing;
   const headerTitle = merchantName ? `Deposit to ${merchantName}` : "Deposit";
+  if (pendingSetup) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      ScreenLayout,
+      {
+        footer: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(PrimaryButton, { onClick: onStartSetup, children: "Set up One-Tap" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { style: setupHintStyle(tokens.textSecondary), children: "Choose your source and set your One-Tap limit to deposit instantly." }),
+          /* @__PURE__ */ jsxRuntime.jsx(PoweredByFooter, {})
+        ] }),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { title: headerTitle, right: /* @__PURE__ */ jsxRuntime.jsx(SettingsMenu, { onLogout }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: setupContentStyle, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { style: amountDisplayStyle, children: /* @__PURE__ */ jsxRuntime.jsxs("span", { style: amountStyle(tokens), children: [
+              "$",
+              amount.toFixed(2)
+            ] }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { style: setupDescStyle(tokens.textSecondary), children: "Set up your payment source to deposit with One-Tap \u2014 no approvals needed after setup." })
+          ] }),
+          error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: errorBannerStyle5(tokens), children: error })
+        ]
+      }
+    );
+  }
   if (isLowBalance) {
     return /* @__PURE__ */ jsxRuntime.jsxs(
       ScreenLayout,
@@ -4521,6 +4546,29 @@ var switchHintStyle = (color) => ({
 var outlineBtnWrapStyle = {
   marginBottom: 8
 };
+var setupContentStyle = {
+  flex: 1,
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+  textAlign: "center",
+  padding: "0 24px"
+};
+var setupDescStyle = (color) => ({
+  fontSize: "0.88rem",
+  color,
+  margin: "8px 0 0",
+  lineHeight: 1.6,
+  maxWidth: 300
+});
+var setupHintStyle = (color) => ({
+  textAlign: "center",
+  fontSize: "0.78rem",
+  color,
+  margin: "12px 0 2px",
+  lineHeight: 1.5
+});
 function SuccessScreen({
   amount,
   currency,
@@ -4728,6 +4776,7 @@ function SelectSourceScreen({
   onChainChange,
   onTokenChange,
   onConfirm,
+  onBack,
   onLogout
 }) {
   const { tokens } = useSwypeConfig();
@@ -4746,6 +4795,7 @@ function SelectSourceScreen({
           ScreenHeader,
           {
             title: "Select Source",
+            onBack,
             right: /* @__PURE__ */ jsxRuntime.jsx(SettingsMenu, { onLogout })
           }
         ),
@@ -5618,6 +5668,7 @@ function StepRenderer({
   selectSourceChainName,
   selectSourceTokenSymbol,
   savingOneTapLimit,
+  pendingSetup,
   merchantName,
   onBack,
   onDismiss,
@@ -5734,6 +5785,8 @@ function StepRenderer({
     );
   }
   if (step === "setup") {
+    const hasPendingSelectSource = selectSourceChoices.length > 0;
+    const setupSourceLabel = hasPendingSelectSource && selectSourceChainName && selectSourceTokenSymbol ? `${selectSourceTokenSymbol} on ${selectSourceChainName}` : selectedSourceLabel;
     return /* @__PURE__ */ jsxRuntime.jsx(
       SetupScreen,
       {
@@ -5743,8 +5796,8 @@ function StepRenderer({
         onSetupOneTap: handlers.onSetupOneTap,
         onBack: () => handlers.onNavigate("deposit"),
         onLogout: handlers.onLogout,
-        onAdvanced: handlers.onSelectToken,
-        selectedSourceLabel,
+        onAdvanced: hasPendingSelectSource ? () => handlers.onNavigate("select-source") : handlers.onSelectToken,
+        selectedSourceLabel: setupSourceLabel,
         loading: savingOneTapLimit,
         error: state.error
       }
@@ -5792,7 +5845,9 @@ function StepRenderer({
         onSelectAccount: handlers.onSelectAccount,
         onAuthorizeAccount: handlers.onContinueConnection,
         onAddProvider: () => handlers.onNavigate("wallet-picker"),
-        onSelectToken: handlers.onSelectToken
+        onSelectToken: handlers.onSelectToken,
+        pendingSetup,
+        onStartSetup: () => handlers.onNavigate("setup")
       }
     );
   }
@@ -5824,6 +5879,7 @@ function StepRenderer({
     );
   }
   if (step === "select-source") {
+    const enteredFromSetup = state.previousStep === "setup";
     return /* @__PURE__ */ jsxRuntime.jsx(
       SelectSourceScreen,
       {
@@ -5833,7 +5889,8 @@ function StepRenderer({
         recommended: selectSourceRecommended,
         onChainChange: handlers.onSelectSourceChainChange,
         onTokenChange: handlers.onSetSelectSourceTokenSymbol,
-        onConfirm: handlers.onConfirmSelectSource,
+        onConfirm: enteredFromSetup ? () => handlers.onNavigate("setup") : handlers.onConfirmSelectSource,
+        onBack: enteredFromSetup ? () => handlers.onNavigate("setup") : void 0,
         onLogout: handlers.onLogout
       }
     );
@@ -6008,6 +6065,7 @@ function SwypePaymentInner({
   const preSelectSourceStepRef = react.useRef(null);
   const pendingTokenAuthRef = react.useRef(null);
   const pendingTokenSelectionRef = react.useRef(null);
+  const pendingTokenAuthSessionRef = react.useRef(null);
   const reauthSessionIdRef = react.useRef(null);
   const reauthTokenRef = react.useRef(null);
   const checkingPasskeyRef = react.useRef(false);
@@ -6506,10 +6564,14 @@ function SwypePaymentInner({
         dispatch({ type: "MOBILE_DEEPLINK_READY", deeplinkUri: session.uri });
         triggerDeeplink(session.uri);
       } else {
-        dispatch({ type: "NAVIGATE", step: "setup-status" });
-        await authExecutor.executeSessionById(session.id);
-        await reloadAccounts();
-        pendingTokenSelectionRef.current = { walletId: _walletId, tokenSymbol };
+        pendingTokenAuthSessionRef.current = {
+          sessionId: session.id,
+          walletId: _walletId,
+          tokenSymbol,
+          tokenAddress,
+          chainId
+        };
+        dispatch({ type: "SELECT_TOKEN", walletId: _walletId, tokenSymbol });
         dispatch({ type: "NAVIGATE", step: "setup" });
       }
     } catch (err) {
@@ -6658,12 +6720,40 @@ function SwypePaymentInner({
       const token = await getAccessToken();
       if (!token) throw new Error("Not authenticated");
       await updateUserConfig(apiBaseUrl, token, { defaultAllowance: limit });
-      if (authExecutor.pendingOneTapSetup) {
+      if (authExecutor.pendingSelectSource) {
+        authExecutor.resolveSelectSource({
+          chainName: selectSourceChainName,
+          tokenSymbol: selectSourceTokenSymbol
+        });
+        dispatch({ type: "NAVIGATE", step: "setup-status" });
+      } else if (authExecutor.pendingOneTapSetup) {
         authExecutor.resolveOneTapSetup();
-      } else if (pendingTokenSelectionRef.current) {
-        const sel = pendingTokenSelectionRef.current;
-        pendingTokenSelectionRef.current = null;
-        dispatch({ type: "SELECT_TOKEN", walletId: sel.walletId, tokenSymbol: sel.tokenSymbol });
+      } else if (pendingTokenAuthSessionRef.current) {
+        const pending = pendingTokenAuthSessionRef.current;
+        pendingTokenAuthSessionRef.current = null;
+        pendingTokenAuthRef.current = {
+          tokenAddress: pending.tokenAddress,
+          chainId: pending.chainId,
+          tokenSymbol: pending.tokenSymbol,
+          walletId: pending.walletId
+        };
+        dispatch({ type: "SET_INCREASING_LIMIT", value: true });
+        dispatch({ type: "NAVIGATE", step: "setup-status" });
+        try {
+          await authExecutor.executeSessionById(pending.sessionId);
+          await reloadAccounts();
+          dispatch({ type: "SELECT_TOKEN", walletId: pending.walletId, tokenSymbol: pending.tokenSymbol });
+        } catch (authErr) {
+          captureException(authErr);
+          dispatch({
+            type: "SET_ERROR",
+            error: authErr instanceof Error ? authErr.message : "Failed to authorize token"
+          });
+          dispatch({ type: "NAVIGATE", step: "deposit" });
+        } finally {
+          pendingTokenAuthRef.current = null;
+          dispatch({ type: "SET_INCREASING_LIMIT", value: false });
+        }
       } else {
         dispatch({ type: "NAVIGATE", step: "deposit" });
       }
@@ -6676,13 +6766,14 @@ function SwypePaymentInner({
     } finally {
       setSavingOneTapLimit(false);
     }
-  }, [getAccessToken, apiBaseUrl, authExecutor]);
+  }, [getAccessToken, apiBaseUrl, authExecutor, reloadAccounts, onError, selectSourceChainName, selectSourceTokenSymbol]);
   const handleNewPayment = react.useCallback(() => {
     clearMobileFlowState();
     processingStartedAtRef.current = null;
     pollingTransferIdRef.current = null;
     preSelectSourceStepRef.current = null;
     pendingTokenSelectionRef.current = null;
+    pendingTokenAuthSessionRef.current = null;
     dispatch({
       type: "NEW_PAYMENT",
       depositAmount,
@@ -6701,6 +6792,7 @@ function SwypePaymentInner({
     polling.stopPolling();
     preSelectSourceStepRef.current = null;
     pendingTokenSelectionRef.current = null;
+    pendingTokenAuthSessionRef.current = null;
     checkingPasskeyRef.current = false;
     setAuthInput("");
     setOtpCode("");
@@ -7205,24 +7297,9 @@ function SwypePaymentInner({
         userAgent: typeof navigator === "undefined" ? void 0 : navigator.userAgent
       });
       if (isDesktop && state.step === "setup-status") {
-        const recommended = pendingSelectSourceAction.metadata?.recommended;
-        const options = pendingSelectSourceAction.metadata?.options ?? [];
-        let chainName;
-        let tokenSymbol;
-        if (pendingTokenAuthRef.current) {
-          const { tokenAddress, chainId } = pendingTokenAuthRef.current;
-          const chainIdHex = `0x${chainId.toString(16)}`;
-          const match = options.find(
-            (opt) => opt.tokenAddress.toLowerCase() === tokenAddress.toLowerCase() && opt.chainId.toLowerCase() === chainIdHex.toLowerCase()
-          );
-          chainName = match?.chainName ?? recommended?.chainName ?? "Base";
-          tokenSymbol = match?.tokenSymbol ?? recommended?.tokenSymbol ?? "USDC";
-        } else {
-          const choices = buildSelectSourceChoices(options);
-          chainName = recommended?.chainName ?? choices[0]?.chainName ?? "Base";
-          tokenSymbol = recommended?.tokenSymbol ?? choices[0]?.tokens[0]?.tokenSymbol ?? "USDC";
-        }
-        authExecutor.resolveSelectSource({ chainName, tokenSymbol });
+        reloadAccounts().then(() => {
+          dispatch({ type: "NAVIGATE", step: "deposit" });
+        });
         return;
       }
       preSelectSourceStepRef.current = state.step;
@@ -7231,7 +7308,7 @@ function SwypePaymentInner({
       dispatch({ type: "NAVIGATE", step: preSelectSourceStepRef.current ?? "processing" });
       preSelectSourceStepRef.current = null;
     }
-  }, [pendingSelectSourceAction, state.step, authExecutor, useWalletConnectorProp]);
+  }, [pendingSelectSourceAction, state.step, authExecutor, useWalletConnectorProp, reloadAccounts]);
   const pendingOneTapSetupAction = authExecutor.pendingOneTapSetup;
   const preOneTapSetupStepRef = react.useRef(null);
   react.useEffect(() => {
@@ -7329,6 +7406,7 @@ function SwypePaymentInner({
       selectSourceChainName,
       selectSourceTokenSymbol,
       savingOneTapLimit,
+      pendingSetup: !!pendingSelectSourceAction || !!pendingOneTapSetupAction,
       merchantName,
       onBack,
       onDismiss,