- {/* Remove after QA testing */}
-
@@ -342,8 +335,6 @@ TradingHubHeader.propTypes = {
has_any_real_account: PropTypes.bool,
toggleReadyToDepositModal: PropTypes.func,
toggleNeedRealAccountForCashierModal: PropTypes.func,
- //Remove after QA testing
- setIsWalletModalVisible: PropTypes.func,
};
export default connect(({ client, common, notifications, ui, traders_hub }) => ({
@@ -375,6 +366,4 @@ export default connect(({ client, common, notifications, ui, traders_hub }) => (
toggleReadyToDepositModal: ui.toggleReadyToDepositModal,
toggleNeedRealAccountForCashierModal: ui.toggleNeedRealAccountForCashierModal,
content_flag: traders_hub.content_flag,
- //Remove after QA testing
- setIsWalletModalVisible: ui.setIsWalletModalVisible,
}))(withRouter(TradingHubHeader));
diff --git a/packages/core/src/Stores/traders-hub-store.js b/packages/core/src/Stores/traders-hub-store.js
index b6cb1878a10c..4456b92cf57a 100644
--- a/packages/core/src/Stores/traders-hub-store.js
+++ b/packages/core/src/Stores/traders-hub-store.js
@@ -30,6 +30,8 @@ export default class TradersHubStore extends BaseStore {
selected_account = {};
is_real_wallets_upgrade_on = false;
is_wallet_migration_failed = false;
+ active_modal_tab = undefined;
+ active_modal_wallet_id = undefined;
constructor(root_store) {
super({ root_store });
@@ -52,6 +54,8 @@ export default class TradersHubStore extends BaseStore {
selected_account: observable,
selected_account_type: observable,
selected_platform_type: observable,
+ active_modal_tab: observable,
+ active_modal_wallet_id: observable,
selected_region: observable,
open_failed_verification_for: observable,
is_real_wallets_upgrade_on: observable,
@@ -65,6 +69,8 @@ export default class TradersHubStore extends BaseStore {
getAvailableDerivEzAccounts: action.bound,
getExistingAccounts: action.bound,
handleTabItemClick: action.bound,
+ setWalletModalActiveTab: action.bound,
+ setWalletModalActiveWalletID: action.bound,
has_any_real_account: computed,
is_demo_low_risk: computed,
is_demo: computed,
@@ -172,6 +178,14 @@ export default class TradersHubStore extends BaseStore {
}
}
+ setWalletModalActiveTab(tab) {
+ this.active_modal_tab = tab;
+ }
+
+ setWalletModalActiveWalletID(wallet_id) {
+ this.active_modal_wallet_id = wallet_id;
+ }
+
get no_MF_account() {
const { has_maltainvest_account } = this.root_store.client;
return this.selected_region === 'EU' && !has_maltainvest_account;
diff --git a/packages/hooks/src/__tests__/useActiveWallet.spec.tsx b/packages/hooks/src/__tests__/useActiveWallet.spec.tsx
new file mode 100644
index 000000000000..7bf51e1aa142
--- /dev/null
+++ b/packages/hooks/src/__tests__/useActiveWallet.spec.tsx
@@ -0,0 +1,76 @@
+import React from 'react';
+import { renderHook } from '@testing-library/react-hooks';
+import useActiveWallet from '../useActiveWallet';
+import { StoreProvider, mockStore } from '@deriv/stores';
+import { APIProvider } from '@deriv/api';
+
+jest.mock('@deriv/api', () => ({
+ ...jest.requireActual('@deriv/api'),
+ useFetch: jest.fn((name: string) => {
+ if (name === 'balance') {
+ return {
+ data: {
+ balance: {
+ accounts: {
+ CRW000000: {
+ balance: 100,
+ },
+ },
+ },
+ },
+ };
+ }
+ if (name === 'authorize') {
+ return {
+ data: {
+ authorize: {
+ account_list: [
+ {
+ loginid: 'CRW000000',
+ account_category: 'wallet',
+ is_virtual: 0,
+ landing_company_name: 'maltainvest',
+ currency: 'USD',
+ },
+ {
+ loginid: 'MXN000000',
+ account_category: 'trading',
+ is_virtual: 0,
+ landing_company_name: 'maltainvest',
+ currency: 'BTC',
+ },
+ ],
+ },
+ },
+ };
+ }
+
+ return { data: undefined };
+ }),
+}));
+
+describe('useActiveWallet', () => {
+ it('should return active wallet', () => {
+ const mock = mockStore({
+ client: {
+ loginid: 'CRW000000',
+ accounts: {
+ CRW000000: {
+ token: 'token',
+ },
+ },
+ },
+ });
+
+ const wrapper = ({ children }: { children: JSX.Element }) => (
+
+ {children}
+
+ );
+
+ const { result } = renderHook(() => useActiveWallet(), { wrapper });
+
+ expect(result?.current?.is_selected).toEqual(true);
+ expect(result?.current?.loginid).toEqual(mock.client.loginid);
+ });
+});
diff --git a/packages/hooks/src/__tests__/useWalletsList.spec.tsx b/packages/hooks/src/__tests__/useWalletsList.spec.tsx
index 356f978d3557..8fc23472223c 100644
--- a/packages/hooks/src/__tests__/useWalletsList.spec.tsx
+++ b/packages/hooks/src/__tests__/useWalletsList.spec.tsx
@@ -26,6 +26,11 @@ describe('useWalletsList', () => {
account_category: 'wallet',
currency: 'USD',
is_virtual: 0,
+ landing_company_name: 'svg',
+ landing_company_shortcode: 'svg',
+ is_demo: 0,
+ is_selected: true,
+ is_malta_wallet: false,
},
],
},
@@ -46,9 +51,13 @@ describe('useWalletsList', () => {
currency: 'USD',
gradient_card_class: 'wallet-card__usd-bg',
gradient_header_class: 'wallet-header__usd-bg',
- landing_company_shortcode: undefined,
+ landing_company_shortcode: 'svg',
is_virtual: 0,
- balance: 1000,
+ landing_company_name: 'svg',
+ is_demo: false,
+ is_selected: false,
+ is_malta_wallet: false,
+ balance: 0,
},
]);
});
diff --git a/packages/hooks/src/index.ts b/packages/hooks/src/index.ts
index 2fa44fabb5aa..877b4ab99959 100644
--- a/packages/hooks/src/index.ts
+++ b/packages/hooks/src/index.ts
@@ -40,4 +40,5 @@ export { default as useRealSTPAccount } from './useRealSTPAccount';
export { default as useTotalAccountBalance } from './useTotalAccountBalance';
export { default as useVerifyEmail } from './useVerifyEmail';
export { default as useContentFlag } from './useContentFlag';
-export { default as useWalletList } from './useWalletsList';
+export { default as useWalletsList } from './useWalletsList';
+export { default as useActiveWallet } from './useActiveWallet';
diff --git a/packages/hooks/src/useActiveWallet.ts b/packages/hooks/src/useActiveWallet.ts
new file mode 100644
index 000000000000..202c155b696b
--- /dev/null
+++ b/packages/hooks/src/useActiveWallet.ts
@@ -0,0 +1,11 @@
+import useWalletsList from './useWalletsList';
+
+/** A custom hook that returns the wallet object for the current active wallet. */
+const useActiveWallet = () => {
+ const { data: wallet_list } = useWalletsList();
+ const active_wallet = wallet_list?.find(wallet => wallet.is_selected);
+
+ return active_wallet;
+};
+
+export default useActiveWallet;
diff --git a/packages/hooks/src/useWalletsList.ts b/packages/hooks/src/useWalletsList.ts
index 91af4dbc59d6..5e7ac48de0c4 100644
--- a/packages/hooks/src/useWalletsList.ts
+++ b/packages/hooks/src/useWalletsList.ts
@@ -2,7 +2,7 @@ import { useMemo } from 'react';
import { useFetch } from '@deriv/api';
import { useStore } from '@deriv/stores';
-const useWalletList = () => {
+const useWalletsList = () => {
const { client, ui } = useStore();
const { accounts, loginid, is_crypto } = client;
const { is_dark_mode_on } = ui;
@@ -10,6 +10,7 @@ const useWalletList = () => {
payload: { authorize: accounts[loginid || ''].token },
options: { enabled: Boolean(loginid) },
});
+ const { data: balance_data } = useFetch('balance', { payload: { account: 'all' } });
const sortedWallets = useMemo(() => {
// @ts-expect-error Need to update @deriv/api-types to fix the TS error
@@ -20,14 +21,21 @@ const useWalletList = () => {
// Should remove this once the API is fixed
const modified_wallets = wallets?.map(wallet => ({
...wallet,
- balance: 1000,
+ /** Indicating whether the wallet is the currently selected wallet. */
+ is_selected: wallet.loginid === loginid,
+ /** Indicating whether the wallet is a virtual-money wallet. */
+ is_demo: wallet.is_virtual === 1,
+ /** Wallet balance */
+ balance: balance_data?.balance?.accounts?.[wallet.loginid || '']?.balance || 0,
+ /** Landing company shortcode the account belongs to. Use this instead of landing_company_shortcode for wallets */
+ landing_company_name: wallet.landing_company_name === 'maltainvest' ? 'malta' : wallet.landing_company_name,
+ is_malta_wallet: wallet.landing_company_name === 'malta',
gradient_header_class: `wallet-header__${
wallet.is_virtual === 1 ? 'demo' : wallet.currency?.toLowerCase()
}-bg${is_dark_mode_on ? '--dark' : ''}`,
gradient_card_class: `wallet-card__${wallet.is_virtual === 1 ? 'demo' : wallet.currency?.toLowerCase()}-bg${
is_dark_mode_on ? '--dark' : ''
}`,
- landing_company_shortcode: wallet.landing_company_name,
}));
// Sort the wallets alphabetically by fiat, crypto, then virtual
@@ -40,7 +48,7 @@ const useWalletList = () => {
return (a.currency || 'USD').localeCompare(b.currency || 'USD');
});
- }, [data, is_crypto, is_dark_mode_on]);
+ }, [balance_data?.balance?.accounts, data?.authorize?.account_list, is_crypto, loginid, is_dark_mode_on]);
return {
...reset,
@@ -48,4 +56,4 @@ const useWalletList = () => {
};
};
-export default useWalletList;
+export default useWalletsList;
diff --git a/packages/stores/src/mockStore.ts b/packages/stores/src/mockStore.ts
index aee12e66f4e6..c3412fa2c257 100644
--- a/packages/stores/src/mockStore.ts
+++ b/packages/stores/src/mockStore.ts
@@ -304,11 +304,14 @@ const mock = (): TStores & { is_mock: boolean } => {
is_tour_open: false,
selected_platform_type: '',
available_platforms: [],
- CFDs_restricted_countries: false,
is_demo_low_risk: false,
selected_region: 'All',
getExistingAccounts: jest.fn(),
available_dxtrade_accounts: [],
+ active_modal_tab: 'Deposit',
+ setWalletModalActiveTab: jest.fn(),
+ active_modal_wallet_id: '',
+ setWalletModalActiveWalletID: jest.fn(),
},
menu: {
attach: jest.fn(),
diff --git a/packages/stores/types.ts b/packages/stores/types.ts
index 421afed511d5..bfc2b27f1b3f 100644
--- a/packages/stores/types.ts
+++ b/packages/stores/types.ts
@@ -448,6 +448,10 @@ type TTradersHubStore = {
selected_region: TRegionAvailability;
getExistingAccounts: (platform: string, market_type: string) => AvailableAccount[];
available_dxtrade_accounts: AvailableAccount[];
+ active_modal_tab?: 'Deposit' | 'Withdraw' | 'Transfer' | 'Transactions';
+ setWalletModalActiveTab: (tab?: 'Deposit' | 'Withdraw' | 'Transfer' | 'Transactions') => void;
+ active_modal_wallet_id?: string;
+ setWalletModalActiveWalletID: (wallet_id?: string) => void;
};
/**