fix rerender bugs (#666)

src/components/PositionCard/index.js

@@ -30,7 +30,7 @@ function PositionCard({ pairAddress, token0, token1, history, minimal = false, .
   const pair = tokenAmount0 && tokenAmount1 && new Pair(tokenAmount0, tokenAmount1)
 
   const userPoolBalance = allBalances?.[account]?.[pairAddress]
-  const totalPoolTokens = useTotalSupply(pair)
+  const totalPoolTokens = useTotalSupply(token0, token1)
 
   const poolTokenPercentage =
     !!userPoolBalance && !!totalPoolTokens ? new Percent(userPoolBalance.raw, totalPoolTokens.raw) : undefined

src/contexts/Balances.tsx

@@ -450,11 +450,6 @@ export function useAddressBalance(address: string, token: Token): TokenAmount |
   const value = typeof chainId === 'number' ? state?.[chainId]?.[address]?.[token?.address]?.value : undefined
   const formattedValue = value && token && new TokenAmount(token, value)
 
-  /**
-   * @todo
-   * when catching for token, causes infinite rerender
-   * when the token is an exchange liquidity token
-   */
   useEffect(() => {
     if (typeof chainId === 'number' && isAddress(address) && token && token.address && isAddress(token.address)) {
       startListening(chainId, address, token.address)
@@ -462,8 +457,7 @@ export function useAddressBalance(address: string, token: Token): TokenAmount |
         stopListening(chainId, address, token.address)
       }
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [chainId, address, startListening, stopListening])
+  }, [chainId, address, startListening, stopListening, token])
 
   return useMemo(() => formattedValue, [formattedValue])
 }

src/contexts/Pairs.tsx

@@ -100,9 +100,13 @@ export function usePair(tokenA?: Token, tokenB?: Token): Pair | undefined {
   const address = usePairAddress(tokenA, tokenB)
   const tokenAmountA = useAddressBalance(address, tokenA)
   const tokenAmountB = useAddressBalance(address, tokenB)
-  const pair = tokenAmountA && tokenAmountB && new Pair(tokenAmountA, tokenAmountB)
+  const [pair, setPair] = useState<Pair>()
 
-  // return pair
+  useEffect(() => {
+    if (!pair && tokenAmountA && tokenAmountB) {
+      setPair(new Pair(tokenAmountA, tokenAmountB))
+    }
+  }, [pair, tokenAmountA, tokenAmountB])
 
   return useMemo(() => {
     return pair
@@ -146,9 +150,11 @@ export function useAllPairs() {
   }, [allPairs])
 }
 
-export function useTotalSupply(pair: Pair) {
+export function useTotalSupply(tokenA?: Token, tokenB?: Token) {
   const { library } = useWeb3React()
 
+  const pair = usePair(tokenA, tokenB)
+
   const [totalPoolTokens, setTotalPoolTokens] = useState<TokenAmount>()
 
   const pairContract = usePairContract(pair?.liquidityToken.address)
@@ -169,12 +175,7 @@ export function useTotalSupply(pair: Pair) {
           }
         })
         .catch(() => {})
-    /**
-     * @todo
-     * fix this
-     */
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [pairContract])
+  }, [pairContract, pair])
 
   // on the block make sure we're updated
   useEffect(() => {

src/contexts/Routes.tsx

@@ -103,13 +103,7 @@ export function useRoute(tokenA: Token, tokenB: Token) {
         update([tokenA.address, tokenB.address], routeThroughETH, chainId)
       }
     }
-    /**
-     * @todo
-     * same infinite render bug here when including
-     * any token or pair instance as dependency (bug also in exchanegs and balances)
-     */
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [route, requiresHop, update, chainId])
+  }, [route, requiresHop, update, chainId, tokenA, tokenB, defaultPair, aToETH, bToETH])
 
   return useMemo(() => route, [route])
 }

src/pages/Supply/AddLiquidity.tsx

@@ -161,7 +161,7 @@ export default function AddLiquidity({ token0, token1 }) {
   // exhchange data
   const pair: Pair = usePair(tokens[Field.INPUT], tokens[Field.OUTPUT])
   const route: Route = pair ? new Route([pair], tokens[independentField]) : undefined
-  const totalSupply: TokenAmount = useTotalSupply(pair)
+  const totalSupply: TokenAmount = useTotalSupply(tokens[Field.INPUT], tokens[Field.OUTPUT])
   const [noLiquidity, setNoLiquidity] = useState<boolean>(false) // used to detect new exchange
 
   // state for amount approvals

src/pages/Supply/RemoveLiquidity.tsx

@@ -164,7 +164,7 @@ export default function RemoveLiquidity({ token0, token1 }) {
   const pairContract: ethers.Contract = usePairContract(pair?.liquidityToken.address)
 
   // pool token data
-  const totalPoolTokens: TokenAmount = useTotalSupply(pair)
+  const totalPoolTokens: TokenAmount = useTotalSupply(tokens[Field.TOKEN0], tokens[Field.TOKEN1])
 
   const allBalances: TokenAmount[] = useAllBalances()
   const userLiquidity: TokenAmount = allBalances?.[account]?.[pair?.liquidityToken?.address]