@swype-org/react-sdk 0.1.132 → 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
       }
     );
@@ -6663,7 +6720,13 @@ 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 (pendingTokenAuthSessionRef.current) {
         const pending = pendingTokenAuthSessionRef.current;
@@ -6703,7 +6766,7 @@ function SwypePaymentInner({
     } finally {
       setSavingOneTapLimit(false);
     }
-  }, [getAccessToken, apiBaseUrl, authExecutor, reloadAccounts, onError]);
+  }, [getAccessToken, apiBaseUrl, authExecutor, reloadAccounts, onError, selectSourceChainName, selectSourceTokenSymbol]);
   const handleNewPayment = react.useCallback(() => {
     clearMobileFlowState();
     processingStartedAtRef.current = null;
@@ -7234,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;
@@ -7260,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(() => {
@@ -7358,6 +7406,7 @@ function SwypePaymentInner({
       selectSourceChainName,
       selectSourceTokenSymbol,
       savingOneTapLimit,
+      pendingSetup: !!pendingSelectSourceAction || !!pendingOneTapSetupAction,
       merchantName,
       onBack,
       onDismiss,