onEvent

onEvent

Adds an event listener for Dynamic client events. Use this to react to authentication state changes, wallet updates, and other client events.

Usage

import { onEvent } from '@dynamic-labs-sdk/client';

const removeListener = onEvent({
  event: 'walletAccountsChanged',
  listener: ({ walletAccounts }) => {
    console.log('Wallet accounts changed:', walletAccounts);
  },
});

// Later, remove the listener when done
removeListener();

Parameters

Parameter	Type	Description
event	string	The event name to listen for.
listener	Function	The callback function to execute when the event fires.
client	DynamicClient (optional)	The Dynamic client instance. Only required when using multiple clients.

Returns

() => void - A function that can be called to remove the listener.

Examples

Track wallet account changes

import { useEffect } from 'react';
import { onEvent } from '@dynamic-labs-sdk/client';

const WalletTracker = () => {
  useEffect(() => {
    const removeListener = onEvent({
      event: 'walletAccountsChanged',
      listener: ({ walletAccounts }) => {
        console.log('Current wallets:', walletAccounts.length);
        walletAccounts.forEach((wallet) => {
          console.log(`- ${wallet.address} (${wallet.chain})`);
        });
      },
    });

    return () => {
      removeListener();
    };
  }, []);

  return <div>Tracking wallet changes...</div>;
};

This example uses React; the JavaScript SDK is framework-agnostic and can be used with any frontend or in Node.

Multiple event listeners

import { onEvent } from '@dynamic-labs-sdk/client';

const setupEventListeners = () => {
  const removeWalletListener = onEvent({
    event: 'walletAccountsChanged',
    listener: ({ walletAccounts }) => {
      updateWalletUI(walletAccounts);
    },
  });

  const removeAuthListener = onEvent({
    event: 'logout',
    listener: () => {
      clearUserSession();
    },
  });

  // Return cleanup function
  return () => {
    removeWalletListener();
    removeAuthListener();
  };
};

Common Events

Event	Description
initStatusChanged	Fired when client initialization status changes
logout	Fired when user logs out
tokenChanged	Fired when token (jwt) changes
userChanged	Fired when user changes
walletAccountsChanged	Fired when wallet accounts change

You can use initStatusChanged with status 'finished' to wait until the client is ready before calling other SDK methods. See Initializing the Dynamic Client for init statuses.

React patterns

Subscription in useEffect

Return the unsubscribe function directly from useEffect — no need for offEvent. Or use useOnEvent from @dynamic-labs-sdk/react-hooks to handle the subscription and cleanup automatically:

import { useOnEvent } from '@dynamic-labs-sdk/react-hooks';

function LogoutLogger() {
  useOnEvent({ event: 'logout', listener: () => console.log('User logged out') });
  return null;
}

Reactive state

For SDK state that should trigger re-renders (wallet accounts, user, init status, session), use the hooks from @dynamic-labs-sdk/react-hooks — they subscribe to the relevant events internally:

import { useUser, useGetWalletAccounts, useInitStatus } from '@dynamic-labs-sdk/react-hooks';

function Dashboard() {
  const { data: user } = useUser();
  const { data: walletAccounts = [] } = useGetWalletAccounts();
  const { data: initStatus } = useInitStatus();
  // re-renders automatically when user, wallets, or init status change
}

Related functions

• offEvent - Unsubscribe from events