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, }