Skip to content

Commit

Permalink
Merge pull request #77 from shayan-deriv/shayan/feq-2226/implement-he…
Browse files Browse the repository at this point in the history 
…ader-component

Shayan/feq 2226/implement header component
  • Loading branch information
@matin-deriv
matin-deriv authored May 29, 2024
2 parents 3911621 + f5c7b30 commit 270088b
Show file tree
Hide file tree
Showing 8 changed files with 681 additions and 15,615 deletions.
15,903 changes: 361 additions & 15,542 deletions package-lock.json
View file

Large diffs are not rendered by default.

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 { api } from '@/hooks';
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 } = api.account.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 />;
};
185 changes: 118 additions & 67 deletions src/components/AppHeader/AppHeader.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,104 +1,155 @@
import { useState } from 'react';
import { useEffect, useState } from 'react';
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,
useDevice,
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();
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={localize('Looking for CFDs? Go to Trader’s Hub')}
buttonProps={{
className: 'py-0 px-4',
icon: platformsConfig[0].buttonIcon,
}}
>
<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 py-2 px-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
95 changes: 95 additions & 0 deletions src/components/AppHeader/HeaderConfig.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
import { ReactNode } from 'react';
import {
DerivProductDerivBotBrandLightLogoWordmarkHorizontalIcon as DerivBotLogo,
DerivProductDerivTraderBrandLightLogoWordmarkHorizontalIcon as DerivTraderLogo,
LabelPairedHouseBlankMdRegularIcon as TradershubLogo,
LegacyCashierIcon as CashierLogo,
LegacyReportsIcon as ReportsLogo,
PartnersProductBinaryBotBrandLightLogoWordmarkHorizontalIcon as BinaryBotLogo,
PartnersProductSmarttraderBrandLightLogoWordmarkIcon as SmarttraderLogo,
} from '@deriv/quill-icons';

export type PlatformsConfig = {
active: boolean;
buttonIcon: ReactNode;
description: string;
href: string;
icon: ReactNode;
showInEU: boolean;
};

export type MenuItemsConfig = {
as: 'a' | 'button';
href: string;
icon: ReactNode;
label: string;
};

export type TAccount = {
balance: string;
currency: string;
icon: React.ReactNode;
isActive: boolean;
isEu: boolean;
isVirtual: boolean;
loginid: string;
token: string;
type: string;
};

export const platformsConfig: PlatformsConfig[] = [
{
active: true,
buttonIcon: <DerivTraderLogo height={25} width={114.97} />,
description: 'A whole new trading experience on a powerful yet easy to use platform.',
href: 'https://app.deriv.com',
icon: <DerivTraderLogo height={32} width={148} />,
showInEU: true,
},
{
active: false,
buttonIcon: <DerivBotLogo height={24} width={91} />,
description: 'Automated trading at your fingertips. No coding needed.',
href: 'https://app.deriv.com/bot',
icon: <DerivBotLogo height={32} width={121} />,
showInEU: false,
},
{
active: false,
buttonIcon: <SmarttraderLogo height={24} width={115} />,
description: 'Trade the world’s markets with our popular user-friendly platform.',
href: 'https://smarttrader.deriv.com/en/trading',
icon: <SmarttraderLogo height={32} width={153} />,
showInEU: false,
},
{
active: false,
buttonIcon: <BinaryBotLogo height={24} width={100} />,
description:
'Our classic “drag-and-drop” tool for creating trading bots, featuring pop-up trading charts, for advanced users.',
href: 'https://bot.deriv.com',
icon: <BinaryBotLogo height={32} width={133} />,
showInEU: false,
},
];

export const MenuItems: MenuItemsConfig[] = [
{
as: 'a',
href: 'https://app.deriv.com/appstore/traders-hub',
icon: <TradershubLogo />,
label: "Trader's Hub",
},
{
as: 'button',
href: 'https://app.deriv.com/appstore/traders-hub',
icon: <ReportsLogo iconSize='xs' />,
label: 'Reports',
},
{
as: 'button',
href: 'https://app.deriv.com/appstore/traders-hub',
icon: <CashierLogo iconSize='xs' />,
label: 'Cashier',
},
];
Loading

0 comments on commit 270088b

Please sign in to comment.