feat: Fix Swap pages

gnoswap-labs · Aug 24, 2023 · c70c5a4 · c70c5a4
1 parent 910c832
commit c70c5a4
Show file tree

Hide file tree

Showing 32 changed files with 342 additions and 384 deletions.
diff --git a/packages/web/src/components/common/icons/IconPolygon.tsx b/packages/web/src/components/common/icons/IconPolygon.tsx
@@ -0,0 +1,17 @@
+const IconPolygon = ({ className }: { className?: string }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="27"
+    height="13"
+    viewBox="0 0 27 13"
+    fill="none"
+    className={className}
+  >
+    <path
+      d="M10.52 10.6683C12.11 12.4454 14.8919 12.4454 16.4819 10.6683L26.0272 0H0.974609L10.52 10.6683Z"
+      fill="#112188"
+    />
+  </svg>
+);
+
+export default IconPolygon;
diff --git a/packages/web/src/components/common/icons/IconVector.tsx b/packages/web/src/components/common/icons/IconVector.tsx
@@ -10,9 +10,9 @@ const IconVector = ({ className }: { className?: string }) => (
     <path
       d="M0 1H33.6667"
       stroke="#C3D2EA"
-      strokeWidth="2"
-      strokeMiterlimit="3.8637"
-      strokeDasharray="1 4"
+      stroke-width="2"
+      stroke-miterlimit="3.8637"
+      stroke-dasharray="1 4"
     />
   </svg>
 );

diff --git a/packages/web/src/components/swap/swap-button-tooltip/SwapButtonTooltip.spec.tsx b/packages/web/src/components/swap/swap-button-tooltip/SwapButtonTooltip.spec.tsx
@@ -3,13 +3,11 @@ import { Provider as JotaiProvider } from "jotai";
 import GnoswapThemeProvider from "@providers/gnoswap-theme-provider/GnoswapThemeProvider";
 import SwapButtonTooltip from "./SwapButtonTooltip";
 import { dummySwapGasInfo } from "@containers/swap-container/SwapContainer";
