LaconicNetwork/vega-frontend-monorepo
3
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

Feat/6 Network Switcher (#502)

Browse Source 
* 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>
This commit is contained in:
botond 2022-06-10 10:15:38 +01:00 committed by GitHub
parent f6f62cbc6a
commit ecda46caa5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
69 changed files with 441 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
apps/explorer/.env
View File

@ -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

1
apps/explorer/.env.capsule
View File

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

1
apps/explorer/.env.devnet
View File

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

1
apps/explorer/.env.mainnet
View File

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

1
apps/explorer/.env.stagnet1
View File

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

1
apps/explorer/.env.stagnet2
View File

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

1
apps/explorer/.env.testnet
View File

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

7
apps/explorer/src/app/app.tsx
View File

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

2
apps/simple-trading-app/src/app/app.tsx
View File

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

2
apps/stats/src/app.tsx
View File

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

1
apps/token/.env
View File

@ -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

1
apps/token/.env.devnet
View File

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

1
apps/token/.env.mainnet
View File

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

1
apps/token/.env.stagnet1
View File

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

1
apps/token/.env.stagnet2
View File

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

1
apps/token/.env.testnet
View File

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

2
apps/token/src/app.tsx
View File

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

2
apps/token/src/components/add-locked-token/add-locked-token.tsx
View File

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

1
apps/token/src/components/balance-manager/balance-manager.tsx
View File

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

2
apps/token/src/components/transaction-callout/transaction-complete.tsx
View File

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

2
apps/token/src/components/transaction-callout/transaction-error.tsx
View File

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

2
apps/token/src/components/transaction-callout/transaction-pending.tsx
View File

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

2
apps/token/src/components/transactions-modal/transactions-modal.tsx
View File

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

2
apps/token/src/components/vega-wallet/hooks.ts
View File

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

2
apps/token/src/contexts/contracts/contracts-provider.tsx
View File

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

3
apps/token/src/hooks/use-add-asset-to-wallet.ts
View File

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

2
apps/token/src/hooks/use-tranches.ts
View File

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

2
apps/token/src/routes/claim/complete.tsx
View File

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

4
apps/token/src/routes/contracts/index.tsx
View File

@ -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>

2
apps/token/src/routes/home/token-details/token-details.tsx
View File

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

2
apps/token/src/routes/redemption/tranche/index.tsx
View File

@ -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 {

2
apps/token/src/routes/staking/associate/associate-transaction.tsx
View File

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

2
apps/token/src/routes/staking/staking.tsx
View File

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

2
apps/token/src/routes/staking/validator-table.tsx
View File

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

2
apps/token/src/routes/tranches/tranche.tsx
View File

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

2
apps/token/src/routes/withdrawals/index.tsx
View File

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

1
apps/trading-e2e/src/support/vega-wallet/index.ts
View File

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

1
apps/trading/.env
View File

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

1
apps/trading/.env.devnet
View File

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

1
apps/trading/.env.mainnet
View File

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

1
apps/trading/.env.stagnet1
View File

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

1
apps/trading/.env.stagnet2
View File

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

1
apps/trading/.env.testnet
View File

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

93
apps/trading/pages/_app.page.tsx
View File

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

3
apps/trading/pages/portfolio/deposit/deposit-container.tsx
View File

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

6
apps/trading/stores/global.ts
View File

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

12
libs/network-switcher/.babelrc Normal file
View File

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

18
libs/network-switcher/.eslintrc.json Normal file
View File

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

17
libs/network-switcher/README.md Normal file
View File

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

9
libs/network-switcher/jest.config.js Normal file
View File

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

4
libs/network-switcher/package.json Normal file
View File

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

43
libs/network-switcher/project.json Normal file
View File

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

2
libs/network-switcher/src/components/index.ts Normal file
View File

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

1
libs/network-switcher/src/components/network-switcher-dialog/index.tsx Normal file
View File

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

37
libs/network-switcher/src/components/network-switcher-dialog/network-switcher-dialog.tsx Normal file
View File

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

1
libs/network-switcher/src/components/network-switcher/index.tsx Normal file
View File

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

47
libs/network-switcher/src/components/network-switcher/network-switcher.tsx Normal file
View File

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

1
libs/network-switcher/src/hooks/index.ts Normal file
View File

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

71
libs/react-helpers/src/hooks/use-environment.tsx → libs/network-switcher/src/hooks/use-environment.tsx
View File

@ -1,6 +1,9 @@
import { useState } from 'react';
import type { ReactNode } from 'react';
import { createContext, useContext } from 'react';
import type { Networks } from '../lib/environment';
import type { Networks } from '@vegaprotocol/react-helpers';
const isBrowser = typeof window !== 'undefined';
declare global {
interface Window {
@ -50,13 +53,14 @@ export const ContractAddresses: { [key in Networks]: VegaContracts } = {
};
type EnvironmentProviderProps = {
definintions?: Partial<RawEnvironment>;
definitions?: Partial<RawEnvironment>;
children?: ReactNode;
};
export const ENV_KEYS = [
'VEGA_URL',
'VEGA_ENV',
'VEGA_NETWORKS',
'ETHEREUM_CHAIN_ID',
'ETHEREUM_PROVIDER_URL',
'ETHERSCAN_URL',
@ -69,12 +73,15 @@ type RawEnvironment = Record<EnvKey, string>;
export type Environment = {
VEGA_URL: string;
VEGA_ENV: Networks;
VEGA_NETWORKS: Record<Networks, string>;
ETHEREUM_CHAIN_ID: number;
ETHEREUM_PROVIDER_URL: string;
ETHERSCAN_URL: string;
ADDRESSES: VegaContracts;
};
type EnvironmentState = Environment;
const getBundledEnvironmentValue = (key: EnvKey) => {
switch (key) {
// need to have these hardcoded so on build time we can insert sensible defaults
@ -88,6 +95,8 @@ const getBundledEnvironmentValue = (key: EnvKey) => {
return process.env['NX_ETHEREUM_PROVIDER_URL'];
case 'ETHERSCAN_URL':
return process.env['NX_ETHERSCAN_URL'];
case 'VEGA_NETWORKS':
return process.env['NX_VEGA_NETWORKS'];
}
};
@ -97,38 +106,67 @@ const transformValue = (key: EnvKey, value?: string) => {
return value as Networks;
case 'ETHEREUM_CHAIN_ID':
return value && Number(value);
case 'VEGA_NETWORKS': {
if (value) {
try {
return JSON.parse(value);
} catch (e) {
throw new Error(
'Error parsing the "NX_VEGA_NETWORKS" environment variable. Make sure it has a valid JSON format.'
);
}
}
return undefined;
}
default:
return value;
}
};
const getValue = (key: EnvKey, definintions: Partial<RawEnvironment> = {}) => {
if (typeof window === 'undefined') {
const getValue = (key: EnvKey, definitions: Partial<RawEnvironment> = {}) => {
if (!isBrowser) {
return transformValue(
key,
definintions[key] ?? getBundledEnvironmentValue(key)
definitions[key] ?? getBundledEnvironmentValue(key)
);
}
return transformValue(
key,
window._ENV?.[key] ?? definintions[key] ?? getBundledEnvironmentValue(key)
window._ENV?.[key] ?? definitions[key] ?? getBundledEnvironmentValue(key)
);
};
const EnvironmentContext = createContext({} as Environment);
export const EnvironmentProvider = ({
definintions,
children,
}: EnvironmentProviderProps) => {
const compileEnvironment = (
definitions?: Partial<RawEnvironment>
): Environment => {
const environment = ENV_KEYS.reduce(
(acc, key) => ({
...acc,
[key]: getValue(key, definintions),
[key]: getValue(key, definitions),
}),
{} as Environment
);
return {
...environment,
ADDRESSES: ContractAddresses[environment['VEGA_ENV']],
VEGA_NETWORKS: {
[environment.VEGA_ENV]: isBrowser
? window.location.href
: environment.VEGA_NETWORKS[environment.VEGA_ENV],
...environment.VEGA_NETWORKS,
},
};
};
const EnvironmentContext = createContext({} as EnvironmentState);
export const EnvironmentProvider = ({
definitions,
children,
}: EnvironmentProviderProps) => {
const [environment] = useState<Environment>(compileEnvironment(definitions));
const missingKeys = Object.keys(environment)
.filter((key) => typeof environment[key as EnvKey] === undefined)
.map((key) => `"${key}"`)
@ -141,12 +179,7 @@ export const EnvironmentProvider = ({
}
return (
<EnvironmentContext.Provider
value={{
...environment,
ADDRESSES: ContractAddresses[environment['VEGA_ENV']],
}}
>
<EnvironmentContext.Provider value={environment}>
{children}
</EnvironmentContext.Provider>
);

5
libs/network-switcher/src/index.ts Normal file
View File

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

25
libs/network-switcher/tsconfig.json Normal file
View File

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

22
libs/network-switcher/tsconfig.lib.json Normal file
View File

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

19
libs/network-switcher/tsconfig.spec.json Normal file
View File

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

1
libs/react-helpers/src/hooks/index.ts
View File

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

2
libs/web3/src/lib/transaction-dialog/dialog-rows.tsx
View File

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

2
libs/withdraws/src/lib/withdraw-dialog.tsx
View File

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

2
libs/withdraws/src/lib/withdrawals-table.tsx
View File

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

1
tsconfig.base.json
View File

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

1
workspace.json
View File

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