Display 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.

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>
      )}
    </>
  )
}

Using the JavaScript SDK? See Getting Active Network and Switching Active Network for the equivalent guides.