use async load on PoolListing items

app/javascript/src/pages/Home/Pool.tsx

@@ -7,9 +7,6 @@ import { getApr } from "../../utils/apr";
 import { getPriceInBusd } from "../../utils/getPrice";
 import { getTotalStaked } from "../../utils/getTotalStaked";
 import { StakeOrderModal } from "./StakeOrderModal";
-import { ethers } from "ethers";
-import sousChef from "../../abi/sousChef.json"
-import { getEndBlock } from "../../utils/getEndBlock";
 
 type PoolProps = {
   pool: PoolConfig;
@@ -32,14 +29,6 @@ export const Pool: FC<PoolProps> = ({ pool, balance }) => {
 
   React.useEffect(() => {
     (async () => {
-      
-      const chef = new ethers.Contract(
-        pool.contractAddress[56],
-        new ethers.utils.Interface(sousChef),
-        provider
-      );
-      
-
       const stakingPrice = await getPriceInBusd(router, pool.stakingToken);
       const earningPrice = await getPriceInBusd(router, pool.earningToken);
 

app/javascript/src/pages/Home/PoolListing.tsx

@@ -1,21 +1,19 @@
 import { graphql } from "babel-plugin-relay/macro";
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useLazyLoadQuery } from "react-relay";
+import { ethers } from "ethers";
 
 import { pools } from "../../constants/Pools";
 import { useBsc } from "../../contexts/BscProvider";
-import { PoolConfig } from "../../types";
+import type { PoolConfig } from "../../types";
 import { Pool } from "./Pool";
-import { ethers } from "ethers";
-import sousChef from "../../abi/sousChef.json"
+import sousChef from "../../abi/sousChef.json";
 import { getEndBlock } from "../../utils/getEndBlock";
 import type { PoolListingQuery } from "./__generated__/PoolListingQuery.graphql";
 
 export const PoolListing = () => {
-  const {
-    provider
-  } = useBsc();
-  const [validPools, setValidPools] = useState<PoolConfig[]>([])
+  const { provider } = useBsc();
+  const [validPools, setValidPools] = useState<PoolConfig[]>([]);
 
   const { currentUser } = useLazyLoadQuery<PoolListingQuery>(
     graphql`
@@ -32,39 +30,42 @@ export const PoolListing = () => {
 
   const balance = currentUser?.balance.amount ?? "0";
 
-  const getChef = (pool: PoolConfig) => {
-    return new ethers.Contract(
-        pool.contractAddress[56],
-        new ethers.utils.Interface(sousChef),
-        provider
-      );
-  }
-
   useEffect(() => {
-    (async() => {
-      const blockNumber = await provider.getBlockNumber()
-      console.log(blockNumber)
-      const valids: PoolConfig[] = []
+    (async () => {
+      const blockNumber = await provider.getBlockNumber();
 
-      for(let pool of pools) {
-        if(pool.sousId === 0) {
-          valids.push(pool)
-          setValidPools([...valids])
-          continue
+      const getChef = (pool: PoolConfig) => {
+        return new ethers.Contract(
+          pool.contractAddress[56],
+          new ethers.utils.Interface(sousChef),
+          provider
+        );
+      };
+
+      const valids: PoolConfig[] = [];
+
+      pools.forEach(async (pool) => {
+        if (pool.sousId === 0) {
+          valids.push(pool);
+          setValidPools([...valids]);
+
+          return;
         }
+
         try {
-          const chef = getChef(pool)
-          const endBlock = await getEndBlock(chef)
-          if(endBlock >= blockNumber) {
-            valids.push(pool)
-            setValidPools([...valids])
+          const chef = getChef(pool);
+          const endBlock = await getEndBlock(chef);
+
+          if (endBlock >= blockNumber) {
+            valids.push(pool);
+            setValidPools([...valids]);
           }
-        } catch(e) {
-          console.log(e)
+        } catch (e) {
+          console.error(e);
         }
-      }
-    })()
-  }, [])
+      });
+    })();
+  }, [provider]);
 
   return (
     <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 place-items-center w-full gap-8 py-4 -mt-16 overflow-x-hidden">

app/javascript/src/utils/getEndBlock.ts

@@ -1,9 +1,4 @@
-
 import type { Contract } from "ethers";
-import { ethers } from "ethers";
-
-import { tokens } from "../constants/pancake/Tokens";
-import type { Token } from "../constants/pancake/Tokens";
 
 export const getEndBlock = async (sousChef: Contract) => {
   try {