Skip to content

Commit

Permalink
feat: implemented header [WIP]
Browse files Browse the repository at this point in the history
  • Loading branch information
@shayan-deriv
shayan-deriv committed May 24, 2024
1 parent 6153252 commit c1c1b96
Show file tree
Hide file tree
Showing 8 changed files with 353 additions and 80 deletions.
37 changes: 26 additions & 11 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
"@babel/preset-env": "^7.24.5",
"@deriv-com/api-hooks": "^0.1.19",
"@deriv-com/translations": "^1.2.3",
"@deriv-com/ui": "^1.21.1",
"@deriv-com/ui": "^1.27.3",
"@deriv-com/utils": "latest",
"@deriv/deriv-api": "^1.0.15",
"@deriv/quill-design": "^1.2.24",
Expand Down
18 changes: 18 additions & 0 deletions src/components/AppHeader/AccountSwitcher/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import { useActiveAccount } from '@/hooks/api/account';
import { CurrencyUsdIcon } from '@deriv/quill-icons';
import { AccountSwitcher as UIAccountSwitcher } from '@deriv-com/ui';
import { FormatUtils } from '@deriv-com/utils';

export const AccountSwitcher = () => {
const { data } = useActiveAccount();
const activeAccount = {
balance: FormatUtils.formatMoney(data?.balance ?? 0),
currency: data?.currency || 'USD',
currencyLabel: data?.currency || 'US Dollar',
icon: <CurrencyUsdIcon iconSize='sm' />,
isActive: true,
isVirtual: Boolean(data?.is_virtual),
loginid: data?.loginid || '',
};
return data && <UIAccountSwitcher activeAccount={activeAccount} isDisabled />;
};
189 changes: 122 additions & 67 deletions src/components/AppHeader/AppHeader.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,104 +1,159 @@
import { useState } from 'react';
/* eslint-disable no-console */
// import { useActiveAccount } from '@/hooks/api/account';

import { useEffect, useState } from 'react';
import { useDevice } from '@/hooks';
import {
LabelPairedHouseBlankMdRegularIcon,
LegacyChevronRight2pxIcon,
LegacyMenuHamburger1pxIcon,
LegacyMenuHamburger2pxIcon,
LegacyNotificationIcon,
StandaloneCircleUserRegularIcon,
} from '@deriv/quill-icons';
import { useAuthData } from '@deriv-com/api-hooks';
import { Localize } from '@deriv-com/translations';
import { Button, DerivLogo, Drawer, Header, MenuItem, Text, useDevice, Wrapper } from '@deriv-com/ui';
import { useAccountList, useAuthData } from '@deriv-com/api-hooks';
import { useTranslations } from '@deriv-com/translations';
import {
Button,
Drawer,
Header,
MenuItem,
PlatformSwitcher,
PlatformSwitcherItem,
Text,
TooltipMenuIcon,
Wrapper,
} from '@deriv-com/ui';
import { LocalStorageConstants, LocalStorageUtils, URLUtils } from '@deriv-com/utils';
import { AccountSwitcher } from './AccountSwitcher';
import { MenuItems, platformsConfig } from './HeaderConfig';
import './AppHeader.scss';

