Merge pull request #283 from gnoswap-labs/GSW-DEV-Fix-Common-Page

gnoswap-labs · Dec 19, 2023 · 246a1ea · 246a1ea
2 parents f103415 + 3ba67bb
commit 246a1ea
Show file tree

Hide file tree

Showing 33 changed files with 176 additions and 96 deletions.
diff --git a/packages/web/src/components/common/bar-area-graph/BarAreaGraph.tsx b/packages/web/src/components/common/bar-area-graph/BarAreaGraph.tsx
@@ -27,7 +27,8 @@ export interface BarAreaGraphProps {
   isHiddenStart?: boolean;
   currentIndex?: number;
   tokenA: TokenModel;
-  tokenB: TokenModel
+  tokenB: TokenModel;
+  themeKey: "dark" | "light";
 }
 
 const VIEWPORT_DEFAULT_WIDTH = 400;
@@ -59,6 +60,7 @@ const BarAreaGraph: React.FC<BarAreaGraphProps> = ({
   isHiddenStart,
   tokenA,
   tokenB,
+  themeKey,
 }) => {
   const existTickRage = (!minTick || !maxTick) === false;
   const [mouseDown, setMouseDown] = useState(false);
@@ -245,7 +247,7 @@ const BarAreaGraph: React.FC<BarAreaGraphProps> = ({
         bins={bins}
         tokenA={tokenA}
         tokenB={tokenB}
-        themeKey={"dark"}
+        themeKey={themeKey}
         mouseover
         position="top"
         offset={40}

diff --git a/packages/web/src/components/common/my-position-card-list/MyPositionCardList.tsx b/packages/web/src/components/common/my-position-card-list/MyPositionCardList.tsx
@@ -18,6 +18,7 @@ interface MyPositionCardListProps {
   showPagination: boolean;
   showLoadMore: boolean;
   width: number;
+  themeKey: "dark" | "light";
 }
 
 const MyPositionCardList: React.FC<MyPositionCardListProps> = ({
@@ -32,13 +33,14 @@ const MyPositionCardList: React.FC<MyPositionCardListProps> = ({
   onScroll,
   showPagination,
   width,
+  themeKey,
 }) => (
   <CardListWrapper>
     <GridWrapper ref={divRef} onScroll={onScroll}>
       {
         positions.length > 0 &&
         positions.map((position, idx) => (
-          <MyPositionCard currentIndex={idx} position={position} key={idx} movePoolDetail={movePoolDetail} mobile={mobile} />
+          <MyPositionCard currentIndex={idx} position={position} key={idx} movePoolDetail={movePoolDetail} mobile={mobile} themeKey={themeKey}/>
         ))}
       {isFetched &&
         positions.length > 0 && positions.length < 4 &&

diff --git a/packages/web/src/components/common/my-position-card/MyPositionCard.tsx b/packages/web/src/components/common/my-position-card/MyPositionCard.tsx
@@ -21,13 +21,15 @@ interface MyPositionCardProps {
   movePoolDetail: (id: string) => void;
   mobile: boolean;
   currentIndex?: number;
+  themeKey: "dark" | "light";
 }
 
 const MyPositionCard: React.FC<MyPositionCardProps> = ({
   position,
   movePoolDetail,
   mobile,
   currentIndex,
+  themeKey,
 }) => {
   const GRAPH_WIDTH = mobile ? 226 : 258;
   const GRAPH_HEIGHT = 80;
@@ -194,6 +196,7 @@ const MyPositionCard: React.FC<MyPositionCardProps> = ({
                 tokenB={tokenB}
                 isHiddenStart={isHiddenStart}
                 currentIndex={currentIndex}
+                themeKey={themeKey}
               />
             </div>
             <div className="min-max-price">

diff --git a/packages/web/src/components/common/notification-list/NotificationItem.tsx b/packages/web/src/components/common/notification-list/NotificationItem.tsx
@@ -66,7 +66,7 @@ const NotificationItem: React.FC<ItemProps> = ({ groups, breakpoint }) => {
                     />
                   </DoubleLogo>
                 )}
-                <div className="content-wrap">{item.content}</div>
+                <div className="content-wrap" dangerouslySetInnerHTML={{ __html: item.content || ""}} />
               </div>
             </div>
             {item.status === "SUCCESS" ? (
@@ -116,7 +116,7 @@ const NotificationItem: React.FC<ItemProps> = ({ groups, breakpoint }) => {
                 />
               </DoubleLogoWrapperTest>
             )}
-            <span className="summary-content">{item.content}</span>
+            <div className="summary-content" dangerouslySetInnerHTML={{ __html: item.content || ""}} />
             {item.status === "SUCCESS" ? (
               <IconCircleInCheck className="success-icon status-icon" />
             ) : item.status === "FAILED" ? (

diff --git a/packages/web/src/components/common/notification-list/NotificationList.styles.ts b/packages/web/src/components/common/notification-list/NotificationList.styles.ts
@@ -119,7 +119,7 @@ export const TxsSummaryItem = styled.div`
   position: relative;
   width: 100%;
   min-height: 40px;
-  padding: 8px 24px;
+  padding: 12px 24px;
   height: auto;
   cursor: pointer;
   ${fonts.body12};
@@ -130,6 +130,9 @@ export const TxsSummaryItem = styled.div`
   .summary-content {
     width: 100%;
     padding: 0px 10px 0px 44px;
+    span {
+      font-weight: 500;
+    }
   }
   .status-icon {
     margin-left: 8px;

diff --git a/packages/web/src/components/common/notification-list/NotificationList.tsx b/packages/web/src/components/common/notification-list/NotificationList.tsx
@@ -24,7 +24,7 @@ const NotificationList: React.FC<NotificationListProps> = ({
   onClearAll,
 }) => {
   const listRef = useRef<HTMLDivElement | null>(null);
-
+  
   return (
     <>
       <NotificationListWrapper

diff --git a/packages/web/src/components/common/pool-graph/PoolGraph.tsx b/packages/web/src/components/common/pool-graph/PoolGraph.tsx
@@ -181,7 +181,7 @@ const PoolGraph: React.FC<PoolGraphProps> = ({
         .attr("y1", 0)
         .attr("y2", boundsHeight)
         .attr("stroke-dasharray", 4)
-        .attr("stroke", "#FFFFFF")
+        .attr("stroke", `${themeKey === "dark" ? "#FFFFFF": "#596782"}`)
         .attr("stroke-width", 0.5);
     }
   }

diff --git a/packages/web/src/components/common/select-token-incentivize/SelectTokenIncentivize.styles.ts b/packages/web/src/components/common/select-token-incentivize/SelectTokenIncentivize.styles.ts
@@ -148,9 +148,6 @@ export const SelectTokenIncentivizeWrapper = styled.div`
     &.token-list-wrapper-auto-height {
       height: auto;
     }
-    ${media.mobile} {
-      height: 248px;
-    }
     overflow-y: auto;
     .no-data-found {
       ${mixins.flexbox("row", "center", "center")};

diff --git a/packages/web/src/components/earn/earn-my-positions-content/EarnMyPositionsContent.tsx b/packages/web/src/components/earn/earn-my-positions-content/EarnMyPositionsContent.tsx
@@ -20,6 +20,7 @@ export interface EarnMyPositionContentProps {
   width: number;
   loadMore: boolean;
   onClickLoadMore?: () => void;
+  themeKey: "dark" | "light";
 }
 
 const EarnMyPositionsContent: React.FC<EarnMyPositionContentProps> = ({
@@ -39,6 +40,7 @@ const EarnMyPositionsContent: React.FC<EarnMyPositionContentProps> = ({
   width,
   loadMore,
   onClickLoadMore,
+  themeKey,
 }) => {
   if (!connected || isSwitchNetwork) {
     return (
@@ -67,6 +69,7 @@ const EarnMyPositionsContent: React.FC<EarnMyPositionContentProps> = ({
       width={width}
       loadMore={loadMore}
       onClickLoadMore={onClickLoadMore}
+      themeKey={themeKey}
     />
   );
 };

diff --git a/packages/web/src/components/earn/earn-my-positions/EarnMyPositions.tsx b/packages/web/src/components/earn/earn-my-positions/EarnMyPositions.tsx
@@ -24,6 +24,7 @@ export interface EarnMyPositionsProps {
   width: number;
   loadMore: boolean;
   onClickLoadMore?: () => void;
+  themeKey: "dark" | "light";
 }
 
 const EarnMyPositions: React.FC<EarnMyPositionsProps> = ({
@@ -46,6 +47,7 @@ const EarnMyPositions: React.FC<EarnMyPositionsProps> = ({
   width,
   loadMore,
   onClickLoadMore,
+  themeKey,
 }) => (
   <EarnMyPositionswrapper>
     <EarnMyPositionsHeader
@@ -72,6 +74,7 @@ const EarnMyPositions: React.FC<EarnMyPositionsProps> = ({
       width={width}
       loadMore={loadMore}
       onClickLoadMore={onClickLoadMore}
+      themeKey={themeKey}
     />
   </EarnMyPositionswrapper>
 );

diff --git a/packages/web/src/components/home/home-swap/HomeSwap.tsx b/packages/web/src/components/home/home-swap/HomeSwap.tsx
@@ -75,6 +75,7 @@ const HomeSwap: React.FC<HomeSwapProps> = ({
         swapTokenInfo.tokenABalance.replace(/,/g, ""),
       ).toString();
       setFromAmount(formatValue);
+      changeTokenAAmount(formatValue);
     }
   }, [swapTokenInfo.tokenABalance, connected, setFromAmount]);
 

diff --git a/...nts/incentivize/pool-incentivize-select-pool-item/PoolIncentivizeSelectPoolItem.styles.ts b/...nts/incentivize/pool-incentivize-select-pool-item/PoolIncentivizeSelectPoolItem.styles.ts
@@ -26,7 +26,7 @@ export const PoolIncentivizeSelectPoolItemWrapper = styled.div<Props>`
     align-items: center;
 
     .token-pair-name {
-      color: ${({ theme }) => theme.color.text03};
+      color: ${({ theme }) => theme.color.text02};
       ${fonts.body9}
       ${media.mobile} {
         ${fonts.body11}
@@ -43,7 +43,7 @@ export const PoolIncentivizeSelectPoolItemWrapper = styled.div<Props>`
 
     .liquidity {
       height: 14px;
-      color: ${({ theme }) => theme.color.text03};
+      color: ${({ theme }) => theme.color.text02};
       ${fonts.body9}
       line-height: 100%;
       ${media.mobile} {

diff --git a/...omponents/incentivize/pool-incentivize-select-pool-item/PoolIncentivizeSelectPoolItem.tsx b/...omponents/incentivize/pool-incentivize-select-pool-item/PoolIncentivizeSelectPoolItem.tsx
@@ -3,6 +3,7 @@ import { PoolIncentivizeSelectPoolItemWrapper, PoolIncentivizeSelectPoolItemDefa
 import DoubleLogo from "@components/common/double-logo/DoubleLogo";
 import Badge, { BADGE_TYPE } from "@components/common/badge/Badge";
 import { PoolSelectItemInfo } from "@models/pool/info/pool-select-item-info";
+import { convertLargePrice } from "@utils/stake-position-utils";
 
 export interface PoolIncentivizeSelectPoolItemProps {
   poolSelectItem: PoolSelectItemInfo | null;
@@ -43,7 +44,7 @@ const PoolIncentivizeSelectPoolItem: React.FC<PoolIncentivizeSelectPoolItemProps
     if (!poolSelectItem) {
       return "-";
     }
-    return `$${poolSelectItem.liquidityAmount}`;
+    return `$${convertLargePrice(poolSelectItem.liquidityAmount)}`;
   }, [poolSelectItem]);
 
   const onClickItem = useCallback(() => {

diff --git a/packages/web/src/components/incentivize/pool-incentivize/PoolIncentivize.tsx b/packages/web/src/components/incentivize/pool-incentivize/PoolIncentivize.tsx
@@ -54,18 +54,9 @@ const customSort = (a: PoolSelectItemInfo, b: PoolSelectItemInfo) => {
   } else if (!isAGnotGns && isBGnotGns) {
     return 1;
   } else {
-    if (isAGnotGns && isBGnotGns) {
-      const feeOrder = [100, 500, 3000, 10000];
-      const feeA = parseInt(a.fee, 10);
-      const feeB = parseInt(b.fee, 10);
-      const indexA = feeOrder.indexOf(feeA);
-      const indexB = feeOrder.indexOf(feeB);
-      return indexA - indexB;
-    } else {
-      const liquidityA = parseFloat(a.liquidityAmount);
-      const liquidityB = parseFloat(b.liquidityAmount);
-      return liquidityB - liquidityA;
-    }
+    const liquidityA = parseFloat(a.liquidityAmount);
+    const liquidityB = parseFloat(b.liquidityAmount);
+    return liquidityB - liquidityA;
   }
 };
 
@@ -90,9 +81,11 @@ const PoolIncentivize: React.FC<PoolIncentivizeProps> = ({
   const { getGnotPath } = useGnotToGnot();
 
   const selectedItem = useMemo((): PoolSelectItemInfo | null => {
-    return selectedPool ? PoolMapper.toPoolSelectItemInfo(selectedPool) : null;
+    const temp = selectedPool ? PoolMapper.toPoolSelectItemInfo(selectedPool) : null;
+    return temp;
   }, [selectedPool]);
-
+  console.log(selectedItem, "selectedItem");
+
   const poolSelectItems = useMemo((): PoolSelectItemInfo[] => {
     return pools.map(PoolMapper.toPoolSelectItemInfo).map((item: PoolSelectItemInfo) => {
       return {
@@ -101,16 +94,19 @@ const PoolIncentivize: React.FC<PoolIncentivizeProps> = ({
           ...item.tokenA,
           symbol: getGnotPath(item.tokenA).symbol,
           logoURI: getGnotPath(item.tokenA).logoURI,
+          path: getGnotPath(item.tokenA).path,
         },
         tokenB: {
           ...item.tokenB,
           symbol: getGnotPath(item.tokenB).symbol,
           logoURI: getGnotPath(item.tokenB).logoURI,
+          path: getGnotPath(item.tokenB).path,
         },
       };
     }).sort(customSort);
   }, [pools]);
-
+  console.log(pools, "pools");
+
   return (
     <PoolIncentivizeWrapper>
       <h3 className="title">Incentivize Pool</h3>

diff --git a/...mponents/incentivize/select-distribution-date-input/SelectDistributionDateInput.styles.ts b/...mponents/incentivize/select-distribution-date-input/SelectDistributionDateInput.styles.ts
@@ -55,15 +55,15 @@ export const SelectDistributionDateInputWrapper = styled.div`
 
     & .calendar-wrapper {
       position: absolute;
-      height: 0;
+      max-height: 0;
       top: 5px;
       width: 100%;
       min-width: 315px;
       z-index: 10;
-      height: 0;
+      max-height: 0;
       display: none;
       ${media.mobile} {
-        transition: height 0.5s ease;
+        transition: max-height 0.5s ease;
         position: fixed;
         top: auto;
         bottom: 0;
@@ -76,9 +76,9 @@ export const SelectDistributionDateInputWrapper = styled.div`
     }
     & .open {
       display: block;
-      height: 305px;
+      max-height: 305px;
       ${media.mobile} {
-      height: 305px;
+      max-height: 305px;
       }
     }
   }

diff --git a/...ents/incentivize/select-distribution-period-input/SelectDistributionPeriodInput.styles.ts b/...ents/incentivize/select-distribution-period-input/SelectDistributionPeriodInput.styles.ts
@@ -55,7 +55,7 @@ export const PoolIncentivizeSelectPeriodBoxItem = styled.div`
   flex-direction: row;
   width: 100%;
   padding: 8px 24px;
-  color: ${({ theme }) => theme.color.text03};
+  color: ${({ theme }) => theme.color.text02};
   ${fonts.body12}
   align-items: center;
   justify-content: center;

diff --git a/packages/web/src/components/swap/swap-card-auto-router/SwapCardAutoRouter.tsx b/packages/web/src/components/swap/swap-card-auto-router/SwapCardAutoRouter.tsx
@@ -67,7 +67,7 @@ const SwapCardAutoRouterItem: React.FC<SwapCardAutoRouterItemProps> = ({
     <div className="row">
       <MissingLogo symbol={swapSummaryInfo.tokenA.symbol} url={swapSummaryInfo.tokenA.logoURI} className="token-logo" width={24} mobileWidth={24}/>
       <div className="left-box">
-        <div className="left-badge">{swapRouteInfo.version}</div>
+        {/* {routeInfos.length < 3 && <div className="left-badge">{swapRouteInfo.version}</div>} */}
         <span>{weightStr}</span>
       </div>
       <DotLine />
@@ -83,7 +83,7 @@ const SwapCardAutoRouterItem: React.FC<SwapCardAutoRouterItemProps> = ({
             />
             <h1>{routeInfo.fee}</h1>
           </div>
-          <DotLine />
+          {index < 2 && <DotLine />}
         </React.Fragment>
       ))}
       <MissingLogo symbol={swapSummaryInfo.tokenB.symbol} url={swapSummaryInfo.tokenB.logoURI} className="token-logo" width={24} mobileWidth={24}/>

diff --git a/packages/web/src/containers/earn-my-position-container/EarnMyPositionContainer.tsx b/packages/web/src/containers/earn-my-position-container/EarnMyPositionContainer.tsx
@@ -9,6 +9,8 @@ import { PoolPositionModel } from "@models/position/pool-position-model";
 import { useRouter } from "next/router";
 import React, { useCallback, useEffect, useRef, useState, useMemo } from "react";
 import { ValuesType } from "utility-types";
+import { useAtomValue } from "jotai";
+import { ThemeState } from "@states/index";
 
 export const POSITION_CONTENT_LABEL = {
   VALUE: "Value",
@@ -41,6 +43,7 @@ const EarnMyPositionContainer: React.FC<
   const { isError, availableStake, getPositions, isFetchedPosition } = usePositionData();
   const [positions, setPositions] = useState<PoolPositionModel[]>([]);
   const [mobile, setMobile] = useState(false);
+  const themeKey = useAtomValue(ThemeState.themeKey);
 
   const handleResize = () => {
     if (typeof window !== "undefined") {
@@ -140,6 +143,7 @@ const EarnMyPositionContainer: React.FC<
       width={width}
       loadMore={page === 1}
       onClickLoadMore={handleClickLoadMore}
+      themeKey={themeKey}
     />
   );
 };