chore: add providers to tradershub from deriv/library

Author: thisyahlen-deriv

packages/tradershub/src/App.tsx

@@ -1,17 +1,16 @@
 import React, { FC } from 'react';
 import { APIProvider } from '@deriv/api';
-import { BreakpointProvider } from '@deriv/quill-design';
+import { Provider } from '@deriv/library';
 import AppContent from './AppContent';
-import { ModalProvider } from './components';
 import './index.scss';
 
 const App: FC = () => (
     <APIProvider standalone>
-        <BreakpointProvider>
-            <ModalProvider>
+        <Provider.ModalProvider>
+            <Provider.CFDProvider>
                 <AppContent />
-            </ModalProvider>
-        </BreakpointProvider>
+            </Provider.CFDProvider>
+        </Provider.ModalProvider>
     </APIProvider>
 );
 

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

@@ -1,11 +1,11 @@
 import React from 'react';
 import { useHistory } from 'react-router-dom';
 import { useActiveTradingAccount, useResetVirtualBalance } from '@deriv/api';
+import { Provider } from '@deriv/library';
 import { Button, qtMerge, Text } from '@deriv/quill-design';
 import { StandaloneChevronDownBoldIcon } from '@deriv/quill-icons';
 import { IconToCurrencyMapper } from '../../constants/constants';
 import { THooks } from '../../types';
-import { useModal } from '../ModalProvider';
 import { ModalStepWrapper } from '../ModalStepWrapper';
 import { TradingAccountsList } from '../TradingAccountsList';
 
