Arshad/Matin/WALL-1226/Dynamic leverage for MT5 financial accounts

packages/appstore/src/components/cfds-listing/cfds-listing.scss

@@ -1,10 +1,27 @@
 .jurisdiction-modal {
+    &__title {
+        display: flex;
+        gap: 1.6rem;
+        align-items: center;
+        margin: 0 1rem;
+
+        &-back {
+            display: flex;
+            align-items: center;
+            cursor: pointer;
+        }
+    }
     &__content-wrapper {
         display: flex;
         flex-direction: column;
         @include desktop {
             overflow: auto;
         }
+        width: 100%;
+        position: absolute;
+        backface-visibility: hidden;
+        transition: transform 0.6s ease;
+        transform: rotateY(0deg);
     }
     &__scrollable-content {
         @include desktop {
@@ -26,6 +43,38 @@
             bottom: 0;
         }
     }
+
+    &__wrapper {
+        height: 76rem;
+        perspective: 100rem;
+        overflow: scroll;
+
+        @include mobile {
+            height: calc(100vh - 4rem);
+        }
+    }
+
+    &__flipped {
+        @include desktop {
+            height: 70rem;
+        }
+
+        .jurisdiction-modal {
+            &__scrollable-content {
+                height: 80rem;
+            }
+
+            &__content-wrapper {
+                height: 70rem;
+                transform: rotateY(-180deg);
+                visibility: hidden;
+            }
+        }
+
+        .dynamic-leverage-modal {
+            transform: rotateY(0deg);
+        }
+    }
 }
 
 .cfd-jurisdiction-card--synthetic,
@@ -678,6 +727,85 @@
     }
 }
 
