feat(polygon): polygon mainnet and testnet support (#3015)

* feat(polygon): polygon mainnet and testnet support WIP! DO NOT USE * fix unit test * fix explorer links * compute usdc prices * - fix the header currency label - fix unit tests * polygon gradient colors * chore: adding weth to common bases (#3025) * adding weth to common bases * adding usdc and dai * adding usdt and wbtc * fix a bunch of polish issues - 3085 detection - some wrapping stuff - the network selector dropdown * fix wrap/unwrap notification text on polygon * background color per the figma * subgraph url * fix the re-render blinking on the network selector * failed network switch * clean up duplicate code in the network switching functions * fix text color in the privacy notice on light mode * add some routing constants for polygon * do not show the separator in the trade route if auto router is not supported * - network switching without a wallet connected - remove v2 stuff from pool page when n/a - remove WMATIC from common bases on polygon * background colors of network alert * oops fix background on network alert * clean up optimism labels * fix alignment of text on downtime warning * finish the network alert styles Co-authored-by: Sara Reynolds <[email protected]>
cowprotocol · Dec 22, 2021 · f047f0d · f047f0d
1 parent 7ac1ed3
commit f047f0d
Show file tree

Hide file tree

Showing 62 changed files with 1,149 additions and 823 deletions.
diff --git a/src/assets/svg/matic-token-icon.svg b/src/assets/svg/matic-token-icon.svg
diff --git a/src/assets/svg/polygon-matic-logo.svg b/src/assets/svg/polygon-matic-logo.svg
diff --git a/src/components/AccountDetails/TransactionSummary.tsx b/src/components/AccountDetails/TransactionSummary.tsx
@@ -2,6 +2,7 @@ import { Trans } from '@lingui/macro'
 import { Fraction, TradeType } from '@uniswap/sdk-core'
 import JSBI from 'jsbi'
 
+import { nativeOnChain } from '../../constants/tokens'
 import { useCurrency, useToken } from '../../hooks/Tokens'
 import useENSName from '../../hooks/useENSName'
 import { VoteOption } from '../../state/governance/types'
@@ -130,18 +131,33 @@ function DelegateSummary({ info: { delegatee } }: { info: DelegateTransactionInf
   return <Trans>Delegate voting power to {ENSName ?? delegatee}</Trans>
 }
 
-function WrapSummary({ info: { currencyAmountRaw, unwrapped } }: { info: WrapTransactionInfo }) {
+function WrapSummary({ info: { chainId, currencyAmountRaw, unwrapped } }: { info: WrapTransactionInfo }) {
+  const native = chainId ? nativeOnChain(chainId) : undefined
+
   if (unwrapped) {
     return (
       <Trans>
-        Unwrap <FormattedCurrencyAmount rawAmount={currencyAmountRaw} symbol={'WETH'} decimals={18} sigFigs={6} /> to
-        ETH
+        Unwrap{' '}
+        <FormattedCurrencyAmount
+          rawAmount={currencyAmountRaw}
+          symbol={native?.wrapped?.symbol ?? 'WETH'}
+          decimals={18}
+          sigFigs={6}
+        />{' '}
+        to {native?.symbol ?? 'ETH'}
       </Trans>
     )
   } else {
     return (
       <Trans>
-        Wrap <FormattedCurrencyAmount rawAmount={currencyAmountRaw} symbol={'ETH'} decimals={18} sigFigs={6} /> to WETH
+        Wrap{' '}
+        <FormattedCurrencyAmount
+          rawAmount={currencyAmountRaw}
+          symbol={native?.symbol ?? 'ETH'}
+          decimals={18}
+          sigFigs={6}
+        />{' '}
+        to {native?.wrapped?.symbol ?? 'WETH'}
       </Trans>
     )
   }

diff --git a/src/components/CurrencyLogo/index.tsx b/src/components/CurrencyLogo/index.tsx
@@ -1,11 +1,12 @@
 import { Currency } from '@uniswap/sdk-core'
+import EthereumLogo from 'assets/images/ethereum-logo.png'
+import MaticLogo from 'assets/svg/matic-token-icon.svg'
 import { SupportedChainId } from 'constants/chains'
+import useHttpLocations from 'hooks/useHttpLocations'
 import React, { useMemo } from 'react'
+import { WrappedTokenInfo } from 'state/lists/wrappedTokenInfo'
 import styled from 'styled-components/macro'
 
-import EthereumLogo from '../../assets/images/ethereum-logo.png'
-import useHttpLocations from '../../hooks/useHttpLocations'
-import { WrappedTokenInfo } from '../../state/lists/wrappedTokenInfo'
 import Logo from '../Logo'
 
 type Network = 'ethereum' | 'arbitrum' | 'optimism'
@@ -34,7 +35,7 @@ export const getTokenLogoURL = (
   }
 }
 
-const StyledEthereumLogo = styled.img<{ size: string }>`
+const StyledNativeLogo = styled.img<{ size: string }>`
   width: ${({ size }) => size};
   height: ${({ size }) => size};
   background: radial-gradient(white 50%, #ffffff00 calc(75% + 1px), #ffffff00 100%);
@@ -87,7 +88,17 @@ export default function CurrencyLogo({
   }, [currency, uriLocations])
 
   if (currency?.isNative) {
-    return <StyledEthereumLogo src={EthereumLogo} alt="ethereum logo" size={size} style={style} {...rest} />
+    let nativeLogoUrl: string
+    switch (currency.chainId) {
+      case SupportedChainId.POLYGON_MUMBAI:
+      case SupportedChainId.POLYGON:
+        nativeLogoUrl = MaticLogo
+        break
+      default:
+        nativeLogoUrl = EthereumLogo
+        break
+    }
+    return <StyledNativeLogo src={nativeLogoUrl} alt="ethereum logo" size={size} style={style} {...rest} />
   }
 
   return <StyledLogo size={size} srcs={srcs} alt={`${currency?.symbol ?? 'token'} logo`} style={style} {...rest} />

diff --git a/src/components/DowntimeWarning/index.tsx b/src/components/DowntimeWarning/index.tsx
@@ -1,10 +1,12 @@
 import { Trans } from '@lingui/macro'
-import { L2_CHAIN_IDS, SupportedChainId } from 'constants/chains'
+import { SupportedChainId } from 'constants/chains'
 import { useActiveWeb3React } from 'hooks/web3'
 import { AlertOctagon } from 'react-feather'
 import styled from 'styled-components/macro'
 import { ExternalLink } from 'theme'
 
+import { isL2ChainId } from '../../utils/chains'
+
 const Root = styled.div`
   background-color: ${({ theme }) => (theme.darkMode ? '#888D9B' : '#CED0D9')};
   border-radius: 18px;
@@ -18,7 +20,6 @@ const Root = styled.div`
   max-width: 880px;
 `
 const WarningIcon = styled(AlertOctagon)`
-  display: block;
   margin: auto 16px auto 0;
   min-height: 22px;
   min-width: 22px;
@@ -28,50 +29,54 @@ const ReadMoreLink = styled(ExternalLink)`
   text-decoration: underline;
 `
 
+function Wrapper({ children }: { children: React.ReactNode }) {
+  return (
+    <Root>
+      <WarningIcon />
+      <div>{children}</div>
+    </Root>
+  )
+}
+
+/**
+ * Shows a downtime warning for the network if it's relevant
+ */
 export default function DowntimeWarning() {
   const { chainId } = useActiveWeb3React()
-  if (!chainId || !L2_CHAIN_IDS.includes(chainId)) {
+  if (!isL2ChainId(chainId)) {
     return null
   }
 
-  const Content = () => {
-    switch (chainId) {
-      case SupportedChainId.OPTIMISM:
-      case SupportedChainId.OPTIMISTIC_KOVAN:
-        return (
-          <div>
-            <Trans>
-              Optimistic Ethereum is in Beta and may experience downtime. Optimism expects planned downtime to upgrade
-              the network in the near future. During downtime, your position will not earn fees and you will be unable
-              to remove liquidity.{' '}
-              <ReadMoreLink href="https://help.uniswap.org/en/articles/5406082-what-happens-if-the-optimistic-ethereum-network-experiences-downtime">
-                Read more.
-              </ReadMoreLink>
-            </Trans>
-          </div>
-        )
-      case SupportedChainId.ARBITRUM_ONE:
-      case SupportedChainId.ARBITRUM_RINKEBY:
-        return (
-          <div>
-            <Trans>
-              Arbitrum is in Beta and may experience downtime. During downtime, your position will not earn fees and you
-              will be unable to remove liquidity.{' '}
-              <ReadMoreLink href="https://help.uniswap.org/en/articles/5576122-arbitrum-network-downtime">
-                Read more.
-              </ReadMoreLink>
-            </Trans>
-          </div>
-        )
-      default:
-        return null
-    }
-  }
+  switch (chainId) {
+    case SupportedChainId.OPTIMISM:
+    case SupportedChainId.OPTIMISTIC_KOVAN:
+      return (
+        <Wrapper>
+          <Trans>
+            Optimism is in Beta and may experience downtime. Optimism expects planned downtime to upgrade the network in
+            the near future. During downtime, your position will not earn fees and you will be unable to remove
+            liquidity.{' '}
+            <ReadMoreLink href="https://help.uniswap.org/en/articles/5406082-what-happens-if-the-optimistic-ethereum-network-experiences-downtime">
+              Read more.
+            </ReadMoreLink>
+          </Trans>
+        </Wrapper>
+      )
+    case SupportedChainId.ARBITRUM_ONE:
+    case SupportedChainId.ARBITRUM_RINKEBY:
+      return (
+        <Wrapper>
+          <Trans>
+            Arbitrum is in Beta and may experience downtime. During downtime, your position will not earn fees and you
+            will be unable to remove liquidity.{' '}
+            <ReadMoreLink href="https://help.uniswap.org/en/articles/5576122-arbitrum-network-downtime">
+              Read more.
+            </ReadMoreLink>
+          </Trans>
+        </Wrapper>
+      )
 
-  return (
-    <Root>
-      <WarningIcon />
-      <Content />
-    </Root>
-  )
+    default:
+      return null
+  }
 }