diff --git a/packages/tradershub/src/components/Modal/ModalHeader.tsx b/packages/tradershub/src/components/Modal/ModalHeader.tsx
index 6042c8e24852..c86f70c8d78b 100644
--- a/packages/tradershub/src/components/Modal/ModalHeader.tsx
+++ b/packages/tradershub/src/components/Modal/ModalHeader.tsx
@@ -1,7 +1,7 @@
import React, { ComponentProps } from 'react';
import { twMerge } from 'tailwind-merge';
import CloseIcon from '@/assets/svgs/ic-close-dark.svg';
-import { Provider } from '@deriv/library';
+import { useModal } from '@/providers';
import { Text } from '@deriv-com/ui';
import { TModalComponents } from './Modal';
@@ -26,7 +26,7 @@ type TModalHeader = TModalComponents & {
* @returns {JSX.Element} The ModalHeader component.
*/
const ModalHeader = ({ className, hideCloseButton = false, title, titleClassName, titleSize }: TModalHeader) => {
- const { hide } = Provider.useModal();
+ const { hide } = useModal();
return (
{
const { uiState } = useUIContext();
- const { show } = Provider.useModal();
+ const { show } = useModal();
const { buttons, handleButtonClick } = useRegulationSwitcher();
const activeRegulation = uiState.regulation;
diff --git a/packages/tradershub/src/components/RegulationSwitcher/RegulationSwitcherMobile.tsx b/packages/tradershub/src/components/RegulationSwitcher/RegulationSwitcherMobile.tsx
index 56fe03bd195f..e50971801bed 100644
--- a/packages/tradershub/src/components/RegulationSwitcher/RegulationSwitcherMobile.tsx
+++ b/packages/tradershub/src/components/RegulationSwitcher/RegulationSwitcherMobile.tsx
@@ -3,11 +3,11 @@ import InfoIcon from '@/assets/svgs/ic-info-outline.svg';
import { useUIContext } from '@/components';
import { useRegulationSwitcher } from '@/hooks';
import { RegulationModal } from '@/modals';
-import { Provider } from '@deriv/library';
+import { useModal } from '@/providers';
import { Tab, Tabs } from '@deriv-com/ui';
const RegulationSwitcherMobile = () => {
- const { show } = Provider.useModal();
+ const { show } = useModal();
const { uiState } = useUIContext();
const { buttons, handleButtonClick } = useRegulationSwitcher();
diff --git a/packages/tradershub/src/features/cfd/flows/CTrader/AddedCTraderAccountsList/AddedCTraderAccountsList.tsx b/packages/tradershub/src/features/cfd/flows/CTrader/AddedCTraderAccountsList/AddedCTraderAccountsList.tsx
index 177686573166..8ce91d795012 100644
--- a/packages/tradershub/src/features/cfd/flows/CTrader/AddedCTraderAccountsList/AddedCTraderAccountsList.tsx
+++ b/packages/tradershub/src/features/cfd/flows/CTrader/AddedCTraderAccountsList/AddedCTraderAccountsList.tsx
@@ -1,10 +1,10 @@
import React, { Fragment } from 'react';
import { IconComponent, TradingAccountCard } from '@/components';
import { getCfdsAccountTitle } from '@/helpers/cfdsAccountHelpers';
+import { useModal } from '@/providers';
import { CFDPlatforms, PlatformDetails } from '@cfd/constants';
import { TopUpModal, TradeModal } from '@cfd/modals';
import { useActiveTradingAccount, useCtraderAccountsList } from '@deriv/api';
-import { Provider } from '@deriv/library';
import { Button, Text } from '@deriv-com/ui';
import { URLUtils } from '@deriv-com/utils';
@@ -22,7 +22,7 @@ const LeadingIcon = () => (
const AddedCTraderAccountsList = () => {
const { data: cTraderAccounts } = useCtraderAccountsList();
const { data: activeTradingAccount } = useActiveTradingAccount();
- const { show } = Provider.useModal();
+ const { show } = useModal();
const account = cTraderAccounts?.find(account => account.is_virtual === activeTradingAccount?.is_virtual);
const isVirtual = account?.is_virtual;
const title = getCfdsAccountTitle(PlatformDetails.ctrader.title, isVirtual);
diff --git a/packages/tradershub/src/features/cfd/flows/CTrader/AvailableCTraderAccountsList/AvailableCTraderAccountsList.tsx b/packages/tradershub/src/features/cfd/flows/CTrader/AvailableCTraderAccountsList/AvailableCTraderAccountsList.tsx
index 913efdc7b9bc..f13d3a17dae5 100644
--- a/packages/tradershub/src/features/cfd/flows/CTrader/AvailableCTraderAccountsList/AvailableCTraderAccountsList.tsx
+++ b/packages/tradershub/src/features/cfd/flows/CTrader/AvailableCTraderAccountsList/AvailableCTraderAccountsList.tsx
@@ -8,10 +8,10 @@ import {
} from '@/components';
import { getCfdsAccountTitle } from '@/helpers/cfdsAccountHelpers';
import { useRegulationFlags } from '@/hooks';
+import { useModal } from '@/providers';
import { PlatformDetails } from '@cfd/constants';
import { CTraderSuccessModal } from '@cfd/modals';
import { useActiveTradingAccount, useCreateOtherCFDAccount } from '@deriv/api';
-import { Provider } from '@deriv/library';
import { URLUtils } from '@deriv-com/utils';
const { getDerivStaticURL } = URLUtils;
@@ -29,7 +29,7 @@ const AvailableCTraderAccountsList = () => {
const { mutate, status } = useCreateOtherCFDAccount();
const { data: activeTradingAccount } = useActiveTradingAccount();
const { hasActiveDerivAccount } = useRegulationFlags();
- const { show } = Provider.useModal();
+ const { show } = useModal();
const accountType = activeTradingAccount?.is_virtual ? 'demo' : 'real';
const title = getCfdsAccountTitle(PlatformDetails.ctrader.title, activeTradingAccount?.is_virtual);
diff --git a/packages/tradershub/src/features/cfd/flows/MT5/AddedMT5AccountsList/AddedMT5AccountsList.tsx b/packages/tradershub/src/features/cfd/flows/MT5/AddedMT5AccountsList/AddedMT5AccountsList.tsx
index c767fc145978..bacaa0beb0ea 100644
--- a/packages/tradershub/src/features/cfd/flows/MT5/AddedMT5AccountsList/AddedMT5AccountsList.tsx
+++ b/packages/tradershub/src/features/cfd/flows/MT5/AddedMT5AccountsList/AddedMT5AccountsList.tsx
@@ -2,11 +2,11 @@ import React, { useMemo } from 'react';
import { TradingAccountCard } from '@/components';
import { getCfdsAccountTitle } from '@/helpers/cfdsAccountHelpers';
import { useRegulationFlags } from '@/hooks';
+import { useModal } from '@/providers';
import { THooks } from '@/types';
import { CFDPlatforms, MarketType, MarketTypeDetails } from '@cfd/constants';
import { TopUpModal, TradeModal } from '@cfd/modals';
import { useActiveTradingAccount, useJurisdictionStatus } from '@deriv/api';
-import { Provider } from '@deriv/library';
import { Button, Text } from '@deriv-com/ui';
import { MT5AccountIcon } from '../MT5AccountIcon';
@@ -14,7 +14,7 @@ const AddedMT5AccountsList = ({ account }: { account: THooks.MT5AccountsList })
const { data: activeTradingAccount } = useActiveTradingAccount();
const { isEU } = useRegulationFlags();
- const { show } = Provider.useModal();
+ const { show } = useModal();
const { getVerificationStatus } = useJurisdictionStatus();
const jurisdictionStatus = useMemo(
() => getVerificationStatus(account.landing_company_short || 'svg', account.status),
diff --git a/packages/tradershub/src/features/cfd/flows/MT5/AvailableMT5AccountsList/AvailableMT5AccountsList.tsx b/packages/tradershub/src/features/cfd/flows/MT5/AvailableMT5AccountsList/AvailableMT5AccountsList.tsx
index 76f5da5b9a28..d3e308b758ca 100644
--- a/packages/tradershub/src/features/cfd/flows/MT5/AvailableMT5AccountsList/AvailableMT5AccountsList.tsx
+++ b/packages/tradershub/src/features/cfd/flows/MT5/AvailableMT5AccountsList/AvailableMT5AccountsList.tsx
@@ -7,11 +7,11 @@ import {
} from '@/components';
import { getCfdsAccountTitle } from '@/helpers/cfdsAccountHelpers';
import { useRegulationFlags } from '@/hooks';
+import { useCFDContext, useModal } from '@/providers';
import { THooks } from '@/types';
import { MarketType, MarketTypeDetails, PlatformDetails } from '@cfd/constants';
import { JurisdictionModal, MT5PasswordModal } from '@cfd/modals';
import { useActiveTradingAccount } from '@deriv/api';
-import { Provider } from '@deriv/library';
import { MT5AccountIcon } from '../MT5AccountIcon';
const AvailableMT5AccountsList = ({ account }: { account: THooks.MT5AccountsList }) => {
@@ -19,8 +19,8 @@ const AvailableMT5AccountsList = ({ account }: { account: THooks.MT5AccountsList
const marketTypeDetails = MarketTypeDetails(isEU)[account.market_type ?? MarketType.ALL];
const description = marketTypeDetails?.description ?? '';
const { data: activeTradingAccount } = useActiveTradingAccount();
- const { setCfdState } = Provider.useCFDContext();
- const { show } = Provider.useModal();
+ const { setCfdState } = useCFDContext();
+ const { show } = useModal();
const [isDerivedAccountModalOpen, setIsDerivedAccountModalOpen] = useState(false);
diff --git a/packages/tradershub/src/features/cfd/flows/OtherCFDs/Dxtrade/AddedDxtradeAccountsList/AddedDxtradeAccountsList.tsx b/packages/tradershub/src/features/cfd/flows/OtherCFDs/Dxtrade/AddedDxtradeAccountsList/AddedDxtradeAccountsList.tsx
index c5c28c936bf4..137d436ee7cd 100644
--- a/packages/tradershub/src/features/cfd/flows/OtherCFDs/Dxtrade/AddedDxtradeAccountsList/AddedDxtradeAccountsList.tsx
+++ b/packages/tradershub/src/features/cfd/flows/OtherCFDs/Dxtrade/AddedDxtradeAccountsList/AddedDxtradeAccountsList.tsx
@@ -1,10 +1,10 @@
import React, { Fragment } from 'react';
import { IconComponent, TradingAccountCard } from '@/components';
import { getCfdsAccountTitle } from '@/helpers/cfdsAccountHelpers';
+import { useModal } from '@/providers';
import { CFDPlatforms, PlatformDetails } from '@cfd/constants';
import { TopUpModal, TradeModal } from '@cfd/modals';
import { useActiveTradingAccount, useDxtradeAccountsList } from '@deriv/api';
-import { Provider } from '@deriv/library';
import { Button, Text } from '@deriv-com/ui';
import { URLUtils } from '@deriv-com/utils';
@@ -22,7 +22,7 @@ const LeadingIcon = () => (
const AddedDxtradeAccountsList = () => {
const { data: dxTradeAccounts } = useDxtradeAccountsList();
const { data: activeTrading } = useActiveTradingAccount();
- const { show } = Provider.useModal();
+ const { show } = useModal();
const account = dxTradeAccounts?.find(account => account.is_virtual === activeTrading?.is_virtual);
const isVirtual = account?.is_virtual;
const title = getCfdsAccountTitle(PlatformDetails.dxtrade.title, isVirtual);
diff --git a/packages/tradershub/src/features/cfd/flows/OtherCFDs/Dxtrade/AvailableDxtradeAccountsList/AvailableDxtradeAccountsList.tsx b/packages/tradershub/src/features/cfd/flows/OtherCFDs/Dxtrade/AvailableDxtradeAccountsList/AvailableDxtradeAccountsList.tsx
index d6c015062005..b9696a7cbfa9 100644
--- a/packages/tradershub/src/features/cfd/flows/OtherCFDs/Dxtrade/AvailableDxtradeAccountsList/AvailableDxtradeAccountsList.tsx
+++ b/packages/tradershub/src/features/cfd/flows/OtherCFDs/Dxtrade/AvailableDxtradeAccountsList/AvailableDxtradeAccountsList.tsx
@@ -1,8 +1,8 @@
import React, { Fragment, useState } from 'react';
import { getCfdsAccountTitle } from '@/helpers/cfdsAccountHelpers';
import { useRegulationFlags } from '@/hooks';
+import { useCFDContext, useModal } from '@/providers';
import { useActiveTradingAccount } from '@deriv/api';
-import { Provider } from '@deriv/library';
import { URLUtils } from '@deriv-com/utils';
import {
GetADerivAccountDialog,
@@ -29,8 +29,8 @@ const LeadingIcon = () => (
const AvailableDxtradeAccountsList = () => {
const { hasActiveDerivAccount } = useRegulationFlags();
- const { show } = Provider.useModal();
- const { setCfdState } = Provider.useCFDContext();
+ const { show } = useModal();
+ const { setCfdState } = useCFDContext();
const { data: activeTradingAccount } = useActiveTradingAccount();
const [isDerivedAccountModalOpen, setIsDerivedAccountModalOpen] = useState(false);
diff --git a/packages/tradershub/src/features/cfd/modals/ButtonGroups/AddAccountButtonsGroup.tsx b/packages/tradershub/src/features/cfd/modals/ButtonGroups/AddAccountButtonsGroup.tsx
index 6b7ee1be9dfe..7b138857526d 100644
--- a/packages/tradershub/src/features/cfd/modals/ButtonGroups/AddAccountButtonsGroup.tsx
+++ b/packages/tradershub/src/features/cfd/modals/ButtonGroups/AddAccountButtonsGroup.tsx
@@ -1,7 +1,7 @@
import React from 'react';
-import { Provider } from '@deriv/library';
+import { ButtonGroup, Modal, SentEmailContent } from '@/components';
+import { useCFDContext, useModal } from '@/providers';
import { Button } from '@deriv-com/ui';
-import { ButtonGroup, Modal, SentEmailContent } from '../../../../components';
import { PlatformDetails } from '../../constants';
import DxtradeCreateAccountButton from '../DxtradePasswordModal/DxtradeCreateAccountButton';
import MT5CreateAccountButton from '../MT5PasswordModal/MT5CreateAccountButton';
@@ -11,8 +11,8 @@ type TAddAccountButtonsGroupProps = {
};
const AddAccountButtonsGroup = ({ password }: TAddAccountButtonsGroupProps) => {
- const { show } = Provider.useModal();
- const { getCFDState } = Provider.useCFDContext();
+ const { show } = useModal();
+ const { getCFDState } = useCFDContext();
const platform = getCFDState('platform');
return (
diff --git a/packages/tradershub/src/features/cfd/modals/ButtonGroups/SuccessButtonGroup.tsx b/packages/tradershub/src/features/cfd/modals/ButtonGroups/SuccessButtonGroup.tsx
index ae2669a1ed51..69be4f42af0e 100644
--- a/packages/tradershub/src/features/cfd/modals/ButtonGroups/SuccessButtonGroup.tsx
+++ b/packages/tradershub/src/features/cfd/modals/ButtonGroups/SuccessButtonGroup.tsx
@@ -1,12 +1,12 @@
import React from 'react';
import { useHistory } from 'react-router-dom';
+import { useModal } from '@/providers';
import { useActiveTradingAccount } from '@deriv/api';
-import { Provider } from '@deriv/library';
import { Button } from '@deriv-com/ui';
import { ButtonGroup } from '../../../../components';
const SuccessButtonGroup = () => {
- const { hide } = Provider.useModal();
+ const { hide } = useModal();
const { data: activeTrading } = useActiveTradingAccount();
const isDemo = activeTrading?.is_virtual;
const history = useHistory();
diff --git a/packages/tradershub/src/features/cfd/modals/CTraderSuccessModal/CTraderSuccessModal.tsx b/packages/tradershub/src/features/cfd/modals/CTraderSuccessModal/CTraderSuccessModal.tsx
index fd900b764070..a3bc22b96157 100644
--- a/packages/tradershub/src/features/cfd/modals/CTraderSuccessModal/CTraderSuccessModal.tsx
+++ b/packages/tradershub/src/features/cfd/modals/CTraderSuccessModal/CTraderSuccessModal.tsx
@@ -1,9 +1,9 @@
import React, { useCallback } from 'react';
import { useHistory } from 'react-router-dom';
import { ButtonGroup, Modal } from '@/components';
+import { useModal } from '@/providers';
import { PlatformDetails } from '@cfd/constants';
import { CFDSuccess } from '@cfd/screens';
-import { Provider } from '@deriv/library';
import { Button } from '@deriv-com/ui';
type TCTraderSuccessModal = {
@@ -12,7 +12,7 @@ type TCTraderSuccessModal = {
const CTraderSuccessModal = ({ isDemo }: TCTraderSuccessModal) => {
const history = useHistory();
- const { hide } = Provider.useModal();
+ const { hide } = useModal();
const renderButtons = useCallback(
() =>
diff --git a/packages/tradershub/src/features/cfd/modals/DxtradePasswordModal/DxtradePasswordInput.tsx b/packages/tradershub/src/features/cfd/modals/DxtradePasswordModal/DxtradePasswordInput.tsx
index 9bae421d357c..b96a3e3e6f51 100644
--- a/packages/tradershub/src/features/cfd/modals/DxtradePasswordModal/DxtradePasswordInput.tsx
+++ b/packages/tradershub/src/features/cfd/modals/DxtradePasswordModal/DxtradePasswordInput.tsx
@@ -1,8 +1,8 @@
import React from 'react';
import DxtradePasswordIcon from '@/assets/svgs/ic-derivx-password-updated.svg';
+import { ActionScreen, SentEmailContent } from '@/components';
+import { useCFDContext, useModal } from '@/providers';
import { useAccountStatus } from '@deriv/api';
-import { Provider } from '@deriv/library';
-import { ActionScreen, SentEmailContent } from '../../../../components';
import useDxtradeAccountHandler from '../../../../hooks/useDxtradeAccountHandler';
import { MarketType, QueryStatus } from '../../constants';
import { CreatePassword, EnterPassword } from '../../screens';
@@ -15,8 +15,8 @@ type TDxtradePasswordInputProps = {
const DxtradePasswordInput = ({ password, setPassword }: TDxtradePasswordInputProps) => {
const { data: accountStatus } = useAccountStatus();
- const { show } = Provider.useModal();
- const { getCFDState } = Provider.useCFDContext();
+ const { show } = useModal();
+ const { getCFDState } = useCFDContext();
const marketType = MarketType.ALL;
const platform = getCFDState('platform');
diff --git a/packages/tradershub/src/features/cfd/modals/JurisdictionModal/JurisdictionModal.tsx b/packages/tradershub/src/features/cfd/modals/JurisdictionModal/JurisdictionModal.tsx
index cd7fca3eea8e..8231f3ae8bf1 100644
--- a/packages/tradershub/src/features/cfd/modals/JurisdictionModal/JurisdictionModal.tsx
+++ b/packages/tradershub/src/features/cfd/modals/JurisdictionModal/JurisdictionModal.tsx
@@ -1,12 +1,12 @@
import React, { useCallback, useEffect, useState } from 'react';
import { Modal } from '@/components';
import { useRegulationFlags } from '@/hooks';
+import { useCFDContext, useModal } from '@/providers';
import { DummyComponent, DynamicLeverageContext } from '@cfd/components';
import { Jurisdiction, MarketType, MarketTypeDetails } from '@cfd/constants';
import { MT5PasswordModal } from '@cfd/modals';
import { DynamicLeverageScreen, DynamicLeverageTitle, JurisdictionScreen } from '@cfd/screens';
import { useAvailableMT5Accounts } from '@deriv/api';
-import { Provider } from '@deriv/library';
import { Button, Text, useDevice } from '@deriv-com/ui';
const JurisdictionModal = () => {
@@ -14,9 +14,9 @@ const JurisdictionModal = () => {
const [isDynamicLeverageVisible, setIsDynamicLeverageVisible] = useState(false);
const [isCheckBoxChecked, setIsCheckBoxChecked] = useState(false);
- const { show } = Provider.useModal();
+ const { show } = useModal();
const { isEU } = useRegulationFlags();
- const { getCFDState, setCfdState } = Provider.useCFDContext();
+ const { getCFDState, setCfdState } = useCFDContext();
const { isLoading } = useAvailableMT5Accounts();
const { isDesktop } = useDevice();
@@ -48,7 +48,7 @@ const JurisdictionModal = () => {
return (
-
+
{!isDynamicLeverageVisible ? : null}
{isDynamicLeverageVisible && }
diff --git a/packages/tradershub/src/features/cfd/modals/MT5AccountTypeModal/MT5AccountTypeModal.tsx b/packages/tradershub/src/features/cfd/modals/MT5AccountTypeModal/MT5AccountTypeModal.tsx
index e8e445826a1f..d430ef4a7f66 100644
--- a/packages/tradershub/src/features/cfd/modals/MT5AccountTypeModal/MT5AccountTypeModal.tsx
+++ b/packages/tradershub/src/features/cfd/modals/MT5AccountTypeModal/MT5AccountTypeModal.tsx
@@ -1,16 +1,16 @@
import React, { ComponentProps, useState } from 'react';
import { Modal } from '@/components';
+import { useCFDContext, useModal } from '@/providers';
import { JurisdictionModal } from '@cfd/modals';
import { MT5AccountType } from '@cfd/screens';
-import { Provider } from '@deriv/library';
import { Button } from '@deriv-com/ui';
type TMarketTypes = ComponentProps['selectedMarketType'];
const MT5AccountTypeModal = () => {
const [selectedMarketType, setSelectedMarketType] = useState(undefined);
- const { setCfdState } = Provider.useCFDContext();
- const { show } = Provider.useModal();
+ const { setCfdState } = useCFDContext();
+ const { show } = useModal();
return (
diff --git a/packages/tradershub/src/features/cfd/modals/MT5PasswordModal/MT5PasswordInput.tsx b/packages/tradershub/src/features/cfd/modals/MT5PasswordModal/MT5PasswordInput.tsx
index 9e00d82624f1..2b57d7703bc0 100644
--- a/packages/tradershub/src/features/cfd/modals/MT5PasswordModal/MT5PasswordInput.tsx
+++ b/packages/tradershub/src/features/cfd/modals/MT5PasswordModal/MT5PasswordInput.tsx
@@ -2,10 +2,10 @@ import React from 'react';
import MT5PasswordIcon from '@/assets/svgs/ic-mt5-password.svg';
import { ActionScreen, SentEmailContent } from '@/components';
import { useMT5AccountHandler } from '@/hooks';
+import { useCFDContext, useModal } from '@/providers';
import { MarketType, QueryStatus } from '@cfd/constants';
import { CreatePassword, EnterPassword } from '@cfd/screens';
import { useAccountStatus } from '@deriv/api';
-import { Provider } from '@deriv/library';
import MT5SuccessModal from './MT5SuccessModal';
type TMT5PasswordInputProps = {
@@ -15,8 +15,8 @@ type TMT5PasswordInputProps = {
const MT5PasswordInput = ({ password, setPassword }: TMT5PasswordInputProps) => {
const { data: accountStatus } = useAccountStatus();
- const { show } = Provider.useModal();
- const { getCFDState } = Provider.useCFDContext();
+ const { show } = useModal();
+ const { getCFDState } = useCFDContext();
const marketType = getCFDState('marketType') ?? MarketType.ALL;
const platform = getCFDState('platform');
diff --git a/packages/tradershub/src/features/cfd/modals/MT5PasswordModal/MT5SuccessModal.tsx b/packages/tradershub/src/features/cfd/modals/MT5PasswordModal/MT5SuccessModal.tsx
index 28e5311f9a71..f67b00ed3f7c 100644
--- a/packages/tradershub/src/features/cfd/modals/MT5PasswordModal/MT5SuccessModal.tsx
+++ b/packages/tradershub/src/features/cfd/modals/MT5PasswordModal/MT5SuccessModal.tsx
@@ -1,5 +1,6 @@
import React from 'react';
import { useRegulationFlags } from '@/hooks';
+import { useCFDContext } from '@/providers';
import {
Category,
companyNamesAndUrls,
@@ -10,7 +11,6 @@ import {
} from '@cfd/constants';
import { CFDSuccess } from '@cfd/screens';
import { useActiveTradingAccount, useMT5AccountsList } from '@deriv/api';
-import { Provider } from '@deriv/library';
import SuccessButtonGroup from '../ButtonGroups/SuccessButtonGroup';
const MT5SuccessModal = () => {
@@ -19,7 +19,7 @@ const MT5SuccessModal = () => {
const { data: activeTrading } = useActiveTradingAccount();
const isDemo = activeTrading?.is_virtual;
- const { getCFDState } = Provider.useCFDContext();
+ const { getCFDState } = useCFDContext();
const platform = getCFDState('platform');
const marketType = getCFDState('marketType') ?? MarketType.ALL;
const selectedJurisdiction = getCFDState('selectedJurisdiction') as TTM5FilterLandingCompany;
diff --git a/packages/tradershub/src/features/cfd/modals/TradeModal/TradeModal.tsx b/packages/tradershub/src/features/cfd/modals/TradeModal/TradeModal.tsx
index 4c1beb473f71..e3178afa4bee 100644
--- a/packages/tradershub/src/features/cfd/modals/TradeModal/TradeModal.tsx
+++ b/packages/tradershub/src/features/cfd/modals/TradeModal/TradeModal.tsx
@@ -1,10 +1,10 @@
import React, { useEffect } from 'react';
import QRCode from 'qrcode.react';
import { Modal } from '@/components';
+import { useCFDContext } from '@/providers';
import { THooks, TMarketTypes, TPlatforms } from '@/types';
import { AppToIconMapper, CFDPlatforms, LinksMapper, PlatformDetails, TAppLinks } from '@cfd/constants';
import { TradeScreen } from '@cfd/screens';
-import { Provider } from '@deriv/library';
import { Text, useDevice } from '@deriv-com/ui';
type TTradeModalProps = {
@@ -15,7 +15,7 @@ type TTradeModalProps = {
const TradeModal = ({ account, marketType, platform }: TTradeModalProps) => {
const { isDesktop } = useDevice();
- const { setCfdState } = Provider.useCFDContext();
+ const { setCfdState } = useCFDContext();
useEffect(() => {
setCfdState('marketType', marketType);
diff --git a/packages/tradershub/src/features/cfd/screens/CFDCompareAccounts/CompareAccountsButton.tsx b/packages/tradershub/src/features/cfd/screens/CFDCompareAccounts/CompareAccountsButton.tsx
index 5259db6cb200..3257358d9f83 100644
--- a/packages/tradershub/src/features/cfd/screens/CFDCompareAccounts/CompareAccountsButton.tsx
+++ b/packages/tradershub/src/features/cfd/screens/CFDCompareAccounts/CompareAccountsButton.tsx
@@ -1,4 +1,5 @@
import React, { useEffect, useMemo } from 'react';
+import { useModal } from '@/providers';
import { THooks, TPlatforms } from '@/types';
import { DummyComponent } from '@cfd/components';
import { Category, CFDPlatforms, MarketType } from '@cfd/constants';
@@ -10,7 +11,6 @@ import {
useMT5AccountsList,
useSettings,
} from '@deriv/api';
-import { Provider } from '@deriv/library';
import { Button } from '@deriv-com/ui';
import {
getAccountVerificationStatus,
@@ -32,7 +32,7 @@ type TCompareAccountButton = {
@params {string} marketType - The market type of the account. //Removed for now as it is needed by Verification flow
*/
const CompareAccountsButton = ({ isAccountAdded, platform, shortCode }: TCompareAccountButton) => {
- const { show } = Provider.useModal();
+ const { show } = useModal();
const { data: accountSettings } = useSettings();
const { data: authenticationInfo } = useAuthentication();
diff --git a/packages/tradershub/src/features/cfd/screens/ChangePassword/ChangePassword.tsx b/packages/tradershub/src/features/cfd/screens/ChangePassword/ChangePassword.tsx
index b7413ca26cc3..debfb413cb64 100644
--- a/packages/tradershub/src/features/cfd/screens/ChangePassword/ChangePassword.tsx
+++ b/packages/tradershub/src/features/cfd/screens/ChangePassword/ChangePassword.tsx
@@ -1,12 +1,12 @@
import React from 'react';
import { Modal } from '@/components';
+import { useCFDContext } from '@/providers';
import { CFDPlatforms, PlatformDetails } from '@cfd/constants';
-import { Provider } from '@deriv/library';
import MT5ChangePasswordScreens from './MT5ChangePasswordScreens';
import TradingPlatformChangePasswordScreens from './TradingPlatformChangePasswordScreens';
const ChangePassword = () => {
- const { getCFDState } = Provider.useCFDContext();
+ const { getCFDState } = useCFDContext();
const platform = getCFDState('platform') ?? CFDPlatforms.MT5;
const { title } = PlatformDetails[platform];
diff --git a/packages/tradershub/src/features/cfd/screens/ChangePassword/InvestorPassword/MT5ChangeInvestorPasswordInputsScreen.tsx b/packages/tradershub/src/features/cfd/screens/ChangePassword/InvestorPassword/MT5ChangeInvestorPasswordInputsScreen.tsx
index 94405b3392be..9dc475f68c92 100644
--- a/packages/tradershub/src/features/cfd/screens/ChangePassword/InvestorPassword/MT5ChangeInvestorPasswordInputsScreen.tsx
+++ b/packages/tradershub/src/features/cfd/screens/ChangePassword/InvestorPassword/MT5ChangeInvestorPasswordInputsScreen.tsx
@@ -1,7 +1,7 @@
import React, { Fragment } from 'react';
import { Formik } from 'formik';
+import { useCFDContext } from '@/providers';
import { useTradingPlatformInvestorPasswordChange } from '@deriv/api';
-import { Provider } from '@deriv/library';
import { Button, Input, Text, useDevice } from '@deriv-com/ui';
import { ActionScreen } from '../../../../../components';
import { validPassword } from '../../../../../utils/password';
@@ -22,7 +22,7 @@ const MT5ChangeInvestorPasswordInputsScreen = ({
setNextScreen,
}: TMT5ChangeInvestorPasswordInputsScreen) => {
const { isDesktop } = useDevice();
- const { getCFDState } = Provider.useCFDContext();
+ const { getCFDState } = useCFDContext();
const mt5AccountId = getCFDState('accountId') ?? '';
const {
diff --git a/packages/tradershub/src/features/cfd/screens/ChangePassword/InvestorPassword/MT5ChangeInvestorPasswordScreens.tsx b/packages/tradershub/src/features/cfd/screens/ChangePassword/InvestorPassword/MT5ChangeInvestorPasswordScreens.tsx
index fb75a1507709..5331c1d64e34 100644
--- a/packages/tradershub/src/features/cfd/screens/ChangePassword/InvestorPassword/MT5ChangeInvestorPasswordScreens.tsx
+++ b/packages/tradershub/src/features/cfd/screens/ChangePassword/InvestorPassword/MT5ChangeInvestorPasswordScreens.tsx
@@ -1,5 +1,5 @@
import React, { useState } from 'react';
-import { Provider } from '@deriv/library';
+import { useModal } from '@/providers';
import MT5ChangeInvestorPasswordInputsScreen from './MT5ChangeInvestorPasswordInputsScreen';
import MT5ChangeInvestorPasswordSavedScreen from './MT5ChangeInvestorPasswordSavedScreen';
@@ -12,7 +12,7 @@ type TMT5ChangeInvestorPasswordScreens = {
const MT5ChangeInvestorPasswordScreens = ({ setShowEmailSentScreen }: TMT5ChangeInvestorPasswordScreens) => {
const [activeScreen, setActiveScreen] = useState('introScreen');
const handleClick = (nextScreen: TChangeInvestorPasswordScreenIndex) => setActiveScreen(nextScreen);
- const { hide } = Provider.useModal();
+ const { hide } = useModal();
switch (activeScreen) {
case 'savedScreen':
diff --git a/packages/tradershub/src/features/cfd/screens/ChangePassword/TradingPlatformChangePasswordScreens.tsx b/packages/tradershub/src/features/cfd/screens/ChangePassword/TradingPlatformChangePasswordScreens.tsx
index c683ce95837b..12a031d0a646 100644
--- a/packages/tradershub/src/features/cfd/screens/ChangePassword/TradingPlatformChangePasswordScreens.tsx
+++ b/packages/tradershub/src/features/cfd/screens/ChangePassword/TradingPlatformChangePasswordScreens.tsx
@@ -2,15 +2,14 @@ import React, { useState } from 'react';
import DerivXPasswordIcon from '@/assets/svgs/ic-derivx-password-updated.svg';
import MT5PasswordIcon from '@/assets/svgs/ic-mt5-password.svg';
import { ActionScreen, SentEmailContent } from '@/components';
+import { useModal } from '@/providers';
import { TPlatforms } from '@/types';
import { platformPasswordResetRedirectLink } from '@/utils';
import { CFDPlatforms, PlatformDetails } from '@cfd/constants';
import { useActiveTradingAccount, useSettings, useVerifyEmail } from '@deriv/api';
-import { Provider } from '@deriv/library';
import { Button, Text } from '@deriv-com/ui';
type TradingPlatformChangePasswordScreensProps = {
- isVirtual?: boolean;
platform: TPlatforms.All;
};
@@ -19,7 +18,7 @@ const TradingPlatformChangePasswordScreens = ({ platform }: TradingPlatformChang
const [activeScreen, setActiveScreen] = useState('introScreen');
const handleClick = (nextScreen: TChangePasswordScreenIndex) => setActiveScreen(nextScreen);
- const { hide } = Provider.useModal();
+ const { hide } = useModal();
const { data } = useSettings();
const { mutate } = useVerifyEmail();
const { data: activeTrading } = useActiveTradingAccount();
diff --git a/packages/tradershub/src/features/cfd/screens/GetMoreMT5Accounts/GetMoreMT5Accounts.tsx b/packages/tradershub/src/features/cfd/screens/GetMoreMT5Accounts/GetMoreMT5Accounts.tsx
index bb510a3018ab..59f015d955c7 100644
--- a/packages/tradershub/src/features/cfd/screens/GetMoreMT5Accounts/GetMoreMT5Accounts.tsx
+++ b/packages/tradershub/src/features/cfd/screens/GetMoreMT5Accounts/GetMoreMT5Accounts.tsx
@@ -1,11 +1,11 @@
import React, { FC } from 'react';
import AddIcon from '@/assets/svgs/add-icon.svg';
+import { useModal } from '@/providers';
import { MT5AccountTypeModal } from '@cfd/modals';
-import { Provider } from '@deriv/library';
import { Text } from '@deriv-com/ui';
const GetMoreMT5Accounts: FC = () => {
- const { show } = Provider.useModal();
+ const { show } = useModal();
return (
{
const [isFlipped, setIsFlipped] = useState(false);
const { toggleDynamicLeverage } = useDynamicLeverageModalState();
- const { getCFDState } = Provider.useCFDContext();
+ const { getCFDState } = useCFDContext();
const { isEU } = useRegulationFlags();
const descriptionClickHandler = (tag?: TClickableDescription['tag']) => (event: MouseEvent) => {
diff --git a/packages/tradershub/src/features/cfd/screens/Jurisdiction/JurisdictionScreen.tsx b/packages/tradershub/src/features/cfd/screens/Jurisdiction/JurisdictionScreen.tsx
index cfe32424d86e..405950db597f 100644
--- a/packages/tradershub/src/features/cfd/screens/Jurisdiction/JurisdictionScreen.tsx
+++ b/packages/tradershub/src/features/cfd/screens/Jurisdiction/JurisdictionScreen.tsx
@@ -1,9 +1,9 @@
import React, { Dispatch, SetStateAction, useEffect, useMemo } from 'react';
import { twMerge } from 'tailwind-merge';
+import { useCFDContext } from '@/providers';
import { useDynamicLeverageModalState } from '@cfd/components';
import { Jurisdiction } from '@cfd/constants';
import { useAvailableMT5Accounts, useMT5AccountsList } from '@deriv/api';
-import { Provider } from '@deriv/library';
import { THooks } from '../../../../types';
import { JurisdictionCard } from './JurisdictionCard';
import { JurisdictionTncSection } from './JurisdictionTncSection';
@@ -21,7 +21,7 @@ const JurisdictionScreen = ({
setIsCheckBoxChecked,
setSelectedJurisdiction,
}: TJurisdictionScreenProps) => {
- const { getCFDState } = Provider.useCFDContext();
+ const { getCFDState } = useCFDContext();
const { data: availableMT5Accounts } = useAvailableMT5Accounts();
const { data: mt5AccountsList } = useMT5AccountsList();
const marketType = getCFDState('marketType');
diff --git a/packages/tradershub/src/features/cfd/screens/Jurisdiction/JurisdictionTncSection/JurisdictionTncSection.tsx b/packages/tradershub/src/features/cfd/screens/Jurisdiction/JurisdictionTncSection/JurisdictionTncSection.tsx
index 741570d23615..e7cfd03803d4 100644
--- a/packages/tradershub/src/features/cfd/screens/Jurisdiction/JurisdictionTncSection/JurisdictionTncSection.tsx
+++ b/packages/tradershub/src/features/cfd/screens/Jurisdiction/JurisdictionTncSection/JurisdictionTncSection.tsx
@@ -1,8 +1,8 @@
import React from 'react';
import { StaticLink } from '@/components';
+import { useCFDContext } from '@/providers';
import { THooks } from '@/types';
import { companyNamesAndUrls, Jurisdiction, MarketType } from '@cfd/constants';
-import { Provider } from '@deriv/library';
import { Checkbox, Text, useDevice } from '@deriv-com/ui';
import { URLUtils } from '@deriv-com/utils';
import { JurisdictionFootNoteTitle } from '../JurisdictionFootNoteTitle';
@@ -30,7 +30,7 @@ const JurisdictionTncSection = ({
}: TJurisdictionTncSectionProps) => {
const { getDerivStaticURL } = URLUtils;
const { isDesktop } = useDevice();
- const { getCFDState } = Provider.useCFDContext();
+ const { getCFDState } = useCFDContext();
const marketType = getCFDState('marketType') ?? MarketType.ALL;
const selectedCompany = companyNamesAndUrls[selectedJurisdiction as keyof typeof companyNamesAndUrls];
diff --git a/packages/tradershub/src/features/cfd/screens/TradeScreen/TradeDetailsItem/TradeDetailsItem.tsx b/packages/tradershub/src/features/cfd/screens/TradeScreen/TradeDetailsItem/TradeDetailsItem.tsx
index 380c7e874df9..23a29579990d 100644
--- a/packages/tradershub/src/features/cfd/screens/TradeScreen/TradeDetailsItem/TradeDetailsItem.tsx
+++ b/packages/tradershub/src/features/cfd/screens/TradeScreen/TradeDetailsItem/TradeDetailsItem.tsx
@@ -3,8 +3,8 @@ import { twMerge } from 'tailwind-merge';
import { useHover } from 'usehooks-ts';
import EditIcon from '@/assets/svgs/ic-edit.svg';
import { Clipboard, Tooltip } from '@/components';
+import { useModal } from '@/providers';
import { ChangePassword } from '@cfd/screens';
-import { Provider } from '@deriv/library';
import { Button, Text, useDevice } from '@deriv-com/ui';
type TTradeDetailsItemProps = {
@@ -18,7 +18,7 @@ const TradeDetailsItem = ({ className, label, value, variant = 'clipboard' }: TT
const { isDesktop } = useDevice();
const hoverRef = useRef(null);
const isHovered = useHover(hoverRef);
- const { show } = Provider.useModal();
+ const { show } = useModal();
return (
{
const { isDesktop } = useDevice();
const { isEU } = useRegulationFlags();
- const { getCFDState } = Provider.useCFDContext();
+ const { getCFDState } = useCFDContext();
const { data: dxtradeAccountsList } = useDxtradeAccountsList();
const { data: ctraderAccountsList } = useCtraderAccountsList();
const { data: activeAccount } = useActiveTradingAccount();
diff --git a/packages/tradershub/src/features/cfd/screens/VerificationFailed/VerificationFailed.tsx b/packages/tradershub/src/features/cfd/screens/VerificationFailed/VerificationFailed.tsx
index 70d2cf63b2f1..f03eb46fc30e 100644
--- a/packages/tradershub/src/features/cfd/screens/VerificationFailed/VerificationFailed.tsx
+++ b/packages/tradershub/src/features/cfd/screens/VerificationFailed/VerificationFailed.tsx
@@ -1,6 +1,6 @@
import React from 'react';
+import { useModal } from '@/providers';
import { usePOA, usePOI } from '@deriv/api';
-import { Provider } from '@deriv/library';
import { Button, Text } from '@deriv-com/ui';
const getDocumentTitle = (isPOIFailed?: boolean, isPOAFailed?: boolean) => {
@@ -16,7 +16,7 @@ const reasons = ['Document details do not match profile details', 'Expired docum
*/
const VerificationFailed = () => {
- const { hide } = Provider.useModal();
+ const { hide } = useModal();
const { data: poiStatus } = usePOI();
const { data: poaStatus } = usePOA();
diff --git a/packages/tradershub/src/helpers/displayMoney.ts b/packages/tradershub/src/helpers/displayMoney.ts
new file mode 100644
index 000000000000..882e73328502
--- /dev/null
+++ b/packages/tradershub/src/helpers/displayMoney.ts
@@ -0,0 +1,32 @@
+import { useAuthorize } from '@deriv/api';
+
+type TCurrency = NonNullable
['data']['currency']>;
+type TPreferredLanguage = ReturnType['data']['preferred_language'];
+
+/**
+ * @description Display money in a human-readable format
+ * @param amount - The amount to be formatted
+ * @param currency - The currency to be displayed
+ * @param options - Additional options for formatting
+ * @returns The formatted money
+ */
+export const displayMoney = (
+ amount: number,
+ currency: TCurrency,
+ options?: {
+ // eslint-disable-next-line camelcase
+ fractional_digits?: number;
+ // eslint-disable-next-line camelcase
+ preferred_language?: TPreferredLanguage;
+ }
+) => {
+ try {
+ return `${Intl.NumberFormat(options?.preferred_language ?? 'en-US', {
+ minimumFractionDigits: options?.fractional_digits ?? 2,
+ maximumFractionDigits: options?.fractional_digits ?? 2,
+ minimumIntegerDigits: 1,
+ }).format(amount)} ${currency}`;
+ } catch (error) {
+ return `${amount} ${currency}`;
+ }
+};
diff --git a/packages/tradershub/src/helpers/index.ts b/packages/tradershub/src/helpers/index.ts
index 45b0f352a29a..5c30975a776e 100644
--- a/packages/tradershub/src/helpers/index.ts
+++ b/packages/tradershub/src/helpers/index.ts
@@ -1,4 +1,5 @@
export * from './currencies';
+export * from './displayMoney';
export * from './formikHelpers';
export * from './signupModalHelpers';
export * from './urls';
diff --git a/packages/tradershub/src/hooks/useMT5AccountHandler.ts b/packages/tradershub/src/hooks/useMT5AccountHandler.ts
index 02d97854cfc8..2dd3d4b59013 100644
--- a/packages/tradershub/src/hooks/useMT5AccountHandler.ts
+++ b/packages/tradershub/src/hooks/useMT5AccountHandler.ts
@@ -1,3 +1,4 @@
+import { useCFDContext } from '@/providers';
import {
useAccountStatus,
useActiveTradingAccount,
@@ -6,7 +7,6 @@ import {
useSettings,
useTradingPlatformPasswordChange,
} from '@deriv/api';
-import { Provider } from '@deriv/library';
import { Category, CFDPlatforms, MarketType } from '../features/cfd/constants';
import { Jurisdiction } from '../features/cfd/screens/CFDCompareAccounts/constants';
@@ -25,7 +25,7 @@ const useMT5AccountHandler = () => {
const { data: availableMT5Accounts } = useAvailableMT5Accounts();
const isMT5PasswordNotSet = accountStatus?.is_mt5_password_not_set;
- const { getCFDState } = Provider.useCFDContext();
+ const { getCFDState } = useCFDContext();
const marketType = getCFDState('marketType') ?? MarketType.ALL;
const selectedJurisdiction = getCFDState('selectedJurisdiction');
diff --git a/packages/tradershub/src/hooks/useTotalAssets.ts b/packages/tradershub/src/hooks/useTotalAssets.ts
index 9b1b8e0c2602..10b2952ffc45 100644
--- a/packages/tradershub/src/hooks/useTotalAssets.ts
+++ b/packages/tradershub/src/hooks/useTotalAssets.ts
@@ -1,5 +1,5 @@
+import { displayMoney } from '@/helpers';
import { useActiveTradingAccount, useAuthorize } from '@deriv/api';
-import { Helpers } from '@deriv/library';
import { useUIContext } from '../components';
import useCFDAssets from './useCFDAssets';
import usePlatformAssets from './usePlatformAssets';
@@ -11,7 +11,6 @@ import usePlatformAssets from './usePlatformAssets';
const useTotalAssets = () => {
const { uiState } = useUIContext();
const { regulation } = uiState;
- const { displayMoney } = Helpers;
const { data: activeTradingAccount } = useActiveTradingAccount();
const { data: authorizeData, isSuccess: isAuthorizeSuccess } = useAuthorize();
const {
diff --git a/packages/tradershub/src/providers/CFDProvider/CFDProvider.tsx b/packages/tradershub/src/providers/CFDProvider/CFDProvider.tsx
new file mode 100644
index 000000000000..853e1af7c462
--- /dev/null
+++ b/packages/tradershub/src/providers/CFDProvider/CFDProvider.tsx
@@ -0,0 +1,49 @@
+import React, { createContext, PropsWithChildren, useCallback, useContext, useMemo, useState } from 'react';
+import { THooks, TMarketTypes, TPlatforms } from '@/types';
+
+type TCFDState = {
+ // Add your CFD states here
+ accountId?: string;
+ marketType?: TMarketTypes.All;
+ platform?: TPlatforms.All;
+ selectedJurisdiction?: THooks.AvailableMT5Accounts['shortcode'];
+};
+
+type TCFDContext = {
+ getCFDState: (key: T) => TCFDState[T];
+ setCfdState: (key: T, value: TCFDState[T]) => void;
+};
+
+const CFDContext = createContext(null);
+
+export const useCFDContext = () => {
+ const context = useContext(CFDContext);
+
+ if (!context) {
+ throw new Error('useCFDContext must be used within a CFDProvider. Please import Provider from @deriv/library');
+ }
+
+ return context;
+};
+
+export const CFDProvider = ({ children }: PropsWithChildren) => {
+ const [cfdState, setCfdState] = useState({});
+
+ const getCFDState = useCallback(
+ (key: T): TCFDState[T] => {
+ return cfdState[key];
+ },
+ [cfdState]
+ );
+
+ const updateCFDState = useCallback(
+ (key: T, value: TCFDState[T]) => {
+ setCfdState(prevState => ({ ...prevState, [key]: value }));
+ },
+ [setCfdState]
+ );
+
+ const providerValue = useMemo(() => ({ getCFDState, setCfdState: updateCFDState }), [getCFDState, updateCFDState]);
+
+ return {children};
+};
diff --git a/packages/tradershub/src/providers/CFDProvider/index.ts b/packages/tradershub/src/providers/CFDProvider/index.ts
new file mode 100644
index 000000000000..6e966de89827
--- /dev/null
+++ b/packages/tradershub/src/providers/CFDProvider/index.ts
@@ -0,0 +1 @@
+export { CFDProvider, useCFDContext } from './CFDProvider';
diff --git a/packages/tradershub/src/providers/ModalProvider/ModalProvider.tsx b/packages/tradershub/src/providers/ModalProvider/ModalProvider.tsx
new file mode 100644
index 000000000000..cbfaae537112
--- /dev/null
+++ b/packages/tradershub/src/providers/ModalProvider/ModalProvider.tsx
@@ -0,0 +1,131 @@
+import React, {
+ createContext,
+ Dispatch,
+ PropsWithChildren,
+ ReactNode,
+ RefObject,
+ SetStateAction,
+ useCallback,
+ useContext,
+ useEffect,
+ useMemo,
+ useRef,
+ useState,
+} from 'react';
+import { createPortal } from 'react-dom';
+import { useOnClickOutside } from 'usehooks-ts';
+import { useDevice } from '@deriv-com/ui';
+
+type TModalState = {
+ // Add your modal states here
+ modalType?: string; // Just an example
+};
+
+type TModalContext = {
+ getModalState: (key: T) => TModalState[T];
+ hide: () => void;
+ isOpen: boolean;
+ modalState?: Map;
+ setModalOptions: Dispatch>;
+ setModalState: (key: T, value: TModalState[T]) => void;
+ show: (ModalContent: ReactNode, options?: TModalOptions) => void;
+};
+
+type TModalOptions = {
+ defaultRootId?: 'v2_modal_root' | 'v2_modal_show_header_root';
+ rootRef?: RefObject;
+ shouldHideDerivAppHeader?: boolean;
+};
+
+const ModalContext = createContext(null);
+
+export const useModal = () => {
+ const context = useContext(ModalContext);
+
+ if (!context)
+ throw new Error(
+ 'useModal() must be called within a component wrapped in ModalProvider. Please import Provider from @deriv/library'
+ );
+
+ return context;
+};
+
+export const ModalProvider = ({ children }: PropsWithChildren) => {
+ const modalRef = useRef(null);
+ const [content, setContent] = useState();
+ const [modalOptions, setModalOptions] = useState({});
+ const [modalState, setModalState] = useState>(new Map());
+ const { isDesktop } = useDevice();
+
+ const rootRef = useRef(document.getElementById('v2_modal_root'));
+ const rootHeaderRef = useRef(document.getElementById('v2_modal_show_header_root'));
+
+ const getModalState = useCallback(
+ (key: T): TModalState[T] => {
+ return modalState.get(key) as TModalState[T];
+ },
+ [modalState]
+ );
+
+ const updateModalState = useCallback(
+ (key: T, value: TModalState[T]) => {
+ setModalState(new Map(modalState.set(key, value)));
+ },
+ [modalState]
+ );
+
+ const show = useCallback(
+ (ModalContent: ReactNode, options?: TModalOptions) => {
+ setContent(ModalContent);
+ setModalOptions({
+ ...modalOptions,
+ ...options,
+ });
+ },
+ [modalOptions]
+ );
+
+ useEffect(() => {
+ if (!rootHeaderRef.current) {
+ rootHeaderRef.current = document.getElementById('v2_modal_show_header_root');
+ }
+ }, []);
+
+ const hide = () => {
+ setContent(null);
+ };
+
+ useOnClickOutside(modalRef, isDesktop ? hide : () => undefined);
+
+ const modalRootRef = useMemo(() => {
+ // if they specify their own root, prioritize this first
+ if (modalOptions?.rootRef?.current) return modalOptions?.rootRef;
+ // if user specifically specify they want to show on root or hide the Deriv.app header
+ if (modalOptions?.shouldHideDerivAppHeader || modalOptions?.defaultRootId === 'v2_modal_root') return rootRef;
+ // otherwise do the default behaviour, show Deriv.app header if on responsive
+ if (modalOptions?.defaultRootId === 'v2_modal_show_header_root' || !isDesktop) return rootHeaderRef;
+ return rootRef;
+ }, [modalOptions?.rootRef, modalOptions?.shouldHideDerivAppHeader, modalOptions?.defaultRootId, isDesktop]);
+
+ const providerValue = useMemo(
+ () => ({
+ getModalState,
+ hide,
+ isOpen: content !== null,
+ modalState,
+ setModalOptions,
+ setModalState: updateModalState,
+ show,
+ }),
+ [content, getModalState, modalState, show, updateModalState]
+ );
+
+ return (
+
+ {children}
+ {modalRootRef?.current &&
+ content &&
+ createPortal({content}
, modalRootRef.current)}
+
+ );
+};
diff --git a/packages/tradershub/src/providers/ModalProvider/index.ts b/packages/tradershub/src/providers/ModalProvider/index.ts
new file mode 100644
index 000000000000..7709e12bc2aa
--- /dev/null
+++ b/packages/tradershub/src/providers/ModalProvider/index.ts
@@ -0,0 +1 @@
+export { ModalProvider, useModal } from './ModalProvider';
diff --git a/packages/tradershub/src/providers/index.ts b/packages/tradershub/src/providers/index.ts
index 47f4bebc895a..ae51cd9e98d7 100644
--- a/packages/tradershub/src/providers/index.ts
+++ b/packages/tradershub/src/providers/index.ts
@@ -1 +1,3 @@
+export * from './CFDProvider';
+export * from './ModalProvider';
export * from './RealAccountCreationProvider';