Refactor/UI ux enhancement p4

packages/web/src/components/common/line-graph/LineGraph.tsx

@@ -222,7 +222,7 @@ const LineGraph: React.FC<LineGraphProps> = ({
     const minMaxGap = (() => {
       if (maxValueBigNumber.minus(minValueBigNumber).isEqualTo(0)) return maxValueBigNumber.multipliedBy(gapRatio);
 
-      if (minValueBigNumber.isLessThan(0)) return maxValueBigNumber;
+      if (minValueBigNumber.isLessThan(0) || hasOnlyOnePoint) return maxValueBigNumber;
 
       return maxValueBigNumber.minus(minValueBigNumber);
     })();
@@ -354,6 +354,20 @@ const LineGraph: React.FC<LineGraphProps> = ({
         .toNumber();
     };
 
+    // if (hasOnlyOnePoint) {
+    // const onlySingleData = mappedDatas[0];
+
+    // const x = BigNumber(time - minTime)
+    // .multipliedBy((width) - baseLineNumberWidthComputation)
+    // .dividedBy(maxTime - minTime)
+    // .toNumber(); 
+
+    // setPoints([{
+    //   x: optimizeTime(onlySingleData.time, width) + baseLineNumberWidthComputation,
+    //   y: optimizeValue(onlySingleData.value, height),
+    // }]);
+    // }
+
     const points = mappedDatas.map<Point>(data => ({
       x: optimizeTime(data.time, width) + baseLineNumberWidthComputation,
       y: optimizeValue(data.value, height),
@@ -516,6 +530,8 @@ const LineGraph: React.FC<LineGraphProps> = ({
     return datas[currentPointIndex]?.time && datas[currentPointIndex]?.value;
   }, [currentPointIndex, datas]);
 
+  const hasOnlyOnePoint = useMemo(() => datas.length === 1, [datas.length]);
+
   return (
     <LineGraphWrapper
       className={className}

packages/web/src/components/increase/increase-amount-info/IncreaseAmountInfo.tsx

@@ -43,7 +43,7 @@ const IncreaseAmountInfo: React.FC<IncreaseAmountInfoProps> = ({
             usdPrice={tokenB.usdPrice}
           />
         )}
-        {(!isDepositTokenA || !isDepositTokenA) && <div className="icon-wrapper">
+        {(!isDepositTokenA || !isDepositTokenB) && <div className="icon-wrapper">
           <IconAdd className="icon-add" />
         </div>}
       </div>

packages/web/src/components/pool/my-liquidity-content/MyLiquidityContent.tsx

@@ -10,7 +10,7 @@ import { RewardType } from "@constants/option.constant";
 import { PositionClaimInfo } from "@models/position/info/position-claim-info";
 import { SkeletonEarnDetailWrapper } from "@layouts/pool-layout/PoolLayout.styles";
 import { pulseSkeletonStyle } from "@constants/skeleton.constant";
-import { convertToKMB } from "@utils/stake-position-utils";
+import { convertToKMB, formatUsdNumber } from "@utils/stake-position-utils";
 import LoadingSpinner from "@components/common/loading-spinner/LoadingSpinner";
 import { MyPositionClaimContent } from "../my-position-card/MyPositionCardClaimContent";
 import MissingLogo from "@components/common/missing-logo/MissingLogo";
@@ -72,6 +72,7 @@ const MyLiquidityContent: React.FC<MyLiquidityContentProps> = ({
       SWAP_FEE: {},
       INTERNAL: {},
       EXTERNAL: {},
+      // Not use any more
       STAKING: {},
     };
     positions
@@ -115,6 +116,7 @@ const MyLiquidityContent: React.FC<MyLiquidityContentProps> = ({
       SWAP_FEE: Object.values(infoMap["SWAP_FEE"]),
       INTERNAL: Object.values(infoMap["INTERNAL"]),
       EXTERNAL: Object.values(infoMap["EXTERNAL"]),
+      // Not use any more
       STAKING: Object.values(infoMap["STAKING"]),
     };
   }, [isDisplay, positions, tokenPrices]);
@@ -131,6 +133,7 @@ const MyLiquidityContent: React.FC<MyLiquidityContentProps> = ({
       SWAP_FEE: {},
       INTERNAL: {},
       EXTERNAL: {},
+      // Not use any more
       STAKING: {},
     };
     positions
@@ -144,26 +147,35 @@ const MyLiquidityContent: React.FC<MyLiquidityContentProps> = ({
       .forEach(rewardInfo => {
         const existReward =
           infoMap[rewardInfo.rewardType]?.[rewardInfo.token.priceID];
+        const tokenPrice = Number(tokenPrices[rewardInfo.token.priceID] ?? 0);
         if (existReward) {
           infoMap[rewardInfo.rewardType][rewardInfo.token.priceID] = {
             ...existReward,
             accuReward1D: existReward.accuReward1D + rewardInfo.accuReward1D,
             apr: existReward.apr + rewardInfo.apr,
+            accuReward1DPrice: (existReward.accuReward1D * tokenPrice) + (rewardInfo.accuReward1D * tokenPrice),
           };
         } else {
-          infoMap[rewardInfo.rewardType][rewardInfo.token.priceID] = rewardInfo;
+          infoMap[rewardInfo.rewardType][rewardInfo.token.priceID] = {
+            ...rewardInfo,
+            accuReward1DPrice: (rewardInfo.accuReward1D * tokenPrice)
+          };
         }
       });
     return {
       SWAP_FEE: Object.values(infoMap["SWAP_FEE"]),
       INTERNAL: Object.values(infoMap["INTERNAL"]),
       EXTERNAL: Object.values(infoMap["EXTERNAL"]),
+      // Not use any more
       STAKING: Object.values(infoMap["STAKING"]),
     };
   }, [isDisplay, positions, tokenPrices]);
 
   const isShowRewardInfoTooltip = useMemo(() => {
-    return aprRewardInfo !== null && (aprRewardInfo?.EXTERNAL.length !== 0 || aprRewardInfo?.INTERNAL.length !== 0 || aprRewardInfo?.SWAP_FEE.length !== 0);
+    return aprRewardInfo !== null
+      && (aprRewardInfo?.EXTERNAL.length !== 0 ||
+        aprRewardInfo?.INTERNAL.length !== 0 ||
+        aprRewardInfo?.SWAP_FEE.length !== 0);
   }, [aprRewardInfo]);
 
   const dailyEarning = useMemo(() => {
@@ -194,7 +206,8 @@ const MyLiquidityContent: React.FC<MyLiquidityContentProps> = ({
       .map(reward => ({
         token: reward.rewardToken,
         rewardType: reward.rewardType,
-        balance: makeDisplayTokenAmount(reward.rewardToken, reward.totalAmount) || 0,
+        balance: makeDisplayTokenAmount(reward.rewardToken, reward.totalAmount) ||
+          0,
         balanceUSD:
           makeDisplayTokenAmount(
             reward.rewardToken,
@@ -302,12 +315,11 @@ const MyLiquidityContent: React.FC<MyLiquidityContentProps> = ({
   ]);
 
   const feeDaily = useMemo(() => {
-    // const temp = claimableRewardInfo?.SWAP_FEE;
-    // const sumUSD =
-    //   temp?.reduce((accum, current) => accum + current.balance, 0) || 0;
-    // return formatUsdNumber(`${sumUSD}`, 2, true);
-    return "$0";
-  }, []);
+    const temp = aprRewardInfo?.SWAP_FEE;
+    const sumUSD =
+      temp?.reduce((accum, current) => accum + current.accuReward1DPrice, 0) || 0;
+    return formatUsdNumber(`${sumUSD}`, 2, true);
+  }, [aprRewardInfo?.SWAP_FEE]);
 
   const feeClaim = useMemo(() => {
     const temp = claimableRewardInfo?.SWAP_FEE;
@@ -319,7 +331,7 @@ const MyLiquidityContent: React.FC<MyLiquidityContentProps> = ({
   const logoDaily = useMemo(() => {
     const temp = claimableRewardInfo?.SWAP_FEE;
     return temp?.map(item => getGnotPath(item.token).logoURI) || [];
-  }, [claimableRewardInfo]);
+  }, [claimableRewardInfo?.SWAP_FEE]);
 
   const logoReward = useMemo(() => {
     const temp = claimableRewardInfo?.INTERNAL;
@@ -329,15 +341,12 @@ const MyLiquidityContent: React.FC<MyLiquidityContentProps> = ({
   }, [claimableRewardInfo, getGnotPath, positionData]);
 
   const rewardDaily = useMemo(() => {
-    const sumRewardDaily = positions.reduce((positionAcc, positionCurrent) => {
-      const currentPositionDailyReward = positionCurrent.reward.reduce((rewardAcc, rewardCurrent) => {
-        return rewardAcc + Number(rewardCurrent.accuReward1D);
-      }, 0);
+    const temp = [...(aprRewardInfo?.INTERNAL ?? []), ...(aprRewardInfo?.EXTERNAL ?? [])];
+    const sumUSD =
+      temp?.reduce((accum, current) => accum + current.accuReward1DPrice, 0) || 0;
+    return formatUsdNumber(`${sumUSD}`, 2, true);
 
-      return positionAcc + currentPositionDailyReward;
-    }, 0);
-    return toUnitFormat(`${sumRewardDaily}`, true, true);
-  }, [positions]);
+  }, [aprRewardInfo?.EXTERNAL, aprRewardInfo?.INTERNAL]);
 
   const rewardClaim = useMemo(() => {
     const temp = [...(claimableRewardInfo?.EXTERNAL ?? []), ...(claimableRewardInfo?.INTERNAL ?? [])];
@@ -413,13 +422,12 @@ const MyLiquidityContent: React.FC<MyLiquidityContentProps> = ({
       </section>
       <section>
         <h4>Total Daily Earnings</h4>
-        {!loading && isShowRewardInfoTooltip ? (
+        {(!loading && isShowRewardInfoTooltip) ? (
           <Tooltip
             placement="top"
             FloatingContent={
               <div>
-                {/* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */}
-                <MyPositionAprContent rewardInfo={aprRewardInfo!} />
+                {aprRewardInfo && <MyPositionAprContent rewardInfo={aprRewardInfo} />}
               </div>
             }
           >

packages/web/src/components/pool/my-position-card/MyPositionCard.tsx

@@ -211,6 +211,7 @@ const MyPositionCard: React.FC<MyPositionCardProps> = ({
       },
       {
         SWAP_FEE: [],
+        // Not use any more
         STAKING: [],
         EXTERNAL: [],
         INTERNAL: [],
@@ -273,20 +274,24 @@ const MyPositionCard: React.FC<MyPositionCardProps> = ({
               token: current.rewardToken,
               rewardType: current.rewardType,
               accuReward1D: Number(current.accuReward1D),
+              accuReward1DPrice: Number(current.accuReward1D),
               apr: Number(current.apr),
             });
           }
           return accum;
         },
         {
           SWAP_FEE: [],
+          // NOt use anymore
           STAKING: [],
           EXTERNAL: [],
           INTERNAL: [],
         },
       );
       return aprRewardInfo;
-    }, []);
+    }, [position.reward]);
+
+
 
   const stringPrice = useMemo(() => {
     const price = tickToPriceStr(position?.pool?.currentTick, 40);
@@ -477,6 +482,17 @@ const MyPositionCard: React.FC<MyPositionCardProps> = ({
     return isAllReserveZeroBin40 && isAllReserveZeroBin;
   }, [position.pool.bins, position.pool.bins40]);
 
+  const isShowRewardInfoTooltip = useMemo(() => {
+    return aprRewardInfo !== null
+      && (aprRewardInfo?.EXTERNAL.length !== 0
+        || aprRewardInfo?.INTERNAL.length !== 0
+        || aprRewardInfo?.SWAP_FEE.length !== 0);
+  }, [aprRewardInfo]);
+
+  const isShowTotalRewardInfo = useMemo(() => {
+    return totalRewardInfo && (totalRewardInfo?.EXTERNAL.length !== 0 || totalRewardInfo?.INTERNAL.length !== 0 || totalRewardInfo?.SWAP_FEE.length !== 0);
+  }, [totalRewardInfo]);
+
   return (
     <>
       <PositionCardAnchor id={`${position.id}`} />
@@ -645,7 +661,7 @@ const MyPositionCard: React.FC<MyPositionCardProps> = ({
           </div>
           <div className="info-box">
             <span className="symbol-text">Daily Earnings</span>
-            {!isClosed && aprRewardInfo && !loading ? (
+            {!isClosed && isShowRewardInfoTooltip && !loading ? (
               <Tooltip
                 placement="top"
                 FloatingContent={
@@ -671,12 +687,12 @@ const MyPositionCard: React.FC<MyPositionCardProps> = ({
           </div>
           <div className="info-box">
             <span className="symbol-text">Claimable Rewards</span>
-            {!isClosed && !loading && totalRewardInfo ? (
+            {!isClosed && !loading && isShowTotalRewardInfo ? (
               <Tooltip
                 placement="top"
                 FloatingContent={
                   <div>
-                    <MyPositionRewardContent rewardInfo={totalRewardInfo} />
+                    {totalRewardInfo && <MyPositionRewardContent rewardInfo={totalRewardInfo} />}
                   </div>
                 }
               >
@@ -770,13 +786,9 @@ const MyPositionCard: React.FC<MyPositionCardProps> = ({
             <div className="convert-price">
               <div>
                 1
-                {(!isSwap ? tokenA : tokenB)?.symbol} =& nbsp;
-                <ExchangeRate value={minPriceStr} /> & nbsp;
-                {(!isSwap ? tokenB : tokenA)?.symbol}& nbsp; (
-                <span className={startClass}>
-                  {!isSwap ? minTickLabel : maxTickLabel}
-                </span>
-                ) & nbsp;
+                {(!isSwap ? tokenA : tokenB)?.symbol} =&nbsp;
+                <ExchangeRate value={minPriceStr} />&nbsp;
+                {(!isSwap ? tokenB : tokenA)?.symbol}&nbsp;(<span className={startClass}>{!isSwap ? minTickLabel : maxTickLabel}</span>)&nbsp;
                 <Tooltip
                   placement="top"
                   FloatingContent={
@@ -789,14 +801,11 @@ const MyPositionCard: React.FC<MyPositionCardProps> = ({
                 >
                   <IconInfo />
                 </Tooltip>
-                & nbsp;
+                &nbsp;
               </div >
               <div>
-                ~& nbsp;
-                <ExchangeRate value={maxPriceStr} /> & nbsp; {(!isSwap ? tokenB : tokenA)?.symbol}& nbsp;
-                (<span className={endClass}>
-                  {!isSwap ? maxTickLabel : minTickLabel}
-                </span>)&nbsp;
+                ~&nbsp;
+                <ExchangeRate value={maxPriceStr} /> &nbsp;{(!isSwap ? tokenB : tokenA)?.symbol}&nbsp;(<span className={endClass}>{!isSwap ? maxTickLabel : minTickLabel}</span>)&nbsp;
                 <Tooltip
                   placement="top"
                   FloatingContent={

packages/web/src/components/pool/my-position-card/MyPositionCardAprContent.tsx

@@ -19,7 +19,7 @@ export const MyPositionAprContent: React.FC<MyPositionAprContentProps> = ({ rewa
     return rewardInfo.SWAP_FEE;
   }, [rewardInfo.SWAP_FEE]);
 
-  const stakingRewards = useMemo(() => {
+  const internalRewards = useMemo(() => {
     if (rewardInfo.INTERNAL.length === 0) {
       return null;
     }
@@ -60,14 +60,14 @@ export const MyPositionAprContent: React.FC<MyPositionAprContentProps> = ({ rewa
           ))}
         </React.Fragment>
       )}
-      {stakingRewards && <div className="divider" />}
-      {stakingRewards && (
+      {internalRewards && <div className="divider" />}
+      {internalRewards && (
         <React.Fragment>
           <div className="list">
             <span className="title">Staking Rewards</span>
             <span className="title"></span>
           </div>
-          {stakingRewards.map((reward, index) => (
+          {internalRewards.map((reward, index) => (
             <div key={index} className="list">
               <div className="coin-info">
                 <img

packages/web/src/components/pool/my-position-card/MyPositionCardClaimContent.tsx

@@ -30,10 +30,10 @@ export const MyPositionClaimContent: React.FC<MyPositionClaimContentProps> = ({
     if (!rewardInfo) {
       return null;
     }
-    if (rewardInfo.STAKING.length === 0) {
+    if (rewardInfo.INTERNAL.length === 0) {
       return null;
     }
-    return rewardInfo.STAKING;
+    return rewardInfo.INTERNAL;
   }, [rewardInfo]);
 
   const externalRewards = useMemo(() => {
@@ -57,11 +57,11 @@ export const MyPositionClaimContent: React.FC<MyPositionClaimContentProps> = ({
     return toUnitFormat(sumUSD, true);
   }, [rewardInfo]);
 
-  const stakingRewardUSD = useMemo(() => {
+  const internalRewardUSD = useMemo(() => {
     if (!rewardInfo) {
       return 0;
     }
-    const sumUSD = rewardInfo.STAKING.reduce(
+    const sumUSD = rewardInfo.INTERNAL.reduce(
       (accum, current) => accum + current.claimableUSD,
       0,
     );
@@ -114,7 +114,7 @@ export const MyPositionClaimContent: React.FC<MyPositionClaimContentProps> = ({
         <React.Fragment>
           <div className="list">
             <span className="title">Internal Rewards</span>
-            <span className="title">{stakingRewardUSD}</span>
+            <span className="title">{internalRewardUSD}</span>
           </div>
           {stakingRewards.map((reward, index) => (
             <div key={index} className="list">

packages/web/src/components/pool/pool-pair-info-content/PoolPairInfoContent.tsx

@@ -117,7 +117,7 @@ const PoolPairInfoContent: React.FC<PoolPairInfoContentProps> = ({
   }, [pool?.rewardTokens]);
 
   const isHideBar = useMemo(() => {
-    const isAllReserveZeroBin40 = pool.bins40.every(item => Number(item.reserveTokenA) === 0 && Number(item.reserveTokenB) === 0);
+    const isAllReserveZeroBin40 = pool.bins40?.every(item => Number(item.reserveTokenA) === 0 && Number(item.reserveTokenB) === 0);
     const isAllReserveZeroBin = pool.bins.every(item => Number(item.reserveTokenA) === 0 && Number(item.reserveTokenB) === 0);
 
     return (isAllReserveZeroBin40 && isAllReserveZeroBin);