// TODO: handle local storage values not updating after changing local storage values
const AppHeader = () => {
const [isDrawerOpen, setIsDrawerOpen] = useState(false);
const { data: accounts } = useAccountList();
const { isDesktop } = useDevice();
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { activeLoginid, logout } = useAuthData();
const { localize } = useTranslations();
const appId = LocalStorageUtils.getValue(LocalStorageConstants.configAppId);
const serverUrl = localStorage.getItem(LocalStorageConstants.configServerURL.toString());
const oauthUrl =
appId && serverUrl
? `https://${serverUrl}/oauth2/authorize?app_id=${appId}&l=EN&&brand=deriv`
: URLUtils.getOauthURL();

useEffect(() => {
const shouldRedirectToLogin = () => {
if (typeof accounts !== 'undefined') {
const userHasNoP2PAccount = !accounts.find(
account => account.broker === 'CR' && account.currency === 'USD'
);
const activeAccount = accounts.find(account => account.loginid === activeLoginid);
const activeAccountCurrency = activeAccount?.currency || null;

if (userHasNoP2PAccount || activeAccountCurrency !== 'USD') {
window.open(oauthUrl, '_self');
}
}
};

shouldRedirectToLogin();
}, [accounts, activeLoginid, oauthUrl]);

return (
<Header className='app-header'>
<Header className={!isDesktop ? 'h-[40px]' : ''}>
{isDesktop ? (
<Wrapper variant='left'>
<DerivLogo
href='https://deriv.com'
logoHeight={30}
logoWidth={30}
target='_blank'
variant='wallets'
/>
<MenuItem
as='button'
className='flex gap-2 p-5'
leftComponent={<LabelPairedHouseBlankMdRegularIcon />}
<PlatformSwitcher
bottomLinkLabel='Looking for CFDs? Go to Trader’s Hub'
buttonProps={{
icon: platformsConfig[0].buttonIcon,
style: { padding: '0 16px' },
}}
>
<Text>
<Localize i18n_default_text="Trader's Hub" />
</Text>
</MenuItem>
{platformsConfig.map(({ active, description, href, icon }) => (
<PlatformSwitcherItem
active={active}
description={description}
href={href}
icon={icon}
key={description}
/>
))}
</PlatformSwitcher>
{MenuItems.map(({ as, href, icon, label }) => (
<MenuItem as={as} className='flex gap-2 p-5' href={href} key={label} leftComponent={icon}>
<Text>{localize(label)}</Text>
</MenuItem>
))}
</Wrapper>
) : (
<Wrapper variant='left'>
<div
className='flex items-center justify-center pt-2 pb-2 pr-4 pl-4 h-full '
onClick={() => setIsDrawerOpen(true)}
>
<LegacyMenuHamburger2pxIcon iconSize='xs' />
</div>
<Drawer
isOpen={isDrawerOpen}
onCloseDrawer={() => {
setIsDrawerOpen(false);
}}
width='300px'
>
<Drawer.Header
onCloseDrawer={() => {
setIsDrawerOpen(false);
}}
>
<Text>
<Localize i18n_default_text='Menu' />
</Text>
</Drawer.Header>
<Drawer.Content>
<div className='flex'>
<MenuItem
as='button'
className='flex gap-5 p-5'
leftComponent={<LabelPairedHouseBlankMdRegularIcon />}
rightComponent={<LegacyChevronRight2pxIcon iconSize='xs' />}
>
<Text>
<Localize i18n_default_text="Trader's Hub" />
</Text>
</MenuItem>
</div>
</Drawer.Content>
aaa
</Drawer>
<Button
icon={<LegacyMenuHamburger1pxIcon iconSize='sm' />}
onClick={() => setIsDrawerOpen(true)}
variant='ghost'
/>
<MenuItem
as={MenuItems[1].as}
className='flex gap-2 p-5'
href={MenuItems[1].href}
key={MenuItems[1].label}
leftComponent={MenuItems[1].icon}
>
<Text>{localize(MenuItems[1].label)}</Text>
</MenuItem>
</Wrapper>
)}
{activeLoginid ? (
<Button onClick={logout}>
<Localize i18n_default_text='Logout' />
</Button>
) : (
<Button
className='w-36'
color='primary-light'
onClick={() => window.open(oauthUrl, '_self')}
variant='ghost'
>
<Text weight='bold'>
<Localize i18n_default_text='Log in' />
</Text>
</Button>
)}
<Wrapper variant='right'>
{activeLoginid ? (
<>
<TooltipMenuIcon
as='button'
className={isDesktop ? 'mr-4 pl-2 border-l-[1px] h-[32px]' : ''}
disableHover
tooltipContent={localize('View notifications')}
tooltipPosition='bottom'
>
<LegacyNotificationIcon fill='red' iconSize='sm' />
</TooltipMenuIcon>
{isDesktop && (
<TooltipMenuIcon
as='a'
className='pr-3 border-r-[1px] h-[32px]'
disableHover
href='https://app.deriv.com/account/personal-details'
tooltipContent={localize('Manage account settings')}
tooltipPosition='bottom'
>
<StandaloneCircleUserRegularIcon fill='#626262' />
</TooltipMenuIcon>
)}
<AccountSwitcher />
<Button className='mr-6' onClick={logout} size='md'>
<Text weight='bold'>{localize('Logout')}</Text>
</Button>
</>
) : (
<Button
className='w-36'
color='primary-light'
onClick={() => window.open(oauthUrl, '_self')}
variant='ghost'
>
<Text weight='bold'>{localize('Log in')}</Text>
</Button>
)}
</Wrapper>
</Header>
);
};
Expand Down
Loading

0 comments on commit c1c1b96

Please sign in to comment.