Merge pull request #5 from hamid-deriv/hamid/92241/account-platform-d…

…etails-hook

Hamid/92241/account platform details hook

packages/cashier/src/pages/withdrawal/crypto-withdraw-form/__tests__/crypto-withdraw-form.spec.tsx

@@ -1,10 +1,14 @@
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { useCurrentAccountDetails } from '@deriv/hooks';
 import CryptoWithdrawForm from '../crypto-withdraw-form';
 import CashierProviders from '../../../../cashier-providers';
 
+jest.mock('@deriv/hooks');
+
 describe('<CryptoWithdrawForm />', () => {
+    (useCurrentAccountDetails as jest.Mock).mockReturnValue({ icon: 'icon' });
     let mockRootStore;
     beforeEach(() => {
         mockRootStore = {
@@ -26,7 +30,6 @@ describe('<CryptoWithdrawForm />', () => {
                         onMount: jest.fn(),
                     },
                     withdraw: {
-                        account_platform_icon: 'icon',
                         blockchain_address: 'tb1ql7w62elx9ucw4pj5lgw4l028hmuw80sndtntxt',
                         onMountCryptoWithdraw: jest.fn(),
                         requestWithdraw: jest.fn(),

packages/cashier/src/pages/withdrawal/crypto-withdraw-form/crypto-withdraw-form.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { Field, FieldProps, Formik, FormikProps } from 'formik';
 import { Button, Icon, Input, Loading, MobileWrapper, Text } from '@deriv/components';
 import { CryptoConfig, getCurrencyName, isCryptocurrency, isMobile } from '@deriv/shared';
+import { useCurrentAccountDetails } from '@deriv/hooks';
 import { localize, Localize } from '@deriv/translations';
 import { useStore, observer } from '@deriv/stores';
 import CryptoFiatConverter from '../../../components/crypto-fiat-converter';
@@ -58,7 +59,6 @@ const CryptoWithdrawForm = observer(() => {
     const { crypto_fiat_converter, general_store, transaction_history, withdraw } = useCashierStore();
     const crypto_currency = currency;
     const {
-        account_platform_icon,
         blockchain_address,
         onMountCryptoWithdraw: onMountWithdraw,
         requestWithdraw,
@@ -77,6 +77,7 @@ const CryptoWithdrawForm = observer(() => {
     } = crypto_fiat_converter;
     const { is_loading, percentage, percentageSelectorSelectionStatus, should_percentage_reset } = general_store;
     const { crypto_transactions, onMount: recentTransactionOnMount } = transaction_history;
+    const account_details = useCurrentAccountDetails();
 
     React.useEffect(() => {
         recentTransactionOnMount();
@@ -108,7 +109,7 @@ const CryptoWithdrawForm = observer(() => {
         <div className='cashier__wrapper' data-testid='dt_crypto_withdraw_form'>
             {!isMobile() && <Header currency={currency} />}
             <div className={classNames({ 'crypto-withdraw-form__icon': isMobile() })}>
-                <Icon icon={`IcCurrency-${account_platform_icon?.toLowerCase()}`} size={isMobile() ? 64 : 128} />
+                <Icon icon={`IcCurrency-${account_details?.icon?.toLowerCase()}`} size={isMobile() ? 64 : 128} />
             </div>
             {isMobile() && <Header currency={currency} />}
             <Formik

packages/cashier/src/stores/__tests__/withdraw-store.spec.ts

@@ -324,8 +324,4 @@ describe('WithdrawStore', () => {
         withdraw_store.validateWithdrawToAmount();
         expect(setConverterToError).toHaveBeenCalledWith(error_message);
     });
-
-    it('should get account_platform_icon', () => {
-        expect(withdraw_store.account_platform_icon).toBe('icon');
-    });
 });

packages/cashier/src/stores/withdraw-store.ts

@@ -34,7 +34,6 @@ export default class WithdrawStore {
             setWithdrawPercentageSelectorResult: action.bound,
             validateWithdrawFromAmount: action.bound,
             validateWithdrawToAmount: action.bound,
-            account_platform_icon: computed,
         });
 
         this.root_store = root_store;
@@ -378,11 +377,4 @@ export default class WithdrawStore {
 
         setConverterToError(error_message);
     }
-
-    get account_platform_icon() {
-        const { account_list, loginid } = this.root_store.client;
-        const platform_icon = account_list.find(acc => loginid === acc.loginid)?.icon;
-
-        return platform_icon;
-    }
 }

packages/hooks/src/__tests__/useCurrentAccountDetails.spec.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { StoreProvider, mockStore } from '@deriv/stores';
+import { renderHook } from '@testing-library/react-hooks';
+import useCurrentAccountDetails from '../useCurrentAccountDetails';
+
+describe('useCurrentAccountDetails', () => {
+    test('should return the account info of the current loginid', async () => {
+        const mockRootStore = mockStore({
+            client: {
+                account_list: [
+                    {
+                        account: {
+                            balance: 10000,
+                            currency: 'USD',
+                            disabled: false,
+                            is_crypto: false,
+                        },
+                        icon: 'icon',
+                        is_dark_mode_on: false,
+                        loginid: 'loginid',
+                        title: 'title',
+                    },
+                ],
+                loginid: 'loginid',
+            },
+        });
+
+        const wrapper = ({ children }: { children: JSX.Element }) => (
+            <StoreProvider store={mockRootStore}>{children}</StoreProvider>
+        );
+        const { result } = renderHook(() => useCurrentAccountDetails(), { wrapper });
+
+        expect(result.current).toStrictEqual(mockRootStore.client.account_list[0]);
+    });
+});

packages/hooks/src/index.ts

@@ -1,16 +1,17 @@
+export { default as useAccountTransferVisible } from './useAccountTransferVisible';
 export { default as useCountdown } from './useCountdown';
-export { default as useVerifyEmail } from './useVerifyEmail';
-export { default as useNeedAuthentication } from './useNeedAuthentication';
-export { default as useNeedFinancialAssessment } from './useNeedFinancialAssessment';
-export { default as useRealSTPAccount } from './useRealSTPAccount';
-export { default as useNeedTNC } from './useNeedTNC';
+export { default as useCurrentAccountDetails } from './useCurrentAccountDetails';
 export { default as useDepositLocked } from './useDepositLocked';
-export { default as useAccountTransferVisible } from './useAccountTransferVisible';
+export { default as useHasActiveRealAccount } from './useHasActiveRealAccount';
 export { default as useHasMaltaInvestAccount } from './useHasMaltaInvestAccount';
 export { default as useHasSetCurrency } from './useHasSetCurrency';
-export { default as useHasActiveRealAccount } from './useHasActiveRealAccount';
-export { default as useP2PNotificationCount } from './useP2PNotificationCount';
+export { default as useHasSvgAccount } from './useHasSvgAccount';
+export { default as useIsRealAccountNeededForCashier } from './useIsRealAccountNeededForCashier';
+export { default as useNeedAuthentication } from './useNeedAuthentication';
+export { default as useNeedFinancialAssessment } from './useNeedFinancialAssessment';
+export { default as useNeedTNC } from './useNeedTNC';
 export { default as useOnrampVisible } from './useOnrampVisible';
+export { default as useP2PNotificationCount } from './useP2PNotificationCount';
+export { default as useRealSTPAccount } from './useRealSTPAccount';
 export { default as useSwitchToRealAccount } from './useSwitchToRealAccount';
-export { default as useIsRealAccountNeededForCashier } from './useIsRealAccountNeededForCashier';
-export { default as useHasSvgAccount } from './useHasSvgAccount';
+export { default as useVerifyEmail } from './useVerifyEmail';

packages/hooks/src/useCurrentAccountDetails.ts

@@ -0,0 +1,10 @@
+import { useStore } from '@deriv/stores';
+
+const useCurrentAccountDetails = () => {
+    const { client } = useStore();
+    const { account_list, loginid } = client;
+
+    return account_list.find(account => loginid === account.loginid);
+};
+
+export default useCurrentAccountDetails;