refactor: clean up some constants

88600d3a · Moody Salem · a1060d5f · 88600d3a · 88600d3a · 88600d3a
Commit 88600d3a authored Jul 14, 2021 by Moody Salem
6 changed files
--- a/src/components/Header/NetworkCard.tsx
+++ b/src/components/Header/NetworkCard.tsx
@@ -9,7 +9,7 @@ import { useModalOpen, useToggleModal } from 'state/application/hooks'
 import styled, { css } from 'styled-components/macro'
 import { ExternalLink } from 'theme'
 import { switchToNetwork } from 'utils/switchToNetwork'
-import { CHAIN_INFO, L2_CHAIN_IDS, NETWORK_LABELS, SupportedChainId, SupportedL2ChainId } from '../../constants/chains'
+import { CHAIN_INFO, L2_CHAIN_IDS, SupportedChainId, SupportedL2ChainId } from '../../constants/chains'
 const BaseWrapper = css`
  position: relative;
@@ -181,7 +181,8 @@ export default function NetworkCard() {
      .catch(() => setImplements3085(false))
  }, [library, chainId])
-  if (!chainId || chainId === SupportedChainId.MAINNET || !NETWORK_LABELS[chainId] || !library) {
+  const info = chainId ? CHAIN_INFO[chainId] : undefined
+  if (!chainId || chainId === SupportedChainId.MAINNET || !info || !library) {
    return null
  }
@@ -229,5 +230,5 @@ export default function NetworkCard() {
    )
  }
-  return <FallbackWrapper title={NETWORK_LABELS[chainId]}>{NETWORK_LABELS[chainId]}</FallbackWrapper>
+  return <FallbackWrapper title={info.label}>{info.label}</FallbackWrapper>
 }
--- a/src/components/NetworkAlert/AddLiquidityNetworkAlert.tsx
+++ b/src/components/NetworkAlert/AddLiquidityNetworkAlert.tsx
@@ -5,7 +5,7 @@ import {
  OptimismWrapperBackgroundDarkMode,
  OptimismWrapperBackgroundLightMode,
 } from 'components/NetworkAlert/NetworkAlert'
-import { CHAIN_INFO, L2_CHAIN_IDS, NETWORK_LABELS, SupportedChainId, SupportedL2ChainId } from 'constants/chains'
+import { CHAIN_INFO, L2_CHAIN_IDS, SupportedChainId, SupportedL2ChainId } from 'constants/chains'
 import { useActiveWeb3React } from 'hooks/web3'
 import { ArrowDownCircle } from 'react-feather'
 import { useArbitrumAlphaAlert, useDarkModeManager } from 'state/user/hooks'
@@ -116,11 +116,11 @@ export function AddLiquidityNetworkAlert() {
    <Wrapper darkMode={darkMode} chainId={chainId} logoUrl={info.logoUrl}>
      <L2Icon src={info.logoUrl} />
      <Body>
-        <Trans>This is an alpha release of Uniswap on the {NETWORK_LABELS[chainId]} network.</Trans>
+        <Trans>This is an alpha release of Uniswap on the {info.label} network.</Trans>
        <DesktopTextBreak /> <Trans>You must bridge L1 assets to the network to use them.</Trans>
      </Body>
      <LinkOutToBridge href={depositUrl}>
-        <Trans>Deposit to {NETWORK_LABELS[chainId]}</Trans>
+        <Trans>Deposit to {info.label}</Trans>
        <LinkOutCircle />
      </LinkOutToBridge>
    </Wrapper>

--- a/src/components/NetworkAlert/MinimalNetworkAlert.tsx
+++ b/src/components/NetworkAlert/MinimalNetworkAlert.tsx
@@ -5,7 +5,7 @@ import {
  OptimismWrapperBackgroundDarkMode,
  OptimismWrapperBackgroundLightMode,
 } from 'components/NetworkAlert/NetworkAlert'
-import { CHAIN_INFO, L2_CHAIN_IDS, NETWORK_LABELS, SupportedChainId, SupportedL2ChainId } from 'constants/chains'
+import { CHAIN_INFO, L2_CHAIN_IDS, SupportedChainId, SupportedL2ChainId } from 'constants/chains'
 import { useActiveWeb3React } from 'hooks/web3'
 import { ArrowDownCircle } from 'react-feather'
 import { useArbitrumAlphaAlert, useDarkModeManager } from 'state/user/hooks'
@@ -116,11 +116,11 @@ export function MinimalNetworkAlert() {
    <Wrapper darkMode={darkMode} chainId={chainId} logoUrl={info.logoUrl}>
      <L2Icon src={info.logoUrl} />
      <Body>
-        <Trans>This is an alpha release of Uniswap on the {NETWORK_LABELS[chainId]} network.</Trans>
+        <Trans>This is an alpha release of Uniswap on the {info.label} network.</Trans>
        <DesktopTextBreak /> <Trans>You must bridge L1 assets to the network to use them.</Trans>
      </Body>
      <LinkOutToBridge href={depositUrl}>
-        <Trans>Deposit to {NETWORK_LABELS[chainId]}</Trans>
+        <Trans>Deposit to {info.label}</Trans>
        <LinkOutCircle />
      </LinkOutToBridge>
    </Wrapper>

--- a/src/components/NetworkAlert/NetworkAlert.tsx
+++ b/src/components/NetworkAlert/NetworkAlert.tsx
 import { Trans } from '@lingui/macro'
-import { L2_CHAIN_IDS, NETWORK_LABELS, SupportedChainId, SupportedL2ChainId } from 'constants/chains'
+import { L2_CHAIN_IDS, SupportedChainId, SupportedL2ChainId } from 'constants/chains'
 import { useActiveWeb3React } from 'hooks/web3'
 import { useCallback, useState } from 'react'
 import { ArrowDownCircle, X } from 'react-feather'
@@ -139,23 +139,24 @@ export function NetworkAlert() {
  const depositUrl = [SupportedChainId.OPTIMISM, SupportedChainId.OPTIMISTIC_KOVAN].includes(chainId)
    ? `${info.bridge}?chainId=1`
    : info.bridge
  return (
    <RootWrapper chainId={chainId} darkMode={darkMode} logoUrl={info.logoUrl}>
      <CloseIcon onClick={dismiss} />
      <ContentWrapper>
        <L2Icon src={info.logoUrl} />
        <Header>
-          <Trans>Uniswap on {NETWORK_LABELS[chainId]}</Trans>
+          <Trans>Uniswap on {info.label}</Trans>
        </Header>
        <Body>
          <Trans>
-            This is an alpha release of Uniswap on the {NETWORK_LABELS[chainId]} network. You must bridge L1 assets to
+            This is an alpha release of Uniswap on the {info.label} network. You must bridge L1 assets to the network to
-            the network to swap them.
+            swap them.
          </Trans>
        </Body>
      </ContentWrapper>
      <LinkOutToBridge href={depositUrl}>
-        <Trans>Deposit to {NETWORK_LABELS[chainId]}</Trans>
+        <Trans>Deposit to {info.label}</Trans>
        <LinkOutCircle />
      </LinkOutToBridge>
    </RootWrapper>

--- a/src/connectors/index.ts
+++ b/src/connectors/index.ts
@@ -4,7 +4,7 @@ import { PortisConnector } from '@web3-react/portis-connector'
 import { WalletConnectConnector } from '@web3-react/walletconnect-connector'
 import { WalletLinkConnector } from '@web3-react/walletlink-connector'
 import UNISWAP_LOGO_URL from '../assets/svg/logo.svg'
-import { SupportedChainId } from '../constants/chains'
+import { ALL_SUPPORTED_CHAIN_IDS, SupportedChainId } from '../constants/chains'
 import getLibrary from '../utils/getLibrary'
 import { FortmaticConnector } from './Fortmatic'
 import { NetworkConnector } from './NetworkConnector'
@@ -18,7 +18,7 @@ if (typeof INFURA_KEY === 'undefined') {
  throw new Error(`REACT_APP_INFURA_KEY must be a defined environment variable`)
 }
-const NETWORK_URLS = {
+const NETWORK_URLS: { [key in SupportedChainId]: string } = {
  [SupportedChainId.MAINNET]: `https://mainnet.infura.io/v3/${INFURA_KEY}`,
  [SupportedChainId.RINKEBY]: `https://rinkeby.infura.io/v3/${INFURA_KEY}`,
  [SupportedChainId.ROPSTEN]: `https://ropsten.infura.io/v3/${INFURA_KEY}`,
