import { useState } from 'react' import { ArrowLeftIcon, ArrowRightIcon, EyeIcon, } from '@heroicons/react/20/solid' import { useWallet } from '@solana/wallet-adapter-react' import { useTranslation } from 'next-i18next' import WalletIcon from './icons/WalletIcon' import Button, { IconButton } from './shared/Button' import ConnectedMenu from './wallet/ConnectedMenu' import { ConnectWalletButton } from './wallet/ConnectWalletButton' import CreateAccountModal from './modals/CreateAccountModal' import { useRouter } from 'next/router' import SolanaTps from './SolanaTps' import useMangoAccount from 'hooks/useMangoAccount' import { abbreviateAddress } from 'utils/formatting' import DepositWithdrawModal from './modals/DepositWithdrawModal' import { useViewport } from 'hooks/useViewport' import { breakpoints } from 'utils/theme' import AccountsButton from './AccountsButton' import useUnownedAccount from 'hooks/useUnownedAccount' const TopBar = () => { const { t } = useTranslation('common') const { mangoAccount } = useMangoAccount() const { connected } = useWallet() const [action, setAction] = useState<'deposit' | 'withdraw'>('deposit') const [showDepositWithdrawModal, setShowDepositWithdrawModal] = useState(false) const [showCreateAccountModal, setShowCreateAccountModal] = useState(false) const router = useRouter() const { query } = router const { width } = useViewport() const isMobile = width ? width < breakpoints.sm : false const { isUnownedAccount } = useUnownedAccount() const handleDepositWithdrawModal = (action: 'deposit' | 'withdraw') => { if (!connected || mangoAccount) { setAction(action) setShowDepositWithdrawModal(true) } else { setShowCreateAccountModal(true) } } return ( <>
{query.token ? (
router.back()} hideBg size="small">
) : null} {connected ? (
) : null} next {!connected ? ( mangoAccount ? ( {t('unowned-helper', { accountPk: abbreviateAddress(mangoAccount.publicKey), })} ) : ( {t('connect-helper')} ) ) : null}
{isUnownedAccount || (!connected && isMobile) ? null : ( )} {connected ? (
) : ( )}
{showDepositWithdrawModal ? ( setShowDepositWithdrawModal(false)} /> ) : null} {showCreateAccountModal ? ( setShowCreateAccountModal(false)} /> ) : null} ) } export default TopBar