@dynamic-labs/wagmi-connector 3.0.0-alpha.35 → 3.0.0-alpha.36

package/src/lib/Connector.js

@@ -9,11 +9,8 @@ const getCreateConnectorFn = ({ connectorId, wallet, preventWagmiSyncFromCalling
             if (!wallet.connector) {
                 throw new Error('WalletConnector is not defined');
             }
-            wallet.connector.on('accountChange', ({ accounts }) => {
-                const handler = this.onAccountsChanged.bind(this);
-                handler(accounts);
-            });
-            wallet.connector.on('chainChange', ({ chain }) => this.onChainChanged(chain));
+            wallet.connector.on('accountChange', this.handleAccountsChange.bind(this));
+            wallet.connector.on('chainChange', this.handleChainChange.bind(this));
             wallet.connector.on('disconnect', this.onDisconnect.bind(this));
             const accounts = yield this.getAccounts();
             return {
@@ -28,9 +25,9 @@ const getCreateConnectorFn = ({ connectorId, wallet, preventWagmiSyncFromCalling
                 yield wallet.connector.endSession();
                 yield handleLogOut();
             }
-            wallet.connector.off('accountChange');
-            wallet.connector.off('chainChange');
-            wallet.connector.off('disconnect');
+            wallet.connector.off('accountChange', this.handleAccountsChange.bind(this));
+            wallet.connector.off('chainChange', this.handleChainChange.bind(this));
+            wallet.connector.off('disconnect', this.onDisconnect.bind(this));
             /**
              * In our own Dynamic Wagmi sync component, we will flip the flag to true before calling disconnect,
              * and here it automatically flips back to false afterwards. This will prevent the Connector from
@@ -74,6 +71,12 @@ const getCreateConnectorFn = ({ connectorId, wallet, preventWagmiSyncFromCalling
             return wallet.getWalletClient();
         });
     },
+    handleAccountsChange({ accounts }) {
+        this.onAccountsChanged(accounts);
+    },
+    handleChainChange({ chain }) {
+        this.onChainChanged(chain);
+    },
     id: connectorId,
     isAuthorized() {
         return __awaiter(this, void 0, void 0, function* () {

package/src/lib/DynamicWagmiConnector.js

@@ -2,20 +2,19 @@
 import { jsx } from 'react/jsx-runtime';
 import { useRef, useMemo, useEffect } from 'react';
 import { useConfig } from 'wagmi';
-import { ErrorBoundaryInclude, useDynamicContext, useUserWallets, ErrorBoundaryExclude } from '@dynamic-labs/sdk-react-core';
+import { ErrorBoundaryInclude, useDynamicContext, ErrorBoundaryExclude } from '@dynamic-labs/sdk-react-core';
 import { getCreateConnectorFn } from './Connector.js';
 import { SyncDynamicWagmi } from './SyncDynamicWagmi.js';
 import { useChainMismatchLogger } from './useChainMismatchLogger.js';
-import { useFindEvmWallet } from './hooks/useFindEvmWallet/useFindEvmWallet.js';
 import { useConnectorId } from './hooks/useConnectorId/useConnectorId.js';
 
 const DynamicWagmiConnector = ({ suppressChainMismatchError = false, children, }) => (jsx(ErrorBoundaryInclude, { children: jsx(DynamicWagmiConnectorInner, { suppressChainMismatchError: true, children: children }) }));
+const isEvmWallet = (wallet) => (wallet === null || wallet === void 0 ? void 0 : wallet.connector.connectedChain) === 'EVM';
 const DynamicWagmiConnectorInner = ({ suppressChainMismatchError = false, children }) => {
     const config = useConfig();
     const { handleLogOut, primaryWallet } = useDynamicContext();
-    const wallets = useUserWallets();
     useChainMismatchLogger({ throwOnMismatch: !suppressChainMismatchError });
-    const evmWallet = useFindEvmWallet(primaryWallet);
+    const evmWallet = isEvmWallet(primaryWallet) ? primaryWallet : null;
     const getConnectorId = useConnectorId();
     /**
      * This will prevent the wagmi Connector from calling handleLogOut when we are the ones calling disconnect
@@ -44,7 +43,7 @@ const DynamicWagmiConnectorInner = ({ suppressChainMismatchError = false, childr
     useEffect(() => {
         config._internal.connectors.setState(connector ? [connector] : []);
     }, [config._internal.connectors, connector]);
-    return (jsx(SyncDynamicWagmi, { connector: connector, preventWagmiSyncFromCallingLogout: preventWagmiSyncFromCallingLogout, wallets: wallets, children: jsx(ErrorBoundaryExclude, { children: children }) }));
+    return (jsx(SyncDynamicWagmi, { connector: connector, preventWagmiSyncFromCallingLogout: preventWagmiSyncFromCallingLogout, wallet: evmWallet, children: jsx(ErrorBoundaryExclude, { children: children }) }));
 };
 
 export { DynamicWagmiConnector, DynamicWagmiConnectorInner };

package/src/lib/SyncDynamicWagmi.d.ts

@@ -3,7 +3,7 @@ import { Connector } from 'wagmi';
 import { Wallet } from '@dynamic-labs/sdk-react-core';
 export type SyncDynamicWagmiProps = React.PropsWithChildren<{
     connector: Connector | undefined;
-    wallets: Wallet[];
+    wallet: Wallet | null;
     preventWagmiSyncFromCallingLogout: MutableRefObject<boolean>;
 }>;
-export declare const SyncDynamicWagmi: ({ children, connector, wallets, preventWagmiSyncFromCallingLogout, }: SyncDynamicWagmiProps) => JSX.Element;
+export declare const SyncDynamicWagmi: ({ children, connector, wallet, preventWagmiSyncFromCallingLogout, }: SyncDynamicWagmiProps) => JSX.Element;

package/src/lib/SyncDynamicWagmi.js

@@ -1,58 +1,55 @@
 'use client'
+import { __awaiter } from '../../_virtual/_tslib.js';
 import { jsx, Fragment } from 'react/jsx-runtime';
-import { useRef, useEffect } from 'react';
+import { useRef, useCallback, useEffect } from 'react';
 import { useConfig, useConnect, useDisconnect } from 'wagmi';
-import { useDynamicContext } from '@dynamic-labs/sdk-react-core';
+import { useWalletConnectorEvent } from '@dynamic-labs/sdk-react-core';
 
-const SyncDynamicWagmi = ({ children, connector, wallets, preventWagmiSyncFromCallingLogout, }) => {
+const SyncDynamicWagmi = ({ children, connector, wallet, preventWagmiSyncFromCallingLogout, }) => {
     const { state: { status: clientStatus }, } = useConfig();
     const { connect } = useConnect();
     const { disconnect } = useDisconnect();
-    const { walletConnector } = useDynamicContext();
     const lastConnectedConnectorId = useRef(undefined);
-    useEffect(() => {
-        const isConnected = Boolean(lastConnectedConnectorId.current);
-        /**
-         * Disconnects from Wagmi when no more wallets are available
-         * and returns early to prevent re-connecting to the same connector
-         */
-        if (!wallets.length) {
-            /**
-             * Check if the connector is already disconnected to prevent
-             * disconnecting in a page transition on NextJS with multiple
-             * layouts
-             */
-            if (isConnected) {
-                /**
-                 * This will prevent the Connector from calling handleLogOut when we are the ones calling disconnect,
-                 * but will preserve the existing behavior for customers who use useDisconnect directly.
-                 */
-                preventWagmiSyncFromCallingLogout.current = true;
-                disconnect();
-                lastConnectedConnectorId.current = undefined;
-            }
-            return;
-        }
+    const hasPreviousConnection = Boolean(lastConnectedConnectorId.current);
+    const sync = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+        var _a;
+        const isConnected = (_a = (yield (wallet === null || wallet === void 0 ? void 0 : wallet.isConnected()))) !== null && _a !== void 0 ? _a : false;
         /**
          * Connects to Wagmi when a connector is available and
          * the connector has changed since the last connection
          */
-        if (walletConnector &&
+        if (isConnected &&
             connector &&
             (connector === null || connector === void 0 ? void 0 : connector.id) !== lastConnectedConnectorId.current) {
             lastConnectedConnectorId.current = connector.id;
             connect({ connector });
+            return;
+        }
+        if (!isConnected && hasPreviousConnection) {
+            /**
+             * This will prevent the Connector from calling handleLogOut when we are the ones calling disconnect,
+             * but will preserve the existing behavior for customers who use useDisconnect directly.
+             */
+            preventWagmiSyncFromCallingLogout.current = true;
+            disconnect();
+            lastConnectedConnectorId.current = undefined;
         }
-    }, [
-        clientStatus,
+    }), [
         connect,
         connector,
         disconnect,
-        lastConnectedConnectorId,
+        hasPreviousConnection,
         preventWagmiSyncFromCallingLogout,
-        walletConnector,
-        wallets,
+        wallet,
     ]);
+    // this is for handling the scenario where the user unlocks the wallet,
+    // as well as changes to a linked wallet
+    useWalletConnectorEvent(wallet === null || wallet === void 0 ? void 0 : wallet.connector, 'accountChange', () => {
+        sync();
+    });
+    useEffect(() => {
+        sync();
+    }, [sync, clientStatus]);
     // eslint-disable-next-line react/jsx-no-useless-fragment
     return jsx(Fragment, { children: children });
 };

package/src/lib/hooks/useFindEvmWallet/index.d.ts

@@ -1 +0,0 @@
-export { useFindEvmWallet } from './useFindEvmWallet';

package/src/lib/hooks/useFindEvmWallet/useFindEvmWallet.d.ts

@@ -1,2 +0,0 @@
-import { Wallet } from '@dynamic-labs/sdk-react-core';
-export declare const useFindEvmWallet: (primaryWallet: Wallet | null) => Wallet | undefined;

package/src/lib/hooks/useFindEvmWallet/useFindEvmWallet.js

@@ -1,26 +0,0 @@
-'use client'
-import { __awaiter } from '../../../../_virtual/_tslib.js';
-import { useState, useEffect } from 'react';
-
-const isEvmWallet = (wallet) => wallet.connector.connectedChain === 'EVM';
-const useFindEvmWallet = (primaryWallet) => {
-    const [wallet, setWallet] = useState(undefined);
-    const checkForConnectedEvmWallet = (wallet) => __awaiter(void 0, void 0, void 0, function* () {
-        if (!isEvmWallet(wallet)) {
-            return;
-        }
-        const isConnected = yield wallet.isConnected();
-        if (isConnected) {
-            setWallet(wallet);
-        }
-    });
-    useEffect(() => {
-        if (!primaryWallet) {
-            return;
-        }
-        checkForConnectedEvmWallet(primaryWallet);
-    }, [primaryWallet]);
-    return wallet;
-};
-
-export { useFindEvmWallet };