-import Button from "@components/common/button/Button";
 
 describe("SwapButtonTooltip Component", () => {
   it("SwapButtonTooltip render", () => {
     const mockProps = {
       swapGasInfo: dummySwapGasInfo,
-      children: <Button style={{ width: "400" }} />,
     };
 
     render(

diff --git a/packages/web/src/components/swap/swap-button-tooltip/SwapButtonTooltip.stories.tsx b/packages/web/src/components/swap/swap-button-tooltip/SwapButtonTooltip.stories.tsx
@@ -1,9 +1,8 @@
 import React from "react";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
 import SwapButtonTooltip from "./SwapButtonTooltip";
-import { css, Theme } from "@emotion/react";
+import { css } from "@emotion/react";
 import { dummySwapGasInfo } from "@containers/swap-container/SwapContainer";
-import Button, { ButtonHierarchy } from "@components/common/button/Button";
 
 export default {
   title: "swap/SwapButtonTooltip",
@@ -21,21 +20,9 @@ const Template: ComponentStory<typeof SwapButtonTooltip> = args => (
 export const Default = Template.bind({});
 Default.args = {
   swapGasInfo: dummySwapGasInfo,
-  children: (
-    <Button
-      text="Swap"
-      style={{
-        width: 450,
-        height: 57,
-        fontType: "body7",
-        hierarchy: ButtonHierarchy.Primary,
-      }}
-      onClick={() => {}}
-    />
-  ),
 };
 
-const wrapper = (theme: Theme) => css`
+const wrapper = () => css`
   display: flex;
   width: 100%;
   align-items: center;

diff --git a/packages/web/src/components/swap/swap-button-tooltip/SwapButtonTooltip.styles.ts b/packages/web/src/components/swap/swap-button-tooltip/SwapButtonTooltip.styles.ts
@@ -18,3 +18,15 @@ export const SwapButtonTooltipWrap = styled.div`
     padding: 4px 0px;
   }
 `;
+
+export const IconWrap = styled.div`
+  ${mixins.flexbox("row", "center", "flex-start")};
+  cursor: pointer;
+  .icon-info {
+    width: 16px;
+    height: 16px;
+    * {
+      fill: ${({ theme }) => theme.color.icon05};
+    }
+  }
+`;
diff --git a/packages/web/src/components/swap/swap-button-tooltip/SwapButtonTooltip.tsx b/packages/web/src/components/swap/swap-button-tooltip/SwapButtonTooltip.tsx
@@ -1,16 +1,15 @@
 import React from "react";
-import { SwapButtonTooltipWrap } from "./SwapButtonTooltip.styles";
+import { IconWrap, SwapButtonTooltipWrap } from "./SwapButtonTooltip.styles";
 import { SwapGasInfo } from "@containers/swap-container/SwapContainer";
 import Tooltip from "@components/common/tooltip/Tooltip";
+import IconInfo from "@components/common/icons/IconInfo";
 
 interface WalletBalanceDetailInfoProps {
   swapGasInfo: SwapGasInfo;
-  children: React.ReactNode;
 }
 
 const SwapButtonTooltip: React.FC<WalletBalanceDetailInfoProps> = ({
   swapGasInfo,
-  children,
 }) => {
   const TooltipFloatingContent = (
     <SwapButtonTooltipWrap>
@@ -30,12 +29,10 @@ const SwapButtonTooltip: React.FC<WalletBalanceDetailInfoProps> = ({
   );
 
   return (
-    <Tooltip
-      placement="top"
-      FloatingContent={TooltipFloatingContent}
-      width="100%"
-    >
-      {children}
+    <Tooltip placement="top" FloatingContent={TooltipFloatingContent}>
+      <IconWrap>
+        <IconInfo className="icon-info" />
+      </IconWrap>
     </Tooltip>
   );
 };

diff --git a/packages/web/src/components/swap/swap-card-auto-router/SwapCardAutoRouter.styles.ts b/packages/web/src/components/swap/swap-card-auto-router/SwapCardAutoRouter.styles.ts
@@ -5,20 +5,29 @@ import mixins from "@styles/mixins";
 
 export const AutoRouterWrapper = styled.div`
   ${mixins.flexbox("column", "flex-start", "flex-start")};
+  width: 100%;
   padding: 12px;
-  margin: 0px 16px 16px 16px;
   gap: 12px;
+  ${media.mobile} {
+    margin-top: -4px;
+    overflow-x: auto;
+  }
   align-self: stretch;
   border-radius: 8px;
   border: 1px solid ${({ theme }) => theme.color.border02};
   .row {
     ${mixins.flexbox("row", "center", "flex-start")};
+    width: 100%;
     gap: 4px;
     align-self: stretch;
     .token-logo {
       width: 24px;
       height: 24px;
     }
+    .image-wrap {
+      width: 24px;
+      height: 24px;
+    }
     .left-box {
       ${mixins.flexbox("row", "center", "flex-start")};
       height: 28px;
@@ -45,9 +54,6 @@ export const AutoRouterWrapper = styled.div`
       }
     }
 
-    .vector {
-      ${mixins.flexbox("row", "flex-start", "flex-start")};
-    }
     .pair-fee {
       ${mixins.flexbox("row", "center", "center")};
       height: 28px;
@@ -101,3 +107,10 @@ export const SwapDivider = styled.div`
   align-self: stretch;
   background: ${({ theme }) => theme.color.border02};
 `;
+
+export const DotLine = styled.hr`
+  width: 100%;
+  min-width: 5px;
+  border: 0px;
+  border-top: 2px dotted ${({ theme }) => theme.color.border03};
+`;
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
@@ -1,7 +1,6 @@
 import React from "react";
-import { AutoRouterWrapper } from "./SwapCardAutoRouter.styles";
+import { AutoRouterWrapper, DotLine } from "./SwapCardAutoRouter.styles";
 import { TokenInfo } from "../swap-card/SwapCard";
-import IconVector from "@components/common/icons/IconVector";
 import { AutoRouterInfo } from "@containers/swap-container/SwapContainer";
 import IconLogoPrimary from "@components/common/icons/IconLogoPrimary";
 
@@ -24,7 +23,7 @@ const SwapCardAutoRouter: React.FC<ContentProps> = ({
           <div className="left-badge">V1</div>
           <span>{autoRouterInfo.v1fee[0]}</span>
         </div>
-        <IconVector className="vector" />
+        <DotLine />
         <div className="pair-fee">
           <div className="coin-logo">
             <div className="from">
@@ -36,7 +35,7 @@ const SwapCardAutoRouter: React.FC<ContentProps> = ({
           </div>
           <h1>{autoRouterInfo.v1fee[1]}</h1>
         </div>
-        <IconVector className="vector" />
+        <DotLine />
         <div className="pair-fee">
           <div className="coin-logo">
             <div className="from">
@@ -48,19 +47,18 @@ const SwapCardAutoRouter: React.FC<ContentProps> = ({
           </div>
           <h1>{autoRouterInfo.v1fee[2]}</h1>
         </div>
-        <IconVector className="vector" />
-        <IconLogoPrimary className="token-logo" />
+        <DotLine />
+        <div className="image-wrap">
+          <IconLogoPrimary className="token-logo" />
+        </div>
       </div>
-
       <div className="row">
         <img src={from.tokenLogo} alt="token logo" className="token-logo" />
         <div className="left-box">
           <div className="left-badge">V1</div>
           <span>{autoRouterInfo.v2fee[0]}</span>
         </div>
-        <IconVector className="vector" />
-        <IconVector className="vector" />
-        <IconVector className="vector" />
+        <DotLine />
         <div className="pair-fee">
           <div className="coin-logo">
             <div className="from">
@@ -72,21 +70,18 @@ const SwapCardAutoRouter: React.FC<ContentProps> = ({
           </div>
           <h1>{autoRouterInfo.v2fee[1]}</h1>
         </div>
-        <IconVector className="vector" />
-        <IconVector className="vector" />
-        <IconVector className="vector" />
-        <IconLogoPrimary className="token-logo" />
+        <DotLine />
+        <div className="image-wrap">
+          <IconLogoPrimary className="token-logo" />
+        </div>
       </div>
-
       <div className="row">
         <img src={from.tokenLogo} alt="token logo" className="token-logo" />
         <div className="left-box">
           <div className="left-badge">V1</div>
           <span>{autoRouterInfo.v3fee[0]}</span>
         </div>
-        <IconVector className="vector" />
-        <IconVector className="vector" />
-        <IconVector className="vector" />
+        <DotLine />
         <div className="pair-fee">
           <div className="coin-logo">
             <div className="from">
@@ -98,10 +93,10 @@ const SwapCardAutoRouter: React.FC<ContentProps> = ({
           </div>
           <h1>{autoRouterInfo.v3fee[1]}</h1>
         </div>
-        <IconVector className="vector" />
-        <IconVector className="vector" />
-        <IconVector className="vector" />
-        <IconLogoPrimary className="token-logo" />
+        <DotLine />
+        <div className="image-wrap">
+          <IconLogoPrimary className="token-logo" />
+        </div>
       </div>
       <p className="gas-description">
         Best price route costs ~$0.58 in gas. This route optimizes your total

diff --git a/packages/web/src/components/swap/swap-card-content-detail/SwapCardContentDetail.spec.tsx b/packages/web/src/components/swap/swap-card-content-detail/SwapCardContentDetail.spec.tsx
@@ -6,6 +6,7 @@ import {
   dummyAutoRouterInfo,
   dummySwapGasInfo,
 } from "@containers/swap-container/SwapContainer";
+import { DEVICE_TYPE } from "@styles/media";
 
 describe("SwapCardContentDetail Component", () => {
   it("SwapCardContentDetail render", () => {
@@ -16,6 +17,7 @@ describe("SwapCardContentDetail Component", () => {
       swapInfo: true,
       showSwapInfo: () => null,
       autoRouterInfo: dummyAutoRouterInfo,
+      breakpoint: DEVICE_TYPE.WEB,
       from: {
         token: "USDCoin",
         symbol: "USDC",

diff --git a/packages/web/src/components/swap/swap-card-content-detail/SwapCardContentDetail.stories.tsx b/packages/web/src/components/swap/swap-card-content-detail/SwapCardContentDetail.stories.tsx
@@ -1,12 +1,13 @@
 import React from "react";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
 import SwapCardContentDetail from "./SwapCardContentDetail";
-import { css, Theme } from "@emotion/react";
+import { css } from "@emotion/react";
 import {
   dummyAutoRouterInfo,
   dummySwapGasInfo,
 } from "@containers/swap-container/SwapContainer";
 import { action } from "@storybook/addon-actions";
+import { DEVICE_TYPE } from "@styles/media";
 
 export default {
   title: "swap/SwapCardContentDetail",
@@ -29,6 +30,7 @@ Default.args = {
   swapInfo: true,
   showSwapInfo: action("onClick"),
   autoRouterInfo: dummyAutoRouterInfo,
+  breakpoint: DEVICE_TYPE.WEB,
   from: {
     token: "USDCoin",
     symbol: "USDC",
@@ -53,14 +55,14 @@ Default.args = {
   },
 };
 
-const wrapper = (theme: Theme) => css`
+const wrapper = () => css`
   display: flex;
   width: 100%;
   align-items: center;
   justify-content: center;
   margin-top: 50px;
 `;
 
-const contentWrap = (theme: Theme) => css`
+const contentWrap = () => css`
   width: 500px;
 `;