add usePoolListing hook

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

@@ -1,68 +1,16 @@
-import React, { useEffect, useState } from "react";
+import React from "react";
-import { ethers } from "ethers";
 
-import { unfinishedPools } from "../../constants/Pools";
-import { useBsc } from "../../contexts/BscProvider";
-import type { PoolConfig } from "../../types";
 import { Pool } from "./Pool";
-import sousChef from "../../abi/sousChef.json";
-import { getEndBlock } from "../../utils/getEndBlock";
-import { notEmpty } from "../../utils/notEmpty";
 import { Spinner } from "../../components";
-import { usePersistedState } from "../../hooks/usePersistedState";
+import { usePoolListing } from "./hooks";
 
 export const PoolListing = () => {
-  const { provider } = useBsc();
+  const { isLoading, validPools } = usePoolListing();
-  const [validPools, setValidPools] = usePersistedState<PoolConfig[]>(
-    "validPools",
-    [],
-    1200000 // 20 minutes
-  );
-
-  const [isLoadingPools, setIsLoadingPools] = useState(true);
 
   // TODO<wallet>: puxar valor da wallet
   const balance = "0";
 
-  useEffect(() => {
+  if (isLoading && !validPools.length) {
-    (async () => {
-      if (validPools.length) return;
-
-      const blockNumber = await provider.getBlockNumber();
-
-      const getChef = (pool: PoolConfig) => {
-        return new ethers.Contract(
-          pool.contractAddress[56],
-          new ethers.utils.Interface(sousChef),
-          provider
-        );
-      };
-
-      await Promise.all(
-        unfinishedPools.map(async (pool) => {
-          if (pool.sousId === 0) {
-            return pool;
-          }
-
-          try {
-            const chef = getChef(pool);
-            const endBlock = await getEndBlock(chef);
-
-            if (endBlock >= blockNumber) {
-              return pool;
-            }
-          } catch (e) {
-            console.error(e);
-          }
-        })
-      ).then((pools) => {
-        setIsLoadingPools(false);
-        setValidPools(pools.filter(notEmpty));
-      });
-    })();
-  }, [provider, setValidPools, validPools.length]);
-
-  if (isLoadingPools && !validPools.length) {
     return (
       <div className="w-full grid place-items-center mt-12">
         <Spinner />

app/javascript/src/pages/Home/hooks/index.ts

@@ -0,0 +1 @@
+export * from "./usePoolListing";

app/javascript/src/pages/Home/hooks/usePoolListing.ts

@@ -0,0 +1,65 @@
+import { useEffect, useState } from "react";
+import { ethers } from "ethers";
+
+import { usePersistedState } from "../../../hooks/usePersistedState";
+import type { PoolConfig } from "../../../types";
+import sousChef from "../../../abi/sousChef.json";
+import { useBsc } from "../../../contexts/BscProvider";
+import { unfinishedPools } from "../../../constants/Pools";
+import { getEndBlock } from "../../../utils/getEndBlock";
+import { notEmpty } from "../../../utils/notEmpty";
+
+export const usePoolListing = () => {
+  const { provider } = useBsc();
+
+  const [pools, setPools] = usePersistedState<PoolConfig[]>(
+    "validPools",
+    [],
+    1200000 // 20 minutes
+  );
+
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    (async () => {
+      if (pools.length) return;
+
+      const blockNumber = await provider.getBlockNumber();
+
+      const getChef = (pool: PoolConfig) => {
+        return new ethers.Contract(
+          pool.contractAddress[56],
+          new ethers.utils.Interface(sousChef),
+          provider
+        );
+      };
+
+      await Promise.all(
+        unfinishedPools.map(async (pool) => {
+          if (pool.sousId === 0) {
+            return pool;
+          }
+
+          try {
+            const chef = getChef(pool);
+            const endBlock = await getEndBlock(chef);
+
+            if (endBlock >= blockNumber) {
+              return pool;
+            }
+          } catch (e) {
+            console.error(e);
+          }
+        })
+      ).then((validPools) => {
+        setIsLoading(false);
+        setPools(validPools.filter(notEmpty));
+      });
+    })();
+  }, [provider, setPools, pools.length]);
+
+  return {
+    isLoading,
+    validPools: pools,
+  };
+};