useDynamicEvents

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 useDynamicEvents hook can be used to subscribe to events emitted by Dynamic.

Usage

Available function and states

Auth related events

Event	Arguments	Description
authFailure	reason: 'user-cancelled' | { error: unknown }	Triggered whenever the auth process fails
authFlowCancelled	none	Triggered when auth is attempted but fails like when user rejects connection or the network call fails
authFlowClose	none	Triggered when the modal is closed during an authentication process, regardless of failure or success
authFlowOpen	none	Triggered when the modal is opened during an authentication process, regardless of failure or success
authInit	method: string	Informs an auth attempt initialized, and provides insight into which auth option it is
logout	none	Triggered when the user logs out

Wallet related events

Event	Arguments	Description
walletAdded	newWallet: Wallet	Triggered whenever a wallet is added to the user profile
walletRemoved	removedWallet: Wallet	Triggered whenever a wallet is removed from the user profile
embeddedWalletCreated	wallet: Wallet, verifiedCredential: JwtVerifiedCredential \ undefined, user: UserProfile | undefined	Triggered when an embedded wallet is created
embeddedWalletRevealSuccess	wallet: Wallet	Triggered when an embedded wallet’s private key or recovery phrase is successfully revealed and the user has acknowledged it
embeddedWalletRevealFailure	error: unknown	Triggered when an embedded wallet’s private key or recovery phrase reveal fails
primaryWalletChanged	newPrimaryWallet: Wallet	Triggered whenever the primary wallet changes
primaryWalletNetworkChanged	newNetwork: number | string	Triggered whenever the primary wallet network changes
userWalletsChanged	params: UserWalletsChangedParams	Triggered whenever a wallet is added or removed from the user profile, the primary wallet changes to another one, the primary wallet network changes or a non-primary wallet network changes
walletConnectionQrCodeReady	qrCodeUri: string	Triggered when the QR code is ready to be scanned for wallet connection (mainly used for WalletConnect wallets or MetaMask mobile)

OTP related events

Event	Arguments	Description
emailVerificationResult	param: boolean, email: string	Triggered when the email verification result is received
smsVerificationResult	param: boolean, phone: string	Triggered when the sms verification result is received
mfaCompletionFailure	args: { error: unknown }	Emitted when there is an error verifiyng the MFA challenge
mfaCompletionSuccess	args: { mfaToken?: string }	Emitted when the user succesfully completes an MFA challenge

Type Definitions

import { type UserWalletsChangedParams } from "@dynamic-labs/sdk-react-core";

type UserWalletsUpdateType =
  | {
      updateType: 'walletAdded';
      addedWallet: Wallet;
    }
  | {
      updateType: 'walletRemoved';
      removedWallet: Wallet;
    }
  | {
      updateType: 'primaryWalletChanged';
    }
  | {
      updateType: 'primaryWalletNetworkChanged';
      newNetwork: string | number;
    }
  | {
      updateType: 'nonPrimaryWalletNetworkChanged';
      newNetwork: string | number;
      affectedWallets: Wallet[];
    };

type UserWalletsChangedParams = {
  userWallets: Wallet[];
  primaryWallet: Wallet | undefined;
} & UserWalletsUpdateType;

Example

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

const useDynamicEventsExample = () => {
  useDynamicEvents("userWalletsChanged", async (params) => {
    console.log(params);
  });

  useDynamicEvents("primaryWalletChanged", async (newPrimaryWallet) => {
    console.log(newPrimaryWallet);
  });

  useDynamicEvents("primaryWalletNetworkChanged", async (newNetwork) => {
    console.log(newNetwork);
  });

  useDynamicEvents("walletAdded", async (newWallet) => {
    console.log(newWallet);
  });

  useDynamicEvents("walletConnectionQrCodeReady", async (qrCodeUri) => {
    console.log(qrCodeUri);
  });
};