refactor provide-liquidity example

examples/provide-liquidity/components/index.tsx

@@ -1,4 +1,3 @@
-export * from './types';
 export * from './pools';
 export * from './wallet';
 export * from './common';

examples/provide-liquidity/components/pools/PoolCard.tsx

@@ -1,19 +1,18 @@
 import React from 'react';
 import {
   Box,
-  Divider,
   Flex,
   Text,
   Image,
   Skeleton,
   useMediaQuery,
   useColorModeValue,
 } from '@chakra-ui/react';
-import { Pool } from './ProvideLiquidity';
 import { getLogoUrlFromDenom } from './PoolList';
 import BigNumber from 'bignumber.js';
 import { truncDecimals } from './modals/PoolDetailModal';
-import { getSymbolForDenom } from '../../utils';
+import { getSymbolForDenom, ExtendedPool } from '@/utils';
+import { PoolApr } from '@/hooks';
 
 const formatNumber = (number: number | string) => {
   const formatter = Intl.NumberFormat('en', {
@@ -63,11 +62,13 @@ export const ChainLogo = ({
 const PoolCard = ({
   pool,
   setPool,
+  poolApr,
   openPoolDetailModal,
   isFetchingApr,
 }: {
-  pool: Pool;
-  setPool: (pool: Pool) => void;
+  pool: ExtendedPool;
+  poolApr: PoolApr | undefined;
+  setPool: (pool: ExtendedPool) => void;
   openPoolDetailModal: () => void;
   isFetchingApr: boolean;
 }) => {
@@ -125,7 +126,7 @@ const PoolCard = ({
             gap="2px"
           >
             <Text fontSize="22px" lineHeight="26px">
-              {truncDecimals(pool.apr['14'].totalApr, 2)}
+              {truncDecimals(poolApr?.['14'].totalApr, 2)}
             </Text>
             <Text fontSize="14px">%</Text>
           </Flex>
@@ -149,20 +150,6 @@ const PoolCard = ({
         <Text fontWeight="400">7D Fees</Text>
         <Text fontWeight="600">${pool.fees7D.toLocaleString()}</Text>
       </Flex>
-      {/* <Divider mb="15px" /> */}
-      {/* <Flex
-        justifyContent="space-between"
-        mb="6px"
-        fontSize="14px"
-        color="#2C3137"
-      >
-        <Text fontWeight="400">Your Liquidity</Text>
-        <Text fontWeight="600">$1329.32</Text>
-      </Flex>
-      <Flex justifyContent="space-between" fontSize="14px" color="#2C3137">
-        <Text fontWeight="400">Bonded</Text>
-        <Text fontWeight="600">$600.00</Text>
-      </Flex> */}
     </Box>
   );
 };

examples/provide-liquidity/components/pools/PoolList.tsx

@@ -26,10 +26,14 @@ import {
   useColorModeValue,
 } from '@chakra-ui/react';
 import { SlOptionsVertical } from 'react-icons/sl';
-import { Pool } from './ProvideLiquidity';
 import BigNumber from 'bignumber.js';
 import { truncDecimals } from './modals/PoolDetailModal';
-import { getOsmoAssetByDenom, getSymbolForDenom } from '../../utils';
+import {
+  getOsmoAssetByDenom,
+  getSymbolForDenom,
+  ExtendedPool,
+} from '../../utils';
+import { PoolsApr } from '@/hooks';
 
 export const getLogoUrlFromDenom = (denom: string | undefined) => {
   if (!denom) return '';
@@ -72,7 +76,13 @@ export const ChainLogo = ({
   );
 };
 
-const PoolName = ({ isMyPools, pool }: { isMyPools: boolean; pool: Pool }) => {
+const PoolName = ({
+  isMyPools,
+  pool,
+}: {
+  isMyPools: boolean;
+  pool: ExtendedPool;
+}) => {
   const myPoolsColor = useColorModeValue('#2C3137', '#EEF2F8');
   const allPoolsColor = useColorModeValue('#697584', '#A7B4C2');
   const poolIdColor = useColorModeValue('#697584', '#A7B4C2');
@@ -103,7 +113,7 @@ const ChainLogoGroup = ({
   style,
   logoWidth,
 }: {
-  pool: Pool;
+  pool: ExtendedPool;
   logoWidth: number;
   style?: React.CSSProperties;
 }) => {
@@ -174,7 +184,7 @@ const MenuPopover = ({
   handleRemoveLiquidityClick,
   handleViewDetailClick,
 }: {
-  pool: Pool;
+  pool: ExtendedPool;
   handleAddLiquidityClick: () => void;
   handleRemoveLiquidityClick: () => void;
   handleViewDetailClick: () => void;
@@ -257,12 +267,14 @@ const PoolList = ({
   openPoolDetailModal,
   isFetchingApr,
   openModals,
+  poolsApr,
 }: {
-  pools: Pool[];
+  pools: ExtendedPool[];
   isMyPools?: boolean;
-  setPool: (pool: Pool) => void;
+  setPool: (pool: ExtendedPool) => void;
   openPoolDetailModal: () => void;
   isFetchingApr: boolean;
+  poolsApr: PoolsApr | undefined;
   openModals: {
     onAddLiquidityOpen: () => void;
     onRemoveLiquidityOpen: () => void;
@@ -286,7 +298,7 @@ const PoolList = ({
   const hasMultiTokens = pools.some(({ poolAssets }) => poolAssets.length > 2);
   const [isMobile] = useMediaQuery('(max-width: 780px)');
 
-  const transformData = (isMyPools: boolean, pool: Pool) => {
+  const transformData = (isMyPools: boolean, pool: ExtendedPool) => {
     const dataSource = isMyPools
       ? [pool.myLiquidity, pool.bonded]
       : [pool.volume24H, pool.fees7D];
@@ -343,7 +355,12 @@ const PoolList = ({
                     h="100%"
                   >
                     <PoolStat
-                      amount={truncDecimals(pool.apr['14'].totalApr, 2) + '%'}
+                      amount={
+                        truncDecimals(
+                          poolsApr?.[pool.denom]?.['14'].totalApr,
+                          2
+                        ) + '%'
+                      }
                       isMyPools={isMyPools}
                       name="APR"
                     />
@@ -451,7 +468,10 @@ const PoolList = ({
                             isMyPools ? myPoolsStatColor : allPoolsStatColor
                           }
                         >
-                          {truncDecimals(pool.apr['14'].totalApr, 2) + '%'}
+                          {truncDecimals(
+                            poolsApr?.[pool.denom]?.['14'].totalApr,
+                            2
+                          ) + '%'}
                         </Text>
                       </Skeleton>
                     </Td>

examples/provide-liquidity/components/pools/PoolsOverview.tsx

@@ -8,14 +8,13 @@ import {
   Box,
   useColorModeValue,
 } from '@chakra-ui/react';
-import { useChain, useManager } from '@cosmos-kit/react';
-import { EpochInfo } from 'osmojs/dist/codegen/osmosis/epochs/genesis';
-import { ReactElement, useCallback, useEffect, useRef, useState } from 'react';
-import { defaultChainName } from '../../config';
+import { useManager } from '@cosmos-kit/react';
+import { ReactElement, useEffect, useState } from 'react';
+import { coin, defaultChainName } from '@/config';
 import { RewardText } from './modals/ModalComponents';
 import dayjs from 'dayjs';
 import duration from 'dayjs/plugin/duration';
-import { osmosis } from 'osmojs';
+import { useEpochs, usePrices } from '@/hooks';
 
 dayjs.extend(duration);
 
@@ -51,56 +50,39 @@ const StatBox = ({
 };
 
 export const PoolsOverview = ({
-  osmoPrice,
-  totalRewardPerDay,
+  totalDayReward,
 }: {
-  osmoPrice: string | number;
-  totalRewardPerDay: number;
+  totalDayReward: number;
 }) => {
   const [countdown, setCountdown] = useState(['00', '00', '00']);
-  const isMountedRef = useRef(false);
+  const { epochs, updateEpochs } = useEpochs();
+  const { data: prices } = usePrices();
 
-  const { getRpcEndpoint } = useChain(defaultChainName);
   const { getChainLogo } = useManager();
-
   const [isMobile] = useMediaQuery('(max-width: 660px)');
 
-  const getEpoch = useCallback(async () => {
-    let rpcEndpoint = await getRpcEndpoint();
-
-    if (!rpcEndpoint) {
-      console.log('no rpc endpoint — using a fallback');
-      rpcEndpoint = `https://rpc.cosmos.directory/${defaultChainName}`;
-    }
-
-    const client = await osmosis.ClientFactory.createRPCQueryClient({
-      rpcEndpoint,
-    });
-
-    const { epochs } = await client.osmosis.epochs.v1beta1.epochInfos();
-
-    const currentEpoch = epochs.find(
-      (epoch) => epoch.identifier === 'day'
-    ) as EpochInfo;
+  useEffect(() => {
+    if (!epochs) return;
+    const currentEpoch = epochs.find((epoch) => epoch.identifier === 'day')!;
 
     const startTime = currentEpoch.currentEpochStartTime;
     const duration = Number(currentEpoch.duration?.seconds) || 60 * 60 * 24;
     const endTime = dayjs(startTime).add(duration, 'second');
 
-    const countdownInterval = setInterval(async () => {
-      if (dayjs().isAfter(endTime)) clearInterval(countdownInterval);
+    const countdownInterval = setInterval(() => {
+      if (dayjs().isAfter(endTime)) {
+        clearInterval(countdownInterval);
+        updateEpochs();
+      }
 
       const leftTime = dayjs.duration(endTime.diff(dayjs())).format('HH:mm:ss');
       setCountdown(leftTime.split(':'));
     }, 1000);
-  }, [getRpcEndpoint]);
 
-  useEffect(() => {
-    if (!isMountedRef.current) {
-      getEpoch();
-      isMountedRef.current = true;
-    }
-  }, [getEpoch]);
+    return () => clearInterval(countdownInterval);
+  }, [epochs, updateEpochs]);
+
+  const osmoPrice = prices?.[coin.base] || 0;
 
   const titleColor = useColorModeValue('#697584', '#A7B4C2');
   const amountColor = useColorModeValue('#2C3137', '#EEF2F8');
@@ -183,7 +165,7 @@ export const PoolsOverview = ({
             >
               Currently earning
             </Text>
-            <RewardText reward={totalRewardPerDay} />
+            <RewardText reward={totalDayReward} />
           </Flex>
         </StatBox>
       </GridItem>