feat: Develop swap pages components

packages/web/src/components/common/button/Button.spec.tsx

@@ -36,7 +36,7 @@ describe("Button Component", () => {
               height: 50,
               justify: "space-between",
               padding: "0px 10px",
-              textColor: "",
+              textColor: "text01",
             }}
           />
         </GnoswapThemeProvider>

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

@@ -40,6 +40,7 @@ export const ButtonWrapper = styled.button<ButtonStyleProps>`
   transition: background-color 0.3s ease;
   background-color: ${({ hierarchy, bgColor, theme }) => {
     if (hierarchy === ButtonHierarchy.Primary) return theme.color.background04;
+    if (hierarchy === ButtonHierarchy.Gray) return theme.color.background17;
     if (hierarchy === ButtonHierarchy.Dark) return theme.color.background05;
     return theme.color[bgColor ?? "background04"];
   }};
@@ -80,6 +81,7 @@ export const StyledText = styled.span<ButtonStyleProps>`
   ${({ fontType }) => fonts[fontType ?? "body9"]};
   color: ${({ theme, textColor, hierarchy }) => {
     if (hierarchy === ButtonHierarchy.Primary) return theme.color.text09;
+    if (hierarchy === ButtonHierarchy.Gray) return theme.color.text20;
     return theme.color[textColor ?? "text03"];
   }};
 `;

packages/web/src/components/common/button/Button.tsx

@@ -12,6 +12,7 @@ interface ButtonProps {
 
 export enum ButtonHierarchy {
   Primary = "Primary",
+  Gray = "Gray",
   Dark = "Dark",
 }
 

packages/web/src/components/common/icons/IconLink.tsx

@@ -0,0 +1,19 @@
+const IconLink = ({ className }: { className?: string }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    className={className}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M11 15H7C5.35 15 4 13.65 4 12C4 10.35 5.35 9 7 9H11V7H7C4.24 7 2 9.24 2 12C2 14.76 4.24 17 7 17H11V15ZM17 7H13V9H17C18.65 9 20 10.35 20 12C20 13.65 18.65 15 17 15H13V17H17C19.76 17 22 14.76 22 12C22 9.24 19.76 7 17 7ZM16 11H8V13H16V11Z"
+      fill="#90A2C0"
+    />
+  </svg>
+);
+
+export default IconLink;

packages/web/src/components/common/icons/IconNote.tsx

@@ -1,17 +1,17 @@
-const Icon = ({ className }: { className?: string }) => (
+const IconNote = ({ className }: { className?: string }) => (
   <svg
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="none"
     xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
     className={className}
   >
     <path
-      d="M19 5V14H14V19H5V5H19ZM19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H15L21 15V5C21 3.9 20.1 3 19 3ZM12 14H7V12H12V14ZM17 10H7V8H17V10Z"
-      fill="white"
+      d="M12.6667 3.33333V9.33333H9.33333V12.6667H3.33333V3.33333H12.6667ZM12.6667 2H3.33333C2.6 2 2 2.6 2 3.33333V12.6667C2 13.4 2.6 14 3.33333 14H10L14 10V3.33333C14 2.6 13.4 2 12.6667 2ZM8 9.33333H4.66667V8H8V9.33333ZM11.3333 6.66667H4.66667V5.33333H11.3333V6.66667Z"
+      fill="#90A2C0"
     />
   </svg>
 );
 
-export default Icon;
+export default IconNote;

packages/web/src/components/common/icons/IconRouter.tsx

@@ -0,0 +1,17 @@
+const IconRouter = ({ className }: { className?: string }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    className={className}
+  >
+    <path
+      d="M13.0007 6.3335C12.314 6.3335 11.734 6.74683 11.474 7.3335H9.52732C9.26732 6.74683 8.68732 6.3335 8.00065 6.3335C7.31398 6.3335 6.73398 6.74683 6.47398 7.3335H4.52732C4.26732 6.74683 3.68732 6.3335 3.00065 6.3335C2.08065 6.3335 1.33398 7.08016 1.33398 8.00016C1.33398 8.92016 2.08065 9.66683 3.00065 9.66683C3.68732 9.66683 4.26732 9.2535 4.52732 8.66683H6.47398C6.73398 9.2535 7.31398 9.66683 8.00065 9.66683C8.68732 9.66683 9.26732 9.2535 9.52732 8.66683H11.474C11.734 9.2535 12.314 9.66683 13.0007 9.66683C13.9207 9.66683 14.6673 8.92016 14.6673 8.00016C14.6673 7.08016 13.9207 6.3335 13.0007 6.3335Z"
+      fill="#0059FF"
+    />
+  </svg>
+);
+
+export default IconRouter;

packages/web/src/components/common/icons/IconStrokeArrowDown.tsx

@@ -1,11 +1,18 @@
-const IconStrokeArrowDown = ({ className }: { className?: string }) => (
+const IconStrokeArrowDown = ({
+  className,
+  onClick,
+}: {
+  className?: string;
+  onClick?: () => void;
+}) => (
   <svg
     width="24"
     height="24"
     viewBox="0 0 24 24"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
     className={className}
+    onClick={onClick}
   >
     <path
       d="M7.41 8.58984L12 13.1698L16.59 8.58984L18 9.99984L12 15.9998L6 9.99984L7.41 8.58984Z"

packages/web/src/components/common/icons/IconStrokeArrowUp.tsx

@@ -1,11 +1,18 @@
-const IconStrokeArrowUp = ({ className }: { className?: string }) => (
+const IconStrokeArrowUp = ({
+  className,
+  onClick,
+}: {
+  className?: string;
+  onClick?: () => void;
+}) => (
   <svg
     width="24"
     height="24"
     viewBox="0 0 24 24"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
     className={className}
+    onClick={onClick}
   >
     <path
       d="M7.41 15.41L12 10.83L16.59 15.41L18 14L12 8L6 14L7.41 15.41Z"

packages/web/src/components/common/icons/IconVector.tsx

@@ -0,0 +1,20 @@
+const IconVector = ({ className }: { className?: string }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="34"
+    height="2"
+    viewBox="0 0 34 2"
+    fill="none"
+    className={className}
+  >
+    <path
+      d="M0 1H33.6667"
+      stroke="#C3D2EA"
+      stroke-width="2"
+      stroke-miterlimit="3.8637"
+      stroke-dasharray="1 4"
+    />
+  </svg>
+);
+
+export default IconVector;

packages/web/src/components/common/tooltip/Tooltip.styles.ts

@@ -7,5 +7,5 @@ export const Content = styled.div`
   border-radius: 8px;
   box-sizing: border-box;
   width: max-content;
