@swype-org/react-sdk 0.1.156 → 0.1.158

package/dist/index.cjs

@@ -3432,6 +3432,7 @@ function WalletPickerScreen({
   providers,
   pendingConnections,
   loading,
+  onPrepareProvider,
   onSelectProvider,
   onContinueConnection,
   onBack
@@ -3441,6 +3442,26 @@ function WalletPickerScreen({
   const [selectedProviderId, setSelectedProviderId] = react.useState(null);
   const [cryptoExpanded, setCryptoExpanded] = react.useState(false);
   const [connecting, setConnecting] = react.useState(false);
+  const [preparedSession, setPreparedSession] = react.useState(null);
+  const [preparing, setPreparing] = react.useState(false);
+  const prepareIdRef = react.useRef(0);
+  const handleCardClick = react.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" },
@@ -3459,23 +3480,23 @@ function WalletPickerScreen({
     ScreenLayout,
     {
       footer: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        selectedProvider && /* @__PURE__ */ jsxRuntime.jsxs(
+        selectedProvider && /* @__PURE__ */ jsxRuntime.jsx(
           PrimaryButton,
           {
-            onClick: async () => {
-              setConnecting(true);
-              try {
-                await onSelectProvider(selectedProvider.id);
-              } finally {
-                setConnecting(false);
+            onClick: () => {
+              const session = preparedSession?.providerId === selectedProvider.id ? preparedSession : void 0;
+              if (session) {
+                const opened = window.open(session.uri, "_blank");
+                if (!opened && window === window.parent) {
+                  window.location.href = session.uri;
+                }
               }
+              setConnecting(true);
+              onSelectProvider(selectedProvider.id, session).finally(() => setConnecting(false));
             },
-            loading: connecting,
-            children: [
-              "Open ",
-              selectedProvider.name,
-              " to Link"
-            ]
+            loading: connecting || preparing,
+            disabled: preparing,
+            children: preparing ? "Preparing..." : `Open ${selectedProvider.name} to Link`
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(PoweredByFooter, {})
@@ -3554,7 +3575,7 @@ function WalletPickerScreen({
           return /* @__PURE__ */ jsxRuntime.jsxs(
             "button",
             {
-              onClick: () => setSelectedProviderId(p.id),
+              onClick: () => handleCardClick(p.id),
               onMouseEnter: () => setHoveredId(p.id),
               onMouseLeave: () => setHoveredId(null),
               style: cardStyle(tokens, isHovered, isSelected),
@@ -5575,6 +5596,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")
@@ -6521,23 +6543,14 @@ function useProviderHandlers(deps) {
     reauthSessionIdRef,
     reauthTokenRef
   } = deps;
-  const handleSelectProvider = react.useCallback(async (providerId) => {
-    dispatch({ type: "SELECT_PROVIDER", providerId });
+  const handlePrepareProvider = react.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: false });
-      dispatch({ type: "NAVIGATE", step: "setup-status" });
-    }
     try {
       const token = await getAccessToken();
       if (!token) throw new Error("Not authenticated");
@@ -6550,21 +6563,73 @@ 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 = react.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
         });
-        triggerDeeplink(session.uri);
-        dispatch({ type: "MOBILE_DEEPLINK_READY", deeplinkUri: session.uri });
+        if (!preparedSession) {
+          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" });
       }
@@ -6794,6 +6859,7 @@ function useProviderHandlers(deps) {
     reauthTokenRef
   ]);
   return {
+    handlePrepareProvider,
     handleSelectProvider,
     handleContinueConnection,
     handleSelectAccount,
@@ -7652,6 +7718,7 @@ function SwypePaymentInner({
     onRegisterPasskey: passkey.handleRegisterPasskey,
     onCreatePasskeyViaPopup: passkey.handleCreatePasskeyViaPopup,
     onVerifyPasskeyViaPopup: passkey.handleVerifyPasskeyViaPopup,
+    onPrepareProvider: provider.handlePrepareProvider,
     onSelectProvider: provider.handleSelectProvider,
     onContinueConnection: provider.handleContinueConnection,
     onSelectAccount: provider.handleSelectAccount,