);
+
+ render(, { wrapper: wrapper(mock) });
+
+ const btn1 = screen.getByRole('button', { name: /Transfer/i });
+ const btn2 = screen.getByRole('button', { name: /Transactions/i });
+ const btn3 = screen.getByRole('button', { name: /Reset balance/i });
+
+ expect(btn1).toBeInTheDocument();
+ expect(btn2).toBeInTheDocument();
+ expect(btn3).toBeInTheDocument();
+ });
+});
diff --git a/packages/appstore/src/components/wallet-cards-carousel/cards-slider-swiper.tsx b/packages/appstore/src/components/wallet-cards-carousel/cards-slider-swiper.tsx
new file mode 100644
index 000000000000..5e494418e376
--- /dev/null
+++ b/packages/appstore/src/components/wallet-cards-carousel/cards-slider-swiper.tsx
@@ -0,0 +1,91 @@
+import React, { useEffect, useState } from 'react';
+import useEmblaCarousel from 'embla-carousel-react';
+import { WalletCard, ProgressBarTracker } from '@deriv/components';
+import { useWalletsList } from '@deriv/hooks';
+import { formatMoney } from '@deriv/shared';
+import { observer, useStore } from '@deriv/stores';
+import { getAccountName } from 'Constants/utils';
+import { TWalletAccount } from 'Types';
+import './wallet-cards-carousel.scss';
+
+const CardsSliderSwiper = observer(() => {
+ const { client } = useStore();
+ const { switchAccount } = client;
+ const { data } = useWalletsList();
+
+ const active_wallet_index = data.findIndex(item => item?.is_selected) || 0;
+
+ const [active_index, setActiveIndex] = useState(active_wallet_index);
+ const [emblaRef, emblaApi] = useEmblaCarousel({ skipSnaps: true, containScroll: false });
+
+ const steps = data.map((_, idx) => idx.toString());
+
+ useEffect(() => {
+ emblaApi?.on('select', () => {
+ const index = emblaApi?.selectedScrollSnap() || 0;
+ setActiveIndex(index + 1);
+ });
+ }, [emblaApi]);
+
+ useEffect(() => {
+ emblaApi?.scrollTo(active_index - 1);
+ }, [active_index, emblaApi]);
+
+ useEffect(() => {
+ const timeout_id = setTimeout(() => {
+ if (!data[active_index - 1]?.is_selected) switchAccount(data[active_index - 1]?.loginid);
+ }, 1000);
+
+ return () => clearTimeout(timeout_id);
+ }, [active_index, data, switchAccount]);
+
+ useEffect(() => {
+ setActiveIndex(active_wallet_index + 1);
+ }, [active_wallet_index]);
+
+ const slider = React.useMemo(
+ () =>
+ data?.map((item: TWalletAccount) => {
+ const { loginid, icon, currency_config, balance, currency, landing_company_name, gradient_card_class } =
+ item;
+ return (
+
+
+
+ );
+ }),
+ [data?.length]
+ );
+
+ return (
+
+
+
+
+ );
+});
+
+export default CardsSliderSwiper;
diff --git a/packages/appstore/src/components/wallet-cards-carousel/index.ts b/packages/appstore/src/components/wallet-cards-carousel/index.ts
new file mode 100644
index 000000000000..7a4b6f3d0f73
--- /dev/null
+++ b/packages/appstore/src/components/wallet-cards-carousel/index.ts
@@ -0,0 +1,3 @@
+import WalletCardsCarousel from './wallet-cards-carousel';
+
+export default WalletCardsCarousel;
diff --git a/packages/appstore/src/components/wallet-cards-carousel/wallet-cards-carousel.scss b/packages/appstore/src/components/wallet-cards-carousel/wallet-cards-carousel.scss
new file mode 100644
index 000000000000..9279aafa264b
--- /dev/null
+++ b/packages/appstore/src/components/wallet-cards-carousel/wallet-cards-carousel.scss
@@ -0,0 +1,36 @@
+.wallet-cards-carousel {
+ margin: -1.6rem -1.6rem -1.4rem;
+ padding: 2.4rem 0 1.6rem;
+
+ &__viewport {
+ overflow: hidden;
+ }
+ &__container {
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: flex-start;
+ gap: 2.4rem;
+ }
+ &__pagination {
+ margin-block: 1.6rem;
+ }
+
+ &__buttons {
+ display: flex;
+ justify-content: center;
+ gap: 0.8rem;
+ }
+}
+
+.wallet-carousel-content-container {
+ display: flex;
+ padding: 1.6rem;
+ flex-direction: column;
+ align-items: center;
+ background-color: var(--general-main-1);
+
+ &-demo {
+ background-color: var(--wallet-demo-bg-color);
+ }
+}
diff --git a/packages/appstore/src/components/wallet-cards-carousel/wallet-cards-carousel.tsx b/packages/appstore/src/components/wallet-cards-carousel/wallet-cards-carousel.tsx
new file mode 100644
index 000000000000..5473bdf3bf45
--- /dev/null
+++ b/packages/appstore/src/components/wallet-cards-carousel/wallet-cards-carousel.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { useActiveWallet } from '@deriv/hooks';
+import { observer, useStore } from '@deriv/stores';
+import WalletButton from 'Components/wallet-button';
+import { getWalletHeaderButtons } from 'Constants/utils';
+import CardsSliderSwiper from './cards-slider-swiper';
+import './wallet-cards-carousel.scss';
+
+const WalletCardsCarousel = observer(() => {
+ const { ui, traders_hub } = useStore();
+ const { setIsWalletModalVisible } = ui;
+ const { setWalletModalActiveWalletID, setWalletModalActiveTab } = traders_hub;
+ const active_wallet = useActiveWallet();
+
+ const wallet_buttons = getWalletHeaderButtons(active_wallet?.is_demo || false);
+
+ return (
+
+
+
+ {wallet_buttons.map(button => {
+ button.action = () => {
+ setWalletModalActiveTab(button.name);
+ setIsWalletModalVisible(true);
+ setWalletModalActiveWalletID(active_wallet?.loginid);
+ };
+
+ return ;
+ })}
+
+
{children}
));
+
+jest.mock('@deriv/hooks', () => ({
+ ...jest.requireActual('@deriv/hooks'),
+ useActiveWallet: jest.fn(),
+}));
+
+describe('', () => {
+ it('Check class', () => {
+ render(
+
+
+
+ );
+
+ const wrapper = screen.queryByTestId('dt_wallet-content');
+ expect(wrapper).toHaveClass('wallet-content');
+ expect(wrapper).not.toHaveClass('wallet-content__demo');
+ });
+
+ it('Check class for demo', () => {
+ render(
+
+
+
+ );
+
+ const wrapper = screen.queryByTestId('dt_wallet-content');
+ expect(wrapper).toHaveClass('wallet-content');
+ expect(wrapper).toHaveClass('wallet-content__demo');
+ });
+
+ it('Check there is NOT disclaimer for demo', () => {
+ render(
+
+
+
+ );
+
+ const disclaimer = screen.queryByTestId('dt_disclaimer_wrapper');
+
+ expect(disclaimer).not.toBeInTheDocument();
+ });
+
+ it('Check there is NOT disclaimer for Non-EU', () => {
+ render(
+
+
+
+ );
+
+ const disclaimer = screen.queryByTestId('dt_disclaimer_wrapper');
+
+ expect(disclaimer).not.toBeInTheDocument();
+ });
+
+ it('Check there is disclaimer for EU and not demo', () => {
+ render(
+
+
+
+ );
+
+ const disclaimer = screen.queryByTestId('dt_disclaimer_wrapper');
+
+ expect(disclaimer).toBeInTheDocument();
+ });
+});
diff --git a/packages/appstore/src/components/wallet-content/__tests__/wallet-transfer-block.spec.tsx b/packages/appstore/src/components/wallet-content/__tests__/wallet-transfer-block.spec.tsx
new file mode 100644
index 000000000000..71b3d47ae566
--- /dev/null
+++ b/packages/appstore/src/components/wallet-content/__tests__/wallet-transfer-block.spec.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import WalletTransferBlock from '../wallet-transfer-block';
+import { TWalletAccount } from 'Types';
+import { StoreProvider, mockStore } from '@deriv/stores';
+
+const wallet_account: TWalletAccount = {
+ name: 'USD',
+ currency: 'USD',
+ icon: '',
+ balance: 10415.24,
+ icon_type: 'fiat',
+ landing_company_name: 'svg',
+ is_disabled: false,
+ is_virtual: false,
+ loginid: 'CRW10001',
+};
+
+jest.mock('./../../containers/currency-switcher-container', () => jest.fn(({ children }) => {children}
));
+
+const mockedRootStore = mockStore({
+ modules: {
+ cfd: {
+ toggleCompareAccountsModal: jest.fn(),
+ },
+ },
+});
+
+describe('', () => {
+ it('Check balance', () => {
+ render(
+
+
+
+ );
+ const { currency } = wallet_account;
+
+ const balance_title = screen.getByText(`10,415.24 ${currency}`);
+
+ expect(balance_title).toBeInTheDocument();
+ });
+
+ it('Check loginid', () => {
+ render(
+
+
+
+ );
+ const { loginid } = wallet_account;
+
+ const loginid_title = screen.getByText(String(loginid));
+
+ expect(loginid_title).toBeInTheDocument();
+ });
+});
diff --git a/packages/appstore/src/components/wallet-content/index.ts b/packages/appstore/src/components/wallet-content/index.ts
new file mode 100644
index 000000000000..fee1bf581d8b
--- /dev/null
+++ b/packages/appstore/src/components/wallet-content/index.ts
@@ -0,0 +1,3 @@
+import WalletContent from './wallet-content';
+
+export default WalletContent;
diff --git a/packages/appstore/src/components/wallet-content/wallet-cfds-listing.tsx b/packages/appstore/src/components/wallet-content/wallet-cfds-listing.tsx
new file mode 100644
index 000000000000..bfb0a014da40
--- /dev/null
+++ b/packages/appstore/src/components/wallet-content/wallet-cfds-listing.tsx
@@ -0,0 +1,253 @@
+import React from 'react';
+import { Text, StaticUrl, Button } from '@deriv/components';
+import { useActiveWallet, useCFDCanGetMoreMT5Accounts } from '@deriv/hooks';
+import { formatMoney, isCryptocurrency } from '@deriv/shared';
+import { localize, Localize } from '@deriv/translations';
+import ListingContainer from 'Components/containers/listing-container';
+import TradingAppCard from 'Components/containers/trading-app-card';
+import PlatformLoader from 'Components/pre-loader/platform-loader';
+import { getHasDivider } from 'Constants/utils';
+import { useStore, observer } from '@deriv/stores';
+import GetMoreAccounts from 'Components/get-more-accounts';
+import { TDetailsOfEachMT5Loginid } from 'Types';
+import './wallet-content.scss';
+
+type TProps = {
+ fiat_wallet_currency?: string;
+};
+
+const CryptoCFDs = observer(({ fiat_wallet_currency }: TProps) => {
+ const { traders_hub, ui } = useStore();
+ const { setWalletModalActiveWalletID, setWalletModalActiveTab } = traders_hub;
+
+ const { is_mobile, setIsWalletModalVisible } = ui;
+
+ const wallet_account = useActiveWallet();
+ if (!wallet_account) return null;
+
+ return (
+
+
+
+
+
+
+ );
+});
+
+const FiatCFDs = observer(() => {
+ const { traders_hub } = useStore();
+ const {
+ selected_region,
+ getExistingAccounts,
+ selected_account_type,
+ available_dxtrade_accounts,
+ combined_cfd_mt5_accounts,
+ toggleAccountTypeModalVisibility,
+ } = traders_hub;
+
+ const can_get_more_cfd_mt5_accounts = useCFDCanGetMoreMT5Accounts();
+
+ const wallet_account = useActiveWallet();
+ if (!wallet_account) return null;
+
+ const getMT5AccountAuthStatus = (current_acc_status: string) => {
+ if (current_acc_status === 'proof_failed') {
+ return 'failed';
+ }
+ if (current_acc_status === 'verification_pending') {
+ return 'pending';
+ }
+ return null;
+ };
+
+ return (
+
+
+
+
+
+
+ {combined_cfd_mt5_accounts.map((existing_account, index) => {
+ const {
+ action_type,
+ description,
+ icon,
+ key,
+ landing_company_short,
+ market_type,
+ name,
+ platform,
+ status,
+ sub_title,
+ } = existing_account;
+ const list_size = combined_cfd_mt5_accounts.length;
+ const mt5_account_status = status ? getMT5AccountAuthStatus(status) : null;
+ return (
+
+ );
+ })}
+ {can_get_more_cfd_mt5_accounts && (
+
+ )}
+ {available_dxtrade_accounts?.length > 0 && (
+
+
+
+
+
+ )}
+ {available_dxtrade_accounts?.map(account => {
+ const existing_accounts = getExistingAccounts(account.platform ?? '', account.market_type ?? '');
+ const has_existing_accounts = existing_accounts.length > 0;
+ return has_existing_accounts ? (
+ existing_accounts.map((existing_account: TDetailsOfEachMT5Loginid) => (
+
+ ))
+ ) : (
+
+ );
+ })}
+
+ );
+});
+
+const WalletCFDsListing = observer(({ fiat_wallet_currency = 'USD' }: TProps) => {
+ const {
+ client,
+ modules: { cfd },
+ ui,
+ } = useStore();
+
+ const { toggleCompareAccountsModal } = cfd;
+ const { is_landing_company_loaded, is_logging_in, is_switching } = client;
+ const { is_mobile } = ui;
+
+ const wallet_account = useActiveWallet();
+
+ if (!wallet_account || !is_landing_company_loaded || is_switching || is_logging_in)
+ return (
+
+ );
+
+ const { currency, landing_company_name, is_virtual } = wallet_account;
+ const accounts_sub_text =
+ landing_company_name === 'svg' || is_virtual ? (
+
+ ) : (
+
+ );
+
+ const is_fiat = !isCryptocurrency(currency) && currency !== 'USDT';
+
+ return (
+
+
+
+
+
+
+ {accounts_sub_text}
+
+
+
+ )
+ }
+ description={
+
+ Learn more'
+ }
+ components={[]}
+ />
+
+ }
+ is_outside_grid_container={!is_fiat}
+ >
+ {is_mobile && (
+
+
+ {accounts_sub_text}
+
+
+ )}
+ {is_fiat ? : }
+
+ );
+});
+
+export default WalletCFDsListing;
diff --git a/packages/appstore/src/components/wallet-content/wallet-content-divider.tsx b/packages/appstore/src/components/wallet-content/wallet-content-divider.tsx
new file mode 100644
index 000000000000..442c7c4ad486
--- /dev/null
+++ b/packages/appstore/src/components/wallet-content/wallet-content-divider.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import classNames from 'classnames';
+
+const WalletContentDivider = ({ is_demo_divider }: { is_demo_divider?: boolean }) => (
+
+);
+
+export default WalletContentDivider;
diff --git a/packages/appstore/src/components/wallet-content/wallet-content.scss b/packages/appstore/src/components/wallet-content/wallet-content.scss
new file mode 100644
index 000000000000..dca6d6f6931d
--- /dev/null
+++ b/packages/appstore/src/components/wallet-content/wallet-content.scss
@@ -0,0 +1,75 @@
+.wallet-content {
+ &__loader {
+ padding: 2.4rem;
+
+ @include mobile {
+ padding: 1.6rem 0;
+ }
+ }
+
+ &__divider {
+ border: 1px solid var(--general-section-1);
+ margin-inline: 2.4rem;
+
+ &-demo {
+ border-color: var(--wallet-demo-divider-color);
+ }
+ }
+
+ &__border-reset {
+ border: 0;
+ }
+
+ &__disclaimer {
+ width: 100%;
+ height: 7rem;
+ display: flex;
+ align-items: center;
+ backface-visibility: hidden;
+ background-color: var(--wallet-eu-disclaimer);
+ border-radius: 0 0 $BORDER_RADIUS * 4 $BORDER_RADIUS * 4;
+
+ @include mobile {
+ height: 8rem;
+ border: 1px solid var(--wallet-eu-disclaimer);
+ }
+
+ &-text {
+ padding: 0 4rem;
+
+ @include mobile {
+ padding: 0 1.5rem;
+ }
+ }
+ }
+
+ &__cfd {
+ & .listing-container__content {
+ padding-block-start: 0;
+ }
+
+ & .cfd-accounts__compare-table-title {
+ padding-left: 0.8rem;
+ }
+
+ &-crypto {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 2.4rem;
+
+ @include mobile {
+ padding: 0;
+ }
+
+ &-title {
+ padding: 2.4rem;
+
+ @include mobile {
+ padding: 2.4rem 1.6rem;
+ text-align: center;
+ }
+ }
+ }
+ }
+}
diff --git a/packages/appstore/src/components/wallet-content/wallet-content.tsx b/packages/appstore/src/components/wallet-content/wallet-content.tsx
new file mode 100644
index 000000000000..195b87c978b9
--- /dev/null
+++ b/packages/appstore/src/components/wallet-content/wallet-content.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import classNames from 'classnames';
+import ContentDivider from './wallet-content-divider';
+import WalletCfdsListing from './wallet-cfds-listing';
+import WalletOptionsAndMultipliersListing from './wallet-option-multipliers-listing';
+import EUDisclaimer from 'Components/eu-disclaimer';
+import './wallet-content.scss';
+
+type TProps = {
+ is_demo: boolean;
+ is_malta_wallet: boolean;
+};
+
+const WalletContent = ({ is_demo, is_malta_wallet }: TProps) => {
+ return (
+
+
+
+
+
+ {is_malta_wallet && !is_demo && (
+
+ )}
+
+ );
+};
+
+export default WalletContent;
diff --git a/packages/appstore/src/components/wallet-content/wallet-option-multipliers-listing.tsx b/packages/appstore/src/components/wallet-content/wallet-option-multipliers-listing.tsx
new file mode 100644
index 000000000000..c42fb486d956
--- /dev/null
+++ b/packages/appstore/src/components/wallet-content/wallet-option-multipliers-listing.tsx
@@ -0,0 +1,131 @@
+import React from 'react';
+import { Text, StaticUrl } from '@deriv/components';
+import { Localize, localize } from '@deriv/translations';
+import ListingContainer from 'Components/containers/listing-container';
+import TradingAppCard from 'Components/containers/trading-app-card';
+import PlatformLoader from 'Components/pre-loader/platform-loader';
+import { getHasDivider } from 'Constants/utils';
+import { Jurisdiction } from '@deriv/shared';
+import { useStore, observer } from '@deriv/stores';
+import { useActiveWallet } from '@deriv/hooks';
+import './wallet-content.scss';
+
+type TProps = {
+ landing_company_name: string | undefined;
+};
+
+const OptionsTitle = observer(({ landing_company_name }: TProps) => {
+ const {
+ ui: { is_mobile },
+ } = useStore();
+
+ const is_svg_wallet = landing_company_name === 'svg';
+
+ if (is_svg_wallet && !is_mobile) {
+ return (
+
+
+
+ );
+ } else if (!is_svg_wallet && !is_mobile) {
+ return (
+
+
+
+ );
+ }
+ return null;
+});
+
+const ListingContainerDescription = ({ landing_company_name }: TProps) =>
+ landing_company_name === 'svg' ? (
+
+ ,
+ ,
+ ]}
+ />
+
+ ) : (
+
+ ]}
+ />
+
+ );
+
+const WalletOptionsAndMultipliersListing = observer(() => {
+ const { traders_hub, client, ui } = useStore();
+ const { setShouldShowCooldownModal, openRealAccountSignup } = ui;
+ const {
+ is_landing_company_loaded,
+ has_maltainvest_account,
+ real_account_creation_unlock_date,
+ is_logging_in,
+ is_switching,
+ } = client;
+ const { available_platforms, is_eu_user, is_real, no_MF_account, no_CR_account, is_demo } = traders_hub;
+
+ const wallet_account = useActiveWallet();
+
+ if (!wallet_account || is_switching || is_logging_in || !is_landing_company_loaded) {
+ return (
+
+ );
+ }
+
+ const platforms_action_type =
+ is_demo || (!no_CR_account && !is_eu_user) || (has_maltainvest_account && is_eu_user) ? 'trade' : 'none';
+
+ const derivAccountAction = () => {
+ if (no_MF_account) {
+ if (real_account_creation_unlock_date) {
+ setShouldShowCooldownModal(true);
+ } else {
+ openRealAccountSignup(Jurisdiction.MALTA_INVEST);
+ }
+ } else {
+ openRealAccountSignup(Jurisdiction.SVG);
+ }
+ };
+
+ return (
+ }
+ description={}
+ is_deriv_platform
+ >
+ {is_real && (no_CR_account || no_MF_account) && (
+
+
+
+ )}
+ {available_platforms.map((available_platform, index) => (
+
+ ))}
+
+ );
+});
+
+export default WalletOptionsAndMultipliersListing;
diff --git a/packages/appstore/src/components/wallet-content/wallet-transfer-block.tsx b/packages/appstore/src/components/wallet-content/wallet-transfer-block.tsx
new file mode 100644
index 000000000000..b2e04796583d
--- /dev/null
+++ b/packages/appstore/src/components/wallet-content/wallet-transfer-block.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import { Button, Text } from '@deriv/components';
+import { formatMoney } from '@deriv/shared';
+import { observer, useStore } from '@deriv/stores';
+import { Localize } from '@deriv/translations';
+import CurrencySwitcherContainer from 'Components/containers/currency-switcher-container';
+import { TWalletAccount } from 'Types';
+
+type TProps = {
+ wallet_account: TWalletAccount;
+};
+
+const WalletTransferBlock = observer(({ wallet_account }: TProps) => {
+ const { traders_hub, ui } = useStore();
+ const { setIsWalletModalVisible } = ui;
+ const { setWalletModalActiveWalletID, setWalletModalActiveTab } = traders_hub;
+
+ const { currency, balance, loginid } = wallet_account;
+
+ return (
+ {
+ setWalletModalActiveTab('Transfer');
+ setIsWalletModalVisible(true);
+ setWalletModalActiveWalletID(loginid);
+ }}
+ secondary
+ className='currency-switcher__button'
+ >
+
+
+ }
+ has_interaction
+ show_dropdown={false}
+ >
+
+
+ {formatMoney(currency, balance, true)} {currency}
+
+
+ {loginid}
+
+
+
+ );
+});
+export default WalletTransferBlock;
diff --git a/packages/appstore/src/components/wallet-deposit/index.ts b/packages/appstore/src/components/wallet-deposit/index.ts
new file mode 100644
index 000000000000..7a81ec16480e
--- /dev/null
+++ b/packages/appstore/src/components/wallet-deposit/index.ts
@@ -0,0 +1,3 @@
+import WalletDeposit from './wallet-deposit';
+
+export default WalletDeposit;
diff --git a/packages/appstore/src/components/wallet-deposit/wallet-deposit.scss b/packages/appstore/src/components/wallet-deposit/wallet-deposit.scss
new file mode 100644
index 000000000000..2daf382ce975
--- /dev/null
+++ b/packages/appstore/src/components/wallet-deposit/wallet-deposit.scss
@@ -0,0 +1,7 @@
+.wallet-deposit {
+ &__fiat-container {
+ display: flex;
+ max-width: 58.8rem;
+ margin: 0 auto;
+ }
+}
diff --git a/packages/appstore/src/components/wallet-deposit/wallet-deposit.tsx b/packages/appstore/src/components/wallet-deposit/wallet-deposit.tsx
new file mode 100644
index 000000000000..4e26439f5c3f
--- /dev/null
+++ b/packages/appstore/src/components/wallet-deposit/wallet-deposit.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { useCurrencyConfig } from '@deriv/hooks';
+import { useStore, observer } from '@deriv/stores';
+import { Div100vhContainer } from '@deriv/components';
+import DepositFiatIframe from '@deriv/cashier/src/modules/deposit-fiat/components/deposit-fiat-iframe/deposit-fiat-iframe';
+import './wallet-deposit.scss';
+
+const WalletDeposit = observer(() => {
+ const { client, ui } = useStore();
+ const { is_mobile } = ui;
+ const { currency, loginid } = client;
+
+ const { getConfig } = useCurrencyConfig();
+ const currency_config = getConfig(currency);
+ const is_crypto = currency_config?.is_crypto;
+
+ //TODO: remove when selected wallet will be provided to WalletDeposit props
+ const real_fiat_wallet = loginid?.startsWith('CRW') && !is_crypto;
+
+ return real_fiat_wallet ? (
+
+
+
+ ) : (
+ Deposit Development Is In Progress
+ );
+});
+
+export default WalletDeposit;
diff --git a/packages/appstore/src/components/wallet-header/__tests__/wallet-header.spec.tsx b/packages/appstore/src/components/wallet-header/__tests__/wallet-header.spec.tsx
new file mode 100644
index 000000000000..f16b91d0044c
--- /dev/null
+++ b/packages/appstore/src/components/wallet-header/__tests__/wallet-header.spec.tsx
@@ -0,0 +1,336 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+import { getStatusBadgeConfig } from '@deriv/account';
+import { mockStore, StoreProvider } from '@deriv/stores';
+import { TWalletAccount } from 'Types';
+import WalletHeader from '..';
+import { MT5_ACCOUNT_STATUS } from '@deriv/shared';
+import { useMFAccountStatus } from '@deriv/hooks';
+
+const mockedRootStore = mockStore({});
+
+jest.mock('@deriv/account', () => ({
+ ...jest.requireActual('@deriv/account'),
+ getStatusBadgeConfig: jest.fn(() => ({ icon: '', text: '' })),
+}));
+
+jest.mock('@deriv/hooks', () => ({
+ ...jest.requireActual('@deriv/hooks'),
+ useWalletModalActionHandler: jest.fn(() => ({ setWalletModalActiveTabIndex: jest.fn(), handleAction: jest.fn() })),
+ useMFAccountStatus: jest.fn(),
+}));
+
+describe('', () => {
+ const default_mocked_props: TWalletAccount = {
+ is_demo: false,
+ currency: 'USD',
+ landing_company_name: 'svg',
+ balance: 10000,
+ loginid: 'CRW123123',
+ is_malta_wallet: false,
+ is_selected: true,
+ gradient_header_class: 'wallet-header__usd-bg',
+ gradient_card_class: 'wallet-card__usd-bg',
+ wallet_currency_type: '',
+ currency_config: undefined,
+ icon: '',
+ };
+
+ beforeEach(() => {
+ (useMFAccountStatus as jest.Mock).mockReturnValue(null);
+ });
+
+ describe('Check currency card', () => {
+ it('Should render right currency card for DEMO', () => {
+ const mocked_props = { ...default_mocked_props, is_demo: true };
+ render(
+
+
+
+ );
+
+ expect(screen.queryByTestId(`dt_demo`)).toBeInTheDocument();
+ });
+
+ it('Should render right currency card for REAL SVG fiat', () => {
+ const mocked_props = { ...default_mocked_props, currency: 'AUD' };
+ render(
+
+
+
+ );
+
+ expect(screen.queryByTestId(`dt_${mocked_props.currency.toLowerCase()}`)).toBeInTheDocument();
+ });
+
+ it('Should render right currency card for REAL SVG crypto', () => {
+ const mocked_props = { ...default_mocked_props, currency: 'ETH' };
+ render(
+
+
+
+ );
+
+ expect(screen.queryByTestId(`dt_${mocked_props.currency.toLowerCase()}`)).toBeInTheDocument();
+ });
+
+ it('Should render right currency card for REAL MALTA fiat', () => {
+ const mocked_props = { ...default_mocked_props, currency: 'ETH', landing_company_name: 'malta' };
+ render(
+
+
+
+ );
+
+ expect(screen.queryByTestId(`dt_${mocked_props.currency.toLowerCase()}`)).toBeInTheDocument();
+ });
+ });
+
+ describe('Check balance', () => {
+ it('Should render right balance with balance as props', () => {
+ const mocked_props = {
+ ...default_mocked_props,
+ currency: 'EUR',
+ landing_company_name: 'malta',
+ balance: 2345.56,
+ };
+ render(
+
+
+
+ );
+
+ expect(screen.getByText('2,345.56 EUR')).toBeInTheDocument();
+ });
+
+ it('Should render balance === 0.00', () => {
+ const mocked_props = {
+ ...default_mocked_props,
+ currency: 'EUR',
+ landing_company_name: 'malta',
+ balance: 0,
+ };
+ render(
+
+
+
+ );
+
+ expect(screen.queryByText(`0.00 ${mocked_props.currency}`)).toBeInTheDocument();
+ });
+
+ it('Should render badge Pending verification', () => {
+ getStatusBadgeConfig.mockReturnValue({ icon: '', text: 'Pending verification' });
+ (useMFAccountStatus as jest.Mock).mockReturnValue(MT5_ACCOUNT_STATUS.PENDING);
+
+ const mocked_props = {
+ ...default_mocked_props,
+ currency: 'EUR',
+ landing_company_name: 'malta',
+ balance: 0,
+ };
+
+ const mocked_store = mockStore({
+ client: {
+ loginid: 'MFW1231',
+ },
+ traders_hub: { is_eu_user: true },
+ });
+
+ render(
+
+
+
+ );
+
+ expect(screen.queryByText(/Pending verification/i)).toBeInTheDocument();
+ expect(screen.queryByText(/balance/i)).not.toBeInTheDocument();
+ });
+
+ it('Should render badge Verification failed', () => {
+ getStatusBadgeConfig.mockReturnValue({ icon: '', text: 'Verification failed' });
+ (useMFAccountStatus as jest.Mock).mockReturnValue(MT5_ACCOUNT_STATUS.FAILED);
+
+ const mocked_props = {
+ ...default_mocked_props,
+ currency: 'EUR',
+ landing_company_name: 'malta',
+ balance: 0,
+ };
+
+ const mocked_store = mockStore({
+ client: {
+ loginid: 'MFW1231',
+ },
+ traders_hub: { is_eu_user: true },
+ });
+
+ render(
+
+
+
+ );
+
+ expect(screen.queryByText(/Verification failed/i)).toBeInTheDocument();
+ expect(screen.queryByText(/balance/i)).not.toBeInTheDocument();
+ });
+
+ it('Should render badge Need verification', () => {
+ getStatusBadgeConfig.mockReturnValue({ icon: '', text: 'Need verification' });
+ (useMFAccountStatus as jest.Mock).mockReturnValue(MT5_ACCOUNT_STATUS.NEEDS_VERIFICATION);
+
+ const mocked_props = {
+ ...default_mocked_props,
+ currency: 'EUR',
+ landing_company_name: 'malta',
+ balance: 0,
+ };
+
+ const mocked_store = mockStore({
+ client: {
+ loginid: 'MFW1231',
+ },
+ traders_hub: { is_eu_user: true },
+ });
+
+ render(
+
+
+
+ );
+
+ expect(screen.queryByText(/Need verification/i)).toBeInTheDocument();
+ expect(screen.queryByText(/balance/i)).not.toBeInTheDocument();
+ });
+ });
+
+ describe('Check buttons', () => {
+ it('Buttons collapsed', () => {
+ const mocked_props = {
+ ...default_mocked_props,
+ currency: 'EUR',
+ balance: 0,
+ is_selected: false,
+ is_demo: true,
+ };
+
+ render(
+
+
+
+ );
+
+ expect(screen.queryByRole('button', { name: /Transfer/i })).not.toBeInTheDocument();
+ });
+
+ it('Buttons uncollapsed', () => {
+ const mocked_props = {
+ ...default_mocked_props,
+ currency: 'EUR',
+ balance: 0,
+ is_selected: true,
+ is_demo: true,
+ };
+
+ const mocked_store = mockStore({
+ client: {
+ loginid: 'CRW1231',
+ },
+ });
+
+ render(
+
+
+
+ );
+
+ expect(screen.getByRole('button', { name: /Transfer/i })).toBeInTheDocument();
+ });
+
+ it('Arrow button click and switchAccount should be called', async () => {
+ const mocked_props = {
+ ...default_mocked_props,
+ balance: 0,
+ is_selected: false,
+ is_demo: true,
+ loginid: 'CRW1231',
+ };
+
+ render(
+
+
+
+ );
+
+ const arrow_btn = screen.getByTestId('dt_arrow');
+ userEvent.click(arrow_btn);
+
+ await waitFor(() => {
+ expect(mockedRootStore.client.switchAccount).toBeCalledTimes(1);
+ });
+ });
+
+ it('Check buttons for demo', () => {
+ const mocked_props = {
+ ...default_mocked_props,
+ balance: 0,
+ currency: 'EUR',
+ is_demo: true,
+ loginid: 'VRW123123',
+ };
+
+ const mocked_store = mockStore({
+ client: {
+ loginid: 'VRW123123',
+ },
+ });
+
+ render(
+
+
+
+ );
+
+ const transfer_btn = screen.getByRole('button', { name: /Transfer/i });
+ const transactions_btn = screen.getByRole('button', { name: /Transactions/i });
+ const reset_btn = screen.getByRole('button', { name: /Reset balance/i });
+
+ expect(transfer_btn).toBeInTheDocument();
+ expect(transactions_btn).toBeInTheDocument();
+ expect(reset_btn).toBeInTheDocument();
+ });
+
+ it('Check buttons for real', () => {
+ const mocked_props = {
+ ...default_mocked_props,
+ balance: 1230,
+ currency: 'EUR',
+ loginid: 'CRW123123',
+ };
+
+ const mocked_store = mockStore({
+ client: {
+ loginid: 'CRW123123',
+ },
+ });
+
+ render(
+
+
+
+ );
+
+ const deposit_btn = screen.getByRole('button', { name: /Deposit/i });
+ const withdraw_btn = screen.getByRole('button', { name: /Withdraw/i });
+ const transfer_btn = screen.getByRole('button', { name: /Transfer/i });
+ const transactions_btn = screen.getByRole('button', { name: /Transactions/i });
+
+ expect(deposit_btn).toBeInTheDocument();
+ expect(withdraw_btn).toBeInTheDocument();
+ expect(transfer_btn).toBeInTheDocument();
+ expect(transactions_btn).toBeInTheDocument();
+ });
+ });
+});
diff --git a/packages/appstore/src/components/wallet-header/index.ts b/packages/appstore/src/components/wallet-header/index.ts
new file mode 100644
index 000000000000..ed176c4b242f
--- /dev/null
+++ b/packages/appstore/src/components/wallet-header/index.ts
@@ -0,0 +1,3 @@
+import WalletHeader from './wallet-header';
+
+export default WalletHeader;
diff --git a/packages/appstore/src/components/wallet-header/wallet-currency-card.tsx b/packages/appstore/src/components/wallet-header/wallet-currency-card.tsx
new file mode 100644
index 000000000000..967614865c52
--- /dev/null
+++ b/packages/appstore/src/components/wallet-header/wallet-currency-card.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { WalletIcon } from '@deriv/components';
+import { TWalletAccount } from 'Types';
+
+type TWalletCurrencyCard = Pick & {
+ gradient_class?: string;
+ icon_type?: string;
+};
+
+const WalletCurrencyCard = ({ is_demo, currency, icon, icon_type, gradient_class }: TWalletCurrencyCard) => {
+ return (
+
+
+
+ );
+};
+
+export default WalletCurrencyCard;
diff --git a/packages/appstore/src/components/wallet-header/wallet-header-balance.tsx b/packages/appstore/src/components/wallet-header/wallet-header-balance.tsx
new file mode 100644
index 000000000000..ad4bd200e8f7
--- /dev/null
+++ b/packages/appstore/src/components/wallet-header/wallet-header-balance.tsx
@@ -0,0 +1,67 @@
+import React from 'react';
+import { Text, StatusBadge } from '@deriv/components';
+import { getStatusBadgeConfig } from '@deriv/account';
+import { useStore, observer } from '@deriv/stores';
+import { Localize } from '@deriv/translations';
+import { TWalletAccount } from 'Types';
+import { formatMoney } from '@deriv/shared';
+import { useMFAccountStatus } from '@deriv/hooks';
+
+type TWalletHeaderBalance = Pick;
+
+const WalletHeaderBalance = observer(({ balance, currency }: TWalletHeaderBalance) => {
+ const {
+ traders_hub: { openFailedVerificationModal, is_eu_user },
+ client,
+ } = useStore();
+ const mf_account_status = useMFAccountStatus();
+
+ const { account_status: { authentication } = {} } = client;
+
+ const balance_amount = (
+
+
+
+ );
+
+ // TODO: just for test use empty object. When BE will be ready it will be fixed
+ const { text: badge_text, icon: badge_icon } = getStatusBadgeConfig(
+ mf_account_status,
+ openFailedVerificationModal,
+ {
+ platform: '',
+ category: '',
+ type: '',
+ jurisdiction: '',
+ },
+ undefined,
+ { poi_status: authentication?.identity?.status, poa_status: authentication?.document?.status }
+ );
+
+ return (
+
+ {mf_account_status && is_eu_user ? (
+
+ ) : (
+
+
+
+
+ {balance_amount}
+
+ )}
+
+ );
+});
+export default WalletHeaderBalance;
diff --git a/packages/appstore/src/components/wallet-header/wallet-header-buttons.tsx b/packages/appstore/src/components/wallet-header/wallet-header-buttons.tsx
new file mode 100644
index 000000000000..2a13cde524cd
--- /dev/null
+++ b/packages/appstore/src/components/wallet-header/wallet-header-buttons.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import { observer, useStore } from '@deriv/stores';
+import { TWalletAccount, TWalletButton } from 'Types';
+import WalletButton from 'Components/wallet-button';
+
+type TWalletHeaderButtons = {
+ is_disabled: boolean;
+ is_open: boolean;
+ buttons: TWalletButton[];
+ wallet_account: TWalletAccount;
+};
+
+const WalletHeaderButtons = observer(({ is_disabled, is_open, buttons, wallet_account }: TWalletHeaderButtons) => {
+ const { ui, traders_hub } = useStore();
+ const { setIsWalletModalVisible } = ui;
+ const { setWalletModalActiveWalletID, setWalletModalActiveTab } = traders_hub;
+
+ return (
+
+ {buttons.map(button => {
+ button.action = () => {
+ setWalletModalActiveTab(button.name);
+ setIsWalletModalVisible(true);
+ setWalletModalActiveWalletID(wallet_account.loginid);
+ };
+
+ return (
+
+ );
+ })}
+
+ );
+});
+export default WalletHeaderButtons;
diff --git a/packages/appstore/src/components/wallet-header/wallet-header-title.tsx b/packages/appstore/src/components/wallet-header/wallet-header-title.tsx
new file mode 100644
index 000000000000..ad88f61d55f5
--- /dev/null
+++ b/packages/appstore/src/components/wallet-header/wallet-header-title.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { Text, Badge } from '@deriv/components';
+import { Localize } from '@deriv/translations';
+import { TWalletAccount } from 'Types';
+
+type TWalletHeaderTitle = Pick;
+
+const WalletHeaderTitle = ({ is_demo, currency, landing_company_name }: TWalletHeaderTitle) => {
+ return (
+
+
+ {is_demo ? (
+
+ ) : (
+
+ )}
+
+ {!is_demo && (
+
+ )}
+
+ );
+};
+
+export default WalletHeaderTitle;
diff --git a/packages/appstore/src/components/wallet-header/wallet-header.scss b/packages/appstore/src/components/wallet-header/wallet-header.scss
new file mode 100644
index 000000000000..adbd6d34988c
--- /dev/null
+++ b/packages/appstore/src/components/wallet-header/wallet-header.scss
@@ -0,0 +1,91 @@
+.wallet-header {
+ padding: 2.4rem;
+ background-color: var(--general-main-1);
+ border-radius: $BORDER_RADIUS * 4;
+ height: 12.8rem;
+
+ &__demo {
+ position: relative;
+ background-color: var(--wallet-demo-bg-color);
+ }
+ &__demo:before {
+ content: ' ';
+ display: block;
+ position: absolute;
+ inset: 0;
+ opacity: 0.1;
+ background-repeat: repeat;
+ background-position: 3% 30%;
+ border-radius: $BORDER_RADIUS * 4;
+ }
+
+ .theme--light &__demo:before {
+ background-image: url('./../../public/images/wallet-header-demo-bg.svg');
+ }
+
+ .theme--dark &__demo:before {
+ background-image: url('./../../public/images/wallet-header-demo-bg-dark.svg');
+ }
+
+ &__container {
+ position: relative;
+ display: flex;
+ height: 8rem;
+ }
+
+ &__currency {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 12.8rem;
+ margin-right: 2.4rem;
+ border-radius: $BORDER_RADIUS * 2;
+ }
+
+ &__description {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ padding-block: 0.5rem;
+
+ &-title {
+ display: flex;
+ align-items: center;
+ }
+
+ &-badge {
+ margin-left: 0.8rem;
+ }
+
+ &-buttons {
+ display: flex;
+ }
+ }
+
+ &__balance {
+ display: flex;
+ align-self: center;
+ padding-block: 1.3rem;
+ margin-left: auto;
+
+ &-title-amount {
+ display: flex;
+ flex-direction: column;
+ padding-inline: 2.4rem;
+
+ &-title {
+ align-self: flex-end;
+ }
+ }
+
+ &-arrow-icon {
+ cursor: pointer;
+ transition: transform 0.3s ease;
+ transform: rotate(0deg);
+ align-self: center;
+ }
+ &-arrow-icon-active {
+ transform: rotate(180deg);
+ }
+ }
+}
diff --git a/packages/appstore/src/components/wallet-header/wallet-header.tsx b/packages/appstore/src/components/wallet-header/wallet-header.tsx
new file mode 100644
index 000000000000..ad466d49f9a0
--- /dev/null
+++ b/packages/appstore/src/components/wallet-header/wallet-header.tsx
@@ -0,0 +1,72 @@
+import React from 'react';
+import { Icon } from '@deriv/components';
+import classNames from 'classnames';
+import WalletCurrencyCard from './wallet-currency-card';
+import WalletHeaderButtons from './wallet-header-buttons';
+import WalletHeaderTitle from './wallet-header-title';
+import WalletHeaderBalance from './wallet-header-balance';
+import { TWalletAccount } from 'Types';
+import { getWalletHeaderButtons } from 'Constants/utils';
+import { observer, useStore } from '@deriv/stores';
+import './wallet-header.scss';
+import { useMFAccountStatus } from '@deriv/hooks';
+
+type TWalletHeader = {
+ wallet_account: TWalletAccount;
+};
+
+const WalletHeader = observer(({ wallet_account }: TWalletHeader) => {
+ const { client } = useStore();
+ const { switchAccount, loginid } = client;
+ const is_active = wallet_account.is_selected;
+ const mf_account_status = useMFAccountStatus();
+
+ const { is_demo, currency, gradient_card_class, currency_config, icon, balance, landing_company_name } =
+ wallet_account;
+
+ const wallet_buttons = getWalletHeaderButtons(wallet_account.is_demo);
+
+ const onArrowClickHandler = async () => {
+ if (loginid !== wallet_account.loginid) await switchAccount(wallet_account.loginid);
+ };
+
+ return (
+
+ );
+});
+
+export default WalletHeader;
diff --git a/packages/appstore/src/components/wallet-jurisdiction-badge/__tests__/wallet-jurisdiction-badge.spec.tsx b/packages/appstore/src/components/wallet-jurisdiction-badge/__tests__/wallet-jurisdiction-badge.spec.tsx
new file mode 100644
index 000000000000..8c036a66244c
--- /dev/null
+++ b/packages/appstore/src/components/wallet-jurisdiction-badge/__tests__/wallet-jurisdiction-badge.spec.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import WalletJurisdictionBadge from '../wallet-jurisdiction-badge';
+import { render, screen } from '@testing-library/react';
+
+describe('WalletJurisdictionBadge', () => {
+ it('Should render demo badge', () => {
+ render();
+
+ expect(screen.getByText('Demo')).toBeInTheDocument();
+ });
+
+ it('Should render svg badge', () => {
+ render();
+
+ expect(screen.getByText('SVG')).toBeInTheDocument();
+ });
+
+ it('Should render malta badge', () => {
+ render();
+
+ expect(screen.getByText('MALTA')).toBeInTheDocument();
+ });
+});
diff --git a/packages/appstore/src/components/wallet-jurisdiction-badge/index.ts b/packages/appstore/src/components/wallet-jurisdiction-badge/index.ts
new file mode 100644
index 000000000000..eb311bb13e05
--- /dev/null
+++ b/packages/appstore/src/components/wallet-jurisdiction-badge/index.ts
@@ -0,0 +1,3 @@
+import WalletJurisdictionBadge from './wallet-jurisdiction-badge';
+
+export { WalletJurisdictionBadge };
diff --git a/packages/appstore/src/components/wallet-jurisdiction-badge/wallet-jurisdiction-badge.tsx b/packages/appstore/src/components/wallet-jurisdiction-badge/wallet-jurisdiction-badge.tsx
new file mode 100644
index 000000000000..3447b05ea32d
--- /dev/null
+++ b/packages/appstore/src/components/wallet-jurisdiction-badge/wallet-jurisdiction-badge.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { Badge } from '@deriv/components';
+import { localize } from '@deriv/translations';
+
+type TWalletJurisdictionBadge = {
+ is_demo: boolean;
+ shortcode?: string;
+};
+
+const WalletJurisdictionBadge = ({ is_demo, shortcode }: TWalletJurisdictionBadge) => {
+ return is_demo ? (
+
+ ) : (
+
+ );
+};
+
+export default WalletJurisdictionBadge;
diff --git a/packages/appstore/src/components/wallet-transfer/__tests__/wallet-transfer.spec.tsx b/packages/appstore/src/components/wallet-transfer/__tests__/wallet-transfer.spec.tsx
new file mode 100644
index 000000000000..888267235c12
--- /dev/null
+++ b/packages/appstore/src/components/wallet-transfer/__tests__/wallet-transfer.spec.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import WalletTransfer from '../wallet-transfer';
+import { APIProvider } from '@deriv/api';
+import { mockStore, StoreProvider } from '@deriv/stores';
+import { render, screen } from '@testing-library/react';
+
+jest.mock('../transfer-account-selector', () => jest.fn(() => TransferAccountSelector
));
+
+jest.mock('@deriv/components', () => ({
+ ...jest.requireActual('@deriv/components'),
+ AmountInput: () => AmountInput
,
+}));
+
+jest.mock('@deriv/api', () => ({
+ ...jest.requireActual('@deriv/api'),
+ useFetch: jest.fn(() => ({ data: undefined })),
+}));
+
+describe('WalletTransfer', () => {
+ const mock = mockStore({
+ client: {
+ loginid: 'CRW1030',
+ accounts: {
+ CRW1030: {
+ token: 'token',
+ },
+ },
+ },
+ });
+
+ it('Should render two amount inputs and two transfer account selectors', () => {
+ render(
+
+
+
+
+
+ );
+
+ expect(screen.getAllByText('AmountInput')).toHaveLength(2);
+ expect(screen.getAllByText('TransferAccountSelector')).toHaveLength(2);
+ });
+});
diff --git a/packages/appstore/src/components/wallet-transfer/index.ts b/packages/appstore/src/components/wallet-transfer/index.ts
new file mode 100644
index 000000000000..488f1606ef01
--- /dev/null
+++ b/packages/appstore/src/components/wallet-transfer/index.ts
@@ -0,0 +1,3 @@
+import WalletTransfer from './wallet-transfer';
+
+export default WalletTransfer;
diff --git a/packages/appstore/src/components/wallet-transfer/transfer-account-selector/__tests__/transfer-account-list.spec.tsx b/packages/appstore/src/components/wallet-transfer/transfer-account-selector/__tests__/transfer-account-list.spec.tsx
new file mode 100644
index 000000000000..93c945e7c9ee
--- /dev/null
+++ b/packages/appstore/src/components/wallet-transfer/transfer-account-selector/__tests__/transfer-account-list.spec.tsx
@@ -0,0 +1,98 @@
+import React from 'react';
+import TransferAccountList from '../transfer-account-list';
+import { render, screen } from '@testing-library/react';
+
+jest.mock('../../wallet-transfer-tile/wallet-transfer-tile', () => jest.fn(() => WalletTransferTile
));
+
+describe('TransferAccountList', () => {
+ let mocked_props: React.ComponentProps;
+
+ beforeEach(() => {
+ mocked_props = {
+ is_mobile: false,
+ selected_account: {
+ account_type: 'wallet',
+ balance: 100,
+ currency: 'USD',
+ display_currency_code: 'USD',
+ gradient_class: 'wallet-card__usd-bg',
+ icon: 'Icon',
+ is_demo: false,
+ loginid: 'CRW1000',
+ shortcode: 'svg',
+ type: 'fiat',
+ active_wallet_icon: 'Wallet Icon',
+ },
+ setIsListModalOpen: jest.fn(),
+ setSelectedAccount: jest.fn(),
+ transfer_accounts: {
+ trading_accounts: {
+ CR1000: {
+ account_type: 'trading',
+ balance: 10,
+ currency: 'USD',
+ display_currency_code: 'USD',
+ gradient_class: 'wallet-card__usd-bg',
+ icon: 'Icon',
+ is_demo: false,
+ loginid: '1',
+ shortcode: 'svg',
+ type: 'fiat',
+ active_wallet_icon: 'IcCurrencyUsd',
+ },
+ MTR2000: {
+ account_type: 'mt5',
+ balance: 10,
+ currency: 'USD',
+ display_currency_code: 'USD',
+ gradient_class: 'wallet-card__usd-bg',
+ icon: 'Icon',
+ is_demo: false,
+ loginid: '2',
+ shortcode: 'svg',
+ type: 'fiat',
+ active_wallet_icon: 'IcCurrencyUsd',
+ },
+ },
+
+ wallet_accounts: {
+ CRW1000: {
+ account_type: 'wallet',
+ balance: 10000,
+ currency: 'USD',
+ display_currency_code: 'USD',
+ gradient_class: 'wallet-card__usd-bg',
+ icon: 'Icon',
+ is_demo: false,
+ loginid: '3',
+ shortcode: 'svg',
+ type: 'fiat',
+ active_wallet_icon: 'IcCurrencyUsd',
+ },
+ },
+ },
+ transfer_hint: 'Transfer hint',
+ wallet_name: 'USD Wallet',
+ };
+ });
+
+ it('Should render proper titles of transfer accounts', () => {
+ render();
+
+ expect(screen.getByText('Trading accounts linked with USD Wallet')).toBeInTheDocument();
+ expect(screen.getByText('Wallets')).toBeInTheDocument();
+ });
+
+ it('Should render proper amount of transfer accounts', () => {
+ render();
+
+ expect(screen.getAllByText('WalletTransferTile')).toHaveLength(3);
+ });
+
+ it('Should render transfer hint for Wallets account list', () => {
+ mocked_props.transfer_accounts = { ...mocked_props.transfer_accounts, trading_accounts: {} };
+ render();
+
+ expect(screen.getByText('Transfer hint')).toBeInTheDocument();
+ });
+});
diff --git a/packages/appstore/src/components/wallet-transfer/transfer-account-selector/__tests__/transfer-account-selector.spec.tsx b/packages/appstore/src/components/wallet-transfer/transfer-account-selector/__tests__/transfer-account-selector.spec.tsx
new file mode 100644
index 000000000000..8784109c5814
--- /dev/null
+++ b/packages/appstore/src/components/wallet-transfer/transfer-account-selector/__tests__/transfer-account-selector.spec.tsx
@@ -0,0 +1,88 @@
+import React from 'react';
+import TransferAccountSelector from '../transfer-account-selector';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
+
+jest.mock('../transfer-account-list', () => jest.fn(() => TransferAccountList
));
+jest.mock('../../wallet-transfer-tile', () => jest.fn(() => WalletTransferTile
));
+
+describe('TransferAccountSelector', () => {
+ let modal_root_el: HTMLDivElement, mocked_props: React.ComponentProps;
+
+ beforeAll(() => {
+ modal_root_el = document.createElement('div');
+ modal_root_el.setAttribute('id', 'modal_root');
+ document.body.appendChild(modal_root_el);
+ });
+
+ beforeEach(() => {
+ mocked_props = {
+ is_mobile: false,
+ is_wallet_name_visible: false,
+ label: 'Transfer from',
+ onSelectAccount: jest.fn(),
+ placeholder: 'Placeholder',
+ portal_id: 'modal_root',
+ setIsWalletNameVisible: jest.fn(),
+ transfer_accounts: {
+ trading_accounts: {},
+ wallet_accounts: {},
+ },
+ transfer_hint: 'Transfer hint',
+ value: undefined,
+ wallet_name: 'USD Wallet',
+ };
+ });
+
+ it('Should render placeholder, if there is no selected account', () => {
+ render();
+
+ expect(screen.getByText('Transfer from')).toBeInTheDocument();
+ expect(screen.getByText('Placeholder')).toBeInTheDocument();
+ expect(screen.getByTestId('dt_chevron_icon')).toBeInTheDocument();
+ });
+
+ it('Should render WalletTransferTile if the account was selected', () => {
+ mocked_props.value = {
+ active_wallet_icon: 'Icon',
+ display_currency_code: 'USD',
+ account_type: 'wallet',
+ balance: 100,
+ currency: 'USD',
+ gradient_class: 'wallet-card__usd-bg',
+ is_demo: false,
+ loginid: '12345678',
+ shortcode: 'svg',
+ type: 'fiat',
+ icon: 'Wallet Icon',
+ };
+ render();
+
+ expect(screen.getByText('Transfer from')).toBeInTheDocument();
+ expect(screen.getByText('WalletTransferTile')).toBeInTheDocument();
+ expect(screen.getByTestId('dt_chevron_icon')).toBeInTheDocument();
+ });
+
+ it('Should render account selector transfer tile with default values default', () => {
+ render();
+
+ expect(screen.getByText('Transfer from')).toBeInTheDocument();
+ expect(screen.getByText('Placeholder')).toBeInTheDocument();
+ expect(screen.getByTestId('dt_chevron_icon')).toBeInTheDocument();
+ });
+
+ it('Should render TransferAccountList when the user is clicking on Transfer selector', () => {
+ render();
+
+ const el_transfer_tile = screen.getByTestId('dt_transfer_account_selector');
+ userEvent.click(el_transfer_tile);
+
+ expect(screen.getByText('TransferAccountList')).toBeInTheDocument();
+ });
+
+ it('Should render proper label', () => {
+ render();
+
+ expect(screen.getByText('Transfer from')).toBeInTheDocument();
+ });
+});
diff --git a/packages/appstore/src/components/wallet-transfer/transfer-account-selector/index.ts b/packages/appstore/src/components/wallet-transfer/transfer-account-selector/index.ts
new file mode 100644
index 000000000000..50a91c417029
--- /dev/null
+++ b/packages/appstore/src/components/wallet-transfer/transfer-account-selector/index.ts
@@ -0,0 +1,3 @@
+import TransferAccountSelector from './transfer-account-selector';
+
+export default TransferAccountSelector;
diff --git a/packages/appstore/src/components/wallet-transfer/transfer-account-selector/transfer-account-list.tsx b/packages/appstore/src/components/wallet-transfer/transfer-account-selector/transfer-account-list.tsx
new file mode 100644
index 000000000000..e7239d33d9db
--- /dev/null
+++ b/packages/appstore/src/components/wallet-transfer/transfer-account-selector/transfer-account-list.tsx
@@ -0,0 +1,102 @@
+import React from 'react';
+import classNames from 'classnames';
+import { Text } from '@deriv/components';
+import { Localize } from '@deriv/translations';
+import WalletTransferTile from '../wallet-transfer-tile';
+import type { TTransferAccount } from 'Types';
+
+type TTransferAccountList = {
+ is_mobile?: boolean;
+ onSelectAccount?: (account: TTransferAccount) => void;
+ selected_account?: TTransferAccount;
+ setIsListModalOpen: (value: boolean) => void;
+ setSelectedAccount: React.Dispatch>;
+ transfer_accounts: Record<'trading_accounts' | 'wallet_accounts', Record>;
+ transfer_hint?: string | JSX.Element;
+ wallet_name?: string;
+};
+
+const TitleLine = () => ;
+
+const TransferAccountList = ({
+ is_mobile,
+ onSelectAccount,
+ selected_account,
+ setIsListModalOpen,
+ setSelectedAccount,
+ transfer_accounts,
+ transfer_hint,
+ wallet_name,
+}: TTransferAccountList) => {
+ const is_single_list = React.useMemo(
+ () =>
+ Object.keys(transfer_accounts).filter(
+ key => Object.keys(transfer_accounts[key as 'trading_accounts' | 'wallet_accounts']).length > 0
+ ).length === 1,
+ [transfer_accounts]
+ );
+
+ return (
+
+ {Object.keys(transfer_accounts).map((key, idx) => {
+ if (Object.values(transfer_accounts[key as 'trading_accounts' | 'wallet_accounts']).length === 0)
+ return null;
+
+ return (
+
+
+
+
+ {key === 'trading_accounts' ? (
+
+ ) : (
+
+ )}
+
+
+
+
+ {Object.values(transfer_accounts[key as 'trading_accounts' | 'wallet_accounts']).map(
+ account => (
+ {
+ setSelectedAccount(account);
+ if (account) onSelectAccount?.(account);
+ setIsListModalOpen(false);
+ }}
+ />
+ )
+ )}
+
+
+ );
+ })}
+
+
+
+ );
+};
+
+const AccountSelectorTransferTile = ({
+ is_mobile,
+ label,
+ placeholder,
+ selected_account,
+}: TAccountSelectorTransferTileProps) => {
+ return (
+
+
+
+
+ {label}
+
+
+ {is_mobile &&
}
+
+
+ {selected_account ? (
+
+ ) : (
+
+ {placeholder}
+
+ )}
+
+
+
+
+
+
setIsWalletNameVisible?.(true)}
+ portalId={portal_id}
+ transition_timeout={is_mobile ? { enter: 250, exit: 0 } : 250}
+ title={label}
+ toggleModal={() => setIsListModalOpen(old => !old)}
+ >
+
+
+
+
+
+
+
AppLinkedWithWalletIcon
),
+ WalletIcon: jest.fn(() => WalletIcon
),
+}));
+
+describe('WalletTransferTile', () => {
+ let mocked_props: Required>;
+
+ beforeEach(() => {
+ mocked_props = {
+ account: {
+ account_type: 'trading',
+ balance: 100,
+ currency: 'USD',
+ display_currency_code: 'USD',
+ gradient_class: 'wallet-card__usd-bg',
+ icon: 'Icon',
+ is_demo: false,
+ shortcode: 'svg',
+ loginid: '12345678',
+ type: 'fiat',
+ active_wallet_icon: 'Wallet Icon',
+ },
+ className: 'classname',
+ has_hover: false,
+ icon_size: 'small',
+ is_active: false,
+ is_list_item: false,
+ is_mobile: false,
+ onClick: jest.fn(),
+ };
+ });
+
+ it('Should render merged icon (App with Wallet)', () => {
+ render();
+
+ expect(screen.getByText('AppLinkedWithWalletIcon')).toBeInTheDocument();
+ });
+
+ it('Should render single wallet icon, if there is wallet account type', () => {
+ mocked_props.account = { ...mocked_props.account, account_type: 'wallet' };
+ render();
+
+ expect(screen.getByText('WalletIcon')).toBeInTheDocument();
+ });
+
+ it('Should render jurisdiction in mobile view', () => {
+ mocked_props.is_list_item = false;
+ mocked_props.is_mobile = true;
+ render();
+
+ expect(screen.getByText('SVG')).toBeInTheDocument();
+ });
+
+ it('Should render jurisdiction in desktop view', () => {
+ mocked_props.is_list_item = true;
+ render();
+
+ expect(screen.getByText('SVG')).toBeInTheDocument();
+ });
+
+ it('Should render proper account label', () => {
+ render();
+
+ expect(screen.getByText('Deriv Apps')).toBeInTheDocument();
+ });
+
+ it('Should render proper account balance', () => {
+ render();
+
+ expect(screen.getByText('Balance: 100.00 USD')).toBeInTheDocument();
+ });
+
+ it('Should trigger onClick callback when the user is clicking on Wallet tile', () => {
+ render();
+
+ const el_wallet_tile = screen.getByTestId('dt_wallet_transfer_tile');
+ userEvent.click(el_wallet_tile);
+
+ expect(mocked_props.onClick).toHaveBeenCalledTimes(1);
+ });
+});
diff --git a/packages/appstore/src/components/wallet-transfer/wallet-transfer-tile/index.ts b/packages/appstore/src/components/wallet-transfer/wallet-transfer-tile/index.ts
new file mode 100644
index 000000000000..e5851511bba4
--- /dev/null
+++ b/packages/appstore/src/components/wallet-transfer/wallet-transfer-tile/index.ts
@@ -0,0 +1,3 @@
+import WalletTransferTile from './wallet-transfer-tile';
+
+export default WalletTransferTile;
diff --git a/packages/appstore/src/components/wallet-transfer/wallet-transfer-tile/wallet-transfer-tile.scss b/packages/appstore/src/components/wallet-transfer/wallet-transfer-tile/wallet-transfer-tile.scss
new file mode 100644
index 000000000000..606c6b4f0890
--- /dev/null
+++ b/packages/appstore/src/components/wallet-transfer/wallet-transfer-tile/wallet-transfer-tile.scss
@@ -0,0 +1,48 @@
+.wallet-transfer-tile {
+ display: flex;
+ align-items: center;
+ justify-content: flex-start;
+ background-color: var(--general-main-1);
+ border-radius: $BORDER_RADIUS;
+ flex-grow: 1;
+
+ @include mobile {
+ flex-direction: column;
+ align-items: flex-start;
+
+ &__icon-with-badge {
+ display: flex;
+ align-items: end;
+ margin-bottom: 0.4rem;
+ }
+ }
+
+ &--hover {
+ &:hover {
+ background-color: var(--general-hover);
+ }
+ }
+
+ &--active {
+ background-color: var(--state-active);
+ }
+
+ &--list-item-background {
+ background-color: var(--general-main-2);
+ }
+
+ &__icon {
+ margin-right: 0.8rem;
+ min-width: 4rem;
+
+ @include mobile {
+ margin-right: 0.4rem;
+ }
+ }
+
+ &__content {
+ display: flex;
+ flex-direction: column;
+ flex-grow: 1;
+ }
+}
diff --git a/packages/appstore/src/components/wallet-transfer/wallet-transfer-tile/wallet-transfer-tile.tsx b/packages/appstore/src/components/wallet-transfer/wallet-transfer-tile/wallet-transfer-tile.tsx
new file mode 100644
index 000000000000..510eebfbc27c
--- /dev/null
+++ b/packages/appstore/src/components/wallet-transfer/wallet-transfer-tile/wallet-transfer-tile.tsx
@@ -0,0 +1,123 @@
+import React from 'react';
+import classNames from 'classnames';
+import { Text, AppLinkedWithWalletIcon, WalletIcon } from '@deriv/components';
+import { formatMoney } from '@deriv/shared';
+import { Localize } from '@deriv/translations';
+import { getAccountName } from 'Constants/utils';
+import { WalletJurisdictionBadge } from 'Components/wallet-jurisdiction-badge';
+import type { TTransferAccount } from 'Types';
+import './wallet-transfer-tile.scss';
+
+type TIconSize =
+ | React.ComponentProps['size']
+ | React.ComponentProps['size'];
+
+type TWalletTileProps = {
+ account?: TTransferAccount;
+ className?: string;
+ has_hover?: boolean;
+ icon_size?: TIconSize;
+ is_active?: boolean;
+ is_list_item?: boolean;
+ is_mobile?: boolean;
+ onClick?: () => void;
+};
+
+const IconComponent = ({ account, icon_size }: TWalletTileProps) => {
+ if (account?.account_type === 'wallet') {
+ return account?.icon ? (
+ ['size']}
+ type={account?.type}
+ />
+ ) : null;
+ }
+
+ return account?.icon && account?.active_wallet_icon ? (
+ ['size']}
+ type={account?.type}
+ wallet_icon={account?.active_wallet_icon}
+ />
+ ) : null;
+};
+
+const Balance = ({ account, is_list_item, is_mobile }: TWalletTileProps) => {
+ if (account?.balance !== undefined) {
+ let size;
+ if (is_list_item) size = is_mobile ? 'xxxs' : 'xxs';
+ else size = is_mobile ? 'xxxxs' : 'xxxs';
+
+ return (
+
+
+
+ );
+ }
+
+ return null;
+};
+
+const Label = ({ account, is_list_item, is_mobile }: TWalletTileProps) => {
+ let size;
+ if (is_list_item) size = is_mobile ? 'xxs' : 'xs';
+ else size = is_mobile ? 'xxxxs' : 'xxxs';
+
+ return (
+
+ {getAccountName({ ...account })}
+
+ );
+};
+
+const WalletTransferTile = ({
+ account,
+ className,
+ has_hover,
+ icon_size = 'small',
+ is_active,
+ is_list_item,
+ is_mobile,
+ onClick,
+}: TWalletTileProps) => {
+ return (
+ onClick?.()}
+ >
+
+
+
+
+
+ {!is_list_item && is_mobile && (
+
+ )}
+
+
+
+
+
+
+
+ {is_list_item &&
}
+
+
undefined}
+ validateOnBlur={false}
+ >
+ {({ setValues, values, resetForm }) => (
+
+ )}
+
+
+ {is_landing_company_loaded ? (
+
+ ) : (
+
+ )}
+ {selected_platform_type === 'cfd' && }
+ {selected_platform_type === 'options' && }
+
+
+ );
+});
+
+export default MobileWalletsCarousel;
diff --git a/packages/appstore/src/modules/wallets/wallets.scss b/packages/appstore/src/modules/wallets/wallets.scss
new file mode 100644
index 000000000000..a152a1057e9c
--- /dev/null
+++ b/packages/appstore/src/modules/wallets/wallets.scss
@@ -0,0 +1,25 @@
+.wallets-module {
+ display: flex;
+ min-height: calc(100vh - 84px);
+ background-color: var(--general-section-1);
+
+ @include mobile {
+ min-height: 100vh;
+ }
+
+ &__content {
+ width: 100%;
+ max-width: 131.2rem;
+ margin: auto;
+ display: flex;
+ padding: 4rem;
+ flex-direction: column;
+ align-items: center;
+ gap: 2.4rem;
+ align-self: stretch;
+
+ @include mobile {
+ padding: 2.4rem 0;
+ }
+ }
+}
diff --git a/packages/appstore/src/modules/wallets/wallets.tsx b/packages/appstore/src/modules/wallets/wallets.tsx
new file mode 100644
index 000000000000..7704a25adaa6
--- /dev/null
+++ b/packages/appstore/src/modules/wallets/wallets.tsx
@@ -0,0 +1,37 @@
+import React, { useEffect } from 'react';
+import { ThemedScrollbars, Loading } from '@deriv/components';
+import { useActiveWallet, useWalletsList } from '@deriv/hooks';
+import { observer, useStore } from '@deriv/stores';
+import AddMoreWallets from 'Components/add-more-wallets';
+import ModalManager from 'Components/modals/modal-manager';
+import DesktopWalletsList from './desktop-wallets-list';
+import MobileWalletsCarousel from './mobile-wallets-carousel';
+import './wallets.scss';
+
+const Wallets = observer(() => {
+ const { client, ui } = useStore();
+ const { switchAccount, is_authorize } = client;
+ const { is_mobile } = ui;
+ const { data } = useWalletsList();
+ const active_wallet = useActiveWallet();
+
+ useEffect(() => {
+ if (!active_wallet && data && data?.length) {
+ switchAccount(data[0].loginid);
+ }
+ }, [active_wallet, data, switchAccount]);
+
+ if (!is_authorize) return ;
+
+ return (
+
+
+
+
+ );
+});
+
+export default Wallets;
diff --git a/packages/core/src/index.tsx b/packages/core/src/index.tsx
index 684189b93c11..f1f69ac55c7b 100644
--- a/packages/core/src/index.tsx
+++ b/packages/core/src/index.tsx
@@ -19,6 +19,12 @@ if (
registerServiceWorker();
}
+// if we don't clear the local storage, then exchange_rates subscription calls won't be made when user refreshes the page
+// check packages/stores/src/providers/ExchangeRatesProvider.tsx
+
+if (window.localStorage.getItem('exchange_rates')) {
+ window.localStorage.removeItem('exchange_rates');
+}
const has_endpoint_url = checkAndSetEndpointFromUrl();
// if has endpoint url, APP will be redirected
diff --git a/packages/hooks/src/__tests__/useExchangeRate.spec.tsx b/packages/hooks/src/__tests__/useExchangeRate.spec.tsx
index 9337a1015710..a8b27a720cc3 100644
--- a/packages/hooks/src/__tests__/useExchangeRate.spec.tsx
+++ b/packages/hooks/src/__tests__/useExchangeRate.spec.tsx
@@ -3,21 +3,16 @@ import { mockStore, StoreProvider, ExchangeRatesProvider } from '@deriv/stores';
import { renderHook } from '@testing-library/react-hooks';
import useExchangeRate from '../useExchangeRate';
-jest.mock('react', () => ({
- ...jest.requireActual('react'),
- useContext: jest.fn(() => ({
- exchange_rates: {
+describe('useExchangeRate', () => {
+ test('should return undefined if currency is not found', async () => {
+ const mockedRates = {
USD: {
EUR: 1.3,
GBP: 1.4,
ETH: 0.0001,
},
- },
- })),
-}));
-
-describe('useExchangeRate', () => {
- test('should return undefined if currency is not found', async () => {
+ };
+ window.localStorage.setItem('exchange_rates', JSON.stringify(mockedRates));
const mock = mockStore({});
const wrapper = ({ children }: { children: JSX.Element }) => (
@@ -31,6 +26,14 @@ describe('useExchangeRate', () => {
});
test('should return correct rate for the given currency other than USD', async () => {
+ const mockedRates = {
+ USD: {
+ EUR: 1.3,
+ GBP: 1.4,
+ ETH: 0.0001,
+ },
+ };
+ window.localStorage.setItem('exchange_rates', JSON.stringify(mockedRates));
const mock = mockStore({});
const wrapper = ({ children }: { children: JSX.Element }) => (
diff --git a/packages/hooks/src/index.ts b/packages/hooks/src/index.ts
index ca9a3748a0aa..cbff125d1aec 100644
--- a/packages/hooks/src/index.ts
+++ b/packages/hooks/src/index.ts
@@ -78,4 +78,3 @@ export { default as useWalletTransfer } from './useWalletTransfer';
export { default as useWalletsList } from './useWalletsList';
export { default as useGrowthbookFeatureFlag } from './useGrowthbookFeatureFlag';
export { default as useResidenceSelfDeclaration } from './useResidenceSelfDeclaration';
-export { default as useTotalAssetCurrency } from './useTotalAssetCurrency';
diff --git a/packages/hooks/src/useTotalAccountBalance.ts b/packages/hooks/src/useTotalAccountBalance.ts
index f0954536dd5d..5d805c9c9cc6 100644
--- a/packages/hooks/src/useTotalAccountBalance.ts
+++ b/packages/hooks/src/useTotalAccountBalance.ts
@@ -14,7 +14,7 @@ type TUseTotalAccountBalance = {
const useTotalAccountBalance = (accounts: TUseTotalAccountBalance[]) => {
const total_assets_real_currency = useRealTotalAssetCurrency();
- const { handleSubscription, getExchangeRate } = useExchangeRate();
+ const { handleSubscription, exchange_rates } = useExchangeRate();
if (!accounts.length) return { balance: 0, currency: total_assets_real_currency };
@@ -22,9 +22,11 @@ const useTotalAccountBalance = (accounts: TUseTotalAccountBalance[]) => {
const new_base = account?.account_type === 'demo' ? 'USD' : total_assets_real_currency || '';
const new_target = account.currency || total_assets_real_currency || '';
- if (new_base !== new_target) handleSubscription(new_base, new_target);
+ let new_rate = 1;
+ if (new_base === '' || new_target === '') new_rate = 1;
+ else if (new_base !== new_target) handleSubscription(new_base, new_target);
- const new_rate = getExchangeRate(new_base, new_target);
+ if (exchange_rates && exchange_rates[new_base]) new_rate = exchange_rates[new_base][new_target] || 1;
return total + (account.balance || 0) / new_rate;
}, 0);
diff --git a/packages/shared/package.json b/packages/shared/package.json
index fc25106b2f01..1f51c578b8e8 100644
--- a/packages/shared/package.json
+++ b/packages/shared/package.json
@@ -37,7 +37,6 @@
"@testing-library/react-hooks": "^7.0.2",
"@testing-library/user-event": "^13.5.0",
"@types/jsdom": "^20.0.0",
- "@types/object.fromentries": "^2.0.4",
"@types/react": "^18.0.7",
"@types/react-dom": "^18.0.0",
"jsdom": "^21.1.1",
diff --git a/packages/stores/package.json b/packages/stores/package.json
index 2a4d7ca20166..c3804a0c74cc 100644
--- a/packages/stores/package.json
+++ b/packages/stores/package.json
@@ -5,12 +5,12 @@
"main": "src/index.ts",
"dependencies": {
"@deriv/api": "1.0.0",
- "@deriv/shared": "^1.0.0",
"lodash.merge": "^4.6.2",
"mobx": "^6.6.1",
"mobx-persist-store": "1.1.2",
"mobx-react-lite": "^3.4.0",
- "react": "^17.0.2"
+ "react": "^17.0.2",
+ "usehooks-ts": "^2.7.0"
},
"devDependencies": {
"@deriv/api-types": "^1.0.172",
diff --git a/packages/stores/src/providers/ExchangeRatesProvider.tsx b/packages/stores/src/providers/ExchangeRatesProvider.tsx
index 579d12ea23a8..d5615c39f6cc 100644
--- a/packages/stores/src/providers/ExchangeRatesProvider.tsx
+++ b/packages/stores/src/providers/ExchangeRatesProvider.tsx
@@ -1,150 +1,52 @@
-import React from 'react';
-import { ExchangeRatesResponse } from '@deriv/api-types';
-import { useWS } from '@deriv/shared';
+import React, { ReactNode } from 'react';
+import { useLocalStorage } from 'usehooks-ts';
+import { useSubscription } from '@deriv/api';
import ExchangeRatesContext from '../stores/ExchangeRatesContext';
-// Implement this type to prevent install @deriv/deriv-api to this package
-type DerivAPIBasicSubscribe = {
- unsubscribe: () => void;
-};
-type TUnsubscribeFunction = (id: string) => void;
-type TRate = Record>;
-type TPayload = {
- base_currency: string;
- target_currency: string;
-};
type TExchangeRatesProvider = {
- children: React.ReactNode;
+ children: ReactNode;
};
-const ExchangeRatesProvider = ({ children }: TExchangeRatesProvider) => {
- const WS = useWS();
- const [exchangeRates, setExchangeRates] = React.useState({});
- const isMounted = React.useRef(false);
- const subscriptions = React.useRef>();
- const subscriptionsId = React.useRef>();
- const exchangeRatesSubscriptions = React.useRef([]);
-
- const subscribeToCurrencyRate = React.useCallback(
- async (payload: TPayload) => {
- const id = JSON.stringify(payload);
- const matchingSubscription = subscriptions.current?.[id];
- if (matchingSubscription) return { id, subscription: matchingSubscription };
-
- const subscription = WS?.subscribe({
- exchange_rates: 1,
- subscribe: 1,
- ...(payload ?? {}),
- });
+type TRate = Record>;
- subscriptions.current = { ...(subscriptions.current ?? {}), ...{ [id]: subscription } };
- return { id, subscription };
- },
- [WS]
- );
+const ExchangeRatesProvider = ({ children }: TExchangeRatesProvider) => {
+ const [exchange_rates, setExchangeRates] = useLocalStorage('exchange_rates', {});
- const unsubscribeFromCurrencyById: TUnsubscribeFunction = React.useCallback(
- id => {
- const matchingSubscription = subscriptions.current?.[id];
- if (matchingSubscription) WS?.forget(subscriptionsId.current?.[id]);
- },
- [WS]
- );
+ const { subscribe, data, ...rest } = useSubscription('exchange_rates');
- const handleSubscription = React.useCallback(
- async (base_currency: string, target_currency: string) => {
- if (base_currency === '' || target_currency === '' || base_currency === target_currency) return;
- if (exchangeRates[base_currency]?.[target_currency]) return;
+ const handleSubscription = (base_currency: string, target_currency: string) => {
+ if (base_currency === '' || target_currency === '' || base_currency === target_currency) return;
+ if (exchange_rates[base_currency]?.[target_currency]) return;
- const { id, subscription } = await subscribeToCurrencyRate({
+ subscribe({
+ payload: {
base_currency,
target_currency,
- });
-
- if (!exchangeRatesSubscriptions.current.includes(id)) {
- exchangeRatesSubscriptions.current.push(id);
- subscription.subscribe((response: ExchangeRatesResponse) => {
- const rates = response.exchange_rates?.rates;
- const subscriptionId = String(response.subscription?.id);
-
- if (rates && isMounted.current) {
- subscriptionsId.current = { ...(subscriptionsId.current ?? {}), ...{ [id]: subscriptionId } };
-
- setExchangeRates(prev => {
- const currentData = { ...(prev ?? {}) };
- if (currentData) {
- currentData[base_currency] = { ...currentData[base_currency], ...rates };
- return currentData;
- }
- return { [base_currency]: rates };
- });
- }
- });
- }
- },
- [exchangeRates, subscribeToCurrencyRate]
- );
-
- const unsubscribe = React.useCallback(
- (payload: TPayload) => {
- if (payload) {
- const id = JSON.stringify(payload);
- exchangeRatesSubscriptions.current = exchangeRatesSubscriptions.current.filter(s => s !== id);
- unsubscribeFromCurrencyById(id);
- if (isMounted.current)
- setExchangeRates(prev => {
- const currData = { ...(prev ?? {}) };
- delete currData[payload.base_currency];
- return currData;
- });
- }
- },
- [unsubscribeFromCurrencyById]
- );
-
- const unsubscribeAll = React.useCallback(() => {
- exchangeRatesSubscriptions.current.forEach(s => unsubscribeFromCurrencyById(s));
- }, [unsubscribeFromCurrencyById]);
-
- const getExchangeRate = React.useCallback(
- (base: string, target: string) => {
- if (exchangeRates) {
- return exchangeRates?.[base]?.[target] ?? 1;
- }
- return 1;
- },
- [exchangeRates]
- );
+ },
+ });
+ };
React.useEffect(() => {
- isMounted.current = true;
-
- return () => {
- isMounted.current = false;
- const currentSubscriptions = subscriptions.current;
- const currentSubscriptionsIds = subscriptionsId?.current;
-
- if (currentSubscriptions && currentSubscriptionsIds) {
- Object.keys(currentSubscriptions).forEach(key => {
- WS?.forget(currentSubscriptionsIds?.[key]);
- });
- }
- };
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, []);
+ if (data) {
+ setExchangeRates(prev_rates => {
+ const base_currency = data?.exchange_rates?.base_currency || 'USD';
+ const new_rates = {
+ ...prev_rates,
+ [base_currency]: {
+ ...prev_rates[base_currency],
+ ...data?.exchange_rates?.rates,
+ },
+ };
+ return new_rates;
+ });
+ }
+ }, [data, setExchangeRates]);
- const value = React.useMemo(
- () => ({
- handleSubscription,
- exchange_rates: exchangeRates,
- getExchangeRate,
- unsubscribe,
- unsubscribeAll,
- }),
- [exchangeRates, getExchangeRate, handleSubscription, unsubscribe, unsubscribeAll]
+ return (
+
+ {children}
+
);
-
- return {children};
};
export default ExchangeRatesProvider;
diff --git a/packages/stores/src/stores/ExchangeRatesContext.tsx b/packages/stores/src/stores/ExchangeRatesContext.tsx
index fac58c35b2fb..c0a5857eef36 100644
--- a/packages/stores/src/stores/ExchangeRatesContext.tsx
+++ b/packages/stores/src/stores/ExchangeRatesContext.tsx
@@ -1,13 +1,13 @@
import { createContext } from 'react';
+import { useSubscription } from '@deriv/api';
+
type TRate = Record>;
type TExchangeRatesContext = {
- exchange_rates: TRate;
- getExchangeRate: (base_currency: string, target_currency: string) => number;
handleSubscription: (base_currency: string, target_currency: string) => void;
- unsubscribe: (payload: { base_currency: string; target_currency: string }) => void;
- unsubscribeAll: () => void;
+ exchange_rates: TRate;
+ rest: Omit;
};
const ExchangeRatesContext = createContext(null);