[TRAH] Sergei / TRAH - 2265 / Regulation table

packages/tradershub/src/components/RegulationSwitcher/RegulationSwitcherDesktop.tsx

@@ -1,16 +1,20 @@
 import React, { useEffect } from 'react';
 import { useActiveTradingAccount, useAuthorize, useIsDIELEnabled, useTradingAccountsList } from '@deriv/api';
+import { Provider } from '@deriv/library';
 import { Button, qtJoin } from '@deriv/quill-design';
 import { LabelPairedCircleInfoMdRegularIcon } from '@deriv/quill-icons';
 import { Text } from '@deriv-com/ui/dist/components/Text';
 import { Regulation } from '../../constants/constants';
+import { RegulationModal } from '../../features/cfd/modals';
 import useRegulationFlags from '../../hooks/useRegulationFlags';
 import { useUIContext } from '../UIProvider';
 
 const RegulationSwitcherDesktop = () => {
     const { switchAccount } = useAuthorize();
     const { data: tradingAccountsList } = useTradingAccountsList();
     const { getUIState, setUIState } = useUIContext();
+    const { show } = Provider.useModal();
+
     const { data: isDIEL } = useIsDIELEnabled();
     const regulation = getUIState('regulation');
     const accountType = getUIState('accountType');
@@ -53,7 +57,10 @@ const RegulationSwitcherDesktop = () => {
         <div className='flex items-center gap-400'>
             <div className='flex items-center gap-400'>
                 <Text size='sm'>Regulation:</Text>
-                <LabelPairedCircleInfoMdRegularIcon />
+                <LabelPairedCircleInfoMdRegularIcon
+                    className='cursor-pointer'
+                    onClick={() => show(<RegulationModal />)}
+                />
             </div>
             <div className='flex bg-system-light-secondary-background rounded-400 p-200 gap-200 w-[200px] h-2000'>
                 {buttons.map(button => (

packages/tradershub/src/components/RegulationSwitcher/RegulationSwitcherMobile.tsx

@@ -1,14 +1,19 @@
 // TODO: Add logic to switch between EU and non-EU
 import React from 'react';
+import { Provider } from '@deriv/library';
 import { Tab } from '@deriv/quill-design';
+import { RegulationModal } from '../../features/cfd/modals';
 import InfoIcon from '../../public/images/ic-info-outline.svg';
 
 const RegulationSwitcherMobile = () => {
+    const { show } = Provider.useModal();
+
     const activeClassName =
         'aria-selected:font-bold active:font-bold aria-selected:border-b-brand-coral active:border-b-brand-coral';
+
     return (
         <div className='flex items-center gap-400'>
-            <InfoIcon className='h-auto w-800' />
+            <InfoIcon className='h-auto w-800' onClick={() => show(<RegulationModal />)} />
             <Tab.Container size='sm'>
                 <Tab.List>
                     <Tab.Trigger className={activeClassName}>Non - EU</Tab.Trigger>

packages/tradershub/src/constants/regulators-modal-content.ts

@@ -0,0 +1,168 @@
+/* eslint-disable sort-keys */
+export type TRowItem = {
+    options?: Record<string, boolean | string>;
+    text: string;
+};
+type TRegulatorContent = Record<string, TRowItem | TRowItem[] | undefined>;
+
+export type TRegulatorsContentProps = {
+    attribute: string;
+    content: TRegulatorContent;
+    id: string;
+    idx?: number;
+};
+
+export const getCFDContents = (): TRegulatorsContentProps[] => [
+    {
+        attribute: 'CFDs',
+        content: {
+            nonEuRegulator: { text: 'Yes' },
+            euRegulator: { text: 'Yes' },
+        },
+        id: 'cfds',
+    },
+    {
+        attribute: 'Regulators/external dispute resolution',
+        content: {
+            nonEuRegulator: [
+                { text: 'Financial Commission' },
+                { text: 'British Virgin Islands Financial Services Commission' },
+                { text: 'Vanuatu Financial Services Commission' },
+                { text: 'Labuan Financial Services Authority' },
+            ],
+            euRegulator: { text: 'Malta Financial Services Authority' },
+        },
+        id: 'regulators',
+    },
+    {
+        attribute: 'Counterparty company',
+        content: {
+            nonEuRegulator: [
+                { text: 'Deriv (SVG) LLC' },
+                { text: 'Deriv (BVI) Ltd' },
+                { text: 'Deriv (V) Ltd' },
+                { text: 'Deriv (FX) Ltd' },
+            ],
+            euRegulator: { text: 'Deriv Investments (Europe) Limited' },
+        },
+        id: 'counterparty_company',
+    },
+    {
+        attribute: 'Negative balance protection',
+        content: {
+            nonEuRegulator: { text: 'Synthetics only' },
+            euRegulator: { text: 'All assets' },
+        },
+        id: 'negative_balance_protection',
+    },
+    {
+        attribute: 'Leverage',
+        content: {
+            nonEuRegulator: { text: '100-1000' },
+            euRegulator: { text: '30' },
+        },
+        id: 'leverage',
+    },
+    {
+        attribute: 'Assets',
+        content: {
+            nonEuRegulator: [
+                { text: 'Synthetics' },
+                { text: 'Baskets' },
+                { text: 'Derived FX' },
+                { text: 'Forex' },
+                { text: 'Stocks' },
+                { text: 'Stock indices' },
+                { text: 'Commodities' },
+                { text: 'Cryptocurrencies' },
+            ],
+            euRegulator: [
+                { options: { should_show_asterick_at_end: true }, text: 'Synthetics' },
+                { text: 'Forex' },
+                { text: 'Stocks' },
+                { text: 'Stock indices' },
+                { text: 'Commodities' },
+                { text: 'Cryptocurrencies' },
+                {
+                    options: { color: 'error', weight: 'bold' },
+                    text: '*Boom 300 and Crash 300 Index',
+                },
+                {
+                    options: { color: 'error', weight: 'bold' },
+                    text: '*Volatility 150 Index and Volatility 250 Index',
+                },
+            ],
+        },
+        id: 'assets',
+    },
+    {
+        attribute: 'Platform',
+        content: {
+            nonEuRegulator: { text: 'Deriv MT5, Deriv X' },
+            euRegulator: { text: 'Deriv MT5' },
+        },
+        id: 'platform',
+    },
+];
+
+export const getOptionsContents = (): TRegulatorsContentProps[] => [
+    {
+        attribute: 'Options & Multipliers',
+        content: {
+            nonEuRegulator: { text: 'Yes' },
+            euRegulator: { options: { weight: 'bold' }, text: 'Multipliers only' },
+        },
+        id: 'options',
+    },
+    {
+        attribute: 'Regulators/external dispute resolution',
+        content: {
+            nonEuRegulator: { text: 'Financial Commission' },
+            euRegulator: { text: 'Malta Financial Services Authority' },
+        },
+        id: 'regulator_in_options',
+    },
+    {
+        attribute: 'Counterparty company',
+        content: {
+            nonEuRegulator: { text: 'Deriv (SVG) LLC' },
+            euRegulator: { text: 'Deriv Investments (Europe) Limited' },
+        },
+        id: 'counterparty_company_in_options',
+    },
+    {
+        attribute: 'Assets',
+        content: {
+            nonEuRegulator: [
+                { text: 'Synthetics' },
+                { text: 'Baskets' },
+                { text: 'Forex' },
+                { text: 'Stocks' },
+                { text: 'Stock indices' },
+                { text: 'Commodities' },
+                { text: 'Cryptocurrencies' },
+            ],
+            euRegulator: [
+                {
+                    options: { should_show_asterick_at_end: true },
+                    text: 'Synthetics',
+                },
+                { text: 'Forex' },
+                { text: 'Cryptocurrencies' },
+                {
+                    options: { color: 'error', weight: 'bold' },
+                    text: '*Boom 300 and Crash 300 Index',
+                },
+            ],
+        },
+        id: 'assets_in_options',
+    },
+    {
+        attribute: 'Platform',
+        content: {
+            nonEuRegulator: { text: 'DTrader, DBot, SmartTrader, and Binary Bot' },
+            euRegulator: { text: 'DTrader' },
+        },
+        id: 'platform_in_options',
+    },
+];

packages/tradershub/src/features/cfd/modals/RegulationModal/RegulationModal.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Text } from '@deriv-com/ui/dist/components/Text';
+import { Modal } from '../../../../components/Modal';
+import { getCFDContents, getOptionsContents } from '../../../../constants/regulators-modal-content';
+import Row from './Row';
+
+const RegulationModal = () => (
+    <Modal className='w-full md:max-w-[743px]'>
+        <Modal.Header title='Non-EU and EU regulations' />
+        <Modal.Content className='p-800 md:p-1200'>
+            <div className='overflow-x-scroll'>
+                <table className='border-separate table-auto min-w-[457px] md:min-w-[695px] bg-system-light-primary-background'>
+                    <thead>
+                        <tr className=''>
+                            <th className='sticky z-10 border-solid border-r-75 border-b-75 border-system-light-active-background start-50 min-h-2000 bg-system-light-primary-background' />
+                            <th className='border-solid p-500 min-h-2000 border-r-75 border-y-75 border-system-light-active-background'>
+                                <Text size='sm' weight='bold'>
+                                    Non-EU regulation
+                                </Text>
+                            </th>
+                            <th className='border-solid p-500 min-h-2000 border-r-75 border-y-75 border-system-light-active-background'>
+                                <Text size='sm' weight='bold'>
+                                    EU regulation
+                                </Text>
+                            </th>
+                        </tr>
+                    </thead>
+                    <tbody className=''>
+                        {getCFDContents().map((row, idx) => (
+                            <Row key={row.id} {...row} idx={idx} />
+                        ))}
+                        {getOptionsContents().map((row, idx) => (
+                            <Row key={row.id} {...row} idx={idx} />
+                        ))}
+                    </tbody>
+                </table>
+            </div>
+        </Modal.Content>
+    </Modal>
+);
+
+export default RegulationModal;

packages/tradershub/src/features/cfd/modals/RegulationModal/Row.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { qtMerge } from '@deriv/quill-design';
+import { Text, TextProps } from '@deriv-com/ui/dist/components/Text';
+import { TRegulatorsContentProps, TRowItem } from '../../../../constants/regulators-modal-content';
+
+const Row = ({ attribute, content, id, idx }: TRegulatorsContentProps) => (
+    <tr className={qtMerge('min-h-2000', idx === 0 && 'bg-system-light-red-light-background')} key={id}>
+        <td
+            className={`sticky z-10 align-middle border-solid start-50 py-500 px-400 border-system-light-active-background border-x-75 border-b-75 ${
+                idx === 0 ? 'bg-system-light-red-light-background' : 'bg-system-light-primary-background'
+            }
+            `}
+        >
+            <Text align='left' as='p' color='general' size='xs' weight='bold'>
+                {attribute}
+            </Text>
+        </td>
+        {Object.keys(content).map(rowKey => (
+            <td
+                className='flex-col justify-center align-middle border-solid whitespace-nowrap py-500 px-400 border-b-75 border-r-75 border-system-light-active-background'
+                key={rowKey}
+            >
+                {Array.isArray(content[rowKey]) ? (
+                    (content[rowKey] as TRowItem[])?.map(item => (
+                        <Text
+                            align={(item?.options?.align as TextProps['align']) ?? 'center'}
+                            as='p'
+                            color={(item?.options?.color as TextProps['color']) ?? 'prominent'}
+                            key={`${id}_${rowKey}_${item?.text}`}
+                            size='2xs'
+                            weight={item?.options?.weight as TextProps['weight']}
+                        >
+                            {item?.text}
+                            {item?.options?.should_show_asterick_at_end && <Text color='error'>*</Text>}
+                        </Text>
+                    ))
+                ) : (
+                    <Text
+                        align={((content[rowKey] as TRowItem)?.options?.align as TextProps['align']) ?? 'center'}
+                        as='p'
+                        color={((content[rowKey] as TRowItem)?.options?.color as TextProps['color']) ?? 'prominent'}
+                        size='2xs'
+                        weight={(content[rowKey] as TRowItem)?.options?.weight as TextProps['weight']}
+                    >
+                        {(content[rowKey] as TRowItem)?.text}
+                    </Text>
+                )}
+            </td>
+        ))}
+    </tr>
+);
+
+export default Row;

packages/tradershub/src/features/cfd/modals/RegulationModal/index.ts

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

packages/tradershub/src/features/cfd/modals/index.ts

@@ -1,5 +1,6 @@
 export * from './CTraderSuccessModal';
 export * from './DxtradePasswordModal';
 export * from './MT5AccountTypeModal';
+export * from './RegulationModal';
 export * from './TradeModal';
 export * from './VerificationFailedModal';

packages/tradershub/tailwind.config.js

@@ -75,6 +75,7 @@ module.exports = {
                         'less-prominent-text': '#6e6e6e',
                         'primary-background': '#0e0e0e',
                         'prominent-text': '#ffffff',
+                        'red-light-background': '#3c2020',
                         'secondary-background': '#151717',
                         'text-info-blue-background': '#182130',
                     },
@@ -87,6 +88,7 @@ module.exports = {
                         'less-prominent-text': '#999999',
                         'primary-background': '#ffffff',
                         'prominent-text': '#333333',
+                        'red-light-background': '#ffe3e3',
                         'secondary-background': '#f2f3f4',
                         'text-info-blue-background': '#dfeaff',
                     },