final bug fixes (#293)

* make jazzicon same as metamask

* fix token-token market rate

fix transactions bugs

add new contextual info to send

* fix .1 balance check on add liquidity

fix double click max balance bug

src/components/Web3Status/index.js

@@ -40,8 +40,8 @@ export default function Web3Status() {
   const { active, account } = useWeb3Context()
 
   const allTransactions = useAllTransactions()
-  const pending = Object.keys(allTransactions).filter(t => allTransactions[t].completed === false)
-  const confirmed = Object.keys(allTransactions).filter(t => allTransactions[t].completed === true)
+  const pending = Object.keys(allTransactions).filter(hash => !allTransactions[hash].receipt)
+  const confirmed = Object.keys(allTransactions).filter(hash => allTransactions[hash].receipt)
 
   const hasPendingTransactions = !!pending.length
   const hasConfirmedTransactions = !!confirmed.length
@@ -116,15 +116,7 @@ export default function Web3Status() {
             return
           } else {
             el.innerHTML = ''
-            el.appendChild(
-              Jazzicon(
-                16,
-                ethers.utils
-                  .bigNumberify(account)
-                  .mod(Number.MAX_SAFE_INTEGER)
-                  .toNumber()
-              )
-            )
+            el.appendChild(Jazzicon(16, parseInt(account.slice(2, 10), 16)))
           }
         }}
       />

src/contexts/Transactions.js