@@ -45,7 +45,7 @@ const AccountActionButton = ({ balance, isDemo }: AccountActionButtonProps) => {
 const CurrencySwitcher = () => {
     const { data: activeAccount } = useActiveTradingAccount();
     const isDemo = activeAccount?.is_virtual;
-    const { show } = useModal();
+    const { show } = Provider.useModal();
 
     const iconCurrency = isDemo ? 'virtual' : activeAccount?.currency ?? 'virtual';
 

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

@@ -1,7 +1,7 @@
 import React, { ReactElement } from 'react';
 import { useEventListener } from 'usehooks-ts';
+import { Provider } from '@deriv/library';
 import { qtMerge } from '@deriv/quill-design';
-import { useModal } from '../ModalProvider';
 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 } = useModal();
+    const { hide } = Provider.useModal();
 
     useEventListener('keydown', (event: KeyboardEvent) => {
         if (!shouldPreventCloseOnEscape && event.key === 'Escape') {

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

@@ -1,7 +1,7 @@
 import React from 'react';
+import { Provider } from '@deriv/library';
 import { Heading, qtMerge } from '@deriv/quill-design';
 import CloseIcon from '../../public/images/ic-close-dark.svg';
-import { useModal } from '../ModalProvider';
 
 /**
  * Type for the DialogHeader component props
@@ -22,7 +22,7 @@ type TDialogHeader = {
  * @returns {JSX.Element} The DialogHeader component.
  */
 const DialogHeader = ({ className, hideCloseButton = false, title }: TDialogHeader) => {
-    const { hide } = useModal();
+    const { hide } = Provider.useModal();
 
     return (
         <div className={qtMerge('flex items-start', title ? 'justify-between' : 'justify-end', className)}>

packages/tradershub/src/components/ModalStepWrapper/ModalStepWrapper.tsx

@@ -1,9 +1,9 @@
 import React, { FC, PropsWithChildren, ReactNode, useEffect } from 'react';
 import classNames from 'classnames';
 import { useEventListener } from 'usehooks-ts';
+import { Provider } from '@deriv/library';
 import { Text } from '@deriv/quill-design';
 import CloseIcon from '../../public/images/ic-close-dark.svg';
-import { useModal } from '../ModalProvider';
 import './ModalStepWrapper.scss';
 
 type TModalStepWrapperProps = {
@@ -24,7 +24,7 @@ const ModalStepWrapper: FC<PropsWithChildren<TModalStepWrapperProps>> = ({
     shouldPreventCloseOnEscape = false,
     title,
 }) => {
-    const { hide, setModalOptions } = useModal();
+    const { hide, setModalOptions } = Provider.useModal();
     const hasRenderFooter = typeof renderFooter === 'function';
     const fixedFooter = shouldFixedFooter && hasRenderFooter;
 

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

@@ -1,14 +1,14 @@
 import React, { ComponentProps, useState } from 'react';
+import { Provider } from '@deriv/library';
 import { Button } from '@deriv/quill-design';
 import { ModalStepWrapper } from '../../../../components';
-import { useModal } from '../../../../components/ModalProvider';
 import { MT5AccountType } from '../../screens';
 
 type TMarketTypes = ComponentProps<typeof MT5AccountType>['selectedMarketType'];
 
 const MT5AccountTypeModal = () => {
     const [selectedMarketType, setSelectedMarketType] = useState<TMarketTypes>(undefined);
-    const { setModalState } = useModal();
+    const { setCfdState } = Provider.useCFDContext();
 
     return (
         <ModalStepWrapper
@@ -17,7 +17,7 @@ const MT5AccountTypeModal = () => {
                     colorStyle='coral'
                     disabled={!selectedMarketType}
                     onClick={() => {
-                        setModalState('marketType', selectedMarketType);
+                        setCfdState('marketType', selectedMarketType);
                     }}
                     size='md'
                     variant='primary'

packages/tradershub/src/features/cfd/screens/GetMoreMT5Accounts/GetMoreMT5Accounts.tsx

@@ -1,15 +1,15 @@
 import React, { FC } from 'react';
+import { Provider } from '@deriv/library';
 import { Text } from '@deriv/quill-design';
-import { useModal } from '../../../../components/ModalProvider';
 import AddIcon from '../../../../public/images/add-icon.svg';
 import { MT5AccountTypeModal } from '../../modals';
 
 const GetMoreMT5Accounts: FC = () => {
-    const { show } = useModal();
+    const { show } = Provider.useModal();
 
     return (
         <div
-            className='flex items-start cursor-pointer w-full lg:w-1/3'
+            className='flex items-start w-full cursor-pointer lg:w-1/3'
             onClick={() => show(<MT5AccountTypeModal />)}
             onKeyDown={e => {
                 if (e.key === 'Enter') {
@@ -19,7 +19,7 @@ const GetMoreMT5Accounts: FC = () => {
             role='button'
             tabIndex={0}
         >
-            <div className='flex p-800 items-center self-stretch rounded-lg border-system-light-active-background flex-1 gap-800 border-75 border-dashed'>
+            <div className='flex items-center self-stretch flex-1 border-dashed rounded-lg p-800 border-system-light-active-background gap-800 border-75'>
                 <div className='w-12 h-12'>
                     <AddIcon />
                 </div>

packages/tradershub/src/features/cfd/screens/Jurisdiction/JurisdictionTncSection/JurisdictionTncSection.tsx

@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
+import { Provider } from '@deriv/library';
 import { Link, Text, useBreakpoint } from '@deriv/quill-design';
-import { useModal } from '../../../../../components/ModalProvider';
 import { getStaticUrl } from '../../../../../helpers/urls';
 import { THooks } from '../../../../../types';
 import { companyNamesAndUrls } from '../../../constants';
@@ -24,8 +24,8 @@ type TProps = {
 
 const JurisdictionTncSection: FC<TProps> = ({ isCheckBoxChecked, selectedJurisdiction, setIsCheckBoxChecked }) => {
     const { isMobile } = useBreakpoint();
-    const { getModalState } = useModal();
-    const marketType = getModalState('marketType') || 'all';
+    const { getCFDState } = Provider.useCFDContext();
+    const marketType = getCFDState('marketType') || 'all';
     const selectedCompany = companyNamesAndUrls[selectedJurisdiction as keyof typeof companyNamesAndUrls];
 
     return (

packages/tradershub/src/features/cfd/screens/VerificationFailed/VerificationFailed.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { usePOA, usePOI } from '@deriv/api';
+import { Provider } from '@deriv/library';
 import { Button, Text } from '@deriv/quill-design';
-import { useModal } from '../../../../components/ModalProvider';
 
 const getDocumentTitle = (isPOIFailed?: boolean, isPOAFailed?: boolean) => {
     if (isPOIFailed && isPOAFailed) return 'proof of identity and proof of address';
@@ -16,7 +16,7 @@ const reasons = ['Document details do not match profile details', 'Expired docum
  */
 
 const VerificationFailed = () => {
-    const { hide } = useModal();
+    const { hide } = Provider.useModal();
     const { data: poiStatus } = usePOI();
     const { data: poaStatus } = usePOA();
 
@@ -34,7 +34,7 @@ const VerificationFailed = () => {
             </Text>
             <ul>
                 {reasons.map(reason => (
-                    <li className=' left-500 relative list-disc' key={reason}>
+                    <li className='relative list-disc  left-500' key={reason}>
                         <Text size='sm'>{reason}</Text>
                     </li>
                 ))}