@dynamic-labs/wagmi-connector 3.0.0-alpha.9 → 3.0.0

package/src/lib/Connector.js

@@ -3,18 +3,16 @@ import { __awaiter } from '../../_virtual/_tslib.js';
 import { createConnector } from '@wagmi/core';
 import { getAddress, createWalletClient, custom } from 'viem';
 
-const getCreateConnectorFn = (parameters) => createConnector((config) => ({
+/* eslint-disable prefer-arrow/prefer-arrow-functions */
+const getCreateConnectorFn = ({ connectorId, wallet, }) => createConnector((config) => ({
     connect() {
         return __awaiter(this, void 0, void 0, function* () {
-            if (!parameters.walletConnector) {
+            if (!wallet.connector) {
                 throw new Error('WalletConnector is not defined');
             }
-            parameters.walletConnector.on('accountChange', ({ accounts }) => {
-                const handler = this.onAccountsChanged.bind(this);
-                handler(accounts);
-            });
-            parameters.walletConnector.on('chainChange', ({ chain }) => this.onChainChanged(chain));
-            parameters.walletConnector.on('disconnect', this.onDisconnect.bind(this));
+            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 {
                 accounts,
@@ -24,38 +22,19 @@ const getCreateConnectorFn = (parameters) => createConnector((config) => ({
     },
     disconnect() {
         return __awaiter(this, void 0, void 0, function* () {
-            if (!parameters.preventWagmiSyncFromCallingLogout.current) {
-                yield parameters.walletConnector.endSession();
-                yield parameters.handleLogOut();
-            }
-            parameters.walletConnector.off('accountChange');
-            parameters.walletConnector.off('chainChange');
-            parameters.walletConnector.off('disconnect');
-            /**
-             * 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
-             * calling handleLogOut when we are the ones calling disconnect, but will preserve the existing behavior
-             * for customers who use useDisconnect directly.
-             */
-            parameters.preventWagmiSyncFromCallingLogout.current = false;
+            wallet.connector.off('accountChange', this.handleAccountsChange.bind(this));
+            wallet.connector.off('chainChange', this.handleChainChange.bind(this));
+            wallet.connector.off('disconnect', this.onDisconnect.bind(this));
         });
     },
     getAccounts() {
         return __awaiter(this, void 0, void 0, function* () {
-            var _a;
-            const address = yield ((_a = parameters.walletConnector) === null || _a === void 0 ? void 0 : _a.getAddress());
-            if (!address) {
-                throw new Error('Not connected');
-            }
-            return [getAddress(address)];
+            return [getAddress(wallet.address)];
         });
     },
     getChainId() {
         return __awaiter(this, void 0, void 0, function* () {
-            if (!parameters.walletConnector) {
-                throw new Error('WalletConnector is not defined');
-            }
-            const network = yield parameters.walletConnector.getNetwork();
+            const network = yield wallet.connector.getNetwork();
             if (!network) {
                 throw new Error('Network is not defined');
             }
@@ -65,37 +44,43 @@ const getCreateConnectorFn = (parameters) => createConnector((config) => ({
     getClient(args) {
         return __awaiter(this, void 0, void 0, function* () {
             var _a, _b;
-            const signer = yield parameters.walletConnector.getSigner();
-            if (signer.account && signer.chain) {
-                return signer;
+            const walletClient = yield wallet.getWalletClient();
+            if (walletClient.account && walletClient.chain) {
+                return walletClient;
             }
-            const walletClient = createWalletClient({
-                account: (_a = (yield this.getAccounts())) === null || _a === void 0 ? void 0 : _a[0],
-                chain: (_b = config.chains.find((chain) => chain.id === (args === null || args === void 0 ? void 0 : args.chainId))) !== null && _b !== void 0 ? _b : config.chains[0],
-                transport: custom(signer),
+            const client = createWalletClient({
+                account: walletClient.account || ((_a = (yield this.getAccounts())) === null || _a === void 0 ? void 0 : _a[0]),
+                chain: (_b = (walletClient.chain ||
+                    config.chains.find((chain) => chain.id === (args === null || args === void 0 ? void 0 : args.chainId)))) !== null && _b !== void 0 ? _b : config.chains[0],
+                transport: custom(walletClient),
             });
-            return walletClient;
+            return client;
         });
     },
     getProvider() {
         return __awaiter(this, void 0, void 0, function* () {
-            var _a;
-            return (_a = parameters.walletConnector) === null || _a === void 0 ? void 0 : _a.getWalletClient();
+            return wallet.getWalletClient();
         });
     },
-    id: parameters.connectorId,
+    handleAccountsChange({ accounts }) {
+        this.onAccountsChanged(accounts);
+    },
+    handleChainChange({ chain }) {
+        this.onChainChanged(chain);
+    },
+    id: connectorId,
     isAuthorized() {
         return __awaiter(this, void 0, void 0, function* () {
             var _a, _b;
-            const accounts = (_b = (yield ((_a = parameters.walletConnector) === null || _a === void 0 ? void 0 : _a.getConnectedAccounts()))) !== null && _b !== void 0 ? _b : [];
-            return accounts.length > 0;
+            const accounts = (_b = (yield ((_a = wallet.connector) === null || _a === void 0 ? void 0 : _a.getConnectedAccounts()))) !== null && _b !== void 0 ? _b : [];
+            return accounts.includes(wallet.address);
         });
     },
     name: 'Dynamic',
-    onAccountsChanged(accounts) {
-        config.emitter.emit('change', {
-            accounts: [getAddress(accounts[0])],
-        });
+    onAccountsChanged(_) {
+        // this changes the active account on wagmi, but we don't want to do that
+        // we want the active account to always match the primary wallet
+        // so we should not emit this event on the wagmi config
     },
     onChainChanged(chainId) {
         config.emitter.emit('change', {
@@ -105,14 +90,11 @@ const getCreateConnectorFn = (parameters) => createConnector((config) => ({
     onDisconnect() { },
     switchChain(_a) {
         return __awaiter(this, arguments, void 0, function* ({ chainId }) {
-            var _b;
             const chain = config.chains.find((x) => x.id === chainId);
             if (!chain) {
                 throw new Error(`Chain ${chainId} is not supported`);
             }
-            yield ((_b = parameters.walletConnector) === null || _b === void 0 ? void 0 : _b.switchNetwork({
-                networkChainId: chainId,
-            }));
+            yield wallet.switchNetwork(chainId);
             return chain;
         });
     },

package/src/lib/DynamicWagmiConnector.js

@@ -1,27 +1,27 @@
 'use client'
 import { jsx } from 'react/jsx-runtime';
-import { useRef, useMemo, useEffect } from 'react';
+import { 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 { isEthereumWallet } from '@dynamic-labs/ethereum-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 DynamicWagmiConnector = ({ suppressChainMismatchError = false, children, }) => (jsx(ErrorBoundaryInclude, { children: jsx(DynamicWagmiConnectorInner, { suppressChainMismatchError: suppressChainMismatchError, children: children }) }));
+const getEvmWallet = (wallet) => {
+    if (!wallet || !isEthereumWallet(wallet)) {
+        return null;
+    }
+    return wallet;
+};
 const DynamicWagmiConnectorInner = ({ suppressChainMismatchError = false, children }) => {
     const config = useConfig();
-    const { handleLogOut, primaryWallet } = useDynamicContext();
-    const wallets = useUserWallets();
-    useChainMismatchLogger({ throwOnMismatch: !suppressChainMismatchError });
-    const evmWallet = useFindEvmWallet(primaryWallet, wallets);
+    const { primaryWallet } = useDynamicContext();
+    useChainMismatchLogger({ suppress: suppressChainMismatchError });
+    const evmWallet = getEvmWallet(primaryWallet);
     const getConnectorId = useConnectorId();
-    /**
-     * This will prevent the wagmi Connector from calling handleLogOut when we are the ones calling disconnect
-     * as a result of a handleLogOut call (see SyncDynamicWagmi), but will preserve the existing behavior for customers.
-     */
-    const preventWagmiSyncFromCallingLogout = useRef(false);
     const connector = useMemo(() => {
         if (!evmWallet) {
             return;
@@ -29,11 +29,9 @@ const DynamicWagmiConnectorInner = ({ suppressChainMismatchError = false, childr
         const connectorId = getConnectorId(evmWallet.connector);
         return config._internal.connectors.setup(getCreateConnectorFn({
             connectorId,
-            handleLogOut,
-            preventWagmiSyncFromCallingLogout,
-            walletConnector: evmWallet.connector,
+            wallet: evmWallet,
         }));
-    }, [config._internal.connectors, getConnectorId, handleLogOut, evmWallet]);
+    }, [config._internal.connectors, getConnectorId, evmWallet]);
     /**
      * Updating the wagmi config must be done in a useEffect because
      * when setting the public client and connectors, wagmi will fire
@@ -44,7 +42,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, wallet: evmWallet, children: jsx(ErrorBoundaryExclude, { children: children }) }));
 };
 
 export { DynamicWagmiConnector, DynamicWagmiConnectorInner };

package/src/lib/SyncDynamicWagmi.d.ts

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

package/src/lib/SyncDynamicWagmi.js

@@ -1,58 +1,67 @@
 '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';
+import { logger } from '@dynamic-labs/wallet-connector-core';
 
-const SyncDynamicWagmi = ({ children, connector, wallets, preventWagmiSyncFromCallingLogout, }) => {
+const SyncDynamicWagmi = ({ children, connector, wallet, }) => {
     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;
-            }
+    const lastConnectedWalletId = useRef(undefined);
+    const hasPreviousConnection = Boolean(lastConnectedWalletId.current);
+    const disconnectWagmi = useCallback(() => {
+        logger.debug('[SyncDynamicWagmi] disconnecting wagmi - previous status: ', clientStatus);
+        if (clientStatus === 'disconnected') {
+            return;
+        }
+        disconnect();
+        lastConnectedWalletId.current = undefined;
+    }, [disconnect, clientStatus]);
+    const connectWagmi = useCallback((connector, newId, forceConnect) => {
+        logger.debug('[SyncDynamicWagmi] connecting wagmi - previous status: ', clientStatus);
+        if (clientStatus !== 'disconnected' && !forceConnect) {
+            return;
+        }
+        lastConnectedWalletId.current = newId;
+        connect({ connector });
+    }, [connect, clientStatus]);
+    const sync = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+        // if there's no connector, disconnect wagmi
+        if (!connector || !(wallet === null || wallet === void 0 ? void 0 : wallet.address)) {
+            disconnectWagmi();
+            return;
+        }
+        const newId = `${connector.id}-${wallet.address}`;
+        // if the connector hasn't changed since the last connection, do nothing
+        if (newId === lastConnectedWalletId.current) {
             return;
         }
-        /**
-         * Connects to Wagmi when a connector is available and
-         * the connector has changed since the last connection
-         */
-        if (walletConnector &&
-            connector &&
-            (connector === null || connector === void 0 ? void 0 : connector.id) !== lastConnectedConnectorId.current) {
-            lastConnectedConnectorId.current = connector.id;
-            connect({ connector });
+        // if has a previous connection, disconnect wagmi
+        if (hasPreviousConnection) {
+            disconnectWagmi();
         }
-    }, [
-        clientStatus,
-        connect,
+        // and then (re)connect wagmi
+        // force reconnect if has disconnected in the preivous step
+        // in case the clientStatus takes a while to update
+        connectWagmi(connector, newId, hasPreviousConnection);
+    }), [
+        connectWagmi,
         connector,
-        disconnect,
-        lastConnectedConnectorId,
-        preventWagmiSyncFromCallingLogout,
-        walletConnector,
-        wallets,
+        disconnectWagmi,
+        hasPreviousConnection,
+        wallet === null || wallet === void 0 ? void 0 : wallet.address,
     ]);
+    // 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/useChainMismatchLogger.d.ts

@@ -1,3 +1,3 @@
-export declare const useChainMismatchLogger: ({ throwOnMismatch, }?: {
-    throwOnMismatch: boolean;
+export declare const useChainMismatchLogger: ({ suppress, }?: {
+    suppress: boolean;
 }) => void;

package/src/lib/useChainMismatchLogger.js

@@ -5,11 +5,11 @@ import { Logger } from '@dynamic-labs/logger';
 import { useDynamicContext } from '@dynamic-labs/sdk-react-core';
 
 const logger = new Logger('DynamicWagmiConnector');
-const useChainMismatchLogger = ({ throwOnMismatch, } = { throwOnMismatch: true }) => {
+const useChainMismatchLogger = ({ suppress, } = { suppress: false }) => {
     const config = useConfig();
     const { networkConfigurations } = useDynamicContext();
     useEffect(() => {
-        if (!(networkConfigurations === null || networkConfigurations === void 0 ? void 0 : networkConfigurations.evm))
+        if (!(networkConfigurations === null || networkConfigurations === void 0 ? void 0 : networkConfigurations.evm) || suppress)
             return;
         const wagmiChains = config.chains;
         const wagmiChainIds = wagmiChains.map((chain) => chain.id);
@@ -20,10 +20,6 @@ const useChainMismatchLogger = ({ throwOnMismatch, } = { throwOnMismatch: true }
                 const message = `Chain (id: ${chain.id} name: ${chain.name}) is present in the Wagmi config, but is not present in the Dynamic configuration.` +
                     ' Please make sure to enable the chain in your Dynamic Dashboard, or add it to the evmNetworks prop on DynamicContextProvider.' +
                     ' For more information, see: https://docs.dynamic.xyz/guides/frameworks/wagmi-v2#chain-configuration';
-                if (throwOnMismatch) {
-                    throw new Error(message +
-                        ' \n\nTo suppress this error, pass `suppressChainMismatchError` to `DynamicWagmiConnector`: `<DynamicWagmiConnector suppressChainMismatchError>`');
-                }
                 logger.warn(message);
             }
         });
@@ -32,14 +28,10 @@ const useChainMismatchLogger = ({ throwOnMismatch, } = { throwOnMismatch: true }
                 const message = `Chain (id: ${chain.chainId} name: ${chain.name}) is present in the Dynamic config, but is not present in the Wagmi configuration.` +
                     ' Please make sure to add the chain to the chains prop on the Wagmi createConfig function.' +
                     ' For more information, see: https://docs.dynamic.xyz/guides/frameworks/wagmi-v2#chain-configuration';
-                if (throwOnMismatch) {
-                    throw new Error(message +
-                        ' \n\nTo suppress this error, pass `suppressChainMismatchError` to `DynamicWagmiConnector`: `<DynamicWagmiConnector suppressChainMismatchError>`');
-                }
                 logger.warn(message);
             }
         });
-    }, [config.chains, networkConfigurations, throwOnMismatch]);
+    }, [config.chains, networkConfigurations, suppress]);
 };
 
 export { useChainMismatchLogger };

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, wallets: Wallet[]) => Wallet | undefined;

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

@@ -1,22 +0,0 @@
-'use client'
-const isEvmWallet = (wallet) => wallet.connector.connectedChain === 'EVM';
-const isWalletConnected = (wallet) => wallet.connected;
-const useFindEvmWallet = (primaryWallet, wallets) => {
-    /**
-     * If the primary wallet is an EVM wallet and is connected, return it.
-     */
-    if (primaryWallet &&
-        isEvmWallet(primaryWallet) &&
-        isWalletConnected(primaryWallet)) {
-        return primaryWallet;
-    }
-    /**
-     * If the primary wallet is not connected, find the first connected EVM wallet.
-     */
-    const connectedEvmWallets = wallets
-        .filter(isEvmWallet)
-        .filter(isWalletConnected);
-    return connectedEvmWallets[0];
-};
-
-export { useFindEvmWallet };