thisyahlen/feat: add mt5 account type modal (binary-com#10289)

* feat: add mt5 account type modal

* chore: add styles

* chore: refactor using widemodal

* chore: fix modal and styles

* chore: add ts-reset and configure eslint

* fix: ci

* fix: remove ts-reset

* fix: conflicts

packages/wallets/.eslintrc.js

@@ -52,6 +52,7 @@ module.exports = {
         'typescript-sort-keys/interface': 'warn',
         'typescript-sort-keys/string-enum': 'warn',
         camelcase: 'error',
+        'import/no-extraneous-dependencies': ['off', { devDependencies: ['**/*.spec.*', '**/*.test.*', '**/*.d.ts*'] }],
     },
     overrides: [
         {

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

@@ -28,13 +28,13 @@ const AddedDxtradeAccountsList: React.FC = () => {
         >
             <div className='wallets-available-derivx__details'>
                 {data?.map(account => (
-                    <>
+                    <React.Fragment key={account?.account_id}>
                         <p className='wallets-available-derivx__details-title'>Deriv X</p>
                         <p className='wallets-available-derivx__details-balance'>
                             {account?.display_balance} {account?.currency}
                         </p>
                         <p className='wallets-available-derivx__details-loginid'>{account.login}</p>
-                    </>
+                    </React.Fragment>
                 ))}
             </div>
         </TradingAccountCard>

packages/wallets/src/components/ExternalTradingPlatforms/GetMoreMT5Accounts/GetMoreMT5Accounts.scss

@@ -47,4 +47,15 @@
             }
         }
     }
+
+    &-text {
+        color: var(--system-dark-1-prominent-text, #fff);
+        text-align: center;
+
+        /* desktop/paragraph/P2 - bold */
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 700;
+        line-height: 20px; /* 142.857% */
+    }
 }

packages/wallets/src/components/ExternalTradingPlatforms/GetMoreMT5Accounts/GetMoreMT5Accounts.tsx

@@ -1,10 +1,14 @@
 import React from 'react';
 import AddIcon from '../../../public/images/add-icon.svg';
+import { useModal } from '../../ModalProvider';
+import { MT5AccountTypeModal } from '../../MT5AccountTypeModal';
 import './GetMoreMT5Accounts.scss';
 
 const GetMoreMT5Accounts: React.FC = () => {
+    const { show } = useModal();
+
     return (
-        <div className='wallets-get-more-mt5-accounts'>
+        <div className='wallets-get-more-mt5-accounts' onClick={() => show(<MT5AccountTypeModal />)}>
             <div className='wallets-get-more-mt5-accounts-container'>
                 <div className='wallets-get-more-mt5-accounts-container-icon'>
                     <AddIcon />

packages/wallets/src/components/ExternalTradingPlatforms/MT5AccountType/MT5AccountType.scss

@@ -0,0 +1,24 @@
+.wallets-mt5-account-type {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    border-radius: 8px;
+    background: var(--system-light-8-primary-background, #fff);
+
+    &-content {
+        width: 80vw;
+        height: 70vh;
+        display: flex;
+        padding: 24px;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        gap: 24px;
+        flex: 1 0 0;
+        align-self: stretch;
+
+        @include mobile {
+            flex-direction: column;
+        }
+    }
+}

packages/wallets/src/components/ExternalTradingPlatforms/MT5AccountType/MT5AccountType.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import DerivedMT5 from '../../../public/images/mt5-derived.svg';
+import FinancialMT5 from '../../../public/images/mt5-financial.svg';
+import SwapFreeMT5 from '../../../public/images/mt5-swap-free.svg';
+import { MT5AccountTypeCard } from '../MT5AccountTypeCard';
+import './MT5AccountType.scss';
+
+const marketTypeDetailsMapper = {
+    all: {
+        description:
+            'Trade swap-free CFDs on MT5 with synthetics, forex, stocks, stock indices, cryptocurrencies, and ETFs.',
+        icon: <SwapFreeMT5 />,
+        title: 'Swap-Free',
+    },
+    financial: {
+        description: 'Trade CFDs on MT5 with forex, stocks and indices, commodities, cryptocurrencies, and ETFs.',
+        icon: <FinancialMT5 />,
+        title: 'Financial',
+    },
+    synthetic: {
+        description: 'Trade CFDs on MT5 with derived indices that simulate real-world market movements.',
+        icon: <DerivedMT5 />,
+        title: 'Derived',
+    },
+};
+
+type TProps = {
+    onMarketTypeSelect: (marketType: keyof typeof marketTypeDetailsMapper) => void;
+    selectedMarketType?: keyof typeof marketTypeDetailsMapper;
+};
+
+const MT5AccountType: React.FC<TProps> = ({ onMarketTypeSelect, selectedMarketType }) => (
+    <div className='wallets-mt5-account-type-content'>
+        {Object.entries(marketTypeDetailsMapper).map(([key, value]) => (
+            <MT5AccountTypeCard
+                description={value.description}
+                icon={value.icon}
+                isSelected={selectedMarketType === key}
+                key={key}
+                // @ts-expect-error the key always is the type of keyof typeof marketTypeDetailsMapper.
+                onClick={() => onMarketTypeSelect(key === selectedMarketType ? undefined : key)}
+                title={value.title}
+            />
+        ))}
+    </div>
+);
+
+export default MT5AccountType;

packages/wallets/src/components/ExternalTradingPlatforms/MT5AccountType/index.ts

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

packages/wallets/src/components/ExternalTradingPlatforms/MT5AccountTypeCard/MT5AccountTypeCard.scss

@@ -0,0 +1,67 @@
+.wallets-mt5-account-type-card {
+    cursor: pointer;
+    &-list {
+        display: flex;
+        width: 264px;
+        height: 320px;
+        align-items: flex-start;
+
+        &-content {
+            display: flex;
+            align-items: flex-start;
+            flex: 1 0 0;
+            padding: 24px;
+            align-self: stretch;
+            border-radius: 16px;
+            border: 1px solid var(--system-light-5-active-background, #d6dadb);
+            background: var(--system-light-8-primary-background, #fff);
+
+            &-details {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                gap: 24px;
+                align-self: stretch;
+                justify-content: center;
+
+                &-title-description {
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    gap: 8px;
+                    align-self: stretch;
+                }
+
+                &-title {
+                    flex: 1 0 0;
+                    color: var(--system-light-1-prominent-text, #333);
+                    text-align: center;
+                    align-items: center;
+                    display: flex;
+
+                    /* desktop/subtitle/Sub 2 - bold */
+                    font-size: 20px;
+                    font-style: normal;
+                    font-weight: 700;
+                    line-height: 30px; /* 150% */
+                }
+
+                &-description {
+                    align-self: stretch;
+                    color: var(--system-light-2-general-text, #333);
+                    text-align: center;
+
+                    /* desktop/paragraph/P2 - regular */
+                    font-size: 14px;
+                    font-style: normal;
+                    font-weight: 400;
+                    line-height: 20px; /* 142.857% */
+                }
+            }
+        }
+    }
+    &-selected {
+        border-radius: 16px;
+        box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.2);
+    }
+}