From 568c67a5c46501ac9939b14c10062dd62713dfe3 Mon Sep 17 00:00:00 2001 From: Hamid Yaftian Date: Thu, 30 Mar 2023 15:08:50 +0800 Subject: [PATCH 1/3] refactor: add use account platform details hook --- .../__tests__/crypto-withdraw-form.spec.tsx | 5 +- .../crypto-withdraw-form.tsx | 8 +++- .../stores/__tests__/withdraw-store.spec.ts | 4 -- packages/cashier/src/stores/withdraw-store.ts | 8 ---- .../useAccountPlatformDetails.spec.tsx | 46 +++++++++++++++++++ packages/hooks/src/index.ts | 17 +++---- .../hooks/src/useAccountPlatformDetails.ts | 10 ++++ 7 files changed, 75 insertions(+), 23 deletions(-) create mode 100644 packages/hooks/src/__tests__/useAccountPlatformDetails.spec.tsx create mode 100644 packages/hooks/src/useAccountPlatformDetails.ts diff --git a/packages/cashier/src/pages/withdrawal/crypto-withdraw-form/__tests__/crypto-withdraw-form.spec.tsx b/packages/cashier/src/pages/withdrawal/crypto-withdraw-form/__tests__/crypto-withdraw-form.spec.tsx index 19661b9fec09..2352f30c136e 100644 --- a/packages/cashier/src/pages/withdrawal/crypto-withdraw-form/__tests__/crypto-withdraw-form.spec.tsx +++ b/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 { useAccountPlatformDetails } from '@deriv/hooks'; import CryptoWithdrawForm from '../crypto-withdraw-form'; import CashierProviders from '../../../../cashier-providers'; +jest.mock('@deriv/hooks'); + describe('', () => { + (useAccountPlatformDetails as jest.Mock).mockReturnValue({ icon: 'icon' }); let mockRootStore; beforeEach(() => { mockRootStore = { @@ -26,7 +30,6 @@ describe('', () => { onMount: jest.fn(), }, withdraw: { - account_platform_icon: 'icon', blockchain_address: 'tb1ql7w62elx9ucw4pj5lgw4l028hmuw80sndtntxt', onMountCryptoWithdraw: jest.fn(), requestWithdraw: jest.fn(), diff --git a/packages/cashier/src/pages/withdrawal/crypto-withdraw-form/crypto-withdraw-form.tsx b/packages/cashier/src/pages/withdrawal/crypto-withdraw-form/crypto-withdraw-form.tsx index 7720aba01d70..0d7bd49f5d1a 100644 --- a/packages/cashier/src/pages/withdrawal/crypto-withdraw-form/crypto-withdraw-form.tsx +++ b/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 { useAccountPlatformDetails } 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_platform_details = useAccountPlatformDetails(); React.useEffect(() => { recentTransactionOnMount(); @@ -108,7 +109,10 @@ const CryptoWithdrawForm = observer(() => {
{!isMobile() &&
}
- +
{isMobile() &&
} { withdraw_store.validateWithdrawToAmount(); expect(setConverterToError).toHaveBeenCalledWith(error_message); }); - - it('should get account_platform_icon', () => { - expect(withdraw_store.account_platform_icon).toBe('icon'); - }); }); diff --git a/packages/cashier/src/stores/withdraw-store.ts b/packages/cashier/src/stores/withdraw-store.ts index 10dd97b7a0ca..1771fd180d4a 100644 --- a/packages/cashier/src/stores/withdraw-store.ts +++ b/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; - } } diff --git a/packages/hooks/src/__tests__/useAccountPlatformDetails.spec.tsx b/packages/hooks/src/__tests__/useAccountPlatformDetails.spec.tsx new file mode 100644 index 000000000000..337ecea09d7c --- /dev/null +++ b/packages/hooks/src/__tests__/useAccountPlatformDetails.spec.tsx @@ -0,0 +1,46 @@ +import * as React from 'react'; +import { StoreProvider, mockStore } from '@deriv/stores'; +import { renderHook } from '@testing-library/react-hooks'; +import useAccountPlatformDetails from '../useAccountPlatformDetails'; + +describe('useAccountPlatformDetails', () => { + 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 }) => ( + {children} + ); + const { result } = renderHook(() => useAccountPlatformDetails(), { wrapper }); + + expect(result.current).toStrictEqual({ + account: { + balance: 10000, + currency: 'USD', + disabled: false, + is_crypto: false, + }, + icon: 'icon', + is_dark_mode_on: false, + loginid: 'loginid', + title: 'title', + }); + }); +}); diff --git a/packages/hooks/src/index.ts b/packages/hooks/src/index.ts index 447243a89271..d3b88f5c2484 100644 --- a/packages/hooks/src/index.ts +++ b/packages/hooks/src/index.ts @@ -1,14 +1,15 @@ +export { default as useAccountPlatformDetails } from './useAccountPlatformDetails'; +export { default as useAccountTransferVisible } from './useAccountTransferVisible'; export { default as useCountdown } from './useCountdown'; -export { default as useVerifyEmail, type TEmailVerificationType } 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 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 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 useVerifyEmail, type TEmailVerificationType } from './useVerifyEmail'; diff --git a/packages/hooks/src/useAccountPlatformDetails.ts b/packages/hooks/src/useAccountPlatformDetails.ts new file mode 100644 index 000000000000..4f12c7119da6 --- /dev/null +++ b/packages/hooks/src/useAccountPlatformDetails.ts @@ -0,0 +1,10 @@ +import { useStore } from '@deriv/stores'; + +const useAccountPlatformDetails = () => { + const { client } = useStore(); + const { account_list, loginid } = client; + + return account_list.find(account => loginid === account.loginid); +}; + +export default useAccountPlatformDetails; From db983afc0d13a200af2367382be1713f06314951 Mon Sep 17 00:00:00 2001 From: Hamid Yaftian Date: Mon, 3 Apr 2023 12:26:50 +0800 Subject: [PATCH 2/3] refactor: change name of the hook --- .../__tests__/crypto-withdraw-form.spec.tsx | 4 ++-- .../crypto-withdraw-form/crypto-withdraw-form.tsx | 4 ++-- ...latformDetails.spec.tsx => useCurrentAccountDetails.tsx} | 6 +++--- packages/hooks/src/index.ts | 2 +- ...ccountPlatformDetails.ts => useCurrentAccountDetails.ts} | 4 ++-- 5 files changed, 10 insertions(+), 10 deletions(-) rename packages/hooks/src/__tests__/{useAccountPlatformDetails.spec.tsx => useCurrentAccountDetails.tsx} (87%) rename packages/hooks/src/{useAccountPlatformDetails.ts => useCurrentAccountDetails.ts} (70%) diff --git a/packages/cashier/src/pages/withdrawal/crypto-withdraw-form/__tests__/crypto-withdraw-form.spec.tsx b/packages/cashier/src/pages/withdrawal/crypto-withdraw-form/__tests__/crypto-withdraw-form.spec.tsx index 2352f30c136e..ab1d5cd78eae 100644 --- a/packages/cashier/src/pages/withdrawal/crypto-withdraw-form/__tests__/crypto-withdraw-form.spec.tsx +++ b/packages/cashier/src/pages/withdrawal/crypto-withdraw-form/__tests__/crypto-withdraw-form.spec.tsx @@ -1,14 +1,14 @@ import React from 'react'; import { act } from 'react-dom/test-utils'; import { fireEvent, render, screen, waitFor } from '@testing-library/react'; -import { useAccountPlatformDetails } from '@deriv/hooks'; +import { useCurrentAccountDetails } from '@deriv/hooks'; import CryptoWithdrawForm from '../crypto-withdraw-form'; import CashierProviders from '../../../../cashier-providers'; jest.mock('@deriv/hooks'); describe('', () => { - (useAccountPlatformDetails as jest.Mock).mockReturnValue({ icon: 'icon' }); + (useCurrentAccountDetails as jest.Mock).mockReturnValue({ icon: 'icon' }); let mockRootStore; beforeEach(() => { mockRootStore = { diff --git a/packages/cashier/src/pages/withdrawal/crypto-withdraw-form/crypto-withdraw-form.tsx b/packages/cashier/src/pages/withdrawal/crypto-withdraw-form/crypto-withdraw-form.tsx index 0d7bd49f5d1a..867fe741e437 100644 --- a/packages/cashier/src/pages/withdrawal/crypto-withdraw-form/crypto-withdraw-form.tsx +++ b/packages/cashier/src/pages/withdrawal/crypto-withdraw-form/crypto-withdraw-form.tsx @@ -3,7 +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 { useAccountPlatformDetails } from '@deriv/hooks'; +import { useCurrentAccountDetails } from '@deriv/hooks'; import { localize, Localize } from '@deriv/translations'; import { useStore, observer } from '@deriv/stores'; import CryptoFiatConverter from '../../../components/crypto-fiat-converter'; @@ -77,7 +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_platform_details = useAccountPlatformDetails(); + const account_platform_details = useCurrentAccountDetails(); React.useEffect(() => { recentTransactionOnMount(); diff --git a/packages/hooks/src/__tests__/useAccountPlatformDetails.spec.tsx b/packages/hooks/src/__tests__/useCurrentAccountDetails.tsx similarity index 87% rename from packages/hooks/src/__tests__/useAccountPlatformDetails.spec.tsx rename to packages/hooks/src/__tests__/useCurrentAccountDetails.tsx index 337ecea09d7c..30c08974335c 100644 --- a/packages/hooks/src/__tests__/useAccountPlatformDetails.spec.tsx +++ b/packages/hooks/src/__tests__/useCurrentAccountDetails.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; import { StoreProvider, mockStore } from '@deriv/stores'; import { renderHook } from '@testing-library/react-hooks'; -import useAccountPlatformDetails from '../useAccountPlatformDetails'; +import useCurrentAccountDetails from '../useCurrentAccountDetails'; -describe('useAccountPlatformDetails', () => { +describe('useCurrentAccountDetails', () => { test('should return the account info of the current loginid', async () => { const mockRootStore = mockStore({ client: { @@ -28,7 +28,7 @@ describe('useAccountPlatformDetails', () => { const wrapper = ({ children }: { children: JSX.Element }) => ( {children} ); - const { result } = renderHook(() => useAccountPlatformDetails(), { wrapper }); + const { result } = renderHook(() => useCurrentAccountDetails(), { wrapper }); expect(result.current).toStrictEqual({ account: { diff --git a/packages/hooks/src/index.ts b/packages/hooks/src/index.ts index d3b88f5c2484..40cd4d97d98d 100644 --- a/packages/hooks/src/index.ts +++ b/packages/hooks/src/index.ts @@ -1,6 +1,6 @@ -export { default as useAccountPlatformDetails } from './useAccountPlatformDetails'; export { default as useAccountTransferVisible } from './useAccountTransferVisible'; export { default as useCountdown } from './useCountdown'; +export { default as useCurrentAccountDetails } from './useCurrentAccountDetails'; export { default as useDepositLocked } from './useDepositLocked'; export { default as useHasActiveRealAccount } from './useHasActiveRealAccount'; export { default as useHasMaltaInvestAccount } from './useHasMaltaInvestAccount'; diff --git a/packages/hooks/src/useAccountPlatformDetails.ts b/packages/hooks/src/useCurrentAccountDetails.ts similarity index 70% rename from packages/hooks/src/useAccountPlatformDetails.ts rename to packages/hooks/src/useCurrentAccountDetails.ts index 4f12c7119da6..eaff8de26d2e 100644 --- a/packages/hooks/src/useAccountPlatformDetails.ts +++ b/packages/hooks/src/useCurrentAccountDetails.ts @@ -1,10 +1,10 @@ import { useStore } from '@deriv/stores'; -const useAccountPlatformDetails = () => { +const useCurrentAccountDetails = () => { const { client } = useStore(); const { account_list, loginid } = client; return account_list.find(account => loginid === account.loginid); }; -export default useAccountPlatformDetails; +export default useCurrentAccountDetails; From 442b94f82d48c96902ab37822d08294d7ee100c8 Mon Sep 17 00:00:00 2001 From: Hamid Yaftian Date: Wed, 5 Apr 2023 13:21:56 +0800 Subject: [PATCH 3/3] feat: resolve review comments --- .../crypto-withdraw-form/crypto-withdraw-form.tsx | 7 ++----- ...etails.tsx => useCurrentAccountDetails.spec.tsx} | 13 +------------ 2 files changed, 3 insertions(+), 17 deletions(-) rename packages/hooks/src/__tests__/{useCurrentAccountDetails.tsx => useCurrentAccountDetails.spec.tsx} (77%) diff --git a/packages/cashier/src/pages/withdrawal/crypto-withdraw-form/crypto-withdraw-form.tsx b/packages/cashier/src/pages/withdrawal/crypto-withdraw-form/crypto-withdraw-form.tsx index 867fe741e437..4d3710f7df65 100644 --- a/packages/cashier/src/pages/withdrawal/crypto-withdraw-form/crypto-withdraw-form.tsx +++ b/packages/cashier/src/pages/withdrawal/crypto-withdraw-form/crypto-withdraw-form.tsx @@ -77,7 +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_platform_details = useCurrentAccountDetails(); + const account_details = useCurrentAccountDetails(); React.useEffect(() => { recentTransactionOnMount(); @@ -109,10 +109,7 @@ const CryptoWithdrawForm = observer(() => {
{!isMobile() &&
}
- +
{isMobile() &&
} { ); const { result } = renderHook(() => useCurrentAccountDetails(), { wrapper }); - expect(result.current).toStrictEqual({ - account: { - balance: 10000, - currency: 'USD', - disabled: false, - is_crypto: false, - }, - icon: 'icon', - is_dark_mode_on: false, - loginid: 'loginid', - title: 'title', - }); + expect(result.current).toStrictEqual(mockRootStore.client.account_list[0]); }); });