useWalletConnectorEvent

Recommended: JavaScript SDK with React Hooks

For new React apps, we recommend the JavaScript SDK with React Hooks (@dynamic-labs-sdk/react-hooks) instead of the legacy React SDK documented here. The JS SDK comes with many benefits such as a much smaller bundle size and other optimizations. Use the React quickstart (JavaScript SDK) to get started.

Summary

The useWalletConnectorEvent hook is used for handling events from a WalletConnector or an array of WalletConnectors. This hook allows you to specify an event to listen to and a handler function that will be called whenever the event is emitted. The handler will receive the event arguments followed by the instance of the WalletConnector that emitted the event.

Parameter	Type	Description
eventEmitters	WalletConnector or WalletConnector[]	The WalletConnector instance(s) to attach the event listener to. If an array is provided, the event listener is attached to all provided connectors.
eventName	string	The name of the event to listen for.
handler	function	The callback function to execute when the event is emitted. The arguments to the callback are the arguments emitted with the event, followed by the WalletConnector instance that emitted the event.

We currently support the following events:

• accountChange
• chainChange
• disconnect

Example

Listen to primary wallet connector account changed

import {
  useWalletConnectorEvent,
  useDynamicContext
} from '@dynamic-labs/sdk-react-core'

const App = () => {
  const { primaryWallet } = useDynamicContext()

  useWalletConnectorEvent(
    primaryWallet?.connector,
    'accountChange',
    ({ accounts }, connector) => {
      console.group('accountChange');
      console.log('accounts', accounts);
      console.log('connector that emitted', connector);
      console.groupEnd();
    },
  );

  return null;
}

Listen to all wallets connectors for the disconnect event

import {
  useWalletConnectorEvent,
  useUserWallets
} from '@dynamic-labs/sdk-react-core'

const App = () => {
  const wallets = useUserWallets();

  const walletsConnectors = wallets.map(({ connector }) => connector);

  useWalletConnectorEvent(
    walletsConnectors,
    'disconnect',
    (connector) => {
      console.log(`Connector ${connector} disconnected`);
    }
  );

  return null;
}