Merge remote-tracking branch 'origin/develop' into GSW-408-Main-Commo…

…n-Improve-UI
gnoswap-labs · Oct 24, 2023 · fd913b6 · fd913b6
2 parents 8f0890b + 662b627
commit fd913b6
Show file tree

Hide file tree

Showing 74 changed files with 1,154 additions and 359 deletions.
diff --git a/.gitignore b/.gitignore
@@ -9,3 +9,7 @@
 
 node_modules
 .vscode
+
+.pnp.cjs
+.pnp.loader.mjs
+
diff --git a/.yarn/cache/@hookform-resolvers-npm-3.3.2-303f2eafd6-bcaefe2a8a.zip b/.yarn/cache/@hookform-resolvers-npm-3.3.2-303f2eafd6-bcaefe2a8a.zip
diff --git a/.yarn/cache/property-expr-npm-2.0.5-6f6bda4c65-4ebe82ce45.zip b/.yarn/cache/property-expr-npm-2.0.5-6f6bda4c65-4ebe82ce45.zip
diff --git a/.yarn/cache/react-hook-form-npm-7.47.0-58fe62ab6d-dec192fec9.zip b/.yarn/cache/react-hook-form-npm-7.47.0-58fe62ab6d-dec192fec9.zip
diff --git a/.yarn/cache/tiny-case-npm-1.0.3-8c9747c74e-3f7a30c39d.zip b/.yarn/cache/tiny-case-npm-1.0.3-8c9747c74e-3f7a30c39d.zip
diff --git a/.yarn/cache/toposort-npm-2.0.2-d472329c7d-d64c74b570.zip b/.yarn/cache/toposort-npm-2.0.2-d472329c7d-d64c74b570.zip
diff --git a/.yarn/cache/type-fest-npm-2.19.0-918b953248-a4ef07ece2.zip b/.yarn/cache/type-fest-npm-2.19.0-918b953248-a4ef07ece2.zip
diff --git a/.yarn/cache/yup-npm-1.3.2-558e934d09-08150c6e05.zip b/.yarn/cache/yup-npm-1.3.2-558e934d09-08150c6e05.zip
diff --git a/packages/web/.env.example b/packages/web/.env.example
@@ -1,5 +1,5 @@
 NEXT_PUBLIC_DEFAULT_CHAIN_ID="dev.gnoswap"
-NEXT_PUBLIC_API_URL="https://dev-api.gnoswap.io/v3/testnet"
+NEXT_PUBLIC_API_URL="https://dev.api.gnoswap.io/v3/testnet"
 NEXT_PUBLIC_PACKAGE_POOL_PATH="gno.land/r/pool"
 NEXT_PUBLIC_PACKAGE_POOL_ADDRESS="g1ee305k8yk0pjz443xpwtqdyep522f9g5r7d63w"
 NEXT_PUBLIC_PACKAGE_POSITION_PATH="gno.land/r/position"

diff --git a/packages/web/package.json b/packages/web/package.json
@@ -19,7 +19,7 @@
     "@emotion/styled": "11.10.6",
     "@floating-ui/react": "0.21.1",
     "@gnolang/gno-js-client": "1.1.6",
-    "@hookform/resolvers": "^3.3.2",
+    "@hookform/resolvers": "3.3.2",
     "@tanstack/react-query": "4.26.1",
     "axios": "1.3.4",
     "bignumber.js": "9.1.1",
@@ -28,12 +28,12 @@
     "next": "13.2.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-hook-form": "^7.47.0",
+    "react-hook-form": "7.47.0",
     "typescript": "4.9.5",
     "url-loader": "4.1.1",
     "utility-types": "3.10.0",
     "ws": "8.14.2",
