[GSW-POOL] fix: Fix entire comment pool detail

packages/web/src/components/common/bar-area-graph/BarAreaGraph.tsx

@@ -31,6 +31,7 @@ export interface BarAreaGraphProps {
   minTickRate?: number;
   maxTickRate?: number;
   pool: PoolModel;
+  binsMyAmount: PoolBinModel[];
 }
 
 const VIEWPORT_DEFAULT_WIDTH = 400;
@@ -47,7 +48,8 @@ const BarAreaGraph: React.FC<BarAreaGraphProps> = ({
   tokenA,
   tokenB,
   themeKey,
-  pool
+  pool,
+  binsMyAmount,
 }) => {
 
   const minTickPosition = useMemo(() => {
@@ -96,6 +98,8 @@ const BarAreaGraph: React.FC<BarAreaGraphProps> = ({
         maxTickPosition={maxTickPosition}
         minTickPosition={minTickPosition}
         poolPrice={pool?.price || 1}
+        isPosition
+        binsMyAmount={binsMyAmount || []}
       />
     </BarAreaGraphWrapper>
   );

packages/web/src/components/common/button/Button.styles.ts

@@ -92,6 +92,7 @@ export const ButtonWrapper = styled.button<ButtonStyleProps>`
 `;
 
 export const StyledText = styled.span<ButtonStyleProps>`
+  white-space: nowrap;
   ${({ fontType }) => fonts[fontType ?? "body9"]};
   color: ${({ theme, textColor, hierarchy }) => {
     if (hierarchy === ButtonHierarchy.Primary) return theme.color.text09;

packages/web/src/components/common/liquidity-enter-amounts/LiquidityEnterAmounts.tsx

@@ -48,7 +48,7 @@ const LiquidityEnterAmounts: React.FC<LiquidityEnterAmountsProps> = ({
     }
     return isSelectTokenA ? depositRatio >= 100 : depositRatio <= 0;
   }, [depositRatio, isSelectTokenA]);
-
+  
   return (
     <LiquidityEnterAmountsWrapper>
       {

packages/web/src/components/common/missing-logo/MissingLogo.tsx

@@ -26,7 +26,7 @@ const MissingLogo: React.FC<Props> = ({
           mobileWidth={mobileWidth}
           className="missing-logo"
         >
-          {symbol.slice(0, 3)}
+          {(symbol || "").slice(0, 3)}
         </LogoWrapper>
       )}
     </>

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

@@ -21,7 +21,6 @@ import { convertToKMB, formatUsdNumber } from "@utils/stake-position-utils";
 import { isMaxTick, isMinTick } from "@utils/pool-utils";
 import IconStrokeArrowUp from "../icons/IconStrokeArrowUp";
 import IconStrokeArrowDown from "../icons/IconStrokeArrowDown";
-import BigNumber from "bignumber.js";
 import { makeDisplayTokenAmount } from "@utils/token-utils";
 import { PositionClaimInfo } from "@models/position/info/position-claim-info";
 
@@ -33,7 +32,7 @@ interface MyPositionCardProps {
   themeKey: "dark" | "light";
 }
 
-function estimateTick(tick: number, width: number) {
+export function estimateTick(tick: number, width: number) {
   if (tick < 0) return 0;
   if (tick > width) return width;
   return tick;
@@ -46,6 +45,7 @@ const MyPositionCard: React.FC<MyPositionCardProps> = ({
   currentIndex,
   themeKey,
 }) => {
+
   const GRAPH_WIDTH = mobile ? 226 : 290;
   const GRAPH_HEIGHT = 80;
   const { pool, rewards } = position;
@@ -68,7 +68,10 @@ const MyPositionCard: React.FC<MyPositionCardProps> = ({
         balance: makeDisplayTokenAmount(reward.token, reward.totalAmount) || 0,
         balanceUSD: Number(reward.totalAmount) * Number(tokenPrices[reward.token.priceId]?.usd || 0),
         claimableAmount: makeDisplayTokenAmount(reward.token, reward.claimableAmount) || 0,
-        claimableUSD: Number(reward.claimableUsdValue)
+        claimableUSD: Number(reward.claimableUsdValue),
+        accumulatedRewardOf1d: makeDisplayTokenAmount(reward.token, reward.accumulatedRewardOf1d || 0) || 0,
+        claimableUsdValue: Number(reward.claimableUsdValue),
+        aprOf7d: Number(reward.aprOf7d),
       }))
       .forEach((rewardInfo) => {
         const existReward = infoMap[rewardInfo.rewardType][rewardInfo.token.priceId];
@@ -79,6 +82,9 @@ const MyPositionCard: React.FC<MyPositionCardProps> = ({
             balanceUSD: existReward.balanceUSD + rewardInfo.balanceUSD,
             claimableAmount: existReward.claimableAmount + rewardInfo.claimableAmount,
             claimableUSD: existReward.claimableUSD + rewardInfo.claimableUSD,
+            accumulatedRewardOf1d: existReward.accumulatedRewardOf1d + rewardInfo.accumulatedRewardOf1d,
+            claimableUsdValue: existReward.claimableUsdValue + rewardInfo.claimableUsdValue,
+            aprOf7d: existReward.aprOf7d + rewardInfo.aprOf7d,
           };
         } else {
           infoMap[rewardInfo.rewardType][rewardInfo.token.priceId] = rewardInfo;
@@ -146,7 +152,7 @@ const MyPositionCard: React.FC<MyPositionCardProps> = ({
   const maxTickLabel = useMemo(() => {
     return maxTickRate === 999
       ? `>${maxTickRate}%`
-      : maxTickRate > 1000
+      : maxTickRate >= 1000
       ? ">999%"
       : `${maxTickRate > 0 ? "+" : ""}${maxTickRate}%`;
   }, [maxTickRate]);
@@ -258,33 +264,19 @@ const MyPositionCard: React.FC<MyPositionCardProps> = ({
     return maxTickPosition;
   }, [maxTickPosition]);
 
-  const isMinTickGreen = useMemo(() => {
-    if (!getMinTick) {
-      return true;
-    }
-    return BigNumber(getMinTick).isGreaterThanOrEqualTo(GRAPH_WIDTH / 2);
-  }, [getMinTick, GRAPH_WIDTH]);
-
-  const isMaxTickGreen = useMemo(() => {
-    if (!getMaxTick) {
-      return true;
-    }
-    return BigNumber(getMaxTick).isGreaterThanOrEqualTo(GRAPH_WIDTH / 2);
-  }, [getMaxTick]);
-
   const startClass = useMemo(() => {
     if (getMinTick === null) {
-      return null;
+      return "";
     }
-    return !isMinTickGreen || isFullRange ? "negative" : "positive";
-  }, [getMinTick, isMinTickGreen, isFullRange]);
+    return (minTickRate > 0 || isFullRange) ? "negative" : "positive";
+  }, [getMinTick, minTickRate, isFullRange]);
 
   const endClass = useMemo(() => {
     if (getMaxTick === null) {
       return "";
     }
-    return isMaxTickGreen ? "positive" : "negative";
-  }, [getMaxTick, isMaxTickGreen, maxTickRate]);
+    return maxTickRate > 0 ? "positive" : "negative";
+  }, [getMaxTick, maxTickRate]);
 
   const claimableUSD = useMemo(() => {
     const claimableUsdValue = claimableRewardInfo ? Object.values(claimableRewardInfo)
@@ -386,6 +378,7 @@ const MyPositionCard: React.FC<MyPositionCardProps> = ({
                 minTickRate={minTickRate}
                 maxTickRate={maxTickRate}
                 pool={pool}
+                binsMyAmount={position.bins}
               />
             </div>
             <div className="min-max-price">

packages/web/src/components/common/overlap-logo/OverlapLogo.tsx

@@ -12,6 +12,7 @@ const OverlapLogo = ({ logos, size = 36 }: OverlapLogoProps) => {
           key={index}
           overlap={index > 0 ? (size / 3) : 0}
           size={size}
+          className="overlap-logo-wrapper"
         >
           <img src={logo} alt="logo-image" />
         </OverlapLogoImageWrapper>

packages/web/src/components/common/pool-graph/PoolGraph.stories.tsx

@@ -20,5 +20,6 @@ export const Default: StoryObj<PoolGraphProps> = {
     width: 600,
     height: 400,
     zoomable: false,
+    binsMyAmount: pool.bins,
   },
 };

packages/web/src/components/common/pool-graph/PoolGraph.styles.ts

@@ -57,8 +57,12 @@ export const PoolGraphTooltipWrapper = styled.div`
         &.price-range {
           justify-content: flex-end;
         }
+        &.token-title {
+          ${media.mobile} {
+            display: none;
+          }
+        }
       }
-
     }
 
     .header {
@@ -84,6 +88,13 @@ export const PoolGraphTooltipWrapper = styled.div`
       .row {
         padding: 4px 0;
       }
+      &:last-of-type {
+        .token {
+          ${media.mobile} {
+            display: none;
+          }
+        }
+      }
     }
 
     .token {
@@ -95,19 +106,38 @@ export const PoolGraphTooltipWrapper = styled.div`
         width: 20px;
         height: 20px;
       }
+      ${media.mobile} {
+        display: none;
+      }
     }
 
     .amount {
       flex-shrink: 0;
       width: 80px;
-
       & .hidden {
         display: inline;
         overflow: hidden;
         text-overflow: clip;
         white-space: nowrap;
         word-break: break-all;
       }
+      &.mr-3 {
+        margin-left: -8px;
+      }
+      img {
+        width: 20px;
+        height: 20px;
+        margin-right: 4px;
+        display: none;
+      }
+      ${media.mobile} {
+        &.total-amount {
+          width: 85px;
+        }
+        img {
+          display: block;
+        }
+      }
     }
 
     .price-range {