Skip to content

Commit 0be857a

Browse files
thisyahlen-derivthisyahlen-deriv
authored
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
1 parent 9ff800e commit 0be857a

File tree

8 files changed

+109
-91
lines changed

8 files changed

+109
-91
lines changed

‎packages/account-v2/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
"start": "rimraf dist && npm run test && npm run serve"
1212
},
1313
"dependencies": {
14-
"@deriv-com/ui": "0.0.1-beta.8",
14+
"@deriv-com/ui": "0.0.1-beta.9",
1515
"@deriv/api": "^1.0.0",
1616
"@deriv/library": "^1.0.0",
1717
"@deriv/quill-design": "^1.3.2",

‎packages/p2p-v2/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
"start": "rimraf dist && npm run test && npm run serve"
1313
},
1414
"dependencies": {
15-
"@deriv-com/ui": "0.0.1-beta.8",
15+
"@deriv-com/ui": "0.0.1-beta.9",
1616
"@deriv/api": "^1.0.0",
1717
"@deriv/integration": "^1.0.0",
1818
"@deriv/react-joyride": "^2.6.2",

‎packages/tradershub/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
"@deriv/library": "^1.0.0",
1919
"@deriv/quill-design": "^1.3.2",
2020
"@deriv/quill-icons": "^1.17.0",
21-
"@deriv-com/ui": "0.0.1-beta.8",
21+
"@deriv-com/ui": "0.0.1-beta.9",
2222
"@deriv/react-joyride": "^2.6.2",
2323
"@deriv/utils": "^1.0.0",
2424
"@tanstack/react-table": "^8.10.3",

‎packages/tradershub/src/App.tsx

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { APIProvider } from '@deriv/api';
33
import { Provider } from '@deriv/library';
44
import { BreakpointProvider } from '@deriv/quill-design';
55
import AppContent from './AppContent';
6-
import { ContentSwitcher, UIProvider } from './components';
6+
import { UIProvider } from './components';
77
import './index.scss';
88

99
const App = () => (
@@ -12,9 +12,7 @@ const App = () => (
1212
<BreakpointProvider>
1313
<Provider.CFDProvider>
1414
<Provider.ModalProvider>
15-
<ContentSwitcher>
16-
<AppContent />
17-
</ContentSwitcher>
15+
<AppContent />
1816
</Provider.ModalProvider>
1917
</Provider.CFDProvider>
2018
</BreakpointProvider>

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

Lines changed: 14 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,18 @@
1-
import React, { useEffect } from 'react';
2-
import { useActiveTradingAccount, useAuthorize, useTradingAccountsList } from '@deriv/api';
1+
import React from 'react';
32
import { Provider } from '@deriv/library';
4-
import { Button, qtJoin } from '@deriv/quill-design';
53
import { LabelPairedCircleInfoMdRegularIcon } from '@deriv/quill-icons';
4+
import { Tab, Tabs } from '@deriv-com/ui/dist/components/Tabs';
65
import { Text } from '@deriv-com/ui/dist/components/Text';
7-
import { Regulation } from '../../constants/constants';
8-
import useRegulationFlags from '../../hooks/useRegulationFlags';
6+
import { useRegulationSwitcher } from '../../hooks/useRegulationSwitcher';
97
import { RegulationModal } from '../../modals';
108
import { useUIContext } from '../UIProvider';
119

1210
const RegulationSwitcherDesktop = () => {
13-
const { switchAccount } = useAuthorize();
14-
const { data: tradingAccountsList } = useTradingAccountsList();
15-
const { getUIState, setUIState } = useUIContext();
11+
const { getUIState } = useUIContext();
1612
const { show } = Provider.useModal();
17-
18-
const regulation = getUIState('regulation');
19-
const accountType = getUIState('accountType');
20-
const { isEU, isHighRisk } = useRegulationFlags(regulation, accountType);
21-
22-
const realCRAccount = tradingAccountsList?.find(account => account.loginid.startsWith('CR'))?.loginid ?? '';
23-
24-
const realMFAccount = tradingAccountsList?.find(account => account.loginid.startsWith('MF'))?.loginid ?? '';
25-
26-
const { data: activeTrading } = useActiveTradingAccount();
27-
28-
const buttons = [{ label: Regulation.NonEU }, { label: Regulation.EU }];
29-
13+
const { buttons, handleButtonClick } = useRegulationSwitcher();
3014
const activeRegulation = getUIState('regulation');
3115

32-
const handleButtonClick = (label: string) => {
33-
if (label === Regulation.NonEU) {
34-
setUIState('regulation', Regulation.NonEU);
35-
if (realCRAccount) {
36-
switchAccount(realCRAccount);
37-
}
38-
} else {
39-
setUIState('regulation', Regulation.EU);
40-
if (realMFAccount) {
41-
switchAccount(realMFAccount);
42-
}
43-
}
44-
};
45-
46-
useEffect(() => {
47-
if (activeTrading?.loginid.startsWith('CR') || isHighRisk) {
48-
setUIState('regulation', Regulation.NonEU);
49-
} else if (activeTrading?.loginid.startsWith('MF') || isEU) {
50-
setUIState('regulation', Regulation.EU);
51-
}
52-
// eslint-disable-next-line react-hooks/exhaustive-deps
53-
}, []);
54-
5516
return (
5617
<div className='flex items-center gap-400'>
5718
<div className='flex items-center gap-400'>
@@ -61,22 +22,17 @@ const RegulationSwitcherDesktop = () => {
6122
onClick={() => show(<RegulationModal />)}
6223
/>
6324
</div>
64-
<div className='flex bg-system-light-secondary-background rounded-400 p-200 gap-200 w-[200px] h-2000'>
25+
<Tabs
26+
activeTab={activeRegulation}
27+
className='flex rounded-300 p-200 w-[200px] h-2000'
28+
key={activeRegulation}
29+
onChange={index => handleButtonClick(buttons[index].label)}
30+
variant='primary'
31+
>
6532
{buttons.map(button => (
66-
<Button
67-
className={qtJoin(
68-
'rounded-200',
69-
activeRegulation !== button.label && 'bg-transparent font-regular'
70-
)}
71-
colorStyle='white'
72-
fullWidth
73-
key={`tradershub-tab-${button.label}`}
74-
onClick={() => handleButtonClick(button.label)}
75-
>
76-
{button.label}
77-
</Button>
33+
<Tab className='rounded-200' key={button.label} title={button.label} />
7834
))}
79-
</div>
35+
</Tabs>
8036
</div>
8137
);
8238
};

‎packages/tradershub/src/components/RegulationSwitcher/RegulationSwitcherMobile.tsx

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,33 @@
1-
// TODO: Add logic to switch between EU and non-EU
21
import React from 'react';
32
import { Provider } from '@deriv/library';
4-
import { Tab } from '@deriv/quill-design';
3+
import { Tab, Tabs } from '@deriv-com/ui/dist/components/Tabs';
4+
import { useRegulationSwitcher } from '../../hooks/useRegulationSwitcher';
55
import { RegulationModal } from '../../modals';
66
import InfoIcon from '../../public/images/ic-info-outline.svg';
7+
import { useUIContext } from '../UIProvider';
78

89
const RegulationSwitcherMobile = () => {
910
const { show } = Provider.useModal();
11+
const { getUIState } = useUIContext();
1012

11-
const activeClassName =
12-
'aria-selected:font-bold active:font-bold aria-selected:border-b-brand-coral active:border-b-brand-coral';
13+
const { buttons, handleButtonClick } = useRegulationSwitcher();
14+
15+
const activeRegulation = getUIState('regulation');
1316

1417
return (
1518
<div className='flex items-center gap-400'>
1619
<InfoIcon className='h-auto w-800' onClick={() => show(<RegulationModal />)} />
17-
<Tab.Container size='sm'>
18-
<Tab.List>
19-
<Tab.Trigger className={activeClassName}>Non - EU</Tab.Trigger>
20-
<Tab.Trigger className={activeClassName}>EU</Tab.Trigger>
21-
</Tab.List>
22-
</Tab.Container>
20+
<Tabs
21+
activeTab={activeRegulation}
22+
className='flex rounded-300 p-200 w-[120px] h-2000'
23+
key={activeRegulation}
24+
onChange={index => handleButtonClick(buttons[index].label)}
25+
variant='secondary'
26+
>
27+
{buttons.map(button => (
28+
<Tab className='rounded-200' key={button.label} title={button.label} />
29+
))}
30+
</Tabs>
2331
</div>
2432
);
2533
};

‎packages/tradershub/src/hooks/useRegulationSwitcher.ts

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import { useEffect } from 'react';
2+
import { useActiveTradingAccount, useAuthorize, useTradingAccountsList } from '@deriv/api';
3+
import { useUIContext } from '../components';
4+
import { Regulation } from '../constants/constants';
5+
import useRegulationFlags from './useRegulationFlags';
6+
7+
/**
8+
* @description This hook contains the logic that is used to switch between EU and non-EU accounts
9+
* @returns {buttons: {label: string}[], handleButtonClick: (label: string) => void}
10+
* @example
11+
* const { buttons, handleButtonClick } = useRegulationSwitcher();
12+
*/
13+
export const useRegulationSwitcher = () => {
14+
const { switchAccount } = useAuthorize();
15+
const { data: tradingAccountsList } = useTradingAccountsList();
16+
const { getUIState, setUIState } = useUIContext();
17+
18+
const currentRegulation = getUIState('regulation');
19+
const accountType = getUIState('accountType');
20+
const { isEU, isHighRisk } = useRegulationFlags(currentRegulation, accountType);
21+
22+
const realCRAccount = tradingAccountsList?.find(account => account.loginid.startsWith('CR'))?.loginid ?? '';
23+
const realMFAccount = tradingAccountsList?.find(account => account.loginid.startsWith('MF'))?.loginid ?? '';
24+
25+
const { data: activeTrading } = useActiveTradingAccount();
26+
27+
const buttons = [{ label: Regulation.NonEU }, { label: Regulation.EU }];
28+
29+
const handleButtonClick = (label: string) => {
30+
if (label !== currentRegulation) {
31+
if (label === Regulation.NonEU) {
32+
setUIState('regulation', Regulation.NonEU);
33+
if (realCRAccount) {
34+
switchAccount(realCRAccount);
35+
}
36+
} else {
37+
setUIState('regulation', Regulation.EU);
38+
if (realMFAccount) {
39+
switchAccount(realMFAccount);
40+
}
41+
}
42+
}
43+
};
44+
45+
useEffect(() => {
46+
if (activeTrading?.loginid.startsWith('CR') || isHighRisk) {
47+
setUIState('regulation', Regulation.NonEU);
48+
} else if (activeTrading?.loginid.startsWith('MF') || isEU) {
49+
setUIState('regulation', Regulation.EU);
50+
}
51+
// eslint-disable-next-line react-hooks/exhaustive-deps
52+
}, []);
53+
54+
return {
55+
// Contains the array of buttons to be rendered in the switcher E.g. [{label: 'EU'}, {label: 'Non-EU'}]
56+
buttons,
57+
// Contains the function to be called when a button is clicked and to update the state E.g. (label: string) => void
58+
handleButtonClick,
59+
};
60+
};

‎packages/tradershub/src/routes/TradersHubRoute/TradersHubRoute.tsx

Lines changed: 12 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import React from 'react';
22
import { useIsDIELEnabled } from '@deriv/api';
33
import { Heading, useBreakpoint } from '@deriv/quill-design';
4+
import { Tab, Tabs } from '@deriv-com/ui/dist/components/Tabs';
45
import {
56
CFDSection,
6-
ContentSwitcher,
77
DemoRealSwitcher,
88
OptionsAndMultipliersSection,
99
RegulationSwitcherDesktop,
@@ -25,6 +25,7 @@ const TradersHubRoute = () => {
2525
const { hasActiveDerivAccount } = useRegulationFlags(regulation, accountType);
2626

2727
const isSwitcherVisible = isDIEL && isReal;
28+
const isTotalAssetsVisible = hasActiveDerivAccount || isDemo;
2829

2930
if (isMobile)
3031
return (
@@ -37,20 +38,15 @@ const TradersHubRoute = () => {
3738
{isSwitcherVisible && <RegulationSwitcherMobile />}
3839
</div>
3940
<div />
40-
<div className='grid place-content-center pb-1200'>
41-
<TotalAssets />
42-
</div>
43-
<ContentSwitcher>
44-
<ContentSwitcher.HeaderList list={['Options & Multipliers', 'CFDs']} />
45-
<ContentSwitcher.PanelContainer>
46-
<ContentSwitcher.Panel>
47-
<OptionsAndMultipliersSection />
48-
</ContentSwitcher.Panel>
49-
<ContentSwitcher.Panel>
50-
<CFDSection />
51-
</ContentSwitcher.Panel>
52-
</ContentSwitcher.PanelContainer>
53-
</ContentSwitcher>
41+
<div className='grid place-content-center pb-1200'>{isTotalAssetsVisible && <TotalAssets />}</div>
42+
<Tabs className='w-full rounded-300 p-200'>
43+
<Tab className='rounded-200 py-300 px-400' title='Options & Multipliers'>
44+
<OptionsAndMultipliersSection />
45+
</Tab>
46+
<Tab className='rounded-200 py-300 px-400' title='CFDs'>
47+
<CFDSection />
48+
</Tab>
49+
</Tabs>
5450
</div>
5551
);
5652

@@ -62,7 +58,7 @@ const TradersHubRoute = () => {
6258
<DemoRealSwitcher />
6359
</div>
6460
<div>{isSwitcherVisible && <RegulationSwitcherDesktop />}</div>
65-
{(hasActiveDerivAccount || isDemo) && <TotalAssets />}
61+
{isTotalAssetsVisible && <TotalAssets />}
6662
</div>
6763
<TradersHubContent />
6864
</div>

0 commit comments

Comments
 (0)