From 188ecc7e2d25b58a7041feaf7baa5ca1f102257c Mon Sep 17 00:00:00 2001 From: Artem Date: Thu, 19 May 2022 20:08:04 +0300 Subject: [PATCH 1/4] Add create new pool component --- .../create-new-pool.module.scss | 148 ++++++++++++++++++ .../create-new-pool/create-new-pool.tsx | 34 ++++ .../list/components/create-new-pool/index.ts | 1 + .../pages/list/components/index.ts | 1 + .../list/stableswap-liquidity-list.page.tsx | 3 +- src/translation/locales/en/stable-swap.ts | 5 +- 6 files changed, 190 insertions(+), 2 deletions(-) create mode 100644 src/modules/stableswap/stableswap-liquidity/pages/list/components/create-new-pool/create-new-pool.module.scss create mode 100644 src/modules/stableswap/stableswap-liquidity/pages/list/components/create-new-pool/create-new-pool.tsx create mode 100644 src/modules/stableswap/stableswap-liquidity/pages/list/components/create-new-pool/index.ts diff --git a/src/modules/stableswap/stableswap-liquidity/pages/list/components/create-new-pool/create-new-pool.module.scss b/src/modules/stableswap/stableswap-liquidity/pages/list/components/create-new-pool/create-new-pool.module.scss new file mode 100644 index 000000000..390e30801 --- /dev/null +++ b/src/modules/stableswap/stableswap-liquidity/pages/list/components/create-new-pool/create-new-pool.module.scss @@ -0,0 +1,148 @@ +@import '@styles/variables'; +@import '@styles/breakpoints'; + +.cardRoot { + margin-bottom: 64px; +} + +.cardContent { + display: flex; + flex-direction: column; + align-items: center; + padding: 0; +} + +.poolCreateDescription { + font-weight: 600; + font-size: 14px; + line-height: 24px; + white-space: nowrap; + margin-bottom: 16px; +} + +.tvl, .createPool { + width: 100%; + padding: 24px; +} + +.tvl { + display: flex; + flex-direction: column; + align-items: center; +} + +.tvlTitle { + color: $text-03; + font-weight: 600; + font-size: 16px; + line-height: 24px; + margin-bottom: 8px; +} + +.amount { + font-weight: 600; + font-size: 18px; + line-height: 24px; +} + +.createPool { + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-end; +} + +.button { + max-width: 280px; +} + +.light { + &.poolCreateDescription { + color: $text-01; + } + + &.tvl { + border-bottom: .5px solid $ui-03; + } + + &.createPool { + border-top: .5px solid $ui-03; + } +} + +.dark { + &.poolCreateDescription { + color: $text-inverse; + } + + &.tvl { + border-bottom: .5px solid $text-01; + } + + &.createPool { + border-top: .5px solid $text-01; + } +} + +@include media('>tablet') { + .cardContent { + flex-direction: row; + } + + .tvl, .createPool { + height: 160px; + } + + .tvl { + justify-content: center; + } + + .amount { + font-size: 32px; + line-height: 48px; + } + + .createPool { + flex-direction: column; + justify-content: center; + } + + .button { + max-width: 160px; + margin-left: 24px; + } + + .light { + &.tvl { + border-right: .5px solid $ui-03; + border-bottom: none; + } + + &.createPool { + border-left: .5px solid $ui-03; + border-top: none; + } + } + + .dark { + &.tvl { + border-right: .5px solid $text-01; + border-bottom: none; + } + + &.createPool { + border-left: .5px solid $text-01; + border-top: none; + } + } +} + +@include media('>Ltablet') { + .createPool { + flex-direction: row; + } + + .poolCreateDescription { + margin-bottom: 0; + } +} diff --git a/src/modules/stableswap/stableswap-liquidity/pages/list/components/create-new-pool/create-new-pool.tsx b/src/modules/stableswap/stableswap-liquidity/pages/list/components/create-new-pool/create-new-pool.tsx new file mode 100644 index 000000000..174255969 --- /dev/null +++ b/src/modules/stableswap/stableswap-liquidity/pages/list/components/create-new-pool/create-new-pool.tsx @@ -0,0 +1,34 @@ +import { FC, useContext } from 'react'; + +import cx from 'classnames'; + +import { ColorThemeContext, ColorModes } from '@providers/color-theme-context'; +import { Button, Card, StateCurrencyAmount } from '@shared/components'; +import { useTranslation } from '@translation'; + +import styles from './create-new-pool.module.scss'; + +const modeClass = { + [ColorModes.Light]: styles.light, + [ColorModes.Dark]: styles.dark +}; + +export const CreateNewPool: FC = () => { + const { t } = useTranslation(['stableswap']); + const { colorThemeMode } = useContext(ColorThemeContext); + + return ( + +
+
{t('stableswap|tvl')}
+ +
+
+
+ {t('stableswap|createOwnPool')} +
+ +
+ + ); +}; diff --git a/src/modules/stableswap/stableswap-liquidity/pages/list/components/create-new-pool/index.ts b/src/modules/stableswap/stableswap-liquidity/pages/list/components/create-new-pool/index.ts new file mode 100644 index 000000000..aa09ade06 --- /dev/null +++ b/src/modules/stableswap/stableswap-liquidity/pages/list/components/create-new-pool/index.ts @@ -0,0 +1 @@ +export * from './create-new-pool'; diff --git a/src/modules/stableswap/stableswap-liquidity/pages/list/components/index.ts b/src/modules/stableswap/stableswap-liquidity/pages/list/components/index.ts index adc512636..f8fff9ac5 100644 --- a/src/modules/stableswap/stableswap-liquidity/pages/list/components/index.ts +++ b/src/modules/stableswap/stableswap-liquidity/pages/list/components/index.ts @@ -1,2 +1,3 @@ export * from './pool-card'; export * from './list-filter'; +export * from './create-new-pool'; diff --git a/src/modules/stableswap/stableswap-liquidity/pages/list/stableswap-liquidity-list.page.tsx b/src/modules/stableswap/stableswap-liquidity/pages/list/stableswap-liquidity-list.page.tsx index da5dd6448..3864c1fce 100644 --- a/src/modules/stableswap/stableswap-liquidity/pages/list/stableswap-liquidity-list.page.tsx +++ b/src/modules/stableswap/stableswap-liquidity/pages/list/stableswap-liquidity-list.page.tsx @@ -4,7 +4,7 @@ import { observer } from 'mobx-react-lite'; import { Iterator, PageTitle, StateWrapper, TestnetAlert } from '@shared/components'; -import { ListFilter, PoolCard } from './components'; +import { ListFilter, PoolCard, CreateNewPool } from './components'; import styles from './stableswap-liquidity-list.page.module.scss'; import { useStableswapLiquidityPageViewModel } from './use-stableswap-liquidity-list.page.vm'; @@ -15,6 +15,7 @@ export const StableswapLiquidityListPage: FC = observer(() => { <> {title} + }> diff --git a/src/translation/locales/en/stable-swap.ts b/src/translation/locales/en/stable-swap.ts index 4032b4ac5..4f538346c 100644 --- a/src/translation/locales/en/stable-swap.ts +++ b/src/translation/locales/en/stable-swap.ts @@ -1,4 +1,5 @@ export const stableswap = { + tvl: 'TVL', liquidityProvidersFee: 'Liquidity providers fee', 'Whitelisted Only': 'Whitelisted Only', 'Total LP Supply': 'Total LP Supply', @@ -7,5 +8,7 @@ export const stableswap = { 'Dev Fee': 'Dev Fee', 'Token {{tokenSymbol}} locked': 'Token {{tokenSymbol}} locked', balancedProportionAdd: 'Add all coins in a balanced proportion', - balancedProportionRemove: 'Remove all coins in a balanced proportion' + balancedProportionRemove: 'Remove all coins in a balanced proportion', + createPool: 'Create Pool', + createOwnPool: 'Can’t Find appropriate pool? Create Own!' } as const; From 785c9da2705bc0623c040f5e16486906d5cd8548 Mon Sep 17 00:00:00 2001 From: Artem Date: Mon, 23 May 2022 14:47:58 +0300 Subject: [PATCH 2/4] Add href to creation pool button --- .../list/components/create-new-pool/create-new-pool.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/modules/stableswap/stableswap-liquidity/pages/list/components/create-new-pool/create-new-pool.tsx b/src/modules/stableswap/stableswap-liquidity/pages/list/components/create-new-pool/create-new-pool.tsx index 174255969..8d2f6096d 100644 --- a/src/modules/stableswap/stableswap-liquidity/pages/list/components/create-new-pool/create-new-pool.tsx +++ b/src/modules/stableswap/stableswap-liquidity/pages/list/components/create-new-pool/create-new-pool.tsx @@ -2,6 +2,8 @@ import { FC, useContext } from 'react'; import cx from 'classnames'; +import { AppRootRoutes } from '@app.router'; +import { StableswapRoutes, Tabs } from '@modules/stableswap/stableswap.page'; import { ColorThemeContext, ColorModes } from '@providers/color-theme-context'; import { Button, Card, StateCurrencyAmount } from '@shared/components'; import { useTranslation } from '@translation'; @@ -27,7 +29,9 @@ export const CreateNewPool: FC = () => {
{t('stableswap|createOwnPool')}
- + ); From 32b39fe247b4978cdd106e7f3d4dfe0bdf01524c Mon Sep 17 00:00:00 2001 From: Artem Date: Tue, 24 May 2022 14:30:33 +0300 Subject: [PATCH 3/4] Add improvements, change structure --- .../create-new-pool.module.scss | 148 ------------------ .../create-new-pool/create-new-pool.tsx | 38 ----- .../list/components/create-new-pool/index.ts | 1 - .../pages/list/components/index.ts | 2 +- .../list/components/pool-creation/index.ts | 1 + .../pool-creation/pool-creation.module.scss | 56 +++++++ .../pool-creation/pool-creation.tsx | 30 ++++ .../index.ts | 1 + ...leswap-liquidity-general-stats.module.scss | 19 +++ .../stableswap-liquidity-general-stats.tsx | 15 ++ .../pages/list/components/tvl/index.ts | 1 + .../pages/list/components/tvl/tvl.module.scss | 31 ++++ .../pages/list/components/tvl/tvl.tsx | 17 ++ .../list/stableswap-liquidity-list.page.tsx | 4 +- .../dashboard-stats-info.module.scss | 8 +- .../dashboard-stats-info.tsx | 19 ++- 16 files changed, 191 insertions(+), 200 deletions(-) delete mode 100644 src/modules/stableswap/stableswap-liquidity/pages/list/components/create-new-pool/create-new-pool.module.scss delete mode 100644 src/modules/stableswap/stableswap-liquidity/pages/list/components/create-new-pool/create-new-pool.tsx delete mode 100644 src/modules/stableswap/stableswap-liquidity/pages/list/components/create-new-pool/index.ts create mode 100644 src/modules/stableswap/stableswap-liquidity/pages/list/components/pool-creation/index.ts create mode 100644 src/modules/stableswap/stableswap-liquidity/pages/list/components/pool-creation/pool-creation.module.scss create mode 100644 src/modules/stableswap/stableswap-liquidity/pages/list/components/pool-creation/pool-creation.tsx create mode 100644 src/modules/stableswap/stableswap-liquidity/pages/list/components/stableswap-liquidity-general-stats/index.ts create mode 100644 src/modules/stableswap/stableswap-liquidity/pages/list/components/stableswap-liquidity-general-stats/stableswap-liquidity-general-stats.module.scss create mode 100644 src/modules/stableswap/stableswap-liquidity/pages/list/components/stableswap-liquidity-general-stats/stableswap-liquidity-general-stats.tsx create mode 100644 src/modules/stableswap/stableswap-liquidity/pages/list/components/tvl/index.ts create mode 100644 src/modules/stableswap/stableswap-liquidity/pages/list/components/tvl/tvl.module.scss create mode 100644 src/modules/stableswap/stableswap-liquidity/pages/list/components/tvl/tvl.tsx diff --git a/src/modules/stableswap/stableswap-liquidity/pages/list/components/create-new-pool/create-new-pool.module.scss b/src/modules/stableswap/stableswap-liquidity/pages/list/components/create-new-pool/create-new-pool.module.scss deleted file mode 100644 index 390e30801..000000000 --- a/src/modules/stableswap/stableswap-liquidity/pages/list/components/create-new-pool/create-new-pool.module.scss +++ /dev/null @@ -1,148 +0,0 @@ -@import '@styles/variables'; -@import '@styles/breakpoints'; - -.cardRoot { - margin-bottom: 64px; -} - -.cardContent { - display: flex; - flex-direction: column; - align-items: center; - padding: 0; -} - -.poolCreateDescription { - font-weight: 600; - font-size: 14px; - line-height: 24px; - white-space: nowrap; - margin-bottom: 16px; -} - -.tvl, .createPool { - width: 100%; - padding: 24px; -} - -.tvl { - display: flex; - flex-direction: column; - align-items: center; -} - -.tvlTitle { - color: $text-03; - font-weight: 600; - font-size: 16px; - line-height: 24px; - margin-bottom: 8px; -} - -.amount { - font-weight: 600; - font-size: 18px; - line-height: 24px; -} - -.createPool { - display: flex; - flex-direction: column; - align-items: center; - justify-content: flex-end; -} - -.button { - max-width: 280px; -} - -.light { - &.poolCreateDescription { - color: $text-01; - } - - &.tvl { - border-bottom: .5px solid $ui-03; - } - - &.createPool { - border-top: .5px solid $ui-03; - } -} - -.dark { - &.poolCreateDescription { - color: $text-inverse; - } - - &.tvl { - border-bottom: .5px solid $text-01; - } - - &.createPool { - border-top: .5px solid $text-01; - } -} - -@include media('>tablet') { - .cardContent { - flex-direction: row; - } - - .tvl, .createPool { - height: 160px; - } - - .tvl { - justify-content: center; - } - - .amount { - font-size: 32px; - line-height: 48px; - } - - .createPool { - flex-direction: column; - justify-content: center; - } - - .button { - max-width: 160px; - margin-left: 24px; - } - - .light { - &.tvl { - border-right: .5px solid $ui-03; - border-bottom: none; - } - - &.createPool { - border-left: .5px solid $ui-03; - border-top: none; - } - } - - .dark { - &.tvl { - border-right: .5px solid $text-01; - border-bottom: none; - } - - &.createPool { - border-left: .5px solid $text-01; - border-top: none; - } - } -} - -@include media('>Ltablet') { - .createPool { - flex-direction: row; - } - - .poolCreateDescription { - margin-bottom: 0; - } -} diff --git a/src/modules/stableswap/stableswap-liquidity/pages/list/components/create-new-pool/create-new-pool.tsx b/src/modules/stableswap/stableswap-liquidity/pages/list/components/create-new-pool/create-new-pool.tsx deleted file mode 100644 index 8d2f6096d..000000000 --- a/src/modules/stableswap/stableswap-liquidity/pages/list/components/create-new-pool/create-new-pool.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import { FC, useContext } from 'react'; - -import cx from 'classnames'; - -import { AppRootRoutes } from '@app.router'; -import { StableswapRoutes, Tabs } from '@modules/stableswap/stableswap.page'; -import { ColorThemeContext, ColorModes } from '@providers/color-theme-context'; -import { Button, Card, StateCurrencyAmount } from '@shared/components'; -import { useTranslation } from '@translation'; - -import styles from './create-new-pool.module.scss'; - -const modeClass = { - [ColorModes.Light]: styles.light, - [ColorModes.Dark]: styles.dark -}; - -export const CreateNewPool: FC = () => { - const { t } = useTranslation(['stableswap']); - const { colorThemeMode } = useContext(ColorThemeContext); - - return ( - -
-
{t('stableswap|tvl')}
- -
-
-
- {t('stableswap|createOwnPool')} -
- -
- - ); -}; diff --git a/src/modules/stableswap/stableswap-liquidity/pages/list/components/create-new-pool/index.ts b/src/modules/stableswap/stableswap-liquidity/pages/list/components/create-new-pool/index.ts deleted file mode 100644 index aa09ade06..000000000 --- a/src/modules/stableswap/stableswap-liquidity/pages/list/components/create-new-pool/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './create-new-pool'; diff --git a/src/modules/stableswap/stableswap-liquidity/pages/list/components/index.ts b/src/modules/stableswap/stableswap-liquidity/pages/list/components/index.ts index f8fff9ac5..a01c6481b 100644 --- a/src/modules/stableswap/stableswap-liquidity/pages/list/components/index.ts +++ b/src/modules/stableswap/stableswap-liquidity/pages/list/components/index.ts @@ -1,3 +1,3 @@ export * from './pool-card'; export * from './list-filter'; -export * from './create-new-pool'; +export * from './stableswap-liquidity-general-stats'; diff --git a/src/modules/stableswap/stableswap-liquidity/pages/list/components/pool-creation/index.ts b/src/modules/stableswap/stableswap-liquidity/pages/list/components/pool-creation/index.ts new file mode 100644 index 000000000..633cc4538 --- /dev/null +++ b/src/modules/stableswap/stableswap-liquidity/pages/list/components/pool-creation/index.ts @@ -0,0 +1 @@ +export * from './pool-creation'; diff --git a/src/modules/stableswap/stableswap-liquidity/pages/list/components/pool-creation/pool-creation.module.scss b/src/modules/stableswap/stableswap-liquidity/pages/list/components/pool-creation/pool-creation.module.scss new file mode 100644 index 000000000..db837d31f --- /dev/null +++ b/src/modules/stableswap/stableswap-liquidity/pages/list/components/pool-creation/pool-creation.module.scss @@ -0,0 +1,56 @@ +@import '@styles/variables'; +@import '@styles/breakpoints'; + +.createPool { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 24px; +} + +.poolCreateDescription { + font-weight: 600; + font-size: 14px; + line-height: 24px; + white-space: nowrap; + margin-bottom: 16px; +} + +.button { + max-width: 280px; +} + +.light { + &.poolCreateDescription { + color: $text-01; + } +} + +.dark { + &.poolCreateDescription { + color: $text-inverse; + } +} + +@include media('>tablet') { + .createPool { + flex-direction: column; + height: 128px; + } + + .button { + max-width: 160px; + margin-left: 24px; + } +} + +@include media('>Ltablet') { + .createPool { + flex-direction: row; + } + + .poolCreateDescription { + margin-bottom: 0; + } +} diff --git a/src/modules/stableswap/stableswap-liquidity/pages/list/components/pool-creation/pool-creation.tsx b/src/modules/stableswap/stableswap-liquidity/pages/list/components/pool-creation/pool-creation.tsx new file mode 100644 index 000000000..f1594e065 --- /dev/null +++ b/src/modules/stableswap/stableswap-liquidity/pages/list/components/pool-creation/pool-creation.tsx @@ -0,0 +1,30 @@ +import { FC, useContext } from 'react'; + +import cx from 'classnames'; + +import { AppRootRoutes } from '@app.router'; +import { StableswapRoutes, Tabs } from '@modules/stableswap/stableswap.page'; +import { ColorThemeContext, ColorModes } from '@providers/color-theme-context'; +import { Button } from '@shared/components'; +import { useTranslation } from '@translation'; + +import styles from './pool-creation.module.scss'; + +const modeClass = { + [ColorModes.Light]: styles.light, + [ColorModes.Dark]: styles.dark +}; + +export const PoolCreation: FC = () => { + const { colorThemeMode } = useContext(ColorThemeContext); + const { t } = useTranslation('stableswap'); + + return ( +
+
{t('stableswap|createOwnPool')}
+ +
+ ); +}; diff --git a/src/modules/stableswap/stableswap-liquidity/pages/list/components/stableswap-liquidity-general-stats/index.ts b/src/modules/stableswap/stableswap-liquidity/pages/list/components/stableswap-liquidity-general-stats/index.ts new file mode 100644 index 000000000..bc22bd8eb --- /dev/null +++ b/src/modules/stableswap/stableswap-liquidity/pages/list/components/stableswap-liquidity-general-stats/index.ts @@ -0,0 +1 @@ +export * from './stableswap-liquidity-general-stats'; diff --git a/src/modules/stableswap/stableswap-liquidity/pages/list/components/stableswap-liquidity-general-stats/stableswap-liquidity-general-stats.module.scss b/src/modules/stableswap/stableswap-liquidity/pages/list/components/stableswap-liquidity-general-stats/stableswap-liquidity-general-stats.module.scss new file mode 100644 index 000000000..fb10dbb77 --- /dev/null +++ b/src/modules/stableswap/stableswap-liquidity/pages/list/components/stableswap-liquidity-general-stats/stableswap-liquidity-general-stats.module.scss @@ -0,0 +1,19 @@ +@import '@styles/variables'; +@import '@styles/breakpoints'; + +.dashboardStatsInfoMB { + margin-bottom: 64px; +} + +.cardContent { + display: flex; + flex-direction: column; + align-items: center; + padding: 0; +} + +@include media('>tablet') { + .cardContent { + flex-direction: row; + } +} diff --git a/src/modules/stableswap/stableswap-liquidity/pages/list/components/stableswap-liquidity-general-stats/stableswap-liquidity-general-stats.tsx b/src/modules/stableswap/stableswap-liquidity/pages/list/components/stableswap-liquidity-general-stats/stableswap-liquidity-general-stats.tsx new file mode 100644 index 000000000..3e051fe1a --- /dev/null +++ b/src/modules/stableswap/stableswap-liquidity/pages/list/components/stableswap-liquidity-general-stats/stableswap-liquidity-general-stats.tsx @@ -0,0 +1,15 @@ +import { FC } from 'react'; + +import { DashboardStatsInfo } from '@shared/components'; + +import { PoolCreation } from '../pool-creation'; +import { Tvl } from '../tvl'; +import styles from './stableswap-liquidity-general-stats.module.scss'; + +export const StableswapLiquidityGeneralStats: FC = () => ( + , ]} + contentClassName={styles.cardContent} + className={styles.dashboardStatsInfoMB} + /> +); diff --git a/src/modules/stableswap/stableswap-liquidity/pages/list/components/tvl/index.ts b/src/modules/stableswap/stableswap-liquidity/pages/list/components/tvl/index.ts new file mode 100644 index 000000000..b7aea6bac --- /dev/null +++ b/src/modules/stableswap/stableswap-liquidity/pages/list/components/tvl/index.ts @@ -0,0 +1 @@ +export * from './tvl'; diff --git a/src/modules/stableswap/stableswap-liquidity/pages/list/components/tvl/tvl.module.scss b/src/modules/stableswap/stableswap-liquidity/pages/list/components/tvl/tvl.module.scss new file mode 100644 index 000000000..d86779933 --- /dev/null +++ b/src/modules/stableswap/stableswap-liquidity/pages/list/components/tvl/tvl.module.scss @@ -0,0 +1,31 @@ +@import '@styles/variables'; +@import '@styles/breakpoints'; + +.tvl { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 24px; +} + +.tvlTitle { + color: $text-03; + font-weight: 600; + font-size: 16px; + line-height: 24px; + margin-bottom: 8px; +} + +.amount { + font-weight: 600; + font-size: 18px; + line-height: 24px; +} + +@include media('>tablet') { + .amount { + font-size: 32px; + line-height: 48px; + } +} diff --git a/src/modules/stableswap/stableswap-liquidity/pages/list/components/tvl/tvl.tsx b/src/modules/stableswap/stableswap-liquidity/pages/list/components/tvl/tvl.tsx new file mode 100644 index 000000000..1e10f9719 --- /dev/null +++ b/src/modules/stableswap/stableswap-liquidity/pages/list/components/tvl/tvl.tsx @@ -0,0 +1,17 @@ +import { FC } from 'react'; + +import { StateCurrencyAmount } from '@shared/components'; +import { useTranslation } from '@translation'; + +import styles from './tvl.module.scss'; + +export const Tvl: FC = () => { + const { t } = useTranslation('stableswap'); + + return ( +
+
{t('stableswap|tvl')}
+ +
+ ); +}; diff --git a/src/modules/stableswap/stableswap-liquidity/pages/list/stableswap-liquidity-list.page.tsx b/src/modules/stableswap/stableswap-liquidity/pages/list/stableswap-liquidity-list.page.tsx index 3864c1fce..e52d122bf 100644 --- a/src/modules/stableswap/stableswap-liquidity/pages/list/stableswap-liquidity-list.page.tsx +++ b/src/modules/stableswap/stableswap-liquidity/pages/list/stableswap-liquidity-list.page.tsx @@ -4,7 +4,7 @@ import { observer } from 'mobx-react-lite'; import { Iterator, PageTitle, StateWrapper, TestnetAlert } from '@shared/components'; -import { ListFilter, PoolCard, CreateNewPool } from './components'; +import { ListFilter, PoolCard, StableswapLiquidityGeneralStats } from './components'; import styles from './stableswap-liquidity-list.page.module.scss'; import { useStableswapLiquidityPageViewModel } from './use-stableswap-liquidity-list.page.vm'; @@ -15,7 +15,7 @@ export const StableswapLiquidityListPage: FC = observer(() => { <> {title} - + }> diff --git a/src/shared/components/dashboard-stats-info/dashboard-stats-info.module.scss b/src/shared/components/dashboard-stats-info/dashboard-stats-info.module.scss index 9c0962f79..734bb53fc 100644 --- a/src/shared/components/dashboard-stats-info/dashboard-stats-info.module.scss +++ b/src/shared/components/dashboard-stats-info/dashboard-stats-info.module.scss @@ -8,7 +8,7 @@ } .root { - flex-direction: column; + flex-wrap: wrap; .light { border-top: .5px solid $ui-03; @@ -40,6 +40,7 @@ } .card { + width: 100%; flex-basis: 100%; flex-shrink: 0; white-space: nowrap; @@ -54,11 +55,6 @@ } @include media(">Lphone") { - .root { - flex-direction: row; - flex-wrap: wrap; - } - .leftCard { flex-basis: 50%; } diff --git a/src/shared/components/dashboard-stats-info/dashboard-stats-info.tsx b/src/shared/components/dashboard-stats-info/dashboard-stats-info.tsx index ff0de7521..7d17ef75a 100644 --- a/src/shared/components/dashboard-stats-info/dashboard-stats-info.tsx +++ b/src/shared/components/dashboard-stats-info/dashboard-stats-info.tsx @@ -15,6 +15,8 @@ interface Props { header?: string; cards: ReactElement[]; countOfRightElements?: number; + contentClassName?: string; + className?: string; } const modeClass = { @@ -22,13 +24,22 @@ const modeClass = { [ColorModes.Dark]: styles.dark }; -export const DashboardStatsInfo: FC = ({ cards, countOfRightElements = ZERO, header }) => { +export const DashboardStatsInfo: FC = ({ + cards, + countOfRightElements = ZERO, + header, + contentClassName, + className +}) => { const { colorThemeMode } = useContext(ColorThemeContext); const { isRightElement, isFlexEndRightElement, computedClassName } = useDashboardStatsInfoViewModel(); - const contentClassName = countOfRightElements ? styles.rootWithRightColumn : styles.root; + const rootContentClassName = countOfRightElements ? styles.rootWithRightColumn : styles.root; const cardClassName = cx(styles.card, modeClass[colorThemeMode]); + const cardComponentClassName = cx(styles.rootCard, className); + const contentCardComponentClassName = cx(rootContentClassName, contentClassName); + const elementsFlexBasis50 = countOfRightElements * TWO; return ( @@ -40,8 +51,8 @@ export const DashboardStatsInfo: FC = ({ cards, countOfRightElements = ZE } : undefined } - contentClassName={contentClassName} - className={styles.rootCard} + contentClassName={contentCardComponentClassName} + className={cardComponentClassName} > {cards.map((card: ReactElement, index: number) => (
Date: Tue, 24 May 2022 14:56:01 +0300 Subject: [PATCH 4/4] Fixes after review --- .../dashboard-stats-info/dashboard-stats-info.tsx | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/shared/components/dashboard-stats-info/dashboard-stats-info.tsx b/src/shared/components/dashboard-stats-info/dashboard-stats-info.tsx index 7d17ef75a..44fa4c8ed 100644 --- a/src/shared/components/dashboard-stats-info/dashboard-stats-info.tsx +++ b/src/shared/components/dashboard-stats-info/dashboard-stats-info.tsx @@ -37,9 +37,6 @@ export const DashboardStatsInfo: FC = ({ const rootContentClassName = countOfRightElements ? styles.rootWithRightColumn : styles.root; const cardClassName = cx(styles.card, modeClass[colorThemeMode]); - const cardComponentClassName = cx(styles.rootCard, className); - const contentCardComponentClassName = cx(rootContentClassName, contentClassName); - const elementsFlexBasis50 = countOfRightElements * TWO; return ( @@ -51,8 +48,8 @@ export const DashboardStatsInfo: FC = ({ } : undefined } - contentClassName={contentCardComponentClassName} - className={cardComponentClassName} + contentClassName={cx(rootContentClassName, contentClassName)} + className={cx(styles.rootCard, className)} > {cards.map((card: ReactElement, index: number) => (