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 (
{mangoAccount ? ( <>

{mangoAccount?.name || 'Account'}

{mangoAccount.publicKey.toString()} handleCopyPublicKey(mangoAccount.publicKey)} /> {isCopied ? (
Copied!
) : null}
Explorer
) : null}
{mangoAccount ? ( !isMobile ? ( ) : ( ) ) : null}
{mangoAccount ? ( !isMobile ? ( ) : (
) ) : connected ? ( isLoading ? (
) : ( } onClickButton={() => setShowAccountsModal(true)} title="No Account Found" /> ) ) : ( } onClickButton={() => wallet.connect()} title="Connect Wallet" /> )}
{showAccountsModal ? ( ) : null} {showNameModal ? ( ) : null}
) } const TabContent = ({ activeTab }) => { switch (activeTab) { case 'Portfolio': return case 'Orders': return case 'Trade History': return default: return } }