Thisyahlen/cfd created accounts list

packages/wallets/src/components/AddedDxtradeAccountsList/AddedDxtradeAccountsList.scss

@@ -0,0 +1,62 @@
+.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;
+    }
+
+    &__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;
+
+        &-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;
+            }
+        }
+    }
+}

packages/wallets/src/components/AddedDxtradeAccountsList/AddedDxtradeAccountsList.tsx

@@ -0,0 +1,42 @@
+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 (
+        <TradingAccountCard
+            leading={() => (
+                <div className='wallets-available-derivx__icon'>
+                    <DerivX />
+                </div>
+            )}
+            trailing={() => (
+                <div className='wallets-available-derivx__actions'>
+                    <PrimaryActionButton className='wallets-available-derivx__transfer_button'>
+                        <p className='wallets-available-derivx__transfer_text'>Transfer</p>
+                    </PrimaryActionButton>
+                    <PrimaryActionButton>
+                        <p className='wallets-available-derivx__open_text'>Open</p>
+                    </PrimaryActionButton>
+                </div>
+            )}
+        >
+            <div className='wallets-available-derivx__details'>
+                {data?.map(account => (
+                    <>
+                        <p className='wallets-available-derivx__details-title'>Deriv X</p>
+                        <p className='wallets-available-derivx__details-description'>{account.balance}</p>
+                        <p className='wallets-available-derivx__details-description'>{account.account_id}</p>
+                    </>
+                ))}
+            </div>
+        </TradingAccountCard>
+    );
+};
+
+export default AddedDxtradeAccountsList;

packages/wallets/src/components/AddedDxtradeAccountsList/index.ts

@@ -0,0 +1 @@
+export { default as AddedDxtradeAccountsList } from './AddedDxtradeAccountsList';

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;
+            }
+        }
+    }
+}

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 (
+        <TradingAccountCard
+            leading={() => (
+                <div className='wallets-available-derivez__icon'>
+                    <DerivEZ />
+                </div>
+            )}
+            trailing={() => (
+                <SecondaryActionButton>
+                    <p className='wallets-available-derivez__text'>Get</p>
+                </SecondaryActionButton>
+            )}
+        >
+            <div className='wallets-available-derivez__details'>
+                <p className='wallets-available-derivez__details-title'>Deriv EZ</p>
+                <p className='wallets-available-derivez__details-description'>
+                    This account offers CFDs on an easy-to-get-started CFD trading platform.
+                </p>
+            </div>
+        </TradingAccountCard>
+    );
+};
+
+export default AvailableDerivezAccountsList;

packages/wallets/src/components/AvailableDerivezAccountsList/index.ts

@@ -0,0 +1 @@
+export { default as AvailableDerivezAccountsList } from './AvailableDerivezAccountsList';

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;
+            }
+        }
+    }
+}

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 (
+        <TradingAccountCard
+            leading={() => (
+                <div className='wallets-available-dxtrade__icon'>
+                    <DerivX />
+                </div>
+            )}
+            trailing={() => (
+                <SecondaryActionButton>
+                    <p className='wallets-available-dxtrade__text'>Get</p>
+                </SecondaryActionButton>
+            )}
+        >
+            <div className='wallets-available-dxtrade__details'>
+                <p className='wallets-available-dxtrade__details-title'>Deriv X</p>
+                <p className='wallets-available-dxtrade__details-description'>
+                    This account offers CFDs on a highly customisable CFD trading platform.
+                </p>
+            </div>
+        </TradingAccountCard>
+    );
+};
+
+export default AvailableDxtradeAccountsList;

packages/wallets/src/components/AvailableDxtradeAccountsList/index.ts

@@ -0,0 +1 @@
+export { default as AvailableDxtradeAccountsList } from './AvailableDxtradeAccountsList';

packages/wallets/src/components/OtherCFDPlatformsList/OtherCFDPlatformsList.tsx

@@ -1,47 +1,22 @@
 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 { AvailableDerivezAccountsList } from '../AvailableDerivezAccountsList';
+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: <DerivX />,
-    },
-    {
-        title: 'Deriv EZ',
-        description: 'This account offers CFDs on an easy-to-get-started CFD trading platform .',
-        icon: <DerivEZ />,
-    },
-];
-
 const OtherCFDPlatformsList: React.FC = () => {
+    const { data } = useDxtradeAccountsList();
+    const has_dxtrade_account = !!data;
+
     return (
         <div className='wallets-other-cfd'>
             <div className='wallets-other-cfd__title'>
                 <h1>Other CFD Platforms</h1>
             </div>
             <div className='wallets-other-cfd__content'>
-                {other_cfd_mapper.map(account => (
-                    <TradingAccountCard
-                        {...account}
-                        key={`cfd_other_platform_list--${account.title}`}
-                        leading={() => <div className='wallets-other-cfd__content__icon'>{account.icon}</div>}
-                        trailing={() => (
-                            <SecondaryActionButton>
-                                <p className='wallets-other-cfd__text'>Get</p>
-                            </SecondaryActionButton>
-                        )}
-                    >
-                        <div className='wallets-other-cfd__content__details'>
-                            <p className='wallets-other-cfd__content__details-title'>{account.title}</p>
-                            <p className='wallets-other-cfd__content__details-description'>{account.description}</p>
-                        </div>
-                    </TradingAccountCard>
-                ))}
+                {has_dxtrade_account ? <AddedDxtradeAccountsList /> : <AvailableDxtradeAccountsList />}
+                <AvailableDerivezAccountsList />
             </div>
         </div>
     );

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';