mirror of
https://github.com/luxfi/explore.git
synced 2026-09-24 00:28:18 +00:00
tom goriunovandGitHub
401dc58402
* basic login button implementation * refactoring and add dynamic auth button to the other pages * connect wallet without authenticating an user * login and logout user in blockscout account * refactoring and RPC overrides * authenticate user with connected wallet * add ENS to profile button * override evm chains and fix contract write with waas wallet * disconnect wallet and fix docker build * add dynamic imports to components that use web3 wallet packages * refactor user profile directory * clean up * tweaks * update pw ci script * fix "connect wallet" button behavior * handle linking email to profile with dynamic provider * fix test * async loading web3 hooks and remove dynamic loading from components that use them * fix pw tests * add account navigation in horizontal layout when auth provider is dynamic * fix address verification modal * review fixes * spelling fixes
74 lines
2.5 KiB
TypeScript
74 lines
2.5 KiB
TypeScript
import { Box, chakra, Flex, Separator } from '@chakra-ui/react';
|
|
import React from 'react';
|
|
|
|
import config from 'configs/app';
|
|
import useNavItems, { isGroupItem } from 'lib/hooks/useNavItems';
|
|
import RewardsButton from 'ui/rewards/RewardsButton';
|
|
import { CONTENT_MAX_WIDTH } from 'ui/shared/layout/utils';
|
|
import useIsAuth from 'ui/snippets/auth/useIsAuth';
|
|
import NetworkLogo from 'ui/snippets/networkLogo/NetworkLogo';
|
|
import UserProfileDesktop from 'ui/snippets/user/UserProfileDesktop';
|
|
|
|
import NavigationPromoBanner from '../promoBanner/NavigationPromoBanner';
|
|
import RollupStageBadge from '../RollupStageBadge';
|
|
import TestnetBadge from '../TestnetBadge';
|
|
import NavLink from './NavLink';
|
|
import NavLinkGroup from './NavLinkGroup';
|
|
|
|
const accountFeature = config.features.account;
|
|
|
|
const NavigationDesktop = () => {
|
|
const { mainNavItems, accountNavItems } = useNavItems();
|
|
const isAuth = useIsAuth();
|
|
|
|
const accountNavGroup = React.useMemo(() => {
|
|
if (accountFeature.isEnabled && accountFeature.authProvider === 'dynamic' && isAuth) {
|
|
return {
|
|
text: 'Account',
|
|
subItems: accountNavItems,
|
|
};
|
|
}
|
|
}, [ accountNavItems, isAuth ]);
|
|
|
|
return (
|
|
<Box borderColor="border.divider" borderBottomWidth="1px">
|
|
<Flex
|
|
display={{ base: 'none', lg: 'flex' }}
|
|
alignItems="center"
|
|
px={ 6 }
|
|
py={ 2 }
|
|
maxW={ `${ CONTENT_MAX_WIDTH }px` }
|
|
m="0 auto"
|
|
>
|
|
<NetworkLogo/>
|
|
<TestnetBadge ml={ 3 }/>
|
|
<RollupStageBadge ml={ 3 }/>
|
|
<chakra.nav ml="auto">
|
|
<Flex as="ul" columnGap={ 2 } alignItems="center">
|
|
{ mainNavItems.map((item) => {
|
|
if (isGroupItem(item)) {
|
|
return <NavLinkGroup key={ item.text } item={ item }/>;
|
|
} else {
|
|
return <NavLink key={ item.text } item={ item } noIcon py={ 1.5 } w="fit-content"/>;
|
|
}
|
|
}) }
|
|
{ accountNavGroup && (
|
|
<>
|
|
<Separator orientation="vertical" mx={ 0 } h={ 4 }/>
|
|
<NavLinkGroup key={ accountNavGroup.text } item={ accountNavGroup }/>
|
|
</>
|
|
) }
|
|
</Flex>
|
|
</chakra.nav>
|
|
<Flex gap={ 2 } ml={ 8 } _empty={{ display: 'none' }}>
|
|
<NavigationPromoBanner/>
|
|
{ config.features.rewards.isEnabled && <RewardsButton size="sm"/> }
|
|
<UserProfileDesktop buttonSize="sm"/>
|
|
</Flex>
|
|
</Flex>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default React.memo(NavigationDesktop);
|