[GSW-31] fix: Fix bug vercel token detail

gnoswap-labs · Oct 23, 2023 · a07cb90 · a07cb90
1 parent 77731f3
commit a07cb90
Show file tree

Hide file tree

Showing 33 changed files with 250 additions and 99 deletions.
diff --git a/packages/web/src/components/common/breadcrumbs/Breadcrumbs.styles.ts b/packages/web/src/components/common/breadcrumbs/Breadcrumbs.styles.ts
@@ -30,4 +30,7 @@ export const wrapper = (theme: Theme) => css`
       fill: ${theme.color.icon03};
     }
   }
+  @media (max-width: 1180px) {
+    height: 24px;
+  }
 `;
diff --git a/packages/web/src/components/common/header/Header.tsx b/packages/web/src/components/common/header/Header.tsx
@@ -73,7 +73,12 @@ const Header: React.FC<HeaderProps> = ({
                     {HEADER_NAV.map(item => (
                       <li
                         key={item.title}
-                        className={pathname === item.path ? "selected" : ""}
+                        className={
+                          pathname === item.path ||
+                          (item.subPath || []).some(_ => pathname.includes(_))
+                            ? "selected"
+                            : ""
+                        }
                       >
                         <Link href={item.path}>{item.title}</Link>
                       </li>

diff --git a/packages/web/src/components/token/best-pool-card-list/BestPoolCardList.styles.ts b/packages/web/src/components/token/best-pool-card-list/BestPoolCardList.styles.ts
@@ -40,7 +40,7 @@ export const wrapper = (theme: Theme) => css`
       transition: background-color 0.3s ease;
       cursor: pointer;
       &:hover {
-        background-color: ${theme.color.background06};
+        background-color: ${theme.color.hover04};
       }
       .symbol {
         margin: 0px 8px;

diff --git a/packages/web/src/components/token/best-pool-card-list/BestPoolCardList.tsx b/packages/web/src/components/token/best-pool-card-list/BestPoolCardList.tsx
@@ -3,6 +3,7 @@ import DoubleLogo from "@components/common/double-logo/DoubleLogo";
 import { type BestPool } from "@containers/best-pools-container/BestPoolsContainer";
 import { tokenPairSymbolToOneCharacter } from "@utils/string-utils";
 import { wrapper } from "./BestPoolCardList.styles";
+import Link from "next/link";
 
 interface BestPoolCardListProps {
   list: BestPool[];
@@ -22,19 +23,21 @@ const BestPoolCardList: React.FC<BestPoolCardListProps> = ({ list }) => {
       </div>
       <ul>
         {list.map((info, idx) => (
-          <li key={idx}>
-            <DoubleLogo
-              left={info.tokenPair.tokenA.logoURI}
-              right={info.tokenPair.tokenB.logoURI}
-              size={20}
-            />
-            <span className="symbol">
-              {tokenPairSymbolToOneCharacter(info.tokenPair)}
-            </span>
-            <span className="fee-rate">{info.feeRate}</span>
-            <span className="tvl">{info.tvl}</span>
-            <span className="apr">{info.apr}</span>
-          </li>
+          <Link href="/earn/pool/5" key={idx}>
+            <li>
+              <DoubleLogo
+                left={info.tokenPair.tokenA.logoURI}
+                right={info.tokenPair.tokenB.logoURI}
+                size={20}
+              />
+              <span className="symbol">
+                {tokenPairSymbolToOneCharacter(info.tokenPair)}
+              </span>
+              <span className="fee-rate">{info.feeRate}%</span>
+              <span className="tvl">{info.tvl}</span>
+              <span className="apr">{info.apr}</span>
+            </li>
+          </Link>
         ))}
       </ul>
     </div>

diff --git a/packages/web/src/components/token/best-pools/BestPools.styles.ts b/packages/web/src/components/token/best-pools/BestPools.styles.ts
@@ -1,6 +1,7 @@
 import { fonts } from "@constants/font.constant";
 import { css, type Theme } from "@emotion/react";
 import mixins from "@styles/mixins";
+import { media } from "@styles/media";
 
 export const wrapper = (theme: Theme) => css`
   ${mixins.flexbox("column", "flex-start", "center")};
@@ -9,7 +10,10 @@ export const wrapper = (theme: Theme) => css`
   border: 1px solid ${theme.color.border02};
   border-radius: 8px;
   padding: 24px 0px;
-  gap: 24px;
+  gap: 12px;
+  ${media.mobile} {
+    gap: 8px;
+  }
   h2 {
     ${fonts.body9};
     color: ${theme.color.text01};

diff --git a/packages/web/src/components/token/gainer-and-loser/CardListCommonStyle.styles.ts b/packages/web/src/components/token/gainer-and-loser/CardListCommonStyle.styles.ts
@@ -1,5 +1,6 @@
 import { fonts } from "@constants/font.constant";
 import { css, type Theme } from "@emotion/react";
+import { media } from "@styles/media";
 import mixins from "@styles/mixins";
 
 export const cardStyle = (theme: Theme) => css`
@@ -17,7 +18,13 @@ export const cardStyle = (theme: Theme) => css`
     color: ${theme.color.text01};
     width: 100%;
     padding: 0px 24px;
-    margin-bottom: 20px;
+    margin-bottom: 8px;
+    ${media.mobile} {
+      margin-bottom: 4px;
+    }
+  }
+  > a {
+    width: 100%;
   }
   .card-wrap {
     ${mixins.flexbox("row", "center", "space-between")};

diff --git a/packages/web/src/components/token/gainer-card-list/GainerCardList.tsx b/packages/web/src/components/token/gainer-card-list/GainerCardList.tsx
@@ -2,6 +2,7 @@ import { MATH_NEGATIVE_TYPE } from "@constants/option.constant";
 import React from "react";
 import { cx } from "@emotion/css";
 import { cardStyle } from "@components/token/gainer-and-loser/CardListCommonStyle.styles";
+import Link from "next/link";
 
 interface GainerCardListProps {
   gainers: any[];
@@ -12,20 +13,22 @@ const GainerCardList: React.FC<GainerCardListProps> = ({ gainers }) => {
     <section css={cardStyle}>
       <h2 className="card-title">Top 3 Gainers</h2>
       {gainers.map((gainer, idx) => (
-        <div className="card-wrap" key={idx}>
-          <img src={gainer?.logoURI} alt="logo" />
-          <span className="name">{gainer.name}</span>
-          <span className="symbol">{gainer.symbol}</span>
-          <span className="price">{gainer.price}</span>
-          <span
-            className={cx("change", {
-              negative: gainer?.change?.status === MATH_NEGATIVE_TYPE.NEGATIVE,
-            })}
-          >
-            {gainer?.change?.value}
-          </span>
-        </div>
-      ))}
+        <Link href={`/tokens/${gainer.symbol}`} key={idx}>
+          <div className="card-wrap">
+            <img src={gainer?.logoURI} alt="logo" />
+            <span className="name">{gainer.name}</span>
+            <span className="symbol">{gainer.symbol}</span>
+            <span className="price">{gainer.price}</span>
+            <span
+              className={cx("change", {
+                negative: gainer?.change?.status === MATH_NEGATIVE_TYPE.NEGATIVE,
+              })}
+            >
+              {gainer?.change?.value}
+            </span>
+          </div>
+        </Link>
+        ))}
     </section>
   );
 };

diff --git a/packages/web/src/components/token/loser-card-list/LoserCardList.tsx b/packages/web/src/components/token/loser-card-list/LoserCardList.tsx
@@ -2,6 +2,7 @@ import { cx } from "@emotion/css";
 import React from "react";
 import { MATH_NEGATIVE_TYPE } from "@constants/option.constant";
 import { cardStyle } from "@components/token/gainer-and-loser/CardListCommonStyle.styles";
+import Link from "next/link";
 
 interface LoserCardListProps {
   losers: any[];
@@ -12,19 +13,21 @@ const LoserCard: React.FC<LoserCardListProps> = ({ losers }) => {
     <section css={cardStyle}>
       <h2 className="card-title">Top 3 Losers</h2>
       {losers.map((loser, idx) => (
-        <div className="card-wrap" key={idx}>
-          <img src={loser?.logoURI} alt="logo" />
-          <span className="name">{loser.name}</span>
-          <span className="symbol">{loser.symbol}</span>
-          <span className="price">{loser.price}</span>
-          <span
-            className={cx("change", {
-              negative: loser?.change?.status === MATH_NEGATIVE_TYPE.NEGATIVE,
-            })}
-          >
-            {loser?.change?.value}
-          </span>
-        </div>
+        <Link href={`/tokens/${loser.symbol}`} key={idx}>
+          <div className="card-wrap">
+            <img src={loser?.logoURI} alt="logo" />
+            <span className="name">{loser.name}</span>
+            <span className="symbol">{loser.symbol}</span>
+            <span className="price">{loser.price}</span>
+            <span
+              className={cx("change", {
+                negative: loser?.change?.status === MATH_NEGATIVE_TYPE.NEGATIVE,
+              })}
+            >
+              {loser?.change?.value}
+            </span>
+          </div>
+        </Link>
       ))}
     </section>
   );

diff --git a/packages/web/src/components/token/market-information-list/MarketInformationList.styles.ts b/packages/web/src/components/token/market-information-list/MarketInformationList.styles.ts
@@ -1,6 +1,7 @@
 import { fonts } from "@constants/font.constant";
 import { css, Theme } from "@emotion/react";
 import mixins from "@styles/mixins";
+import { media } from "@styles/media";
 
 export const wrapper = (theme: Theme) => css`
   ${mixins.flexbox("row", "center", "center")};
@@ -21,5 +22,11 @@ export const wrapper = (theme: Theme) => css`
       ${fonts.body12};
       color: ${theme.color.text04};
     }
+    .market-info-value {
+      ${fonts.body10};
+      ${media.mobile} {
+        ${fonts.body12};
+      }
+    }
   }
 `;
diff --git a/packages/web/src/components/token/market-information-list/MarketInformationList.tsx b/packages/web/src/components/token/market-information-list/MarketInformationList.tsx
@@ -14,7 +14,7 @@ const MarketInformationList: React.FC<MarketInformationListProps> = ({
       {Object.values(list).map((item: any, idx: number) => (
         <div key={idx} className="marketInfo-wrap">
           <span className="title">{TITLE_LIST[idx]}</span>
-          <span>{item}</span>
+          <span className="market-info-value">{item}</span>
         </div>
       ))}
     </div>

diff --git a/packages/web/src/components/token/market-information/MarketInformation.styles.ts b/packages/web/src/components/token/market-information/MarketInformation.styles.ts
@@ -1,12 +1,16 @@
 import { fonts } from "@constants/font.constant";
 import { css, Theme } from "@emotion/react";
+import { media } from "@styles/media";
 import mixins from "@styles/mixins";
 
 export const wrapper = (theme: Theme) => css`
   ${mixins.flexbox("column", "flex-start", "center")};
   ${fonts.body7};
   width: 100%;
   color: ${theme.color.text01};
-  gap: 24px;
+  gap: 12px;
   padding: 24px;
+  ${media.mobile} {
+    gap: 8px;
+  }
 `;
diff --git a/packages/web/src/components/token/price-information-list/PriceInformationList.styles.ts b/packages/web/src/components/token/price-information-list/PriceInformationList.styles.ts
@@ -1,5 +1,6 @@
 import { fonts } from "@constants/font.constant";
 import { css, Theme } from "@emotion/react";
+import { media } from "@styles/media";
 import mixins from "@styles/mixins";
 
 export const wrapper = (theme: Theme) => css`
@@ -23,6 +24,18 @@ export const wrapper = (theme: Theme) => css`
     .title {
       ${fonts.body12};
       color: ${theme.color.text04};
+      @media (max-width: 1180px) {
+        ${fonts.p4};
+      }
+      ${media.mobile} {
+        ${fonts.body12};
+      }
+    }
+    .price-info-value {
+      ${fonts.body10};
+      ${media.mobile} {
+        ${fonts.body12};
+      }
     }
     .negative {
       color: ${theme.color.red01};

diff --git a/packages/web/src/components/token/price-information-list/PriceInformationList.tsx b/packages/web/src/components/token/price-information-list/PriceInformationList.tsx
@@ -22,7 +22,7 @@ const PriceInformationList: React.FC<PriceInformationListProps> = ({
         <div key={idx} className="information-wrap">
           <span className="title">{TITLE_LIST[idx]}</span>
           <span
-            className={cx({
+            className={cx("price-info-value", {
               negative: item.status === MATH_NEGATIVE_TYPE.NEGATIVE,
             })}
           >

diff --git a/packages/web/src/components/token/price-information/PriceInformation.styles.ts b/packages/web/src/components/token/price-information/PriceInformation.styles.ts
@@ -1,12 +1,16 @@
 import { fonts } from "@constants/font.constant";
 import { css, Theme } from "@emotion/react";
+import { media } from "@styles/media";
 import mixins from "@styles/mixins";
 
 export const wrapper = (theme: Theme) => css`
   ${mixins.flexbox("column", "flex-start", "center")};
   ${fonts.body7};
   width: 100%;
   color: ${theme.color.text01};
-  gap: 24px;
+  gap: 12px;
   padding: 24px;
+  ${media.mobile} {
+    gap: 8px;
+  }
 `;
diff --git a/packages/web/src/components/token/price-performance-list/PricePerformanceList.styles.ts b/packages/web/src/components/token/price-performance-list/PricePerformanceList.styles.ts
@@ -1,13 +1,14 @@
 import { fonts } from "@constants/font.constant";
 import { css, Theme } from "@emotion/react";
+import { media } from "@styles/media";
 import mixins from "@styles/mixins";
 
 export const wrapper = (theme: Theme) => css`
   ${mixins.flexbox("column", "center", "center")};
   ${fonts.body8};
   width: 100%;
   height: 214px;
-  background-color: ${theme.color.background06};
+  background-color: ${theme.color.backgroundOpacity3};
   border: 1px solid ${theme.color.border02};
   border-radius: 8px;
   padding: 16px;
@@ -37,6 +38,7 @@ export const wrapper = (theme: Theme) => css`
   .performance-list {
     height: 25px;
     span {
+      ${fonts.body10};
       width: 200px;
       text-align: right;
       color: ${theme.color.green01};
@@ -47,6 +49,9 @@ export const wrapper = (theme: Theme) => css`
       &.negative {
         color: ${theme.color.red01};
       }
+      ${media.mobile} {
+        ${fonts.body12};
+      }
     }
   }
 `;
diff --git a/packages/web/src/components/token/price-performance/PricePerformance.styles.ts b/packages/web/src/components/token/price-performance/PricePerformance.styles.ts
@@ -1,12 +1,16 @@
 import { fonts } from "@constants/font.constant";
 import { css, Theme } from "@emotion/react";
+import { media } from "@styles/media";
 import mixins from "@styles/mixins";
 
 export const wrapper = (theme: Theme) => css`
   ${mixins.flexbox("column", "flex-start", "center")};
   ${fonts.body7};
   width: 100%;
   color: ${theme.color.text01};
-  gap: 24px;
+  gap: 12px;
   padding: 24px;
+  ${media.mobile} {
+    gap: 8px;
+  }
 `;
diff --git a/packages/web/src/components/token/token-chart-info/TokenChartInfo.styles.ts b/packages/web/src/components/token/token-chart-info/TokenChartInfo.styles.ts
@@ -40,8 +40,7 @@ export const TokenChartInfoWrapper = styled.div`
   .change-rate-wrapper {
     ${mixins.flexbox("row", "center", "flex-end")};
     width: 100%;
-    margin-bottom: 16px;
-    ${fonts.body12};
+    ${fonts.body10};
 
     &.up {
       & * {

diff --git a/packages/web/src/components/token/token-chart-info/TokenChartInfo.tsx b/packages/web/src/components/token/token-chart-info/TokenChartInfo.tsx
@@ -46,7 +46,7 @@ const TokenChartInfo: React.FC<TokenChartInfoProps> = ({
             <IconTriangleArrowUp className="arrow-icon" /> :
             <IconTriangleArrowDown className="arrow-icon" />
         }
-        <span>{priceInfo.changedRate}</span>
+        <span>{priceInfo.changedRate}%</span>
       </div>
     </TokenChartInfoWrapper>
   );

diff --git a/packages/web/src/components/token/token-chart/TokenChart.styles.ts b/packages/web/src/components/token/token-chart/TokenChart.styles.ts
@@ -4,10 +4,11 @@ export const TokenChartWrapper = styled.div`
   display: flex;
   flex-direction: column;
   color: ${({ theme }) => theme.color.text01};
-  background-color: ${({ theme }) => theme.color.background02};
+  background-color: ${({ theme }) => theme.color.background06};
+  border: 1px solid ${({ theme }) => theme.color.border02};
   width: 100%;
   height: auto;
-  padding: 36px;
+  padding: 24px;
   border-radius: 8px;
 
   .chart-tab-wrapper {