Thisyahlen/chore: add jurisdiction modal

src/cfd/screens/CFDSuccess/CFDSuccess.tsx

@@ -72,7 +72,7 @@ export const CFDSuccess = ({ description, marketType, platform, renderButtons }:
 
     return (
         <ActionScreen
-            className='w-[440px] h-[364px] p-24'
+            className='w-[440px] p-24'
             description={description}
             icon={<IconWithCheckMark />}
             renderButtons={renderButtons}

src/cfd/screens/DynamicLeverage/DynamicLeverageMarketCard.tsx

@@ -0,0 +1,60 @@
+import { Text } from '@deriv-com/ui';
+
+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-solid border-1 rounded-default border-system-light-less-prominent-text bg-system-light-hover-background'>
+        <div className='flex flex-col h-auto py-10 bg-system-light-secondary-background'>
+            <Text align='center' size='sm' weight='bold'>
+                {displayName}
+            </Text>
+            {!!instruments.length && (
+                <Text align='center' className='italic'>
+                    {`(${instruments.join(', ')})`}
+                </Text>
+            )}
+            <Text align='center' className='text-status-light-danger'>
+                {`Up to ${min}:${max}`}
+            </Text>
+        </div>
+        <div className='pb-10'>
+            <div className='grid grid-cols-[1fr_0.5fr_1.25fr] justify-items-center py-4 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 py-4 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>
+);

src/cfd/screens/DynamicLeverage/DynamicLeverageScreen.tsx

@@ -0,0 +1,53 @@
+import { twMerge } from 'tailwind-merge';
+
+import { PlatformDetails } from '@cfd/constants';
+import { Text } from '@deriv-com/ui';
+
+import { useDynamicLeverage } from '@/hooks';
+import { useDynamicLeverageModalState } from '@/providers';
+
+import { DynamicLeverageMarketCard } from './DynamicLeverageMarketCard';
+
+const DynamicLeverageScreen = () => {
+    const { data: dynamicLeverages } = useDynamicLeverage(PlatformDetails.mt5.platform);
+    const { isDynamicLeverageVisible } = useDynamicLeverageModalState();
+
+    if (!dynamicLeverages) return null;
+
+    return (
+        <div
+            className={twMerge(
+                'flex flex-col gap-24 mt-16 mx-24 pb-24 lg:mb-0 absolute top-0 lg:p-0 [transform:rotateY(180deg)] transition-transform ease-in duration-[0.6s] backface-hidden bg-system-light-primary-background',
+                isDynamicLeverageVisible && '[transform:rotateY(0deg)]'
+            )}
+        >
+            <Text align='center'>
+                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-24 lg:mx-[65px] mt-25 lg:grid-cols-2 '>
+                {(['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;

src/cfd/screens/DynamicLeverage/DynamicLeverageTableColumnHeader.tsx

@@ -0,0 +1,17 @@
+import { Text } from '@deriv-com/ui';
+
+type TDynamicLeverageTableColumnHeader = {
+    subtitle: string;
+    title: string;
+};
+
+export const DynamicLeverageTableColumnHeader = ({ subtitle, title }: TDynamicLeverageTableColumnHeader) => (
+    <div className='flex flex-col'>
+        <Text align='center' size='sm' weight='bold'>
+            {title}
+        </Text>
+        <Text align='center' size='xs'>
+            {subtitle}
+        </Text>
+    </div>
+);

src/cfd/screens/DynamicLeverage/DynamicLeverageTitle.tsx

@@ -0,0 +1,17 @@
+import { StandaloneArrowLeftBoldIcon } from '@deriv/quill-icons';
+import { Text } from '@deriv-com/ui';
+
+import { useDynamicLeverageModalState } from '@/providers';
+
+export const DynamicLeverageTitle = () => {
+    const { toggleDynamicLeverage } = useDynamicLeverageModalState();
+
+    return (
+        <div className='flex items-center h-auto gap-16 py-12 pl-24 pr-16 border-solid border-b-1 border-system-light-secondary-background'>
+            <StandaloneArrowLeftBoldIcon className='flex items-center cursor-pointer' onClick={toggleDynamicLeverage} />
+            <Text weight='bold'>Get more out of Deriv MT5 Financial</Text>
+        </div>
+    );
+};
+
+export default DynamicLeverageTitle;

src/cfd/screens/DynamicLeverage/index.ts

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

src/cfd/screens/Jurisdiction/JurisdictionCard/JurisdictionCard.classnames.ts

@@ -0,0 +1,45 @@
+import { cva, VariantProps } from 'class-variance-authority';
+
+export const JurisdictionCardClass = cva(
+    'items-stretch rounded-xl border-1 border-solid cursor-pointer flex flex-col justify-center w-full lg:w-[276px] relative h-auto transition-shadow transition-transform duration-300 [transform-style:preserve-3d] transform-gpu',
+    {
+        compoundVariants: [
+            {
+                class: 'border-system-light-secondary-background',
+                isSelected: false,
+            },
+        ],
+        variants: {
+            isAdded: {
+                true: 'cursor-not-allowed select-none',
+            },
+            isFlipped: {
+                true: '[transform:rotateY(-180deg)]',
+            },
+            isSelected: {
+                true: 'border-brand-blue shadow-[0_24px_48px_0_rgba(14,_14,_14,_0.18)]',
+            },
+        },
+    }
+);
+
+export const JurisdictionCardTagClass = cva('rounded-xs text-system-light-primary-background px-10 py-5', {
+    defaultVariants: {
+        displayTextSkinColor: 'default',
+    },
+    variants: {
+        displayTextSkinColor: {
+            'brown-dark': 'bg-brand-brown-dark',
+            default: 'bg-brand-red-dark',
+            'red-dark': 'bg-brand-red-dark',
+            'red-darker': 'bg-brand-red-darker',
+            'red-light': 'bg-brand-red-light',
+            'violet-dark': 'bg-brand-violet-dark',
+            'yellow-dark': 'bg-brand-yellow-dark',
+            'yellow-light': 'bg-brand-yellow-light',
+        },
+    },
+});
+
+export type JurisdictionCardClassProps = NonNullable<VariantProps<typeof JurisdictionCardClass>>;
+export type JurisdictionCardTagProps = NonNullable<VariantProps<typeof JurisdictionCardTagClass>>;