The NetworkSelector component provides a user-friendly dropdown interface for selecting networks supported by the Compound III protocol. It displays network icons, names, and handles network switching.

​
Usage

import { NetworkSelector } from 'compound-react';
import { providers } from 'ethers';

function MyComponent() {
  // Create an Ethereum provider
  const provider = new providers.Web3Provider(window.ethereum);
  
  return (
    <NetworkSelector 
      provider={provider}
      value={1} // Ethereum Mainnet
      onChange={(chainId) => console.log(`Selected network: ${chainId}`)}
    />
  );
}

​
Props

PropTypeDescription
providerProviderThe Ethereum provider to use for network switching
valuenumberThe currently selected chain ID
onChange(chainId: number) => voidCallback function called when a network is selected
switchNetworkbooleanWhether to automatically switch networks when selected (default: true)
showTestnetsbooleanWhether to show testnet networks (default: false)
classNamestringOptional CSS class name to apply to the component
disabledbooleanWhether the selector is disabled (default: false)

​
Example

<NetworkSelector 
  provider={provider}
  value={selectedChainId}
  onChange={setSelectedChainId}
  switchNetwork={true}
  showTestnets={false}
  className="w-full"
/>

​
Features

The NetworkSelector component includes the following features:
  • Network List: Displays a list of supported networks
  • Network Icons: Shows icons for each network
  • Network Names: Displays the name for each network (e.g., Ethereum, Base)
  • Network Switching: Optionally switches the connected wallet to the selected network
  • Testnet Support: Optionally shows testnet networks
  • Current Network Indicator: Highlights the currently connected network
  • Keyboard Navigation: Supports keyboard navigation for accessibility
  • Loading States: Shows loading indicators during network switching
  • Error Handling: Displays user-friendly error messages

​
Supported Networks

The component supports all networks where Compound III is deployed, including:
  • Ethereum Mainnet (Chain ID: 1)
  • Base (Chain ID: 8453)
  • Arbitrum (Chain ID: 42161)
  • Polygon (Chain ID: 137)
  • And their corresponding testnets when showTestnets is enabled

​
Loading and Error States

The component handles loading and error states automatically:
  • While switching networks, a loading indicator is displayed
  • If an error occurs during network switching, an error message is displayed
  • If the user rejects the network switch, an appropriate message is shown

​
Customization

You can customize the appearance of the component using the className prop: 
<NetworkSelector 
  provider={provider}
  value={selectedChainId}
  onChange={setSelectedChainId}
  className="bg-gray-50 border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700"
/>