refactor: add social icons component

Author: gratestas

src/components/layout/app-bar.js

@@ -5,7 +5,7 @@ import { Link } from 'react-router-dom'
 import { Col, Row, Button, Badge, Switch } from 'antd'
 import { WalletContext } from 'contexts/wallet-context'
 import { TourContext } from 'contexts/tour-context'
-import { NETWORK_NAME, NETWORK_COLOR, NETWORK } from 'utils/network-utils'
+import { NETWORKS, NETWORKS_INFO } from '../../config/networks'
 import Identicon from 'components/identicon'
 import Notifications from 'components/notifications'
 import { ReactComponent as Logo } from 'assets/images/logo.svg'
@@ -107,17 +107,17 @@ const AppBar = () => {
   const [requestedChain, setRequestedChain] = useState()
   const nextNetworkTCR = getNetworkEnv(
     'REACT_APP_DEFAULT_TCR_ADDRESSES',
-    networkId === NETWORK.XDAI ? NETWORK.MAINNET : NETWORK.XDAI
+    networkId === NETWORKS.xDai ? NETWORKS.ethereum : NETWORKS.xDai
   )
   const currentChainId = useMemo(() => requestedChain ?? networkId, [
     networkId,
     requestedChain
   ])
 
   const switchChain = useCallback(() => {
-    let nextNetwork = NETWORK.XDAI
-    if (networkId === NETWORK.XDAI) nextNetwork = NETWORK.MAINNET
-    else nextNetwork = NETWORK.XDAI
+    let nextNetwork = NETWORKS.xDai
+    if (networkId === NETWORKS.xDai) nextNetwork = NETWORKS.ethereum
+    else nextNetwork = NETWORKS.xDai
 
     setRequestedChain(nextNetwork)
     localStorage.setItem(SAVED_NETWORK_KEY, nextNetwork)
@@ -143,14 +143,16 @@ const AppBar = () => {
             web3Context.networkId &&
             (account ? (
               <StyledNetworkStatus>
-                <Badge color={NETWORK_COLOR[web3Context.networkId]} />
-                {capitalizeFirstLetter(NETWORK_NAME[web3Context.networkId])}
+                <Badge color={NETWORKS_INFO[web3Context.networkId].color} />
+                {capitalizeFirstLetter(
+                  NETWORKS_INFO[web3Context.networkId].name
+                )}
               </StyledNetworkStatus>
             ) : (
               <Switch
                 checkedChildren="xDai"
                 unCheckedChildren="Mainnet"
-                checked={currentChainId === NETWORK.XDAI}
+                checked={currentChainId === NETWORKS.xDai}
                 onClick={switchChain}
               />
             ))}

src/components/social-icons.js

@@ -1,7 +1,7 @@
 import { Connectors } from 'web3-react'
 import WalletConnectApi from '@walletconnect/web3-subprovider'
 import FortmaticApi from 'fortmatic'
-import { NETWORK_NAME, NETWORK } from '../utils/network-utils'
+import { NETWORKS_INFO, NETWORKS } from 'config/networks'
 import { SAVED_NETWORK_KEY } from '../utils/string'
 import getNetworkEnv from '../utils/network-env'
 
@@ -26,7 +26,7 @@ if (process.env.REACT_APP_RPC_URLS) {
     providerURL: supportedNetworkURLs[defaultNetwork]
   })
   connectors.xDai = new NetworkOnlyConnector({
-    providerURL: supportedNetworkURLs[NETWORK.XDAI]
+    providerURL: supportedNetworkURLs[NETWORKS.xDai]
   })
 
   connectors.Ledger = new LedgerConnector({
@@ -50,17 +50,19 @@ if (fortmaticApiKey)
     apiKey: fortmaticApiKey,
     logoutOnDeactivation: false,
     testNetwork:
-      defaultNetwork === NETWORK.MAINNET ? null : NETWORK_NAME[defaultNetwork]
+      defaultNetwork === NETWORKS.ethereum
+        ? null
+        : NETWORKS_INFO[defaultNetwork].name
   })
 
 if (window.ethereum)
   connectors.Injected = new InjectedConnector({
     supportedNetworks: [
-      NETWORK.MAINNET,
-      NETWORK.KOVAN,
-      NETWORK.XDAI,
-      NETWORK.GOERLI,
-      NETWORK['ARBITRUM-RINKEBY']
+      NETWORKS.ethereum,
+      NETWORKS.kovan,
+      NETWORKS.xDai,
+      NETWORKS.goerli,
+      NETWORKS['arbitrum-rinkeby']
     ]
   })
 

src/config/connectors.js

@@ -69,7 +69,7 @@ export const NETWORKS_INFO = Object.freeze({
     chainId: 100,
     shortName: 'xdai',
     chain: 'XDAI',
-    network: 'mainnet',
+    network: 'xdai',
     networkId: 100,
     nativeCurrency: { name: 'xDAI', symbol: 'xDAI', decimals: 18 },
     rpc: [
@@ -105,7 +105,14 @@ export const NETWORKS_INFO = Object.freeze({
   // },
   [NETWORKS.kovan]: {
     name: 'Kovan',
-    color: '#690496'
+    color: '#690496',
+    explorers: [
+      {
+        name: 'etherscan',
+        url: 'https://kovan.etherscan.io',
+        standard: 'EIP3091'
+      }
+    ]
   },
   [NETWORKS['arbitrum-rinkeby']]: {
     name: 'Arbitrum Rinkeby',

src/config/networks.js

@@ -1,5 +1,5 @@
 import { useWeb3Context } from 'web3-react'
-import { NETWORK } from '../utils/network-utils'
+import { NETWORKS } from '../config/networks'
 
 /**
  * Get the ticker for the chain's native currency.
@@ -8,7 +8,7 @@ import { NETWORK } from '../utils/network-utils'
 export default function useNativeCurrency() {
   const { networkId } = useWeb3Context()
   if (!networkId) return 'ETH'
-  if (networkId === NETWORK.XDAI) return 'DAI'
+  if (networkId === NETWORKS.xDai) return 'DAI'
 
   return 'ETH'
 }

src/hooks/native-currency.js

@@ -274,7 +274,7 @@ const useTcrView = tcrAddress => {
       !library ||
       gtcr.address !== tcrAddress ||
       !metadataByTime ||
-      metadataByTime.address !== tcrAddress ||
+      metadataByTime.address.toLowerCase() !== tcrAddress.toLowerCase() ||
       !getLogs
     )
       return

src/hooks/tcr-view.js

@@ -1,10 +1,10 @@
 import { useWeb3Context } from 'web3-react'
-import { NETWORK } from '../utils/network-utils'
+import { NETWORKS } from '../config/networks'
 
 // TODO: Replace users with getNetworkEnv.
 const useMainTCR2 = () => {
   const DEFAULT_NETWORK =
-    process.env.REACT_APP_DEFAULT_NETWORK || NETWORK.MAINNET
+    process.env.REACT_APP_DEFAULT_NETWORK || NETWORKS.ethereum
 
   const web3Context = useWeb3Context()
   let tcr2Data = ''

src/hooks/tcr2.js

@@ -1,4 +1,4 @@
-import { NETWORK } from './network-utils'
+import { NETWORKS } from '../config/networks'
 
 /**
  * Fetch an environment variable for a given networkId.
@@ -8,7 +8,7 @@ import { NETWORK } from './network-utils'
  */
 function getNetworkEnv(envVariableKey, networkId) {
   const defaultNetwork =
-    process.env.REACT_APP_DEFAULT_NETWORK || NETWORK.MAINNET
+    process.env.REACT_APP_DEFAULT_NETWORK || NETWORKS.ethereum
   let data = ''
   try {
     data = process.env[envVariableKey]

src/utils/network-env.js

@@ -1,48 +1,13 @@
-export const NETWORK = {
-  MAINNET: 1,
-  ROPSTEN: 3,
-  RINKEBY: 4,
-  GOERLI: 5,
-  KOVAN: 42,
-  XDAI: 100,
-  'ARBITRUM-RINKEBY': 421611
-}
-
-export const NETWORK_NAME = {
-  [NETWORK.MAINNET]: 'mainnet',
-  [NETWORK.ROPSTEN]: 'ropsten',
-  [NETWORK.RINKEBY]: 'rinkeby',
-  [NETWORK.GOERLI]: 'goerli',
-  [NETWORK.KOVAN]: 'kovan',
-  [NETWORK.XDAI]: 'xDai'
-}
-
-export const NETWORK_COLOR = {
-  [NETWORK.MAINNET]: '#29b6af',
-  [NETWORK.ROPSTEN]: '#ff4a8d',
-  [NETWORK.RINKEBY]: '#f6c343',
-  [NETWORK.GOERLI]: '#3099f2',
-  [NETWORK.KOVAN]: '#690496',
-  [NETWORK.XDAI]: '#48A9A6'
-}
-
-const getFreePage = ({ networkId }) => {
-  const corePage =
-    networkId === 100 ? 'blockscout.com/xdai/mainnet' : 'etherscan.io'
-  const hasSubdomain = ![1, 100].includes(networkId)
-  const uri = `${hasSubdomain ? `${NETWORK_NAME[networkId]}.` : ''}${corePage}`
-  const fullPage = `https://${uri}`
-  return fullPage
-}
+import { NETWORKS_INFO } from 'config/networks'
 
 export const getAddressPage = ({ networkId, address }) => {
-  const page = getFreePage({ networkId })
+  const page = NETWORKS_INFO[networkId].explorers[0].url
   const pageWithAddress = `${page}/address/${address}`
   return pageWithAddress
 }
 
 export const getTxPage = ({ networkId, txHash }) => {
-  const page = getFreePage({ networkId })
+  const page = NETWORKS_INFO[networkId].explorers[0].url
   const pageWithTx = `${page}/tx/${txHash}`
   return pageWithTx
 }