fix race condition with WalletConnect init finishing before sessions init

Author: moeodeh3

.changeset/six-laws-see.md

@@ -0,0 +1,9 @@
+---
+"@turnkey/core": minor
+---
+
+- Parallelized stamper and session initialization
+- Separated WalletConnect initialization from client init
+- Optimized `fetchWallet` by reducing redundant queries and running wallet/user fetches in parallel
+- Added optional `authenticatorAddresses` param to `fetchWalletAccounts()`
+- Updated to latest `@walletconnect/sign-client` for performance improvements

.changeset/wild-monkeys-report.md

@@ -0,0 +1,6 @@
+---
+"@turnkey/react-wallet-kit": minor
+---
+
+- Fixed unnecessary re-renders by ensuring all `useCallback` hooks include only direct dependencies
+- ConnectWallet and Auth model updated to show WalletConnect loading state during initialization

packages/react-wallet-kit/src/components/auth/Wallet.tsx

@@ -60,22 +60,29 @@ const canDisconnect = (
   );
 };
 
+interface ExternalWalletChainSelectorProps {
+  providers: WalletProvider[];
+  onDisconnect?: ((provider: WalletProvider) => Promise<void>) | undefined;
+  onSelect: (provider: WalletProvider) => Promise<void>;
+}
 export function ExternalWalletChainSelector(
-  props: ExternalWalletSelectorProps,
+  props: ExternalWalletChainSelectorProps,
 ) {
   const { providers, onSelect, onDisconnect } = props;
 
   const { walletProviders } = useTurnkey();
   const { isMobile, closeModal } = useModal();
 
   // we find matching providers in current state
-  const currentProviders = providers.map((inputProvider) =>
-    walletProviders.find(
-      (p) =>
-        p.interfaceType === inputProvider.interfaceType &&
-        p.chainInfo.namespace === inputProvider.chainInfo.namespace,
-    ),
-  ).filter((p): p is WalletProvider => p !== undefined);
+  const currentProviders = providers
+    .map((inputProvider) =>
+      walletProviders.find(
+        (p) =>
+          p.interfaceType === inputProvider.interfaceType &&
+          p.chainInfo.namespace === inputProvider.chainInfo.namespace,
+      ),
+    )
+    .filter((p): p is WalletProvider => p !== undefined);
 
   // if no providers are found then that means that the user entered this screen
   // while WalletConnect was still initializing, and then it failed to initialize
@@ -182,18 +189,19 @@ export function ExternalWalletChainSelector(
 }
 
 interface ExternalWalletSelectorProps {
-  providers: WalletProvider[];
   onDisconnect?: ((provider: WalletProvider) => Promise<void>) | undefined;
   onSelect: (provider: WalletProvider) => Promise<void>;
 }
 export function ExternalWalletSelector(props: ExternalWalletSelectorProps) {
-  const { providers, onDisconnect, onSelect } = props;
+  const { onDisconnect, onSelect } = props;
+
   const { pushPage, popPage, isMobile } = useModal();
+  const { walletProviders } = useTurnkey();
 
   const shouldShowDisconnect = onDisconnect !== undefined;
 
   // Group providers by name
-  const grouped = providers.reduce<Record<string, WalletProvider[]>>(
+  const grouped = walletProviders.reduce<Record<string, WalletProvider[]>>(
     (acc, provider) => {
       const name = provider.info.name;
       if (!acc[name]) acc[name] = [];
@@ -430,7 +438,6 @@ function QRCodeDisplay(props: QRCodeDisplayProps) {
 
   return (
     <div className="relative inline-block">
-      {/* @ts-expect-error: qrcode.react uses a different React type version */}
       <QRCode
         className={clsx(
           "block border border-modal-background-dark/20 dark:border-modal-background-light/20",
@@ -499,7 +506,7 @@ export function WalletConnectScreen(props: WalletConnectScreenProps) {
     }
   }, [provider, closeModal]);
 
-    const connectedAccount = provider?.connectedAddresses?.[0] ?? null;
+  const connectedAccount = provider?.connectedAddresses?.[0] ?? null;
 
   // Initial connection effect
   useEffect(() => {

packages/react-wallet-kit/src/components/auth/index.tsx

@@ -44,7 +44,6 @@ export function AuthComponent({
   const {
     config,
     clientState,
-    walletProviders,
     handleGoogleOauth,
     handleAppleOauth,
     handleFacebookOauth,
@@ -325,12 +324,7 @@ export function AuthComponent({
     try {
       pushPage({
         key: "Select wallet provider",
-        content: (
-          <ExternalWalletSelector
-            providers={walletProviders}
-            onSelect={handleSelect}
-          />
-        ),
+        content: <ExternalWalletSelector onSelect={handleSelect} />,
       });
     } catch (error) {
       throw new Error(`Error fetching wallet providers: ${error}`);

packages/react-wallet-kit/src/components/user/ConnectWallet.tsx

@@ -16,12 +16,11 @@ import {
 import { isWalletConnect } from "../../utils/utils";
 
 interface ConnectWalletModalProps {
-  providers: WalletProvider[];
   successPageDuration?: number | undefined;
   onSuccess: (type: "connect" | "disconnect", account: WalletAccount) => void;
 }
 export function ConnectWalletModal(props: ConnectWalletModalProps) {
-  const { providers, successPageDuration, onSuccess } = props;
+  const { successPageDuration, onSuccess } = props;
   const { pushPage, closeModal } = useModal();
   const { wallets, connectWalletAccount, disconnectWalletAccount } =
     useTurnkey();
@@ -132,7 +131,6 @@ export function ConnectWalletModal(props: ConnectWalletModalProps) {
   };
   return (
     <ExternalWalletSelector
-      providers={providers}
       onSelect={handleConnectWallet}
       onDisconnect={handleDisconnectWallet}
     />

packages/react-wallet-kit/src/providers/client/Provider.tsx

@@ -843,7 +843,19 @@ export const ClientProvider: React.FC<ClientProviderProps> = ({
           return;
         }
         setSession(allLocalStorageSessions[activeSessionKey]);
-        await Promise.all([refreshUser(), refreshWallets()]);
+
+        // we use `fetchWallets()` instead of `refreshWallets()` here to avoid a race condition
+        // specifically, if WalletConnect finishes initializing before this promise resolves,
+        // `refreshWallets()` could overwrite the WalletConnect wallet state with an outdated
+        // list of wallets that doesn’t yet include the WalletConnect wallets
+        const [, wallets] = await Promise.all([refreshUser(), fetchWallets()]);
+
+        // the prev wallets should only ever be WalletConnect wallets
+        if (wallets) {
+          setWallets((prev) => [...prev, ...wallets]);
+        }
+
+        console.log("finished fetching wallets inside initializeSessions");
 
         return;
       }
@@ -1013,8 +1025,9 @@ export const ClientProvider: React.FC<ClientProviderProps> = ({
 
               // if we have an active session, we need to restore any possibly connected
               // WalletConnect wallets since its now initialized
-              if (session) {
-                const wcProviders = providers.filter(
+              const currentSession = await getSession();
+              if (currentSession) {
+                const wcProviders = providers?.filter(
                   (p) => p.interfaceType === WalletInterfaceType.WalletConnect,
                 );
 
@@ -5277,14 +5290,11 @@ export const ClientProvider: React.FC<ClientProviderProps> = ({
         );
       }
 
-      const providers = await fetchWalletProviders();
-
       return new Promise((resolve, reject) => {
         pushPage({
           key: "Connect wallet",
           content: (
             <ConnectWalletModal
-              providers={providers}
               successPageDuration={successPageDuration}
               onSuccess={(
                 type: "connect" | "disconnect",