@@ -30,18 +30,6 @@ const NETWORK_URLS = {
  [SupportedChainId.ARBITRUM_RINKEBY]: `https://arbitrum-rinkeby.infura.io/v3/${INFURA_KEY}`,
 }
-const SUPPORTED_CHAIN_IDS = [
-  SupportedChainId.MAINNET,
-  SupportedChainId.KOVAN,
-  SupportedChainId.GOERLI,
-  SupportedChainId.RINKEBY,
-  SupportedChainId.ROPSTEN,
-  SupportedChainId.OPTIMISM,
-  SupportedChainId.OPTIMISTIC_KOVAN,
-  SupportedChainId.ARBITRUM_ONE,
-  SupportedChainId.ARBITRUM_RINKEBY,
-]
 export const network = new NetworkConnector({
  urls: NETWORK_URLS,
  defaultChainId: 1,
@@ -53,11 +41,11 @@ export function getNetworkLibrary(): Web3Provider {
 }
 export const injected = new InjectedConnector({
-  supportedChainIds: SUPPORTED_CHAIN_IDS,
+  supportedChainIds: ALL_SUPPORTED_CHAIN_IDS,
 })
 export const walletconnect = new WalletConnectConnector({
-  supportedChainIds: SUPPORTED_CHAIN_IDS,
+  supportedChainIds: ALL_SUPPORTED_CHAIN_IDS,
  rpc: NETWORK_URLS,
  bridge: WALLETCONNECT_BRIDGE_URL,
  qrcode: true,

--- a/src/constants/chains.ts
+++ b/src/constants/chains.ts
@@ -14,6 +14,8 @@ export enum SupportedChainId {
  OPTIMISTIC_KOVAN = 69,
 }
+export const ALL_SUPPORTED_CHAIN_IDS: SupportedChainId[] = Object.values(SupportedChainId) as SupportedChainId[]
 export type SupportedL2ChainId =
  | SupportedChainId.ARBITRUM_ONE
  | SupportedChainId.ARBITRUM_RINKEBY
@@ -27,18 +29,6 @@ export type SupportedL1ChainId =
  | SupportedChainId.GOERLI
  | SupportedChainId.KOVAN
-export const NETWORK_LABELS: { [chainId in SupportedChainId | number]: string } = {
-  [SupportedChainId.MAINNET]: 'Mainnet',
-  [SupportedChainId.RINKEBY]: 'Rinkeby',
-  [SupportedChainId.ROPSTEN]: 'Ropsten',
-  [SupportedChainId.GOERLI]: 'Görli',
-  [SupportedChainId.KOVAN]: 'Kovan',
-  [SupportedChainId.ARBITRUM_ONE]: 'Arbitrum',
-  [SupportedChainId.ARBITRUM_RINKEBY]: 'Arbitrum Rinkeby',
-  [SupportedChainId.OPTIMISM]: 'Optimism',
-  [SupportedChainId.OPTIMISTIC_KOVAN]: 'Optimistic Kovan',
-} as const
 export const L1_CHAIN_IDS = [
  SupportedChainId.MAINNET,
  SupportedChainId.ROPSTEN,
@@ -73,7 +63,7 @@ export const CHAIN_INFO: ChainInfo = {
    docs: 'https://offchainlabs.com/',
    explorer: 'https://explorer.arbitrum.io/',
    infoLink: 'https://info.uniswap.org/#/arbitrum',
-    label: NETWORK_LABELS[SupportedChainId.ARBITRUM_ONE],
+    label: 'Arbitrum',
    logoUrl: arbitrumLogoUrl,
  },
  [SupportedChainId.ARBITRUM_RINKEBY]: {
@@ -81,45 +71,45 @@ export const CHAIN_INFO: ChainInfo = {
    docs: 'https://offchainlabs.com/',
    explorer: 'https://explorer.arbitrum.io/',
    infoLink: 'https://info.uniswap.org/#/arbitrum/',
-    label: NETWORK_LABELS[SupportedChainId.ARBITRUM_RINKEBY],
+    label: 'Arbitrum Rinkeby',
    logoUrl: arbitrumLogoUrl,
  },
  [SupportedChainId.MAINNET]: {
    docs: 'https://docs.uniswap.org/',
    explorer: 'https://etherscan.io/',
    infoLink: 'https://info.uniswap.org/#/',
-    label: NETWORK_LABELS[SupportedChainId.MAINNET],
+    label: 'Mainnet',
  },
  [SupportedChainId.RINKEBY]: {
    docs: 'https://docs.uniswap.org/',
    explorer: 'https://rinkeby.etherscan.io/',
    infoLink: 'https://info.uniswap.org/#/',
-    label: NETWORK_LABELS[SupportedChainId.RINKEBY],
+    label: 'Rinkeby',
  },
  [SupportedChainId.ROPSTEN]: {
    docs: 'https://docs.uniswap.org/',
    explorer: 'https://ropsten.etherscan.io/',
    infoLink: 'https://info.uniswap.org/#/',
-    label: NETWORK_LABELS[SupportedChainId.ROPSTEN],
+    label: 'Ropsten',
  },
  [SupportedChainId.KOVAN]: {
    docs: 'https://docs.uniswap.org/',
    explorer: 'https://kovan.etherscan.io/',
    infoLink: 'https://info.uniswap.org/#/',
-    label: NETWORK_LABELS[SupportedChainId.KOVAN],
+    label: 'Kovan',
  },
  [SupportedChainId.GOERLI]: {
    docs: 'https://docs.uniswap.org/',
    explorer: 'https://goerli.etherscan.io/',
    infoLink: 'https://info.uniswap.org/#/',
-    label: NETWORK_LABELS[SupportedChainId.GOERLI],
+    label: 'Görli',
  },
  [SupportedChainId.OPTIMISM]: {
    bridge: 'https://gateway.optimism.io/',
    docs: 'https://optimism.io/',
    explorer: 'https://optimistic.etherscan.io/',
    infoLink: 'https://info.uniswap.org/#/optimism/',
-    label: NETWORK_LABELS[SupportedChainId.OPTIMISM],
+    label: 'Optimism',
    logoUrl: optimismLogoUrl,
  },
  [SupportedChainId.OPTIMISTIC_KOVAN]: {
@@ -127,7 +117,7 @@ export const CHAIN_INFO: ChainInfo = {
    docs: 'https://optimism.io/',
    explorer: 'https://optimistic.etherscan.io/',
    infoLink: 'https://info.uniswap.org/#/optimism',
-    label: NETWORK_LABELS[SupportedChainId.OPTIMISTIC_KOVAN],
+    label: 'Optimistic Kovan',
    logoUrl: optimismLogoUrl,
  },
 }