add some add liqudity form fixes

package.json

@@ -113,6 +113,6 @@
     ]
   },
   "engines": {
-    "node": "^19"
+    "node": "^20"
   }
 }

src/components/AddLiquidityForm/AddLiquidityForm.tsx

@@ -40,6 +40,9 @@ import { useNetworkAsset } from '../../gateway/api/networkAsset';
 import { deposit } from '../../gateway/api/operations/deposit';
 import { useHandleDepositMaxButtonClick } from '../../gateway/api/useHandleDepositMaxButtonClick';
 import { useDepositValidators } from '../../gateway/api/validationFees';
+import { useSelectedNetwork } from '../../gateway/common/network.ts';
+import { CardanoAmmPool } from '../../network/cardano/api/ammPools/CardanoAmmPool.ts';
+import { MIN_CREATE_POOL_LIQUIDITY } from '../../network/cardano/api/operations/createPool.tsx';
 import { PoolFeeTag } from '../../pages/PoolOverview/PoolInfoView/PoolFeeTag/PoolFeeTag.tsx';
 import { mapToDepositAnalyticsProps } from '../../utils/analytics/mapper';
 import { AssetPairTitle } from '../AssetPairTitle/AssetPairTitle.tsx';
@@ -51,6 +54,7 @@ import {
 import { Section } from '../Section/Section';
 import { AddLiquidityFormModel } from './AddLiquidityFormModel';
 import { LiquidityPercentInput } from './LiquidityPercentInput/LiquidityPercentInput';
+import { LowLiquidityWarning } from './LowLiquidityWarning/LowLiquidityWarning.tsx';
 
 export interface AddLiquidityFormProps {
   readonly initialPoolId?: string;
@@ -64,6 +68,18 @@ export interface AddLiquidityFormProps {
   readonly withoutConfirmation?: boolean;
 }
 
+const isPoolLiquidityIsLow = (
+  pool: AmmPool,
+  networkAsset: AssetInfo,
+): boolean => {
+  const adaAsset = pool.x.isAssetEquals(networkAsset) ? pool.x : pool.y;
+
+  return (
+    !(pool as CardanoAmmPool).pool.lqBound &&
+    adaAsset.mult(2n).lt(MIN_CREATE_POOL_LIQUIDITY)
+  );
+};
+
 const getYAssets = (fromAsset?: string) =>
   fromAsset ? getDefaultAssetsFor(fromAsset) : defaultTokenAssets$;
 
@@ -100,9 +116,12 @@ export const AddLiquidityForm: FC<AddLiquidityFormProps> = ({
   const [lastEditedField, setLastEditedField] = useState<'x' | 'y'>('x');
   const [balance] = useAssetsBalance();
   const [networkAsset] = useNetworkAsset();
+  const [selectedNetwork] = useSelectedNetwork();
   const _handleDepositMaxButtonClick = useHandleDepositMaxButtonClick();
   const depositValidators = useDepositValidators();
   const [allAmmPools, allAmmPoolsLoading] = useObservable(ammPools$);
+  const [isDepositWarningVisible, setIsDepositWarningVisible] =
+    useState<boolean>(false);
 
   const updateToAssets$ = useMemo(
     () => new BehaviorSubject<string | undefined>(undefined),
@@ -231,6 +250,13 @@ export const AddLiquidityForm: FC<AddLiquidityFormProps> = ({
         return;
       }
 
+      if (
+        selectedNetwork.name !== 'ergo' &&
+        isPoolLiquidityIsLow(pool, networkAsset)
+      ) {
+        setIsDepositWarningVisible(true);
+      }
+
       if (lastEditedField === 'x' && x && x.isPositive()) {
         form.controls.y.patchValue(pool.calculateDepositAmount(x), {
           emitEvent: 'silent',
@@ -346,6 +372,7 @@ export const AddLiquidityForm: FC<AddLiquidityFormProps> = ({
       onSubmit={addLiquidityAction}
       validators={validators}
       actionCaption={t`Add Liquidity`}
+      isWarningButton={isDepositWarningVisible}
       traceFormLocation={traceFormLocation}
     >
       <Section
@@ -412,6 +439,11 @@ export const AddLiquidityForm: FC<AddLiquidityFormProps> = ({
         </Flex>
       </Section>
       {children}
+      {isDepositWarningVisible && (
+        <Flex.Item marginTop={4}>
+          <LowLiquidityWarning />
+        </Flex.Item>
+      )}
     </OperationForm>
   );
 };

src/components/AddLiquidityForm/LowLiquidityWarning/LowLiquidityWarning.tsx

@@ -0,0 +1,28 @@
+import { CloseCircleFilled, Flex, Tag, Typography } from '@ergolabs/ui-kit';
+import { FC } from 'react';
+import styled from 'styled-components';
+
+const _LowLiquidityWarning: FC<{ className?: string }> = ({ className }) => (
+  <Tag color="error" className={className}>
+    <Flex width="100%">
+      <Flex.Item marginRight={2}>
+        <CloseCircleFilled
+          style={{ fontSize: 16, position: 'relative', top: '4px' }}
+        />
+      </Flex.Item>
+      <Typography.Body>
+        Note that there is little liquidity in this pool and the price may
+        change right before you add liquidity. This could cause you to lose a
+        significant portion of your assets permanently.
+      </Typography.Body>
+    </Flex>
+  </Tag>
+);
+
+export const LowLiquidityWarning = styled(_LowLiquidityWarning)`
+  padding: calc(var(--spectrum-base-gutter) * 2)
+    calc(var(--spectrum-base-gutter) * 4);
+  text-align: justify;
+  text-wrap: initial;
+  width: 100%;
+`;

src/network/cardano/api/operations/createPool.tsx

@@ -255,7 +255,10 @@ export const createPool = (
   return subject.asObservable();
 };
 
-const MIN_CREATE_POOL_LIQUIDITY = new Currency('500', networkAsset);
+export const MIN_CREATE_POOL_LIQUIDITY = new Currency(
+  10000000000n,
+  networkAsset,
+);
 
 export const useCreatePoolValidators =
   (): OperationValidator<CreatePoolFormModel>[] => {