-  max-width: calc(100vw - 10px);
+  //   max-width: calc(100vw - 10px);
 `;

packages/web/src/components/common/tooltip/Tooltip.tsx

@@ -91,6 +91,7 @@ const Tooltip: React.FC<React.PropsWithChildren<TooltipProps>> = ({
         data-state={open ? "open" : "closed"}
         style={{
           display: "flex",
+          width: "100%",
         }}
       >
         {children}

packages/web/src/components/swap/swap-button-tooltip/SwapButtonTooltip.spec.tsx

@@ -0,0 +1,23 @@
+import { render } from "@testing-library/react";
+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(
+      <JotaiProvider>
+        <GnoswapThemeProvider>
+          <SwapButtonTooltip {...mockProps} />
+        </GnoswapThemeProvider>
+      </JotaiProvider>,
+    );
+  });
+});

packages/web/src/components/swap/swap-button-tooltip/SwapButtonTooltip.stories.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import SwapButtonTooltip from "./SwapButtonTooltip";
+import { css, Theme } from "@emotion/react";
+import { dummySwapGasInfo } from "@containers/swap-container/SwapContainer";
+import Button, { ButtonHierarchy } from "@components/common/button/Button";
+
+export default {
+  title: "swap/SwapButtonTooltip",
+  component: SwapButtonTooltip,
+} as ComponentMeta<typeof SwapButtonTooltip>;
+
+const Template: ComponentStory<typeof SwapButtonTooltip> = args => (
+  <div css={wrapper}>
+    <div>
+      <SwapButtonTooltip {...args} />
+    </div>
+  </div>
+);
+
+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`
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  margin-top: 200px;
+`;

packages/web/src/components/swap/swap-button-tooltip/SwapButtonTooltip.styles.ts

@@ -0,0 +1,20 @@
+import styled from "@emotion/styled";
+import mixins from "@styles/mixins";
+import { fonts } from "@constants/font.constant";
+
+export const SwapButtonTooltipWrap = styled.div`
+  ${mixins.flexbox("column", "flex-start", "flex-start")};
+  width: 300px;
+  height: 123px
+  padding: 16px;
+  gap: 8px;
+  ${fonts.body12};
+  color: ${({ theme }) => theme.color.text15};
+  background-color: ${({ theme }) => theme.color.background14};
+
+  .tooltip-list {
+    ${mixins.flexbox("row", "flex-start", "space-between")};
+    width: 100%;
+    padding: 4px 0px;
+  }
+`;

packages/web/src/components/swap/swap-button-tooltip/SwapButtonTooltip.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { SwapButtonTooltipWrap } from "./SwapButtonTooltip.styles";
+import { SwapGasInfo } from "@containers/swap-container/SwapContainer";
+import Tooltip from "@components/common/tooltip/Tooltip";
+
+interface WalletBalanceDetailInfoProps {
+  swapGasInfo: SwapGasInfo;
+  children: React.ReactNode;
+}
+
+const SwapButtonTooltip: React.FC<WalletBalanceDetailInfoProps> = ({
+  swapGasInfo,
+  children,
+}) => {
+  const TooltipFloatingContent = (
+    <SwapButtonTooltipWrap>
+      <div className="tooltip-list">
+        <span>Price Impact</span>
+        <span>{swapGasInfo.gasFee}</span>
+      </div>
+      <div className="tooltip-list">
+        <span>Min. Received</span>
+        <span>{swapGasInfo.minReceived}</span>
+      </div>
+      <div className="tooltip-list">
+        <span>Gas Fee</span>
+        <span>{swapGasInfo.gasFee}</span>
+      </div>
+    </SwapButtonTooltipWrap>
+  );
+
+  return (
+    <Tooltip placement="top" FloatingContent={TooltipFloatingContent}>
+      {children}
+    </Tooltip>
+  );
+};
+export default SwapButtonTooltip;

packages/web/src/components/swap/swap-card-auto-router/SwapCardAutoRouter.spec.tsx

@@ -0,0 +1,47 @@
+import { render } from "@testing-library/react";
+import { Provider as JotaiProvider } from "jotai";
+import GnoswapThemeProvider from "@providers/gnoswap-theme-provider/GnoswapThemeProvider";
+import SwapCardAutoRouter from "./SwapCardAutoRouter";
+import {
+  dummyAutoRouterInfo,
+  dummySwapGasInfo,
+} from "@containers/swap-container/SwapContainer";
+import { DEVICE_TYPE } from "@styles/media";
+
+describe("SwapCard Component", () => {
+  it("SwapCard render", () => {
+    const mockProps = {
+      autoRouterInfo: dummyAutoRouterInfo,
+      from: {
+        token: "USDCoin",
+        symbol: "USDC",
+        amount: "121",
+        price: "$0.00",
+        gnosExchangePrice: "1250",
+        usdExchangePrice: "($1541.55)",
+        balance: "0",
+        tokenLogo:
+          "https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48/logo.png",
+      },
+      to: {
+        token: "HEX",
+        symbol: "HEX",
+        amount: "5000",
+        price: "$0.00",
+        gnosExchangePrice: "1250",
+        usdExchangePrice: "($1541.55)",
+        balance: "0",
+        tokenLogo:
+          "https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x2b591e99afE9f32eAA6214f7B7629768c40Eeb39/logo.png",
+      },
+    };
+
+    render(
+      <JotaiProvider>
+        <GnoswapThemeProvider>
+          <SwapCardAutoRouter {...mockProps} />
+        </GnoswapThemeProvider>
+      </JotaiProvider>,
+    );
+  });
+});