create warning and disable add liquidity button for broken tokens (#491)

* create warning and disable add liquidity button for broken tokens

* fix mobile styles

public/locales/en.json

@@ -83,5 +83,6 @@
   "decimals": "Decimals",
   "enterTokenCont": "Enter a token address to continue",
   "priceChange": "Expected price slippage",
-  "forAtLeast": "for at least "
+  "forAtLeast": "for at least ",
+  "brokenToken": "The selected token is not compatible with Uniswap V1. Adding liquidity will result in locked funds."
 }

src/constants/index.js

@@ -9,3 +9,10 @@ export const SUPPORTED_THEMES = {
   DARK: 'DARK',
   LIGHT: 'LIGHT'
 }
+
+// list of tokens that lock fund on adding liquidity - used to disable button
+export const brokenTokens = [
+  '0xb8c77482e45f1f44de1745f52c74426c631bdd52',
+  '0x95daaab98046846bf4b2853e23cba236fa394a31',
+  '0x55296f69f40ea6d20e478533c15a6b08b654e758'
+]

src/pages/Pool/AddLiquidity.js

@@ -13,6 +13,7 @@ import ContextualInfo from '../../components/ContextualInfo'
 import { ReactComponent as Plus } from '../../assets/images/plus-blue.svg'
 
 import { useExchangeContract } from '../../hooks'
+import { brokenTokens } from '../../constants'
 import { amountFormatter, calculateGasMargin } from '../../utils'
 import { useTransactionAdder } from '../../contexts/Transactions'
 import { useTokenDetails } from '../../contexts/Tokens'
@@ -221,6 +222,8 @@ export default function AddLiquidity({ params }) {
   const [inputError, setInputError] = useState()
   const [outputError, setOutputError] = useState()
 
+  const [brokenTokenWarning, setBrokenTokenWarning] = useState()
+
   const { symbol, decimals, exchangeAddress } = useTokenDetails(outputCurrency)
   const exchangeContract = useExchangeContract(exchangeAddress)
 
@@ -352,8 +355,10 @@ export default function AddLiquidity({ params }) {
   function renderSummary() {
     let contextualInfo = ''
     let isError = false
-
-    if (inputError || outputError) {
+    if (brokenTokenWarning) {
+      contextualInfo = t('brokenToken')
+      isError = true
+    } else if (inputError || outputError) {
       contextualInfo = inputError || outputError
       isError = true
     } else if (!inputCurrency || !outputCurrency) {
@@ -414,7 +419,16 @@ export default function AddLiquidity({ params }) {
 
   function formatBalance(value) {
     return `Balance: ${value}`
-  }
+  } // check for broken tokens
+
+  useEffect(() => {
+    setBrokenTokenWarning(false)
+    for (let i = 0; i < brokenTokens.length; i++) {
+      if (brokenTokens[i].toLowerCase() === outputCurrency.toLowerCase()) {
+        setBrokenTokenWarning(true)
+      }
+    }
+  }, [outputCurrency])
 
   useEffect(() => {
     if (isNewExchange) {
@@ -552,7 +566,7 @@ export default function AddLiquidity({ params }) {
   }, [outputValueParsed, allowance, t])
 
   const isActive = active && account
-  const isValid = (inputError === null || outputError === null) && !showUnlock
+  const isValid = (inputError === null || outputError === null) && !showUnlock && !brokenTokenWarning
 
   const allBalances = useFetchAllBalances()