refactor getAmountToreceive

massalabs · Jun 11, 2024 · 7608567 · 7608567
1 parent 76b5804
commit 7608567
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 21 deletions.
diff --git a/src/pages/ClaimPage/InitClaim/InitClaim.tsx b/src/pages/ClaimPage/InitClaim/InitClaim.tsx
@@ -1,9 +1,5 @@
 import { useEffect } from 'react';
-import {
-  Button,
-  formatAmount,
-  removeTrailingZeros,
-} from '@massalabs/react-ui-kit';
+import { Button, formatAmount, formatFTAmount } from '@massalabs/react-ui-kit';
 
 import { useAccount, useSwitchChain } from 'wagmi';
 import { handleEvmClaimError } from '../../../custom/bridge/handlers/handleTransactionErrors';
@@ -20,7 +16,7 @@ import { getAmountToReceive } from '@/utils/utils';
 interface InitClaimProps {
   operation: BurnRedeemOperation;
   symbol: string;
-  decimals?: number;
+  decimals: number;
   onUpdate: (op: Partial<BurnRedeemOperation>) => void;
 }
 
@@ -34,13 +30,21 @@ export function InitClaim(props: InitClaimProps) {
 
   const serviceFee = CHAIN_ID_TO_SERVICE_FEE[operation.evmChainId];
 
-  const amountRedeemedFull = getAmountToReceive(
-    formatAmount(operation.amount, decimals).amountFormattedFull,
+  const formatedOperationAmount = formatAmount(
+    operation.amount,
+    decimals,
+  ).amountFormattedFull;
+
+  const receivedAmount = getAmountToReceive(
+    formatedOperationAmount,
     serviceFee,
     decimals,
   );
 
-  const amountRedeemedPreview = removeTrailingZeros(amountRedeemedFull);
+  const {
+    amountFormattedPreview: amountRedeemedPreview,
+    amountFormattedFull: amountRedeemedFull,
+  } = formatFTAmount(receivedAmount, decimals);
 
   const claimState = operation.claimState;
   const isChainIncompatible = chainId !== operation.evmChainId;

diff --git a/src/pages/IndexPage/Layouts/BridgeRedeemLayout/BridgeRedeemLayout.tsx b/src/pages/IndexPage/Layouts/BridgeRedeemLayout/BridgeRedeemLayout.tsx
@@ -5,6 +5,7 @@ import {
   Money,
   formatAmount,
   formatAmountToDisplay,
+  formatFTAmount,
   removeTrailingZeros,
 } from '@massalabs/react-ui-kit';
 import Big from 'big.js';
@@ -58,6 +59,7 @@ export function BridgeRedeemLayout(props: BridgeRedeemProps) {
     setOutputAmount,
   } = useOperationStore();
   const { isFetching } = useAccountStore();
+
   const { selectedToken: token } = useTokenStore();
   const { serviceFee } = useServiceFee();
 
@@ -90,8 +92,14 @@ export function BridgeRedeemLayout(props: BridgeRedeemProps) {
     const res = x.times(y).round(token.decimals).toFixed();
 
     setInputAmount(res);
+    const amountToReceive = getAmountToReceive(
+      res,
+      serviceFee,
+      token?.decimals,
+    );
+
     setOutputAmount(
-      getAmountToReceive(res, serviceFee, token?.decimals, false),
+      formatFTAmount(amountToReceive, token.decimals).amountFormattedFull,
     );
   }
 
@@ -109,10 +117,25 @@ export function BridgeRedeemLayout(props: BridgeRedeemProps) {
   if (isOperationPending) return <PendingOperationLayout />;
 
   function changeAmount(amount: string) {
+    if (!token) return;
     setInputAmount(amount);
-    setOutputAmount(
-      getAmountToReceive(amount, serviceFee, token?.decimals, false),
-    );
+    if (!amount) {
+      setOutputAmount('');
+    } else {
+      const amountToReceive = getAmountToReceive(
+        amount,
+        serviceFee,
+        token.decimals,
+      );
+
+      // replace trailing zeros
+      setOutputAmount(
+        formatFTAmount(
+          amountToReceive,
+          token.decimals,
+        ).amountFormattedFull.replace(/\.?0+$/, ''),
+      );
+    }
   }
 
   // Money component formats amount without decimals
@@ -207,7 +230,7 @@ export function BridgeRedeemLayout(props: BridgeRedeemProps) {
                     .amountFormattedFull,
                 )}
                 serviceFee={serviceFeeToPercent(serviceFee)}
-                outputAmount={outputAmount || '0.00 '}
+                outputAmount={outputAmount}
                 symbol={token?.symbol || ''}
               />
             </div>

diff --git a/src/utils/utils.ts b/src/utils/utils.ts
@@ -57,15 +57,12 @@ export function getMinConfirmation(
  * @returns bigint of the amount to be received
  */
 export function getAmountToReceive(
-  amount: string | undefined,
+  amount: string,
   serviceFee: bigint,
-  decimals: number | undefined,
-): bigint | string {
-  if (!amount || !decimals) {
-    return '';
-  }
+  decimals: number,
+): bigint {
   if (!serviceFee) {
-    return amount;
+    return parseUnits(amount, decimals);
   }
   const _amount = parseUnits(amount, decimals);
   const redeemFee = (_amount * serviceFee) / 10000n;