@@ -87,7 +87,7 @@ export default function Provider({ children }) {
     dispatch({ type: ADD, payload: { networkId, hash, response } })
   }, [])
   const check = useCallback((networkId, hash, blockNumber) => {
-    dispatch({ type: ADD, payload: { networkId, hash, blockNumber } })
+    dispatch({ type: CHECK, payload: { networkId, hash, blockNumber } })
   }, [])
   const finalize = useCallback((networkId, hash, receipt) => {
     dispatch({ type: FINALIZE, payload: { networkId, hash, receipt } })
@@ -104,16 +104,16 @@ export function Updater() {
   const globalBlockNumber = useBlockNumber()
 
   const [state, { check, finalize }] = useTransactionsContext()
+  const allTransactions = safeAccess(state, [networkId]) || {}
 
   useEffect(() => {
     if ((networkId || networkId === 0) && library) {
-      const allTransactions = safeAccess(state, [networkId]) || {}
-      const allUncheckedTransactions = Object.keys(allTransactions).filter(
+      let stale = false
+      Object.keys(allTransactions)
+        .filter(
           hash => !allTransactions[hash][RECEIPT] && allTransactions[hash][BLOCK_NUMBER_CHECKED] !== globalBlockNumber
         )
-
-      let stale = false
-      Object.keys(allUncheckedTransactions).forEach(hash => {
+        .forEach(hash => {
           library
             .getTransactionReceipt(hash)
             .then(receipt => {
@@ -134,7 +134,7 @@ export function Updater() {
         stale = true
       }
     }
-  }, [networkId, library, state, globalBlockNumber, check, finalize])
+  }, [networkId, library, allTransactions, globalBlockNumber, check, finalize])
 
   return null
 }
@@ -155,7 +155,6 @@ export function useTransactionAdder() {
       if (!hash) {
         throw Error('No transaction hash found.')
       }
-
       add(networkId, hash, response)
     },
     [networkId, add]
@@ -175,9 +174,13 @@ export function usePendingApproval(tokenAddress) {
 
   return (
     Object.keys(allTransactions).filter(hash => {
-      if (
-        allTransactions[hash][RECEIPT] ||
-        allTransactions[hash][RESPONSE].to !== tokenAddress ||
+      if (allTransactions[hash][RECEIPT]) {
+        return false
+      } else if (!allTransactions[hash][RESPONSE]) {
+        return false
+      } else if (allTransactions[hash][RESPONSE].to !== tokenAddress) {
+        return false
+      } else if (
         allTransactions[hash][RESPONSE].data.substring(0, 10) !==
         ethers.utils.id('approve(address,uint256)').substring(0, 10)
       ) {

src/pages/Pool/AddLiquidity.js

@@ -413,7 +413,7 @@ export default function AddLiquidity() {
   // input validation
   useEffect(() => {
     if (inputValueParsed && inputBalance) {
-      if (inputValueParsed.gt(inputBalance.sub(ethers.utils.parseEther('.1')))) {
+      if (inputValueParsed.gt(inputBalance)) {
         setInputError(t('insufficientBalance'))
       } else {
         setInputError(null)

src/pages/Send/index.js

@@ -5,7 +5,7 @@ import { useWeb3Context } from 'web3-react'
 import { ethers } from 'ethers'
 
 import CurrencyInputPanel from '../../components/CurrencyInputPanel'
-import ContextualInfo from '../../components/ContextualInfo'
+import NewContextualInfo from '../../components/ContextualInfoNew'
 import OversizedPanel from '../../components/OversizedPanel'
 import AddressInputPanel from '../../components/AddressInputPanel'
 import ArrowDownBlue from '../../assets/images/arrow-down-blue.svg'
@@ -177,13 +177,13 @@ function getMarketRate(
   invert = false
 ) {
   if (swapType === ETH_TO_TOKEN) {
-    return getExchangeRate(outputReserveETH, inputDecimals, outputReserveToken, outputDecimals, invert)
+    return getExchangeRate(outputReserveETH, 18, outputReserveToken, outputDecimals, invert)
   } else if (swapType === TOKEN_TO_ETH) {
-    return getExchangeRate(inputReserveToken, inputDecimals, inputReserveETH, outputDecimals, invert)
+    return getExchangeRate(inputReserveToken, inputDecimals, inputReserveETH, 18, invert)
   } else if (swapType === TOKEN_TO_TOKEN) {
     const factor = ethers.utils.bigNumberify(10).pow(ethers.utils.bigNumberify(18))
-    const firstRate = getExchangeRate(inputReserveToken, inputDecimals, inputReserveETH, outputDecimals)
-    const secondRate = getExchangeRate(outputReserveETH, inputDecimals, outputReserveToken, outputDecimals)
+    const firstRate = getExchangeRate(inputReserveToken, inputDecimals, inputReserveETH, 18)
+    const secondRate = getExchangeRate(outputReserveETH, 18, outputReserveToken, outputDecimals)
     try {
       return !!(firstRate && secondRate) ? firstRate.mul(secondRate).div(factor) : undefined
     } catch {}
@@ -431,18 +431,16 @@ export default function Swap() {
   )
 
   const percentSlippage =
-    exchangeRate &&
-    marketRate &&
-    amountFormatter(
-      exchangeRate
+    exchangeRate && marketRate
+      ? exchangeRate
           .sub(marketRate)
           .abs()
           .mul(ethers.utils.bigNumberify(10).pow(ethers.utils.bigNumberify(18)))
           .div(marketRate)
-        .sub(ethers.utils.bigNumberify(3).mul(ethers.utils.bigNumberify(10).pow(ethers.utils.bigNumberify(15)))),
-      16,
-      2
-    )
+          .sub(ethers.utils.bigNumberify(3).mul(ethers.utils.bigNumberify(10).pow(ethers.utils.bigNumberify(15))))
+      : undefined
+  const percentSlippageFormatted = percentSlippage && amountFormatter(percentSlippage, 16, 2)
+  const slippageWarning = percentSlippage && percentSlippage.gte(ethers.utils.parseEther('.1')) // 10%
 
   const isValid = exchangeRate && inputError === null && independentError === null && recipientError === null
 
@@ -485,7 +483,7 @@ export default function Swap() {
             {t('orTransFail')}
           </div>
           <div className="send__last-summary-text">
-            {t('priceChange')} {b(`${percentSlippage}%`)}.
+            {t('priceChange')} {b(`${percentSlippageFormatted}%`)}.
           </div>
         </div>
       )
@@ -501,7 +499,7 @@ export default function Swap() {
                 Math.min(4, independentDecimals)
               )} ${outputSymbol}`
             )}{' '}
-            {t('to')} {b(recipient.name || recipient.address)}.
+            {t('to')} {b(recipient.address)}.
           </div>
           <div className="send__last-summary-text">
             {t('itWillCost')}{' '}
@@ -515,7 +513,7 @@ export default function Swap() {
             {t('orTransFail')}
           </div>
           <div className="send__last-summary-text">
-            {t('priceChange')} {b(`${percentSlippage}%`)}.
+            {t('priceChange')} {b(`${percentSlippageFormatted}%`)}.
           </div>
         </div>
       )
@@ -543,10 +541,11 @@ export default function Swap() {
     }
 
     return (
-      <ContextualInfo
+      <NewContextualInfo
         openDetailsText={t('transactionDetails')}
         closeDetailsText={t('hideDetails')}
-        contextualInfo={contextualInfo}
+        contextualInfo={contextualInfo ? contextualInfo : slippageWarning ? t('slippageWarning') : ''}
+        allowExpand={!!(inputCurrency && outputCurrency && inputValueParsed && outputValueParsed && recipient.address)}
         isError={isError}
         renderTransactionDetails={renderTransactionDetails}
       />

src/pages/Swap/index.js

@@ -119,10 +119,11 @@ function swapStateReducer(state, action) {
     }
     case 'UPDATE_INDEPENDENT': {
       const { field, value } = action.payload
+      const { dependentValue, independentValue } = state
       return {
         ...state,
         independentValue: value,
-        dependentValue: '',
+        dependentValue: value === independentValue ? dependentValue : '',
         independentField: field
       }
     }
@@ -176,13 +177,13 @@ function getMarketRate(
   invert = false
 ) {
   if (swapType === ETH_TO_TOKEN) {
-    return getExchangeRate(outputReserveETH, inputDecimals, outputReserveToken, outputDecimals, invert)
+    return getExchangeRate(outputReserveETH, 18, outputReserveToken, outputDecimals, invert)
   } else if (swapType === TOKEN_TO_ETH) {
-    return getExchangeRate(inputReserveToken, inputDecimals, inputReserveETH, outputDecimals, invert)
+    return getExchangeRate(inputReserveToken, inputDecimals, inputReserveETH, 18, invert)
   } else if (swapType === TOKEN_TO_TOKEN) {
     const factor = ethers.utils.bigNumberify(10).pow(ethers.utils.bigNumberify(18))
-    const firstRate = getExchangeRate(inputReserveToken, inputDecimals, inputReserveETH, outputDecimals)
-    const secondRate = getExchangeRate(outputReserveETH, inputDecimals, outputReserveToken, outputDecimals)
+    const firstRate = getExchangeRate(inputReserveToken, inputDecimals, inputReserveETH, 18)
+    const secondRate = getExchangeRate(outputReserveETH, 18, outputReserveToken, outputDecimals)
     try {
       return !!(firstRate && secondRate) ? firstRate.mul(secondRate).div(factor) : undefined
     } catch {}