@swype-org/react-sdk 0.1.98 → 0.1.102

package/dist/index.cjs

@@ -159,7 +159,9 @@ function useSwypeDepositAmount() {
 // src/api.ts
 var api_exports = {};
 __export(api_exports, {
+  createAccount: () => createAccount,
   createTransfer: () => createTransfer,
+  fetchAccount: () => fetchAccount,
   fetchAccounts: () => fetchAccounts,
   fetchAuthorizationSession: () => fetchAuthorizationSession,
   fetchChains: () => fetchChains,
@@ -206,6 +208,32 @@ async function fetchAccounts(apiBaseUrl, token, credentialId) {
   const data = await res.json();
   return data.items;
 }
+async function fetchAccount(apiBaseUrl, token, accountId, credentialId) {
+  const params = new URLSearchParams({ credentialId });
+  const res = await fetch(`${apiBaseUrl}/v1/accounts/${accountId}?${params.toString()}`, {
+    headers: { Authorization: `Bearer ${token}` }
+  });
+  if (!res.ok) await throwApiError(res);
+  return await res.json();
+}
+async function createAccount(apiBaseUrl, token, params) {
+  const body = {
+    id: params.id ?? crypto.randomUUID(),
+    name: params.name,
+    credentialId: params.credentialId,
+    providerId: params.providerId
+  };
+  const res = await fetch(`${apiBaseUrl}/v1/accounts`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${token}`
+    },
+    body: JSON.stringify(body)
+  });
+  if (!res.ok) await throwApiError(res);
+  return await res.json();
+}
 async function createTransfer(apiBaseUrl, token, params) {
   if (!params.merchantAuthorization) {
     throw new Error("merchantAuthorization is required for transfer creation.");
@@ -1470,15 +1498,6 @@ function useAuthorizationExecutor(options) {
     },
     [apiBaseUrl, dispatchAction]
   );
-  const executeSession = react.useCallback(
-    async (transfer) => {
-      if (!transfer.authorizationSessions?.length) {
-        throw new Error("No authorization sessions available.");
-      }
-      await executeSessionById(transfer.authorizationSessions[0].id);
-    },
-    [executeSessionById]
-  );
   return {
     executing,
     results,
@@ -1486,8 +1505,7 @@ function useAuthorizationExecutor(options) {
     currentAction,
     pendingSelectSource,
     resolveSelectSource,
-    executeSessionById,
-    executeSession
+    executeSessionById
   };
 }
 function useTransferSigning(pollIntervalMs = 2e3, options) {
@@ -1845,16 +1863,13 @@ function buildSelectSourceChoices(options) {
 
 // src/paymentReducer.ts
 function deriveSourceTypeAndId(state) {
-  if (state.connectingNewAccount) {
-    return { sourceType: "providerId", sourceId: state.selectedProviderId ?? "" };
-  }
   if (state.selectedWalletId) {
     return { sourceType: "walletId", sourceId: state.selectedWalletId };
   }
   if (state.selectedAccountId) {
     return { sourceType: "accountId", sourceId: state.selectedAccountId };
   }
-  return { sourceType: "providerId", sourceId: state.selectedProviderId ?? "" };
+  return { sourceType: "accountId", sourceId: "" };
 }
 function createInitialState(config) {
   return {
@@ -1864,10 +1879,9 @@ function createInitialState(config) {
     accounts: [],
     chains: [],
     loadingData: false,
+    selectedProviderId: null,
     selectedAccountId: null,
     selectedWalletId: null,
-    selectedProviderId: null,
-    connectingNewAccount: false,
     amount: config.depositAmount != null ? config.depositAmount.toString() : "",
     transfer: null,
     creatingTransfer: false,
@@ -1932,8 +1946,6 @@ function paymentReducer(state, action) {
       if (action.defaults) {
         next.selectedAccountId = action.defaults.accountId;
         next.selectedWalletId = action.defaults.walletId;
-      } else if (action.fallbackProviderId && !state.connectingNewAccount) {
-        next.selectedProviderId = action.fallbackProviderId;
       }
       if (action.clearMobileState) {
         next.mobileFlow = false;
@@ -1955,7 +1967,6 @@ function paymentReducer(state, action) {
       if (action.defaults) {
         next.selectedAccountId = action.defaults.accountId;
         next.selectedWalletId = action.defaults.walletId;
-        next.connectingNewAccount = false;
       }
       return next;
     }
@@ -1965,14 +1976,13 @@ function paymentReducer(state, action) {
         ...state,
         selectedProviderId: action.providerId,
         selectedAccountId: null,
-        connectingNewAccount: true
+        selectedWalletId: null
       };
     case "SELECT_ACCOUNT":
       return {
         ...state,
         selectedAccountId: action.accountId,
         selectedWalletId: action.walletId,
-        connectingNewAccount: false,
         step: "deposit"
       };
     // ── Transfer lifecycle ───────────────────────────────────────
@@ -2035,7 +2045,7 @@ function paymentReducer(state, action) {
     case "MOBILE_SETUP_COMPLETE":
       return {
         ...state,
-        transfer: action.transfer,
+        transfer: action.transfer ?? state.transfer,
         error: null,
         mobileFlow: false,
         deeplinkUri: null,
@@ -2057,7 +2067,7 @@ function paymentReducer(state, action) {
         ...state,
         mobileFlow: true,
         deeplinkUri: action.deeplinkUri,
-        selectedProviderId: action.providerId,
+        selectedProviderId: action.providerId ?? state.selectedProviderId,
         error: action.error ?? null,
         step: "open-wallet"
       };
@@ -2113,7 +2123,7 @@ function paymentReducer(state, action) {
         amount: action.depositAmount != null ? action.depositAmount.toString() : "",
         mobileFlow: false,
         deeplinkUri: null,
-        connectingNewAccount: false,
+        selectedProviderId: null,
         selectedWalletId: null,
         selectedAccountId: action.firstAccountId
       };
@@ -5131,6 +5141,7 @@ function SwypePaymentInner({
   );
   const loadingDataRef = react.useRef(false);
   const pollingTransferIdRef = react.useRef(null);
+  const setupAccountIdRef = react.useRef(null);
   const mobileSetupFlowRef = react.useRef(false);
   const handlingMobileReturnRef = react.useRef(false);
   const processingStartedAtRef = react.useRef(null);
@@ -5263,11 +5274,11 @@ function SwypePaymentInner({
       accounts: state.accounts,
       persistedMobileFlow: loadMobileFlowState(),
       mobileSetupInProgress: mobileSetupFlowRef.current,
-      connectingNewAccount: state.connectingNewAccount
+      connectingNewAccount: false
     });
     if (resolved.clearPersistedFlow) clearMobileFlowState();
     dispatch({ type: "NAVIGATE", step: resolved.step });
-  }, [getAccessToken, apiBaseUrl, state.accounts, state.connectingNewAccount]);
+  }, [getAccessToken, apiBaseUrl, state.accounts]);
   const handleRegisterPasskey = react.useCallback(async () => {
     dispatch({ type: "SET_REGISTERING_PASSKEY", value: true });
     dispatch({ type: "SET_ERROR", error: null });
@@ -5312,7 +5323,7 @@ function SwypePaymentInner({
         accounts: state.accounts,
         persistedMobileFlow: loadMobileFlowState(),
         mobileSetupInProgress: mobileSetupFlowRef.current,
-        connectingNewAccount: state.connectingNewAccount
+        connectingNewAccount: false
       });
       if (resolved.clearPersistedFlow) clearMobileFlowState();
       dispatch({ type: "NAVIGATE", step: resolved.step });
@@ -5325,7 +5336,7 @@ function SwypePaymentInner({
     } finally {
       dispatch({ type: "SET_REGISTERING_PASSKEY", value: false });
     }
-  }, [user, getAccessToken, apiBaseUrl, state.accounts, state.connectingNewAccount]);
+  }, [user, getAccessToken, apiBaseUrl, state.accounts]);
   const handleVerifyPasskeyViaPopup = react.useCallback(async () => {
     dispatch({ type: "SET_VERIFYING_PASSKEY", value: true });
     dispatch({ type: "SET_ERROR", error: null });
@@ -5349,7 +5360,7 @@ function SwypePaymentInner({
           accounts: state.accounts,
           persistedMobileFlow: loadMobileFlowState(),
           mobileSetupInProgress: mobileSetupFlowRef.current,
-          connectingNewAccount: state.connectingNewAccount
+          connectingNewAccount: false
         });
         if (resolved.clearPersistedFlow) clearMobileFlowState();
         dispatch({ type: "NAVIGATE", step: resolved.step });
@@ -5368,7 +5379,7 @@ function SwypePaymentInner({
     } finally {
       dispatch({ type: "SET_VERIFYING_PASSKEY", value: false });
     }
-  }, [state.knownCredentialIds, getAccessToken, apiBaseUrl, state.accounts, state.connectingNewAccount]);
+  }, [state.knownCredentialIds, getAccessToken, apiBaseUrl, state.accounts]);
   const reloadAccounts = react.useCallback(async () => {
     const token = await getAccessToken();
     if (!token || !state.activeCredentialId) return;
@@ -5420,8 +5431,7 @@ function SwypePaymentInner({
       dispatch({ type: "NAVIGATE", step: "create-passkey" });
       return;
     }
-    const isSetupRedirect = mobileSetupFlowRef.current;
-    dispatch({ type: "PAY_STARTED", isSetupRedirect });
+    dispatch({ type: "PAY_STARTED", isSetupRedirect: false });
     processingStartedAtRef.current = Date.now();
     try {
       if (state.transfer?.status === "AUTHORIZED") {
@@ -5442,23 +5452,6 @@ function SwypePaymentInner({
           effectiveSourceId = activeWallet.id;
         }
       }
-      const isActiveWallet = effectiveSourceType === "walletId" && state.accounts.some(
-        (a) => a.wallets.some((w) => w.id === effectiveSourceId && w.status === "ACTIVE")
-      );
-      if (!isActiveWallet && !isSetupRedirect) {
-        let found = false;
-        for (const acct of state.accounts) {
-          for (const wallet of acct.wallets) {
-            if (wallet.status === "ACTIVE" && wallet.sources.some((s) => s.balance.available.amount >= payAmount)) {
-              effectiveSourceType = "walletId";
-              effectiveSourceId = wallet.id;
-              found = true;
-              break;
-            }
-          }
-          if (found) break;
-        }
-      }
       const t = await createTransfer(apiBaseUrl, token, {
         id: idempotencyKey,
         credentialId: state.activeCredentialId,
@@ -5469,27 +5462,14 @@ function SwypePaymentInner({
         amount: payAmount
       });
       dispatch({ type: "TRANSFER_CREATED", transfer: t });
-      if (t.authorizationSessions && t.authorizationSessions.length > 0) {
-        const useConnector = shouldUseWalletConnector({
-          useWalletConnector: useWalletConnectorProp,
-          userAgent: typeof navigator === "undefined" ? void 0 : navigator.userAgent
-        });
-        if (!useConnector) {
-          const uri = t.authorizationSessions[0].uri;
-          pollingTransferIdRef.current = t.id;
-          polling.startPolling(t.id);
-          dispatch({ type: "MOBILE_DEEPLINK_READY", deeplinkUri: uri });
-          persistMobileFlowState({
-            transferId: t.id,
-            deeplinkUri: uri,
-            providerId: sourceOverrides?.sourceType === "providerId" ? sourceOverrides.sourceId : state.selectedProviderId,
-            isSetup: mobileSetupFlowRef.current
-          });
-          triggerDeeplink(uri);
-          return;
-        } else {
-          await authExecutor.executeSession(t);
-        }
+      if (t.status === "COMPLETED") {
+        dispatch({ type: "TRANSFER_COMPLETED", transfer: t });
+        onComplete?.(t);
+        return;
+      }
+      if (t.status === "FAILED") {
+        dispatch({ type: "TRANSFER_FAILED", transfer: t, error: "Transfer failed." });
+        return;
       }
       const signedTransfer = await transferSigning.signTransfer(t.id);
       dispatch({ type: "TRANSFER_SIGNED", transfer: signedTransfer });
@@ -5500,7 +5480,7 @@ function SwypePaymentInner({
       dispatch({
         type: "PAY_ERROR",
         error: msg,
-        fallbackStep: isSetupRedirect ? "wallet-picker" : "deposit"
+        fallbackStep: "deposit"
       });
       onError?.(msg);
     } finally {
@@ -5512,15 +5492,13 @@ function SwypePaymentInner({
     state.activeCredentialId,
     state.transfer,
     state.accounts,
-    state.selectedProviderId,
     destination,
     apiBaseUrl,
     getAccessToken,
-    authExecutor,
     transferSigning,
     polling,
     onError,
-    useWalletConnectorProp,
+    onComplete,
     idempotencyKey,
     merchantAuthorization
   ]);
@@ -5551,7 +5529,6 @@ function SwypePaymentInner({
         }
       }
       const t = await createTransfer(apiBaseUrl, token, {
-        id: idempotencyKey,
         credentialId: state.activeCredentialId,
         merchantAuthorization,
         sourceType: effectiveSourceType,
@@ -5559,23 +5536,7 @@ function SwypePaymentInner({
         destination,
         amount: parsedAmount
       });
-      if (t.authorizationSessions && t.authorizationSessions.length > 0) {
-        const uri = t.authorizationSessions[0].uri;
-        pollingTransferIdRef.current = t.id;
-        mobileSetupFlowRef.current = true;
-        handlingMobileReturnRef.current = false;
-        polling.startPolling(t.id);
-        dispatch({ type: "INCREASE_LIMIT_DEEPLINK", transfer: t, deeplinkUri: uri });
-        persistMobileFlowState({
-          transferId: t.id,
-          deeplinkUri: uri,
-          providerId: state.selectedProviderId,
-          isSetup: true
-        });
-        triggerDeeplink(uri);
-      } else {
-        dispatch({ type: "TRANSFER_CREATED", transfer: t });
-      }
+      dispatch({ type: "TRANSFER_CREATED", transfer: t });
     } catch (err) {
       captureException(err);
       const msg = err instanceof Error ? err.message : "Failed to increase limit";
@@ -5590,12 +5551,10 @@ function SwypePaymentInner({
     sourceType,
     state.activeCredentialId,
     state.accounts,
-    state.selectedProviderId,
     apiBaseUrl,
     getAccessToken,
     polling,
     onError,
-    idempotencyKey,
     merchantAuthorization,
     destination
   ]);
@@ -5627,31 +5586,78 @@ function SwypePaymentInner({
       polling.startPolling(transferIdToResume);
     }
   }, [handleAuthorizedMobileReturn, polling, state.transfer]);
-  const handleSelectProvider = react.useCallback((providerId) => {
+  const handleSelectProvider = react.useCallback(async (providerId) => {
     dispatch({ type: "SELECT_PROVIDER", providerId });
-    const isMobile = !shouldUseWalletConnector({
-      useWalletConnector: useWalletConnectorProp,
-      userAgent: typeof navigator === "undefined" ? void 0 : navigator.userAgent
-    });
-    if (isMobile) {
-      handlingMobileReturnRef.current = false;
-      mobileSetupFlowRef.current = true;
-      const amount = depositAmount ?? 5;
-      handlePay(amount, { sourceType: "providerId", sourceId: providerId });
-    } else {
-      dispatch({ type: "NAVIGATE", step: "deposit" });
+    if (!state.activeCredentialId) {
+      dispatch({ type: "SET_ERROR", error: "Create a passkey on this device before continuing." });
+      dispatch({ type: "NAVIGATE", step: "create-passkey" });
+      return;
+    }
+    const provider = state.providers.find((p) => p.id === providerId);
+    const providerName = provider?.name ?? "Wallet";
+    dispatch({ type: "PAY_STARTED", isSetupRedirect: true });
+    try {
+      const token = await getAccessToken();
+      if (!token) throw new Error("Not authenticated");
+      const accountId = crypto.randomUUID();
+      const account = await createAccount(apiBaseUrl, token, {
+        id: accountId,
+        name: providerName,
+        credentialId: state.activeCredentialId,
+        providerId
+      });
+      const session = account.authorizationSessions?.[0];
+      if (!session) throw new Error("No authorization session returned.");
+      const isMobile = !shouldUseWalletConnector({
+        useWalletConnector: useWalletConnectorProp,
+        userAgent: typeof navigator === "undefined" ? void 0 : navigator.userAgent
+      });
+      if (isMobile) {
+        handlingMobileReturnRef.current = false;
+        mobileSetupFlowRef.current = true;
+        setupAccountIdRef.current = account.id;
+        persistMobileFlowState({
+          accountId: account.id,
+          sessionId: session.id,
+          deeplinkUri: session.uri,
+          providerId,
+          isSetup: true
+        });
+        dispatch({ type: "MOBILE_DEEPLINK_READY", deeplinkUri: session.uri });
+        triggerDeeplink(session.uri);
+      } else {
+        await authExecutor.executeSessionById(session.id);
+        await reloadAccounts();
+        dispatch({ type: "NAVIGATE", step: "deposit" });
+      }
+    } catch (err) {
+      captureException(err);
+      const msg = err instanceof Error ? err.message : "Failed to set up wallet";
+      dispatch({ type: "PAY_ERROR", error: msg, fallbackStep: "wallet-picker" });
+      onError?.(msg);
+    } finally {
+      dispatch({ type: "PAY_ENDED" });
     }
-  }, [useWalletConnectorProp, depositAmount, handlePay]);
+  }, [
+    state.activeCredentialId,
+    state.providers,
+    apiBaseUrl,
+    getAccessToken,
+    authExecutor,
+    useWalletConnectorProp,
+    reloadAccounts,
+    onError
+  ]);
   const handleContinueConnection = react.useCallback(
     (accountId) => {
       const acct = state.accounts.find((a) => a.id === accountId);
-      dispatch({
-        type: "SELECT_ACCOUNT",
-        accountId,
-        walletId: acct?.wallets[0]?.id ?? null
-      });
+      if (!acct) return;
+      const matchedProvider = state.providers.find((p) => p.name === acct.name);
+      if (matchedProvider) {
+        handleSelectProvider(matchedProvider.id);
+      }
     },
-    [state.accounts]
+    [state.accounts, state.providers, handleSelectProvider]
   );
   const handleNewPayment = react.useCallback(() => {
     clearMobileFlowState();
@@ -5751,7 +5757,7 @@ function SwypePaymentInner({
         connectingNewAccount: false
       });
       if (resolved.clearPersistedFlow) clearMobileFlowState();
-      if (resolved.step === "deposit" && persisted && persisted.isSetup) {
+      if (resolved.step === "deposit" && persisted && persisted.isSetup && persisted.transferId) {
         try {
           const existingTransfer = await fetchTransfer(apiBaseUrl, token, persisted.transferId);
           if (cancelled) return;
@@ -5762,7 +5768,12 @@ function SwypePaymentInner({
         } catch {
         }
       }
-      if (resolved.step === "open-wallet" && persisted) {
+      if (resolved.step === "open-wallet" && persisted && persisted.accountId && !persisted.transferId) {
+        clearMobileFlowState();
+        dispatch({ type: "NAVIGATE", step: "deposit" });
+        return;
+      }
+      if (resolved.step === "open-wallet" && persisted && persisted.transferId) {
         try {
           const existingTransfer = await fetchTransfer(apiBaseUrl, token, persisted.transferId);
           if (cancelled) return;
@@ -5808,9 +5819,9 @@ function SwypePaymentInner({
             providerId: persisted.providerId,
             error: err instanceof Error ? err.message : "Unable to refresh wallet authorization status."
           });
-          pollingTransferIdRef.current = persisted.transferId;
+          pollingTransferIdRef.current = persisted.transferId ?? null;
           mobileSetupFlowRef.current = persisted.isSetup;
-          pollingRef.current.startPolling(persisted.transferId);
+          if (persisted.transferId) pollingRef.current.startPolling(persisted.transferId);
           return;
         }
         dispatch({
@@ -5818,9 +5829,9 @@ function SwypePaymentInner({
           deeplinkUri: persisted.deeplinkUri,
           providerId: persisted.providerId
         });
-        pollingTransferIdRef.current = persisted.transferId;
+        pollingTransferIdRef.current = persisted.transferId ?? null;
         mobileSetupFlowRef.current = persisted.isSetup;
-        pollingRef.current.startPolling(persisted.transferId);
+        if (persisted.transferId) pollingRef.current.startPolling(persisted.transferId);
         return;
       }
       dispatch({ type: "NAVIGATE", step: resolved.step });
@@ -5927,7 +5938,7 @@ function SwypePaymentInner({
           accounts: accts,
           persistedMobileFlow: persisted,
           mobileSetupInProgress: mobileSetupFlowRef.current,
-          connectingNewAccount: state.connectingNewAccount
+          connectingNewAccount: false
         });
         const correctableSteps = ["deposit", "wallet-picker", "open-wallet"];
         dispatch({
@@ -5936,7 +5947,6 @@ function SwypePaymentInner({
           accounts: accts,
           chains: chn,
           defaults,
-          fallbackProviderId: !defaults && prov.length > 0 ? prov[0].id : null,
           resolvedStep: correctableSteps.includes(state.step) ? resolved.step : void 0,
           clearMobileState: resolved.clearPersistedFlow
         });
@@ -5968,8 +5978,7 @@ function SwypePaymentInner({
     apiBaseUrl,
     getAccessToken,
     state.activeCredentialId,
-    depositAmount,
-    state.connectingNewAccount
+    depositAmount
   ]);
   react.useEffect(() => {
     if (!polling.transfer) return;
@@ -6018,6 +6027,46 @@ function SwypePaymentInner({
     if (!polledTransfer || polledTransfer.status !== "AUTHORIZED") return;
     void handleAuthorizedMobileReturn(polledTransfer, mobileSetupFlowRef.current);
   }, [state.mobileFlow, polling.transfer, handleAuthorizedMobileReturn]);
+  react.useEffect(() => {
+    if (!state.mobileFlow || !mobileSetupFlowRef.current) return;
+    if (state.step !== "open-wallet") return;
+    if (!state.activeCredentialId || !setupAccountIdRef.current) return;
+    const accountId = setupAccountIdRef.current;
+    const credentialId = state.activeCredentialId;
+    let cancelled = false;
+    const POLL_INTERVAL_MS = 3e3;
+    const poll = async () => {
+      try {
+        const token = await getAccessTokenRef.current();
+        if (!token || cancelled) return;
+        const acct = await fetchAccount(apiBaseUrl, token, accountId, credentialId);
+        if (cancelled) return;
+        const hasActive = acct.wallets.some((w) => w.status === "ACTIVE");
+        if (hasActive) {
+          cancelled = true;
+          mobileSetupFlowRef.current = false;
+          setupAccountIdRef.current = null;
+          clearMobileFlowState();
+          await reloadAccounts();
+          dispatch({ type: "MOBILE_SETUP_COMPLETE" });
+        }
+      } catch {
+      }
+    };
+    poll();
+    const intervalId = window.setInterval(poll, POLL_INTERVAL_MS);
+    const handleVisibility = () => {
+      if (document.visibilityState === "visible" && !cancelled) {
+        poll();
+      }
+    };
+    document.addEventListener("visibilitychange", handleVisibility);
+    return () => {
+      cancelled = true;
+      window.clearInterval(intervalId);
+      document.removeEventListener("visibilitychange", handleVisibility);
+    };
+  }, [state.mobileFlow, state.step, state.activeCredentialId, apiBaseUrl, reloadAccounts]);
   react.useEffect(() => {
     if (!state.mobileFlow) return;
     if (handlingMobileReturnRef.current) return;