From e686802b957d98da87250c8a5a5a66480500c7cd Mon Sep 17 00:00:00 2001 From: George Usynin <103181646+heorhi-deriv@users.noreply.github.com> Date: Thu, 5 Dec 2024 10:52:57 +0300 Subject: [PATCH] DON't MERGE - [WALL] george / WALL-5147 / Gold MT5 account creation flow on Wallets (#17607) * feat(wallets): :sparkles: add Gold MT5 account creation real and demo * chore: replace company name from API for tnc, add dml shortcode support * chore: add gold mt5 acc into compare acc table * feat(wallets): :sparkles: add mt5 gold into compare accounts table real + demo * feat(wallets): :sparkles: add mf mt5 gold support * feat(wallets): :sparkles: implement compare accounts table for MFW clients * fix(wallets): :fire: remove Boom 300 from compare acc table --- .../__tests__/useSortedMT5Accounts.spec.ts | 32 +++++- .../src/hooks/useCFDCompareAccounts.tsx | 99 +++++-------------- .../api-v2/src/hooks/useSortedMT5Accounts.ts | 24 +++-- .../DocumentsList/DocumentsList.tsx | 16 +-- .../WalletMarketCurrencyIcon.tsx | 6 +- .../WalletMarketIcon/WalletMarketIcon.tsx | 5 +- .../src/constants/{icons.ts => icons.tsx} | 6 ++ .../features/cashier/constants/constants.ts | 4 + .../cashier/helpers/__tests__/helpers.spec.ts | 12 +++ .../src/features/cashier/helpers/helpers.ts | 18 ++-- .../wallets/src/features/cfd/constants.tsx | 68 ++++++++----- .../AvailableMT5AccountsList.tsx | 4 +- .../MT5PasswordModal/MT5PasswordModal.tsx | 4 +- .../CompareAccounts/CompareAccountsCard.tsx | 15 +-- .../CompareAccounts/CompareAccountsHeader.tsx | 24 ++--- .../CompareAccounts/CompareAccountsScreen.tsx | 29 ++---- .../CompareAccountsTitleIcon.tsx | 26 +++-- .../InstrumentsIconWithLabel.tsx | 4 +- .../InstrumentsLabelHighlighted.tsx | 3 +- .../__tests__/CompareAccountsCard.spec.tsx | 28 +++--- .../__tests__/CompareAccountsHeader.spec.tsx | 22 +---- .../CompareAccountsTitleIcon.spec.tsx | 14 +++ .../InstrumentsIconWithLabel.spec.tsx | 6 -- .../__tests__/compareAccountsConfig.spec.ts | 14 --- .../CompareAccounts/compareAccountsConfig.ts | 17 +++- .../cfd/screens/CompareAccounts/constants.tsx | 22 +++-- .../CreatePasswordMT5/CreatePasswordMT5.tsx | 2 +- .../screens/EnterPassword/EnterPassword.tsx | 6 +- .../MT5PasswordModalTnc.tsx | 9 +- .../__tests__/MT5PasswordModalTnc.spec.tsx | 1 + .../public/images/account-dmt5-gold-icon.svg | 1 + packages/wallets/src/types.ts | 1 + packages/wallets/src/utils/utils.ts | 4 +- 33 files changed, 274 insertions(+), 272 deletions(-) rename packages/wallets/src/constants/{icons.ts => icons.tsx} (91%) create mode 100644 packages/wallets/src/public/images/account-dmt5-gold-icon.svg diff --git a/packages/api-v2/src/hooks/__tests__/useSortedMT5Accounts.spec.ts b/packages/api-v2/src/hooks/__tests__/useSortedMT5Accounts.spec.ts index 9916fc1d8c78..d1ea14fb1cde 100644 --- a/packages/api-v2/src/hooks/__tests__/useSortedMT5Accounts.spec.ts +++ b/packages/api-v2/src/hooks/__tests__/useSortedMT5Accounts.spec.ts @@ -1,10 +1,11 @@ +import { cleanup } from '@testing-library/react'; import { renderHook } from '@testing-library/react-hooks'; + import useActiveAccount from '../useActiveAccount'; import useAvailableMT5Accounts from '../useAvailableMT5Accounts'; import useIsEuRegion from '../useIsEuRegion'; import useMT5AccountsList from '../useMT5AccountsList'; import useSortedMT5Accounts from '../useSortedMT5Accounts'; -import { cleanup } from '@testing-library/react'; jest.mock('../useActiveAccount', () => jest.fn()); jest.mock('../useAvailableMT5Accounts', () => jest.fn()); @@ -42,6 +43,11 @@ const mockMT5NonEUAvailableAccounts = [ product: 'zero_spread', shortcode: 'bvi', }, + { + is_default_jurisdiction: 'true', + product: 'gold', + shortcode: 'bvi', + }, { is_default_jurisdiction: 'true', product: 'swap_free', @@ -65,6 +71,11 @@ const mockMT5NonEUAddedAccounts = [ landing_company_short: 'bvi', product: 'zero_spread', }, + { + is_virtual: false, + landing_company_short: 'bvi', + product: 'gold', + }, ]; const mockMT5EUAvailableAccounts = [ @@ -135,6 +146,12 @@ describe('useSortedMT5Accounts', () => { product: 'zero_spread', shortcode: 'bvi', }, + { + is_added: false, + is_default_jurisdiction: 'true', + product: 'gold', + shortcode: 'bvi', + }, ]); }); @@ -199,6 +216,12 @@ describe('useSortedMT5Accounts', () => { landing_company_short: 'bvi', product: 'zero_spread', }, + { + is_added: true, + is_virtual: false, + landing_company_short: 'bvi', + product: 'gold', + }, ]); }); @@ -241,6 +264,7 @@ describe('useSortedMT5Accounts', () => { 'stp', 'swap_free', 'zero_spread', + 'gold', ]); }); @@ -297,6 +321,12 @@ describe('useSortedMT5Accounts', () => { landing_company_short: 'bvi', product: 'zero_spread', }, + { + is_added: true, + is_virtual: false, + landing_company_short: 'bvi', + product: 'gold', + }, ]); }); }); diff --git a/packages/api-v2/src/hooks/useCFDCompareAccounts.tsx b/packages/api-v2/src/hooks/useCFDCompareAccounts.tsx index 3e76f4436583..afa5d5170de1 100644 --- a/packages/api-v2/src/hooks/useCFDCompareAccounts.tsx +++ b/packages/api-v2/src/hooks/useCFDCompareAccounts.tsx @@ -1,9 +1,7 @@ import { useMemo } from 'react'; -import useActiveWalletAccount from './useActiveWalletAccount'; + import useAvailableMT5Accounts from './useAvailableMT5Accounts'; import useLandingCompany from './useLandingCompany'; -import useMT5AccountsList from './useMT5AccountsList'; -import useActiveTradingAccount from './useActiveTradingAccount'; // Remove the hardcoded values and use the values from the API once it's ready export const MARKET_TYPE = { @@ -76,89 +74,40 @@ const ctraderAccount = { }; /** A custom hook that gets compare accounts values. */ -const useCFDCompareAccounts = (isEU?: boolean) => { - const { data: activeWallet } = useActiveWalletAccount(); - const { data: activeDerivTradingAccount } = useActiveTradingAccount(); - const { is_virtual: isDemoWallet } = activeWallet ?? {}; - const { is_virtual: isDemoTrading } = activeDerivTradingAccount ?? {}; - - const isDemo = isDemoWallet || isDemoTrading; - - const { data: allAvailableMt5Accounts } = useAvailableMT5Accounts(); - const { data: addedAccounts, ...rest } = useMT5AccountsList(); - - const modifiedMt5Data = useMemo(() => { - if (!allAvailableMt5Accounts || !addedAccounts) return; - - return allAvailableMt5Accounts?.map(availableAccount => { - const createdAccount = addedAccounts?.find(account => { - return ( - availableAccount.market_type === account.market_type && - availableAccount.shortcode === account.landing_company_short - ); - }); - if (createdAccount) - return { - ...availableAccount, - - /** Determine if the account is added or not */ - is_added: true, - } as const; - - return { - ...availableAccount, - - /** Determine if the account is added or not */ - is_added: false, - } as const; - }); - }, [addedAccounts, allAvailableMt5Accounts]); - - // Sort the data by market_type to make sure the order is 'synthetic', 'financial', 'all' - const sortedMt5Accounts = useMemo(() => { - const marketTypeOrder = ['synthetic', 'financial', 'all']; - - if (!modifiedMt5Data) return; - - if (isEU) { - return modifiedMt5Data.filter( - account => account.shortcode === 'maltainvest' && account.market_type === 'financial' - ); - } - - const sortedData = marketTypeOrder.reduce((acc, marketType) => { - const accounts = modifiedMt5Data.filter( - account => account.market_type === marketType && account.shortcode !== 'maltainvest' - ); - if (!accounts.length) return acc; - return [...acc, ...accounts]; - }, [] as typeof modifiedMt5Data); - return sortedData; - }, [isEU, modifiedMt5Data]); - +const useCFDCompareAccounts = () => { + const { data: all_available_mt5_accounts, ...rest } = useAvailableMT5Accounts(); const { data: landingCompany } = useLandingCompany(); const hasDxtradeAccountAvailable = landingCompany?.dxtrade_all_company; const hasCTraderAccountAvailable = landingCompany?.ctrader?.all?.standard === JURISDICTION.SVG; - const demoAvailableAccounts = useMemo(() => { - if (!sortedMt5Accounts) return; - if (isEU) return sortedMt5Accounts.filter(account => account.shortcode === JURISDICTION.MALTAINVEST); - return sortedMt5Accounts.filter(account => { - if (account.product === PRODUCT.ZEROSPREAD) { - return account.shortcode === JURISDICTION.BVI; - } - return account.shortcode === JURISDICTION.SVG; - }); - }, [isEU, sortedMt5Accounts]); + const sortedMt5Accounts = useMemo(() => { + const sorting_order = ['standard', 'financial', 'stp', 'swap_free', 'zero_spread', 'gold']; + + if (!all_available_mt5_accounts) return; + + const sorted_data = sorting_order.reduce( + (acc, sort_order) => { + const accounts = all_available_mt5_accounts.filter(account => account.product === sort_order); + if (!accounts.length) return acc; + return [...acc, ...accounts]; + }, + [] as typeof all_available_mt5_accounts + ); + + return sorted_data; + }, [all_available_mt5_accounts]); const modifiedData = useMemo(() => { return { ctraderAccount: hasCTraderAccountAvailable ? ctraderAccount : undefined, dxtradeAccount: hasDxtradeAccountAvailable ? dxtradeAccount : undefined, - mt5Accounts: isDemo ? demoAvailableAccounts : sortedMt5Accounts, + mt5Accounts: sortedMt5Accounts?.filter( + //@ts-expect-error need update api-types + account => account.is_default_jurisdiction === 'true' + ), }; - }, [demoAvailableAccounts, hasCTraderAccountAvailable, hasDxtradeAccountAvailable, isDemo, sortedMt5Accounts]); + }, [hasCTraderAccountAvailable, hasDxtradeAccountAvailable, sortedMt5Accounts]); return { data: modifiedData, diff --git a/packages/api-v2/src/hooks/useSortedMT5Accounts.ts b/packages/api-v2/src/hooks/useSortedMT5Accounts.ts index 4634c5674865..bd7f2a30f6aa 100644 --- a/packages/api-v2/src/hooks/useSortedMT5Accounts.ts +++ b/packages/api-v2/src/hooks/useSortedMT5Accounts.ts @@ -1,17 +1,18 @@ import { useMemo } from 'react'; -import useMT5AccountsList from './useMT5AccountsList'; + +import useActiveAccount from './useActiveAccount'; import useAvailableMT5Accounts from './useAvailableMT5Accounts'; import useIsEuRegion from './useIsEuRegion'; -import useActiveAccount from './useActiveAccount'; +import useMT5AccountsList from './useMT5AccountsList'; /** A custom hook to get the sorted added and non-added MT5 accounts. */ -const useSortedMT5Accounts = (regulation?: string) => { +const useSortedMT5Accounts = (isEUClient: boolean = false) => { const { data: all_available_mt5_accounts } = useAvailableMT5Accounts(); const { isEUCountry } = useIsEuRegion(); const { data: mt5_accounts, ...rest } = useMT5AccountsList(); const { data: activeAccount } = useActiveAccount(); - const isEU = regulation === 'EU' || isEUCountry; + const isEU = isEUClient || isEUCountry; const modified_data = useMemo(() => { if (!all_available_mt5_accounts || !mt5_accounts) return; @@ -47,15 +48,18 @@ const useSortedMT5Accounts = (regulation?: string) => { }, [activeAccount?.is_virtual, all_available_mt5_accounts, isEU, mt5_accounts]); const sorted_data = useMemo(() => { - const sorting_order = ['standard', 'financial', 'stp', 'swap_free', 'zero_spread']; + const sorting_order = ['standard', 'financial', 'stp', 'swap_free', 'zero_spread', 'gold']; if (!modified_data) return; - const sorted_data = sorting_order.reduce((acc, sort_order) => { - const accounts = modified_data.filter(account => account.product === sort_order); - if (!accounts.length) return acc; - return [...acc, ...accounts]; - }, [] as typeof modified_data); + const sorted_data = sorting_order.reduce( + (acc, sort_order) => { + const accounts = modified_data.filter(account => account.product === sort_order); + if (!accounts.length) return acc; + return [...acc, ...accounts]; + }, + [] as typeof modified_data + ); return sorted_data; }, [modified_data]); diff --git a/packages/wallets/src/components/ClientVerificationModal/components/DocumentsList/DocumentsList.tsx b/packages/wallets/src/components/ClientVerificationModal/components/DocumentsList/DocumentsList.tsx index 2565cd4a5f50..75dac5c4f9f6 100644 --- a/packages/wallets/src/components/ClientVerificationModal/components/DocumentsList/DocumentsList.tsx +++ b/packages/wallets/src/components/ClientVerificationModal/components/DocumentsList/DocumentsList.tsx @@ -25,18 +25,8 @@ const statusBadge: TStatusBadgeProps = { const DocumentsList: React.FC = ({ account }) => { const history = useHistory(); const { localize } = useTranslations(); - const { - hasPoaStatus, - hasPoiStatus, - hasRequiredTin, - hasTinStatus, - isPoaRequired, - isPoiRequired, - isTinRequired, - statuses, - } = getClientVerification(account); - - const shouldShowTin = hasRequiredTin && hasTinStatus && isTinRequired; + const { hasPoaStatus, hasPoiStatus, isPoaRequired, isPoiRequired, isTinRequired, statuses } = + getClientVerification(account); return (
@@ -63,7 +53,7 @@ const DocumentsList: React.FC = ({ account }) => { title={localize('Proof of address')} /> )} - {shouldShowTin && ( + {isTinRequired && ( history.push('/account/personal-details')} diff --git a/packages/wallets/src/components/WalletMarketCurrencyIcon/WalletMarketCurrencyIcon.tsx b/packages/wallets/src/components/WalletMarketCurrencyIcon/WalletMarketCurrencyIcon.tsx index 6f0c190846eb..d0f96f9d5675 100644 --- a/packages/wallets/src/components/WalletMarketCurrencyIcon/WalletMarketCurrencyIcon.tsx +++ b/packages/wallets/src/components/WalletMarketCurrencyIcon/WalletMarketCurrencyIcon.tsx @@ -1,5 +1,5 @@ import React, { ComponentProps, FC } from 'react'; -import { CFDPlatformIcons, MT5MarketIcons } from '../../constants/icons'; +import { CFDPlatformIcons, MT5GoldIcon, MT5MarketIcons } from '../../constants/icons'; import { CFD_PLATFORMS, MARKET_TYPE } from '../../features/cfd/constants'; import { THooks, TPlatforms } from '../../types'; import { WalletCurrencyCard } from '../WalletCurrencyCard'; @@ -11,7 +11,7 @@ type TWalletMarketCurrencyIconProps = { isDemo: THooks.ActiveWalletAccount['is_virtual']; marketType?: keyof typeof MT5MarketIcons; platform?: TPlatforms.All; - product?: THooks.AvailableMT5Accounts['product']; + product?: THooks.AvailableMT5Accounts['product'] | 'gold'; size?: ComponentProps['size']; }; @@ -27,6 +27,8 @@ const WalletMarketCurrencyIcon: FC = ({ let MarketTypeIcon; if (marketType === MARKET_TYPE.ALL && platform && marketTypeAllkey in CFDPlatformIcons) { MarketTypeIcon = marketTypeAllkey; + } else if (platform === CFD_PLATFORMS.MT5 && product && product in MT5GoldIcon) { + MarketTypeIcon = product; } else if (platform === CFD_PLATFORMS.MT5 && marketType && marketType in MT5MarketIcons) { MarketTypeIcon = marketType; } else MarketTypeIcon = 'standard'; diff --git a/packages/wallets/src/components/WalletMarketIcon/WalletMarketIcon.tsx b/packages/wallets/src/components/WalletMarketIcon/WalletMarketIcon.tsx index 87998f879750..fd2b16b36abd 100644 --- a/packages/wallets/src/components/WalletMarketIcon/WalletMarketIcon.tsx +++ b/packages/wallets/src/components/WalletMarketIcon/WalletMarketIcon.tsx @@ -1,13 +1,14 @@ /* eslint-disable sort-keys */ import React, { CSSProperties } from 'react'; -import { AppIcons, CFDPlatformIcons, MT5MarketIcons, PlatformIcons } from '../../constants/icons'; +import { AppIcons, CFDPlatformIcons, MT5GoldIcon, MT5MarketIcons, PlatformIcons } from '../../constants/icons'; import { TIconTypes } from '../../types'; -const Icons: TIconTypes = { +const Icons: Record>> | TIconTypes = { ...AppIcons, ...MT5MarketIcons, ...CFDPlatformIcons, ...PlatformIcons, + ...MT5GoldIcon, }; const IconSizes = { diff --git a/packages/wallets/src/constants/icons.ts b/packages/wallets/src/constants/icons.tsx similarity index 91% rename from packages/wallets/src/constants/icons.ts rename to packages/wallets/src/constants/icons.tsx index 405f1c988821..57f5a21d7dac 100644 --- a/packages/wallets/src/constants/icons.ts +++ b/packages/wallets/src/constants/icons.tsx @@ -29,6 +29,7 @@ import { PaymentMethodUsdCoinBrandIcon, PaymentMethodXrpBrandIcon, } from '@deriv/quill-icons'; +import AccountsDmt5GoldIcon from '../public/images/account-dmt5-gold-icon.svg'; import { TCurrencyIconTypes, TIconTypes } from '../types'; export const AppIcons: TIconTypes = { @@ -56,6 +57,11 @@ export const PlatformIcons: TIconTypes = { standard: AccountsDerivAccountLightIcon, }; +export const MT5GoldIcon = { + //TODO: replace with icon from quill-icons and change the extension of the file from tsx to ts + gold: AccountsDmt5GoldIcon, +}; + // Currencies icons export const fiatIcons = ['AUD', 'EUR', 'GBP', 'USD'] as const; diff --git a/packages/wallets/src/features/cashier/constants/constants.ts b/packages/wallets/src/features/cashier/constants/constants.ts index 017e356a4e6c..d51eb80b3f29 100644 --- a/packages/wallets/src/features/cashier/constants/constants.ts +++ b/packages/wallets/src/features/cashier/constants/constants.ts @@ -83,6 +83,10 @@ export const MT5MarketTypeDetails: Record { ).toBe(MT5MarketTypeDetails.financial.product?.stp?.title); }); + it('returns correct name for MT5 financial GOLD account', () => { + expect( + getAccountName({ + accountCategory: 'trading', + accountType: PlatformDetails.mt5.name, + landingCompanyName: 'svg', + mt5MarketType: MT5MarketTypeDetails.financial.name, + product: 'gold', + }) + ).toBe(MT5MarketTypeDetails.financial.product?.gold?.title); + }); + it('returns correct name for MT5 synthetic account', () => { expect( getAccountName({ diff --git a/packages/wallets/src/features/cashier/helpers/helpers.ts b/packages/wallets/src/features/cashier/helpers/helpers.ts index 1939025add3d..a7f570424204 100644 --- a/packages/wallets/src/features/cashier/helpers/helpers.ts +++ b/packages/wallets/src/features/cashier/helpers/helpers.ts @@ -9,7 +9,7 @@ type TGetAccountNameProps = { displayCurrencyCode?: THooks.CurrencyConfig['display_code']; landingCompanyName: TWalletLandingCompanyName; mt5MarketType?: TMarketTypes.SortedMT5Accounts; - product?: THooks.AvailableMT5Accounts['product'] | 'stp'; + product?: THooks.AvailableMT5Accounts['product'] | 'gold' | 'stp'; }; //TODO: remove this function when landing_company_name will be added to transfer_between_accounts response in API for mt5 accounts @@ -29,10 +29,16 @@ export const getAccountName = ({ mt5MarketType, product, }: TGetAccountNameProps) => { - const MT5FinancialTitle = - product === 'stp' - ? MT5MarketTypeDetails.financial.product?.stp?.title - : MT5MarketTypeDetails.financial.landingCompany?.svg.title; + const getMT5FinancialTitle = () => { + switch (product) { + case 'stp': + return MT5MarketTypeDetails.financial.product?.stp?.title; + case 'gold': + return MT5MarketTypeDetails.financial.product?.gold?.title; + default: + return MT5MarketTypeDetails.financial.landingCompany?.svg.title; + } + }; switch (accountCategory) { case 'wallet': @@ -57,7 +63,7 @@ export const getAccountName = ({ 'svg' | 'virtual' > ) - ? MT5FinancialTitle + ? getMT5FinancialTitle() : MT5MarketTypeDetails.financial.landingCompany?.malta.title; case MT5MarketTypeDetails.synthetic.name: return MT5MarketTypeDetails.synthetic.title; diff --git a/packages/wallets/src/features/cfd/constants.tsx b/packages/wallets/src/features/cfd/constants.tsx index 95815d9259ae..1a329cb7bbee 100644 --- a/packages/wallets/src/features/cfd/constants.tsx +++ b/packages/wallets/src/features/cfd/constants.tsx @@ -15,6 +15,7 @@ import { PartnersProductDerivMt5BrandLightLogoHorizontalIcon, } from '@deriv/quill-icons'; import { localize, useTranslations } from '@deriv-com/translations'; +import AccountsDmt5GoldIcon from '../../public/images/account-dmt5-gold-icon.svg'; import { THooks, TPlatforms } from '../../types'; import { ctraderLinks, whiteLabelLinks } from './screens/MT5TradeScreen/MT5TradeLink/urlConfig'; @@ -34,47 +35,60 @@ const swapFreeDetails = (localize: ReturnType['localize' const getMarketTypeDetailsDescription = ( localize: ReturnType['localize'], - product?: THooks.AvailableMT5Accounts['product'] | 'stp', + product?: THooks.AvailableMT5Accounts['product'] | 'gold' | 'stp', isEuRegion?: boolean ) => { - if (isEuRegion && product !== 'stp') { - return localize('Your all-in-one access to financial and derived instruments.'); - } - if (product === 'stp') { return localize('Direct access to market prices'); } - return localize('CFDs on financial instruments'); -}; - -const getMarketTypeDetailsTitle = (product?: THooks.AvailableMT5Accounts['product'] | 'stp', isEuRegion?: boolean) => { - if (isEuRegion && product !== 'stp') { - return 'CFDs'; + if (product === 'gold') { + return localize('Trading opportunities on popular precious metals.'); } + return isEuRegion + ? localize('Your all-in-one access to financial and derived instruments.') + : localize('CFDs on financial instruments'); +}; + +const getMarketTypeDetailsTitle = ( + product?: THooks.AvailableMT5Accounts['product'] | 'gold' | 'stp', + isEuRegion?: boolean +) => { if (product === 'stp') { return 'Financial STP'; } - return 'Financial'; + if (product === 'gold') { + return 'Gold'; + } + + return isEuRegion ? 'CFDs' : 'Financial'; }; export const getMarketTypeDetails = ( localize: ReturnType['localize'], - product?: THooks.AvailableMT5Accounts['product'] | 'stp', + product?: THooks.AvailableMT5Accounts['product'] | 'gold' | 'stp', isEuRegion?: boolean -) => - ({ +) => { + const getIcon = () => { + if (product === 'gold') { + return ; + } + + return isEuRegion ? ( + + ) : ( + + ); + }; + + return { all: product === PRODUCT.ZEROSPREAD ? zeroSpreadDetails(localize) : swapFreeDetails(localize), financial: { availability: 'All', description: getMarketTypeDetailsDescription(localize, product, isEuRegion), - icon: isEuRegion ? ( - - ) : ( - - ), + icon: getIcon(), title: getMarketTypeDetailsTitle(product, isEuRegion), }, synthetic: { @@ -83,7 +97,8 @@ export const getMarketTypeDetails = ( icon: , title: 'Standard', }, - }) as const; + } as const; +}; export const PlatformDetails = { ctrader: { @@ -115,15 +130,15 @@ export const PlatformDetails = { } as const; export const companyNamesAndUrls = { - bvi: { name: 'Deriv (BVI) Ltd', shortcode: 'BVI', tncUrl: 'tnc/deriv-(bvi)-ltd.pdf' }, - labuan: { name: 'Deriv (FX) Ltd', shortcode: 'Labuan', tncUrl: 'tnc/deriv-(fx)-ltd.pdf' }, + bvi: { shortcode: 'BVI', tncUrl: 'tnc/deriv-(bvi)-ltd.pdf' }, + dml: { shortcode: 'DML', tncUrl: 'tnc/deriv-mauritius-ltd.pdf' }, + labuan: { shortcode: 'Labuan', tncUrl: 'tnc/deriv-(fx)-ltd.pdf' }, maltainvest: { - name: 'Deriv Investments (Europe) Limited', shortcode: 'Maltainvest', tncUrl: 'tnc/deriv-investments-(europe)-limited.pdf', }, - svg: { name: 'Deriv (SVG) LLC', shortcode: 'SVG', tncUrl: 'tnc/deriv-(svg)-llc.pdf' }, - vanuatu: { name: 'Deriv (V) Ltd', shortcode: 'Vanuatu', tncUrl: 'tnc/general-terms.pdf' }, + svg: { shortcode: 'SVG', tncUrl: 'tnc/deriv-(svg)-llc.pdf' }, + vanuatu: { shortcode: 'Vanuatu', tncUrl: 'tnc/general-terms.pdf' }, } as const; export const getAppToContentMapper = (localize: ReturnType['localize']) => @@ -214,6 +229,7 @@ export const JURISDICTION = { export const PRODUCT = { CTRADER: 'ctrader', DERIVX: 'derivx', + GOLD: 'gold', SWAPFREE: 'swap_free', ZEROSPREAD: 'zero_spread', } as const; diff --git a/packages/wallets/src/features/cfd/flows/MT5/AvailableMT5AccountsList/AvailableMT5AccountsList.tsx b/packages/wallets/src/features/cfd/flows/MT5/AvailableMT5AccountsList/AvailableMT5AccountsList.tsx index 20bcd85625c2..cd1e729226ad 100644 --- a/packages/wallets/src/features/cfd/flows/MT5/AvailableMT5AccountsList/AvailableMT5AccountsList.tsx +++ b/packages/wallets/src/features/cfd/flows/MT5/AvailableMT5AccountsList/AvailableMT5AccountsList.tsx @@ -40,6 +40,8 @@ const AvailableMT5AccountsList: React.FC = ({ account }) => { const hasUnavailableAccount = mt5Accounts?.some(account => account.status === 'unavailable'); const isVirtual = activeWallet?.is_virtual; const { hasClientKycStatus } = getClientVerification(account); + //@ts-expect-error - needs backend type update for account product + const isNewBadgeVisible = [PRODUCT.ZEROSPREAD, PRODUCT.GOLD].includes(account.product); const onButtonClick = useCallback(() => { if (hasUnavailableAccount) return show(); @@ -73,7 +75,7 @@ const AvailableMT5AccountsList: React.FC = ({ account }) => { {title} - {account.product === PRODUCT.ZEROSPREAD && ( + {isNewBadgeVisible && (
diff --git a/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx b/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx index 676d184d44a2..e707b8924d82 100644 --- a/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx +++ b/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx @@ -118,13 +118,15 @@ const MT5PasswordModal: React.FC = ({ account, isVirtual = false }) => { (selectedJurisdiction !== JURISDICTION.LABUAN ? { account_type: categoryAccountType, - ...(selectedJurisdiction === MARKET_TYPE.FINANCIAL && { + ...(marketType === MARKET_TYPE.FINANCIAL && { mt5_account_type: MARKET_TYPE.FINANCIAL, + product, }), } : { account_type: MARKET_TYPE.FINANCIAL, mt5_account_type: 'financial_stp', + product, })), ...(marketType === MARKET_TYPE.ALL && { product }), name: firstName ?? '', diff --git a/packages/wallets/src/features/cfd/screens/CompareAccounts/CompareAccountsCard.tsx b/packages/wallets/src/features/cfd/screens/CompareAccounts/CompareAccountsCard.tsx index 5944085a78c3..41678a844e51 100644 --- a/packages/wallets/src/features/cfd/screens/CompareAccounts/CompareAccountsCard.tsx +++ b/packages/wallets/src/features/cfd/screens/CompareAccounts/CompareAccountsCard.tsx @@ -20,16 +20,18 @@ type TCompareAccountsCard = { const CompareAccountsCard = ({ account, isDemo, isEuRegion }: TCompareAccountsCard) => { const product = account.platform === 'mt5' ? account.product : undefined; - //@ts-expect-error needs backend type + //@ts-expect-error need update api-types const productDetails = account.platform === 'mt5' ? account.product_details : undefined; - //@ts-expect-error needs backend type + //@ts-expect-error need update api-types const instruments = account.platform === 'mt5' ? account.instruments : undefined; + //@ts-expect-error need update api-types + const isNewBadgeVisible = product === PRODUCT.ZEROSPREAD || product === PRODUCT.GOLD; return (
- {product === PRODUCT.ZEROSPREAD && ( + {isNewBadgeVisible && (
@@ -48,13 +50,6 @@ const CompareAccountsCard = ({ account, isDemo, isEuRegion }: TCompareAccountsCa isEuRegion={isEuRegion} platform={account.platform} /> - {isEuRegion && ( -
- - - -
- )}
); diff --git a/packages/wallets/src/features/cfd/screens/CompareAccounts/CompareAccountsHeader.tsx b/packages/wallets/src/features/cfd/screens/CompareAccounts/CompareAccountsHeader.tsx index 7f82003f59b7..027f3ac277d5 100644 --- a/packages/wallets/src/features/cfd/screens/CompareAccounts/CompareAccountsHeader.tsx +++ b/packages/wallets/src/features/cfd/screens/CompareAccounts/CompareAccountsHeader.tsx @@ -1,33 +1,23 @@ import React from 'react'; import { useHistory } from 'react-router-dom'; import { LegacyClose2pxIcon } from '@deriv/quill-icons'; -import { Localize, useTranslations } from '@deriv-com/translations'; +import { Localize } from '@deriv-com/translations'; import { Text } from '@deriv-com/ui'; import './CompareAccountsHeader.scss'; type TCompareAccountsHeader = { isDemo: boolean; - isEuRegion: boolean; isLoading: boolean; }; -const CompareAccountsHeader = ({ isDemo, isEuRegion, isLoading }: TCompareAccountsHeader) => { +const CompareAccountsHeader = ({ isDemo, isLoading }: TCompareAccountsHeader) => { const history = useHistory(); - const { localize } = useTranslations(); - let headerText; - if (isEuRegion) { - headerText = ( - - ); - } else if (isDemo) { - headerText = ; - } else { - headerText = ; - } + const headerText = isDemo ? ( + + ) : ( + + ); return (
diff --git a/packages/wallets/src/features/cfd/screens/CompareAccounts/CompareAccountsScreen.tsx b/packages/wallets/src/features/cfd/screens/CompareAccounts/CompareAccountsScreen.tsx index cb5a49b621f7..584235f54bf5 100644 --- a/packages/wallets/src/features/cfd/screens/CompareAccounts/CompareAccountsScreen.tsx +++ b/packages/wallets/src/features/cfd/screens/CompareAccounts/CompareAccountsScreen.tsx @@ -12,34 +12,25 @@ const CompareAccountsScreen = () => { const { data: isEuRegion, isLoading: isEuRegionLoading } = useIsEuRegion(); const { is_virtual: isDemo = false } = activeWallet || {}; - const { - data: compareAccounts, - hasCTraderAccountAvailable, - hasDxtradeAccountAvailable, - } = useCFDCompareAccounts(isEuRegion); + const { data: compareAccounts, hasCTraderAccountAvailable, hasDxtradeAccountAvailable } = useCFDCompareAccounts(); // Remove the hardcoded cTrader and Deriv X values and use the values from the API once it's ready const { ctraderAccount, dxtradeAccount, mt5Accounts } = compareAccounts; return (
- +
{/* Renders MT5 data */} - {mt5Accounts - ?.filter( - //@ts-expect-error needs backend type - mt5Account => mt5Account.is_default_jurisdiction === 'true' && mt5Account.product !== 'gold' - ) - .map((item, index) => ( - - ))} + {mt5Accounts?.map((item, index) => ( + + ))} {/* Renders cTrader data */} {mt5Accounts?.length && hasCTraderAccountAvailable && ctraderAccount && ( diff --git a/packages/wallets/src/features/cfd/screens/CompareAccounts/CompareAccountsTitleIcon.tsx b/packages/wallets/src/features/cfd/screens/CompareAccounts/CompareAccountsTitleIcon.tsx index 4fa3200a8021..1404498a2d32 100644 --- a/packages/wallets/src/features/cfd/screens/CompareAccounts/CompareAccountsTitleIcon.tsx +++ b/packages/wallets/src/features/cfd/screens/CompareAccounts/CompareAccountsTitleIcon.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { LegacyInfo1pxIcon } from '@deriv/quill-icons'; import { localize, useTranslations } from '@deriv-com/translations'; -import { Divider, Text, Tooltip } from '@deriv-com/ui'; +import { Divider, Text, Tooltip, useDevice } from '@deriv-com/ui'; import { THooks, TPlatforms } from '../../../../types'; import { CFD_PLATFORMS } from '../../constants'; import { ACCOUNT_ICONS, MT5_PRODUCT } from './constants'; @@ -11,20 +11,20 @@ type TCompareAccountsTitleIcon = { isDemo: boolean; isEuRegion: boolean; platform: TPlatforms.All; - product?: THooks.AvailableMT5Accounts['product'] | 'stp'; + product?: THooks.AvailableMT5Accounts['product'] | 'gold' | 'stp'; }; type TGetAccountIconValues = { isEuRegion: boolean; platform: TPlatforms.All; - product?: THooks.AvailableMT5Accounts['product'] | 'stp'; + product?: THooks.AvailableMT5Accounts['product'] | 'gold' | 'stp'; }; type TGetAccountCardTitleValues = { isDemo?: boolean; isEuRegion: boolean; platform: TPlatforms.All; - product: THooks.AvailableMT5Accounts['product'] | TPlatforms.OtherAccounts | 'stp'; + product: THooks.AvailableMT5Accounts['product'] | TPlatforms.OtherAccounts | 'gold' | 'stp'; }; const getAccountIcon = (values: TGetAccountIconValues) => { @@ -49,6 +49,8 @@ const getAccountIcon = (values: TGetAccountIconValues) => { return ACCOUNT_ICONS[MT5_PRODUCT.SWAP_FREE]; case MT5_PRODUCT.ZERO_SPREAD: return ACCOUNT_ICONS[MT5_PRODUCT.ZERO_SPREAD]; + case MT5_PRODUCT.GOLD: + return ACCOUNT_ICONS[MT5_PRODUCT.GOLD]; default: return ACCOUNT_ICONS.default; } @@ -72,21 +74,23 @@ const getAccountCardTitle = (values: TGetAccountCardTitleValues) => { } if (platform === CFD_PLATFORMS.MT5) { - if (isEuRegion) { - return isDemo ? localize('CFDs Demo') : localize('CFDs'); - } - switch (product) { case MT5_PRODUCT.STANDARD: return isDemo ? localize('Standard Demo') : localize('Standard'); - case MT5_PRODUCT.FINANCIAL: + case MT5_PRODUCT.FINANCIAL: { + if (isEuRegion) { + return isDemo ? localize('CFDs Demo') : localize('CFDs'); + } return isDemo ? localize('Financial Demo') : localize('Financial'); + } case MT5_PRODUCT.STP: return localize('Financial - STP'); case MT5_PRODUCT.SWAP_FREE: return isDemo ? localize('Swap-Free Demo') : localize('Swap-Free'); case MT5_PRODUCT.ZERO_SPREAD: return isDemo ? localize('Zero Spread Demo') : localize('Zero Spread'); + case MT5_PRODUCT.GOLD: + return isDemo ? localize('Gold Demo') : localize('Gold'); default: return ''; } @@ -95,17 +99,19 @@ const getAccountCardTitle = (values: TGetAccountCardTitleValues) => { const CompareAccountsTitleIcon = ({ isDemo, isEuRegion, platform, product }: TCompareAccountsTitleIcon) => { const { localize } = useTranslations(); + const { isDesktop } = useDevice(); const jurisdictionCardIcon = getAccountIcon({ isEuRegion, platform, product }); const jurisdictionCardTitle = getAccountCardTitle({ isDemo, isEuRegion, platform, product }); const labuanJurisdictionMessage = localize( 'This account gives you direct market price access and tighter spreads.' ); + const iconSize = { height: isDesktop ? 48 : 32, width: isDesktop ? 48 : 32 }; return (
- {jurisdictionCardIcon} + {jurisdictionCardIcon(iconSize)}
{jurisdictionCardTitle} diff --git a/packages/wallets/src/features/cfd/screens/CompareAccounts/InstrumentsIconWithLabel.tsx b/packages/wallets/src/features/cfd/screens/CompareAccounts/InstrumentsIconWithLabel.tsx index 2b2d6238340a..898bd2fdaf3e 100644 --- a/packages/wallets/src/features/cfd/screens/CompareAccounts/InstrumentsIconWithLabel.tsx +++ b/packages/wallets/src/features/cfd/screens/CompareAccounts/InstrumentsIconWithLabel.tsx @@ -6,11 +6,10 @@ import './InstrumentsIconWithLabel.scss'; type TInstrumentsIcon = { highlighted: boolean; icon: keyof ReturnType; - isAsterisk?: boolean; text: string; }; -const InstrumentsIconWithLabel = ({ highlighted, icon, isAsterisk, text }: TInstrumentsIcon) => { +const InstrumentsIconWithLabel = ({ highlighted, icon, text }: TInstrumentsIcon) => { const { isDesktop, isTablet } = useDevice(); return ( @@ -33,7 +32,6 @@ const InstrumentsIconWithLabel = ({ highlighted, icon, isAsterisk, text }: TInst {text}
- {isAsterisk && *}
); }; diff --git a/packages/wallets/src/features/cfd/screens/CompareAccounts/InstrumentsLabelHighlighted.tsx b/packages/wallets/src/features/cfd/screens/CompareAccounts/InstrumentsLabelHighlighted.tsx index b9fb715e4526..eef1595f4123 100644 --- a/packages/wallets/src/features/cfd/screens/CompareAccounts/InstrumentsLabelHighlighted.tsx +++ b/packages/wallets/src/features/cfd/screens/CompareAccounts/InstrumentsLabelHighlighted.tsx @@ -14,11 +14,10 @@ type TInstrumentsLabelHighlighted = { const InstrumentsLabelHighlighted = ({ instruments, isEuRegion, platform }: TInstrumentsLabelHighlighted) => { const { localize } = useTranslations(); const iconData = [...getHighlightedIconLabel({ instruments, isEuRegion, localize, platform })]; - const filteredIconData = isEuRegion ? iconData.filter(item => item.highlighted) : iconData; return (
- {filteredIconData.map(item => ( + {iconData.map(item => ( ))}
diff --git a/packages/wallets/src/features/cfd/screens/CompareAccounts/__tests__/CompareAccountsCard.spec.tsx b/packages/wallets/src/features/cfd/screens/CompareAccounts/__tests__/CompareAccountsCard.spec.tsx index d980b4183734..d4662ee2cb02 100644 --- a/packages/wallets/src/features/cfd/screens/CompareAccounts/__tests__/CompareAccountsCard.spec.tsx +++ b/packages/wallets/src/features/cfd/screens/CompareAccounts/__tests__/CompareAccountsCard.spec.tsx @@ -37,8 +37,8 @@ describe('CompareAccountsCard', () => { expect(screen.getByText('Spreads from')).toBeInTheDocument(); }); - it('renders the new banner for Zero Spread platform', () => { - render( + it('renders the new banner for Zero Spread and Gold platforms', () => { + const { rerender } = render( { ); expect(screen.getByText('NEW')).toBeInTheDocument(); - }); - - it('does not render the new banner for non Zero Spread platforms', () => { - //@ts-expect-error we only need partial types - render(, { wrapper }); - - expect(screen.queryByText('NEW')).not.toBeInTheDocument(); - }); - it('renders the EU clients disclaimer for EU users', () => { - //@ts-expect-error we only need partial types - render(, { wrapper }); + rerender( + + ); - expect(screen.getByText('*Boom 300 and Crash 300 Index')).toBeInTheDocument(); + expect(screen.getByText('NEW')).toBeInTheDocument(); }); - it('does not render the EU clients disclaimer for non-EU users', () => { + it('does not render the new banner for non Zero Spread platforms', () => { //@ts-expect-error we only need partial types render(, { wrapper }); - expect(screen.queryByText('*Boom 300 and Crash 300 Index')).not.toBeInTheDocument(); + expect(screen.queryByText('NEW')).not.toBeInTheDocument(); }); }); diff --git a/packages/wallets/src/features/cfd/screens/CompareAccounts/__tests__/CompareAccountsHeader.spec.tsx b/packages/wallets/src/features/cfd/screens/CompareAccounts/__tests__/CompareAccountsHeader.spec.tsx index 6853c15d3eae..92c3ceccf6f4 100644 --- a/packages/wallets/src/features/cfd/screens/CompareAccounts/__tests__/CompareAccountsHeader.spec.tsx +++ b/packages/wallets/src/features/cfd/screens/CompareAccounts/__tests__/CompareAccountsHeader.spec.tsx @@ -14,32 +14,20 @@ describe('CompareAccountsHeader', () => { (useHistory as jest.Mock).mockReturnValue({ push: mockHistoryPush }); }); - it('displays CFDs compare accounts header title for non-demo, non-EU accounts', () => { - render(); + it('displays proper CFDs compare accounts header title for real accounts', () => { + render(); expect(screen.getByText('Compare CFDs accounts')).toBeInTheDocument(); }); - it('displays CFDs compare accounts header title for demo, non-EU accounts', () => { - render(); + it('displays proper CFDs compare accounts header title for demo accounts', () => { + render(); expect(screen.getByText('Compare CFDs demo accounts')).toBeInTheDocument(); }); - it('displays MT5 CFDs compare accounts header title for non-demo, EU accounts', () => { - render(); - - expect(screen.getByText('Deriv MT5 CFDs real account')).toBeInTheDocument(); - }); - - it('displays MT5 CFDs compare accounts header title for demo, EU accounts', () => { - render(); - - expect(screen.getByText('Deriv MT5 CFDs Demo account')).toBeInTheDocument(); - }); - it('redirects back to root when close icon is clicked', () => { - render(); + render(); const closeIcon = screen.getByTestId('dt_wallets_compare_accounts_header_close_icon'); fireEvent.click(closeIcon); diff --git a/packages/wallets/src/features/cfd/screens/CompareAccounts/__tests__/CompareAccountsTitleIcon.spec.tsx b/packages/wallets/src/features/cfd/screens/CompareAccounts/__tests__/CompareAccountsTitleIcon.spec.tsx index 84e643766303..36ba23379012 100644 --- a/packages/wallets/src/features/cfd/screens/CompareAccounts/__tests__/CompareAccountsTitleIcon.spec.tsx +++ b/packages/wallets/src/features/cfd/screens/CompareAccounts/__tests__/CompareAccountsTitleIcon.spec.tsx @@ -80,6 +80,13 @@ describe('CompareAccountsTitleIcon', () => { expect(screen.getByText('Swap-Free')).toBeInTheDocument(); }); + it('renders correct title for gold accounts', () => { + render(, { + wrapper, + }); + expect(screen.getByText('Gold')).toBeInTheDocument(); + }); + it('renders correct title for demo swap-free accounts', () => { render(, { wrapper, @@ -130,4 +137,11 @@ describe('CompareAccountsTitleIcon', () => { expect(screen.getByText('Financial Demo')).toBeInTheDocument(); }); + + it('renders correct title for demo gold accounts', () => { + render(, { + wrapper, + }); + expect(screen.getByText('Gold Demo')).toBeInTheDocument(); + }); }); diff --git a/packages/wallets/src/features/cfd/screens/CompareAccounts/__tests__/InstrumentsIconWithLabel.spec.tsx b/packages/wallets/src/features/cfd/screens/CompareAccounts/__tests__/InstrumentsIconWithLabel.spec.tsx index 0168437e658b..c0233ee02442 100644 --- a/packages/wallets/src/features/cfd/screens/CompareAccounts/__tests__/InstrumentsIconWithLabel.spec.tsx +++ b/packages/wallets/src/features/cfd/screens/CompareAccounts/__tests__/InstrumentsIconWithLabel.spec.tsx @@ -30,10 +30,4 @@ describe('InstrumentsIconWithLabel', () => { expect(screen.getByTestId('forex-icon')).toBeInTheDocument(); expect(screen.getByText('Forex')).toBeInTheDocument(); }); - - it('renders asterisk when isAsterisk is true', () => { - render(); - - expect(screen.getByText('*')).toBeInTheDocument(); - }); }); diff --git a/packages/wallets/src/features/cfd/screens/CompareAccounts/__tests__/compareAccountsConfig.spec.ts b/packages/wallets/src/features/cfd/screens/CompareAccounts/__tests__/compareAccountsConfig.spec.ts index 653c4f3ae844..471ae8b5ff1b 100644 --- a/packages/wallets/src/features/cfd/screens/CompareAccounts/__tests__/compareAccountsConfig.spec.ts +++ b/packages/wallets/src/features/cfd/screens/CompareAccounts/__tests__/compareAccountsConfig.spec.ts @@ -93,20 +93,6 @@ describe('compareAccountsConfig', () => { }); expect(result[0].text).toBe('Forex: major/minor'); }); - - it('adds asterisk for synthetic indices in EU region', () => { - const result = getHighlightedIconLabel({ - ...defaultValues, - isEuRegion: true, - }); - - expect(result[6]).toEqual({ - highlighted: false, - icon: 'Synthetics', - isAsterisk: true, - text: 'Synthetic indices', - }); - }); }); describe('getPlatformType', () => { diff --git a/packages/wallets/src/features/cfd/screens/CompareAccounts/compareAccountsConfig.ts b/packages/wallets/src/features/cfd/screens/CompareAccounts/compareAccountsConfig.ts index e0af988f70c3..5ce483518a5b 100644 --- a/packages/wallets/src/features/cfd/screens/CompareAccounts/compareAccountsConfig.ts +++ b/packages/wallets/src/features/cfd/screens/CompareAccounts/compareAccountsConfig.ts @@ -53,15 +53,24 @@ const getHighlightedIconLabel = (values: TValues) => { icon: 'Cryptocurrencies', text: localize('Cryptocurrencies'), }, - { highlighted: shouldHighlight('ETFs'), icon: 'ETF', text: localize('ETFs') }, + ...(!isEuRegion + ? ([{ highlighted: shouldHighlight('ETFs'), icon: 'ETF', text: localize('ETFs') }] as const) + : []), { highlighted: shouldHighlight('Synthetic indices'), icon: 'Synthetics', - isAsterisk: isEuRegion, text: localize('Synthetic indices'), }, - { highlighted: shouldHighlight('Basket indices'), icon: 'Baskets', text: localize('Basket indices') }, - { highlighted: shouldHighlight('Derived FX'), icon: 'DerivedFX', text: localize('Derived FX') }, + ...(!isEuRegion + ? ([ + { highlighted: shouldHighlight('Basket indices'), icon: 'Baskets', text: localize('Basket indices') }, + ] as const) + : []), + ...(!isEuRegion + ? ([ + { highlighted: shouldHighlight('Derived FX'), icon: 'DerivedFX', text: localize('Derived FX') }, + ] as const) + : []), ] as const; }; diff --git a/packages/wallets/src/features/cfd/screens/CompareAccounts/constants.tsx b/packages/wallets/src/features/cfd/screens/CompareAccounts/constants.tsx index 7ab27cfb0fda..263280bc9cf1 100644 --- a/packages/wallets/src/features/cfd/screens/CompareAccounts/constants.tsx +++ b/packages/wallets/src/features/cfd/screens/CompareAccounts/constants.tsx @@ -9,24 +9,32 @@ import { PartnersProductDerivCtraderBrandLightLogoHorizontalIcon, } from '@deriv/quill-icons'; import { useTranslations } from '@deriv-com/translations'; +import AccountsDmt5GoldIcon from '../../../../public/images/account-dmt5-gold-icon.svg'; import { CFD_PLATFORMS } from '../../constants'; export const MT5_PRODUCT = { FINANCIAL: 'financial', + GOLD: 'gold', STANDARD: 'standard', STP: 'stp', SWAP_FREE: 'swap_free', ZERO_SPREAD: 'zero_spread', } as const; +type TProps = React.ComponentProps | React.ComponentProps; + export const ACCOUNT_ICONS = { - [MT5_PRODUCT.STANDARD]: , - [MT5_PRODUCT.FINANCIAL]: { Eu: , NonEU: }, - [MT5_PRODUCT.SWAP_FREE]: , - [CFD_PLATFORMS.DXTRADE]: , - [CFD_PLATFORMS.CTRADER]: , - [MT5_PRODUCT.ZERO_SPREAD]: , - default: , + [MT5_PRODUCT.STANDARD]: (props: TProps) => , + [MT5_PRODUCT.FINANCIAL]: { + Eu: (props: TProps) => , + NonEU: (props: TProps) => , + }, + [MT5_PRODUCT.SWAP_FREE]: (props: TProps) => , + [CFD_PLATFORMS.DXTRADE]: (props: TProps) => , + [CFD_PLATFORMS.CTRADER]: (props: TProps) => , + [MT5_PRODUCT.ZERO_SPREAD]: (props: TProps) => , + [MT5_PRODUCT.GOLD]: (props: TProps) => , + default: (props: TProps) => , } as const; export const JURISDICTION = { diff --git a/packages/wallets/src/features/cfd/screens/CreatePasswordMT5/CreatePasswordMT5.tsx b/packages/wallets/src/features/cfd/screens/CreatePasswordMT5/CreatePasswordMT5.tsx index 59df452bebd0..dea696697287 100644 --- a/packages/wallets/src/features/cfd/screens/CreatePasswordMT5/CreatePasswordMT5.tsx +++ b/packages/wallets/src/features/cfd/screens/CreatePasswordMT5/CreatePasswordMT5.tsx @@ -64,7 +64,7 @@ const CreatePasswordMT5: React.FC = ({ /> {!isVirtual && } {!isVirtual && account.shortcode !== 'svg' && ( - + )}
diff --git a/packages/wallets/src/features/cfd/screens/EnterPassword/EnterPassword.tsx b/packages/wallets/src/features/cfd/screens/EnterPassword/EnterPassword.tsx index 4e362102cbe6..f2abdca0548c 100644 --- a/packages/wallets/src/features/cfd/screens/EnterPassword/EnterPassword.tsx +++ b/packages/wallets/src/features/cfd/screens/EnterPassword/EnterPassword.tsx @@ -124,7 +124,11 @@ const EnterPassword: React.FC = ({ )} {account && !isVirtual && } {account && account.shortcode !== JURISDICTION.SVG && platform === CFD_PLATFORMS.MT5 && !isVirtual && ( - onTncChange?.()} /> + onTncChange?.()} + /> )}
{isDesktop && ( diff --git a/packages/wallets/src/features/cfd/screens/components/MT5PasswordModalTnc/MT5PasswordModalTnc.tsx b/packages/wallets/src/features/cfd/screens/components/MT5PasswordModalTnc/MT5PasswordModalTnc.tsx index 507b9bb26e54..ef2333b84e0d 100644 --- a/packages/wallets/src/features/cfd/screens/components/MT5PasswordModalTnc/MT5PasswordModalTnc.tsx +++ b/packages/wallets/src/features/cfd/screens/components/MT5PasswordModalTnc/MT5PasswordModalTnc.tsx @@ -8,10 +8,11 @@ import './MT5PasswordModalTnc.scss'; export type TMT5PasswordModalTncProps = { checked: boolean; + companyName?: string; onChange: () => void; }; -const MT5PasswordModalTnc = ({ checked, onChange }: TMT5PasswordModalTncProps) => { +const MT5PasswordModalTnc = ({ checked, companyName, onChange }: TMT5PasswordModalTncProps) => { const { isDesktop } = useDevice(); const { getModalState } = useModal(); const selectedJurisdiction = getModalState('selectedJurisdiction'); @@ -27,10 +28,8 @@ const MT5PasswordModalTnc = ({ checked, onChange }: TMT5PasswordModalTncProps) = ]} - i18n_default_text="I confirm and accept {{company}}'s <0>terms and conditions" - values={{ - company: selectedCompany.name, - }} + i18n_default_text="I confirm and accept {{companyName}}'s <0>terms and conditions" + values={{ companyName }} /> } diff --git a/packages/wallets/src/features/cfd/screens/components/MT5PasswordModalTnc/__tests__/MT5PasswordModalTnc.spec.tsx b/packages/wallets/src/features/cfd/screens/components/MT5PasswordModalTnc/__tests__/MT5PasswordModalTnc.spec.tsx index 35e05b9cb1ac..03dfdef0f475 100644 --- a/packages/wallets/src/features/cfd/screens/components/MT5PasswordModalTnc/__tests__/MT5PasswordModalTnc.spec.tsx +++ b/packages/wallets/src/features/cfd/screens/components/MT5PasswordModalTnc/__tests__/MT5PasswordModalTnc.spec.tsx @@ -33,6 +33,7 @@ const mockOnChange = jest.fn(); describe('MT5PasswordModalTnc', () => { const defaultProps: TMT5PasswordModalTncProps = { checked: false, + companyName: 'Deriv (BVI) Ltd', onChange: mockOnChange, }; diff --git a/packages/wallets/src/public/images/account-dmt5-gold-icon.svg b/packages/wallets/src/public/images/account-dmt5-gold-icon.svg new file mode 100644 index 000000000000..c2ab3211277e --- /dev/null +++ b/packages/wallets/src/public/images/account-dmt5-gold-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/wallets/src/types.ts b/packages/wallets/src/types.ts index f611ee492c9b..233b274e2ffd 100644 --- a/packages/wallets/src/types.ts +++ b/packages/wallets/src/types.ts @@ -117,6 +117,7 @@ export type TCurrencyIconTypes = Record> + | 'gold' | 'stp'; export type TTranslations = ReturnType; diff --git a/packages/wallets/src/utils/utils.ts b/packages/wallets/src/utils/utils.ts index 61536ad801b0..3669a999e006 100644 --- a/packages/wallets/src/utils/utils.ts +++ b/packages/wallets/src/utils/utils.ts @@ -35,14 +35,12 @@ export const getClientVerification = (account: TAddedMT5Account | TAvailableMT5A const isPoiRequired = hasPoiStatus && requiredDocumentStatuses.includes(documentStatuses.poi_status); const isPoaRequired = hasPoaStatus && requiredDocumentStatuses.includes(documentStatuses.poa_status); const isTinRequired = - hasTinStatus && hasRequiredTin && Boolean(documentStatuses.required_tin) && !documentStatuses.valid_tin; + hasRequiredTin && hasTinStatus && Boolean(documentStatuses.required_tin) && !documentStatuses.valid_tin; return { hasClientKycStatus, hasPoaStatus, hasPoiStatus, - hasRequiredTin, - hasTinStatus, isPoaRequired, isPoiRequired, isTinRequired,