Using Networks

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.

Fetching Enabled Networks

The wallet connector provides the getEnabledNetworks method:

React

const enabledNetworks = primaryWallet.connector.getEnabledNetworks();

This method returns an array of network objects.

Example

React

const { primaryWallet } = useDynamicContext();

if(!primaryWallet) return;

const enabledNetworks = primaryWallet.connector.getEnabledNetworks();

return (
  <div>
    {enabledNetworks.map((network) => (
      <div key={network.chainId}>{network.chainName}</div>
    ))}
  </div>
)

Network Switching

Usage

Using the primaryWallet provided by useDynamicContext, you have two useful methods for network switching:

supportsNetworkSwitching · () => boolean

Available on the connector object for the wallet.Whether the connector supports network switching.

switchNetwork · (networkChainId?: number | string) => Promise<void>

Available directly on the wallet object. Switch to another network by providing either the network name or chain id.

When calling switchNetwork with a connector supporting network switching, the SDK will either request the user to confirm the network switch or add the network if it was not previously set.

Example

const { primaryWallet } = useDynamicContext();

if (primaryWallet?.connector.supportsNetworkSwitching()) {
  await primaryWallet.switchNetwork(137);
  console.log('Success! Network switched');
}