@dynamic-labs/wagmi-connector 0.18.24 → 0.18.25

package/CHANGELOG.md

@@ -1,4 +1,11 @@
 
+### [0.18.25](https://github.com/dynamic-labs/DynamicAuth/compare/v0.18.24...v0.18.25) (2023-10-12)
+
+
+### Bug Fixes
+
+* **wagmi-connector:** use wallets list to sync wagmi client ([#3563](https://github.com/dynamic-labs/DynamicAuth/issues/3563)) ([#3580](https://github.com/dynamic-labs/DynamicAuth/issues/3580)) ([12e464c](https://github.com/dynamic-labs/DynamicAuth/commit/12e464cca2cd39478475893bc084c5624a034cba))
+
 ### [0.18.24](https://github.com/dynamic-labs/DynamicAuth/compare/v0.18.23...v0.18.24) (2023-10-03)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynamic-labs/wagmi-connector",
-  "version": "0.18.24",
+  "version": "0.18.25",
   "repository": {
     "type": "git",
     "url": "https://github.com/dynamic-labs/DynamicAuth.git",
@@ -11,9 +11,8 @@
     "react": "^17.0.2 || ^18.0.0",
     "ethers": "5.7.2",
     "wagmi": "~0.12.13",
-    "@dynamic-labs/sdk-react-core": "0.18.24",
-    "@dynamic-labs/types": "0.18.24",
-    "eventemitter3": "5.0.1"
+    "@dynamic-labs/sdk-react-core": "0.18.25",
+    "@dynamic-labs/types": "0.18.25"
   },
   "license": "MIT",
   "main": "./src/index.cjs",

package/src/lib/DynamicWagmiConnector.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { configureChains, mainnet, createClient, WagmiConfig } from 'wagmi';
 import { publicProvider } from 'wagmi/providers/public';
 import { useDynamicContext } from '@dynamic-labs/sdk-react-core';
@@ -12,14 +12,13 @@ const { provider } = configureChains([mainnet], [publicProvider()]);
 const client = createClient({
     provider,
 });
-/**
- * we create a "default" (static chain and provider) client to use in the WagmiConfig
- * until we've loaded the dynamic chains and providers, at which point we update the client
- */
-let connector = undefined;
 const DynamicWagmiConnector = ({ evmNetworks: customerSuppliedEvmNetworks, children, }) => {
-    var _a;
     const { networkConfigurations, handleLogOut, connectedWallets, linkedWallets, authMode, sendWagmiSettings, } = useDynamicContext();
+    /**
+     * Linked wallets are only available on connect-and-sign mode and the connected wallets
+     * are only available on connect-only mode, the wallet const represents the current available
+     * wallets to be used when creating an wagmi connector
+     */
     const wallets = authMode === 'connect-only' ? connectedWallets : linkedWallets;
     useEffect(() => {
         // only send wagmi settings once, when the first time DynamicWagmiConnector renders
@@ -28,22 +27,34 @@ const DynamicWagmiConnector = ({ evmNetworks: customerSuppliedEvmNetworks, child
         });
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    const evmNetworks = ((_a = customerSuppliedEvmNetworks !== null && customerSuppliedEvmNetworks !== void 0 ? customerSuppliedEvmNetworks : networkConfigurations === null || networkConfigurations === void 0 ? void 0 : networkConfigurations.evm) !== null && _a !== void 0 ? _a : []).map((network) => {
-        network.chainId = parseInt(network.chainId.toString());
-        return network;
-    });
-    const mappedChains = getWagmiChainsFromDynamicChains(evmNetworks);
-    const mappedProviders = getWagmiProvidersFromDynamicChains(evmNetworks);
-    const { chains, provider } = configureChains(mappedChains, mappedProviders);
-    connector = getConnector(wallets, (wallet) => new Connector({
+    const { chains, provider, webSocketProvider } = useMemo(() => {
+        var _a;
+        const evmNetworks = ((_a = customerSuppliedEvmNetworks !== null && customerSuppliedEvmNetworks !== void 0 ? customerSuppliedEvmNetworks : networkConfigurations === null || networkConfigurations === void 0 ? void 0 : networkConfigurations.evm) !== null && _a !== void 0 ? _a : []).map((network) => {
+            network.chainId = parseInt(network.chainId.toString());
+            return network;
+        });
+        const mappedChains = getWagmiChainsFromDynamicChains(evmNetworks);
+        const mappedProviders = getWagmiProvidersFromDynamicChains(evmNetworks);
+        return configureChains(mappedChains, mappedProviders);
+    }, [customerSuppliedEvmNetworks, networkConfigurations === null || networkConfigurations === void 0 ? void 0 : networkConfigurations.evm]);
+    const connector = useMemo(() => getConnector(wallets, (wallet) => new Connector({
         chains,
         handleLogOut,
         walletConnector: wallet.connector,
-    }));
-    client.config = Object.assign(Object.assign({}, client.config), { autoConnect: true, connectors: connector ? [connector] : [], provider: provider });
+    })), [wallets, chains, handleLogOut]);
+    /**
+     * Updating the wagmi config must be done in a useEffect because
+     * when setting the public client and connectors, wagmi will fire
+     * an rerender.
+     * Keeping the update in a useEffect will prevent an state update
+     * while react is in the middle of rendering.
+     */
+    useEffect(() => {
+        client.config = Object.assign(Object.assign({}, client.config), { autoConnect: true, connectors: connector ? [connector] : [], provider: provider, webSocketProvider: webSocketProvider });
+    }, [connector, provider, webSocketProvider]);
     // use React.createElement to prevent bunding react/jsx-runtime,
     // which is not compatible when bundling apps using React 17
-    return React.createElement(WagmiConfig, { client: client }, React.createElement(SyncDynamicWagmi, { connector }, children));
+    return React.createElement(WagmiConfig, { client: client }, React.createElement(SyncDynamicWagmi, { connector, wallets }, children));
 };
 
 export { DynamicWagmiConnector };

package/src/lib/SyncDynamicWagmi.d.ts

@@ -1,8 +1,10 @@
 import React from 'react';
+import { Wallet } from '@dynamic-labs/sdk-react-core';
 import { Connector } from './Connector';
 export type SyncDynamicWagmiProps = React.PropsWithChildren<{
     connector: Connector | undefined;
+    wallets: Wallet[];
 }>;
-export declare const SyncDynamicWagmi: ({ children, connector, }: SyncDynamicWagmiProps) => React.FunctionComponentElement<{
+export declare const SyncDynamicWagmi: ({ children, connector, wallets, }: SyncDynamicWagmiProps) => React.FunctionComponentElement<{
     children?: React.ReactNode;
 }>;

package/src/lib/SyncDynamicWagmi.js

@@ -2,24 +2,34 @@ import React, { useRef, useEffect } from 'react';
 import { useClient, useConnect, useDisconnect } from 'wagmi';
 import { useDynamicContext } from '@dynamic-labs/sdk-react-core';
 
-const SyncDynamicWagmi = ({ children, connector, }) => {
+const SyncDynamicWagmi = ({ children, connector, wallets, }) => {
     const { status: clientStatus } = useClient();
     const { connect } = useConnect();
     const { disconnect } = useDisconnect();
-    const { internalEvents, walletConnector } = useDynamicContext();
+    const { walletConnector } = useDynamicContext();
     const lastConnectedConnectorId = useRef(undefined);
     useEffect(() => {
-        const events = internalEvents.current;
-        const handleDisconnect = () => {
-            lastConnectedConnectorId.current = undefined;
-            disconnect();
-        };
-        events.on('clearPrimaryWallet', handleDisconnect);
-        return () => {
-            events.off('clearPrimaryWallet', handleDisconnect);
-        };
-    }, [disconnect, internalEvents]);
-    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) {
+                disconnect();
+                lastConnectedConnectorId.current = undefined;
+            }
+            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) {
@@ -33,6 +43,7 @@ const SyncDynamicWagmi = ({ children, connector, }) => {
         disconnect,
         lastConnectedConnectorId,
         walletConnector,
+        wallets,
     ]);
     // use React.createElement to prevent bunding react/jsx-runtime,
     // which is not compatible when bundling apps using React 17