diff --git a/packages/api/src/hooks/useDxtradeAccountsList.ts b/packages/api/src/hooks/useDxtradeAccountsList.ts
index 4da5d352a026..b13b6d536d97 100644
--- a/packages/api/src/hooks/useDxtradeAccountsList.ts
+++ b/packages/api/src/hooks/useDxtradeAccountsList.ts
@@ -1,8 +1,10 @@
import { useMemo } from 'react';
import useFetch from '../useFetch';
+import useAuthorize from './useAuthorize';
/** A custom hook that gets the list of created Deriv X accounts. */
const useDxtradeAccountsList = () => {
+ const { data: authorize_data } = useAuthorize();
const { data: dxtrade_accounts } = useFetch('trading_platform_accounts', {
payload: { platform: 'dxtrade' },
});
@@ -12,9 +14,13 @@ const useDxtradeAccountsList = () => {
() =>
dxtrade_accounts?.trading_platform_accounts?.map(account => ({
...account,
- loginid: account.account_id,
+ display_balance: Intl.NumberFormat(authorize_data?.preferred_language || 'en-US', {
+ minimumFractionDigits: 2,
+ maximumFractionDigits: 2,
+ minimumIntegerDigits: 1,
+ }).format(account?.balance || 0),
})),
- [dxtrade_accounts?.trading_platform_accounts]
+ [authorize_data?.preferred_language, dxtrade_accounts?.trading_platform_accounts]
);
return {
diff --git a/packages/wallets/src/components/AddedDxtradeAccountsList/AddedDxtradeAccountsList.scss b/packages/wallets/src/components/AddedDxtradeAccountsList/AddedDxtradeAccountsList.scss
new file mode 100644
index 000000000000..29c50ebe96ef
--- /dev/null
+++ b/packages/wallets/src/components/AddedDxtradeAccountsList/AddedDxtradeAccountsList.scss
@@ -0,0 +1,90 @@
+.wallets-available-derivx {
+ &__transfer_button {
+ display: flex;
+ height: 32px;
+ padding: 6px 16px;
+ justify-content: center;
+ align-items: center;
+ border-radius: 4px;
+ border: 1px solid var(--system-light-3-less-prominent-text, #999);
+ cursor: pointer;
+ background: #fff;
+ }
+
+ &__transfer_text {
+ color: var(--system-light-1-prominent-text, #333);
+ text-align: center;
+
+ /* desktop/paragraph/P2 - bold */
+ font-family: 'IBM Plex Sans';
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 700;
+ line-height: 20px; /* 142.857% */
+ }
+
+ &__open_text {
+ color: var(--system-dark-1-prominent-text, #fff);
+ text-align: center;
+
+ /* desktop/paragraph/P2 - bold */
+ font-family: 'IBM Plex Sans';
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 700;
+ line-height: 20px; /* 142.857% */
+ }
+
+ &__actions {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ }
+
+ &__details {
+ flex-grow: 1;
+
+ &-loginid {
+ color: var(--system-light-3-less-prominent-text, #999);
+
+ /* desktop/small/S - bold */
+ font-family: 'IBM Plex Sans';
+ font-size: 12px;
+ font-style: normal;
+ font-weight: 700;
+ line-height: 18px; /* 150% */
+ }
+
+ &-title {
+ color: var(--system-light-2-general-text, #333);
+
+ /* desktop/paragraph/P2 - bold */
+ font-family: 'IBM Plex Sans';
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 700;
+ line-height: 20px; /* 142.857% */
+ }
+
+ &-balance {
+ color: var(--system-light-1-prominent-text, #333);
+
+ /* desktop/paragraph/P2 - bold */
+ font-family: 'IBM Plex Sans';
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 700;
+ line-height: 20px; /* 142.857% */
+ }
+
+ &-description {
+ font-size: 1.2rem;
+ line-height: 14px;
+
+ @include mobile {
+ font-size: 1.4rem;
+ line-height: 20px;
+ }
+ }
+ }
+}
diff --git a/packages/wallets/src/components/AddedDxtradeAccountsList/AddedDxtradeAccountsList.tsx b/packages/wallets/src/components/AddedDxtradeAccountsList/AddedDxtradeAccountsList.tsx
new file mode 100644
index 000000000000..3d3419be894b
--- /dev/null
+++ b/packages/wallets/src/components/AddedDxtradeAccountsList/AddedDxtradeAccountsList.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import { useDxtradeAccountsList } from '@deriv/api';
+import DerivX from '../../public/images/derivx.svg';
+import { PrimaryActionButton } from '../PrimaryActionButton';
+import { TradingAccountCard } from '../TradingAccountCard';
+import './AddedDxtradeAccountsList.scss';
+
+const AddedDxtradeAccountsList: React.FC = () => {
+ const { data } = useDxtradeAccountsList();
+
+ return (
+ (
+
+
+
+ )}
+ trailing={() => (
+
+
+ Transfer
+
+
+ Open
+
+
+ )}
+ >
+
+ {data?.map(account => (
+ <>
+
Deriv X
+
+ {account?.display_balance} {account?.currency}
+
+
{account.login}
+ >
+ ))}
+
+
+ );
+};
+
+export default AddedDxtradeAccountsList;
diff --git a/packages/wallets/src/components/AddedDxtradeAccountsList/index.ts b/packages/wallets/src/components/AddedDxtradeAccountsList/index.ts
new file mode 100644
index 000000000000..73ac143c26ae
--- /dev/null
+++ b/packages/wallets/src/components/AddedDxtradeAccountsList/index.ts
@@ -0,0 +1 @@
+export { default as AddedDxtradeAccountsList } from './AddedDxtradeAccountsList';
diff --git a/packages/wallets/src/components/AvailableDerivezAccountsList/AvailableDerivezAccountsList.scss b/packages/wallets/src/components/AvailableDerivezAccountsList/AvailableDerivezAccountsList.scss
new file mode 100644
index 000000000000..2e22f8575f7b
--- /dev/null
+++ b/packages/wallets/src/components/AvailableDerivezAccountsList/AvailableDerivezAccountsList.scss
@@ -0,0 +1,32 @@
+.wallets-available-derivez {
+ &__text {
+ color: var(--brand-coral, #ff444f);
+ text-align: center;
+
+ /* desktop/paragraph/P2 - bold */
+ font-family: 'IBM Plex Sans';
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 700;
+ line-height: 20px; /* 142.857% */
+ }
+
+ &__details {
+ flex-grow: 1;
+ &-title {
+ font-weight: bold;
+ font-size: 1.4rem;
+ line-height: 20px;
+ }
+
+ &-description {
+ font-size: 1.2rem;
+ line-height: 14px;
+
+ @include mobile {
+ font-size: 1.4rem;
+ line-height: 20px;
+ }
+ }
+ }
+}
diff --git a/packages/wallets/src/components/AvailableDerivezAccountsList/AvailableDerivezAccountsList.tsx b/packages/wallets/src/components/AvailableDerivezAccountsList/AvailableDerivezAccountsList.tsx
new file mode 100644
index 000000000000..bc0b935dd5e9
--- /dev/null
+++ b/packages/wallets/src/components/AvailableDerivezAccountsList/AvailableDerivezAccountsList.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import DerivEZ from '../../public/images/derivez.svg';
+import { SecondaryActionButton } from '../SecondaryActionButton';
+import { TradingAccountCard } from '../TradingAccountCard';
+import './AvailableDerivezAccountsList.scss';
+
+const AvailableDerivezAccountsList: React.FC = () => {
+ return (
+ (
+
+
+
+ )}
+ trailing={() => (
+
+ Get
+
+ )}
+ >
+
+
Deriv EZ
+
+ This account offers CFDs on an easy-to-get-started CFD trading platform.
+
+
+
+ );
+};
+
+export default AvailableDerivezAccountsList;
diff --git a/packages/wallets/src/components/AvailableDerivezAccountsList/index.ts b/packages/wallets/src/components/AvailableDerivezAccountsList/index.ts
new file mode 100644
index 000000000000..6e9a58a0705c
--- /dev/null
+++ b/packages/wallets/src/components/AvailableDerivezAccountsList/index.ts
@@ -0,0 +1 @@
+export { default as AvailableDerivezAccountsList } from './AvailableDerivezAccountsList';
diff --git a/packages/wallets/src/components/AvailableDxtradeAccountsList/AvailableDxtradeAccountsList.scss b/packages/wallets/src/components/AvailableDxtradeAccountsList/AvailableDxtradeAccountsList.scss
new file mode 100644
index 000000000000..c1fe494ac8b8
--- /dev/null
+++ b/packages/wallets/src/components/AvailableDxtradeAccountsList/AvailableDxtradeAccountsList.scss
@@ -0,0 +1,32 @@
+.wallets-available-dxtrade {
+ &__text {
+ color: var(--brand-coral, #ff444f);
+ text-align: center;
+
+ /* desktop/paragraph/P2 - bold */
+ font-family: 'IBM Plex Sans';
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 700;
+ line-height: 20px; /* 142.857% */
+ }
+
+ &__details {
+ flex-grow: 1;
+ &-title {
+ font-weight: bold;
+ font-size: 1.4rem;
+ line-height: 20px;
+ }
+
+ &-description {
+ font-size: 1.2rem;
+ line-height: 14px;
+
+ @include mobile {
+ font-size: 1.4rem;
+ line-height: 20px;
+ }
+ }
+ }
+}
diff --git a/packages/wallets/src/components/AvailableDxtradeAccountsList/AvailableDxtradeAccountsList.tsx b/packages/wallets/src/components/AvailableDxtradeAccountsList/AvailableDxtradeAccountsList.tsx
new file mode 100644
index 000000000000..dfb7fadb55ae
--- /dev/null
+++ b/packages/wallets/src/components/AvailableDxtradeAccountsList/AvailableDxtradeAccountsList.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import DerivX from '../../public/images/derivx.svg';
+import { SecondaryActionButton } from '../SecondaryActionButton';
+import { TradingAccountCard } from '../TradingAccountCard';
+import './AvailableDxtradeAccountsList.scss';
+
+const AvailableDxtradeAccountsList: React.FC = () => {
+ return (
+ (
+
+
+
+ )}
+ trailing={() => (
+
+ Get
+
+ )}
+ >
+
+
Deriv X
+
+ This account offers CFDs on a highly customisable CFD trading platform.
+
+
+
+ );
+};
+
+export default AvailableDxtradeAccountsList;
diff --git a/packages/wallets/src/components/AvailableDxtradeAccountsList/index.ts b/packages/wallets/src/components/AvailableDxtradeAccountsList/index.ts
new file mode 100644
index 000000000000..04d4b648383e
--- /dev/null
+++ b/packages/wallets/src/components/AvailableDxtradeAccountsList/index.ts
@@ -0,0 +1 @@
+export { default as AvailableDxtradeAccountsList } from './AvailableDxtradeAccountsList';
diff --git a/packages/wallets/src/components/CFDList/CFDList.tsx b/packages/wallets/src/components/CFDList/CFDList.tsx
index 0781e7f01603..18986b870477 100644
--- a/packages/wallets/src/components/CFDList/CFDList.tsx
+++ b/packages/wallets/src/components/CFDList/CFDList.tsx
@@ -1,10 +1,12 @@
import React from 'react';
+import { useActiveWalletAccount } from '@deriv/api';
import { CTraderList } from '../CTraderList';
import { MT5List } from '../MT5List';
import { OtherCFDPlatformsList } from '../OtherCFDPlatformsList';
import './CFDList.scss';
const CFDList = () => {
+ const { data: active_wallet } = useActiveWalletAccount();
return (
@@ -21,7 +23,7 @@ const CFDList = () => {
-
+ {active_wallet?.is_virtual && }
);
diff --git a/packages/wallets/src/components/OtherCFDPlatformsList/OtherCFDPlatformsList.tsx b/packages/wallets/src/components/OtherCFDPlatformsList/OtherCFDPlatformsList.tsx
index 13977a536a82..b942e49e6b78 100644
--- a/packages/wallets/src/components/OtherCFDPlatformsList/OtherCFDPlatformsList.tsx
+++ b/packages/wallets/src/components/OtherCFDPlatformsList/OtherCFDPlatformsList.tsx
@@ -1,47 +1,20 @@
import React from 'react';
-import DerivEZ from '../../public/images/derivez.svg';
-import DerivX from '../../public/images/derivx.svg';
-import { SecondaryActionButton } from '../SecondaryActionButton';
-import { TradingAccountCard } from '../TradingAccountCard';
+import { useDxtradeAccountsList } from '@deriv/api';
+import { AddedDxtradeAccountsList } from '../AddedDxtradeAccountsList';
+import { AvailableDxtradeAccountsList } from '../AvailableDxtradeAccountsList';
import './OtherCFDPlatformsList.scss';
-const other_cfd_mapper = [
- {
- title: 'Deriv X',
- description: 'This account offers CFDs on a highly customisable CFD trading platform.',
- icon: ,
- },
- {
- title: 'Deriv EZ',
- description: 'This account offers CFDs on an easy-to-get-started CFD trading platform .',
- icon: ,
- },
-];
-
const OtherCFDPlatformsList: React.FC = () => {
+ const { data } = useDxtradeAccountsList();
+ const has_dxtrade_account = !!data?.length;
+
return (
Other CFD Platforms
- {other_cfd_mapper.map(account => (
-
{account.icon}
}
- trailing={() => (
-
- Get
-
- )}
- >
-
-
{account.title}
-
{account.description}
-
-
- ))}
+ {has_dxtrade_account ?
:
}
);
diff --git a/packages/wallets/src/components/index.ts b/packages/wallets/src/components/index.ts
index a224770a9fb0..43476b6d98f7 100644
--- a/packages/wallets/src/components/index.ts
+++ b/packages/wallets/src/components/index.ts
@@ -21,3 +21,6 @@ export * from './WalletsCarouselContent';
export * from './OtherCFDPlatformsList';
export * from './SecondaryActionButton';
export * from './PrimaryActionButton';
+export * from './AvailableDxtradeAccountsList';
+export * from './AvailableDerivezAccountsList';
+export * from './AddedDxtradeAccountsList';