diff --git a/src/components/pages/Home/Home.tsx b/src/components/pages/Home/Home.tsx
index b7de981f2..33a30d6cd 100644
--- a/src/components/pages/Home/Home.tsx
+++ b/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}
>
-
+
diff --git a/src/components/pages/Home/HomeCarousel.tsx b/src/components/pages/Home/HomeCarousel.tsx
index f9c0c5e24..1dfdf7701 100644
--- a/src/components/pages/Home/HomeCarousel.tsx
+++ b/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 (
{
showThumbs={false}
showIndicators={isMobile ? false : true}
>
-
-
- The Rari Capital Ecosystem currently has{" "}
- earning{" "}
- yield.
-
-
-
-
- The Rari Capital Ecosystem currently has{" "}
- earning{" "}
- yield.
-
-
-
-
- The Rari Capital Ecosystem currently has{" "}
- earning{" "}
- yield.
-
-
+ {pools.map((pool, i) => {
+ return (
+
+
+ The Rari Capital Ecosystem currently has{" "}
+ {" "}
+ earning{" "}
+ {" "}
+ yield.
+
+
+ );
+ })}
);
diff --git a/src/components/pages/Home/HomeFuseCard.tsx b/src/components/pages/Home/HomeFuseCard.tsx
index 39300d0ff..470cc855d 100644
--- a/src/components/pages/Home/HomeFuseCard.tsx
+++ b/src/components/pages/Home/HomeFuseCard.tsx
@@ -73,6 +73,12 @@ const HomeFuseCard = ({ pool }: { pool: FusePoolData | undefined }) => {
boxShadow: "0px .2px 4px grey;",
}}
>
+
{pool?.assets.slice(0, 3).map((asset) => {
const _asset = asset as USDPricedFuseAssetWithTokenData;
@@ -87,7 +93,7 @@ const HomeFuseCard = ({ pool }: { pool: FusePoolData | undefined }) => {
);
})}
-
+
{title ?? pool?.name}
{subtitle ?? assetsSubtitle}
diff --git a/src/hooks/fuse/useAllFusePools.ts b/src/hooks/fuse/useAllFusePools.ts
new file mode 100644
index 000000000..0ff8d4882
--- /dev/null
+++ b/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;
diff --git a/src/hooks/fuse/useFuseDataForAsset.ts b/src/hooks/fuse/useFuseDataForAsset.ts
index 3f65c1a5b..851bbd0d0 100644
--- a/src/hooks/fuse/useFuseDataForAsset.ts
+++ b/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;
+};
diff --git a/src/hooks/fuse/useFusePools.ts b/src/hooks/fuse/useFusePools.ts
index 52485aa1e..3020e0060 100644
--- a/src/hooks/fuse/useFusePools.ts
+++ b/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,
}