Merge pull request #695 from madfish-solutions/add-new-pool-creation-…

…card

[StableSwap] Add create new pool component

src/modules/stableswap/stableswap-liquidity/pages/list/components/index.ts

@@ -1,2 +1,3 @@
 export * from './pool-card';
 export * from './list-filter';
+export * from './stableswap-liquidity-general-stats';

src/modules/stableswap/stableswap-liquidity/pages/list/components/pool-creation/index.ts

@@ -0,0 +1 @@
+export * from './pool-creation';

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;
+  }
+}

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 (
+    <div className={cx(styles.createPool, modeClass[colorThemeMode])}>
+      <div className={cx(styles.poolCreateDescription, modeClass[colorThemeMode])}>{t('stableswap|createOwnPool')}</div>
+      <Button className={styles.button} href={`${AppRootRoutes.Stableswap}${StableswapRoutes.liquidity}${Tabs.add}`}>
+        {t('stableswap|createPool')}
+      </Button>
+    </div>
+  );
+};

src/modules/stableswap/stableswap-liquidity/pages/list/components/stableswap-liquidity-general-stats/index.ts

@@ -0,0 +1 @@
+export * from './stableswap-liquidity-general-stats';

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;
+  }
+}

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 = () => (
+  <DashboardStatsInfo
+    cards={[<Tvl />, <PoolCreation />]}
+    contentClassName={styles.cardContent}
+    className={styles.dashboardStatsInfoMB}
+  />
+);

src/modules/stableswap/stableswap-liquidity/pages/list/components/tvl/index.ts

@@ -0,0 +1 @@
+export * from './tvl';

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;
+  }
+}

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 (
+    <div className={styles.tvl}>
+      <div className={styles.tvlTitle}>{t('stableswap|tvl')}</div>
+      <StateCurrencyAmount amount={10000} currency="$" isLeftCurrency className={styles.amount} />
+    </div>
+  );
+};

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, StableswapLiquidityGeneralStats } 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(() => {
     <>
       <TestnetAlert />
       <PageTitle>{title}</PageTitle>
+      <StableswapLiquidityGeneralStats />
       <ListFilter />
       <StateWrapper isLoading={isLoading} loaderFallback={<></>}>
         <Iterator render={PoolCard} data={list ?? []} isGrouped wrapperClassName={styles.poolsList} />

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%;
   }

src/shared/components/dashboard-stats-info/dashboard-stats-info.tsx

@@ -15,18 +15,26 @@ interface Props {
   header?: string;
   cards: ReactElement[];
   countOfRightElements?: number;
+  contentClassName?: string;
+  className?: string;
 }
 
 const modeClass = {
   [ColorModes.Light]: styles.light,
   [ColorModes.Dark]: styles.dark
 };
 
-export const DashboardStatsInfo: FC<Props> = ({ cards, countOfRightElements = ZERO, header }) => {
+export const DashboardStatsInfo: FC<Props> = ({
+  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 elementsFlexBasis50 = countOfRightElements * TWO;
@@ -40,8 +48,8 @@ export const DashboardStatsInfo: FC<Props> = ({ cards, countOfRightElements = ZE
             }
           : undefined
       }
-      contentClassName={contentClassName}
-      className={styles.rootCard}
+      contentClassName={cx(rootContentClassName, contentClassName)}
+      className={cx(styles.rootCard, className)}
     >
       {cards.map((card: ReactElement, index: number) => (
         <div

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;