feat: modify form value validation, modify button navigation

DLC-link · Oct 22, 2024 · 402fd15 · 402fd15
1 parent bd056d0
commit 402fd15
Show file tree

Hide file tree

Showing 9 changed files with 83 additions and 24 deletions.
diff --git a/package.json b/package.json
@@ -46,7 +46,7 @@
     "concurrently": "^8.2.2",
     "d3": "^7.9.0",
     "decimal.js": "^10.4.3",
-    "dlc-btc-lib": "2.4.6",
+    "dlc-btc-lib": "2.4.7",
     "dotenv": "^16.3.1",
     "ethers": "5.7.2",
     "formik": "^2.4.5",

diff --git a/src/app/components/modals/successful-flow-modal/successful-flow-modal.tsx b/src/app/components/modals/successful-flow-modal/successful-flow-modal.tsx
@@ -36,8 +36,8 @@ export function SuccessfulFlowModal({
             {getModalText(flow, assetAmount)}
           </Text>
         </HStack>
-        <Vault vault={vault} />
-        <TransactionFormNavigateButtonGroup flow={flow} />
+        <Vault vault={vault} handleClose={handleClose} />
+        <TransactionFormNavigateButtonGroup flow={flow} handleClose={handleClose} />
       </VStack>
     </ModalVaultLayout>
   );

diff --git a/...transaction-form/components/transaction-screen.transaction-form.navigate-button-group.tsx b/...transaction-form/components/transaction-screen.transaction-form.navigate-button-group.tsx
@@ -8,10 +8,12 @@ import { TransactionFormNavigateButton } from './transaction-screen.transaction-
 
 interface TransactionFormNavigateButtonGroupProps {
   flow: 'mint' | 'burn';
+  handleClose?: () => void;
 }
 
 export function TransactionFormNavigateButtonGroup({
   flow,
+  handleClose,
 }: TransactionFormNavigateButtonGroupProps): React.JSX.Element {
   const navigate = useNavigate();
   const dispatch = useDispatch();
@@ -24,6 +26,17 @@ export function TransactionFormNavigateButtonGroup({
       dispatch(mintUnmintActions.setActiveTab(1));
       dispatch(mintUnmintActions.setUnmintStep([0, '']));
     }
+    navigate('/mint-withdraw');
+    if (handleClose) {
+      handleClose();
+    }
+  }
+
+  function handleNavigateToMyVaults() {
+    navigate('/my-vaults');
+    if (handleClose) {
+      handleClose();
+    }
   }
 
   return (
@@ -34,7 +47,7 @@ export function TransactionFormNavigateButtonGroup({
       />
       <TransactionFormNavigateButton
         label={'Show All Vaults'}
-        onClick={() => navigate('/my-vaults')}
+        onClick={() => handleNavigateToMyVaults()}
       />
     </ButtonGroup>
   );

diff --git a/...rm/components/transaction-screen.transaction-form/transaction-screen.transaction-form.tsx b/...rm/components/transaction-screen.transaction-form/transaction-screen.transaction-form.tsx
@@ -8,7 +8,6 @@ import { BitcoinTransactionConfirmationsContext } from '@providers/bitcoin-query
 import { BitcoinWalletContextState } from '@providers/bitcoin-wallet-context-provider';
 import { useForm } from '@tanstack/react-form';
 import Decimal from 'decimal.js';
-import { isEmpty } from 'ramda';
 
 import { TransactionFormNavigateButtonGroup } from './components/transaction-screen.transaction-form.navigate-button-group';
 import { TransactionFormProgressStack } from './components/transaction-screen.transaction-form.progress-stack/components/transaction-screen.transaction-form.progress-stack';
@@ -141,22 +140,31 @@ export function VaultTransactionForm({
     },
     validators: {
       onChange: ({ value }) => {
-        const assetAmount = value.assetAmount;
-        setCurrentFieldValue(isEmpty(assetAmount) ? 0 : new Decimal(value.assetAmount).toNumber());
+        const decimalValue = parseAssetAmount(value.assetAmount);
+        setCurrentFieldValue(decimalValue.toNumber());
+
         return {
           fields: {
-            assetAmount: validateFormAmount(
-              parseFloat(value.assetAmount),
-              flow,
-              depositLimit,
-              vault
-            ),
+            assetAmount: validateFormAmount(decimalValue.toNumber(), flow, depositLimit, vault),
           },
         };
       },
     },
   });
 
+  function parseAssetAmount(assetAmount: string): Decimal {
+    const isValidNumber = /^-?\d*\.?\d*$/.test(assetAmount);
+
+    if (isValidNumber) {
+      try {
+        return new Decimal(assetAmount);
+      } catch {
+        return new Decimal(0);
+      }
+    }
+    return new Decimal(0);
+  }
+
   return (
     <form
       onSubmit={async e => {

diff --git a/src/app/components/vault/components/vault.detaills/vault.details.tsx b/src/app/components/vault/components/vault.detaills/vault.details.tsx
@@ -19,6 +19,7 @@ interface VaultDetailsProps {
   vaultFundingTX?: string;
   vaultWithdrawDepositTX?: string;
   variant?: 'select' | 'selected';
+  handleClose?: () => void;
 }
 
 export function VaultDetails({
@@ -30,6 +31,7 @@ export function VaultDetails({
   vaultTotalMintedValue,
   isVaultExpanded,
   variant,
+  handleClose,
 }: VaultDetailsProps): React.JSX.Element {
   const navigate = useNavigate();
   const dispatch = useDispatch();
@@ -40,6 +42,9 @@ export function VaultDetails({
   function handleDepositClick() {
     navigate('/mint-withdraw');
     dispatch(mintUnmintActions.setMintStep([1, vaultUUID, vault]));
+    if (handleClose) {
+      handleClose();
+    }
   }
 
   function handleWithdrawClick() {
@@ -49,6 +54,9 @@ export function VaultDetails({
     } else {
       dispatch(mintUnmintActions.setUnmintStep([1, vaultUUID, vault]));
     }
+    if (handleClose) {
+      handleClose();
+    }
   }
 
   function handleResumeClick() {

diff --git a/src/app/components/vault/vault.tsx b/src/app/components/vault/vault.tsx
@@ -14,9 +14,10 @@ import { VaultProgressBar } from './components/vault.progress-bar';
 interface VaultProps {
   vault: VaultModel;
   variant?: 'select' | 'selected';
+  handleClose?: () => void;
 }
 
-export function Vault({ vault, variant }: VaultProps): React.JSX.Element {
+export function Vault({ vault, variant, handleClose }: VaultProps): React.JSX.Element {
   const dispatch = useDispatch();
   const [isVaultExpanded, setIsVaultExpanded] = useState(false);
 
@@ -53,6 +54,7 @@ export function Vault({ vault, variant }: VaultProps): React.JSX.Element {
         isVaultExpanded={isVaultExpanded}
         vaultFundingTX={vault.fundingTX}
         vaultWithdrawDepositTX={vault.withdrawDepositTX}
+        handleClose={handleClose}
       />
       <VaultProgressBar
         bitcoinTransactionConfirmations={confirmations}

diff --git a/src/app/hooks/use-confirmation-checker.ts b/src/app/hooks/use-confirmation-checker.ts
@@ -34,7 +34,12 @@ export function useConfirmationChecker(): [string, number][] {
     try {
       const bitcoinTransactionBlockHeight = await fetchBitcoinTransactionBlockHeight(vault);
 
-      return blockHeight - bitcoinTransactionBlockHeight;
+      const difference = blockHeight - bitcoinTransactionBlockHeight;
+      if (difference < 0) {
+        return 0;
+      } else {
+        return difference;
+      }
     } catch (error) {
       return 0;
     }

diff --git a/src/app/hooks/use-deposit-limits.ts b/src/app/hooks/use-deposit-limits.ts
@@ -1,6 +1,7 @@
 import { useContext } from 'react';
 
 import { EthereumNetworkConfigurationContext } from '@providers/ethereum-network-configuration.provider';
+import { NetworkConfigurationContext } from '@providers/network-configuration.provider';
 import { useQuery } from '@tanstack/react-query';
 import { unshiftValue } from 'dlc-btc-lib/utilities';
 import { BigNumber } from 'ethers';
@@ -10,9 +11,10 @@ interface UseDepositLimitsReturnType {
 }
 
 export function useDepositLimits(): UseDepositLimitsReturnType {
+  const { networkType } = useContext(NetworkConfigurationContext);
   const { ethereumNetworkConfiguration } = useContext(EthereumNetworkConfigurationContext);
 
-  async function fetchDepositLimit(): Promise<
+  async function fetchEVMDepositLimit(): Promise<
     { minimumDeposit: number; maximumDeposit: number } | undefined
   > {
     try {
@@ -32,13 +34,34 @@ export function useDepositLimits(): UseDepositLimitsReturnType {
     }
   }
 
-  const { data: depositLimit } = useQuery({
-    queryKey: ['depositLimit', ethereumNetworkConfiguration.dlcBTCContract.address],
-    queryFn: fetchDepositLimit,
+  async function fetchXRPLDepositLimit(): Promise<
+    { minimumDeposit: number; maximumDeposit: number } | undefined
+  > {
+    try {
+      return {
+        minimumDeposit: 0.01,
+        maximumDeposit: 5,
+      };
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error(`Error fetching deposit limits`, error);
+      return undefined;
+    }
+  }
+
+  const { data: evmDepositLimit } = useQuery({
+    queryKey: ['evmDepositLimit', ethereumNetworkConfiguration.dlcBTCContract.address],
+    queryFn: fetchEVMDepositLimit,
     enabled: !!ethereumNetworkConfiguration,
   });
 
+  const { data: xrplDepositLimit } = useQuery({
+    queryKey: ['xrplDepositLimit'],
+    queryFn: fetchXRPLDepositLimit,
+    enabled: networkType === 'xrpl',
+  });
+
   return {
-    depositLimit,
+    depositLimit: networkType === 'evm' ? evmDepositLimit : xrplDepositLimit,
   };
 }
diff --git a/yarn.lock b/yarn.lock
@@ -5195,10 +5195,10 @@ dir-glob@^3.0.1:
   dependencies:
     path-type "^4.0.0"
 
-[email protected].6:
-  version "2.4.6"
-  resolved "https://registry.yarnpkg.com/dlc-btc-lib/-/dlc-btc-lib-2.4.6.tgz#cea146d13cbb2ebb2df528287537df5deccab50d"
-  integrity sha512-eVbXNF2QZVDY2U9ZX/gVZAP9TqQafNdWsrP3O28P7AQlgdZGXibjND5xsN+6mOQZm6ywdsCI8ah531Yzt8haZg==
+[email protected].7:
+  version "2.4.7"
+  resolved "https://registry.yarnpkg.com/dlc-btc-lib/-/dlc-btc-lib-2.4.7.tgz#9b40484ebe6529bf89e43b721b8fb8380946bf3d"
+  integrity sha512-X+OLDd13tZFC4/PTos9ozFaW7PGRDEP9zWA6TnLGyyi5TeorBioI5X5yOx9OV709pFjbmti+4qqJ08d/oHIjtQ==
   dependencies:
     "@gemwallet/api" "3.8.0"
     "@ledgerhq/hw-app-btc" "10.4.1"