c4f8f4eab0
* MP-1757: implemented the WalletProvider and connect buttons * tidy: tidy up the search * MP-1691: moved modals outside of the DOM * MP-1691: changed CreditManager into AccountDetails * fix: fixed the naming * MP-1691: UX approvements * MP-1691: global confirm and delete modal added * fix: merged the credit-account and wallet branch * MP-1757: added the status store * fix: updated the store interaction * MP-1757: major cleanup of stores * tidy: format
57 lines
1.9 KiB
TypeScript
57 lines
1.9 KiB
TypeScript
import Link from 'next/link'
|
|
|
|
import { AccountNavigation, AccountStatus } from 'components/Account'
|
|
import Logo from 'components/Icons/logo.svg'
|
|
import { menuTree, NavLink } from 'components/Navigation'
|
|
import SearchInput from 'components/Navigation/SearchInput'
|
|
import Wallet from 'components/Wallet/Wallet'
|
|
import useCreditAccounts from 'hooks/useCreditAccounts'
|
|
import { useAccountDetailsStore, useWalletStore } from 'stores'
|
|
|
|
const Navigation = () => {
|
|
const address = useWalletStore((s) => s.address)
|
|
const selectedAccount = useAccountDetailsStore((s) => s.selectedAccount)
|
|
|
|
const { data: creditAccountsList } = useCreditAccounts()
|
|
|
|
const isConnected = !!address
|
|
const hasCreditAccounts = creditAccountsList && creditAccountsList.length > 0
|
|
|
|
return (
|
|
<div className='relative hidden bg-header lg:block'>
|
|
<div className='flex items-center justify-between border-b border-white/20 px-6 py-3'>
|
|
<div className='flex flex-grow items-center'>
|
|
<Link href='/trade' passHref>
|
|
<span className='h-10 w-10'>
|
|
<Logo />
|
|
</span>
|
|
</Link>
|
|
<div className='flex gap-8 px-6'>
|
|
{menuTree.map((item, index) => (
|
|
<NavLink key={index} href={item.href}>
|
|
{item.label}
|
|
</NavLink>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<Wallet />
|
|
</div>
|
|
{/* Sub navigation bar */}
|
|
<div className='flex items-center justify-between border-b border-white/20 pl-6 text-sm text-white/40'>
|
|
<div className='flex items-center'>
|
|
<SearchInput />
|
|
{isConnected && hasCreditAccounts && (
|
|
<AccountNavigation
|
|
selectedAccount={selectedAccount}
|
|
creditAccountsList={creditAccountsList}
|
|
/>
|
|
)}
|
|
</div>
|
|
{isConnected && <AccountStatus />}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Navigation
|