Skip to main content

Configure Network


All entities in the Web3-Redux store are indexed by networkId. Web3-Redux let's you sync multiple networks concurrently (#) object is meant to store a global web3 object that is responsible for connecting to the Ethereum RPC. You must first configure a network by adding it to the store and passing it a web3 instance or an Ethereum RPC.


We recomend using a Websocket (wss://) connection as this enables more advanced usage such as subscriptions.


In later sections we will look into connecting the network with Metamask to add a web3Sender instance used for sending transactions.

Add Network

If using React, you will want to configure the network(s) on app mount with the simple useNetwork hook. Under the hood, this uses the useHydrate hook to load the IndexedDB persisted configuration or create a new network with the defaultNetwork.

import { Network } from '@owlprotocol/web3-redux';

const defaultNetwork = { web3Rpc: 'ws://localhost:8545' }
const App = () => {
const [network] = Network.hooks.useNetwork('1', defaultNetwork);

return <>{network.networkId}</>

The component must have access to the Redux context (see Configure Store).

Env Var Config

Web3-Redux includes built-in defaults using environment variables to easily configure your store. Environment variables can be as is or prefixed by the following common framework prefixes REACT_APP_, NEXT_PUBLIC_, VITE_.

To enable this, set the one of the following envvars in your React App's .env or .env.local file:

#Use Infura RPC for supported networks
#Set Ethereum Mainnet RPC (networkId: 1)

You can configure now configure your network by just passing in the relevant networkId.

const [network] = Network.hooks.useNetwork('1');

Web3-Redux will automatically use the envvar configured RPC as a default for supported networks (Ethereum, Testnets, Polygon). For custom networks, you can manually set the web3Rpc parameter as seen in the previous example.

For more details on supported envvars (#).

Also see the documentation relevant to your UI Framework:


For more dynamic configuration such as integration with Metamask, and setting up a dual configuration with a web3Sender object, check out Integrations/Metamask.