@swype-org/react-sdk 0.1.155 → 0.1.157

package/dist/index.js

@@ -3429,6 +3429,7 @@ function WalletPickerScreen({
   providers,
   pendingConnections,
   loading,
+  onPrepareProvider,
   onSelectProvider,
   onContinueConnection,
   onBack
@@ -3437,6 +3438,27 @@ function WalletPickerScreen({
   const [hoveredId, setHoveredId] = useState(null);
   const [selectedProviderId, setSelectedProviderId] = useState(null);
   const [cryptoExpanded, setCryptoExpanded] = useState(false);
+  const [connecting, setConnecting] = useState(false);
+  const [preparedSession, setPreparedSession] = useState(null);
+  const [preparing, setPreparing] = useState(false);
+  const prepareIdRef = useRef(0);
+  const handleCardClick = useCallback(async (providerId) => {
+    setSelectedProviderId(providerId);
+    setPreparedSession(null);
+    setPreparing(true);
+    const id = ++prepareIdRef.current;
+    try {
+      const session = await onPrepareProvider(providerId);
+      if (prepareIdRef.current !== id) return;
+      if (session) {
+        setPreparedSession({ ...session, providerId });
+      }
+    } finally {
+      if (prepareIdRef.current === id) {
+        setPreparing(false);
+      }
+    }
+  }, [onPrepareProvider]);
   const hasPending = pendingConnections != null && pendingConnections.length > 0;
   const displayProviders = providers.length > 0 ? providers : [
     { id: "metamask", name: "MetaMask" },
@@ -3455,11 +3477,23 @@ function WalletPickerScreen({
     ScreenLayout,
     {
       footer: /* @__PURE__ */ jsxs(Fragment, { children: [
-        selectedProvider && /* @__PURE__ */ jsxs(PrimaryButton, { onClick: () => onSelectProvider(selectedProvider.id), children: [
-          "Open ",
-          selectedProvider.name,
-          " to Link"
-        ] }),
+        selectedProvider && /* @__PURE__ */ jsx(
+          PrimaryButton,
+          {
+            onClick: async () => {
+              setConnecting(true);
+              try {
+                const session = preparedSession?.providerId === selectedProvider.id ? preparedSession : void 0;
+                await onSelectProvider(selectedProvider.id, session);
+              } finally {
+                setConnecting(false);
+              }
+            },
+            loading: connecting || preparing,
+            disabled: preparing,
+            children: preparing ? "Preparing..." : `Open ${selectedProvider.name} to Link`
+          }
+        ),
         /* @__PURE__ */ jsx(PoweredByFooter, {})
       ] }),
       children: [
@@ -3536,7 +3570,7 @@ function WalletPickerScreen({
           return /* @__PURE__ */ jsxs(
             "button",
             {
-              onClick: () => setSelectedProviderId(p.id),
+              onClick: () => handleCardClick(p.id),
               onMouseEnter: () => setHoveredId(p.id),
               onMouseLeave: () => setHoveredId(null),
               style: cardStyle(tokens, isHovered, isSelected),
@@ -5557,6 +5591,7 @@ function StepRenderer({
         providers: state.providers,
         pendingConnections,
         loading: state.creatingTransfer,
+        onPrepareProvider: handlers.onPrepareProvider,
         onSelectProvider: handlers.onSelectProvider,
         onContinueConnection: handlers.onContinueConnection,
         onBack: () => handlers.onNavigate(state.activeCredentialId ? "deposit" : "create-passkey")
@@ -6503,25 +6538,14 @@ function useProviderHandlers(deps) {
     reauthSessionIdRef,
     reauthTokenRef
   } = deps;
-  const handleSelectProvider = useCallback(async (providerId) => {
-    dispatch({ type: "SELECT_PROVIDER", providerId });
+  const handlePrepareProvider = useCallback(async (providerId) => {
     if (!activeCredentialId) {
       dispatch({ type: "SET_ERROR", error: "Create or verify a passkey on this device before continuing." });
       dispatch({ type: "NAVIGATE", step: "create-passkey" });
-      return;
+      return null;
     }
     const provider = providers.find((p) => p.id === providerId);
     const providerName = provider?.name ?? "Wallet";
-    const isMobile = !shouldUseWalletConnector({
-      useWalletConnector: useWalletConnectorProp,
-      userAgent: typeof navigator === "undefined" ? void 0 : navigator.userAgent
-    });
-    if (isMobile) {
-      dispatch({ type: "PAY_STARTED", isSetupRedirect: true });
-    } else {
-      dispatch({ type: "PAY_STARTED", isSetupRedirect: false });
-      dispatch({ type: "NAVIGATE", step: "setup-status" });
-    }
     try {
       const token = await getAccessToken();
       if (!token) throw new Error("Not authenticated");
@@ -6534,21 +6558,71 @@ function useProviderHandlers(deps) {
       });
       const session = account.authorizationSessions?.[0];
       if (!session) throw new Error("No authorization session returned.");
+      return { accountId: account.id, sessionId: session.id, uri: session.uri };
+    } 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);
+      return null;
+    }
+  }, [activeCredentialId, providers, apiBaseUrl, getAccessToken, onError, dispatch]);
+  const handleSelectProvider = useCallback(async (providerId, preparedSession) => {
+    dispatch({ type: "SELECT_PROVIDER", providerId });
+    if (!activeCredentialId) {
+      dispatch({ type: "SET_ERROR", error: "Create or verify a passkey on this device before continuing." });
+      dispatch({ type: "NAVIGATE", step: "create-passkey" });
+      return;
+    }
+    const provider = providers.find((p) => p.id === providerId);
+    const providerName = provider?.name ?? "Wallet";
+    const isMobile = !shouldUseWalletConnector({
+      useWalletConnector: useWalletConnectorProp,
+      userAgent: typeof navigator === "undefined" ? void 0 : navigator.userAgent
+    });
+    if (!isMobile) {
+      dispatch({ type: "PAY_STARTED", isSetupRedirect: false });
+      dispatch({ type: "NAVIGATE", step: "setup-status" });
+    }
+    try {
+      let accountId;
+      let sessionId;
+      let sessionUri;
+      if (preparedSession) {
+        accountId = preparedSession.accountId;
+        sessionId = preparedSession.sessionId;
+        sessionUri = preparedSession.uri;
+      } else {
+        const token = await getAccessToken();
+        if (!token) throw new Error("Not authenticated");
+        const newAccountId = crypto.randomUUID();
+        const account = await createAccount(apiBaseUrl, token, {
+          id: newAccountId,
+          name: providerName,
+          credentialId: activeCredentialId,
+          providerId
+        });
+        const session = account.authorizationSessions?.[0];
+        if (!session) throw new Error("No authorization session returned.");
+        accountId = account.id;
+        sessionId = session.id;
+        sessionUri = session.uri;
+      }
       if (isMobile) {
         handlingMobileReturnRef.current = false;
         mobileSetupFlowRef.current = true;
-        setupAccountIdRef.current = account.id;
+        setupAccountIdRef.current = accountId;
         persistMobileFlowState({
-          accountId: account.id,
-          sessionId: session.id,
-          deeplinkUri: session.uri,
+          accountId,
+          sessionId,
+          deeplinkUri: sessionUri,
           providerId,
           isSetup: true
         });
-        dispatch({ type: "MOBILE_DEEPLINK_READY", deeplinkUri: session.uri });
-        triggerDeeplink(session.uri);
+        triggerDeeplink(sessionUri);
+        dispatch({ type: "MOBILE_DEEPLINK_READY", deeplinkUri: sessionUri });
       } else {
-        await authExecutor.executeSessionById(session.id);
+        await authExecutor.executeSessionById(sessionId);
         await reloadAccounts();
         dispatch({ type: "NAVIGATE", step: "deposit" });
       }
@@ -6558,7 +6632,9 @@ function useProviderHandlers(deps) {
       dispatch({ type: "PAY_ERROR", error: msg, fallbackStep: "wallet-picker" });
       onError?.(msg);
     } finally {
-      dispatch({ type: "PAY_ENDED" });
+      if (!isMobile) {
+        dispatch({ type: "PAY_ENDED" });
+      }
     }
   }, [
     activeCredentialId,
@@ -6776,6 +6852,7 @@ function useProviderHandlers(deps) {
     reauthTokenRef
   ]);
   return {
+    handlePrepareProvider,
     handleSelectProvider,
     handleContinueConnection,
     handleSelectAccount,
@@ -7634,6 +7711,7 @@ function SwypePaymentInner({
     onRegisterPasskey: passkey.handleRegisterPasskey,
     onCreatePasskeyViaPopup: passkey.handleCreatePasskeyViaPopup,
     onVerifyPasskeyViaPopup: passkey.handleVerifyPasskeyViaPopup,
+    onPrepareProvider: provider.handlePrepareProvider,
     onSelectProvider: provider.handleSelectProvider,
     onContinueConnection: provider.handleContinueConnection,
     onSelectAccount: provider.handleSelectAccount,