feat: Support for Volta and EWC

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

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 }) =
       <a
         aria-label="Show details on Etherscan"
         className={cn(classes.container, className)}
-        href={getEtherScanLink(type, value)}
+        href={getExplorerLink(type, value)}
         rel="noopener noreferrer"
         target="_blank"
       >

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

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,
         <Spacer />
         <Img alt="Network" className={classes.logo} height={14} src={dot} />
         <Paragraph align="right" className={classes.labels} noMargin weight="bolder">
-          {upperFirst(network)}
+          {upperFirst(ETHEREUM_NETWORK[network])}
         </Paragraph>
       </Row>
       <Hairline margin="xs" />

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'

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)
 

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

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
   }

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<ProviderProps>({
   loaded: false,
   available: false,
   account: '',
-  network: 0,
+  network: ETHEREUM_NETWORK.UNKNOWN,
   smartContractWallet: false,
   hardwareWallet: false,
 })

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

src/logic/wallets/utils/walletList.ts

@@ -1,19 +1,22 @@
-import { getInfuraUrl } from '../getWeb3'
+import { getInfuraUrl, getRPCUrl } from '../getWeb3'
+import { getNetwork } from 'src/config'
 
 const isMainnet = process.env.REACT_APP_NETWORK === 'mainnet'
 
 const PORTIS_DAPP_ID = isMainnet ? process.env.REACT_APP_PORTIS_ID : '852b763d-f28b-4463-80cb-846d7ec5806b'
 // 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 },
   {
     walletName: 'walletConnect',
     preferred: true,
     infuraKey: process.env.REACT_APP_INFURA_TOKEN,
+    rpc: { [network]: getRPCUrl(network) },
     desktop: true,
     bridge: 'https://safe-walletconnect.gnosis.io/',
   },

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
     <p>
       Follow the progress on{' '}
       <EtherScanLink
-        aria-label="Show details on Etherscan"
-        href={getEtherScanLink('tx', safeCreationTxHash)}
+        aria-label="Show on Etherscan"
+        href={getExplorerLink(ExplorerTypes.Tx, safeCreationTxHash)}
         rel="noopener noreferrer"
         target="_blank"
       >

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 (
     <Modal

yarn.lock

@@ -17257,9 +17257,9 @@ web3-provider-engine@^15.0.4:
     xhr "^2.2.0"
     xtend "^4.0.1"
 
-"web3-provider-engine@git+https://github.com/trufflesuite/provider-engine.git#web3-one":
+"web3-provider-engine@https://github.com/trufflesuite/provider-engine#web3-one":
   version "14.0.6"
-  resolved "git+https://github.com/trufflesuite/provider-engine.git#3538c60bc4836b73ccae1ac3f64c8fed8ef19c1a"
+  resolved "https://github.com/trufflesuite/provider-engine#3538c60bc4836b73ccae1ac3f64c8fed8ef19c1a"
   dependencies:
     async "^2.5.0"
     backoff "^2.5.0"