From fd4fb0a30ade47f64aba96762caee7b3a2e86c10 Mon Sep 17 00:00:00 2001 From: juntaepark <112064254+juntaepark@users.noreply.github.com> Date: Fri, 18 Aug 2023 12:16:12 +0900 Subject: [PATCH] feat: Develop swap pages components (#175) --- .../components/common/button/Button.spec.tsx | 2 +- .../components/common/button/Button.styles.ts | 2 + .../src/components/common/button/Button.tsx | 1 + .../src/components/common/icons/IconLink.tsx | 19 ++ .../src/components/common/icons/IconNote.tsx | 16 +- .../components/common/icons/IconRouter.tsx | 17 ++ .../common/icons/IconStrokeArrowDown.tsx | 9 +- .../common/icons/IconStrokeArrowUp.tsx | 9 +- .../components/common/icons/IconVector.tsx | 20 ++ .../supply-overview/SupplyOverview.styles.ts | 1 + .../supply-overview/SupplyOverview.tsx | 2 +- .../SwapButtonTooltip.spec.tsx | 23 ++ .../SwapButtonTooltip.stories.tsx | 44 ++++ .../SwapButtonTooltip.styles.ts | 20 ++ .../swap-button-tooltip/SwapButtonTooltip.tsx | 38 ++++ .../SwapCardAutoRouter.spec.tsx | 47 ++++ .../SwapCardAutoRouter.stories.tsx | 62 ++++++ .../SwapCardAutoRouter.styles.ts | 103 +++++++++ .../SwapCardAutoRouter.tsx | 115 ++++++++++ .../SwapCardContentDetail.spec.tsx | 51 +++++ .../SwapCardContentDetail.stories.tsx | 66 ++++++ .../SwapCardContentDetail.styles.ts | 208 ++++++++++++++++++ .../SwapCardContentDetail.tsx | 82 +++++++ .../SwapCardContent.spec.tsx | 51 +++++ .../SwapCardContent.stories.tsx | 66 ++++++ .../SwapCardContent.styles.ts | 104 +++++++++ .../swap-card-content/SwapCardContent.tsx | 114 ++++++++++ .../SwapCardFeeInfo.spec.tsx | 23 ++ .../SwapCardFeeInfo.stories.tsx | 38 ++++ .../SwapCardFeeInfo.styles.ts | 155 +++++++++++++ .../swap-card-fee-info/SwapCardFeeInfo.tsx | 56 +++++ .../swap-card-header/SwapCardHeader.spec.tsx | 18 ++ .../SwapCardHeader.stories.tsx | 32 +++ .../swap-card-header/SwapCardHeader.styles.ts | 27 +++ .../swap/swap-card-header/SwapCardHeader.tsx | 18 ++ .../swap/swap-card/SwapCard.spec.tsx | 57 +++++ .../swap/swap-card/SwapCard.stories.tsx | 72 ++++++ .../swap/swap-card/SwapCard.styles.ts | 32 +++ .../components/swap/swap-card/SwapCard.tsx | 124 +++++++++++ .../swap-liquidity/SwapLiquidity.spec.tsx | 21 ++ .../swap-liquidity/SwapLiquidity.stories.tsx | 36 +++ .../swap-liquidity/SwapLiquidity.styles.ts | 147 +++++++++++++ .../swap/swap-liquidity/SwapLiquidity.tsx | 76 +++++++ .../src/components/swap/swap/Swap.styles.ts | 6 - .../web/src/components/swap/swap/Swap.tsx | 8 - packages/web/src/constants/theme.constant.ts | 7 + .../swap-container/SwapContainer.tsx | 90 +++++++- .../SwapLiquidityContainer.tsx | 51 +++++ .../layouts/swap-layout/SwapLayout.styles.ts | 90 ++++++-- .../src/layouts/swap-layout/SwapLayout.tsx | 28 ++- packages/web/src/pages/swap.tsx | 2 + packages/web/src/styles/ThemeTypes.ts | 2 + 52 files changed, 2449 insertions(+), 59 deletions(-) create mode 100644 packages/web/src/components/common/icons/IconLink.tsx create mode 100644 packages/web/src/components/common/icons/IconRouter.tsx create mode 100644 packages/web/src/components/common/icons/IconVector.tsx create mode 100644 packages/web/src/components/swap/swap-button-tooltip/SwapButtonTooltip.spec.tsx create mode 100644 packages/web/src/components/swap/swap-button-tooltip/SwapButtonTooltip.stories.tsx create mode 100644 packages/web/src/components/swap/swap-button-tooltip/SwapButtonTooltip.styles.ts create mode 100644 packages/web/src/components/swap/swap-button-tooltip/SwapButtonTooltip.tsx create mode 100644 packages/web/src/components/swap/swap-card-auto-router/SwapCardAutoRouter.spec.tsx create mode 100644 packages/web/src/components/swap/swap-card-auto-router/SwapCardAutoRouter.stories.tsx create mode 100644 packages/web/src/components/swap/swap-card-auto-router/SwapCardAutoRouter.styles.ts create mode 100644 packages/web/src/components/swap/swap-card-auto-router/SwapCardAutoRouter.tsx create mode 100644 packages/web/src/components/swap/swap-card-content-detail/SwapCardContentDetail.spec.tsx create mode 100644 packages/web/src/components/swap/swap-card-content-detail/SwapCardContentDetail.stories.tsx create mode 100644 packages/web/src/components/swap/swap-card-content-detail/SwapCardContentDetail.styles.ts create mode 100644 packages/web/src/components/swap/swap-card-content-detail/SwapCardContentDetail.tsx create mode 100644 packages/web/src/components/swap/swap-card-content/SwapCardContent.spec.tsx create mode 100644 packages/web/src/components/swap/swap-card-content/SwapCardContent.stories.tsx create mode 100644 packages/web/src/components/swap/swap-card-content/SwapCardContent.styles.ts create mode 100644 packages/web/src/components/swap/swap-card-content/SwapCardContent.tsx create mode 100644 packages/web/src/components/swap/swap-card-fee-info/SwapCardFeeInfo.spec.tsx create mode 100644 packages/web/src/components/swap/swap-card-fee-info/SwapCardFeeInfo.stories.tsx create mode 100644 packages/web/src/components/swap/swap-card-fee-info/SwapCardFeeInfo.styles.ts create mode 100644 packages/web/src/components/swap/swap-card-fee-info/SwapCardFeeInfo.tsx create mode 100644 packages/web/src/components/swap/swap-card-header/SwapCardHeader.spec.tsx create mode 100644 packages/web/src/components/swap/swap-card-header/SwapCardHeader.stories.tsx create mode 100644 packages/web/src/components/swap/swap-card-header/SwapCardHeader.styles.ts create mode 100644 packages/web/src/components/swap/swap-card-header/SwapCardHeader.tsx create mode 100644 packages/web/src/components/swap/swap-card/SwapCard.spec.tsx create mode 100644 packages/web/src/components/swap/swap-card/SwapCard.stories.tsx create mode 100644 packages/web/src/components/swap/swap-card/SwapCard.styles.ts create mode 100644 packages/web/src/components/swap/swap-card/SwapCard.tsx create mode 100644 packages/web/src/components/swap/swap-liquidity/SwapLiquidity.spec.tsx create mode 100644 packages/web/src/components/swap/swap-liquidity/SwapLiquidity.stories.tsx create mode 100644 packages/web/src/components/swap/swap-liquidity/SwapLiquidity.styles.ts create mode 100644 packages/web/src/components/swap/swap-liquidity/SwapLiquidity.tsx delete mode 100644 packages/web/src/components/swap/swap/Swap.styles.ts delete mode 100644 packages/web/src/components/swap/swap/Swap.tsx create mode 100644 packages/web/src/containers/swap-liquidity-container/SwapLiquidityContainer.tsx diff --git a/packages/web/src/components/common/button/Button.spec.tsx b/packages/web/src/components/common/button/Button.spec.tsx index d77e818c6..c561990e7 100644 --- a/packages/web/src/components/common/button/Button.spec.tsx +++ b/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", }} /> diff --git a/packages/web/src/components/common/button/Button.styles.ts b/packages/web/src/components/common/button/Button.styles.ts index b755b9bcd..2d276982c 100644 --- a/packages/web/src/components/common/button/Button.styles.ts +++ b/packages/web/src/components/common/button/Button.styles.ts @@ -40,6 +40,7 @@ export const ButtonWrapper = styled.button` 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` ${({ 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"]; }}; `; diff --git a/packages/web/src/components/common/button/Button.tsx b/packages/web/src/components/common/button/Button.tsx index b28570600..285b7391b 100644 --- a/packages/web/src/components/common/button/Button.tsx +++ b/packages/web/src/components/common/button/Button.tsx @@ -12,6 +12,7 @@ interface ButtonProps { export enum ButtonHierarchy { Primary = "Primary", + Gray = "Gray", Dark = "Dark", } diff --git a/packages/web/src/components/common/icons/IconLink.tsx b/packages/web/src/components/common/icons/IconLink.tsx new file mode 100644 index 000000000..61036c8a6 --- /dev/null +++ b/packages/web/src/components/common/icons/IconLink.tsx @@ -0,0 +1,19 @@ +const IconLink = ({ className }: { className?: string }) => ( + + + +); + +export default IconLink; diff --git a/packages/web/src/components/common/icons/IconNote.tsx b/packages/web/src/components/common/icons/IconNote.tsx index 327505a11..af947fa1d 100644 --- a/packages/web/src/components/common/icons/IconNote.tsx +++ b/packages/web/src/components/common/icons/IconNote.tsx @@ -1,17 +1,17 @@ -const Icon = ({ className }: { className?: string }) => ( +const IconNote = ({ className }: { className?: string }) => ( ); -export default Icon; +export default IconNote; diff --git a/packages/web/src/components/common/icons/IconRouter.tsx b/packages/web/src/components/common/icons/IconRouter.tsx new file mode 100644 index 000000000..cddc63ca2 --- /dev/null +++ b/packages/web/src/components/common/icons/IconRouter.tsx @@ -0,0 +1,17 @@ +const IconRouter = ({ className }: { className?: string }) => ( + + + +); + +export default IconRouter; diff --git a/packages/web/src/components/common/icons/IconStrokeArrowDown.tsx b/packages/web/src/components/common/icons/IconStrokeArrowDown.tsx index 14137dbb1..c794aebeb 100644 --- a/packages/web/src/components/common/icons/IconStrokeArrowDown.tsx +++ b/packages/web/src/components/common/icons/IconStrokeArrowDown.tsx @@ -1,4 +1,10 @@ -const IconStrokeArrowDown = ({ className }: { className?: string }) => ( +const IconStrokeArrowDown = ({ + className, + onClick, +}: { + className?: string; + onClick?: () => void; +}) => ( ( fill="none" xmlns="http://www.w3.org/2000/svg" className={className} + onClick={onClick} > ( +const IconStrokeArrowUp = ({ + className, + onClick, +}: { + className?: string; + onClick?: () => void; +}) => ( ( fill="none" xmlns="http://www.w3.org/2000/svg" className={className} + onClick={onClick} > ( + + + +); + +export default IconVector; diff --git a/packages/web/src/components/dashboard/supply-overview/SupplyOverview.styles.ts b/packages/web/src/components/dashboard/supply-overview/SupplyOverview.styles.ts index 534fc351a..e98c287ec 100644 --- a/packages/web/src/components/dashboard/supply-overview/SupplyOverview.styles.ts +++ b/packages/web/src/components/dashboard/supply-overview/SupplyOverview.styles.ts @@ -36,6 +36,7 @@ export const SupplyInfoWrapper = styled.div` ${fonts.body10}; color: ${({ theme }) => theme.color.text04}; gap: 4px; + ${media.mobile} { ${fonts.body12} } diff --git a/packages/web/src/components/dashboard/supply-overview/SupplyOverview.tsx b/packages/web/src/components/dashboard/supply-overview/SupplyOverview.tsx index f929a7f2e..a64048e43 100644 --- a/packages/web/src/components/dashboard/supply-overview/SupplyOverview.tsx +++ b/packages/web/src/components/dashboard/supply-overview/SupplyOverview.tsx @@ -17,7 +17,7 @@ const SupplyOverview: React.FC = ({
-
Total Supply
+ Total Supply
{supplyOverviewInfo.totalSupply}
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 new file mode 100644 index 000000000..689360aff --- /dev/null +++ b/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:
+ + + ); +}; + +export default SwapCard; diff --git a/packages/web/src/components/swap/swap-liquidity/SwapLiquidity.spec.tsx b/packages/web/src/components/swap/swap-liquidity/SwapLiquidity.spec.tsx new file mode 100644 index 000000000..81dcf9445 --- /dev/null +++ b/packages/web/src/components/swap/swap-liquidity/SwapLiquidity.spec.tsx @@ -0,0 +1,21 @@ +import { render } from "@testing-library/react"; +import { Provider as JotaiProvider } from "jotai"; +import GnoswapThemeProvider from "@providers/gnoswap-theme-provider/GnoswapThemeProvider"; +import SwapLiquidity from "./SwapLiquidity"; +import { dummyLiquidityList } from "@containers/swap-liquidity-container/SwapLiquidityContainer"; + +describe("SwapLiquidity Component", () => { + it("SwapLiquidity render", () => { + const mockProps = { + liquiditys: dummyLiquidityList, + }; + + render( + + + + + , + ); + }); +}); diff --git a/packages/web/src/components/swap/swap-liquidity/SwapLiquidity.stories.tsx b/packages/web/src/components/swap/swap-liquidity/SwapLiquidity.stories.tsx new file mode 100644 index 000000000..0c9515a2b --- /dev/null +++ b/packages/web/src/components/swap/swap-liquidity/SwapLiquidity.stories.tsx @@ -0,0 +1,36 @@ +import React from "react"; +import { ComponentStory, ComponentMeta } from "@storybook/react"; +import SwapLiquidity from "./SwapLiquidity"; +import { dummyLiquidityList } from "@containers/swap-liquidity-container/SwapLiquidityContainer"; +import { css, Theme } from "@emotion/react"; + +export default { + title: "swap/SwapLiquidity", + component: SwapLiquidity, +} as ComponentMeta; + +const Template: ComponentStory = args => ( +
+
+ +
+
+); + +export const Default = Template.bind({}); +Default.args = { + liquiditys: dummyLiquidityList, +}; + +export const NoLiquidity = Template.bind({}); +NoLiquidity.args = { + liquiditys: [], +}; + +const wrapper = (theme: Theme) => css` + display: flex; + width: 100%; + align-items: center; + justify-content: center; + margin-top: 50px; +`; diff --git a/packages/web/src/components/swap/swap-liquidity/SwapLiquidity.styles.ts b/packages/web/src/components/swap/swap-liquidity/SwapLiquidity.styles.ts new file mode 100644 index 000000000..3c402cdc3 --- /dev/null +++ b/packages/web/src/components/swap/swap-liquidity/SwapLiquidity.styles.ts @@ -0,0 +1,147 @@ +import { fonts } from "@constants/font.constant"; +import styled from "@emotion/styled"; +import { media } from "@styles/media"; +import mixins from "@styles/mixins"; + +export const SwapLiquidityWrapper = styled.div` + ${mixins.flexbox("column", "flex-start", "flex-start")}; + width: 100%; + padding: 24px 0px; + gap: 24px; + ${media.mobile} { + padding: 16px 0px; + gap: 16px; + align-self: stretch; + } + + border-radius: 8px; + border: 1px solid ${({ theme }) => theme.color.border02}; + background: ${({ theme }) => theme.color.background01}; + box-shadow: 8px 8px 20px 0px rgba(0, 0, 0, 0.08); + + .box-header { + ${mixins.flexbox("row", "center", "flex-start")}; + width: 100%; + padding: 0px 24px; + gap: 8px; + color: ${({ theme }) => theme.color.text02}; + ${fonts.body7}; + ${media.mobile} { + padding: 0px 16px; + } + + .coin-pair { + ${mixins.flexbox("row", "flex-start", "flex-start")}; + + .gnos-image-wrapper { + ${mixins.flexbox("row", "center", "center")}; + background-color: ${({ theme }) => theme.color.point}; + width: 24px; + height: 24px; + border-radius: 100%; + } + .gnot-image-wrapper { + ${mixins.flexbox("row", "center", "center")}; + background-color: ${({ theme }) => theme.color.icon09}; + width: 24px; + height: 24px; + border-radius: 100%; + margin-left: -6px; + } + .coin-logo { + ${mixins.flexbox("row", "center", "flex-start")}; + width: 14.25px; + height: 14.25px; + flex-shrink: 0; + } + } + } + + .list-wrap { + ${mixins.flexbox("column", "flex-start", "flex-start")}; + width: 100%; + padding: 0px 24px; + gap: 16px; + ${media.mobile} { + padding: 0px 16px; + } + ${fonts.body12} + color: ${({ theme }) => theme.color.text04}; + } + + .liquidity-list { + ${mixins.flexbox("column", "flex-start", "flex-start")}; + color: ${({ theme }) => theme.color.text02}; + width: 100%; + gap: 4px; + align-self: stretch; + ${fonts.body12} + ${media.mobile} { + ${fonts.p2} + } + + .th { + ${mixins.flexbox("row", "flex-start", "flex-start")}; + width: 100%; + padding: 0px 24px; + align-self: stretch; + color: ${({ theme }) => theme.color.text04}; + ${media.mobile} { + padding: 0px 16px; + } + + .feetier { + flex: 1 0 0; + width: 100%; + } + .volume, + .liquidity, + .apr { + flex: 1 0 0; + text-align: right; + } + } + + .fee-info { + ${mixins.flexbox("row", "center", "flex-start")}; + width: 100%; + padding: 8px 24px; + gap: 8px; + align-self: stretch; + ${media.mobile} { + padding: 8px 16px; + } + &:hover { + background-color: ${({ theme }) => theme.color.background05Hover}; + } + + .badge-wrap { + ${mixins.flexbox("column", "flex-start", "flex-start")}; + flex: 1 0 0; + .badge { + ${fonts.body11} + ${media.mobile} { + ${fonts.p1} + } + ${mixins.flexbox("row", "center", "flex-end")}; + padding: 4px 6px; + gap: 4px; + color: ${({ theme }) => theme.color.text11}; + background-color: ${({ theme }) => theme.color.background13}; + border: 1px solid ${({ theme }) => theme.color.border02}; + border-radius: 4px; + } + } + .volume, + .liquidity, + .apr { + flex: 1 0 0; + text-align: right; + ${fonts.body12} + ${media.mobile} { + ${fonts.p2} + } + } + } + } +`; diff --git a/packages/web/src/components/swap/swap-liquidity/SwapLiquidity.tsx b/packages/web/src/components/swap/swap-liquidity/SwapLiquidity.tsx new file mode 100644 index 000000000..2c3a0624a --- /dev/null +++ b/packages/web/src/components/swap/swap-liquidity/SwapLiquidity.tsx @@ -0,0 +1,76 @@ +import IconLogoWhite from "@components/common/icons/IconLogoWhite"; +import React from "react"; +import { SwapLiquidityWrapper } from "./SwapLiquidity.styles"; +import Button, { ButtonHierarchy } from "@components/common/button/Button"; +import IconAdd from "@components/common/icons/IconAdd"; +import { + LiquidityInfo, + LIQUIDITY_HEAD, +} from "@containers/swap-liquidity-container/SwapLiquidityContainer"; + +interface SwapLiquidityProps { + liquiditys: LiquidityInfo[]; +} + +const SwapLiquidity: React.FC = ({ liquiditys }) => { + return ( + +
+
+
+ +
+
+ +
+
+ GNOS/GNOT +
+ {liquiditys.length === 0 ? ( +
+

+ No pools available for this pair. You will be the first to
+ add liquidity to this pair. +

+
+ ) : ( +
+
+ {Object.values(LIQUIDITY_HEAD).map((head, idx) => ( + + {head} + + ))} +
+ {liquiditys.map((liquidity, idx) => ( +
+ +
{liquidity.feeTier}
+ + {liquidity.volume} + {liquidity.liquidity} + {liquidity.apr} +
+ ))} +
+ )} + + ); +}; + +export default SwapLiquidity; diff --git a/packages/web/src/components/swap/swap/Swap.styles.ts b/packages/web/src/components/swap/swap/Swap.styles.ts deleted file mode 100644 index 4e27411d2..000000000 --- a/packages/web/src/components/swap/swap/Swap.styles.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { css, type Theme } from "@emotion/react"; - -export const wrapper = (theme: Theme) => css` - color: ${theme.color.text01}; - height: 100px; -`; diff --git a/packages/web/src/components/swap/swap/Swap.tsx b/packages/web/src/components/swap/swap/Swap.tsx deleted file mode 100644 index 013d49b25..000000000 --- a/packages/web/src/components/swap/swap/Swap.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import React from "react"; -import { wrapper } from "./Swap.styles"; - -const Swap: React.FC = () => { - return
Swap
; -}; - -export default Swap; diff --git a/packages/web/src/constants/theme.constant.ts b/packages/web/src/constants/theme.constant.ts index 8354a0c02..d97c9f8a9 100644 --- a/packages/web/src/constants/theme.constant.ts +++ b/packages/web/src/constants/theme.constant.ts @@ -49,6 +49,7 @@ const colors = { blackOpacity07BG: palette.blackOpacity07, gray600BG: palette.gray600, gray500BG: palette.gray500, + gray400BG: palette.gray400, gray200BG: palette.gray200, brand300Opacity03BG: palette.brand300Opacity03, whiteText1: palette.white, @@ -76,6 +77,8 @@ const colors = { whiteOpacity07BG: palette.whiteOpacity07, gray100BG: palette.gray100, gray200BG: palette.gray200, + gray300BG: palette.gray300, + gray400BG: palette.gray400, gray100Opacity05BG: palette.gray100Opacity, gray100Text1: palette.gray100, gray200Text1: palette.gray200, @@ -116,6 +119,7 @@ export const DARK_THEME_COLORS: ThemeColorType = { background14: colors.dark.brand900BG, background15: colors.dark.blackBG, background16: colors.dark.gray200BG, + background17: colors.dark.gray400BG, backgroundOpacity: colors.dark.blackOpacity07BG, backgroundOpacity2: colors.dark.blackOpacity07BG, backgroundGradient: colors.dark.gray600BG, @@ -154,6 +158,7 @@ export const DARK_THEME_COLORS: ThemeColorType = { text17: colors.dark.gray400Text5, text18: colors.dark.whiteText1, text19: colors.dark.gray100Text2, + text20: colors.dark.gray100Text2, icon01: colors.dark.gray100Icon2, icon02: colors.dark.gray200Icon3, icon03: colors.dark.gray400Icon5, @@ -190,6 +195,7 @@ export const LIGHT_THEME_COLORS: ThemeColorType = { background14: colors.global.brand700, background15: colors.white.gray100Opacity05BG, background16: colors.white.gray200BG, + background17: colors.white.gray400BG, backgroundOpacity: colors.white.gray100Opacity05BG, backgroundOpacity2: colors.white.whiteOpacity07BG, backgroundGradient: colors.white.gray100BG, @@ -228,6 +234,7 @@ export const LIGHT_THEME_COLORS: ThemeColorType = { text17: colors.white.gray200Text1, text18: colors.white.gray300Text1, text19: colors.white.gray400Text2, + text20: colors.global.white, icon01: colors.white.gray300Icon1, icon02: colors.white.gray300Icon1, icon03: colors.white.gray300Icon1, diff --git a/packages/web/src/containers/swap-container/SwapContainer.tsx b/packages/web/src/containers/swap-container/SwapContainer.tsx index b616c48dc..1bb1b7484 100644 --- a/packages/web/src/containers/swap-container/SwapContainer.tsx +++ b/packages/web/src/containers/swap-container/SwapContainer.tsx @@ -1,6 +1,90 @@ -import React from "react"; -import Swap from "@components/swap/swap/Swap"; +import React, { useCallback, useState } from "react"; +import SwapCard from "@components/swap/swap-card/SwapCard"; +import { useAtom } from "jotai"; +import { CommonState } from "@states/index"; -const SwapContainer: React.FC = () => ; +export interface SwapGasInfo { + priceImpact: string; + minReceived: string; + gasFee: string; + usdExchangeGasFee: string; +} + +export const dummySwapGasInfo: SwapGasInfo = { + priceImpact: "-0.3%", + minReceived: "1.8445 ETH", + gasFee: "0.002451 GNOT", + usdExchangeGasFee: "$0.12", +}; + +export interface AutoRouterInfo { + v1fee: string[]; + v2fee: string[]; + v3fee: string[]; +} + +export const dummyAutoRouterInfo: AutoRouterInfo = { + v1fee: ["60%", "0.05%", "0.01%"], + v2fee: ["35%", "0.01%"], + v3fee: ["5%", "0.3%"], +}; + +const SwapContainer: React.FC = () => { + const [keyword, setKeyword] = useState(""); + // eslint-disable-next-line @typescript-eslint/no-unused-vars + const [gnosAmount, setGnosAmount] = useState("1500"); + const [breakpoint] = useAtom(CommonState.breakpoint); + // eslint-disable-next-line @typescript-eslint/no-unused-vars + const [isConnected, setIsConnected] = useState(true); + const [autoRouter, setAutoRouter] = useState(false); + const [swapInfo, setSwapInfo] = useState(false); + const search = useCallback((e: React.ChangeEvent) => { + setKeyword(e.target.value); + }, []); + const showSwapInfo = () => { + setSwapInfo(prev => !prev); + }; + + const showAutoRouter = () => { + setAutoRouter(prev => !prev); + }; + return ( + + ); +}; export default SwapContainer; diff --git a/packages/web/src/containers/swap-liquidity-container/SwapLiquidityContainer.tsx b/packages/web/src/containers/swap-liquidity-container/SwapLiquidityContainer.tsx new file mode 100644 index 000000000..a69bae28c --- /dev/null +++ b/packages/web/src/containers/swap-liquidity-container/SwapLiquidityContainer.tsx @@ -0,0 +1,51 @@ +import SwapLiquidity from "@components/swap/swap-liquidity/SwapLiquidity"; +import React from "react"; +import { ValuesType } from "utility-types"; + +export interface LiquidityInfo { + feeTier: string; + volume: string; + liquidity: string; + apr: string; +} + +export const LIQUIDITY_HEAD = { + FEETIER: "Fee Tier", + VOLUME: "Volume (24h)", + LIQUIDITY: "Liquidity", + APR: "APR", +} as const; +export type LIQUIDITY_HEAD = ValuesType; + +export const dummyLiquidityList: LiquidityInfo[] = [ + { + feeTier: "0.01%", + volume: "$25.45M", + liquidity: "$25.45M", + apr: "245.24%", + }, + { + feeTier: "0.05%", + volume: "$15.45M", + liquidity: "$225.45M", + apr: "245.24%", + }, + { + feeTier: "0.3%", + volume: "-", + liquidity: "-", + apr: "-", + }, + { + feeTier: "1%", + volume: "-", + liquidity: "-", + apr: "-", + }, +]; + +const SwapLiquidityContainer: React.FC = () => { + return ; +}; + +export default SwapLiquidityContainer; diff --git a/packages/web/src/layouts/swap-layout/SwapLayout.styles.ts b/packages/web/src/layouts/swap-layout/SwapLayout.styles.ts index a85eb70f7..2f5437703 100644 --- a/packages/web/src/layouts/swap-layout/SwapLayout.styles.ts +++ b/packages/web/src/layouts/swap-layout/SwapLayout.styles.ts @@ -1,33 +1,83 @@ import { fonts } from "@constants/font.constant"; -import { css, Theme } from "@emotion/react"; +import styled from "@emotion/styled"; +import { media, ContainerWidth } from "@styles/media"; import mixins from "@styles/mixins"; -export const wrapper = (theme: Theme) => css` - .container { - border: 1px solid ${theme.color.green01}; - - ${mixins.flexbox("row", "flex-start", "space-between")}; - flex-wrap: wrap; +export const SwapLayoutWrapper = styled.div` + ${mixins.flexbox("column", "center", "flex-start")}; + width: 100%; + background-color: ${({ theme }) => theme.color.background01}; + .swap-section { + ${mixins.flexbox("column", "center", "flex-start")}; + max-width: ${ContainerWidth.WEB_SECTION_CONTAINER}; width: 100%; - max-width: 1440px; - margin: 100px auto; - padding: 0 40px; - - .page-name { - width: 100px; - ${fonts.h3}; - color: ${theme.color.text02}; + padding: 100px 0px; + ${media.tablet} { + max-width: ${ContainerWidth.TABLET_CONTAINER}; + padding: 60px 0px; + } + ${media.mobile} { + max-width: ${ContainerWidth.MOBILE_CONTAINER}; + width: 90%; + padding: 0px; } + } + .swap-container { + ${mixins.flexbox("column", "flex-start", "flex-start")}; + max-width: ${ContainerWidth.WEB_CONTAINER}; + width: 100%; + padding: 0px 40px; + ${media.tablet} { + align-self: stretch; + } + ${media.mobile} { + padding: 24px 16px 48px 16px; + gap: 24px; + } + } - .swap { - border: 1px solid ${theme.color.green01}; + .right-container { + ${mixins.flexbox("row", "flex-start", "flex-end")}; + width: 100%; + gap: 16px; + ${media.tablet} { + flex-direction: column; + align-items: center; + justify-content: flex-start; + } + ${media.mobile} { + gap: 8px; + align-items: center; + } + } - width: 500px; + .page-name { + ${fonts.h3}; + ${media.tablet} { + ${fonts.h4}; } + ${media.mobile} { + ${fonts.h5}; + } + color: ${({ theme }) => theme.color.text02}; + } - .empty { - width: 100px; + .swap { + ${mixins.flexbox("column", "flex-start", "flex-start")}; + max-width: 500px; + width: 100%; + gap: 16px; + ${media.mobile} { + gap: 8px; + align-items: center; + } + } + .liquidity { + max-width: 414px; + width: 100%; + ${media.tablet} { + max-width: 500px; } } `; diff --git a/packages/web/src/layouts/swap-layout/SwapLayout.tsx b/packages/web/src/layouts/swap-layout/SwapLayout.tsx index 8883ce8cf..b3ea85790 100644 --- a/packages/web/src/layouts/swap-layout/SwapLayout.tsx +++ b/packages/web/src/layouts/swap-layout/SwapLayout.tsx @@ -1,24 +1,32 @@ import React from "react"; -import { wrapper } from "./SwapLayout.styles"; +import { SwapLayoutWrapper } from "./SwapLayout.styles"; interface SwapLayoutProps { header: React.ReactNode; swap: React.ReactNode; + liquidity: React.ReactNode; footer: React.ReactNode; } -const SwapLayout: React.FC = ({ header, swap, footer }) => ( -
+const SwapLayout: React.FC = ({ + header, + swap, + liquidity, + footer, +}) => ( + {header} - -
-
Swap
-
{swap}
-
+
+
+
Swap
+
+
{swap}
+
{liquidity}
+
+
- {footer} -
+ ); export default SwapLayout; diff --git a/packages/web/src/pages/swap.tsx b/packages/web/src/pages/swap.tsx index 1d8f590c2..66f485c74 100644 --- a/packages/web/src/pages/swap.tsx +++ b/packages/web/src/pages/swap.tsx @@ -2,12 +2,14 @@ import SwapLayout from "@layouts/swap-layout/SwapLayout"; import HeaderContainer from "@containers/header-container/HeaderContainer"; import SwapContainer from "@containers/swap-container/SwapContainer"; import Footer from "@components/common/footer/Footer"; +import SwapLiquidityContainer from "@containers/swap-liquidity-container/SwapLiquidityContainer"; export default function Swap() { return ( } swap={} + liquidity={} footer={