-    "yup": "^1.3.2"
+    "yup": "1.3.2"
   },
   "devDependencies": {
     "@babel/core": "7.21.0",

diff --git a/packages/web/public/img-404.png b/packages/web/public/img-404.png
diff --git a/packages/web/src/components/common/breadcrumbs/Breadcrumbs.styles.ts b/packages/web/src/components/common/breadcrumbs/Breadcrumbs.styles.ts
@@ -7,7 +7,7 @@ export const wrapper = (theme: Theme) => css`
   ${fonts.p3};
   height: 26px;
   padding: 0px 8px;
-  background-color: ${theme.color.background06};
+  background-color: ${theme.color.backgroundOpacity3};
   color: ${theme.color.text04};
   border-radius: 2px;
 
@@ -18,7 +18,7 @@ export const wrapper = (theme: Theme) => css`
       color: ${theme.color.text02};
     }
     &:last-of-type {
-      color: ${theme.color.text05};
+      color: ${theme.color.text10};
     }
   }
 
@@ -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.spec.tsx b/packages/web/src/components/common/header/Header.spec.tsx
@@ -12,6 +12,7 @@ describe("Header Component", () => {
       connected: false,
       account: null,
       connectAdenaClient: () => null,
+      disconnectWallet: () => null,
       sideMenuToggle: true,
       onSideMenuToggle: () => null,
       searchMenuToggle: true,

diff --git a/packages/web/src/components/common/header/Header.stories.tsx b/packages/web/src/components/common/header/Header.stories.tsx
@@ -37,6 +37,7 @@ Default.args = {
   connected: false,
   account: defaultAccountInfo,
   connectAdenaClient: action("connectAdenaClient"),
+  disconnectWallet: action("disconnectWallet"),
   sideMenuToggle: true,
   onSideMenuToggle: action("onSideMenuToggle"),
   searchMenuToggle: true,

diff --git a/packages/web/src/components/common/header/Header.tsx b/packages/web/src/components/common/header/Header.tsx
@@ -40,6 +40,7 @@ interface HeaderProps {
   connected: boolean;
   connectAdenaClient: () => void;
   themeKey: "dark" | "light";
+  disconnectWallet: () => void;
 }
 
 const Header: React.FC<HeaderProps> = ({
@@ -57,6 +58,7 @@ const Header: React.FC<HeaderProps> = ({
   connected,
   connectAdenaClient,
   themeKey,
+  disconnectWallet,
 }) => {
   return (
     <>
@@ -75,7 +77,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>
@@ -99,6 +106,7 @@ const Header: React.FC<HeaderProps> = ({
                 connected={connected}
                 connectAdenaClient={connectAdenaClient}
                 themeKey={themeKey}
+                disconnectWallet={disconnectWallet}
               />
             </SearchContainer>
             <NotificationButton breakpoint={breakpoint} />

diff --git a/packages/web/src/components/common/icons/IconGnoswap404.tsx b/packages/web/src/components/common/icons/IconGnoswap404.tsx
diff --git a/packages/web/src/components/common/line-graph/LineGraph.styles.ts b/packages/web/src/components/common/line-graph/LineGraph.styles.ts
@@ -1,20 +1,26 @@
 import { fonts } from "@constants/font.constant";
 import styled from "@emotion/styled";
+import { media } from "@styles/media";
 
 export const LineGraphWrapper = styled.div`
   position: relative;
   display: flex;
   flex-direction: column;
   width: 100%;
-  height: 180px;
+  height: 319px;
   overflow: visible;
-
+  ${media.mobile} {
+    height: 263px;
+  }
   & svg {
     display: flex;
     flex-direction: column;
     width: 100%;
-    height: 180px;
+    height: 319px;
     overflow: visible;
+    ${media.mobile} {
+      height: 263px;
+    }
   }
 `;
 
@@ -29,13 +35,14 @@ export const LineGraphTooltipWrapper = styled.div<LineGraphTooltipWrapperProps>`
   left: ${props => `${props.x}px`};
   display: flex;
   flex-direction: column;
-  width: 157px;
+  width: 148px;
   height: auto;
   padding: 6px 8px;
-  background: ${({ theme }) => theme.color.background05};
+  background: ${({ theme }) => theme.color.background02};
   border-radius: 4px;
   box-shadow: 2px 2px 12px 0px rgba(0, 0, 0, 0.15);
   overflow: visible;
+  gap: 5px;
   ${fonts.p4};
 
   & .tooltip-header {
@@ -44,9 +51,17 @@ export const LineGraphTooltipWrapper = styled.div<LineGraphTooltipWrapperProps>`
     width: 100%;
     height: auto;
     justify-content: space-between;
+    font-size: 16px;
+    font-weight: 700;
+    line-height: 19px;
+    color: ${({ theme }) => theme.color.point};
   }
 
   & .tooltip-body {
-    color: ${({ theme }) => theme.color.point};
+    ${fonts.p4};
+    color: ${({ theme }) => theme.color.text04};
+    .date {
+      margin-right: 4px;
+    }
   }
 `;
diff --git a/packages/web/src/components/common/line-graph/LineGraph.tsx b/packages/web/src/components/common/line-graph/LineGraph.tsx
@@ -1,5 +1,5 @@
 import BigNumber from "bignumber.js";
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState, useMemo } from "react";
 import { LineGraphTooltipWrapper, LineGraphWrapper } from "./LineGraph.styles";
 
 function calculateSmoothing(pointA: Point, pointB: Point) {
@@ -61,6 +61,7 @@ export interface LineGraphProps {
   width?: number;
   height?: number;
   point?: boolean;
+  firstPointColor?: string;
 }
 
 interface Point {
@@ -97,6 +98,7 @@ const LineGraph: React.FC<LineGraphProps> = ({
   width = VIEWPORT_DEFAULT_WIDTH,
   height = VIEWPORT_DEFAULT_HEIGHT,
   point,
+  firstPointColor,
 }) => {
   const COMPONENT_ID = (Math.random() * 100000).toString();
   const [activated, setActivated] = useState(false);
@@ -218,6 +220,13 @@ const LineGraph: React.FC<LineGraphProps> = ({
     [getGraphLine, height, width],
   );
 
+  const firstPoint = useMemo(() => {
+    if (points.length === 0) {
+      return { x: 0, y: 0};
+    }
+    return points[0];
+  }, [points]);
+
   return (
     <LineGraphWrapper
       className={className}
@@ -235,7 +244,7 @@ const LineGraph: React.FC<LineGraphProps> = ({
             <stop offset="100%" stopColor={gradientEndColor} />
           </linearGradient>
         </defs>
-        <g>
+        <g width={width}>
           <path
             fill={`url(#gradient${COMPONENT_ID})`}
             stroke={color}
@@ -259,58 +268,62 @@ const LineGraph: React.FC<LineGraphProps> = ({
               />
             ))}
         </g>
-        {isFocus() && currentPoint && (
+        {
           <g>
             <line
-              stroke={color}
+              stroke={firstPointColor ? firstPointColor : color}
               strokeWidth={1}
               x1={0}
-              y1={currentPoint.y}
+              y1={firstPoint.y}
               x2={width}
-              y2={currentPoint.y}
-              strokeDasharray={3}
-            />
-            <line
-              stroke={color}
-              strokeWidth={1}
-              x1={currentPoint.x}
-              y1={0}
-              x2={currentPoint.x}
-              y2={height}
+              y2={firstPoint.y}
               strokeDasharray={3}
             />
-            <circle
-              cx={currentPoint.x}
-              cy={currentPoint.y}
-              r={3}
-              stroke={color}
-              fill={color}
-            />
+            {isFocus() && currentPoint && (
+              <line
+                stroke={color}
+                strokeWidth={1}
+                x1={currentPoint.x}
+                y1={0}
+                x2={currentPoint.x}
+                y2={height}
+                strokeDasharray={3}
+              />
+            )}
+            {isFocus() && currentPoint && (
+              <circle
+                cx={currentPoint.x}
+                cy={currentPoint.y}
+                r={3}
+                stroke={color}
+                fill={color}
+              />
+            )}
           </g>
-        )}
+        }
       </svg>
       {isFocus() && currentPointIndex > -1 && (
         <LineGraphTooltipWrapper
           x={
             currentPoint?.x && currentPoint?.x > width / 2
-              ? currentPoint?.x - 157
+              ? currentPoint?.x - 150
               : currentPoint?.x || 0
           }
           y={currentPoint?.y || 0}
         >
           <div className="tooltip-header">
+            <span className="value">{`$${BigNumber(
+              datas[currentPointIndex].value,
+            ).toString()}`}</span>
+          </div>
+          <div className="tooltip-body">
             <span className="date">
               {parseTime(datas[currentPointIndex].time).date}
             </span>
             <span className="time">
               {parseTime(datas[currentPointIndex].time).time}
             </span>
           </div>
-          <div className="tooltip-body">
-            <span className="value">{`$ ${BigNumber(
-              datas[currentPointIndex].value,
-            ).toString()}`}</span>
-          </div>
         </LineGraphTooltipWrapper>
       )}
     </LineGraphWrapper>

diff --git a/packages/web/src/components/common/load-more-button/LoadMoreButton.styles.ts b/packages/web/src/components/common/load-more-button/LoadMoreButton.styles.ts
@@ -14,4 +14,15 @@ export const wrapper = (theme: Theme) => css`
       fill: ${theme.color.icon03};
     }
   }
+  &:hover {
+    span {
+      color: ${theme.color.text03};
+    }
+    transition: all 0.3s ease;
+    svg {
+      * {
+        fill: ${theme.color.icon07};
+      }
+    }
+  }
 `;
diff --git a/packages/web/src/components/common/search-menu-modal/SearchMenuModal.tsx b/packages/web/src/components/common/search-menu-modal/SearchMenuModal.tsx
@@ -32,7 +32,6 @@ const SearchMenuModal: React.FC<SearchMenuModalProps> = ({
   const onClickItem = (symbol: string) => {
     location.href = "/tokens/" + symbol;
   };
-  console.log(isFetched, "isFetched");
 
   useEffect(() => {
     const closeMenu = (e: MouseEvent) => {

diff --git a/packages/web/src/components/common/select-tab/SelectTab.tsx b/packages/web/src/components/common/select-tab/SelectTab.tsx
@@ -14,7 +14,7 @@ const SelectTab: React.FC<SelectTabProps> = ({
   buttonClassName,
 }) => {
   return (
-    <SelectTabWrapper>
+    <SelectTabWrapper className="select-tab-wrapper">
       {list.map((type, idx) => (
         <SelectButton
           key={idx}

diff --git a/packages/web/src/components/common/wallet-connector-button/WalletConnectorButton.spec.tsx b/packages/web/src/components/common/wallet-connector-button/WalletConnectorButton.spec.tsx
@@ -12,6 +12,7 @@ describe("WalletConnectorButton Component", () => {
             connected={false}
             account={null}
             connectAdenaClient={() => { }}
+            disconnectWallet={() => { }}
           />
         </GnoswapThemeProvider>
       </JotaiProvider>,

diff --git a/packages/web/src/components/common/wallet-connector-button/WalletConnectorButton.stories.tsx b/packages/web/src/components/common/wallet-connector-button/WalletConnectorButton.stories.tsx
@@ -44,11 +44,13 @@ Disconnected.args = {
   connected: false,
   account: null,
   connectAdenaClient: action("connectAdenaClient"),
+  disconnectWallet: action("disconnectWallet"),
 };
 
 export const Connected = Template.bind({});
 Connected.args = {
   connected: true,
   account: defaultAccountInfo,
   connectAdenaClient: action("connectAdenaClient"),
+  disconnectWallet: action("disconnectWallet"),
 };
diff --git a/packages/web/src/components/common/wallet-connector-button/WalletConnectorButton.tsx b/packages/web/src/components/common/wallet-connector-button/WalletConnectorButton.tsx
@@ -15,13 +15,15 @@ interface WalletConnectProps {
   connected: boolean;
   connectAdenaClient: () => void;
   themeKey: "dark" | "light";
+  disconnectWallet: () => void;
 }
 
 const WalletConnectorButton: React.FC<WalletConnectProps> = ({
   account,
   connected,
   connectAdenaClient,
   themeKey,
+  disconnectWallet,
 }) => {
   const [toggle, setToggle] = useAtom(CommonState.headerToggle);
 
@@ -86,6 +88,7 @@ const WalletConnectorButton: React.FC<WalletConnectProps> = ({
           account={account}
           connected={connected}
           connectAdenaClient={connectAdenaClient}
+          disconnectWallet={disconnectWallet}
           onMenuToggle={onMenuToggle}
           themeKey={themeKey}
         />