block ui for 83 pool

madfish-solutions · Sep 27, 2023 · 72f5eab · 72f5eab · vercel · Sep 27, 2023
1 parent e8976c6
commit 72f5eab
Show file tree

Hide file tree

Showing 5 changed files with 93 additions and 12 deletions.
diff --git a/...modules/liquidity/pages/v3-item-page/components/open-new-position/create-new-position.tsx b/...modules/liquidity/pages/v3-item-page/components/open-new-position/create-new-position.tsx
@@ -1,8 +1,9 @@
 import { FC, useContext } from 'react';
 
 import cx from 'classnames';
-import { useLocation } from 'react-router-dom';
+import { useLocation, useParams } from 'react-router-dom';
 
+import { IS_NETWORK_MAINNET } from '@config/config';
 import { SLASH } from '@config/constants';
 import { ColorModes, ColorThemeContext } from '@providers/color-theme-context';
 import { Button, Card } from '@shared/components';
@@ -20,16 +21,51 @@ const modeClass = {
 export const OpenNewPosition: FC = () => {
   const { t } = useTranslation();
   const { colorThemeMode } = useContext(ColorThemeContext);
+
   const { pathname } = useLocation();
   const sanitizedPathname = `/${getRouterParts(pathname).join(SLASH)}`;
   const url = `${sanitizedPathname}${LiquidityRoutes.create}`;
 
+  const params = useParams();
+
+  const is83 = params?.id === '83' && IS_NETWORK_MAINNET;
+
   return (
-    <Card contentClassName={styles.content} className={cx(modeClass[colorThemeMode], styles.root)}>
-      <p className={styles.text}>{t('liquidity|induceToOpenNewPosition')}</p>
-      <Button className={styles.button} href={url}>
-        {t('liquidity|createPosition')}
-      </Button>
+    <Card
+      style={{
+        minHeight: is83 ? '88px' : 'auto'
+      }}
+      contentClassName={styles.content}
+      className={cx(modeClass[colorThemeMode], styles.root)}
+    >
+      {is83 ? (
+        <div
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            minHeight: '88px',
+            background: '#000',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            fontSize: '1.5rem',
+            color: 'rgba(255, 255, 0, 0.8)',
+            paddingLeft: 8
+          }}
+        >
+          <p>The deposits to the pool are paused.</p>
+        </div>
+      ) : (
+        <>
+          <p className={styles.text}>{t('liquidity|induceToOpenNewPosition')}</p>
+          <Button disabled className={styles.button} href={url}>
+            {t('liquidity|createPosition')}
+          </Button>
+        </>
+      )}
     </Card>
   );
 };
diff --git a/src/modules/liquidity/pages/v3-item-page/create-new-position.page.tsx b/src/modules/liquidity/pages/v3-item-page/create-new-position.page.tsx
@@ -6,15 +6,34 @@ import { OpenNewPositionForm, PageTitleContainer, PoolDetailsCreate, PositionFor
 import { useCreateNewPositionPageViewModel } from './use-create-new-position-page.vm';
 
 export const CreateNewPositionPage = observer(() => {
-  const { titleText, backHref, ...formProps } = useCreateNewPositionPageViewModel();
+  const { titleText, backHref, isBlocked, ...formProps } = useCreateNewPositionPageViewModel();
 
   return (
     <>
       <TestnetAlert />
       <PageTitleContainer dataTestId="v3LiqCreatePosition" titleText={titleText} />
       <StickyBlock>
         <PositionFormCard backHref={backHref}>
-          <OpenNewPositionForm {...formProps} />
+          {isBlocked ? (
+            <div
+              style={{
+                width: '100%',
+                height: '100%',
+                minHeight: '88px',
+                background: '#000',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                fontSize: '1.5rem',
+                color: 'rgba(255, 255, 0, 0.8)',
+                paddingLeft: 8
+              }}
+            >
+              <p>The deposits to the pool are paused.</p>
+            </div>
+          ) : (
+            <OpenNewPositionForm {...formProps} />
+          )}
         </PositionFormCard>
         <PoolDetailsCreate />
       </StickyBlock>

diff --git a/src/modules/liquidity/pages/v3-item-page/use-create-new-position-page.vm.ts b/src/modules/liquidity/pages/v3-item-page/use-create-new-position-page.vm.ts
@@ -2,6 +2,7 @@ import { useEffect, useMemo } from 'react';
 
 import BigNumber from 'bignumber.js';
 
+import { IS_NETWORK_MAINNET } from '@config/config';
 import { ZERO_AMOUNT_BN } from '@config/constants';
 import {
   useGetLiquidityV3ItemWithPositions,
@@ -109,6 +110,7 @@ export const useCreateNewPositionPageViewModel = () => {
     rangeInputsProps,
     titleText: t('liquidity|createPosition'),
     backHref,
-    warningMessages
+    warningMessages,
+    isBlocked: poolStore.poolId?.toFixed() === '83' && IS_NETWORK_MAINNET
   };
 };
diff --git a/src/modules/liquidity/pages/v3-item-page/use-v3-item-page.vm.ts b/src/modules/liquidity/pages/v3-item-page/use-v3-item-page.vm.ts
@@ -2,6 +2,7 @@ import { useEffect } from 'react';
 
 import { useParams } from 'react-router-dom';
 
+import { IS_NETWORK_MAINNET } from '@config/config';
 import {
   useLiquidityV3PoolStore,
   useLiquidityV3ItemTokens,
@@ -35,5 +36,5 @@ export const useV3ItemPageViewModel = () => {
     void v3PositionsStore.positionsStore.load();
   }, [getLiquidityV3ItemBalances, getLiquidityV3Pool, v3PositionsStore.positionsStore, poolId, tabId]);
 
-  return { isLoading, error, isAddLiqForm, tabId };
+  return { isLoading, error, isAddLiqForm, tabId, isBlocked: poolId?.toFixed() === '83' && IS_NETWORK_MAINNET };
 };
diff --git a/src/modules/liquidity/pages/v3-item-page/v3-item-page.tsx b/src/modules/liquidity/pages/v3-item-page/v3-item-page.tsx
@@ -15,7 +15,7 @@ import styles from './v3-item-page.module.scss';
 
 export const V3ItemPage: FC = observer(() => {
   const { t } = useTranslation();
-  const { isLoading, isAddLiqForm, tabId } = useV3ItemPageViewModel();
+  const { isLoading, isAddLiqForm, tabId, isBlocked } = useV3ItemPageViewModel();
 
   return (
     <>
@@ -28,7 +28,30 @@ export const V3ItemPage: FC = observer(() => {
       </StateWrapper>
       <StickyBlock>
         <LiquidityV3FormTabsCard tabActiveId={tabId}>
-          {isAddLiqForm ? <V3AddLiqForm /> : <V3RemoveLiqForm />}
+          {isAddLiqForm ? (
+            isBlocked ? (
+              <div
+                style={{
+                  width: '100%',
+                  height: '100%',
+                  minHeight: '88px',
+                  background: '#000',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  fontSize: '1.5rem',
+                  color: 'rgba(255, 255, 0, 0.8)',
+                  paddingLeft: 8
+                }}
+              >
+                <p>The deposits to the pool are paused.</p>
+              </div>
+            ) : (
+              <V3AddLiqForm />
+            )
+          ) : (
+            <V3RemoveLiqForm />
+          )}
         </LiquidityV3FormTabsCard>
         <PositionDetails />
       </StickyBlock>