2f7b266e6b
* MP-1674: replaced the logo and added dekstop only nav
* MP-1677: borrowCapacity implemented into the SubAccount Nav
* MP-1677: adjusted the SubAccount navigation
* M1677: fixed the button and SearchInput component
* MP-1674: fixed the NavLink component
* MP-1674: fixed the SubAccount navigation
* tidy: cleaning up the trading view
* MP-1674: added withdraw and funding functions
* MP-1674: worked on the AccountStats
* MP-1671: modal work
* MP-1647: improvised CreditAccount expander
* tidy: fixed the page structure
* MP-1758: finished the SearchInput layout
* MP-1759: updated the semicircle graphs
* MP-1759: SemiCircle to Gauge
* fix: implemented animated numbers
* tidy: refactor
* MP-1759: added Tooltip to the Gauge
* fix: replace animate={true} with animate
* fix: fixed the Gauge timing
* fix: updated the BorrowCapacity styles
* fix: renamed SubAccount to Account
* fix: Text should not be a button, Button should be
* tidy: format
* fix: Text no clicky
* fix: replaced all the Text appearances with onClick
81 lines
3.1 KiB
TypeScript
81 lines
3.1 KiB
TypeScript
import Link from 'next/link'
|
|
|
|
import { AccountStatus, SubAccountNavigation } from 'components/Account'
|
|
import CircularProgress from 'components/CircularProgress'
|
|
import Logo from 'components/Icons/logo.svg'
|
|
import Modal from 'components/Modal'
|
|
import { menuTree, NavLink } from 'components/Navigation'
|
|
import SearchInput from 'components/Navigation/SearchInput'
|
|
import Text from 'components/Text'
|
|
import Wallet from 'components/Wallet'
|
|
import useCreateCreditAccount from 'hooks/mutations/useCreateCreditAccount'
|
|
import useDeleteCreditAccount from 'hooks/mutations/useDeleteCreditAccount'
|
|
import useCreditAccounts from 'hooks/useCreditAccounts'
|
|
import useCreditManagerStore from 'stores/useCreditManagerStore'
|
|
import useWalletStore from 'stores/useWalletStore'
|
|
|
|
const Navigation = () => {
|
|
const address = useWalletStore((s) => s.address)
|
|
const selectedAccount = useCreditManagerStore((s) => s.selectedAccount)
|
|
const setSelectedAccount = useCreditManagerStore((s) => s.actions.setSelectedAccount)
|
|
const { mutate: createCreditAccount, isLoading: isLoadingCreate } = useCreateCreditAccount()
|
|
const { mutate: deleteCreditAccount, isLoading: isLoadingDelete } = useDeleteCreditAccount(
|
|
selectedAccount || '',
|
|
)
|
|
|
|
const { data: creditAccountsList, isLoading: isLoadingCreditAccounts } = 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 && (
|
|
<SubAccountNavigation
|
|
selectedAccount={selectedAccount}
|
|
createCreditAccount={createCreditAccount}
|
|
deleteCreditAccount={deleteCreditAccount}
|
|
setSelectedAccount={setSelectedAccount}
|
|
creditAccountsList={creditAccountsList}
|
|
/>
|
|
)}
|
|
</div>
|
|
{isConnected && <AccountStatus createCreditAccount={createCreditAccount} />}
|
|
</div>
|
|
<Modal open={isLoadingCreate || isLoadingDelete}>
|
|
<div className='w-full p-6'>
|
|
<Text size='2xl' uppercase={true} className='mb-6 w-full text-center'>
|
|
Confirm Transaction
|
|
</Text>
|
|
<div className='flex w-full justify-center pb-6'>
|
|
<CircularProgress size={40} />
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Navigation
|