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>

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

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'
 

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'

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/'

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'

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'

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'

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 { ThemeContext, useThemeSwitcher } from '@vegaprotocol/react-helpers';
-import {
+import { EnvironmentProvider } from '@vegaprotocol/network-switcher';
-  useThemeSwitcher,
-  EnvironmentProvider,
-} from '@vegaprotocol/react-helpers';
 import { createClient } from './lib/apollo-client';
 import { Nav } from './components/nav';
 import { Header } from './components/header';

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';

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;

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

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"

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"

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"

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"

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"

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() {

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();

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,

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 = ({

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;

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,

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';
 

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!) {

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.

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();

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';
 

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';
 

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>

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';

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 {

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';

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,

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';

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';

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';

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();

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\"}'

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"

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"

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"

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"

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"

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) {
+function AppBody({ Component, pageProps }: AppProps) {
-  const client = useMemo(() => createClient(process.env['NX_VEGA_URL']), []);
   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]">
+              <AppBody {...props} />
-                <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>
             </AppLoader>
           </VegaWalletProvider>
         </ApolloProvider>

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';
 

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

libs/network-switcher/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nrwl/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}

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": {}
+    }
+  ]
+}

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

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',
+};

libs/network-switcher/package.json

@@ -0,0 +1,4 @@
+{
+  "name": "@vegaprotocol/network-switcher",
+  "version": "0.0.1"
+}

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
+      }
+    }
+  }
+}

libs/network-switcher/src/components/index.ts

@@ -0,0 +1,2 @@
+export * from './network-switcher';
+export * from './network-switcher-dialog';

libs/network-switcher/src/components/network-switcher-dialog/index.tsx

@@ -0,0 +1 @@
+export { NetworkSwitcherDialog } from './network-switcher-dialog';

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>
+  );
+};

libs/network-switcher/src/components/network-switcher/index.tsx

@@ -0,0 +1 @@
+export { NetworkSwitcher } from './network-switcher';

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>
+  );
+};

libs/network-switcher/src/hooks/index.ts

@@ -0,0 +1 @@
+export * from './use-environment';

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> = {}) => {
+const getValue = (key: EnvKey, definitions: Partial<RawEnvironment> = {}) => {
-  if (typeof window === 'undefined') {
+  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);
+const compileEnvironment = (
-
+  definitions?: Partial<RawEnvironment>
-export const EnvironmentProvider = ({
+): Environment => {
-  definintions,
-  children,
-}: EnvironmentProviderProps) => {
   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
+    <EnvironmentContext.Provider value={environment}>
-      value={{
-        ...environment,
-        ADDRESSES: ContractAddresses[environment['VEGA_ENV']],
-      }}
-    >
       {children}
     </EnvironmentContext.Provider>
   );

libs/network-switcher/src/index.ts

@@ -0,0 +1,5 @@
+// Components
+export * from './components';
+
+// Hooks
+export * from './hooks';

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"
+    }
+  ]
+}

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"]
+}

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"
+  ]
+}

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';

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';

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';

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';

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"],

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",