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";
 
+  useEffect(() => {
+    (async () => {
+      const blockNumber = await provider.getBlockNumber();
+
       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[] = []
+      const valids: PoolConfig[] = [];
 
-      for(let pool of pools) {
+      pools.forEach(async (pool) => {
         if (pool.sousId === 0) {
-          valids.push(pool)
-          setValidPools([...valids])
-          continue
+          valids.push(pool);
+          setValidPools([...valids]);
+
+          return;
         }
+
         try {
-          const chef = getChef(pool)
-          const endBlock = await getEndBlock(chef)
+          const chef = getChef(pool);
+          const endBlock = await getEndBlock(chef);
+
           if (endBlock >= blockNumber) {
-            valids.push(pool)
-            setValidPools([...valids])
+            valids.push(pool);
+            setValidPools([...valids]);
           }
         } catch (e) {
-          console.log(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 {