import { useCallback, useEffect, useState } from 'react' import { CurrencyDollarIcon, DuplicateIcon, ExternalLinkIcon, LinkIcon, PencilIcon, } from '@heroicons/react/outline' import useMangoStore from '../stores/useMangoStore' import { copyToClipboard } from '../utils' import PageBodyContainer from '../components/PageBodyContainer' import TopBar from '../components/TopBar' import AccountOrders from '../components/account-page/AccountOrders' import AccountHistory from '../components/account-page/AccountHistory' import AccountsModal from '../components/AccountsModal' import AccountOverview from '../components/account-page/AccountOverview' import AccountNameModal from '../components/AccountNameModal' import Button from '../components/Button' import EmptyState from '../components/EmptyState' import Loading from '../components/Loading' import SwipeableTabs from '../components/mobile/SwipeableTabs' import Swipeable from '../components/mobile/Swipeable' import Tabs from '../components/Tabs' import { useViewport } from '../hooks/useViewport' import { breakpoints } from '../components/TradePageGrid' const TABS = [ 'Portfolio', // 'Assets', // 'Borrows', // 'Stats', // 'Positions', 'Orders', 'Trade History', ] export default function Account() { const [showAccountsModal, setShowAccountsModal] = useState(false) const [showNameModal, setShowNameModal] = useState(false) const [isCopied, setIsCopied] = useState(false) const connected = useMangoStore((s) => s.wallet.connected) const mangoAccount = useMangoStore((s) => s.selectedMangoAccount.current) const wallet = useMangoStore((s) => s.wallet.current) const isLoading = useMangoStore((s) => s.selectedMangoAccount.initialLoad) const [viewIndex, setViewIndex] = useState(0) const [activeTab, setActiveTab] = useState(TABS[0]) const { width } = useViewport() const isMobile = width ? width < breakpoints.sm : false const handleCloseAccounts = useCallback(() => { setShowAccountsModal(false) }, []) const handleCopyPublicKey = (code) => { setIsCopied(true) copyToClipboard(code) } const handleCloseNameModal = useCallback(() => { setShowNameModal(false) }, []) useEffect(() => { if (isCopied) { const timer = setTimeout(() => { setIsCopied(false) }, 1500) return () => clearTimeout(timer) } }, [isCopied]) const handleChangeViewIndex = (index) => { setViewIndex(index) } const handleTabChange = (tabName) => { setActiveTab(tabName) } return (