Thisyahlen/TRAH-3017/chore: remove deriv/library dependancy in trader…

…shub (#13911)

* chore: remove deriv/library dependancy in tradershub

* chore: komen

packages/tradershub/package.json

@@ -14,7 +14,6 @@
     },
     "dependencies": {
         "@deriv/api": "^1.0.0",
-        "@deriv/library": "^1.0.0",
         "@deriv/quill-icons": "^1.18.3",
         "@deriv-com/ui": "1.9.0",
         "@deriv-com/utils": "latest",

packages/tradershub/src/App.tsx

@@ -1,21 +1,20 @@
 import React from 'react';
 import { UIProvider } from '@/components';
-import { RealAccountCreationProvider } from '@/providers';
+import { CFDProvider, ModalProvider, RealAccountCreationProvider } from '@/providers';
 import { APIProvider } from '@deriv/api';
-import { Provider } from '@deriv/library';
 import AppContent from './AppContent';
 import './index.scss';
 
 const App = () => (
     <UIProvider>
         <APIProvider standalone>
-            <Provider.CFDProvider>
-                <Provider.ModalProvider>
+            <CFDProvider>
+                <ModalProvider>
                     <RealAccountCreationProvider>
                         <AppContent />
                     </RealAccountCreationProvider>
-                </Provider.ModalProvider>
-            </Provider.CFDProvider>
+                </ModalProvider>
+            </CFDProvider>
         </APIProvider>
     </UIProvider>
 );

packages/tradershub/src/components/CurrencySwitcher/CurrencySwitcher.tsx

@@ -4,9 +4,9 @@ import { CurrencySwitcherLoader, Modal, TradingAccountsList } from '@/components
 import { IconToCurrencyMapper } from '@/constants';
 import { useRegulationFlags } from '@/hooks';
 import { AddOrManageAccount } from '@/modals';
+import { useModal } from '@/providers';
 import { THooks } from '@/types';
 import { useActiveTradingAccount, useResetVirtualBalance } from '@deriv/api';
-import { Provider } from '@deriv/library';
 import { StandaloneChevronDownBoldIcon } from '@deriv/quill-icons';
 import { Button } from '@deriv-com/ui';
 import { DemoCurrencySwitcherAccountInfo, RealCurrencySwitcherAccountInfo } from './CurrencySwitcherAccountInfo';
@@ -46,7 +46,7 @@ const CurrencySwitcher = () => {
     const [isManageAccountOpen, setIsManageAccountOpen] = useState(false);
     const { data: activeAccount, isSuccess } = useActiveTradingAccount();
     const isDemo = activeAccount?.is_virtual;
-    const { show, hide } = Provider.useModal();
+    const { show, hide } = useModal();
 
     const { noRealCRNonEUAccount, noRealMFEUAccount } = useRegulationFlags();
     const onManageAccountClose = useCallback(() => setIsManageAccountOpen(false), []);

packages/tradershub/src/components/Dialog/Dialog.tsx

@@ -1,7 +1,7 @@
 import React, { ReactElement } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { useEventListener } from 'usehooks-ts';
-import { Provider } from '@deriv/library';
+import { useModal } from '@/providers';
 import DialogAction from './DialogAction';
 import DialogContent from './DialogContent';
 import DialogHeader from './DialogHeader';
@@ -45,7 +45,7 @@ type TDialog = {
  * ```
  */
 const Dialog = ({ children, className, shouldPreventCloseOnEscape = false }: TDialog) => {
-    const { hide } = Provider.useModal();
+    const { hide } = useModal();
 
     useEventListener('keydown', (event: KeyboardEvent) => {
         if (!shouldPreventCloseOnEscape && event.key === 'Escape') {

packages/tradershub/src/components/Dialog/DialogHeader.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';
 
 /**
@@ -24,7 +24,7 @@ type TDialogHeader = {
  * @returns {JSX.Element} The DialogHeader component.
  */
 const DialogHeader = ({ className, titleSize, hideCloseButton = false, title }: TDialogHeader) => {
-    const { hide } = Provider.useModal();
+    const { hide } = useModal();
 
     return (
         <div className={twMerge('flex items-start', title ? 'justify-between' : 'justify-end', className)}>

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 (
         <div

packages/tradershub/src/components/RegulationSwitcher/RegulationSwitcherDesktop.tsx

@@ -2,13 +2,13 @@ import React from 'react';
 import { useUIContext } from '@/components';
 import { useRegulationSwitcher } from '@/hooks';
 import { RegulationModal } from '@/modals';
-import { Provider } from '@deriv/library';
+import { useModal } from '@/providers';
 import { LabelPairedCircleInfoMdRegularIcon } from '@deriv/quill-icons';
 import { Tab, Tabs, Text } from '@deriv-com/ui';
 
 const RegulationSwitcherDesktop = () => {
     const { uiState } = useUIContext();
-    const { show } = Provider.useModal();
+    const { show } = useModal();
     const { buttons, handleButtonClick } = useRegulationSwitcher();
     const activeRegulation = uiState.regulation;
 

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();

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);

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);

packages/tradershub/src/features/cfd/flows/MT5/AddedMT5AccountsList/AddedMT5AccountsList.tsx

@@ -2,19 +2,19 @@ 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';
 
 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),

packages/tradershub/src/features/cfd/flows/MT5/AvailableMT5AccountsList/AvailableMT5AccountsList.tsx

@@ -7,20 +7,20 @@ 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 }) => {
     const { hasActiveDerivAccount, isEU } = useRegulationFlags();
     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);
 

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);

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);

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 (

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();

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(
         () =>

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');

packages/tradershub/src/features/cfd/modals/JurisdictionModal/JurisdictionModal.tsx

@@ -1,22 +1,22 @@
 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 = () => {
     const [selectedJurisdiction, setSelectedJurisdiction] = useState('');
     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 (
         <DynamicLeverageContext.Provider value={{ isDynamicLeverageVisible, toggleDynamicLeverage }}>
-            <Modal className='bg-background-primary-container'>
+            <Modal className='bg-background-primary-container bg-system-light-primary-background'>
                 {!isDynamicLeverageVisible ? <Modal.Header title={jurisdictionTitle} /> : null}
                 <Modal.Content>
                     {isDynamicLeverageVisible && <DynamicLeverageTitle />}