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 ( <>