[TRAH] Arshad /TRAH-2612/ Dynamic leverage Screen Component (#12789)

* feat: Added DynamicLeverageTableColumnHeader Component to Trader's Hub

* feat: Added DynamicLeverageTitle Component to Trader's Hub

* feat: Added DynamicLeverageMarketCard to Trader's Hub

* feat: Added DynamicLeverageComponentScreen Component to Trader's Hub

* refactor: removed unncessary types

* fix: fixed styles and removed unnecessary types

* fix: fixed styling and removed unused types

* fix: fixed styling

packages/tradershub/src/features/cfd/screens/DynamicLeverage/DynamicLeverageMarketCard.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { CaptionText, Text } from '@deriv/quill-design';
+import { THooks } from '../../../../types';
+import { DynamicLeverageTableColumnHeader } from './DynamicLeverageTableColumnHeader';
+
+type TDynamicLeverageMarketCardProps = {
+    data: THooks.DynamicLeverage[keyof THooks.DynamicLeverage]['volume']['data'];
+    displayName: string;
+    instruments: string[];
+    max: number;
+    min: number;
+};
+
+export const DynamicLeverageMarketCard = ({
+    data,
+    displayName,
+    instruments,
+    max,
+    min,
+}: TDynamicLeverageMarketCardProps) => (
+    <div className='overflow-hidden border-75 border-solid rounded-400 border-system-light-less-prominent-text h-[248px] bg-system-light-hover-background'>
+        <div className='flex flex-col pt-500 h-3500 bg-system-light-secondary-background'>
+            <Text align='center' bold size='sm'>
+                {displayName}
+            </Text>
+            {!!instruments.length && (
+                <CaptionText align='center' className='text-[10px]' italic>
+                    {`(${instruments.join(', ')})`}
+                </CaptionText>
+            )}
+            <CaptionText align='center' className='text-status-light-danger'>
+                {`Up to ${min}:${max}`}
+            </CaptionText>
+        </div>
+        <div className='pb-500'>
+            <div className='grid grid-cols-[1fr_0.5fr_1.25fr] justify-items-center border-b-50 py-200 bg-system-light-hover-background'>
+                <DynamicLeverageTableColumnHeader subtitle='(lots)' title='From' />
+                <DynamicLeverageTableColumnHeader subtitle='(lots)' title='to' />
+                <DynamicLeverageTableColumnHeader subtitle='(1:x)' title='Leverage' />
+            </div>
+            <div>
+                {data?.map(columns => (
+                    <div
+                        className='grid grid-cols-[1fr_0.5fr_1.25fr] justify-items-center border-b-50 py-200 even:bg-system-light-hover-background odd:bg-system-light-secondary-background'
+                        key={`${columns.from}-${columns.to}-${columns.leverage}`}
+                    >
+                        {Object.entries(columns).map(([columnKey, value]) => (
+                            <div key={`${displayName}_${columnKey}_${value}`}>
+                                <Text align='center' size='sm'>
+                                    {value}
+                                </Text>
+                            </div>
+                        ))}
+                    </div>
+                ))}
+            </div>
+        </div>
+    </div>
+);

packages/tradershub/src/features/cfd/screens/DynamicLeverage/DynamicLeverageScreen.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { useDynamicLeverage } from '@deriv/api';
+import { qtMerge, Text } from '@deriv/quill-design';
+import { useDynamicLeverageModalState } from '../../components/DynamicLeverageContext';
+import { PlatformDetails } from '../../constants';
+import { DynamicLeverageMarketCard } from './DynamicLeverageMarketCard';
+
+const DynamicLeverageScreen = () => {
+    const { data: dynamicLeverages } = useDynamicLeverage(PlatformDetails.mt5.platform);
+    const { isDynamicLeverageVisible } = useDynamicLeverageModalState();
+
+    if (!dynamicLeverages) return null;
+
+    return (
+        <div
+            className={qtMerge(
+                'flex flex-col gap-1200 mt-[15px] mx-1200 mb-1200 sm:mx-[128px] sm:mb-50 pb-5000 absolute top-50 [transform:rotateY(180deg)] transition-transform ease-in backface-hidden',
+                isDynamicLeverageVisible && '[transform:rotateY(0deg)]'
+            )}
+        >
+            <Text>
+                Enjoy dynamic leverage of <strong>up to 1:1500</strong> when trading selected instruments in the forex,
+                commodities, cryptocurrencies, and stock indices markets. Our dynamic leverage adjusts automatically to
+                your trading position, based on asset type and trading volume.
+            </Text>
+            <div className='grid grid-cols-1 gap-1200 mx-[65px] my-50 sm:grid-cols-2 sm:mx-5000'>
+                {(['forex', 'metals', 'cryptocurrencies', 'stock_indices'] as const).map(key => {
+                    const {
+                        display_name: displayName,
+                        instruments,
+                        max,
+                        min,
+                        volume: { data },
+                    } = dynamicLeverages[key];
+                    return (
+                        <DynamicLeverageMarketCard
+                            data={data}
+                            displayName={displayName}
+                            instruments={instruments}
+                            key={`dynamic-leverage-screen__${key}`}
+                            max={max}
+                            min={min}
+                        />
+                    );
+                })}
+            </div>
+        </div>
+    );
+};
+export default DynamicLeverageScreen;

packages/tradershub/tailwind.config.js

@@ -1,6 +1,20 @@
 /** @type {import('tailwindcss').Config} */
+const plugin = require('tailwindcss/plugin');
+
 module.exports = {
     content: ['./src/**/*.{js,jsx,ts,tsx}'],
+    plugins: [
+        plugin(({ addUtilities }) => {
+            addUtilities({
+                '.backface-hidden': {
+                    'backface-visibility': 'hidden',
+                },
+                '.backface-visible': {
+                    'backface-visibility': 'visible',
+                },
+            });
+        }),
+    ],
     presets: [require('@deriv/quill-design/quill-tailwind/tailwind.config.cjs')],
     theme: {
         extend: {