Revert "move close delegate and edit account to top bar"

This reverts commit c101fce1ce.

components/account/AccountActions.tsx

@@ -5,9 +5,14 @@ import {
   ArrowUpLeftIcon,
   DocumentDuplicateIcon,
   EllipsisHorizontalIcon,
+  PencilIcon,
+  TrashIcon,
+  UsersIcon,
 } from '@heroicons/react/20/solid'
 import { useTranslation } from 'next-i18next'
 import IconDropMenu from '../shared/IconDropMenu'
+import CloseAccountModal from '../modals/CloseAccountModal'
+import AccountNameModal from '../modals/AccountNameModal'
 import { copyToClipboard } from 'utils'
 import { notify } from 'utils/notifications'
 import { abbreviateAddress } from 'utils/formatting'
@@ -16,6 +21,7 @@ import {
   MangoAccount,
   toUiDecimalsForQuote,
 } from '@blockworks-foundation/mango-v4'
+import DelegateModal from '@components/modals/DelegateModal'
 import useMangoAccount from 'hooks/useMangoAccount'
 import useMangoGroup from 'hooks/useMangoGroup'
 import BorrowRepayModal from '@components/modals/BorrowRepayModal'
@@ -37,8 +43,11 @@ const AccountActions = () => {
   const { t } = useTranslation(['common', 'close-account'])
   const { group } = useMangoGroup()
   const { mangoAccount } = useMangoAccount()
+  const [showCloseAccountModal, setShowCloseAccountModal] = useState(false)
+  const [showEditAccountModal, setShowEditAccountModal] = useState(false)
   const [showBorrowModal, setShowBorrowModal] = useState(false)
   const [showRepayModal, setShowRepayModal] = useState(false)
+  const [showDelegateModal, setShowDelegateModal] = useState(false)
   const [showCreateAccountModal, setShowCreateAccountModal] = useState(false)
   const { connected } = useWallet()
 
@@ -98,8 +107,41 @@ const AccountActions = () => {
             <DocumentDuplicateIcon className="h-4 w-4" />
             <span className="ml-2">{t('copy-address')}</span>
           </ActionsButton>
+          <ActionsButton
+            mangoAccount={mangoAccount!}
+            onClick={() => setShowEditAccountModal(true)}
+          >
+            <PencilIcon className="h-4 w-4" />
+            <span className="ml-2">{t('edit-account')}</span>
+          </ActionsButton>
+          <ActionsButton
+            mangoAccount={mangoAccount!}
+            onClick={() => setShowDelegateModal(true)}
+          >
+            <UsersIcon className="h-4 w-4" />
+            <span className="ml-2">{t('delegate-account')}</span>
+          </ActionsButton>
+          <ActionsButton
+            mangoAccount={mangoAccount!}
+            onClick={() => setShowCloseAccountModal(true)}
+          >
+            <TrashIcon className="h-4 w-4" />
+            <span className="ml-2">{t('close-account')}</span>
+          </ActionsButton>
         </IconDropMenu>
       </div>
+      {showCloseAccountModal ? (
+        <CloseAccountModal
+          isOpen={showCloseAccountModal}
+          onClose={() => setShowCloseAccountModal(false)}
+        />
+      ) : null}
+      {showEditAccountModal ? (
+        <AccountNameModal
+          isOpen={showEditAccountModal}
+          onClose={() => setShowEditAccountModal(false)}
+        />
+      ) : null}
       {showBorrowModal ? (
         <BorrowRepayModal
           action="borrow"
@@ -114,6 +156,12 @@ const AccountActions = () => {
           onClose={() => setShowRepayModal(false)}
         />
       ) : null}
+      {showDelegateModal ? (
+        <DelegateModal
+          isOpen={showDelegateModal}
+          onClose={() => setShowDelegateModal(false)}
+        />
+      ) : null}
       {showCreateAccountModal ? (
         <CreateAccountModal
           isOpen={showCreateAccountModal}

components/wallet/ConnectedMenu.tsx

@@ -2,9 +2,7 @@ import { Menu, Transition } from '@headlessui/react'
 import {
   ArrowRightOnRectangleIcon,
   CurrencyDollarIcon,
-  PaperAirplaneIcon,
   UserCircleIcon,
-  XCircleIcon,
 } from '@heroicons/react/20/solid'
 import { useWallet, Wallet } from '@solana/wallet-adapter-react'
 import { useTranslation } from 'next-i18next'
@@ -18,9 +16,6 @@ import { breakpoints } from '../../utils/theme'
 import EditProfileModal from '@components/modals/EditProfileModal'
 import MangoAccountsListModal from '@components/modals/MangoAccountsListModal'
 import { Wallet as AnchorWallet } from '@project-serum/anchor'
-import AccountNameModal from '@components/modals/AccountNameModal'
-import DelegateModal from '@components/modals/DelegateModal'
-import CloseAccountModal from '@components/modals/CloseAccountModal'
 
 const ConnectedMenu = () => {
   const { t } = useTranslation('common')
@@ -29,9 +24,6 @@ const ConnectedMenu = () => {
 
   const [showEditProfileModal, setShowEditProfileModal] = useState(false)
   const [showMangoAccountsModal, setShowMangoAccountsModal] = useState(false)
-  const [showEditAccountModal, setShowEditAccountModal] = useState(false)
-  const [showCloseAccountModal, setShowCloseAccountModal] = useState(false)
-  const [showDelegateModal, setShowDelegateModal] = useState(false)
 
   const set = mangoStore((s) => s.set)
   const actions = mangoStore((s) => s.actions)
@@ -132,39 +124,6 @@ const ConnectedMenu = () => {
                     </div>
                   </button>
                 </Menu.Item>
-                <Menu.Item>
-                  <button
-                    className="default-transition flex w-full flex-row items-center rounded-none py-0.5 font-normal focus:outline-none md:hover:cursor-pointer md:hover:text-th-fgd-1"
-                    onClick={() => setShowEditAccountModal(true)}
-                  >
-                    <UserCircleIcon className="h-4 w-4" />
-                    <div className="pl-2 text-left">
-                      {t('common:edit-account')}
-                    </div>
-                  </button>
-                </Menu.Item>
-                <Menu.Item>
-                  <button
-                    className="default-transition flex w-full flex-row items-center rounded-none py-0.5 font-normal focus:outline-none md:hover:cursor-pointer md:hover:text-th-fgd-1"
-                    onClick={() => setShowDelegateModal(true)}
-                  >
-                    <PaperAirplaneIcon className="h-4 w-4" />
-                    <div className="pl-2 text-left">
-                      {t('common:delegate-account')}
-                    </div>
-                  </button>
-                </Menu.Item>
-                <Menu.Item>
-                  <button
-                    className="default-transition flex w-full flex-row items-center rounded-none py-0.5 font-normal focus:outline-none md:hover:cursor-pointer md:hover:text-th-fgd-1"
-                    onClick={() => setShowCloseAccountModal(true)}
-                  >
-                    <XCircleIcon className="h-4 w-4" />
-                    <div className="pl-2 text-left">
-                      {t('common:close-account')}
-                    </div>
-                  </button>
-                </Menu.Item>
                 {isMobile ? (
                   <Menu.Item>
                     <button
@@ -221,24 +180,6 @@ const ConnectedMenu = () => {
           onClose={() => setShowMangoAccountsModal(false)}
         />
       ) : null}
-      {showEditAccountModal ? (
-        <AccountNameModal
-          isOpen={showEditAccountModal}
-          onClose={() => setShowEditAccountModal(false)}
-        />
-      ) : null}
-      {showCloseAccountModal ? (
-        <CloseAccountModal
-          isOpen={showCloseAccountModal}
-          onClose={() => setShowCloseAccountModal(false)}
-        />
-      ) : null}
-      {showDelegateModal ? (
-        <DelegateModal
-          isOpen={showDelegateModal}
-          onClose={() => setShowDelegateModal(false)}
-        />
-      ) : null}
     </>
   )
 }