From ecda46caa599eec46d8adbfa3f1bd19c71ea9e04 Mon Sep 17 00:00:00 2001 From: botond <105208209+notbot00@users.noreply.github.com> Date: Fri, 10 Jun 2022 10:15:38 +0100 Subject: [PATCH] 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 Co-authored-by: Dexter --- apps/explorer/.env | 1 + apps/explorer/.env.capsule | 1 + apps/explorer/.env.devnet | 1 + apps/explorer/.env.mainnet | 1 + apps/explorer/.env.stagnet1 | 1 + apps/explorer/.env.stagnet2 | 1 + apps/explorer/.env.testnet | 1 + apps/explorer/src/app/app.tsx | 7 +- apps/simple-trading-app/src/app/app.tsx | 2 +- apps/stats/src/app.tsx | 2 +- apps/token/.env | 1 + apps/token/.env.devnet | 3 +- apps/token/.env.mainnet | 3 +- apps/token/.env.stagnet1 | 3 +- apps/token/.env.stagnet2 | 3 +- apps/token/.env.testnet | 3 +- apps/token/src/app.tsx | 2 +- .../add-locked-token/add-locked-token.tsx | 2 +- .../balance-manager/balance-manager.tsx | 1 + .../transaction-complete.tsx | 2 +- .../transaction-callout/transaction-error.tsx | 2 +- .../transaction-pending.tsx | 2 +- .../transactions-modal/transactions-modal.tsx | 2 +- .../token/src/components/vega-wallet/hooks.ts | 2 +- .../contexts/contracts/contracts-provider.tsx | 2 +- .../src/hooks/use-add-asset-to-wallet.ts | 3 +- apps/token/src/hooks/use-tranches.ts | 2 +- apps/token/src/routes/claim/complete.tsx | 2 +- apps/token/src/routes/contracts/index.tsx | 4 +- .../home/token-details/token-details.tsx | 2 +- .../src/routes/redemption/tranche/index.tsx | 2 +- .../associate/associate-transaction.tsx | 2 +- apps/token/src/routes/staking/staking.tsx | 2 +- .../src/routes/staking/validator-table.tsx | 2 +- apps/token/src/routes/tranches/tranche.tsx | 2 +- apps/token/src/routes/withdrawals/index.tsx | 2 +- .../src/support/vega-wallet/index.ts | 1 + apps/trading/.env | 1 + apps/trading/.env.devnet | 3 +- apps/trading/.env.mainnet | 3 +- apps/trading/.env.stagnet1 | 3 +- apps/trading/.env.stagnet2 | 3 +- apps/trading/.env.testnet | 3 +- apps/trading/pages/_app.page.tsx | 93 +++++++++++-------- .../portfolio/deposit/deposit-container.tsx | 3 +- apps/trading/stores/global.ts | 6 ++ libs/network-switcher/.babelrc | 12 +++ libs/network-switcher/.eslintrc.json | 18 ++++ libs/network-switcher/README.md | 17 ++++ libs/network-switcher/jest.config.js | 9 ++ libs/network-switcher/package.json | 4 + libs/network-switcher/project.json | 43 +++++++++ libs/network-switcher/src/components/index.ts | 2 + .../network-switcher-dialog/index.tsx | 1 + .../network-switcher-dialog.tsx | 37 ++++++++ .../src/components/network-switcher/index.tsx | 1 + .../network-switcher/network-switcher.tsx | 47 ++++++++++ libs/network-switcher/src/hooks/index.ts | 1 + .../src/hooks/use-environment.tsx | 71 ++++++++++---- libs/network-switcher/src/index.ts | 5 + libs/network-switcher/tsconfig.json | 25 +++++ libs/network-switcher/tsconfig.lib.json | 22 +++++ libs/network-switcher/tsconfig.spec.json | 19 ++++ libs/react-helpers/src/hooks/index.ts | 1 - .../lib/transaction-dialog/dialog-rows.tsx | 2 +- libs/withdraws/src/lib/withdraw-dialog.tsx | 2 +- libs/withdraws/src/lib/withdrawals-table.tsx | 2 +- tsconfig.base.json | 1 + workspace.json | 1 + 69 files changed, 441 insertions(+), 97 deletions(-) create mode 100644 libs/network-switcher/.babelrc create mode 100644 libs/network-switcher/.eslintrc.json create mode 100644 libs/network-switcher/README.md create mode 100644 libs/network-switcher/jest.config.js create mode 100644 libs/network-switcher/package.json create mode 100644 libs/network-switcher/project.json create mode 100644 libs/network-switcher/src/components/index.ts create mode 100644 libs/network-switcher/src/components/network-switcher-dialog/index.tsx create mode 100644 libs/network-switcher/src/components/network-switcher-dialog/network-switcher-dialog.tsx create mode 100644 libs/network-switcher/src/components/network-switcher/index.tsx create mode 100644 libs/network-switcher/src/components/network-switcher/network-switcher.tsx create mode 100644 libs/network-switcher/src/hooks/index.ts rename libs/{react-helpers => network-switcher}/src/hooks/use-environment.tsx (73%) create mode 100644 libs/network-switcher/src/index.ts create mode 100644 libs/network-switcher/tsconfig.json create mode 100644 libs/network-switcher/tsconfig.lib.json create mode 100644 libs/network-switcher/tsconfig.spec.json diff --git a/apps/explorer/.env b/apps/explorer/.env index ae45130a1..a72be23cf 100644 --- 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 diff --git a/apps/explorer/.env.capsule b/apps/explorer/.env.capsule index 482d5c699..a9da49665 100644 --- 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' diff --git a/apps/explorer/.env.devnet b/apps/explorer/.env.devnet index 65b3ce2c0..838dc8b5e 100644 --- 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' diff --git a/apps/explorer/.env.mainnet b/apps/explorer/.env.mainnet index fd1fce297..5c8dcad60 100644 --- 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/' diff --git a/apps/explorer/.env.stagnet1 b/apps/explorer/.env.stagnet1 index 86e8a8a17..544db503d 100644 --- 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' diff --git a/apps/explorer/.env.stagnet2 b/apps/explorer/.env.stagnet2 index 6aeef67b1..7b8772813 100644 --- 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' diff --git a/apps/explorer/.env.testnet b/apps/explorer/.env.testnet index fc7a801d5..c9b04da85 100644 --- 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' diff --git a/apps/explorer/src/app/app.tsx b/apps/explorer/src/app/app.tsx index 9cdd09834..5d025872f 100644 --- 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'; diff --git a/apps/simple-trading-app/src/app/app.tsx b/apps/simple-trading-app/src/app/app.tsx index f106bddbb..bb8213af8 100644 --- 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'; diff --git a/apps/stats/src/app.tsx b/apps/stats/src/app.tsx index 66430467d..1b1ef0ab3 100644 --- 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; diff --git a/apps/token/.env b/apps/token/.env index 998ab3e21..e58d5dd3c 100644 --- 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 diff --git a/apps/token/.env.devnet b/apps/token/.env.devnet index 43dfa5712..303b1686a 100644 --- 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" \ No newline at end of file +NX_ETHERSCAN_URL = "https://ropsten.etherscan.io" diff --git a/apps/token/.env.mainnet b/apps/token/.env.mainnet index 037533823..7035d8405 100644 --- 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" \ No newline at end of file +NX_ETHERSCAN_URL = "https://etherscan.io" diff --git a/apps/token/.env.stagnet1 b/apps/token/.env.stagnet1 index 17d96f986..f69446951 100644 --- 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" \ No newline at end of file +NX_ETHERSCAN_URL = "https://ropsten.etherscan.io" diff --git a/apps/token/.env.stagnet2 b/apps/token/.env.stagnet2 index b7bcbb54a..6ae4725d3 100644 --- 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" \ No newline at end of file +NX_ETHERSCAN_URL = "https://ropsten.etherscan.io" diff --git a/apps/token/.env.testnet b/apps/token/.env.testnet index 668cc42a7..a3f050437 100644 --- 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" \ No newline at end of file +NX_ETHERSCAN_URL = "https://ropsten.etherscan.io" diff --git a/apps/token/src/app.tsx b/apps/token/src/app.tsx index 6d971b0b9..3a546c9e7 100644 --- 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() { diff --git a/apps/token/src/components/add-locked-token/add-locked-token.tsx b/apps/token/src/components/add-locked-token/add-locked-token.tsx index 429498516..a715e6bfa 100644 --- 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(); diff --git a/apps/token/src/components/balance-manager/balance-manager.tsx b/apps/token/src/components/balance-manager/balance-manager.tsx index c029c896b..69ebe1964 100644 --- 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, diff --git a/apps/token/src/components/transaction-callout/transaction-complete.tsx b/apps/token/src/components/transaction-callout/transaction-complete.tsx index a9a1214cc..b859ffbb9 100644 --- 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 = ({ diff --git a/apps/token/src/components/transaction-callout/transaction-error.tsx b/apps/token/src/components/transaction-callout/transaction-error.tsx index 0bbee8cb2..2bbf4601d 100644 --- 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; diff --git a/apps/token/src/components/transaction-callout/transaction-pending.tsx b/apps/token/src/components/transaction-callout/transaction-pending.tsx index 604044f1a..42192a124 100644 --- 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, diff --git a/apps/token/src/components/transactions-modal/transactions-modal.tsx b/apps/token/src/components/transactions-modal/transactions-modal.tsx index c1d8fc67a..26e31a80b 100644 --- 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'; diff --git a/apps/token/src/components/vega-wallet/hooks.ts b/apps/token/src/components/vega-wallet/hooks.ts index 044f4b8f3..f25e5ca46 100644 --- 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!) { diff --git a/apps/token/src/contexts/contracts/contracts-provider.tsx b/apps/token/src/contexts/contracts/contracts-provider.tsx index 8569bbd71..0d288cf99 100644 --- 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. diff --git a/apps/token/src/hooks/use-add-asset-to-wallet.ts b/apps/token/src/hooks/use-add-asset-to-wallet.ts index 2b9b5f505..636439505 100644 --- 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(); diff --git a/apps/token/src/hooks/use-tranches.ts b/apps/token/src/hooks/use-tranches.ts index 76ad242f1..aa05c6aed 100644 --- 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'; diff --git a/apps/token/src/routes/claim/complete.tsx b/apps/token/src/routes/claim/complete.tsx index 9cb3f7fd9..8c2eb2c27 100644 --- 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'; diff --git a/apps/token/src/routes/contracts/index.tsx b/apps/token/src/routes/contracts/index.tsx index ef36f137c..7acad9dcb 100644 --- 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} diff --git a/apps/token/src/routes/home/token-details/token-details.tsx b/apps/token/src/routes/home/token-details/token-details.tsx index 44a9b7b79..b87b04426 100644 --- 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'; diff --git a/apps/token/src/routes/redemption/tranche/index.tsx b/apps/token/src/routes/redemption/tranche/index.tsx index ba99db188..cd13fd949 100644 --- 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 { diff --git a/apps/token/src/routes/staking/associate/associate-transaction.tsx b/apps/token/src/routes/staking/associate/associate-transaction.tsx index 14d3e27a7..a5e4021bd 100644 --- 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'; diff --git a/apps/token/src/routes/staking/staking.tsx b/apps/token/src/routes/staking/staking.tsx index 9abe8c52e..be36cbfa7 100644 --- 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, diff --git a/apps/token/src/routes/staking/validator-table.tsx b/apps/token/src/routes/staking/validator-table.tsx index 300940d56..041d0ab66 100644 --- 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'; diff --git a/apps/token/src/routes/tranches/tranche.tsx b/apps/token/src/routes/tranches/tranche.tsx index 39b844c8a..bff32105a 100644 --- 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'; diff --git a/apps/token/src/routes/withdrawals/index.tsx b/apps/token/src/routes/withdrawals/index.tsx index 207ee5a8e..fea7ecd1d 100644 --- 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'; diff --git a/apps/trading-e2e/src/support/vega-wallet/index.ts b/apps/trading-e2e/src/support/vega-wallet/index.ts index ce921871d..3c7d6a4ad 100644 --- 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(); diff --git a/apps/trading/.env b/apps/trading/.env index 09d342bd1..d31c82976 100644 --- 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\"}' diff --git a/apps/trading/.env.devnet b/apps/trading/.env.devnet index 43dfa5712..37006e725 100644 --- 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" \ No newline at end of file +NX_ETHERSCAN_URL = "https://ropsten.etherscan.io" diff --git a/apps/trading/.env.mainnet b/apps/trading/.env.mainnet index 037533823..d408380b0 100644 --- 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" \ No newline at end of file +NX_ETHERSCAN_URL = "https://etherscan.io" diff --git a/apps/trading/.env.stagnet1 b/apps/trading/.env.stagnet1 index 17d96f986..e16cdde77 100644 --- 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" \ No newline at end of file +NX_ETHERSCAN_URL = "https://ropsten.etherscan.io" diff --git a/apps/trading/.env.stagnet2 b/apps/trading/.env.stagnet2 index b7bcbb54a..b71d4f1ab 100644 --- 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" \ No newline at end of file +NX_ETHERSCAN_URL = "https://ropsten.etherscan.io" diff --git a/apps/trading/.env.testnet b/apps/trading/.env.testnet index 668cc42a7..bb2731e4b 100644 --- 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" \ No newline at end of file +NX_ETHERSCAN_URL = "https://ropsten.etherscan.io" diff --git a/apps/trading/pages/_app.page.tsx b/apps/trading/pages/_app.page.tsx index 3396dc2af..ec79754c8 100644 --- 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 ( +
+
+ +
+ { + store.setVegaWalletConnectDialog(open); + }} + setManageDialog={(open) => { + store.setVegaWalletManageDialog(open); + }} + /> + +
+
+
+ {/* @ts-ignore conflict between @types/react and nextjs internal types */} + +
+ store.setVegaWalletConnectDialog(open)} + /> + store.setVegaWalletManageDialog(open)} + /> + store.setVegaNetworkSwitcherDialog(open)} + onConnect={({ network }) => { + if (VEGA_NETWORKS[network]) { + window.location.href = VEGA_NETWORKS[network]; + } + }} + /> +
+ ); +} + +function VegaTradingApp(props: AppProps) { + const [theme] = useThemeSwitcher(); + const client = useMemo(() => createClient(process.env['NX_VEGA_URL']), []); return ( @@ -48,39 +99,7 @@ function VegaTradingApp({ Component, pageProps }: AppProps) { href="https://static.vega.xyz/fonts.css" /> -
-
- -
- { - store.setVegaWalletConnectDialog(open); - }} - setManageDialog={(open) => { - store.setVegaWalletManageDialog(open); - }} - /> - -
-
-
- {/* @ts-ignore conflict between @types/react and nextjs internal types */} - -
- - store.setVegaWalletConnectDialog(open) - } - /> - - store.setVegaWalletManageDialog(open) - } - /> -
+ diff --git a/apps/trading/pages/portfolio/deposit/deposit-container.tsx b/apps/trading/pages/portfolio/deposit/deposit-container.tsx index 27c11f2ff..a4aaa68db 100644 --- 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'; diff --git a/apps/trading/stores/global.ts b/apps/trading/stores/global.ts index 7ade770d5..4e5591d2c 100644 --- 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) => ({ setVegaWalletManageDialog: (isOpen: boolean) => { set({ vegaWalletManageDialog: isOpen }); }, + vegaNetworkSwitcherDialog: false, + setVegaNetworkSwitcherDialog: (isOpen: boolean) => { + set({ vegaNetworkSwitcherDialog: isOpen }); + }, landingDialog: false, setLandingDialog: (isOpen: boolean) => { set({ landingDialog: isOpen }); diff --git a/libs/network-switcher/.babelrc b/libs/network-switcher/.babelrc new file mode 100644 index 000000000..ccae900be --- /dev/null +++ b/libs/network-switcher/.babelrc @@ -0,0 +1,12 @@ +{ + "presets": [ + [ + "@nrwl/react/babel", + { + "runtime": "automatic", + "useBuiltIns": "usage" + } + ] + ], + "plugins": [] +} diff --git a/libs/network-switcher/.eslintrc.json b/libs/network-switcher/.eslintrc.json new file mode 100644 index 000000000..734ddacee --- /dev/null +++ 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": {} + } + ] +} diff --git a/libs/network-switcher/README.md b/libs/network-switcher/README.md new file mode 100644 index 000000000..7053a1c52 --- /dev/null +++ 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). diff --git a/libs/network-switcher/jest.config.js b/libs/network-switcher/jest.config.js new file mode 100644 index 000000000..b3eaa4301 --- /dev/null +++ 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', +}; diff --git a/libs/network-switcher/package.json b/libs/network-switcher/package.json new file mode 100644 index 000000000..fd7f0c0ea --- /dev/null +++ b/libs/network-switcher/package.json @@ -0,0 +1,4 @@ +{ + "name": "@vegaprotocol/network-switcher", + "version": "0.0.1" +} diff --git a/libs/network-switcher/project.json b/libs/network-switcher/project.json new file mode 100644 index 000000000..6047531b7 --- /dev/null +++ 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 + } + } + } +} diff --git a/libs/network-switcher/src/components/index.ts b/libs/network-switcher/src/components/index.ts new file mode 100644 index 000000000..a62c7028f --- /dev/null +++ b/libs/network-switcher/src/components/index.ts @@ -0,0 +1,2 @@ +export * from './network-switcher'; +export * from './network-switcher-dialog'; diff --git a/libs/network-switcher/src/components/network-switcher-dialog/index.tsx b/libs/network-switcher/src/components/network-switcher-dialog/index.tsx new file mode 100644 index 000000000..6577ad17b --- /dev/null +++ b/libs/network-switcher/src/components/network-switcher-dialog/index.tsx @@ -0,0 +1 @@ +export { NetworkSwitcherDialog } from './network-switcher-dialog'; diff --git 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 new file mode 100644 index 000000000..b1be6941f --- /dev/null +++ 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, + 'onConnect' | 'onError' +> & { + dialogOpen: boolean; + setDialogOpen: (dialogOpen: boolean) => void; + intent?: Intent; +}; + +export const NetworkSwitcherDialog = ({ + dialogOpen, + setDialogOpen, + intent, + onConnect, + onError, +}: NetworkSwitcherDialogProps) => { + return ( + + setDialogOpen(false)} + /> + + ); +}; diff --git a/libs/network-switcher/src/components/network-switcher/index.tsx b/libs/network-switcher/src/components/network-switcher/index.tsx new file mode 100644 index 000000000..d0042d5f6 --- /dev/null +++ b/libs/network-switcher/src/components/network-switcher/index.tsx @@ -0,0 +1 @@ +export { NetworkSwitcher } from './network-switcher'; diff --git a/libs/network-switcher/src/components/network-switcher/network-switcher.tsx b/libs/network-switcher/src/components/network-switcher/network-switcher.tsx new file mode 100644 index 000000000..cff092bef --- /dev/null +++ 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({ + defaultValues: { + network: VEGA_ENV, + }, + }); + + return ( +
+
+ ( + + )} + /> +
+
+ +
+
+ ); +}; diff --git a/libs/network-switcher/src/hooks/index.ts b/libs/network-switcher/src/hooks/index.ts new file mode 100644 index 000000000..edc0925c5 --- /dev/null +++ b/libs/network-switcher/src/hooks/index.ts @@ -0,0 +1 @@ +export * from './use-environment'; diff --git a/libs/react-helpers/src/hooks/use-environment.tsx b/libs/network-switcher/src/hooks/use-environment.tsx similarity index 73% rename from libs/react-helpers/src/hooks/use-environment.tsx rename to libs/network-switcher/src/hooks/use-environment.tsx index fdf77f7f5..50d426708 100644 --- a/libs/react-helpers/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; + definitions?: Partial; 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; export type Environment = { VEGA_URL: string; VEGA_ENV: Networks; + VEGA_NETWORKS: Record; 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 = {}) => { - if (typeof window === 'undefined') { +const getValue = (key: EnvKey, definitions: Partial = {}) => { + 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 +): 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(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 ( - + {children} ); diff --git a/libs/network-switcher/src/index.ts b/libs/network-switcher/src/index.ts new file mode 100644 index 000000000..171999fdb --- /dev/null +++ b/libs/network-switcher/src/index.ts @@ -0,0 +1,5 @@ +// Components +export * from './components'; + +// Hooks +export * from './hooks'; diff --git a/libs/network-switcher/tsconfig.json b/libs/network-switcher/tsconfig.json new file mode 100644 index 000000000..1eabf319c --- /dev/null +++ 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" + } + ] +} diff --git a/libs/network-switcher/tsconfig.lib.json b/libs/network-switcher/tsconfig.lib.json new file mode 100644 index 000000000..252904bb7 --- /dev/null +++ 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"] +} diff --git a/libs/network-switcher/tsconfig.spec.json b/libs/network-switcher/tsconfig.spec.json new file mode 100644 index 000000000..67f149c4c --- /dev/null +++ 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" + ] +} diff --git a/libs/react-helpers/src/hooks/index.ts b/libs/react-helpers/src/hooks/index.ts index 08fe1f20c..8af73c02a 100644 --- 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'; diff --git a/libs/web3/src/lib/transaction-dialog/dialog-rows.tsx b/libs/web3/src/lib/transaction-dialog/dialog-rows.tsx index 2bd91274c..82dbfdd28 100644 --- 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'; diff --git a/libs/withdraws/src/lib/withdraw-dialog.tsx b/libs/withdraws/src/lib/withdraw-dialog.tsx index a5d360565..bf79e27e0 100644 --- 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'; diff --git a/libs/withdraws/src/lib/withdrawals-table.tsx b/libs/withdraws/src/lib/withdrawals-table.tsx index 83e20a48f..5ab28cde4 100644 --- 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'; diff --git a/tsconfig.base.json b/tsconfig.base.json index 01b599145..5654dfc9a 100644 --- 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"], diff --git a/workspace.json b/workspace.json index 2aa1f9a70..4836649a8 100644 --- 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",