carousel + hooks

src/components/pages/Home/Home.tsx

@@ -223,7 +223,7 @@ const Home = React.memo(() => {
                 width="1px" // weird hack to make the carousel fit. idk why it works
                 py={5}
               >
-                <HomeCarousel pools={pools} />
+                <HomeCarousel />
               </Column>
             </Row>
           </DashboardBox>

src/components/pages/Home/HomeCarousel.tsx

@@ -5,10 +5,22 @@ import { Carousel } from "react-responsive-carousel";
 import { Column } from "buttered-chakra";
 import { useIsSmallScreen } from "hooks/useIsSmallScreen";
 import { FusePoolData } from "utils/fetchFusePoolData";
+import {
+  useFuseDataForAsset,
+  useFuseDataForAssets,
+} from "hooks/fuse/useFuseDataForAsset";
+import {
+  shortUsdFormatter,
+  smallStringUsdFormatter,
+  smallUsdFormatter,
+} from "utils/bigUtils";
 
-const HomeCarousel = ({ pools }: { pools: FusePoolData[] | null }) => {
+const ASSETS = ["DAI", "ETH", "RGT"];
+
+const HomeCarousel = () => {
   const isMobile = useIsSmallScreen();
 
+  const pools = useFuseDataForAssets(ASSETS);
 
   return (
     <Column
@@ -28,42 +40,28 @@ const HomeCarousel = ({ pools }: { pools: FusePoolData[] | null }) => {
         showThumbs={false}
         showIndicators={isMobile ? false : true}
       >
-        <Box
-          // bg="lime"
-          w="100%"
-        >
-          <Heading
-            fontSize={{ base: "sm", sm: "md", md: "lg", lg: "lg" }}
-            textAlign="left"
-          >
-            The Rari Capital Ecosystem currently has{" "}
-            <InlineStyledText text="1 Bajilion dollars" /> earning{" "}
-            <InlineStyledText text="18.5%" /> yield.
-          </Heading>
-        </Box>
-        <Box
-          // bg="lime"
-          w="100%"
-        >
-          <Heading
-            fontSize={{ base: "sm", sm: "md", md: "lg", lg: "lg" }}
-            textAlign="left"
-          >
-            The Rari Capital Ecosystem currently has{" "}
-            <InlineStyledText text="1 Bajilion dollars" /> earning{" "}
-            <InlineStyledText text="18.5%" /> yield.
-          </Heading>
-        </Box>
-        <Box w="100%">
-          <Heading
-            fontSize={{ base: "sm", sm: "md", md: "lg", lg: "lg" }}
-            textAlign="left"
-          >
-            The Rari Capital Ecosystem currently has{" "}
-            <InlineStyledText text="1 Bajilion dollars" /> earning{" "}
-            <InlineStyledText text="18.5%" /> yield.
-          </Heading>
-        </Box>
+        {pools.map((pool, i) => {
+          return (
+            <Box w="100%">
+              <Heading
+                fontSize={{ base: "sm", sm: "md", md: "lg", lg: "lg" }}
+                textAlign="left"
+              >
+                The Rari Capital Ecosystem currently has{" "}
+                <InlineStyledText
+                  text={`${shortUsdFormatter(pool.totalSuppliedUSD)} ${
+                    ASSETS[i]
+                  }`}
+                />{" "}
+                earning{" "}
+                <InlineStyledText
+                  text={`${pool.highestSupplyAPY.toFixed(2)}%`}
+                />{" "}
+                yield.
+              </Heading>
+            </Box>
+          );
+        })}
       </Carousel>
     </Column>
   );

src/components/pages/Home/HomeFuseCard.tsx

@@ -73,6 +73,12 @@ const HomeFuseCard = ({ pool }: { pool: FusePoolData | undefined }) => {
           boxShadow: "0px .2px 4px grey;",
         }}
       >
+        <SkeletonText
+          isLoaded={!!pool && !!pool.assets.length}
+          height="10px"
+          noOfLines={2}
+          spacing="5"
+        >
           <AvatarGroup my={1} size="xs" max={3}>
             {pool?.assets.slice(0, 3).map((asset) => {
               const _asset = asset as USDPricedFuseAssetWithTokenData;
@@ -87,7 +93,7 @@ const HomeFuseCard = ({ pool }: { pool: FusePoolData | undefined }) => {
               );
             })}
           </AvatarGroup>
-        <SkeletonText isLoaded={!!pool} height="10px" noOfLines={2} spacing="5">
+
           <Heading size="sm">{title ?? pool?.name}</Heading>
           <Text size="xs" color="gray.500" fontWeight="bold">
             {subtitle ?? assetsSubtitle}

src/hooks/fuse/useAllFusePools.ts

@@ -0,0 +1,10 @@
+import { useFusePoolsData } from "hooks/useFusePoolData";
+import { useFusePools, UseFusePoolsReturn } from "./useFusePools";
+
+const useAllFusePools = () => {
+  const { pools } = useFusePools(null);
+  const fusePoolsData = useFusePoolsData(pools?.map(({ id }) => id) ?? []);
+  return fusePoolsData;
+};
+
+export default useAllFusePools;

src/hooks/fuse/useFuseDataForAsset.ts

@@ -1,8 +1,98 @@
-import { useState } from "react";
+import { pools } from "constants/pools";
+import { useMemo } from "react";
+import { convertMantissaToAPY } from "utils/apyUtils";
+import { USDPricedFuseAssetWithTokenData } from "utils/fetchFusePoolData";
+import useAllFusePools from "./useAllFusePools";
 
-const useFuseDataForAsset = () => {
-  const [state, setstate] = useState(true);
-  return true;
+interface AssetInFuse {
+  totalBorrowedUSD: number;
+  totalSuppliedUSD: number;
+  highestSupplyAPY: number;
+}
+
+export const useFuseDataForAsset = (assetSymbol: String): AssetInFuse => {
+  const allPools = useAllFusePools();
+
+  const poolsWithThisAsset = useMemo(
+    () =>
+      allPools?.filter((pool) =>
+        pool.assets.find((asset) => {
+          const _asset = asset as USDPricedFuseAssetWithTokenData;
+          return _asset?.tokenData?.symbol === assetSymbol;
+        })
+      ),
+    [assetSymbol, allPools]
+  );
+
+  const stuff = useMemo(() => {
+    let totalBorrowedUSD = 0;
+    let totalSuppliedUSD = 0;
+    let highestSupplyAPY = 0;
+
+    poolsWithThisAsset?.forEach((pool) => {
+      // Get the specific asset from the pool
+      const asset = pool?.assets?.find((_ass) => {
+        const ass = _ass as USDPricedFuseAssetWithTokenData;
+        return ass?.tokenData?.symbol === assetSymbol;
+      });
+
+      totalBorrowedUSD += asset?.totalBorrowUSD ?? 0;
+      totalSuppliedUSD += asset?.totalSupplyUSD ?? 0;
+
+      const supplyAPY = convertMantissaToAPY(asset?.supplyRatePerBlock, 365);
+      if (supplyAPY > highestSupplyAPY) highestSupplyAPY = supplyAPY;
+    });
+
+    return { totalBorrowedUSD, totalSuppliedUSD, highestSupplyAPY };
+  }, [assetSymbol, poolsWithThisAsset]);
+
+  return stuff;
 };
 
-export default useFuseDataForAsset;
+export const useFuseDataForAssets = (assetSymbols: String[]) => {
+  const allPools = useAllFusePools();
+
+  const poolsWithThisAsset = useMemo(
+    () =>
+      allPools?.filter((pool) =>
+        pool.assets.find((_asset) => {
+          const asset = _asset as USDPricedFuseAssetWithTokenData;
+          return asset?.tokenData?.symbol
+            ? assetSymbols.includes(asset.tokenData.symbol)
+            : false;
+        })
+      ),
+    [assetSymbols, allPools]
+  );
+
+  const stuff: AssetInFuse[] = useMemo(
+    () =>
+      assetSymbols.map((assetSymbol) => {
+        let totalBorrowedUSD = 0;
+        let totalSuppliedUSD = 0;
+        let highestSupplyAPY = 0;
+
+        poolsWithThisAsset?.forEach((pool) => {
+          // Find the specific asset from the pool
+          const asset = pool?.assets?.find((_ass) => {
+            const ass = _ass as USDPricedFuseAssetWithTokenData;
+            return ass?.tokenData?.symbol === assetSymbol;
+          });
+
+          totalBorrowedUSD += asset?.totalBorrowUSD ?? 0;
+          totalSuppliedUSD += asset?.totalSupplyUSD ?? 0;
+
+          const supplyAPY = convertMantissaToAPY(
+            asset?.supplyRatePerBlock,
+            365
+          );
+          if (supplyAPY > highestSupplyAPY) highestSupplyAPY = supplyAPY;
+        });
+
+        return { totalBorrowedUSD, totalSuppliedUSD, highestSupplyAPY };
+      }),
+    [assetSymbols, poolsWithThisAsset]
+  );
+
+  return stuff;
+};

src/hooks/fuse/useFusePools.ts

@@ -95,7 +95,7 @@ const fetchPools = async ({
   return merged;
 };
 
-interface UseFusePoolsReturn {
+export interface UseFusePoolsReturn {
   pools: MergedPool[] | undefined,
   filteredPools: MergedPool[] | null,
 }