import SideNav from './SideNav' import { breakpoints } from '../components/TradePageGrid' import { useViewport } from 'hooks/useViewport' import BottomBar from './mobile/BottomBar' import { ConnectWalletButton } from './ConnectWalletButton' import GlobalNotification from './GlobalNotification' import useMangoAccount from 'hooks/useMangoAccount' import { abbreviateAddress } from 'utils' import { useCallback, useEffect, useState } from 'react' import AccountsModal from './AccountsModal' import { useRouter } from 'next/router' import FavoritesShortcutBar from './FavoritesShortcutBar' import { ArrowRightIcon, ChevronRightIcon, CogIcon, ExclamationCircleIcon, UsersIcon, } from '@heroicons/react/solid' import Button, { IconButton } from './Button' import SettingsModal from './SettingsModal' import { useTranslation } from 'next-i18next' import { useWallet } from '@solana/wallet-adapter-react' import DepositModal from './DepositModal' import WithdrawModal from './WithdrawModal' import Tooltip from './Tooltip' const Layout = ({ children }) => { const { t } = useTranslation(['common', 'delegate']) const { connected, publicKey } = useWallet() const { mangoAccount, initialLoad } = useMangoAccount() const [showSettingsModal, setShowSettingsModal] = useState(false) const [showAccountsModal, setShowAccountsModal] = useState(false) const [showDepositModal, setShowDepositModal] = useState(false) const [showWithdrawModal, setShowWithdrawModal] = useState(false) const [isCollapsed, setIsCollapsed] = useState(false) const { width } = useViewport() const isMobile = width ? width < breakpoints.sm : false const router = useRouter() const { pathname } = router const { pubkey } = router.query const canWithdraw = mangoAccount?.owner && publicKey ? mangoAccount?.owner?.equals(publicKey) : false useEffect(() => { const collapsed = width ? width <= breakpoints.xl : false setIsCollapsed(collapsed) }, []) const handleCloseAccounts = useCallback(() => { setShowAccountsModal(false) }, []) const handleToggleSidebar = () => { setIsCollapsed(!isCollapsed) setTimeout(() => { window.dispatchEvent(new Event('resize')) }, 100) } return (