diff --git a/packages/wallets/src/features/cfd/constants.tsx b/packages/wallets/src/features/cfd/constants.tsx index a5264ee9af2e..ce97874978a4 100644 --- a/packages/wallets/src/features/cfd/constants.tsx +++ b/packages/wallets/src/features/cfd/constants.tsx @@ -1,9 +1,9 @@ import React from 'react'; +import CTraderIcon from '../../public/images/ctrader.svg'; +import DerivXIcon from '../../public/images/derivx.svg'; import DerivedMT5Icon from '../../public/images/mt5-derived.svg'; import FinancialMT5Icon from '../../public/images/mt5-financial.svg'; import SwapFreeMT5Icon from '../../public/images/mt5-swap-free.svg'; -import DerivXIcon from '../../public/images/derivx.svg'; -import CTraderIcon from '../../public/images/ctrader.svg'; export const MarketTypeDetails = { all: { @@ -41,3 +41,13 @@ export const PlatformDetails = { title: 'Deriv MT5', }, }; + +export const companyNamesAndUrls = { + bvi: { name: 'Deriv (BVI) Ltd', tncUrl: 'tnc/deriv-(bvi)-ltd.pdf' }, + labuan: { name: 'Deriv (FX) Ltd', tncUrl: 'tnc/deriv-(fx)-ltd.pdf' }, + maltainvest: { + name: 'Deriv Investments (Europe) Limited', + tncUrl: 'tnc/deriv-investments-(europe)-limited.pdf', + }, + vanuatu: { name: 'Deriv (V) Ltd', tncUrl: 'tnc/general-terms.pdf' }, +} as const; diff --git a/packages/wallets/src/features/cfd/screens/Jurisdiction/JurisdictionFootNoteTitle/JurisdictionFootNoteTitle.tsx b/packages/wallets/src/features/cfd/screens/Jurisdiction/JurisdictionFootNoteTitle/JurisdictionFootNoteTitle.tsx index 16024a720728..e1e834f0939f 100644 --- a/packages/wallets/src/features/cfd/screens/Jurisdiction/JurisdictionFootNoteTitle/JurisdictionFootNoteTitle.tsx +++ b/packages/wallets/src/features/cfd/screens/Jurisdiction/JurisdictionFootNoteTitle/JurisdictionFootNoteTitle.tsx @@ -34,7 +34,7 @@ const JurisdictionFootNoteTitle: FC = ({ marketType, } return ( - + {footnoteText} ); diff --git a/packages/wallets/src/features/cfd/screens/Jurisdiction/JurisdictionScreen.scss b/packages/wallets/src/features/cfd/screens/Jurisdiction/JurisdictionScreen.scss index 385a699a477d..a5378c852ef9 100644 --- a/packages/wallets/src/features/cfd/screens/Jurisdiction/JurisdictionScreen.scss +++ b/packages/wallets/src/features/cfd/screens/Jurisdiction/JurisdictionScreen.scss @@ -54,25 +54,4 @@ padding: 2rem 0; } } - - &__tnc { - display: flex; - flex-direction: column; - gap: 1.2rem; - height: 8%; - justify-content: center; - margin-top: 2rem; - - &-checkbox { - align-items: center; - display: flex; - gap: 0.4rem; - justify-content: center; - - &-input, - &-label { - cursor: pointer; - } - } - } } diff --git a/packages/wallets/src/features/cfd/screens/Jurisdiction/JurisdictionScreen.tsx b/packages/wallets/src/features/cfd/screens/Jurisdiction/JurisdictionScreen.tsx index 0a835a073c5b..e2631b3798cd 100644 --- a/packages/wallets/src/features/cfd/screens/Jurisdiction/JurisdictionScreen.tsx +++ b/packages/wallets/src/features/cfd/screens/Jurisdiction/JurisdictionScreen.tsx @@ -7,7 +7,7 @@ import { THooks } from '../../../../types'; import { useDynamicLeverageModalState } from '../../components/DynamicLeverageContext'; import { MarketTypeDetails } from '../../constants'; import { JurisdictionCard } from './JurisdictionCard'; -import { JurisdictionFootNoteTitle } from './JurisdictionFootNoteTitle'; +import { JurisdictionTncSection } from './JurisdictionTncSection'; import './JurisdictionScreen.scss'; type TJurisdictionScreenProps = { @@ -70,28 +70,11 @@ const JurisdictionScreen: FC = ({ /> ))} - -
- {selectedJurisdiction && ( - - )} - {selectedJurisdiction && selectedJurisdiction !== 'svg' && ( -
- ) => - setIsCheckBoxChecked(event.target.checked) - } - type='checkbox' - /> - -
- )} -
+ ); }; diff --git a/packages/wallets/src/features/cfd/screens/Jurisdiction/JurisdictionTncSection/JurisdictionTncSection.scss b/packages/wallets/src/features/cfd/screens/Jurisdiction/JurisdictionTncSection/JurisdictionTncSection.scss new file mode 100644 index 000000000000..4ca74f1b75be --- /dev/null +++ b/packages/wallets/src/features/cfd/screens/Jurisdiction/JurisdictionTncSection/JurisdictionTncSection.scss @@ -0,0 +1,33 @@ +.wallets-jurisdiction-tnc { + display: flex; + flex-direction: column; + gap: 1.2rem; + justify-content: center; + margin-top: 3rem; + + @include mobile { + position: sticky; + bottom: 0; + background: var(--system-light-8-primary-background, #fff); + justify-content: center; + padding: 1.5rem 2rem 1rem; + width: 100vw; + } + + &-checkbox { + align-items: center; + display: flex; + gap: 0.8rem; + justify-content: center; + + &__link { + color: var(--brand-coral, #ff444f); + } + + &__link, + &-input, + &-label { + cursor: pointer; + } + } +} diff --git a/packages/wallets/src/features/cfd/screens/Jurisdiction/JurisdictionTncSection/JurisdictionTncSection.tsx b/packages/wallets/src/features/cfd/screens/Jurisdiction/JurisdictionTncSection/JurisdictionTncSection.tsx new file mode 100644 index 000000000000..b4a32c306e82 --- /dev/null +++ b/packages/wallets/src/features/cfd/screens/Jurisdiction/JurisdictionTncSection/JurisdictionTncSection.tsx @@ -0,0 +1,80 @@ +import React from 'react'; +import { WalletText } from '../../../../../components/Base'; +import { useModal } from '../../../../../components/ModalProvider'; +import { getStaticUrl } from '../../../../../helpers/urls'; +import useDevice from '../../../../../hooks/useDevice'; +import { THooks } from '../../../../../types'; +import { companyNamesAndUrls } from '../../../constants'; +import { JurisdictionFootNoteTitle } from '../JurisdictionFootNoteTitle'; +import './JurisdictionTncSection.scss'; + +type TProps = { + isCheckBoxChecked: boolean; + selectedJurisdiction: THooks.AvailableMT5Accounts['shortcode']; + setIsCheckBoxChecked: React.Dispatch>; +}; + +const JurisdictionTncSection: React.FC = ({ + isCheckBoxChecked, + selectedJurisdiction, + setIsCheckBoxChecked, +}) => { + const { isMobile } = useDevice(); + const { getModalState } = useModal(); + const marketType = getModalState('marketType') || 'all'; + return ( + + ); +}; + +export default JurisdictionTncSection; diff --git a/packages/wallets/src/features/cfd/screens/Jurisdiction/JurisdictionTncSection/index.ts b/packages/wallets/src/features/cfd/screens/Jurisdiction/JurisdictionTncSection/index.ts new file mode 100644 index 000000000000..12eb5da391ce --- /dev/null +++ b/packages/wallets/src/features/cfd/screens/Jurisdiction/JurisdictionTncSection/index.ts @@ -0,0 +1 @@ +export { default as JurisdictionTncSection } from './JurisdictionTncSection'; diff --git a/packages/wallets/src/features/cfd/screens/Jurisdiction/index.ts b/packages/wallets/src/features/cfd/screens/Jurisdiction/index.ts index 20b0df2db709..d2581a736617 100644 --- a/packages/wallets/src/features/cfd/screens/Jurisdiction/index.ts +++ b/packages/wallets/src/features/cfd/screens/Jurisdiction/index.ts @@ -1 +1,2 @@ export { default as JurisdictionScreen } from './JurisdictionScreen'; +export * from './JurisdictionTncSection';