+.dynamic-leverage-modal {
+    display: flex;
+    flex-direction: column;
+    gap: 2.4rem;
+    margin: 1.5rem 12.8rem 10rem;
+    position: absolute;
+    backface-visibility: hidden;
+    transition: transform 0.6s ease;
+    transform: rotateY(180deg);
+
+    @include mobile {
+        margin: 1.5rem 2.4rem 2.4rem;
+    }
+
+    &__content {
+        display: grid;
+        gap: 2.4rem;
+        grid-template-columns: 1fr 1fr;
+        margin: 0 10rem;
+
+        @include mobile {
+            grid-template-columns: 1fr;
+            margin: 0 6.5rem;
+        }
+    }
+
+    &__market {
+        border: 0.5px solid var(--border-hover);
+        border-radius: $BORDER_RADIUS * 2;
+        overflow: hidden;
+        background-color: var(--general-hover);
+        height: 24.8rem;
+
+        &-description {
+            font-style: italic;
+        }
+
+        &-table {
+            padding-bottom: 1rem;
+
+            &-header {
+                display: flex;
+                flex-direction: column;
+            }
+
+            &-row {
+                grid-template-columns: 1fr 0.5fr 1.25fr;
+                justify-items: center;
+                border-bottom: 0;
+                padding: 0.4rem 0;
+            }
+
+            &-header-row {
+                grid-template-columns: 1fr 0.5fr 1.25fr;
+                justify-items: center;
+                border-bottom: 0;
+                padding: 0.4rem 0;
+                background-color: var(--general-hover);
+            }
+
+            &-row:nth-child(even) {
+                background-color: var(--general-hover);
+            }
+
+            &-row:nth-child(odd) {
+                background-color: var(--general-section-1);
+            }
+        }
+
+        &-title {
+            display: flex;
+            flex-direction: column;
+            height: 7rem;
+            padding-top: 1rem;
+            background-color: var(--general-section-1);
+        }
+    }
+}
+
 .cfd-financial-stp-modal {
     display: flex;
     height: 100%;

packages/appstore/src/modules/onboarding/onboarding.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { localize } from '@deriv/translations';
 import { isMobile, isDesktop, routes, ContentFlag } from '@deriv/shared';
-import { Button, Text, Icon, ProgressBarOnboarding } from '@deriv/components';
-import TradigPlatformIconProps from 'Assets/svgs/trading-platform';
+import { Button, Text, Icon, ProgressBarTracker } from '@deriv/components';
+import TradingPlatformIconProps from 'Assets/svgs/trading-platform';
 import { getTradingHubContents } from 'Constants/trading-hub-content';
 import { useHistory } from 'react-router-dom';
 import { observer } from 'mobx-react-lite';
@@ -26,7 +26,7 @@ type TOnboardingProps = {
 
 const Onboarding = ({ contents = getTradingHubContents() }: TOnboardingProps) => {
     const history = useHistory();
-    const number_of_steps = Object.keys(contents);
+    const steps_list = Object.keys(contents);
     const { traders_hub, client } = useStores();
     const { toggleIsTourOpen, selectAccountType, is_demo_low_risk, content_flag } = traders_hub;
     const { is_eu_country, is_logged_in, is_landing_company_loaded, prev_account_type, setPrevAccountType } = client;
@@ -37,8 +37,8 @@ const Onboarding = ({ contents = getTradingHubContents() }: TOnboardingProps) =>
     };
 
     const nextStep = () => {
-        if (step < number_of_steps.length) setStep(step + 1);
-        if (step === number_of_steps.length) {
+        if (step < steps_list.length) setStep(step + 1);
+        if (step === steps_list.length) {
             toggleIsTourOpen(true);
             history.push(routes.traders_hub);
             if (is_demo_low_risk) {
@@ -60,7 +60,7 @@ const Onboarding = ({ contents = getTradingHubContents() }: TOnboardingProps) =>
         content_flag === ContentFlag.EU_DEMO;
 
     const is_eu_user = (is_logged_in && eu_user) || (!is_logged_in && is_eu_country);
-    const onboarding_step = number_of_steps[step - 1];
+    const onboarding_step = steps_list[step - 1];
 
     const footer_header = contents[onboarding_step]?.footer_header;
     const footer_text = contents[onboarding_step]?.footer_text;
@@ -80,7 +80,7 @@ const Onboarding = ({ contents = getTradingHubContents() }: TOnboardingProps) =>
         <div className='onboarding-wrapper'>
             <div className='onboarding-header'>
                 <div className='onboarding-header--deriv-logo'>
-                    <TradigPlatformIconProps icon={'DerivLogo'} />
+                    <TradingPlatformIconProps icon={'DerivLogo'} />
                 </div>
                 <Icon
                     icon='IcCross'
@@ -105,7 +105,7 @@ const Onboarding = ({ contents = getTradingHubContents() }: TOnboardingProps) =>
                             <Button secondary onClick={prevStep} style={step === 1 ? { visibility: 'hidden' } : {}}>
                                 {localize('Back')}
                             </Button>
-                            <ProgressBarOnboarding step={step} amount_of_steps={number_of_steps} setStep={setStep} />
+                            <ProgressBarTracker step={step} steps_list={steps_list} setStep={setStep} />
                             <Button primary onClick={nextStep} className='onboarding-footer-buttons--full-size'>
                                 {contents[onboarding_step]?.has_next_content
                                     ? contents[onboarding_step]?.next_content
@@ -116,11 +116,7 @@ const Onboarding = ({ contents = getTradingHubContents() }: TOnboardingProps) =>
                     {isMobile() && (
                         <React.Fragment>
                             <div className='onboarding-footer__progress-bar'>
-                                <ProgressBarOnboarding
-                                    step={step}
-                                    amount_of_steps={number_of_steps}
-                                    setStep={setStep}
-                                />
+                                <ProgressBarTracker step={step} steps_list={steps_list} setStep={setStep} />
                             </div>
                             <div
                                 className='onboarding-footer-buttons'

packages/bot-web-ui/src/components/dashboard/bot-notification.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Toast } from '@deriv/components';
-import { localize } from '@deriv/translations';
 import { observer } from '@deriv/stores';
+import { localize } from '@deriv/translations';
 import { useDBotStore } from 'Stores/useDBotStore';
 
 const BotNotification = observer(() => {

packages/bot-web-ui/src/components/dashboard/dashboard-component/load-bot-preview/recent-footer.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
+import { observer } from 'mobx-react';
 import { Button } from '@deriv/components';
 import { localize } from '@deriv/translations';
-import './index.scss';
-import { observer } from 'mobx-react';
 import { useDBotStore } from 'Stores/useDBotStore';
+import './index.scss';
 
 const RecentFooter = observer(() => {
     const { load_modal } = useDBotStore();

packages/bot-web-ui/src/components/dashboard/tour-slider.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import classNames from 'classnames';
-import { Icon, ProgressBarOnboarding, Text } from '@deriv/components';
+import { Icon, ProgressBarTracker, Text } from '@deriv/components';
 import { observer } from '@deriv/stores';
 import { localize } from '@deriv/translations';
 import { useDBotStore } from 'Stores/useDBotStore';
@@ -181,9 +181,9 @@ const TourSlider = observer(() => {
                 <div className='dbot-slider__status'>
                     <div className='dbot-slider__progress-bar'>
                         {(!has_started_onboarding_tour || (has_started_onboarding_tour && step !== 1)) && (
-                            <ProgressBarOnboarding
+                            <ProgressBarTracker
                                 step={step}
-                                amount_of_steps={Object.keys(
+                                steps_list={Object.keys(
                                     !has_started_onboarding_tour ? BOT_BUILDER_MOBILE : DBOT_ONBOARDING_MOBILE
                                 )}
                                 setStep={setStep}

packages/bot-web-ui/src/components/dashboard/tutorial-tab/faq-content.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Text, Accordion } from '@deriv/components';
+import { Accordion, Text } from '@deriv/components';
 import { isMobile } from '@deriv/shared';
-import { localize } from '@deriv/translations';
 import { observer } from '@deriv/stores';
+import { localize } from '@deriv/translations';
 import { useDBotStore } from 'Stores/useDBotStore';
 import { TDescription } from './tutorial-content';
 

packages/bot-web-ui/src/components/download/download.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Button, Icon, Popover } from '@deriv/components';
-import { localize } from '@deriv/translations';
 import { observer } from '@deriv/stores';
+import { localize } from '@deriv/translations';
 import { useDBotStore } from 'Stores/useDBotStore';
 
 type TDownloadProps = {

packages/bot-web-ui/src/components/load-modal/recent-footer.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Button } from '@deriv/components';
-import { localize } from '@deriv/translations';
 import { observer } from '@deriv/stores';
+import { localize } from '@deriv/translations';
 import { useDBotStore } from 'Stores/useDBotStore';
 
 const RecentFooter = observer(() => {

packages/cfd/src/Components/props.types.ts

@@ -93,6 +93,7 @@ export type TCardFlipStatus = {
 export type TClickableDescription = {
     type: 'text' | 'link';
     text: string;
+    onClick?: React.MouseEventHandler<HTMLSpanElement>;
 };
 
 export type TJurisdictionCardSectionTitleIndicators = {
@@ -131,6 +132,10 @@ export type TJurisdictionCardItems = {
     financial_verification_docs?: TJurisdictionCardItemVerification;
 };
 
+export type TJurisdictionCardParams = {
+    toggleDynamicLeverage: React.MouseEventHandler<HTMLSpanElement>;
+};
+
 export type TJurisdictionVerificationSection = {
     icon: string;
     text: string;