diff --git a/src/components/ConnectButton/index.tsx b/src/components/ConnectButton/index.tsx index 83552dce14..250fb29d5e 100644 --- a/src/components/ConnectButton/index.tsx +++ b/src/components/ConnectButton/index.tsx @@ -2,7 +2,7 @@ import Onboard from 'bnc-onboard' import React from 'react' import Button from 'src/components/layout/Button' -import { getNetworkId } from 'src/config' +import { getNetwork } from 'src/config' import { getWeb3, setWeb3 } from 'src/logic/wallets/getWeb3' import { fetchProvider } from 'src/logic/wallets/store/actions' import transactionDataCheck from 'src/logic/wallets/transactionDataCheck' @@ -20,7 +20,7 @@ const wallets = getSupportedWallets() export const onboard = Onboard({ dappId: BLOCKNATIVE_API_KEY, - networkId: getNetworkId(), + networkId: getNetwork(), subscriptions: { wallet: (wallet) => { if (wallet.provider) { diff --git a/src/components/EtherscanBtn/index.tsx b/src/components/EtherscanBtn/index.tsx index 812092b816..bac272c4d2 100644 --- a/src/components/EtherscanBtn/index.tsx +++ b/src/components/EtherscanBtn/index.tsx @@ -6,7 +6,7 @@ import React from 'react' import EtherscanOpenIcon from './img/etherscan-open.svg' import Img from 'src/components/layout/Img' -import { getEtherScanLink } from 'src/logic/wallets/getWeb3' +import { getExplorerLink } from 'src/logic/wallets/getWeb3' import { xs } from 'src/theme/variables' const useStyles = makeStyles({ @@ -36,7 +36,7 @@ const EtherscanBtn = ({ className = '', increaseZindex = false, type, value }) = diff --git a/src/components/Header/components/NetworkLabel.tsx b/src/components/Header/components/NetworkLabel.tsx index ce2bb51a76..495bfd22fe 100644 --- a/src/components/Header/components/NetworkLabel.tsx +++ b/src/components/Header/components/NetworkLabel.tsx @@ -4,10 +4,11 @@ import * as React from 'react' import Col from 'src/components/layout/Col' import Paragraph from 'src/components/layout/Paragraph' import { getNetwork } from 'src/config' +import { ETHEREUM_NETWORK } from 'src/logic/wallets/getWeb3' import { border, md, screenSm, sm, xs } from 'src/theme/variables' const network = getNetwork() -const formattedNetwork = network[0].toUpperCase() + network.substring(1).toLowerCase() +const formattedNetwork = network[ETHEREUM_NETWORK.UNKNOWN]?.toUpperCase() //+ network.substring(1).toLowerCase() const useStyles = makeStyles({ container: { diff --git a/src/components/Header/components/ProviderDetails/UserDetails.tsx b/src/components/Header/components/ProviderDetails/UserDetails.tsx index 73fbdf7c11..a1d38224c0 100644 --- a/src/components/Header/components/ProviderDetails/UserDetails.tsx +++ b/src/components/Header/components/ProviderDetails/UserDetails.tsx @@ -17,6 +17,7 @@ import Row from 'src/components/layout/Row' import { shortVersionOf } from 'src/logic/wallets/ethAddresses' import { background, connected as connectedBg, lg, md, sm, warning, xs } from 'src/theme/variables' import { upperFirst } from 'src/utils/css' +import { ETHEREUM_NETWORK } from 'src/logic/wallets/getWeb3' const dot = require('../../assets/dotRinkeby.svg') const walletIcon = require('../../assets/wallet.svg') @@ -149,7 +150,7 @@ const UserDetails = ({ classes, connected, network, onDisconnect, openDashboard, Network - {upperFirst(network)} + {upperFirst(ETHEREUM_NETWORK[network])} diff --git a/src/components/Header/components/ProviderInfo/ProviderAccessible.tsx b/src/components/Header/components/ProviderInfo/ProviderAccessible.tsx index fa1ce9c93b..536810090b 100644 --- a/src/components/Header/components/ProviderInfo/ProviderAccessible.tsx +++ b/src/components/Header/components/ProviderInfo/ProviderAccessible.tsx @@ -8,6 +8,7 @@ import Col from 'src/components/layout/Col' import Paragraph from 'src/components/layout/Paragraph' import { shortVersionOf } from 'src/logic/wallets/ethAddresses' import { connected as connectedBg, screenSm, sm } from 'src/theme/variables' +import { ETHEREUM_NETWORK } from 'src/logic/wallets/getWeb3' const styles = () => ({ network: { @@ -47,7 +48,7 @@ const styles = () => ({ }) const ProviderInfo = ({ classes, connected, network, provider, userAddress }) => { - const providerText = `${provider} [${network}]` + const providerText = `${provider} [${ETHEREUM_NETWORK[network]}]` const cutAddress = connected ? shortVersionOf(userAddress, 4) : 'Connection Error' const color = connected ? 'primary' : 'warning' const identiconAddress = userAddress || 'random' diff --git a/src/config/index.ts b/src/config/index.ts index 9a826a9809..0c8f3b3b3e 100644 --- a/src/config/index.ts +++ b/src/config/index.ts @@ -14,6 +14,8 @@ import mainnetDevConfig from './development-mainnet' import mainnetProdConfig from './production-mainnet' import mainnetStagingConfig from './staging-mainnet' +const DEFAULT_NETWORK = ETHEREUM_NETWORK.RINKEBY + const configuration = () => { if (process.env.NODE_ENV === 'test') { return testConfig @@ -36,13 +38,7 @@ const configuration = () => { : devConfig } -export const getNetwork = () => - process.env.REACT_APP_NETWORK === 'mainnet' - ? ETHEREUM_NETWORK.MAINNET - : ETHEREUM_NETWORK.RINKEBY - -export const getNetworkId = () => - process.env.REACT_APP_NETWORK === 'mainnet' ? 1 : 4 +export const getNetwork = (): ETHEREUM_NETWORK => ETHEREUM_NETWORK[process.env.REACT_APP_NETWORK.toUpperCase()] ?? DEFAULT_NETWORK const getConfig = ensureOnce(configuration) diff --git a/src/logic/wallets/getWeb3.ts b/src/logic/wallets/getWeb3.ts index 2454981678..c7c7b8fbed 100644 --- a/src/logic/wallets/getWeb3.ts +++ b/src/logic/wallets/getWeb3.ts @@ -5,14 +5,16 @@ import { EMPTY_DATA } from './ethTransactions' import { getNetwork } from 'src/config/index' -export const ETHEREUM_NETWORK = { - MAINNET: 'MAINNET', - MORDEN: 'MORDEN', - ROPSTEN: 'ROPSTEN', - RINKEBY: 'RINKEBY', - GOERLI: 'GOERLI', - KOVAN: 'KOVAN', - UNKNOWN: 'UNKNOWN', +export enum ETHEREUM_NETWORK { + MAINNET = 1, + MORDEN = 2, + ROPSTEN = 3, + RINKEBY = 4, + GOERLI = 5, + KOVAN = 42, + ENERGY_WEB_CHAIN = 246, + VOLTA = 73799, + UNKNOWN = 0, } export const WALLET_PROVIDER = { @@ -31,40 +33,62 @@ export const WALLET_PROVIDER = { TREZOR: 'TREZOR', } -export const ETHEREUM_NETWORK_IDS = { - // $FlowFixMe - 1: ETHEREUM_NETWORK.MAINNET, - // $FlowFixMe - 2: ETHEREUM_NETWORK.MORDEN, - // $FlowFixMe - 3: ETHEREUM_NETWORK.ROPSTEN, - // $FlowFixMe - 4: ETHEREUM_NETWORK.RINKEBY, - // $FlowFixMe - 5: ETHEREUM_NETWORK.GOERLI, - // $FlowFixMe - 42: ETHEREUM_NETWORK.KOVAN, +export enum ExplorerTypes { + Tx = 'tx', + Address = 'address', } -export const getEtherScanLink = (type, value) => { - const network = getNetwork() - return `https://${ - network.toLowerCase() === 'mainnet' ? '' : `${network.toLowerCase()}.` +export const getEtherScanLink = (network: ETHEREUM_NETWORK, type: ExplorerTypes, value: string): string => + `https://${ + network === ETHEREUM_NETWORK.MAINNET ? '' : `${network[network].toLowerCase()}.` }etherscan.io/${type}/${value}` -} -export const getInfuraUrl = () => { - const isMainnet = process.env.REACT_APP_NETWORK === 'mainnet' +export const getExplorerLink = (type: ExplorerTypes, value: string): string => { + const network = getNetwork() - return `https://${isMainnet ? 'mainnet' : 'rinkeby'}.infura.io:443/v3/${process.env.REACT_APP_INFURA_TOKEN}` + switch (network) { + case ETHEREUM_NETWORK.MAINNET: + return getEtherScanLink(ETHEREUM_NETWORK.MAINNET, type, value) + case ETHEREUM_NETWORK.RINKEBY: + return getEtherScanLink(ETHEREUM_NETWORK.RINKEBY, type, value) + case ETHEREUM_NETWORK.ENERGY_WEB_CHAIN: + return `https://explorer.energyweb.org/${type}/${value}` + case ETHEREUM_NETWORK.VOLTA: + return `https://volta-explorer.energyweb.org/${type}/${value}` + default: + return getEtherScanLink(network, type, value) + } +} + +export const getInfuraUrl = (network: ETHEREUM_NETWORK): string => + `https://${network === ETHEREUM_NETWORK.MAINNET ? 'mainnet' : 'rinkeby'}.infura.io:443/v3/${ + process.env.REACT_APP_INFURA_TOKEN + }` + +export const getRPCUrl = (network: ETHEREUM_NETWORK): string => { + switch (network) { + case ETHEREUM_NETWORK.MAINNET: + return getInfuraUrl(network) + case ETHEREUM_NETWORK.RINKEBY: + return getInfuraUrl(network) + case ETHEREUM_NETWORK.ENERGY_WEB_CHAIN: + return 'https://rpc.energyweb.org' + case ETHEREUM_NETWORK.VOLTA: + return 'https://volta-rpc.energyweb.org' + default: + return '' + } } // With some wallets from web3connect you have to use their provider instance only for signing // And our own one to fetch data -export const web3ReadOnly = +export const web3ReadOnly = new Web3( process.env.NODE_ENV !== 'test' - ? new Web3(new Web3.providers.HttpProvider(getInfuraUrl())) - : new Web3((window as any).web3.currentProvider) + ? new Web3.providers.HttpProvider( + getRPCUrl(ETHEREUM_NETWORK[process.env.REACT_APP_NETWORK.toUpperCase()] ?? ETHEREUM_NETWORK.RINKEBY), + ) + : (window as any).web3.currentProvider, +) let web3 = web3ReadOnly export const getWeb3 = () => web3 diff --git a/src/logic/wallets/store/actions/fetchProvider.ts b/src/logic/wallets/store/actions/fetchProvider.ts index 1d3006ab1c..c6b6dc5a2b 100644 --- a/src/logic/wallets/store/actions/fetchProvider.ts +++ b/src/logic/wallets/store/actions/fetchProvider.ts @@ -5,7 +5,7 @@ import addProvider from './addProvider' import { getNetwork } from 'src/config' import { NOTIFICATIONS, enhanceSnackbarForAction } from 'src/logic/notifications' import enqueueSnackbar from 'src/logic/notifications/store/actions/enqueueSnackbar' -import { ETHEREUM_NETWORK, ETHEREUM_NETWORK_IDS, getProviderInfo, getWeb3 } from 'src/logic/wallets/getWeb3' +import { ETHEREUM_NETWORK, getProviderInfo, getWeb3 } from 'src/logic/wallets/getWeb3' import { makeProvider } from 'src/logic/wallets/store/model/provider' import { updateStoredTransactionsStatus } from 'src/routes/safe/store/actions/transactions/utils/transactionHelpers' @@ -23,7 +23,7 @@ const handleProviderNotification = (provider, dispatch) => { return } - if (ETHEREUM_NETWORK_IDS[network] !== getNetwork()) { + if (network !== getNetwork()) { dispatch(enqueueSnackbar(NOTIFICATIONS.WRONG_NETWORK_MSG)) return } diff --git a/src/logic/wallets/store/model/provider.ts b/src/logic/wallets/store/model/provider.ts index 1e8ad09af1..dd7c4c389a 100644 --- a/src/logic/wallets/store/model/provider.ts +++ b/src/logic/wallets/store/model/provider.ts @@ -1,11 +1,12 @@ import { Record, RecordOf } from 'immutable' +import { ETHEREUM_NETWORK } from 'src/logic/wallets/getWeb3' export type ProviderProps = { name: string loaded: boolean available: boolean account: string - network: number + network: ETHEREUM_NETWORK smartContractWallet: boolean hardwareWallet: boolean } @@ -15,7 +16,7 @@ export const makeProvider = Record({ loaded: false, available: false, account: '', - network: 0, + network: ETHEREUM_NETWORK.UNKNOWN, smartContractWallet: false, hardwareWallet: false, }) diff --git a/src/logic/wallets/store/selectors/index.ts b/src/logic/wallets/store/selectors/index.ts index 310fada328..82d2eef17c 100644 --- a/src/logic/wallets/store/selectors/index.ts +++ b/src/logic/wallets/store/selectors/index.ts @@ -1,6 +1,6 @@ import { createSelector } from 'reselect' -import { ETHEREUM_NETWORK, ETHEREUM_NETWORK_IDS } from 'src/logic/wallets/getWeb3' +import { ETHEREUM_NETWORK } from 'src/logic/wallets/getWeb3' import { PROVIDER_REDUCER_ID } from 'src/logic/wallets/store/reducer/provider' export const providerSelector = (state) => state[PROVIDER_REDUCER_ID] @@ -19,9 +19,8 @@ export const providerNameSelector = createSelector(providerSelector, (provider) export const networkSelector = createSelector(providerSelector, (provider) => { const networkId = provider.get('network') - const network = ETHEREUM_NETWORK_IDS[networkId] || ETHEREUM_NETWORK.UNKNOWN - return network + return networkId ?? ETHEREUM_NETWORK.UNKNOWN }) export const loadedSelector = createSelector(providerSelector, (provider) => provider.get('loaded')) diff --git a/src/logic/wallets/utils/walletList.ts b/src/logic/wallets/utils/walletList.ts index 70452f18b9..0921a76ae9 100644 --- a/src/logic/wallets/utils/walletList.ts +++ b/src/logic/wallets/utils/walletList.ts @@ -1,4 +1,5 @@ -import { getInfuraUrl } from '../getWeb3' +import { getInfuraUrl, getRPCUrl } from '../getWeb3' +import { getNetwork } from 'src/config' const isMainnet = process.env.REACT_APP_NETWORK === 'mainnet' @@ -6,7 +7,8 @@ const PORTIS_DAPP_ID = isMainnet ? process.env.REACT_APP_PORTIS_ID : '852b763d-f // const SQUARELINK_CLIENT_ID = isMainnet ? process.env.REACT_APP_SQUARELINK_ID : '46ce08fe50913cfa1b78' const FORTMATIC_API_KEY = isMainnet ? process.env.REACT_APP_FORTMATIC_KEY : 'pk_test_CAD437AA29BE0A40' -const infuraUrl = getInfuraUrl() +const network = getNetwork() +const infuraUrl = getInfuraUrl(network) const wallets = [ { walletName: 'metamask', preferred: true, desktop: false }, @@ -14,6 +16,7 @@ const wallets = [ walletName: 'walletConnect', preferred: true, infuraKey: process.env.REACT_APP_INFURA_TOKEN, + rpc: { [network]: getRPCUrl(network) }, desktop: true, bridge: 'https://safe-walletconnect.gnosis.io/', }, diff --git a/src/routes/opening/components/Footer.tsx b/src/routes/opening/components/Footer.tsx index 439bc3a31e..3eb2936a86 100644 --- a/src/routes/opening/components/Footer.tsx +++ b/src/routes/opening/components/Footer.tsx @@ -2,7 +2,7 @@ import React, { SyntheticEvent } from 'react' import styled from 'styled-components' import Button from 'src/components/layout/Button' -import { getEtherScanLink } from 'src/logic/wallets/getWeb3' +import { getExplorerLink, ExplorerTypes } from 'src/logic/wallets/getWeb3' import { connected } from 'src/theme/variables' const EtherScanLink = styled.a` @@ -19,8 +19,8 @@ export const GenericFooter = ({ safeCreationTxHash }: { safeCreationTxHash: stri

Follow the progress on{' '} diff --git a/src/routes/safe/components/Settings/RemoveSafeModal/index.tsx b/src/routes/safe/components/Settings/RemoveSafeModal/index.tsx index 139e40cfbe..69fad531f4 100644 --- a/src/routes/safe/components/Settings/RemoveSafeModal/index.tsx +++ b/src/routes/safe/components/Settings/RemoveSafeModal/index.tsx @@ -17,7 +17,7 @@ import Hairline from 'src/components/layout/Hairline' import Link from 'src/components/layout/Link' import Paragraph from 'src/components/layout/Paragraph' import Row from 'src/components/layout/Row' -import { getEtherScanLink } from 'src/logic/wallets/getWeb3' +import { getExplorerLink, ExplorerTypes } from 'src/logic/wallets/getWeb3' import { SAFELIST_ADDRESS } from 'src/routes/routes' import removeSafe from 'src/routes/safe/store/actions/removeSafe' import { safeNameSelector, safeParamAddressFromStateSelector } from 'src/routes/safe/store/selectors' @@ -33,7 +33,7 @@ const RemoveSafeComponent = ({ classes, isOpen, onClose }) => { const safeAddress = useSelector(safeParamAddressFromStateSelector) const safeName = useSelector(safeNameSelector) const dispatch = useDispatch() - const etherScanLink = getEtherScanLink('address', safeAddress) + const etherScanLink = getExplorerLink(ExplorerTypes.Address, safeAddress) return (