Track Wallet Events/Changes

Listen for wallet lifecycle events to keep your UI in sync.

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.

Use useDynamicEvents to subscribe to wallet lifecycle events from the provider and keep UI state in sync.

React

import { useDynamicEvents } from '@dynamic-labs/sdk-react-core';

export function WalletEventListener() {
  // Fires when primary wallet changes (including account/network changes)
  useDynamicEvents('primaryWalletChanged', (wallet) => {
    console.log('Primary wallet changed', wallet);
  });

  // Fires when the primary wallet network changes
  useDynamicEvents('primaryWalletNetworkChanged', (networkId) => {
    console.log('Primary wallet network changed', networkId);
  });

  // Fires whenever user wallets list changes (add/remove/primary change/network change)
  useDynamicEvents('userWalletsChanged', (params) => {
    console.log('User wallets changed', params);
  });

  return null;
}

Tip: keep the listener component mounted at app shell level so events are captured globally; clean-up is automatic when the component unmounts.

Using the JavaScript SDK? See Wallet Provider Events for the equivalent guide.