Display Networks

React

You can display the current and available networks for a wallet by using the useDynamicContext & getNetwork hooks.

This example is for EVM networks only

React

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

const CustomNetworkPicker = () => {
  const [currentNetwork, setCurrentNetwork] = useState(null)
  const { primaryWallet } = useDynamicContext()

  const handleNetworkChange = async (event) => {
    const chainId = parseInt(event.target.value)

    if (primaryWallet?.connector?.supportsNetworkSwitching()) {
      try {
        return await primaryWallet?.connector?.switchNetwork({
          networkChainId: chainId,
        })
      } catch (error) {
        console.error('Error switching network', error)
      }
    }
  }

  useEffect(() => {
    if (!currentNetwork)
      getNetwork(primaryWallet?.connector).then((network) => {
        setCurrentNetwork(network)
      })
  }, [primaryWallet])

  return (
    <>
      {currentNetwork && (
        <Select defaultValue={currentNetwork} onChange={handleNetworkChange}>
          {primaryWallet?.connector?.evmNetworks?.map((network) => (
            <option key={network.chainId} value={network.chainId}>
              {network.name}
            </option>
          ))}
        </Select>
      )}
    </>
  )
}

React Native

React Native provides access to networks through the dynamicClient.networks.evm property and allows you to switch networks using the dynamicClient.wallets.switchNetwork() method.

React Native

import { useEffect, useMemo, useState } from 'react'
import { dynamicClient } from '<path to client file>'

// Example: list EVM networks and switch using the primary wallet
export function NetworkPickerRN() {
  const [currentNetworkId, setCurrentNetworkId] = useState<number | string | null>(null)
  const evmNetworks = dynamicClient.networks.evm

  const primaryWallet = dynamicClient.wallets.primary
  const options = useMemo(
    () => evmNetworks.map((n) => ({ label: n.name, value: n.networkId })),
    [evmNetworks]
  )

  useEffect(() => {
    (async () => {
      if (!primaryWallet) return
      const { network } = await dynamicClient.wallets.getNetwork({ wallet: primaryWallet })
      setCurrentNetworkId(network)
    })()
  }, [primaryWallet])

  const onChange = async (value: number | string) => {
    if (!primaryWallet) return
    await dynamicClient.wallets.switchNetwork({
      wallet: primaryWallet,
      chainId: value,
    })
    setCurrentNetworkId(value)
  }

  return null
}

JavaScript SDK

Use the client helpers to read the active network for a wallet account and optionally switch it.

import {
  getActiveNetworkData,
  switchActiveNetwork,
} from '@dynamic-labs-sdk/client';

export async function loadAndSwitchNetwork(walletAccount, nextNetworkId) {
  const { networkData } = await getActiveNetworkData({ walletAccount });
  console.log('Active network', networkData);

  if (nextNetworkId) {
    await switchActiveNetwork({ walletAccount, networkId: nextNetworkId });
  }
}

networkData includes the chain id, name, icon, rpc URLs and currency data. Use it to build a picker or to configure clients such as Viem or a Solana connection.

Swift

This example is for EVM networks only.

Swift

import DynamicSwiftSDK

// Switch to Sepolia (EVM)
let sepolia = SupportedEthereumNetwork.sepoliaTestnet.chainConfig

do {
    try await ethereumWallet.switchNetwork(to: sepolia)
    // Optionally, get the network client for the selected chain
    // let client = try await ethereumWallet.getNetworkClient(for: sepolia.chainId)
} catch {
    print("Failed to switch network: \(error)")
}

Flutter

Same as React Native, you can access all the networks from DynamicSDK.instance.networks. There you have DynamicSDK.instance.networks.evm as well as DynamicSDK.instance.networks.solana networks.

To trigger a network change you can simply do the following:

//From one EVM to another
DynamicSDK.instance.wallets.switchNetwork(wallet: wallet, network: Network.evm(intValue))
//From one SVM to another
DynamicSDK.instance.wallets.switchNetwork(wallet: wallet, network: Network.solana("stringValue"))