From 0be857a0ae06669b9c464573d40d8d4121abac58 Mon Sep 17 00:00:00 2001 From: thisyahlen <104053934+thisyahlen-deriv@users.noreply.github.com> Date: Tue, 30 Jan 2024 14:06:13 +0800 Subject: [PATCH] thisyahlen/chore: use ui library for tabs (#13182) * chore: use ui library for tabs * chore: remove test stuff * fix: latest * chore: update logic * chore: komen --- packages/account-v2/package.json | 2 +- packages/p2p-v2/package.json | 2 +- packages/tradershub/package.json | 2 +- packages/tradershub/src/App.tsx | 6 +- .../RegulationSwitcherDesktop.tsx | 72 ++++--------------- .../RegulationSwitcherMobile.tsx | 28 +++++--- .../src/hooks/useRegulationSwitcher.ts | 60 ++++++++++++++++ .../TradersHubRoute/TradersHubRoute.tsx | 28 ++++---- 8 files changed, 109 insertions(+), 91 deletions(-) create mode 100644 packages/tradershub/src/hooks/useRegulationSwitcher.ts diff --git a/packages/account-v2/package.json b/packages/account-v2/package.json index f62d5bf88837..984aa4cc8b46 100644 --- a/packages/account-v2/package.json +++ b/packages/account-v2/package.json @@ -11,7 +11,7 @@ "start": "rimraf dist && npm run test && npm run serve" }, "dependencies": { - "@deriv-com/ui": "0.0.1-beta.8", + "@deriv-com/ui": "0.0.1-beta.9", "@deriv/api": "^1.0.0", "@deriv/library": "^1.0.0", "@deriv/quill-design": "^1.3.2", diff --git a/packages/p2p-v2/package.json b/packages/p2p-v2/package.json index 915b461c5826..8002b65141eb 100644 --- a/packages/p2p-v2/package.json +++ b/packages/p2p-v2/package.json @@ -12,7 +12,7 @@ "start": "rimraf dist && npm run test && npm run serve" }, "dependencies": { - "@deriv-com/ui": "0.0.1-beta.8", + "@deriv-com/ui": "0.0.1-beta.9", "@deriv/api": "^1.0.0", "@deriv/integration": "^1.0.0", "@deriv/react-joyride": "^2.6.2", diff --git a/packages/tradershub/package.json b/packages/tradershub/package.json index f5637aabda6b..284580155c9d 100644 --- a/packages/tradershub/package.json +++ b/packages/tradershub/package.json @@ -18,7 +18,7 @@ "@deriv/library": "^1.0.0", "@deriv/quill-design": "^1.3.2", "@deriv/quill-icons": "^1.17.0", - "@deriv-com/ui": "0.0.1-beta.8", + "@deriv-com/ui": "0.0.1-beta.9", "@deriv/react-joyride": "^2.6.2", "@deriv/utils": "^1.0.0", "@tanstack/react-table": "^8.10.3", diff --git a/packages/tradershub/src/App.tsx b/packages/tradershub/src/App.tsx index eb6652950a2f..e3d491beb112 100644 --- a/packages/tradershub/src/App.tsx +++ b/packages/tradershub/src/App.tsx @@ -3,7 +3,7 @@ import { APIProvider } from '@deriv/api'; import { Provider } from '@deriv/library'; import { BreakpointProvider } from '@deriv/quill-design'; import AppContent from './AppContent'; -import { ContentSwitcher, UIProvider } from './components'; +import { UIProvider } from './components'; import './index.scss'; const App = () => ( @@ -12,9 +12,7 @@ const App = () => ( - - - + diff --git a/packages/tradershub/src/components/RegulationSwitcher/RegulationSwitcherDesktop.tsx b/packages/tradershub/src/components/RegulationSwitcher/RegulationSwitcherDesktop.tsx index 516943eb8b3a..6c53009fbf6f 100644 --- a/packages/tradershub/src/components/RegulationSwitcher/RegulationSwitcherDesktop.tsx +++ b/packages/tradershub/src/components/RegulationSwitcher/RegulationSwitcherDesktop.tsx @@ -1,57 +1,18 @@ -import React, { useEffect } from 'react'; -import { useActiveTradingAccount, useAuthorize, useTradingAccountsList } from '@deriv/api'; +import React from 'react'; import { Provider } from '@deriv/library'; -import { Button, qtJoin } from '@deriv/quill-design'; import { LabelPairedCircleInfoMdRegularIcon } from '@deriv/quill-icons'; +import { Tab, Tabs } from '@deriv-com/ui/dist/components/Tabs'; import { Text } from '@deriv-com/ui/dist/components/Text'; -import { Regulation } from '../../constants/constants'; -import useRegulationFlags from '../../hooks/useRegulationFlags'; +import { useRegulationSwitcher } from '../../hooks/useRegulationSwitcher'; import { RegulationModal } from '../../modals'; import { useUIContext } from '../UIProvider'; const RegulationSwitcherDesktop = () => { - const { switchAccount } = useAuthorize(); - const { data: tradingAccountsList } = useTradingAccountsList(); - const { getUIState, setUIState } = useUIContext(); + const { getUIState } = useUIContext(); const { show } = Provider.useModal(); - - const regulation = getUIState('regulation'); - const accountType = getUIState('accountType'); - const { isEU, isHighRisk } = useRegulationFlags(regulation, accountType); - - const realCRAccount = tradingAccountsList?.find(account => account.loginid.startsWith('CR'))?.loginid ?? ''; - - const realMFAccount = tradingAccountsList?.find(account => account.loginid.startsWith('MF'))?.loginid ?? ''; - - const { data: activeTrading } = useActiveTradingAccount(); - - const buttons = [{ label: Regulation.NonEU }, { label: Regulation.EU }]; - + const { buttons, handleButtonClick } = useRegulationSwitcher(); const activeRegulation = getUIState('regulation'); - const handleButtonClick = (label: string) => { - if (label === Regulation.NonEU) { - setUIState('regulation', Regulation.NonEU); - if (realCRAccount) { - switchAccount(realCRAccount); - } - } else { - setUIState('regulation', Regulation.EU); - if (realMFAccount) { - switchAccount(realMFAccount); - } - } - }; - - useEffect(() => { - if (activeTrading?.loginid.startsWith('CR') || isHighRisk) { - setUIState('regulation', Regulation.NonEU); - } else if (activeTrading?.loginid.startsWith('MF') || isEU) { - setUIState('regulation', Regulation.EU); - } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); - return (
@@ -61,22 +22,17 @@ const RegulationSwitcherDesktop = () => { onClick={() => show()} />
-
+ handleButtonClick(buttons[index].label)} + variant='primary' + > {buttons.map(button => ( - + ))} -
+
); }; diff --git a/packages/tradershub/src/components/RegulationSwitcher/RegulationSwitcherMobile.tsx b/packages/tradershub/src/components/RegulationSwitcher/RegulationSwitcherMobile.tsx index 8770eed9fbcd..b8d1ff4d7c8a 100644 --- a/packages/tradershub/src/components/RegulationSwitcher/RegulationSwitcherMobile.tsx +++ b/packages/tradershub/src/components/RegulationSwitcher/RegulationSwitcherMobile.tsx @@ -1,25 +1,33 @@ -// TODO: Add logic to switch between EU and non-EU import React from 'react'; import { Provider } from '@deriv/library'; -import { Tab } from '@deriv/quill-design'; +import { Tab, Tabs } from '@deriv-com/ui/dist/components/Tabs'; +import { useRegulationSwitcher } from '../../hooks/useRegulationSwitcher'; import { RegulationModal } from '../../modals'; import InfoIcon from '../../public/images/ic-info-outline.svg'; +import { useUIContext } from '../UIProvider'; const RegulationSwitcherMobile = () => { const { show } = Provider.useModal(); + const { getUIState } = useUIContext(); - const activeClassName = - 'aria-selected:font-bold active:font-bold aria-selected:border-b-brand-coral active:border-b-brand-coral'; + const { buttons, handleButtonClick } = useRegulationSwitcher(); + + const activeRegulation = getUIState('regulation'); return (
show()} /> - - - Non - EU - EU - - + handleButtonClick(buttons[index].label)} + variant='secondary' + > + {buttons.map(button => ( + + ))} +
); }; diff --git a/packages/tradershub/src/hooks/useRegulationSwitcher.ts b/packages/tradershub/src/hooks/useRegulationSwitcher.ts new file mode 100644 index 000000000000..04135d4ea976 --- /dev/null +++ b/packages/tradershub/src/hooks/useRegulationSwitcher.ts @@ -0,0 +1,60 @@ +import { useEffect } from 'react'; +import { useActiveTradingAccount, useAuthorize, useTradingAccountsList } from '@deriv/api'; +import { useUIContext } from '../components'; +import { Regulation } from '../constants/constants'; +import useRegulationFlags from './useRegulationFlags'; + +/** + * @description This hook contains the logic that is used to switch between EU and non-EU accounts + * @returns {buttons: {label: string}[], handleButtonClick: (label: string) => void} + * @example + * const { buttons, handleButtonClick } = useRegulationSwitcher(); + */ +export const useRegulationSwitcher = () => { + const { switchAccount } = useAuthorize(); + const { data: tradingAccountsList } = useTradingAccountsList(); + const { getUIState, setUIState } = useUIContext(); + + const currentRegulation = getUIState('regulation'); + const accountType = getUIState('accountType'); + const { isEU, isHighRisk } = useRegulationFlags(currentRegulation, accountType); + + const realCRAccount = tradingAccountsList?.find(account => account.loginid.startsWith('CR'))?.loginid ?? ''; + const realMFAccount = tradingAccountsList?.find(account => account.loginid.startsWith('MF'))?.loginid ?? ''; + + const { data: activeTrading } = useActiveTradingAccount(); + + const buttons = [{ label: Regulation.NonEU }, { label: Regulation.EU }]; + + const handleButtonClick = (label: string) => { + if (label !== currentRegulation) { + if (label === Regulation.NonEU) { + setUIState('regulation', Regulation.NonEU); + if (realCRAccount) { + switchAccount(realCRAccount); + } + } else { + setUIState('regulation', Regulation.EU); + if (realMFAccount) { + switchAccount(realMFAccount); + } + } + } + }; + + useEffect(() => { + if (activeTrading?.loginid.startsWith('CR') || isHighRisk) { + setUIState('regulation', Regulation.NonEU); + } else if (activeTrading?.loginid.startsWith('MF') || isEU) { + setUIState('regulation', Regulation.EU); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + + return { + // Contains the array of buttons to be rendered in the switcher E.g. [{label: 'EU'}, {label: 'Non-EU'}] + buttons, + // Contains the function to be called when a button is clicked and to update the state E.g. (label: string) => void + handleButtonClick, + }; +}; diff --git a/packages/tradershub/src/routes/TradersHubRoute/TradersHubRoute.tsx b/packages/tradershub/src/routes/TradersHubRoute/TradersHubRoute.tsx index 06dd39f62faa..c57b928acc21 100644 --- a/packages/tradershub/src/routes/TradersHubRoute/TradersHubRoute.tsx +++ b/packages/tradershub/src/routes/TradersHubRoute/TradersHubRoute.tsx @@ -1,9 +1,9 @@ import React from 'react'; import { useIsDIELEnabled } from '@deriv/api'; import { Heading, useBreakpoint } from '@deriv/quill-design'; +import { Tab, Tabs } from '@deriv-com/ui/dist/components/Tabs'; import { CFDSection, - ContentSwitcher, DemoRealSwitcher, OptionsAndMultipliersSection, RegulationSwitcherDesktop, @@ -25,6 +25,7 @@ const TradersHubRoute = () => { const { hasActiveDerivAccount } = useRegulationFlags(regulation, accountType); const isSwitcherVisible = isDIEL && isReal; + const isTotalAssetsVisible = hasActiveDerivAccount || isDemo; if (isMobile) return ( @@ -37,20 +38,15 @@ const TradersHubRoute = () => { {isSwitcherVisible && }
-
- -
- - - - - - - - - - - +
{isTotalAssetsVisible && }
+ + + + + + + +
); @@ -62,7 +58,7 @@ const TradersHubRoute = () => {
{isSwitcherVisible && }
- {(hasActiveDerivAccount || isDemo) && } + {isTotalAssetsVisible && }