Feat/6 Network Switcher (#502)

* feat: add network-switcher lib * feat: add env variables for some deployed app urls * feat: add network processing to environment hoook * refactor: network handling * refactor: remove dialog from provider and add env setter * feat: add network switcher dialog to the trading app * refactor: add network redirect to dialog connect callback * fix: lint * fix: jsonify env variable for possible networks * fix: add formatter file * fix: assign correct global state to network swicther * feat: add network-switcher lib * feat: add env variables for some deployed app urls * feat: add network processing to environment hoook * refactor: network handling * refactor: remove dialog from provider and add env setter * feat: add network switcher dialog to the trading app * refactor: add network redirect to dialog connect callback * fix: lint * fix: jsonify env variable for possible networks * fix: add formatter file * fix: assign correct global state to network swicther * fix: failing tests from UI changes * fix: lint * fix: lint Co-authored-by: Joe <joe@vega.xyz> Co-authored-by: Dexter <dexter.edwards93@gmail.com>
2022-06-10 10:15:38 +01:00 · 2022-06-10 10:15:38 +01:00 · ecda46caa5
commit ecda46caa5
parent f6f62cbc6a
69 changed files with 441 additions and 97 deletions
--- a/apps/explorer/.env
+++ b/apps/explorer/.env
@ -24,6 +24,7 @@ NX_TENDERMINT_WEBSOCKET_URL = "wss://lb.testnet.vega.xyz/tm/websocket"
 NX_VEGA_URL = "https://lb.testnet.vega.xyz/query"
 NX_VEGA_ENV = 'TESTNET'
 NX_VEGA_REST = 'https://lb.testnet.vega.xyz/datanode/rest'
+NX_VEGA_NETWORKS = '{\"TESTNET\":\"https://explorer.fairground.wtf\",\"MAINNET\":\"https://explorer.vega.xyz\"}'
 CYPRESS_VEGA_TENDERMINT_URL='https://lb.testnet.vega.xyz/tm'

 # App flags
--- a/apps/explorer/.env.capsule
+++ b/apps/explorer/.env.capsule
@ -3,6 +3,7 @@ NX_CHAIN_EXPLORER_URL = "https://explorer.vega.trading/.netlify/functions/chain-
 NX_TENDERMINT_URL = "http://localhost:26617"
 NX_TENDERMINT_WEBSOCKET_URL = "wss://localhost:26617/websocket"
 NX_VEGA_URL = "http://localhost:3028/query"
+NX_VEGA_NETWORKS = '{\"TESTNET\":\"https://explorer.fairground.wtf\",\"MAINNET\":\"https://explorer.vega.xyz\"}'
 NX_VEGA_ENV = 'LOCAL'
 NX_VEGA_REST = 'http://localhost:3029'

--- a/apps/explorer/.env.devnet
+++ b/apps/explorer/.env.devnet
@ -3,5 +3,6 @@ NX_CHAIN_EXPLORER_URL = "https://explorer.vega.trading/.netlify/functions/chain-
 NX_TENDERMINT_URL = "https://n04.d.vega.xyz/tm"
 NX_TENDERMINT_WEBSOCKET_URL = "wss://n04.d.vega.xyz/tm/websocket"
 NX_VEGA_URL = "https://n04.d.vega.xyz/query"
+NX_VEGA_NETWORKS = '{\"TESTNET\":\"https://explorer.fairground.wtf\",\"MAINNET\":\"https://explorer.vega.xyz\"}'
 NX_VEGA_ENV = 'DEVNET'
 NX_VEGA_REST = 'https://n04.d.vega.xyz/datanode/rest'
--- a/apps/explorer/.env.mainnet
+++ b/apps/explorer/.env.mainnet
@ -3,5 +3,6 @@ NX_CHAIN_EXPLORER_URL = "https://explorer.vega.trading/.netlify/functions/chain-
 NX_TENDERMINT_URL = "https://mainnet-observer-proxy01.ops.vega.xyz/"
 NX_TENDERMINT_WEBSOCKET_URL = "wss://mainnet-observer-proxy01.ops.vega.xyz/websocket"
 NX_VEGA_URL = "https://api.token.vega.xyz/query"
+NX_VEGA_NETWORKS = '{\"TESTNET\":\"https://explorer.fairground.wtf\",\"MAINNET\":\"https://explorer.vega.xyz\"}'
 NX_VEGA_ENV = 'MAINNET'
 NX_VEGA_REST = 'https://api.token.vega.xyz/'
--- a/apps/explorer/.env.stagnet1
+++ b/apps/explorer/.env.stagnet1
@ -3,5 +3,6 @@ NX_CHAIN_EXPLORER_URL = "https://explorer.vega.trading/.netlify/functions/chain-
 NX_TENDERMINT_URL = "https://n03.s.vega.xyz/tm"
 NX_TENDERMINT_WEBSOCKET_URL = "wss://n03.s.vega.xyz/tm/websocket"
 NX_VEGA_URL = "https://n03.s.vega.xyz/query"
+NX_VEGA_NETWORKS = '{\"TESTNET\":\"https://explorer.fairground.wtf\",\"MAINNET\":\"https://explorer.vega.xyz\"}'
 NX_VEGA_ENV = 'STAGNET'
 NX_VEGA_REST = 'https://n03.s.vega.xyz/datanode/rest'
--- a/apps/explorer/.env.stagnet2
+++ b/apps/explorer/.env.stagnet2
@ -3,5 +3,6 @@ NX_CHAIN_EXPLORER_URL = "https://explorer.vega.trading/.netlify/functions/chain-
 NX_TENDERMINT_URL = "https://n03.stagnet2.vega.xyz/tm"
 NX_TENDERMINT_WEBSOCKET_URL = "wss://n03.stagnet2.vega.xyz/tm/websocket"
 NX_VEGA_URL = "https://n03.stagnet2.vega.xyz/query"
+NX_VEGA_NETWORKS = '{\"TESTNET\":\"https://explorer.fairground.wtf\",\"MAINNET\":\"https://explorer.vega.xyz\"}'
 NX_VEGA_ENV = 'STAGNET2'
 NX_VEGA_REST = 'https://n01.stagnet2.vega.xyz/datanode/rest'
--- a/apps/explorer/.env.testnet
+++ b/apps/explorer/.env.testnet
@ -3,5 +3,6 @@ NX_CHAIN_EXPLORER_URL = "https://explorer.vega.trading/.netlify/functions/chain-
 NX_TENDERMINT_URL = "https://lb.testnet.vega.xyz/tm"
 NX_TENDERMINT_WEBSOCKET_URL = "wss://lb.testnet.vega.xyz/tm/websocket"
 NX_VEGA_URL = "https://lb.testnet.vega.xyz/query"
+NX_VEGA_NETWORKS = '{\"TESTNET\":\"https://explorer.fairground.wtf\",\"MAINNET\":\"https://explorer.vega.xyz\"}'
 NX_VEGA_ENV = 'TESTNET'
 NX_VEGA_REST = 'https://lb.testnet.vega.xyz/datanode/rest'
--- a/apps/explorer/src/app/app.tsx
+++ b/apps/explorer/src/app/app.tsx
@ -1,11 +1,8 @@
 import { useState, useEffect, useMemo } from 'react';
 import { useLocation } from 'react-router-dom';
 import { ApolloProvider } from '@apollo/client';
-import { ThemeContext } from '@vegaprotocol/react-helpers';
-import {
-  useThemeSwitcher,
-  EnvironmentProvider,
-} from '@vegaprotocol/react-helpers';
+import { ThemeContext, useThemeSwitcher } from '@vegaprotocol/react-helpers';
+import { EnvironmentProvider } from '@vegaprotocol/network-switcher';
 import { createClient } from './lib/apollo-client';
 import { Nav } from './components/nav';
 import { Header } from './components/header';
--- a/apps/simple-trading-app/src/app/app.tsx
+++ b/apps/simple-trading-app/src/app/app.tsx
@ -9,7 +9,7 @@ import {
  VegaManageDialog,
  VegaWalletProvider,
 } from '@vegaprotocol/wallet';
-import { EnvironmentProvider } from '@vegaprotocol/react-helpers';
+import { EnvironmentProvider } from '@vegaprotocol/network-switcher';
 import { VegaWalletConnectButton } from './components/vega-wallet-connect-button';
 import { ThemeSwitcher } from '@vegaprotocol/ui-toolkit';
 import { Connectors } from './lib/vega-connectors';
--- a/apps/stats/src/app.tsx
+++ b/apps/stats/src/app.tsx
@ -3,7 +3,7 @@ import { DATA_SOURCES } from './config';
 import { Header } from './components/header';
 import { StatsManager } from '@vegaprotocol/network-stats';
 import { ThemeContext } from '@vegaprotocol/react-helpers';
-import { EnvironmentProvider } from '@vegaprotocol/react-helpers';
+import { EnvironmentProvider } from '@vegaprotocol/network-switcher';
 import { useThemeSwitcher } from '@vegaprotocol/react-helpers';

 const envName = DATA_SOURCES.envName;
--- a/apps/token/.env
+++ b/apps/token/.env
@ -25,6 +25,7 @@ NX_ETHEREUM_CHAIN_ID = 3
 NX_ETHEREUM_PROVIDER_URL = "https://ropsten.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8"
 NX_ETHERSCAN_URL = "https://ropsten.etherscan.io"
 NX_FAIRGROUND = false
+NX_VEGA_NETWORKS='{\"DEVNET\":\"https://dev.token.vega.xyz\",\"STAGNET\":\"https://dev.token.vega.xyz\",\"STAGNET2\":\"staging2.token.vega.xyz\",\"TESTNET\":\"token.fairground.wtf\",\"MAINNET\":\"token.vega.xyz\"}'

 #Test configuration variables
 CYPRESS_FAIRGROUND = false
--- a/apps/token/.env.devnet
+++ b/apps/token/.env.devnet
@ -1,6 +1,7 @@
 # App configuration variables
 NX_VEGA_ENV = "DEVNET"
 NX_VEGA_URL = "https://n04.d.vega.xyz/query"
+NX_VEGA_NETWORKS='{\"DEVNET\":\"https://dev.token.vega.xyz\",\"STAGNET\":\"https://dev.token.vega.xyz\",\"STAGNET2\":\"staging2.token.vega.xyz\",\"TESTNET\":\"token.fairground.wtf\",\"MAINNET\":\"token.vega.xyz\"}'
 NX_ETHEREUM_CHAIN_ID = 3
 NX_ETHEREUM_PROVIDER_URL = "https://ropsten.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8"
-NX_ETHERSCAN_URL = "https://ropsten.etherscan.io"
+NX_ETHERSCAN_URL = "https://ropsten.etherscan.io"
--- a/apps/token/.env.mainnet
+++ b/apps/token/.env.mainnet
@ -1,6 +1,7 @@
 # App configuration variables
 NX_VEGA_ENV = "MAINNET"
 NX_VEGA_URL = "https://api.token.vega.xyz/query"
+NX_VEGA_NETWORKS='{\"DEVNET\":\"https://dev.token.vega.xyz\",\"STAGNET\":\"https://dev.token.vega.xyz\",\"STAGNET2\":\"staging2.token.vega.xyz\",\"TESTNET\":\"token.fairground.wtf\",\"MAINNET\":\"token.vega.xyz\"}'
 NX_ETHEREUM_CHAIN_ID = 1
 NX_ETHEREUM_PROVIDER_URL = "https://mainnet.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8"
-NX_ETHERSCAN_URL = "https://etherscan.io"
+NX_ETHERSCAN_URL = "https://etherscan.io"
--- a/apps/token/.env.stagnet1
+++ b/apps/token/.env.stagnet1
@ -1,6 +1,7 @@
 # App configuration variables
 NX_VEGA_ENV = "STAGNET"
 NX_VEGA_URL = "https://n03.s.vega.xyz/query"
+NX_VEGA_NETWORKS='{\"DEVNET\":\"https://dev.token.vega.xyz\",\"STAGNET\":\"https://dev.token.vega.xyz\",\"STAGNET2\":\"staging2.token.vega.xyz\",\"TESTNET\":\"token.fairground.wtf\",\"MAINNET\":\"token.vega.xyz\"}'
 NX_ETHEREUM_CHAIN_ID = 3
 NX_ETHEREUM_PROVIDER_URL = "https://ropsten.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8"
-NX_ETHERSCAN_URL = "https://ropsten.etherscan.io"
+NX_ETHERSCAN_URL = "https://ropsten.etherscan.io"
--- a/apps/token/.env.stagnet2
+++ b/apps/token/.env.stagnet2
@ -1,6 +1,7 @@
 # App configuration variables
 NX_VEGA_ENV = "STAGNET2"
 NX_VEGA_URL = "https://n03.stagnet2.vega.xyz/query"
+NX_VEGA_NETWORKS='{\"DEVNET\":\"https://dev.token.vega.xyz\",\"STAGNET\":\"https://dev.token.vega.xyz\",\"STAGNET2\":\"staging2.token.vega.xyz\",\"TESTNET\":\"token.fairground.wtf\",\"MAINNET\":\"token.vega.xyz\"}'
 NX_ETHEREUM_CHAIN_ID = 3
 NX_ETHEREUM_PROVIDER_URL = "https://ropsten.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8"
-NX_ETHERSCAN_URL = "https://ropsten.etherscan.io"
+NX_ETHERSCAN_URL = "https://ropsten.etherscan.io"
--- a/apps/token/.env.testnet
+++ b/apps/token/.env.testnet
@ -1,6 +1,7 @@
 # App configuration variables
 NX_VEGA_ENV = "TESTNET"
 NX_VEGA_URL = "https://lb.testnet.vega.xyz/query"
+NX_VEGA_NETWORKS='{\"DEVNET\":\"https://dev.token.vega.xyz\",\"STAGNET\":\"https://dev.token.vega.xyz\",\"STAGNET2\":\"staging2.token.vega.xyz\",\"TESTNET\":\"token.fairground.wtf\",\"MAINNET\":\"token.vega.xyz\"}'
 NX_ETHEREUM_CHAIN_ID = 3
 NX_ETHEREUM_PROVIDER_URL = "https://ropsten.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8"
-NX_ETHERSCAN_URL = "https://ropsten.etherscan.io"
+NX_ETHERSCAN_URL = "https://ropsten.etherscan.io"
--- a/apps/token/src/app.tsx
+++ b/apps/token/src/app.tsx
@ -18,7 +18,7 @@ import { Web3Provider } from '@vegaprotocol/web3';
 import { Connectors } from './lib/web3-connectors';
 import { VegaWalletDialogs } from './components/vega-wallet-dialogs';
 import { VegaWalletProvider } from '@vegaprotocol/wallet';
-import { EnvironmentProvider } from '@vegaprotocol/react-helpers';
+import { EnvironmentProvider } from '@vegaprotocol/network-switcher';
 import { client } from './lib/apollo-client';

 function App() {
--- a/apps/token/src/components/add-locked-token/add-locked-token.tsx
+++ b/apps/token/src/components/add-locked-token/add-locked-token.tsx
@ -1,10 +1,10 @@
 import { useTranslation } from 'react-i18next';

+import { useEnvironment } from '@vegaprotocol/network-switcher';
 import { useAddAssetSupported } from '../../hooks/use-add-asset-to-wallet';
 import vegaVesting from '../../images/vega_vesting.png';
 import { AddTokenButtonLink } from '../add-token-button/add-token-button';
 import { Callout } from '@vegaprotocol/ui-toolkit';
-import { useEnvironment } from '@vegaprotocol/react-helpers';

 export const AddLockedTokenAddress = () => {
  const { t } = useTranslation();
--- a/apps/token/src/components/balance-manager/balance-manager.tsx
+++ b/apps/token/src/components/balance-manager/balance-manager.tsx
@ -3,6 +3,7 @@ import { toBigNum } from '@vegaprotocol/react-helpers';
 import { useEthereumConfig } from '@vegaprotocol/web3';
 import { useWeb3React } from '@web3-react/core';
 import React from 'react';
+
 import {
  AppStateActionType,
  useAppState,
--- a/apps/token/src/components/transaction-callout/transaction-complete.tsx
+++ b/apps/token/src/components/transaction-callout/transaction-complete.tsx
@ -1,7 +1,7 @@
 import { Callout, Intent } from '@vegaprotocol/ui-toolkit';
 import { useTranslation } from 'react-i18next';
 import { Link } from '@vegaprotocol/ui-toolkit';
-import { useEnvironment } from '@vegaprotocol/react-helpers';
+import { useEnvironment } from '@vegaprotocol/network-switcher';
 import type { ReactElement } from 'react';

 export const TransactionComplete = ({
--- a/apps/token/src/components/transaction-callout/transaction-error.tsx
+++ b/apps/token/src/components/transaction-callout/transaction-error.tsx
@ -2,7 +2,7 @@ import { Button, Callout, Intent } from '@vegaprotocol/ui-toolkit';
 import { useTranslation } from 'react-i18next';

 import { Link } from '@vegaprotocol/ui-toolkit';
-import { useEnvironment } from '@vegaprotocol/react-helpers';
+import { useEnvironment } from '@vegaprotocol/network-switcher';

 export interface TransactionErrorProps {
  error: Error | null;
--- a/apps/token/src/components/transaction-callout/transaction-pending.tsx
+++ b/apps/token/src/components/transaction-callout/transaction-pending.tsx
@ -2,7 +2,7 @@ import React from 'react';
 import { Callout, Loader } from '@vegaprotocol/ui-toolkit';
 import { useTranslation } from 'react-i18next';
 import { Link } from '@vegaprotocol/ui-toolkit';
-import { useEnvironment } from '@vegaprotocol/react-helpers';
+import { useEnvironment } from '@vegaprotocol/network-switcher';

 export const TransactionPending = ({
  hash,
--- a/apps/token/src/components/transactions-modal/transactions-modal.tsx
+++ b/apps/token/src/components/transactions-modal/transactions-modal.tsx
@ -1,5 +1,5 @@
 import { Dialog, Link } from '@vegaprotocol/ui-toolkit';
-import { useEnvironment } from '@vegaprotocol/react-helpers';
+import { useEnvironment } from '@vegaprotocol/network-switcher';
 import React from 'react';
 import { useTranslation } from 'react-i18next';

--- a/apps/token/src/components/vega-wallet/hooks.ts
+++ b/apps/token/src/components/vega-wallet/hooks.ts
@ -17,7 +17,7 @@ import type {
  DelegationsVariables,
 } from './__generated__/Delegations';
 import { useVegaWallet } from '@vegaprotocol/wallet';
-import { useEnvironment } from '@vegaprotocol/react-helpers';
+import { useEnvironment } from '@vegaprotocol/network-switcher';

 const DELEGATIONS_QUERY = gql`
  query Delegations($partyId: ID!) {
--- a/apps/token/src/contexts/contracts/contracts-provider.tsx
+++ b/apps/token/src/contexts/contracts/contracts-provider.tsx
@ -14,7 +14,7 @@ import type { ContractsContextShape } from './contracts-context';
 import { ContractsContext } from './contracts-context';
 import { defaultProvider } from '../../lib/web3-connectors';
 import { useEthereumConfig } from '@vegaprotocol/web3';
-import { useEnvironment } from '@vegaprotocol/react-helpers';
+import { useEnvironment } from '@vegaprotocol/network-switcher';

 /**
 * Provides Vega Ethereum contract instances to its children.
--- a/apps/token/src/hooks/use-add-asset-to-wallet.ts
+++ b/apps/token/src/hooks/use-add-asset-to-wallet.ts
@ -1,8 +1,9 @@
 import React from 'react';
 import * as Sentry from '@sentry/react';
-import { Networks, useEnvironment } from '@vegaprotocol/react-helpers';
+import { Networks } from '@vegaprotocol/react-helpers';
 import { useWeb3React } from '@web3-react/core';
 import { MetaMask } from '@web3-react/metamask';
+import { useEnvironment } from '@vegaprotocol/network-switcher';

 export const useAddAssetSupported = () => {
  const { connector } = useWeb3React();
--- a/apps/token/src/hooks/use-tranches.ts
+++ b/apps/token/src/hooks/use-tranches.ts
@ -2,7 +2,7 @@ import type { Networks } from '@vegaprotocol/react-helpers';
 import { useFetch } from '@vegaprotocol/react-helpers';
 import type { Tranche } from '@vegaprotocol/smart-contracts';
 import React, { useEffect } from 'react';
-import { useEnvironment } from '@vegaprotocol/react-helpers';
+import { useEnvironment } from '@vegaprotocol/network-switcher';

 import { BigNumber } from '../lib/bignumber';

--- a/apps/token/src/routes/claim/complete.tsx
+++ b/apps/token/src/routes/claim/complete.tsx
@ -1,5 +1,5 @@
 import { Callout, Intent, Link, Button } from '@vegaprotocol/ui-toolkit';
-import { useEnvironment } from '@vegaprotocol/react-helpers';
+import { useEnvironment } from '@vegaprotocol/network-switcher';
 import { Trans, useTranslation } from 'react-i18next';
 import { Link as RouteLink } from 'react-router-dom';

--- a/apps/token/src/routes/contracts/index.tsx
+++ b/apps/token/src/routes/contracts/index.tsx
@ -1,7 +1,8 @@
-import { t, useEnvironment } from '@vegaprotocol/react-helpers';
+import { t } from '@vegaprotocol/react-helpers';
 import { Link, Splash } from '@vegaprotocol/ui-toolkit';
 import type { EthereumConfig } from '@vegaprotocol/web3';
 import { useEthereumConfig } from '@vegaprotocol/web3';
+import { useEnvironment } from '@vegaprotocol/network-switcher';
 import { Heading } from '../../components/heading';
 import { SplashLoader } from '../../components/splash-loader';

@ -56,6 +57,7 @@ const Contracts = () => {
            title={t('View address on Etherscan')}
            href={`${ETHERSCAN_URL}/address/${value}`}
          >
+            asdfasd
            {value}
          </Link>
        </div>
--- a/apps/token/src/routes/home/token-details/token-details.tsx
+++ b/apps/token/src/routes/home/token-details/token-details.tsx
@ -1,7 +1,7 @@
 import { useTranslation } from 'react-i18next';

 import { Callout, Link, Intent, Splash } from '@vegaprotocol/ui-toolkit';
-import { useEnvironment } from '@vegaprotocol/react-helpers';
+import { useEnvironment } from '@vegaprotocol/network-switcher';
 import { KeyValueTable, KeyValueTableRow } from '@vegaprotocol/ui-toolkit';
 import { useTranches } from '../../../hooks/use-tranches';
 import type { BigNumber } from '../../../lib/bignumber';
--- a/apps/token/src/routes/redemption/tranche/index.tsx
+++ b/apps/token/src/routes/redemption/tranche/index.tsx
@ -3,7 +3,7 @@ import { Trans, useTranslation } from 'react-i18next';
 import { Link, useParams, useOutletContext } from 'react-router-dom';

 import { TransactionCallout } from '../../../components/transaction-callout';
-import { useEnvironment } from '@vegaprotocol/react-helpers';
+import { useEnvironment } from '@vegaprotocol/network-switcher';
 import { useAppState } from '../../../contexts/app-state/app-state-context';
 import { useContracts } from '../../../contexts/contracts/contracts-context';
 import {
--- a/apps/token/src/routes/staking/associate/associate-transaction.tsx
+++ b/apps/token/src/routes/staking/associate/associate-transaction.tsx
@ -5,7 +5,7 @@ import {
  Intent,
  Loader,
 } from '@vegaprotocol/ui-toolkit';
-import { useEnvironment } from '@vegaprotocol/react-helpers';
+import { useEnvironment } from '@vegaprotocol/network-switcher';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link as RouteLink } from 'react-router-dom';
--- a/apps/token/src/routes/staking/staking.tsx
+++ b/apps/token/src/routes/staking/staking.tsx
@ -5,7 +5,7 @@ import { Link as RouteLink } from 'react-router-dom';

 import { BulletHeader } from '../../components/bullet-header';
 import { Link } from '@vegaprotocol/ui-toolkit';
-import { useEnvironment } from '@vegaprotocol/react-helpers';
+import { useEnvironment } from '@vegaprotocol/network-switcher';
 import { Links } from '../../config';
 import {
  AppStateActionType,
--- a/apps/token/src/routes/staking/validator-table.tsx
+++ b/apps/token/src/routes/staking/validator-table.tsx
@ -2,7 +2,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';

 import { Link } from '@vegaprotocol/ui-toolkit';
-import { useEnvironment } from '@vegaprotocol/react-helpers';
+import { useEnvironment } from '@vegaprotocol/network-switcher';
 import { KeyValueTable, KeyValueTableRow } from '@vegaprotocol/ui-toolkit';
 import { BigNumber } from '../../lib/bignumber';
 import { formatNumber } from '../../lib/format-number';
--- a/apps/token/src/routes/tranches/tranche.tsx
+++ b/apps/token/src/routes/tranches/tranche.tsx
@ -1,4 +1,3 @@
-import { useEnvironment } from '@vegaprotocol/react-helpers';
 import type { Tranche as ITranche } from '@vegaprotocol/smart-contracts';
 import { Link } from '@vegaprotocol/ui-toolkit';
 import { useWeb3React } from '@web3-react/core';
@ -8,6 +7,7 @@ import { useParams } from 'react-router';
 import { Navigate } from 'react-router-dom';

 import { useOutletContext } from 'react-router-dom';
+import { useEnvironment } from '@vegaprotocol/network-switcher';
 import { BigNumber } from '../../lib/bignumber';
 import { formatNumber } from '../../lib/format-number';
 import { TrancheItem } from '../redemption/tranche-item';
--- a/apps/token/src/routes/withdrawals/index.tsx
+++ b/apps/token/src/routes/withdrawals/index.tsx
@ -5,7 +5,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';

 import { Link } from '@vegaprotocol/ui-toolkit';
-import { useEnvironment } from '@vegaprotocol/react-helpers';
+import { useEnvironment } from '@vegaprotocol/network-switcher';
 import { Heading } from '../../components/heading';
 import { KeyValueTable, KeyValueTableRow } from '@vegaprotocol/ui-toolkit';
 import { SplashLoader } from '../../components/splash-loader';
--- a/apps/trading-e2e/src/support/vega-wallet/index.ts
+++ b/apps/trading-e2e/src/support/vega-wallet/index.ts
@ -7,6 +7,7 @@ export default class VegaWallet {
  walletInputError = 'input-wallet-error';
  walletFormError = 'form-error';
  inputError = 'input-error-text';
+  connectNetworkBtn = 'connect-network';

  openVegaWalletConnectDialog() {
    this.clickOnWalletConnectDialog();
--- a/apps/trading/.env
+++ b/apps/trading/.env
@ -24,3 +24,4 @@ NX_VEGA_URL = "https://lb.testnet.vega.xyz/query"
 NX_ETHEREUM_CHAIN_ID = 3
 NX_ETHEREUM_PROVIDER_URL = "https://ropsten.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8"
 NX_ETHERSCAN_URL = "https://ropsten.etherscan.io"
+NX_VEGA_NETWORKS='{\"MAINNET\":\"https://alpha.console.vega.xyz\"}'
--- a/apps/trading/.env.devnet
+++ b/apps/trading/.env.devnet
@ -1,6 +1,7 @@
 # App configuration variables
 NX_VEGA_ENV = "DEVNET"
 NX_VEGA_URL = "https://n04.d.vega.xyz/query"
+NX_VEGA_NETWORKS='{\"MAINNET\":\"https://alpha.console.vega.xyz\"}'
 NX_ETHEREUM_CHAIN_ID = 3
 NX_ETHEREUM_PROVIDER_URL = "https://ropsten.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8"
-NX_ETHERSCAN_URL = "https://ropsten.etherscan.io"
+NX_ETHERSCAN_URL = "https://ropsten.etherscan.io"
--- a/apps/trading/.env.mainnet
+++ b/apps/trading/.env.mainnet
@ -1,6 +1,7 @@
 # App configuration variables
 NX_VEGA_ENV = "MAINNET"
 NX_VEGA_URL = "https://api.token.vega.xyz/query"
+NX_VEGA_NETWORKS='{\"MAINNET\":\"https://alpha.console.vega.xyz\"}'
 NX_ETHEREUM_CHAIN_ID = 1
 NX_ETHEREUM_PROVIDER_URL = "https://mainnet.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8"
-NX_ETHERSCAN_URL = "https://etherscan.io"
+NX_ETHERSCAN_URL = "https://etherscan.io"
--- a/apps/trading/.env.stagnet1
+++ b/apps/trading/.env.stagnet1
@ -1,6 +1,7 @@
 # App configuration variables
 NX_VEGA_ENV = "STAGNET"
 NX_VEGA_URL = "https://n03.s.vega.xyz/query"
+NX_VEGA_NETWORKS='{\"MAINNET\":\"https://alpha.console.vega.xyz\"}'
 NX_ETHEREUM_CHAIN_ID = 3
 NX_ETHEREUM_PROVIDER_URL = "https://ropsten.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8"
-NX_ETHERSCAN_URL = "https://ropsten.etherscan.io"
+NX_ETHERSCAN_URL = "https://ropsten.etherscan.io"
--- a/apps/trading/.env.stagnet2
+++ b/apps/trading/.env.stagnet2
@ -1,6 +1,7 @@
 # App configuration variables
 NX_VEGA_ENV = "STAGNET2"
 NX_VEGA_URL = "https://n03.stagnet2.vega.xyz/query"
+NX_VEGA_NETWORKS='{\"MAINNET\":\"https://alpha.console.vega.xyz\"}'
 NX_ETHEREUM_CHAIN_ID = 3
 NX_ETHEREUM_PROVIDER_URL = "https://ropsten.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8"
-NX_ETHERSCAN_URL = "https://ropsten.etherscan.io"
+NX_ETHERSCAN_URL = "https://ropsten.etherscan.io"
--- a/apps/trading/.env.testnet
+++ b/apps/trading/.env.testnet
@ -1,6 +1,7 @@
 # App configuration variables
 NX_VEGA_ENV = "TESTNET"
 NX_VEGA_URL = "https://lb.testnet.vega.xyz/query"
+NX_VEGA_NETWORKS='{\"MAINNET\":\"https://alpha.console.vega.xyz\"}'
 NX_ETHEREUM_CHAIN_ID = 3
 NX_ETHEREUM_PROVIDER_URL = "https://ropsten.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8"
-NX_ETHERSCAN_URL = "https://ropsten.etherscan.io"
+NX_ETHERSCAN_URL = "https://ropsten.etherscan.io"
--- a/apps/trading/pages/_app.page.tsx
+++ b/apps/trading/pages/_app.page.tsx
@ -7,7 +7,11 @@ import {
  VegaManageDialog,
  VegaWalletProvider,
 } from '@vegaprotocol/wallet';
-import { EnvironmentProvider } from '@vegaprotocol/react-helpers';
+import {
+  useEnvironment,
+  EnvironmentProvider,
+  NetworkSwitcherDialog,
+} from '@vegaprotocol/network-switcher';
 import { Connectors } from '../lib/vega-connectors';
 import { useMemo } from 'react';
 import { createClient } from '../lib/apollo-client';
@ -18,10 +22,57 @@ import { VegaWalletConnectButton } from '../components/vega-wallet-connect-butto
 import './styles.css';
 import { useGlobalStore } from '../stores';

-function VegaTradingApp({ Component, pageProps }: AppProps) {
-  const client = useMemo(() => createClient(process.env['NX_VEGA_URL']), []);
+function AppBody({ Component, pageProps }: AppProps) {
  const store = useGlobalStore();
-  const [theme, toggleTheme] = useThemeSwitcher();
+  const { VEGA_NETWORKS } = useEnvironment();
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [_, toggleTheme] = useThemeSwitcher();
+
+  return (
+    <div className="h-full dark:bg-black dark:text-white-60 bg-white relative z-0 text-black-60 grid grid-rows-[min-content,1fr]">
+      <div className="flex items-stretch border-b-[7px] border-vega-yellow">
+        <Navbar />
+        <div className="flex items-center gap-4 ml-auto mr-8">
+          <VegaWalletConnectButton
+            setConnectDialog={(open) => {
+              store.setVegaWalletConnectDialog(open);
+            }}
+            setManageDialog={(open) => {
+              store.setVegaWalletManageDialog(open);
+            }}
+          />
+          <ThemeSwitcher onToggle={toggleTheme} className="-my-4" />
+        </div>
+      </div>
+      <main data-testid={pageProps.page}>
+        {/* @ts-ignore conflict between @types/react and nextjs internal types */}
+        <Component {...pageProps} />
+      </main>
+      <VegaConnectDialog
+        connectors={Connectors}
+        dialogOpen={store.vegaWalletConnectDialog}
+        setDialogOpen={(open) => store.setVegaWalletConnectDialog(open)}
+      />
+      <VegaManageDialog
+        dialogOpen={store.vegaWalletManageDialog}
+        setDialogOpen={(open) => store.setVegaWalletManageDialog(open)}
+      />
+      <NetworkSwitcherDialog
+        dialogOpen={store.vegaNetworkSwitcherDialog}
+        setDialogOpen={(open) => store.setVegaNetworkSwitcherDialog(open)}
+        onConnect={({ network }) => {
+          if (VEGA_NETWORKS[network]) {
+            window.location.href = VEGA_NETWORKS[network];
+          }
+        }}
+      />
+    </div>
+  );
+}
+
+function VegaTradingApp(props: AppProps) {
+  const [theme] = useThemeSwitcher();
+  const client = useMemo(() => createClient(process.env['NX_VEGA_URL']), []);

  return (
    <EnvironmentProvider>
@ -48,39 +99,7 @@ function VegaTradingApp({ Component, pageProps }: AppProps) {
                  href="https://static.vega.xyz/fonts.css"
                />
              </Head>
-              <div className="h-full dark:bg-black dark:text-white-60 bg-white relative z-0 text-black-60 grid grid-rows-[min-content,1fr]">
-                <div className="flex items-stretch border-b-[7px] border-vega-yellow">
-                  <Navbar />
-                  <div className="flex items-center gap-4 ml-auto mr-8">
-                    <VegaWalletConnectButton
-                      setConnectDialog={(open) => {
-                        store.setVegaWalletConnectDialog(open);
-                      }}
-                      setManageDialog={(open) => {
-                        store.setVegaWalletManageDialog(open);
-                      }}
-                    />
-                    <ThemeSwitcher onToggle={toggleTheme} className="-my-4" />
-                  </div>
-                </div>
-                <main data-testid={pageProps.page}>
-                  {/* @ts-ignore conflict between @types/react and nextjs internal types */}
-                  <Component {...pageProps} />
-                </main>
-                <VegaConnectDialog
-                  connectors={Connectors}
-                  dialogOpen={store.vegaWalletConnectDialog}
-                  setDialogOpen={(open) =>
-                    store.setVegaWalletConnectDialog(open)
-                  }
-                />
-                <VegaManageDialog
-                  dialogOpen={store.vegaWalletManageDialog}
-                  setDialogOpen={(open) =>
-                    store.setVegaWalletManageDialog(open)
-                  }
-                />
-              </div>
+              <AppBody {...props} />
            </AppLoader>
          </VegaWalletProvider>
        </ApolloProvider>
--- a/apps/trading/pages/portfolio/deposit/deposit-container.tsx
+++ b/apps/trading/pages/portfolio/deposit/deposit-container.tsx
@ -2,7 +2,8 @@ import { gql } from '@apollo/client';
 import { PageQueryContainer } from '../../../components/page-query-container';
 import type { DepositPage } from './__generated__/DepositPage';
 import { DepositManager } from '@vegaprotocol/deposits';
-import { t, useEnvironment } from '@vegaprotocol/react-helpers';
+import { t } from '@vegaprotocol/react-helpers';
+import { useEnvironment } from '@vegaprotocol/network-switcher';
 import { Splash } from '@vegaprotocol/ui-toolkit';
 import { ASSET_FRAGMENT } from '../../../lib/query-fragments';

--- a/apps/trading/stores/global.ts
+++ b/apps/trading/stores/global.ts
@ -6,6 +6,8 @@ interface GlobalStore {
  setVegaWalletConnectDialog: (isOpen: boolean) => void;
  vegaWalletManageDialog: boolean;
  setVegaWalletManageDialog: (isOpen: boolean) => void;
+  vegaNetworkSwitcherDialog: boolean;
+  setVegaNetworkSwitcherDialog: (isOpen: boolean) => void;
  landingDialog: boolean;
  setLandingDialog: (isOpen: boolean) => void;
 }
@ -19,6 +21,10 @@ export const useGlobalStore = create((set: SetState<GlobalStore>) => ({
  setVegaWalletManageDialog: (isOpen: boolean) => {
    set({ vegaWalletManageDialog: isOpen });
  },
+  vegaNetworkSwitcherDialog: false,
+  setVegaNetworkSwitcherDialog: (isOpen: boolean) => {
+    set({ vegaNetworkSwitcherDialog: isOpen });
+  },
  landingDialog: false,
  setLandingDialog: (isOpen: boolean) => {
    set({ landingDialog: isOpen });
--- a/libs/network-switcher/.babelrc
+++ b/libs/network-switcher/.babelrc
@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nrwl/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}
--- a/libs/network-switcher/.eslintrc.json
+++ b/libs/network-switcher/.eslintrc.json
@ -0,0 +1,18 @@
+{
+  "extends": ["plugin:@nrwl/nx/react", "../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}
--- a/libs/network-switcher/README.md
+++ b/libs/network-switcher/README.md
@ -0,0 +1,17 @@
+# network-switcher
+
+This library was generated with [Nx](https://nx.dev).
+
+## Prerequisites
+
+Two environment variables need to be present for any app consuming this library.
+
+`NX_VEGA_ENV` is the name of the environment.
+
+`NX_VEGA_REST` is the REST endpoint for the environment.
+
+For examples, see Block Explorer's .env files [here](../../apps/explorer)
+
+## Running unit tests
+
+Run `nx test network-switcher` to execute the unit tests via [Jest](https://jestjs.io).
--- a/libs/network-switcher/jest.config.js
+++ b/libs/network-switcher/jest.config.js
@ -0,0 +1,9 @@
+module.exports = {
+  displayName: 'network-switcher',
+  preset: '../../jest.preset.js',
+  transform: {
+    '^.+\\.[tj]sx?$': 'babel-jest',
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+  coverageDirectory: '../../coverage/libs/network-switcher',
+};
--- a/libs/network-switcher/package.json
+++ b/libs/network-switcher/package.json
@ -0,0 +1,4 @@
+{
+  "name": "@vegaprotocol/network-switcher",
+  "version": "0.0.1"
+}
--- a/libs/network-switcher/project.json
+++ b/libs/network-switcher/project.json
@ -0,0 +1,43 @@
+{
+  "root": "libs/network-switcher",
+  "sourceRoot": "libs/network-switcher/src",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "build": {
+      "executor": "@nrwl/web:rollup",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "outputPath": "dist/libs/network-switcher",
+        "tsConfig": "libs/network-switcher/tsconfig.lib.json",
+        "project": "libs/network-switcher/package.json",
+        "entryFile": "libs/network-switcher/src/index.ts",
+        "external": ["react/jsx-runtime"],
+        "rollupConfig": "@nrwl/react/plugins/bundle-rollup",
+        "compiler": "babel",
+        "assets": [
+          {
+            "glob": "libs/network-switcher/README.md",
+            "input": ".",
+            "output": "."
+          }
+        ]
+      }
+    },
+    "lint": {
+      "executor": "@nrwl/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["libs/network-switcher/**/*.{ts,tsx,js,jsx}"]
+      }
+    },
+    "test": {
+      "executor": "@nrwl/jest:jest",
+      "outputs": ["coverage/libs/network-switcher"],
+      "options": {
+        "jestConfig": "libs/network-switcher/jest.config.js",
+        "passWithNoTests": true
+      }
+    }
+  }
+}
--- a/libs/network-switcher/src/components/index.ts
+++ b/libs/network-switcher/src/components/index.ts
@ -0,0 +1,2 @@
+export * from './network-switcher';
+export * from './network-switcher-dialog';
--- a/libs/network-switcher/src/components/network-switcher-dialog/index.tsx
+++ b/libs/network-switcher/src/components/network-switcher-dialog/index.tsx
@ -0,0 +1 @@
+export { NetworkSwitcherDialog } from './network-switcher-dialog';
--- a/libs/network-switcher/src/components/network-switcher-dialog/network-switcher-dialog.tsx
+++ b/libs/network-switcher/src/components/network-switcher-dialog/network-switcher-dialog.tsx
@ -0,0 +1,37 @@
+import type { ComponentProps } from 'react';
+import { t } from '@vegaprotocol/react-helpers';
+import type { Intent } from '@vegaprotocol/ui-toolkit';
+import { Dialog } from '@vegaprotocol/ui-toolkit';
+import { NetworkSwitcher } from '../network-switcher';
+
+type NetworkSwitcherDialogProps = Pick<
+  ComponentProps<typeof NetworkSwitcher>,
+  'onConnect' | 'onError'
+> & {
+  dialogOpen: boolean;
+  setDialogOpen: (dialogOpen: boolean) => void;
+  intent?: Intent;
+};
+
+export const NetworkSwitcherDialog = ({
+  dialogOpen,
+  setDialogOpen,
+  intent,
+  onConnect,
+  onError,
+}: NetworkSwitcherDialogProps) => {
+  return (
+    <Dialog
+      open={dialogOpen}
+      onChange={setDialogOpen}
+      title={t('Choose a network')}
+      intent={intent}
+    >
+      <NetworkSwitcher
+        onConnect={onConnect}
+        onError={onError}
+        onClose={() => setDialogOpen(false)}
+      />
+    </Dialog>
+  );
+};
--- a/libs/network-switcher/src/components/network-switcher/index.tsx
+++ b/libs/network-switcher/src/components/network-switcher/index.tsx
@ -0,0 +1 @@
+export { NetworkSwitcher } from './network-switcher';
--- a/libs/network-switcher/src/components/network-switcher/network-switcher.tsx
+++ b/libs/network-switcher/src/components/network-switcher/network-switcher.tsx
@ -0,0 +1,47 @@
+import { useForm, Controller } from 'react-hook-form';
+import { Button, Select } from '@vegaprotocol/ui-toolkit';
+import type { Networks } from '@vegaprotocol/react-helpers';
+import { t } from '@vegaprotocol/react-helpers';
+import { useEnvironment } from '../../hooks';
+
+type NetworkState = {
+  network: Networks;
+};
+
+type NetworkSwitcherProps = {
+  onConnect: (network: NetworkState) => void;
+  onError?: () => void;
+  onClose: () => void;
+};
+
+export const NetworkSwitcher = ({ onConnect }: NetworkSwitcherProps) => {
+  const { VEGA_ENV, VEGA_NETWORKS } = useEnvironment();
+  const { control, handleSubmit } = useForm<NetworkState>({
+    defaultValues: {
+      network: VEGA_ENV,
+    },
+  });
+
+  return (
+    <form onSubmit={handleSubmit(onConnect)}>
+      <div className="py-16">
+        <Controller
+          name="network"
+          control={control}
+          render={({ field }) => (
+            <Select value={field.value} onChange={field.onChange}>
+              {Object.keys(VEGA_NETWORKS).map((network) => (
+                <option value={network}>{network}</option>
+              ))}
+            </Select>
+          )}
+        />
+      </div>
+      <div className="py-16">
+        <Button data-testid="connect-network" type="submit">
+          {t('Connect')}
+        </Button>
+      </div>
+    </form>
+  );
+};
--- a/libs/network-switcher/src/hooks/index.ts
+++ b/libs/network-switcher/src/hooks/index.ts
@ -0,0 +1 @@
+export * from './use-environment';
--- a/libs/network-switcher/src/hooks/use-environment.tsx
+++ b/libs/network-switcher/src/hooks/use-environment.tsx
@ -1,6 +1,9 @@
+import { useState } from 'react';
 import type { ReactNode } from 'react';
 import { createContext, useContext } from 'react';
-import type { Networks } from '../lib/environment';
+import type { Networks } from '@vegaprotocol/react-helpers';
+
+const isBrowser = typeof window !== 'undefined';

 declare global {
  interface Window {
@ -50,13 +53,14 @@ export const ContractAddresses: { [key in Networks]: VegaContracts } = {
 };

 type EnvironmentProviderProps = {
-  definintions?: Partial<RawEnvironment>;
+  definitions?: Partial<RawEnvironment>;
  children?: ReactNode;
 };

 export const ENV_KEYS = [
  'VEGA_URL',
  'VEGA_ENV',
+  'VEGA_NETWORKS',
  'ETHEREUM_CHAIN_ID',
  'ETHEREUM_PROVIDER_URL',
  'ETHERSCAN_URL',
@ -69,12 +73,15 @@ type RawEnvironment = Record<EnvKey, string>;
 export type Environment = {
  VEGA_URL: string;
  VEGA_ENV: Networks;
+  VEGA_NETWORKS: Record<Networks, string>;
  ETHEREUM_CHAIN_ID: number;
  ETHEREUM_PROVIDER_URL: string;
  ETHERSCAN_URL: string;
  ADDRESSES: VegaContracts;
 };

+type EnvironmentState = Environment;
+
 const getBundledEnvironmentValue = (key: EnvKey) => {
  switch (key) {
    // need to have these hardcoded so on build time we can insert sensible defaults
@ -88,6 +95,8 @@ const getBundledEnvironmentValue = (key: EnvKey) => {
      return process.env['NX_ETHEREUM_PROVIDER_URL'];
    case 'ETHERSCAN_URL':
      return process.env['NX_ETHERSCAN_URL'];
+    case 'VEGA_NETWORKS':
+      return process.env['NX_VEGA_NETWORKS'];
  }
 };

@ -97,38 +106,67 @@ const transformValue = (key: EnvKey, value?: string) => {
      return value as Networks;
    case 'ETHEREUM_CHAIN_ID':
      return value && Number(value);
+    case 'VEGA_NETWORKS': {
+      if (value) {
+        try {
+          return JSON.parse(value);
+        } catch (e) {
+          throw new Error(
+            'Error parsing the "NX_VEGA_NETWORKS" environment variable. Make sure it has a valid JSON format.'
+          );
+        }
+      }
+      return undefined;
+    }
    default:
      return value;
  }
 };

-const getValue = (key: EnvKey, definintions: Partial<RawEnvironment> = {}) => {
-  if (typeof window === 'undefined') {
+const getValue = (key: EnvKey, definitions: Partial<RawEnvironment> = {}) => {
+  if (!isBrowser) {
    return transformValue(
      key,
-      definintions[key] ?? getBundledEnvironmentValue(key)
+      definitions[key] ?? getBundledEnvironmentValue(key)
    );
  }
  return transformValue(
    key,
-    window._ENV?.[key] ?? definintions[key] ?? getBundledEnvironmentValue(key)
+    window._ENV?.[key] ?? definitions[key] ?? getBundledEnvironmentValue(key)
  );
 };

-const EnvironmentContext = createContext({} as Environment);
-
-export const EnvironmentProvider = ({
-  definintions,
-  children,
-}: EnvironmentProviderProps) => {
+const compileEnvironment = (
+  definitions?: Partial<RawEnvironment>
+): Environment => {
  const environment = ENV_KEYS.reduce(
    (acc, key) => ({
      ...acc,
-      [key]: getValue(key, definintions),
+      [key]: getValue(key, definitions),
    }),
    {} as Environment
  );

+  return {
+    ...environment,
+    ADDRESSES: ContractAddresses[environment['VEGA_ENV']],
+    VEGA_NETWORKS: {
+      [environment.VEGA_ENV]: isBrowser
+        ? window.location.href
+        : environment.VEGA_NETWORKS[environment.VEGA_ENV],
+      ...environment.VEGA_NETWORKS,
+    },
+  };
+};
+
+const EnvironmentContext = createContext({} as EnvironmentState);
+
+export const EnvironmentProvider = ({
+  definitions,
+  children,
+}: EnvironmentProviderProps) => {
+  const [environment] = useState<Environment>(compileEnvironment(definitions));
+
  const missingKeys = Object.keys(environment)
    .filter((key) => typeof environment[key as EnvKey] === undefined)
    .map((key) => `"${key}"`)
@ -141,12 +179,7 @@ export const EnvironmentProvider = ({
  }

  return (
-    <EnvironmentContext.Provider
-      value={{
-        ...environment,
-        ADDRESSES: ContractAddresses[environment['VEGA_ENV']],
-      }}
-    >
+    <EnvironmentContext.Provider value={environment}>
      {children}
    </EnvironmentContext.Provider>
  );
--- a/libs/network-switcher/src/index.ts
+++ b/libs/network-switcher/src/index.ts
@ -0,0 +1,5 @@
+// Components
+export * from './components';
+
+// Hooks
+export * from './hooks';
--- a/libs/network-switcher/tsconfig.json
+++ b/libs/network-switcher/tsconfig.json
@ -0,0 +1,25 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": false,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}
--- a/libs/network-switcher/tsconfig.lib.json
+++ b/libs/network-switcher/tsconfig.lib.json
@ -0,0 +1,22 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": ["node"]
+  },
+  "files": [
+    "../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
+    "../../node_modules/@nrwl/react/typings/image.d.ts"
+  ],
+  "exclude": [
+    "**/*.spec.ts",
+    "**/*.test.ts",
+    "**/*.spec.tsx",
+    "**/*.test.tsx",
+    "**/*.spec.js",
+    "**/*.test.js",
+    "**/*.spec.jsx",
+    "**/*.test.jsx"
+  ],
+  "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
+}
--- a/libs/network-switcher/tsconfig.spec.json
+++ b/libs/network-switcher/tsconfig.spec.json
@ -0,0 +1,19 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node"]
+  },
+  "include": [
+    "**/*.test.ts",
+    "**/*.spec.ts",
+    "**/*.test.tsx",
+    "**/*.spec.tsx",
+    "**/*.test.js",
+    "**/*.spec.js",
+    "**/*.test.jsx",
+    "**/*.spec.jsx",
+    "**/*.d.ts"
+  ]
+}
--- a/libs/react-helpers/src/hooks/index.ts
+++ b/libs/react-helpers/src/hooks/index.ts
@ -2,4 +2,3 @@ export * from './use-apply-grid-transaction';
 export * from './use-data-provider';
 export * from './use-theme-switcher';
 export * from './use-fetch';
-export * from './use-environment';
--- a/libs/web3/src/lib/transaction-dialog/dialog-rows.tsx
+++ b/libs/web3/src/lib/transaction-dialog/dialog-rows.tsx
@ -1,6 +1,6 @@
 import { t } from '@vegaprotocol/react-helpers';
 import { Link } from '@vegaprotocol/ui-toolkit';
-import { useEnvironment } from '@vegaprotocol/react-helpers';
+import { useEnvironment } from '@vegaprotocol/network-switcher';
 import { EthTxStatus } from '../use-ethereum-transaction';

 const ACTIVE_CLASSES = 'text-black dark:text-white';
--- a/libs/withdraws/src/lib/withdraw-dialog.tsx
+++ b/libs/withdraws/src/lib/withdraw-dialog.tsx
@ -1,5 +1,5 @@
 import { Link, Dialog, Icon, Intent, Loader } from '@vegaprotocol/ui-toolkit';
-import { useEnvironment } from '@vegaprotocol/react-helpers';
+import { useEnvironment } from '@vegaprotocol/network-switcher';
 import type { VegaTxState } from '@vegaprotocol/wallet';
 import { VegaTxStatus } from '@vegaprotocol/wallet';
 import type { ReactNode } from 'react';
--- a/libs/withdraws/src/lib/withdrawals-table.tsx
+++ b/libs/withdraws/src/lib/withdrawals-table.tsx
@ -11,7 +11,7 @@ import {
 } from '@vegaprotocol/react-helpers';
 import { WithdrawalStatus } from '@vegaprotocol/types';
 import { Link, AgGridDynamic as AgGrid } from '@vegaprotocol/ui-toolkit';
-import { useEnvironment } from '@vegaprotocol/react-helpers';
+import { useEnvironment } from '@vegaprotocol/network-switcher';
 import { TransactionDialog } from '@vegaprotocol/web3';
 import { useCompleteWithdraw } from './use-complete-withdraw';
 import type { Withdrawals_party_withdrawals } from './__generated__/Withdrawals';
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@ -24,6 +24,7 @@
      "@vegaprotocol/market-depth": ["libs/market-depth/src/index.ts"],
      "@vegaprotocol/market-list": ["libs/market-list/src/index.ts"],
      "@vegaprotocol/network-stats": ["libs/network-stats/src/index.ts"],
+      "@vegaprotocol/network-switcher": ["libs/network-switcher/src/index.ts"],
      "@vegaprotocol/order-list": ["libs/order-list/src/index.ts"],
      "@vegaprotocol/positions": ["libs/positions/src/index.ts"],
      "@vegaprotocol/react-helpers": ["libs/react-helpers/src/index.ts"],
--- a/workspace.json
+++ b/workspace.json
@ -11,6 +11,7 @@
    "market-depth": "libs/market-depth",
    "market-list": "libs/market-list",
    "network-stats": "libs/network-stats",
+    "network-switcher": "libs/network-switcher",
    "order-list": "libs/order-list",
    "positions": "libs/positions",
    "react-helpers": "libs/react-helpers",
				`@ -0,0 +1 @@`
				`export { NetworkSwitcherDialog } from './network-switcher-dialog';`
				`@ -0,0 +1 @@`
				`export { NetworkSwitcher } from './network-switcher';`