thisyahlen/fix: launch jurisdiction modal on get button and fix type (d…

…eriv-com#10772) * chore: cleanup v3 * fix: random bracket
heorhi-deriv · Oct 18, 2023 · 81950f7 · 81950f7
1 parent 6d8fa27
commit 81950f7
Show file tree

Hide file tree

Showing 7 changed files with 65 additions and 53 deletions.
diff --git a/packages/wallets/src/components/Base/WalletText/WalletText.tsx b/packages/wallets/src/components/Base/WalletText/WalletText.tsx
@@ -8,7 +8,7 @@ interface WalletTextProps extends ComponentProps<'span'> {
     children: ReactNode;
     color?: CSSProperties['color'] | 'error' | 'general' | 'primary' | 'success' | 'warning';
     lineHeight?: TGenericSizes;
-    size?: Exclude<TGenericSizes, '4xs' | '5xl' | '6xl'>;
+    size?: TGenericSizes;
     weight?: CSSProperties['fontWeight'];
 }
 

diff --git a/packages/wallets/src/components/Base/types.ts b/packages/wallets/src/components/Base/types.ts
@@ -1,14 +1 @@
-export type TGenericSizes =
-    | '2xl'
-    | '2xs'
-    | '3xl'
-    | '3xs'
-    | '4xl'
-    | '4xs'
-    | '5xl'
-    | '6xl'
-    | 'lg'
-    | 'md'
-    | 'sm'
-    | 'xl'
-    | 'xs';
+export type TGenericSizes = '2xl' | '2xs' | '3xl' | '3xs' | '4xl' | '5xl' | '6xl' | 'lg' | 'md' | 'sm' | 'xl' | 'xs';
diff --git a/packages/wallets/src/features/cfd/flows/MT5/AddedMT5AccountsList/AddedMT5AccountsList.tsx b/packages/wallets/src/features/cfd/flows/MT5/AddedMT5AccountsList/AddedMT5AccountsList.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { useHistory } from 'react-router-dom';
-import { useMT5AccountsList } from '@deriv/api';
+import { useAuthorize, useMT5AccountsList } from '@deriv/api';
 import { WalletButton } from '../../../../../components/Base';
 import { TradingAccountCard } from '../../../../../components/TradingAccountCard';
 import DerivedMT5 from '../../../../../public/images/mt5-derived.svg';
@@ -25,6 +25,7 @@ type TProps = {
 };
 
 const AddedMT5AccountsList: React.FC<TProps> = ({ account }) => {
+    const { data: activeWallet } = useAuthorize();
     const history = useHistory();
     return (
         <TradingAccountCard
@@ -49,11 +50,13 @@ const AddedMT5AccountsList: React.FC<TProps> = ({ account }) => {
                     <p className='wallets-added-mt5__details-title-text'>
                         {marketTypeToNameMapper[account.market_type || 'all']}
                     </p>
-                    <div className='wallets-added-mt5__details-title-landing-company'>
-                        <p className='wallets-added-mt5__details-title-landing-company-text'>
-                            {account.landing_company_short}
-                        </p>
-                    </div>
+                    {!activeWallet?.is_virtual && (
+                        <div className='wallets-added-mt5__details-title-landing-company'>
+                            <p className='wallets-added-mt5__details-title-landing-company-text'>
+                                {account.landing_company_short}
+                            </p>
+                        </div>
+                    )}
                 </div>
                 <p className='wallets-added-mt5__details-balance'>
                     {account.display_balance} {account.currency}

diff --git a/.../wallets/src/features/cfd/flows/MT5/AvailableMT5AccountsList/AvailableMT5AccountsList.tsx b/.../wallets/src/features/cfd/flows/MT5/AvailableMT5AccountsList/AvailableMT5AccountsList.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
-import { useSortedMT5Accounts } from '@deriv/api';
+import { useActiveWalletAccount, useSortedMT5Accounts } from '@deriv/api';
 import { TradingAccountCard, WalletButton } from '../../../../../components';
 import { useModal } from '../../../../../components/ModalProvider';
 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 { MT5PasswordModal } from '../../../modals';
+import { JurisdictionModal, MT5PasswordModal } from '../../../modals';
 import './AvailableMT5AccountsList.scss';
 
 const marketTypeToDescriptionMapper = {
@@ -31,7 +31,9 @@ type TProps = {
 };
 
 const AvailableMT5AccountsList: React.FC<TProps> = ({ account }) => {
-    const { show } = useModal();
+    const { data: activeWallet } = useActiveWalletAccount();
+    const { setModalState, show } = useModal();
+
     return (
         <TradingAccountCard
             leading={() => (
@@ -42,7 +44,18 @@ const AvailableMT5AccountsList: React.FC<TProps> = ({ account }) => {
             trailing={() => (
                 <WalletButton
                     color='primary-light'
-                    onClick={() => show(<MT5PasswordModal marketType={account?.market_type || 'synthetic'} />)}
+                    onClick={() => {
+                        setModalState({
+                            marketType: account.market_type,
+                        });
+                        show(
+                            activeWallet?.is_virtual ? (
+                                <MT5PasswordModal marketType={account?.market_type || 'synthetic'} />
+                            ) : (
+                                <JurisdictionModal />
+                            )
+                        );
+                    }}
                     text='Get'
                 />
             )}

diff --git a/packages/wallets/src/features/cfd/modals/JurisdictionModal/JurisdictionModal.tsx b/packages/wallets/src/features/cfd/modals/JurisdictionModal/JurisdictionModal.tsx
@@ -1,34 +1,37 @@
 import React, { useState } from 'react';
 import { useAvailableMT5Accounts } from '@deriv/api';
-import { ModalStepWrapper, WalletButton, WalletText } from '../../../../components/Base';
+import { ModalStepWrapper, WalletButton } from '../../../../components/Base';
 import { useModal } from '../../../../components/ModalProvider';
 import { JurisdictionScreen } from '../../screens/Jurisdiction';
 import { MT5PasswordModal } from '..';
 
+const marketTypeToTitleMapper = {
+    all: 'Swap-Free',
+    financial: 'Financial',
+    synthetic: 'Derived',
+};
+
 const JurisdictionModal = () => {
     const [selectedJurisdiction, setSelectedJurisdiction] = useState('');
     const { modalState, show } = useModal();
     const { isLoading } = useAvailableMT5Accounts();
 
     const marketType = modalState?.marketType || 'all';
 
+    const capitalizedMarketType = marketTypeToTitleMapper[marketType];
+
     if (isLoading) return <h1>Loading...</h1>;
 
     return (
         <ModalStepWrapper
             renderFooter={() => (
-                <React.Fragment>
-                    <WalletButton
-                        disabled={!selectedJurisdiction}
-                        onClick={() => show(<MT5PasswordModal marketType={marketType} />)}
-                    >
-                        <WalletText color='white' size='xs' weight='bold'>
-                            Next
-                        </WalletText>
-                    </WalletButton>
-                </React.Fragment>
+                <WalletButton
+                    disabled={!selectedJurisdiction}
+                    onClick={() => show(<MT5PasswordModal marketType={marketType} />)}
+                    text='Next'
+                />
             )}
-            title='Choose a jurisdiction for your MT5 Derived account'
+            title={`Choose a jurisdiction for your Deriv MT5 ${capitalizedMarketType} account`}
         >
             <JurisdictionScreen
                 selectedJurisdiction={selectedJurisdiction}

diff --git a/packages/wallets/src/features/cfd/modals/MT5AccountTypeModal/MT5AccountTypeModal.tsx b/packages/wallets/src/features/cfd/modals/MT5AccountTypeModal/MT5AccountTypeModal.tsx
@@ -21,7 +21,7 @@ const MT5AccountTypeModal = () => {
                         });
                         show(<JurisdictionModal />);
                     }}
-                    text='Get'
+                    text='Next'
                 />
             )}
             title='Select Deriv MT5’s account type'

diff --git a/packages/wallets/src/features/cfd/screens/MT5AccountType/MT5AccountType.tsx b/packages/wallets/src/features/cfd/screens/MT5AccountType/MT5AccountType.tsx
@@ -29,20 +29,26 @@ type TProps = {
     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>
-);
+const MT5AccountType: React.FC<TProps> = ({ onMarketTypeSelect, selectedMarketType }) => {
+    const sortedMarketTypeEntries = Object.entries(marketTypeDetailsMapper).sort(([keyA], [keyB]) => {
+        const order = ['synthetic', 'financial', 'all'];
+        return order.indexOf(keyA) - order.indexOf(keyB);
+    });
+    return (
+        <div className='wallets-mt5-account-type-content'>
+            {sortedMarketTypeEntries.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;