add warnign for broken ERC20 (#589)

src/components/ContextualInfoNew/index.js

@@ -6,7 +6,7 @@ import { ReactComponent as Dropup } from '../../assets/images/dropup-blue.svg'
 import { ReactComponent as Dropdown } from '../../assets/images/dropdown-blue.svg'
 
 const SummaryWrapper = styled.div`
-  color: ${({ error, theme }) => (error ? theme.salmonRed : theme.doveGray)};
+  color: ${({ error, brokenTokenWarning, theme }) => (error || brokenTokenWarning ? theme.salmonRed : theme.doveGray)};
   font-size: 0.75rem;
   text-align: center;
   margin-top: 1rem;
@@ -92,11 +92,12 @@ export default function ContextualInfo({
   isError = false,
   slippageWarning,
   highSlippageWarning,
+  brokenTokenWarning,
   dropDownContent
 }) {
   const [showDetails, setShowDetails] = useState(false)
   return !allowExpand ? (
-    <SummaryWrapper>{contextualInfo}</SummaryWrapper>
+    <SummaryWrapper brokenTokenWarning={brokenTokenWarning}>{contextualInfo}</SummaryWrapper>
   ) : (
     <>
       <SummaryWrapperContainer

src/components/ExchangePage/index.jsx

@@ -5,14 +5,10 @@ import { ethers } from 'ethers'
 import styled from 'styled-components'
 import { useTranslation } from 'react-i18next'
 
-import { Button } from '../../theme'
 import { useWeb3React } from '../../hooks'
-import CurrencyInputPanel from '../CurrencyInputPanel'
-import AddressInputPanel from '../AddressInputPanel'
-import OversizedPanel from '../OversizedPanel'
-import TransactionDetails from '../TransactionDetails'
-import ArrowDown from '../../assets/svg/SVGArrowDown'
+import { brokenTokens } from '../../constants'
 import { amountFormatter, calculateGasMargin } from '../../utils'
+
 import { useExchangeContract } from '../../hooks'
 import { useTokenDetails } from '../../contexts/Tokens'
 import { useTransactionAdder } from '../../contexts/Transactions'
@@ -21,6 +17,13 @@ import { useAddressAllowance } from '../../contexts/Allowances'
 import { useWalletModalToggle } from '../../contexts/Application'
 import { useETHPriceInUSD } from '../../contexts/Balances'
 
+import { Button } from '../../theme'
+import CurrencyInputPanel from '../CurrencyInputPanel'
+import AddressInputPanel from '../AddressInputPanel'
+import OversizedPanel from '../OversizedPanel'
+import TransactionDetails from '../TransactionDetails'
+import ArrowDown from '../../assets/svg/SVGArrowDown'
+
 const INPUT = 0
 const OUTPUT = 1
 
@@ -270,6 +273,8 @@ export default function ExchangePage({ initialCurrency, sending = false, params
     return ''
   }
 
+  const [brokenTokenWarning, setBrokenTokenWarning] = useState()
+
   const [deadlineFromNow, setDeadlineFromNow] = useState(DEFAULT_DEADLINE_FROM_NOW)
 
   const [rawSlippage, setRawSlippage] = useState(() => initialSlippage())
@@ -298,6 +303,18 @@ export default function ExchangePage({ initialCurrency, sending = false, params
 
   const { independentValue, dependentValue, independentField, inputCurrency, outputCurrency } = swapState
 
+  useEffect(() => {
+    setBrokenTokenWarning(false)
+    for (let i = 0; i < brokenTokens.length; i++) {
+      if (
+        brokenTokens[i].toLowerCase() === outputCurrency.toLowerCase() ||
+        brokenTokens[i].toLowerCase() === inputCurrency.toLowerCase()
+      ) {
+        setBrokenTokenWarning(true)
+      }
+    }
+  }, [outputCurrency, inputCurrency])
+
   const [recipient, setRecipient] = useState({
     address: initialRecipient(),
     name: ''
@@ -806,6 +823,7 @@ export default function ExchangePage({ initialCurrency, sending = false, params
         rawSlippage={rawSlippage}
         slippageWarning={slippageWarning}
         highSlippageWarning={highSlippageWarning}
+        brokenTokenWarning={brokenTokenWarning}
         setDeadline={setDeadlineFromNow}
         deadline={deadlineFromNow}
         inputError={inputError}
@@ -831,12 +849,16 @@ export default function ExchangePage({ initialCurrency, sending = false, params
       />
       <Flex>
         <Button
-          disabled={!account && !error ? false : !isValid || customSlippageError === 'invalid'}
+          disabled={
+            brokenTokenWarning ? true : !account && !error ? false : !isValid || customSlippageError === 'invalid'
+          }
           onClick={account && !error ? onSwap : toggleWalletModal}
           warning={highSlippageWarning || customSlippageError === 'warning'}
           loggedOut={!account}
         >
-          {!account
+          {brokenTokenWarning
+            ? 'Swap'
+            : !account
             ? 'Connect to a Wallet'
             : sending
             ? highSlippageWarning || customSlippageError === 'warning'

src/components/TransactionDetails/index.js

@@ -326,8 +326,10 @@ export default function TransactionDetails(props) {
   function renderSummary() {
     let contextualInfo = ''
     let isError = false
-
-    if (props.inputError || props.independentError) {
+    if (props.brokenTokenWarning) {
+      contextualInfo = t('brokenToken')
+      isError = true
+    } else if (props.inputError || props.independentError) {
       contextualInfo = props.inputError || props.independentError
       isError = true
     } else if (!props.inputCurrency || !props.outputCurrency) {
@@ -356,6 +358,7 @@ export default function TransactionDetails(props) {
         contextualInfo={contextualInfo ? contextualInfo : slippageWarningText}
         allowExpand={
           !!(
+            !props.brokenTokenWarning &&
             props.inputCurrency &&
             props.outputCurrency &&
             props.inputValueParsed &&
@@ -366,6 +369,7 @@ export default function TransactionDetails(props) {
         isError={isError}
         slippageWarning={props.slippageWarning && !contextualInfo}
         highSlippageWarning={props.highSlippageWarning && !contextualInfo}
+        brokenTokenWarning={props.brokenTokenWarning}
         renderTransactionDetails={renderTransactionDetails}
         dropDownContent={dropDownContent}
       />

src/constants/index.js

@@ -88,7 +88,8 @@ export const SUPPORTED_WALLETS = {
 export const brokenTokens = [
   '0xB8c77482e45F1F44dE1745F52C74426C631bDD52',
   '0x95dAaaB98046846bF4B2853e23cba236fa394A31',
-  '0x55296f69f40Ea6d20E478533C15A6B08B654E758'
+  '0x55296f69f40Ea6d20E478533C15A6B08B654E758',
+  '0xc3761EB917CD790B30dAD99f6Cc5b4Ff93C4F9eA'
 ]
 
 export const NetworkContextName = 'NETWORK'

src/pages/Pool/AddLiquidity.js

@@ -420,7 +420,7 @@ export default function AddLiquidity({ params }) {
 
   function formatBalance(value) {
     return `Balance: ${value}`
-  } // check for broken tokens
+  }
 
   useEffect(() => {
     setBrokenTokenWarning(false)

src/pages/Pool/RemoveLiquidity.js

@@ -6,15 +6,18 @@ import { ethers } from 'ethers'
 import styled from 'styled-components'
 
 import { useWeb3React, useExchangeContract } from '../../hooks'
+import { useTransactionAdder } from '../../contexts/Transactions'
+import { useTokenDetails } from '../../contexts/Tokens'
+import { useAddressBalance, useETHPriceInUSD } from '../../contexts/Balances'
+
+import { calculateGasMargin, amountFormatter } from '../../utils'
+import { brokenTokens } from '../../constants'
+
 import { Button } from '../../theme'
 import CurrencyInputPanel from '../../components/CurrencyInputPanel'
 import ContextualInfo from '../../components/ContextualInfo'
 import OversizedPanel from '../../components/OversizedPanel'
 import ArrowDown from '../../assets/svg/SVGArrowDown'
-import { useTransactionAdder } from '../../contexts/Transactions'
-import { useTokenDetails } from '../../contexts/Tokens'
-import { useAddressBalance, useETHPriceInUSD } from '../../contexts/Balances'
-import { calculateGasMargin, amountFormatter } from '../../utils'
 
 // denominated in bips
 const ALLOWED_SLIPPAGE = ethers.utils.bigNumberify(200)
@@ -145,6 +148,8 @@ export default function RemoveLiquidity({ params }) {
 
   const addTransaction = useTransactionAdder()
 
+  const [brokenTokenWarning, setBrokenTokenWarning] = useState()
+
   // clear url of query
   useEffect(() => {
     const history = createBrowserHistory()
@@ -155,6 +160,16 @@ export default function RemoveLiquidity({ params }) {
   const [value, setValue] = useState(params.poolTokenAmount ? params.poolTokenAmount : '')
   const [inputError, setInputError] = useState()
   const [valueParsed, setValueParsed] = useState()
+
+  useEffect(() => {
+    setBrokenTokenWarning(false)
+    for (let i = 0; i < brokenTokens.length; i++) {
+      if (brokenTokens[i].toLowerCase() === outputCurrency.toLowerCase()) {
+        setBrokenTokenWarning(true)
+      }
+    }
+  }, [outputCurrency])
+
   // parse value
   useEffect(() => {
     try {
@@ -301,8 +316,10 @@ export default function RemoveLiquidity({ params }) {
   function renderSummary() {
     let contextualInfo = ''
     let isError = false
-
-    if (inputError) {
+    if (brokenTokenWarning) {
+      contextualInfo = t('brokenToken')
+      isError = true
+    } else if (inputError) {
       contextualInfo = inputError
       isError = true
     } else if (!outputCurrency || outputCurrency === 'ETH') {