feat: Develop Modal Components (#176)

gnoswap-labs · Aug 23, 2023 · 12247be · 12247be
1 parent fd4fb0a
commit 12247be
Show file tree

Hide file tree

Showing 33 changed files with 1,809 additions and 118 deletions.
diff --git a/packages/web/src/components/common/icons/IconCancel.tsx b/packages/web/src/components/common/icons/IconCancel.tsx
@@ -1,15 +1,15 @@
 const IconClose = ({ 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="17"
+    viewBox="0 0 16 17"
+    fill="none"
     className={className}
   >
     <path
-      d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z"
-      fill="white"
+      d="M12.6666 4.7735L11.7266 3.8335L7.99998 7.56016L4.27331 3.8335L3.33331 4.7735L7.05998 8.50016L3.33331 12.2268L4.27331 13.1668L7.99998 9.44016L11.7266 13.1668L12.6666 12.2268L8.93998 8.50016L12.6666 4.7735Z"
+      fill="#596782"
     />
   </svg>
 );

diff --git a/packages/web/src/components/common/icons/IconFailed.tsx b/packages/web/src/components/common/icons/IconFailed.tsx
@@ -0,0 +1,17 @@
+const IconFailed = ({ className }: { className?: string }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="72"
+    height="65"
+    viewBox="0 0 72 65"
+    fill="none"
+    className={className}
+  >
+    <path
+      d="M70.9426 52.7278L42.6863 3.86609C42.0099 2.69093 41.0356 1.71482 39.8618 1.03609C38.6879 0.357366 37.3559 0 36 0C34.6441 0 33.3121 0.357366 32.1382 1.03609C30.9644 1.71482 29.9901 2.69093 29.3137 3.86609L1.05741 52.7278C0.370996 53.897 0.0062032 55.227 7.84167e-05 56.5828C-0.00604636 57.9386 0.346715 59.2719 1.02254 60.4472C1.69837 61.6226 2.67319 62.5981 3.84801 63.2749C5.02284 63.9516 6.35583 64.3054 7.71161 64.3003H64.2884C65.6442 64.3054 66.9772 63.9516 68.152 63.2749C69.3268 62.5981 70.3016 61.6226 70.9775 60.4472C71.6533 59.2719 72.0061 57.9386 71.9999 56.5828C71.9938 55.227 71.629 53.897 70.9426 52.7278ZM33.4283 25.7253C33.4283 25.0432 33.6993 24.3891 34.1816 23.9068C34.6638 23.4246 35.318 23.1536 36 23.1536C36.682 23.1536 37.3362 23.4246 37.8184 23.9068C38.3007 24.3891 38.5717 25.0432 38.5717 25.7253V38.5836C38.5717 39.2657 38.3007 39.9198 37.8184 40.4021C37.3362 40.8844 36.682 41.1553 36 41.1553C35.318 41.1553 34.6638 40.8844 34.1816 40.4021C33.6993 39.9198 33.4283 39.2657 33.4283 38.5836V25.7253ZM36 54.0137C35.2371 54.0137 34.4912 53.7874 33.8569 53.3635C33.2225 52.9397 32.7281 52.3372 32.4361 51.6324C32.1442 50.9275 32.0678 50.1519 32.2166 49.4036C32.3655 48.6553 32.7328 47.968 33.2723 47.4285C33.8118 46.889 34.4992 46.5216 35.2474 46.3728C35.9957 46.2239 36.7713 46.3003 37.4762 46.5923C38.1811 46.8842 38.7835 47.3787 39.2074 48.013C39.6313 48.6474 39.8575 49.3932 39.8575 50.1562C39.8575 51.1792 39.4511 52.1604 38.7277 52.8838C38.0042 53.6072 37.0231 54.0137 36 54.0137Z"
+      fill="#0059FF"
+    />
+  </svg>
+);
+
+export default IconFailed;
diff --git a/packages/web/src/components/common/icons/IconSuccess.tsx b/packages/web/src/components/common/icons/IconSuccess.tsx
@@ -0,0 +1,19 @@
+const IconSuccess = ({ className }: { className?: string }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="72"
+    height="72"
+    viewBox="0 0 72 72"
+    fill="none"
+    className={className}
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M36 72C55.8823 72 72 55.8823 72 36C72 16.1177 55.8823 0 36 0C16.1177 0 0 16.1177 0 36C0 55.8823 16.1177 72 36 72ZM52.9713 30.4713C54.1429 29.2997 54.1429 27.4003 52.9713 26.2287C51.7997 25.0571 49.9003 25.0571 48.7287 26.2287L32.4 42.5574L23.7213 33.8787C22.5497 32.7071 20.6503 32.7071 19.4787 33.8787C18.3071 35.0503 18.3071 36.9497 19.4787 38.1213L30.2787 48.9213C30.8413 49.4839 31.6044 49.8 32.4 49.8C33.1956 49.8 33.9587 49.4839 34.5213 48.9213L52.9713 30.4713Z"
+      fill="#0059FF"
+    />
+  </svg>
+);
+
+export default IconSuccess;
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"
-      stroke-width="2"
-      stroke-miterlimit="3.8637"
-      stroke-dasharray="1 4"
+      strokeWidth="2"
+      strokeMiterlimit="3.8637"
+      strokeDasharray="1 4"
     />
   </svg>
 );

diff --git a/packages/web/src/components/common/tooltip/Tooltip.tsx b/packages/web/src/components/common/tooltip/Tooltip.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useRef, useState } from "react";
+import React, { CSSProperties, useMemo, useRef, useState } from "react";
 import {
   type Placement,
   useHover,
@@ -18,6 +18,7 @@ import {
 } from "@floating-ui/react";
 import { Content } from "./Tooltip.styles";
 import { useTheme } from "@emotion/react";
+import { Z_INDEX } from "@styles/zIndex";
 
 function useTooltip({ placement }: { placement: Placement }) {
   const [open, setOpen] = useState(false);
@@ -65,16 +66,17 @@ function useTooltip({ placement }: { placement: Placement }) {
     [open, setOpen, interactions, data],
   );
 }
-
 interface TooltipProps {
   placement: Placement;
   FloatingContent: React.ReactNode;
+  width?: CSSProperties["width"];
 }
 
 const Tooltip: React.FC<React.PropsWithChildren<TooltipProps>> = ({
   children,
   placement,
   FloatingContent,
+  width,
 }) => {
   const { open, refs, strategy, x, y, context, arrowRef } = useTooltip({
     placement,
@@ -91,6 +93,7 @@ const Tooltip: React.FC<React.PropsWithChildren<TooltipProps>> = ({
         data-state={open ? "open" : "closed"}
         style={{
           display: "flex",
+          width: width && width,
         }}
       >
         {children}
@@ -104,6 +107,7 @@ const Tooltip: React.FC<React.PropsWithChildren<TooltipProps>> = ({
               top: y ?? 0,
               left: x ?? 0,
               visibility: x == null ? "hidden" : "visible",
+              zIndex: Z_INDEX.modalTooltip,
             }}
           >
             <FloatingArrow

diff --git a/packages/web/src/components/swap/confirm-swap-modal/ConfirmSwapModal.spec.tsx b/packages/web/src/components/swap/confirm-swap-modal/ConfirmSwapModal.spec.tsx
@@ -0,0 +1,49 @@
+import ConfirmSwapModal from "./ConfirmSwapModal";
+import { render } from "@testing-library/react";
+import { Provider as JotaiProvider } from "jotai";
+import GnoswapThemeProvider from "@providers/gnoswap-theme-provider/GnoswapThemeProvider";
+import { dummySwapGasInfo } from "@containers/swap-container/SwapContainer";
+import { DEVICE_TYPE } from "@styles/media";
+
+describe("ConfirmSwapModal Component", () => {
+  it("should render", () => {
+    const mockProps = {
+      onConfirmModal: () => null,
+      submitSwap: () => null,
+      tolerance: "",
+      submit: false,
+      isFetched: false,
+      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",
+      },
+      swapGasInfo: dummySwapGasInfo,
+      breakpoint: DEVICE_TYPE.WEB,
+    };
+    render(
+      <JotaiProvider>
+        <GnoswapThemeProvider>
+          <ConfirmSwapModal {...mockProps} />
+        </GnoswapThemeProvider>
+      </JotaiProvider>,
+    );
+  });
+});
diff --git a/packages/web/src/components/swap/confirm-swap-modal/ConfirmSwapModal.stories.tsx b/packages/web/src/components/swap/confirm-swap-modal/ConfirmSwapModal.stories.tsx
@@ -0,0 +1,65 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { css } from "@emotion/react";
+import { action } from "@storybook/addon-actions";
+
+import ConfirmSwapModal from "./ConfirmSwapModal";
+import { dummySwapGasInfo } from "@containers/swap-container/SwapContainer";
+import { DEVICE_TYPE } from "@styles/media";
+
+export default {
+  title: "swap/ConfirmSwapModal",
+  component: ConfirmSwapModal,
+} as ComponentMeta<typeof ConfirmSwapModal>;
+
+const Template: ComponentStory<typeof ConfirmSwapModal> = args => (
+  <div css={wrapper}>
+    <div css={contentWrap}>
+      <ConfirmSwapModal {...args} />
+    </div>
+  </div>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  onConfirmModal: action("onConfirmModal"),
+  submitSwap: action("submitSwap"),
+  swapGasInfo: dummySwapGasInfo,
+  breakpoint: DEVICE_TYPE.WEB,
+  tolerance: "5",
+  submit: false,
+  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",
+  },
+};
+
+const wrapper = () => css`
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  margin-top: 50px;
+`;
+
+const contentWrap = () => css`
+  width: 500px;
+`;