Merge pull request #550 from oraichain/feat/fix-price-co-harvest

fix price bidding history
oraidex · Jan 17, 2024 · c9d15cb · c9d15cb
2 parents 48d77a1 + c6bc0e2
commit c9d15cb
Show file tree

Hide file tree

Showing 7 changed files with 65 additions and 41 deletions.
diff --git a/src/pages/CoHarvest/components/AllBidding/index.tsx b/src/pages/CoHarvest/components/AllBidding/index.tsx
@@ -1,19 +1,15 @@
 import { oraichainTokens, toDisplay } from '@oraichain/oraidex-common';
 import { ReactComponent as NoDataDark } from 'assets/images/nodata-bid-dark.svg';
 import { ReactComponent as NoData } from 'assets/images/nodata-bid.svg';
-import { useCoinGeckoPrices } from 'hooks/useCoingecko';
 import useConfigReducer from 'hooks/useConfigReducer';
 import { getUsd } from 'libs/utils';
 import { TIMER } from 'pages/CoHarvest/constants';
 import { dateFormat, shortenAddress } from 'pages/CoHarvest/helpers';
-import { formatDisplayUsdt } from 'pages/Pools/helpers';
+import { formatDisplayUsdt, numberWithCommas } from 'pages/Pools/helpers';
 import styles from './index.module.scss';
 
 const AllBidding = ({ list, isLoading }) => {
   const [theme] = useConfigReducer('theme');
-  const { data: prices } = useCoinGeckoPrices();
-  const ORAIX_TOKEN_INFO = oraichainTokens.find((e) => e.coinGeckoId === 'oraidex');
-
   if (isLoading) return <div className={styles.loadingDiv}></div>;
 
   return (
@@ -22,7 +18,6 @@ const AllBidding = ({ list, isLoading }) => {
         list
           .sort((a, b) => b.premium_slot - a.premium_slot)
           .map((item, index) => {
-            const amountUsd = getUsd(item.amount, ORAIX_TOKEN_INFO, prices);
             return (
               <div className={styles.item} key={index}>
                 <div className={styles.right}>
@@ -33,8 +28,8 @@ const AllBidding = ({ list, isLoading }) => {
                   </div>
                 </div>
                 <div className={styles.amount}>
-                  <div className={styles.token}>{toDisplay(item.amount)} ORAIX</div>
-                  {formatDisplayUsdt(amountUsd)}
+                  <div className={styles.token}>{numberWithCommas(toDisplay(item.amount))} ORAIX</div>
+                  {formatDisplayUsdt(item.amountUSD)}
                 </div>
               </div>
             );

diff --git a/src/pages/CoHarvest/components/Bidding/index.tsx b/src/pages/CoHarvest/components/Bidding/index.tsx
@@ -20,7 +20,7 @@ import {
   useGetHistoryBid,
   useGetPotentialReturn
 } from 'pages/CoHarvest/hooks/useGetBidRound';
-import { formatDisplayUsdt } from 'pages/Pools/helpers';
+import { formatDisplayUsdt, numberWithCommas } from 'pages/Pools/helpers';
 import { useSimulate } from 'pages/UniversalSwap/SwapV3/hooks';
 import { memo, useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
@@ -106,11 +106,11 @@ const Bidding = ({ isEnd, round, isStarted }: { isEnd: boolean; round: number; i
             <div className={styles.balance}>
               {/* <div className={styles.token}>{formatDisplayUsdt(amountUsd)}</div> */}
               <UsdcIcon />
-              <span>{toDisplay(estimateReceive)} USDC</span>
+              <span>{numberWithCommas(toDisplay(estimateReceive))} USDC</span>
             </div>
             <div className={styles.balance}>
               {theme === 'light' ? <OraiXLightIcon /> : <OraiXIcon />}
-              <span>{toDisplay(estimateResidueBid)} ORAIX</span>
+              <span>{numberWithCommas(toDisplay(estimateResidueBid))} ORAIX</span>
             </div>
           </div>
         </div>

diff --git a/src/pages/CoHarvest/components/BiddingHistory/index.tsx b/src/pages/CoHarvest/components/BiddingHistory/index.tsx
@@ -16,8 +16,9 @@ import { memo, useEffect, useRef, useState } from 'react';
 import AllBidding from '../AllBidding';
 import MyBidding from '../MyBidding';
 import styles from './index.module.scss';
+import { useCoinGeckoPrices } from 'hooks/useCoingecko';
 
-const BiddingHistory = ({ round }) => {
+const BiddingHistory = ({ round, isEnd }) => {
   const ORAIX_TOKEN_INFO = oraichainTokens.find((e) => e.coinGeckoId === 'oraidex');
   const USDC_TOKEN_INFO = oraichainTokens.find((e) => e.coinGeckoId === 'usd-coin');
 
@@ -47,13 +48,15 @@ const BiddingHistory = ({ round }) => {
   }, [round]);
 
   const exchangeRate = new BigDecimal(averageRatio?.displayAmount || 0).div(INIT_AMOUNT_SIMULATE).toString();
+  const { data: prices } = useCoinGeckoPrices();
   const { biddingInfo } = useGetBiddingFilter(filterRound);
   const { historyBidPool } = useGetHistoryBid(filterRound);
-  const { historyAllBidPool, isLoading: loadingAllBid } = useGetAllBids(filterRound, exchangeRate);
+  const { historyAllBidPool, isLoading: loadingAllBid } = useGetAllBids(filterRound, biddingInfo, prices, exchangeRate);
   const { listPotentialReturn, isLoading: loadingMyBid } = useGetBidHistoryWithPotentialReturn({
     listBidHistories: historyBidPool,
     exchangeRate,
-    biddingInfo
+    biddingInfo,
+    prices
   });
 
   const ref = useRef(null);

diff --git a/src/pages/CoHarvest/components/HarvestInfo/index.tsx b/src/pages/CoHarvest/components/HarvestInfo/index.tsx
@@ -3,7 +3,7 @@ import { ReactComponent as UsdcIcon } from 'assets/icons/usd_coin.svg';
 import { useCoinGeckoPrices } from 'hooks/useCoingecko';
 import useConfigReducer from 'hooks/useConfigReducer';
 import { getUsd } from 'libs/utils';
-import { formatDisplayUsdt } from 'pages/Pools/helpers';
+import { formatDisplayUsdt, numberWithCommas } from 'pages/Pools/helpers';
 import { memo, useState } from 'react';
 import CountDownTime from '../CountDownTime';
 import { TooltipIconBtn } from '../Tooltip';
@@ -41,7 +41,7 @@ const HarvestInfo = (props: { poolValue: string; onEnd: () => void; onStart: ()
 
             <div className={styles.balance}>
               <UsdcIcon />
-              {toDisplay(poolValue)} USDC
+              {numberWithCommas(toDisplay(poolValue))} USDC
             </div>
             <div className={styles.usd}>{formatDisplayUsdt(amountUsd)}</div>
           </div>

diff --git a/src/pages/CoHarvest/components/MyBidding/index.tsx b/src/pages/CoHarvest/components/MyBidding/index.tsx
@@ -7,18 +7,14 @@ import { ReactComponent as WinIconLight } from 'assets/icons/win-icon-light.svg'
 import { ReactComponent as WinIcon } from 'assets/icons/win-icon.svg';
 import { ReactComponent as NoDataDark } from 'assets/images/nodata-bid-dark.svg';
 import { ReactComponent as NoData } from 'assets/images/nodata-bid.svg';
-import { useCoinGeckoPrices } from 'hooks/useCoingecko';
 import useConfigReducer from 'hooks/useConfigReducer';
 import { getUsd } from 'libs/utils';
 import { BidStatus } from 'pages/CoHarvest/constants';
-import { formatDisplayUsdt } from 'pages/Pools/helpers';
+import { formatDisplayUsdt, numberWithCommas } from 'pages/Pools/helpers';
 import styles from './index.module.scss';
 
 const MyBidding = ({ list, isLoading }) => {
   const [theme] = useConfigReducer('theme');
-  const { data: prices } = useCoinGeckoPrices();
-  const ORAIX_TOKEN_INFO = oraichainTokens.find((e) => e.coinGeckoId === 'oraidex');
-  const USDC_TOKEN_INFO = oraichainTokens.find((e) => e.coinGeckoId === 'usd-coin');
 
   const StatusIcon = {
     [BidStatus.BIDDING]: theme === 'light' ? BiddingIconLight : BiddingIcon,
@@ -46,15 +42,15 @@ const MyBidding = ({ list, isLoading }) => {
               {list
                 .sort((a, b) => b.premium_slot - a.premium_slot)
                 .map((item, index) => {
-                  const amountUsd = getUsd(item.amount || '0', ORAIX_TOKEN_INFO, prices);
                   const Status = StatusIcon[item.status] || BiddingIcon;
 
                   return (
                     <tr className={styles.item} key={index}>
                       <td className={styles.index}>{index + 1}</td>
                       <td className={styles.bid}>
-                        <div>{formatDisplayUsdt(amountUsd)}</div>
-                        <div className={styles.detailPrice}>{toDisplay(item.amount || '0')} ORAIX</div>
+                        <div>{formatDisplayUsdt(item.amountUSD)}</div>
+                        {/* <div className={styles.detailPrice}>{toDisplay(item.amount || '0')} ORAIX</div> */}
+                        <div className={styles.detailPrice}>{numberWithCommas(toDisplay(item.amount))} ORAIX</div>
                       </td>
                       <td className={styles.slot}>
                         <span>{item.premium_slot || 0}%</span>
@@ -72,13 +68,17 @@ const MyBidding = ({ list, isLoading }) => {
                             item.status !== BidStatus.BIDDING ? styles[item.status] : ''
                           }`}
                         >
-                          {formatDisplayUsdt(item.potentialReturnUSD)}
+                          ≈ {formatDisplayUsdt(item.potentialReturnUSD)}
                         </div>
                         {item.estimateResidueBid !== '0' && (
-                          <div className={styles.detailPrice}>{toDisplay(item.estimateResidueBid)} ORAIX Refund</div>
+                          <div className={styles.detailPrice}>
+                            {numberWithCommas(toDisplay(item.estimateResidueBid))} ORAIX Refund
+                          </div>
                         )}
                         {item.estimateReceive !== '0' && (
-                          <div className={styles.detailPrice}>{toDisplay(item.estimateReceive)} USDC</div>
+                          <div className={styles.detailPrice}>
+                            {numberWithCommas(toDisplay(item.estimateReceive))} USDC
+                          </div>
                         )}
                       </td>
                     </tr>

diff --git a/src/pages/CoHarvest/hooks/useGetBidRound.ts b/src/pages/CoHarvest/hooks/useGetBidRound.ts
@@ -4,13 +4,13 @@ import { BigDecimal, oraichainTokens, toDisplay } from '@oraichain/oraidex-commo
 import { CoharvestBidPoolQueryClient } from '@oraichain/oraidex-contracts-sdk';
 import { useQuery } from '@tanstack/react-query';
 import { network } from 'config/networks';
-import { useCoinGeckoPrices } from 'hooks/useCoingecko';
+import { CoinGeckoPrices } from 'hooks/useCoingecko';
 import useConfigReducer from 'hooks/useConfigReducer';
 import { getUsd } from 'libs/utils';
 import { useEffect, useState } from 'react';
 import { fetchRoundBid } from 'rest/api';
 import { BidStatus, TIMER } from '../constants';
-import { Bid, BiddingInfoResponse } from '@oraichain/oraidex-contracts-sdk/build/CoharvestBidPool.types';
+import { Bid, BiddingInfo, BiddingInfoResponse } from '@oraichain/oraidex-contracts-sdk/build/CoharvestBidPool.types';
 
 export const useGetRound = () => {
   const [round, setRound] = useState(0);
@@ -70,6 +70,7 @@ export const useGetBiddingFilter = (round: number) => {
     const data = await coHavestBidPool.biddingInfo({
       round
     });
+
     return data;
   };
 
@@ -154,14 +155,15 @@ export const useGetPotentialReturn = (props: {
       round,
       slot
     });
+
     return data;
   };
 
   const {
     data: potentialReturn,
     isLoading,
     refetch: refetchPotentialReturn
-  } = useQuery(['potential-return', bidAmount, round], () => getPotentialReturn(), {
+  } = useQuery(['potential-return-info-bid', bidAmount, round], () => getPotentialReturn(), {
     refetchOnWindowFocus: false,
     placeholderData: {
       receive: '0',
@@ -177,11 +179,12 @@ export const useGetBidHistoryWithPotentialReturn = (props: {
   exchangeRate: string;
   listBidHistories: Bid[];
   biddingInfo: BiddingInfoResponse;
+  prices: CoinGeckoPrices<string>;
 }) => {
-  const { listBidHistories, exchangeRate, biddingInfo } = props;
+  const { listBidHistories, exchangeRate, biddingInfo, prices } = props;
   const ORAIX_TOKEN_INFO = oraichainTokens.find((e) => e.coinGeckoId === 'oraidex');
   const USDC_TOKEN_INFO = oraichainTokens.find((e) => e.coinGeckoId === 'usd-coin');
-  const { data: prices } = useCoinGeckoPrices();
+  const now = Date.now();
 
   const getListPotentialReturn = async () => {
     const multicall = new MulticallQueryClient(window.client, network.multicall);
@@ -204,6 +207,7 @@ export const useGetBidHistoryWithPotentialReturn = (props: {
         return {
           ...bid,
           potentialReturnUSD: '0',
+          amountUSD: '0',
           estimate_receive: '0',
           estimate_residue_bid: '0',
           status: BidStatus.BIDDING
@@ -215,16 +219,21 @@ export const useGetBidHistoryWithPotentialReturn = (props: {
       // get status
       const isRunningRound =
         !bid.is_distributed || // case: chưa chia reward
-        new Date().getTime() <= new Date(biddingInfo.bid_info.end_time * TIMER.MILLISECOND).getTime(); // case: time now < time end
+        now <= biddingInfo.bid_info.end_time * TIMER.MILLISECOND; // case: time now < time end
 
       const estimateReceive = isRunningRound ? response?.receive || '0' : bid.amount_received || '0';
       const estimateResidueBid = isRunningRound ? response?.residue_bid || '0' : bid.residue_bid || '0';
+      const pricesToken = isRunningRound
+        ? prices
+        : { oraidex: Number(biddingInfo.distribution_info.exchange_rate), 'usd-coin': prices['usd-coin'] };
 
-      const returnAmountUsd = getUsd(estimateReceive, USDC_TOKEN_INFO, prices);
-      const residueBidAmountUsd = getUsd(estimateResidueBid, ORAIX_TOKEN_INFO, prices);
+      const returnAmountUsd = getUsd(estimateReceive, USDC_TOKEN_INFO, pricesToken);
+      const residueBidAmountUsd = getUsd(estimateResidueBid, ORAIX_TOKEN_INFO, pricesToken);
 
       const potentialReturnUSD = new BigDecimal(returnAmountUsd).add(residueBidAmountUsd).toNumber();
 
+      const amountUSD = getUsd(bid.amount || '0', ORAIX_TOKEN_INFO, pricesToken);
+
       let status = BidStatus.BIDDING;
       let percent = 0;
       if (isRunningRound) {
@@ -245,7 +254,8 @@ export const useGetBidHistoryWithPotentialReturn = (props: {
         estimateReceive,
         estimateResidueBid,
         status,
-        percent
+        percent,
+        amountUSD
       };
     });
   };
@@ -292,7 +302,15 @@ export const useGetHistoryBid = (round: number) => {
   return { historyBidPool, isLoading, refetchHistoryBidPool };
 };
 
-export const useGetAllBids = (round: number, exchangeRate: string) => {
+export const useGetAllBids = (
+  round: number,
+  biddingInfo: BiddingInfoResponse,
+  prices: CoinGeckoPrices<string>,
+  exchangeRate: string
+) => {
+  const ORAIX_TOKEN_INFO = oraichainTokens.find((e) => e.coinGeckoId === 'oraidex');
+  const now = Date.now();
+
   const getHistoryBidPool = async () => {
     const coHarvestBidPool = new CoharvestBidPoolQueryClient(window.client, network.bid_pool);
     const data = await coHarvestBidPool.allBidInRound({
@@ -321,7 +339,15 @@ export const useGetAllBids = (round: number, exchangeRate: string) => {
         };
       }
       const response = fromBinary(res.return_data[ind].data);
-      return response;
+
+      // get status
+      const isRunningRound = !response.is_distributed || now <= biddingInfo.bid_info.end_time * TIMER.MILLISECOND;
+
+      const pricesToken = isRunningRound ? prices : { oraidex: Number(biddingInfo.distribution_info.exchange_rate) };
+
+      const amountUSD = getUsd(response.amount || '0', ORAIX_TOKEN_INFO, pricesToken);
+
+      return { ...response, amountUSD };
     });
   };
 
@@ -333,7 +359,7 @@ export const useGetAllBids = (round: number, exchangeRate: string) => {
   } = useQuery(['history-bid-pool-all', round], () => getHistoryBidPool(), {
     refetchOnWindowFocus: false,
     placeholderData: [],
-    enabled: !!round
+    enabled: !!round && !!biddingInfo?.bid_info.round
   });
 
   return { historyAllBidPool, isLoading: isFetching, refetchAllHistoryBidPool };

diff --git a/src/pages/CoHarvest/index.tsx b/src/pages/CoHarvest/index.tsx
@@ -39,14 +39,14 @@ const CoHarvest = () => {
               <BiddingChart bidInfo={biddingInfo.bid_info} round={round} />
             </div>
           </div>
-          <BiddingHistory round={round} />
+          <BiddingHistory round={round} isEnd={isEnd} />
         </div>
       ) : (
         <div className={styles.auction}>
           <HarvestInfo poolValue={poolValue} bidInfo={biddingInfo.bid_info} onEnd={onEnd} onStart={onStart} />
           <Bidding round={round} isEnd={isEnd} isStarted={isStarted} />
           <BiddingChart bidInfo={biddingInfo.bid_info} round={round} />
-          <BiddingHistory round={round} />
+          <BiddingHistory round={round} isEnd={isEnd} />
         </div>
       )}
     </div>