fix: 🚑 format amount and transaction fee (#17153)

deriv-com · Oct 15, 2024 · 6be84dc · 6be84dc
1 parent 591a08a
commit 6be84dc
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 22 deletions.
diff --git a/...r/modules/WithdrawalCrypto/components/WithdrawalCryptoReceipt/WithdrawalCryptoReceipt.tsx b/...r/modules/WithdrawalCrypto/components/WithdrawalCryptoReceipt/WithdrawalCryptoReceipt.tsx
@@ -33,14 +33,14 @@ const WithdrawalCryptoReceipt: React.FC<TProps> = ({ onClose, withdrawalReceipt
                     <Text align='center' as='p' size='sm'>
                         <Localize i18n_default_text='Amount received' />
                     </Text>
-                    <Text align='center' size='xl' weight='bold'>
-                        {transactionFee ? amountReceived : amount} {currency}
+                    <Text align='center' data-testid='dt_amount_received' size='xl' weight='bold'>
+                        <WalletMoney amount={transactionFee ? amountReceived : amount} currency={currency} />
                     </Text>
                     {transactionFee && (
                         <Text align='center' as='p' size='sm'>
                             <Localize
-                                i18n_default_text='(Transaction fee: {{transactionFee}} {{currency}})'
-                                values={{ currency, transactionFee }}
+                                components={[<WalletMoney amount={transactionFee} currency={currency} key={0} />]}
+                                i18n_default_text='(Transaction fee: <0/>)'
                             />
                         </Text>
                     )}

diff --git a/...rawalCrypto/components/WithdrawalCryptoReceipt/__tests__/WithdrawalCryptoReceipt.spec.tsx b/...rawalCrypto/components/WithdrawalCryptoReceipt/__tests__/WithdrawalCryptoReceipt.spec.tsx
@@ -3,6 +3,23 @@ import { APIProvider, AuthProvider } from '@deriv/api-v2';
 import { fireEvent, render, screen } from '@testing-library/react';
 import WithdrawalCryptoReceipt from '../WithdrawalCryptoReceipt';
 
+const mockCurrencyConfig = {
+    BTC: {
+        display_code: 'BTC',
+        fractional_digits: 8,
+    },
+    USD: {
+        display_code: 'USD',
+        fractional_digits: 2,
+    },
+};
+
+const mockWithdrawalReceipt = {
+    address: 'test_crypto_address',
+    amount: 100,
+    currency: 'BTC',
+};
+
 const mockPush = jest.fn();
 jest.mock('react-router-dom', () => ({
     ...jest.requireActual('react-router-dom'),
@@ -11,11 +28,12 @@ jest.mock('react-router-dom', () => ({
     })),
 }));
 
-const mockWithdrawalReceipt = {
-    address: 'test_crypto_address',
-    amount: 100,
-    currency: 'BTC',
-};
+jest.mock('@deriv/api-v2', () => ({
+    ...jest.requireActual('@deriv/api-v2'),
+    useCurrencyConfig: jest.fn(() => ({
+        getConfig: (currency: 'BTC' | 'USD') => mockCurrencyConfig[currency],
+    })),
+}));
 
 const wrapper = ({ children }: PropsWithChildren) => (
     <APIProvider>
@@ -29,8 +47,8 @@ describe('WithdrawalCryptoReceipt', () => {
             wrapper,
         });
 
-        const amountElement = screen.getByText('100 BTC');
-        expect(amountElement).toBeInTheDocument();
+        const amountElement = screen.getByTestId('dt_amount_received');
+        expect(amountElement).toHaveTextContent('100.00000000 BTC');
 
         const addressElement = screen.getByText('test_crypto_address');
         expect(addressElement).toBeInTheDocument();
@@ -41,10 +59,10 @@ describe('WithdrawalCryptoReceipt', () => {
         expect(reviewTextElement).toBeInTheDocument();
     });
 
-    it('should render the component with withdrawal information', () => {
+    it('should render the component with withdrawal information with transaction fee', () => {
         const withdrawalReceiptWithFee = {
             ...mockWithdrawalReceipt,
-            transactionFee: '0.0001',
+            transactionFee: 0.0001,
         };
 
         render(<WithdrawalCryptoReceipt onClose={() => jest.fn()} withdrawalReceipt={withdrawalReceiptWithFee} />, {

diff --git a/...llets/src/features/cashier/modules/WithdrawalCrypto/provider/WithdrawalCryptoProvider.tsx b/...llets/src/features/cashier/modules/WithdrawalCrypto/provider/WithdrawalCryptoProvider.tsx
@@ -158,18 +158,13 @@ const WithdrawalCryptoProvider: React.FC<React.PropsWithChildren<TWithdrawalCryp
             verification_code: verificationCode,
         })
             .then(() => {
-                const fractionalDigits = activeWallet?.currency_config?.fractional_digits ?? 0;
                 setWithdrawalReceipt({
                     address,
                     amount: Number(amount),
-                    amountReceived: estimatedFeeUniqueId
-                        ? (Number(amount) - Number(cryptoEstimationsFee)).toFixed(fractionalDigits)
-                        : amount?.toFixed(fractionalDigits),
+                    amountReceived: estimatedFeeUniqueId ? Number(amount) - Number(cryptoEstimationsFee) : amount,
                     currency: activeWallet?.currency,
                     landingCompany: activeWallet?.landing_company_name,
-                    transactionFee: estimatedFeeUniqueId
-                        ? Number(cryptoEstimationsFee)?.toFixed(fractionalDigits)
-                        : undefined,
+                    transactionFee: estimatedFeeUniqueId ? Number(cryptoEstimationsFee) : undefined,
                 });
             })
             .catch((error: TSocketError<'cashier'>) => {

diff --git a/packages/wallets/src/features/cashier/modules/WithdrawalCrypto/types/types.ts b/packages/wallets/src/features/cashier/modules/WithdrawalCrypto/types/types.ts
@@ -7,8 +7,8 @@ export type TWithdrawalForm = {
 export type TWithdrawalReceipt = {
     address?: string;
     amount?: number;
-    amountReceived?: string;
+    amountReceived?: number;
     currency?: string;
     landingCompany?: string;
-    transactionFee?: string;
+    transactionFee?: number;
 };