create modal for close unused account slots

components/modals/CloseUnusedAccountSlots.tsx

@@ -0,0 +1,261 @@
+import { ModalProps } from '../../types/modal'
+import Modal from '../shared/Modal'
+import mangoStore from '@store/mangoStore'
+import { useTranslation } from 'next-i18next'
+import { ChevronDownIcon } from '@heroicons/react/20/solid'
+import useMangoAccountAccounts, {
+  getAvaialableAccountsColor,
+} from 'hooks/useMangoAccountAccounts'
+import { notify } from 'utils/notifications'
+import { isMangoError } from 'types'
+import { PublicKey, TransactionInstruction } from '@solana/web3.js'
+import Button from '@components/shared/Button'
+import Tooltip from '@components/shared/Tooltip'
+import { MAX_ACCOUNTS } from 'utils/constants'
+import MarketLogos from '@components/trade/MarketLogos'
+import useMangoGroup from 'hooks/useMangoGroup'
+import { Disclosure } from '@headlessui/react'
+
+enum CLOSE_TYPE {
+  TOKEN,
+  PERP,
+  SERUMOO,
+  PERPOO,
+}
+
+const CloseUnusedAccountSlotsModal = ({ isOpen, onClose }: ModalProps) => {
+  const { t } = useTranslation(['common', 'settings'])
+  const { group } = useMangoGroup()
+  const {
+    // emptyTokens,
+    emptySerum3,
+    emptyPerps,
+    // emptyPerpOo,
+    // totalTokens,
+    totalSerum3,
+    totalPerps,
+    // totalPerpOpenOrders,
+  } = useMangoAccountAccounts()
+
+  const handleCloseSlots = async (closeType: CLOSE_TYPE) => {
+    const client = mangoStore.getState().client
+    const group = mangoStore.getState().group
+    const mangoAccount = mangoStore.getState().mangoAccount.current
+    const actions = mangoStore.getState().actions
+    if (!mangoAccount || !group) return
+    try {
+      let ixs: TransactionInstruction[] = []
+      if (closeType == CLOSE_TYPE.TOKEN) {
+        // No instruction yet
+      } else if (closeType === CLOSE_TYPE.PERP) {
+        ixs = await Promise.all(
+          emptyPerps.map((p) =>
+            client.perpDeactivatePositionIx(group, mangoAccount, p.marketIndex),
+          ),
+        )
+      } else if (closeType === CLOSE_TYPE.SERUMOO) {
+        ixs = await Promise.all(
+          emptySerum3.map((s) =>
+            client.serum3CloseOpenOrdersIx(
+              group,
+              mangoAccount,
+              new PublicKey(s),
+            ),
+          ),
+        )
+      } else if (closeType === CLOSE_TYPE.PERPOO) {
+        // No instruction yet
+      }
+
+      if (ixs.length === 0) return
+      const tx = await client.sendAndConfirmTransaction(ixs)
+
+      notify({
+        title: 'Transaction confirmed',
+        type: 'success',
+        txid: tx.signature,
+      })
+      await actions.reloadMangoAccount()
+    } catch (e) {
+      console.error(e)
+      if (!isMangoError(e)) return
+      notify({
+        title: 'Transaction failed',
+        description: e.message,
+        txid: e?.txid,
+        type: 'error',
+      })
+    }
+  }
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <>
+        <h2 className="mb-2 text-center">{t('settings:close-unused-slots')}</h2>
+        <p className="mb-4 text-center text-xs">
+          {t('settings:close-unused-slots-desc')}
+        </p>
+        {/* <Tooltip content={{t('settings:close-token-desc')}}>
+          <Button
+            className="mb-4 mt-6 flex w-full items-center justify-center"
+            disabled={emptyTokens.length === 0}
+            onClick={() => handleCloseSlots(CLOSE_TYPE.TOKEN)}
+        > 
+            <span className="ml-2">{{t('settings:spot-close-token')}}</span>
+        </Button>
+          </Tooltip> */}
+        <Disclosure>
+          {({ open }) => (
+            <>
+              <Disclosure.Button className="w-full border-t border-th-bkg-3 py-4 md:px-4">
+                <div className="flex items-center justify-between">
+                  <Tooltip
+                    content={t('settings:tooltip-spot-open-orders', {
+                      max: MAX_ACCOUNTS.spotOpenOrders,
+                    })}
+                  >
+                    <p className="tooltip-underline mb-2 md:mb-0">
+                      {t('settings:spot-open-orders')}
+                    </p>
+                  </Tooltip>
+                  <div className="flex items-center space-x-2">
+                    <p className="font-mono">
+                      <span
+                        className={getAvaialableAccountsColor(
+                          emptySerum3.length,
+                          totalSerum3.length,
+                        )}
+                        key="spotOpenOrders"
+                      >{`${emptySerum3.length}/${totalSerum3.length}`}</span>
+                    </p>
+                    <ChevronDownIcon
+                      className={`${
+                        open ? 'rotate-180' : 'rotate-360'
+                      } h-6 w-6 flex-shrink-0 text-th-fgd-3`}
+                    />
+                  </div>
+                </div>
+              </Disclosure.Button>
+              <Disclosure.Panel className="pb-2 md:px-4">
+                {emptySerum3.length && group ? (
+                  emptySerum3.map((mkt, i) => {
+                    const market = group.getSerum3MarketByMarketIndex(
+                      mkt.marketIndex,
+                    )
+                    return (
+                      <div
+                        className="mb-2 flex items-center"
+                        key={mkt.marketIndex}
+                      >
+                        <p className="mr-3 text-th-fgd-4">{i + 1}.</p>
+                        <MarketLogos market={market} />
+                        <p className="text-th-fgd-2">{market.name}</p>
+                      </div>
+                    )
+                  })
+                ) : (
+                  <p className="mb-2 text-center">
+                    {t('notifications:empty-state-title')}...
+                  </p>
+                )}
+                {emptySerum3.length > 0 ? (
+                  <Tooltip content={t('settings:close-spot-oo-desc')}>
+                    <Button
+                      className="mb-4 mt-6 flex w-full items-center justify-center"
+                      disabled={emptySerum3.length === 0}
+                      onClick={() => handleCloseSlots(CLOSE_TYPE.SERUMOO)}
+                    >
+                      <span className="ml-2">
+                        {t('settings:close-spot-oo')}
+                      </span>
+                    </Button>
+                  </Tooltip>
+                ) : null}
+              </Disclosure.Panel>
+            </>
+          )}
+        </Disclosure>
+        <Disclosure>
+          {({ open }) => (
+            <>
+              <Disclosure.Button className="w-full border-t border-th-bkg-3 py-4 md:px-4">
+                <div className="flex items-center justify-between">
+                  <Tooltip
+                    content={t('settings:tooltip-perp-positions', {
+                      max: MAX_ACCOUNTS.perpAccounts,
+                    })}
+                  >
+                    <p className="tooltip-underline mb-2 md:mb-0">
+                      {t('settings:perp-positions')}
+                    </p>
+                  </Tooltip>
+                  <div className="flex items-center space-x-2">
+                    <p className="font-mono">
+                      <span
+                        className={getAvaialableAccountsColor(
+                          emptyPerps.length,
+                          totalPerps.length,
+                        )}
+                        key="perps"
+                      >{`${emptyPerps.length}/${totalPerps.length}`}</span>
+                    </p>
+                    <ChevronDownIcon
+                      className={`${
+                        open ? 'rotate-180' : 'rotate-360'
+                      } h-6 w-6 flex-shrink-0 text-th-fgd-3`}
+                    />
+                  </div>
+                </div>
+              </Disclosure.Button>
+              <Disclosure.Panel className="pb-2 md:px-4">
+                {emptyPerps.length && group ? (
+                  emptyPerps.map((perp, i) => {
+                    const market = group.getPerpMarketByMarketIndex(
+                      perp.marketIndex,
+                    )
+                    return (
+                      <div
+                        className="mb-2 flex items-center"
+                        key={perp.marketIndex}
+                      >
+                        <p className="mr-3 text-th-fgd-4">{i + 1}.</p>
+                        <MarketLogos market={market} />
+                        <p className="text-th-fgd-2">{market.name}</p>
+                      </div>
+                    )
+                  })
+                ) : (
+                  <p className="mb-2 text-center">
+                    {t('notifications:empty-state-title')}...
+                  </p>
+                )}
+                {emptyPerps.length > 0 ? (
+                  <Tooltip content={t('settings:close-perp-desc')}>
+                    <Button
+                      className="mb-4 mt-6 flex w-full items-center justify-center"
+                      disabled={emptyPerps.length === 0}
+                      onClick={() => handleCloseSlots(CLOSE_TYPE.PERP)}
+                    >
+                      <span className="ml-2">{t('settings:close-perp')}</span>
+                    </Button>
+                  </Tooltip>
+                ) : null}
+              </Disclosure.Panel>
+            </>
+          )}
+        </Disclosure>
+        {/* <Tooltip content={{t('settings:close-perp-desc')}}>
+          <Button
+            className="mb-4 mt-6 flex w-full items-center justify-center"
+            disabled={emptyTokens.length === 0}
+            onClick={() => handleCloseSlots(CLOSE_TYPE.TOKEN)}
+        > 
+            <span className="ml-2">{{t('settings:spot-close-token')}}</span>
+        </Button>
+          </Tooltip> */}
+      </>
+    </Modal>
+  )
+}
+
+export default CloseUnusedAccountSlotsModal

components/settings/AccountSettings.tsx

@@ -1,40 +1,33 @@
 import MangoAccountSizeModal from '@components/modals/MangoAccountSizeModal'
-import ActionsLinkButton from '@components/account/ActionsLinkButton'
 import { LinkButton } from '@components/shared/Button'
 import TokenLogo from '@components/shared/TokenLogo'
 import Tooltip from '@components/shared/Tooltip'
 import MarketLogos from '@components/trade/MarketLogos'
-import { Disclosure, Popover, Transition } from '@headlessui/react'
+import { Disclosure } from '@headlessui/react'
 import {
   ChevronDownIcon,
   MinusCircleIcon,
   SquaresPlusIcon,
 } from '@heroicons/react/20/solid'
-import { PublicKey, TransactionInstruction } from '@solana/web3.js'
-import mangoStore from '@store/mangoStore'
 import useMangoAccount from 'hooks/useMangoAccount'
 import useMangoAccountAccounts, {
   getAvaialableAccountsColor,
 } from 'hooks/useMangoAccountAccounts'
 import useMangoGroup from 'hooks/useMangoGroup'
 import { useTranslation } from 'next-i18next'
-import { Fragment, useState } from 'react'
+import { useState } from 'react'
 import { MAX_ACCOUNTS } from 'utils/constants'
-import { isMangoError } from 'types'
-import { notify } from 'utils/notifications'
-
-enum CLOSE_TYPE {
-  TOKEN,
-  PERP,
-  SERUMOO,
-  PERPOO,
-}
+import CloseUnusedAccountSlotsModal from '@components/modals/CloseUnusedAccountSlots'
 
 const AccountSettings = () => {
   const { t } = useTranslation(['common', 'settings'])
-  const { mangoAccountAddress, mangoAccount } = useMangoAccount()
+  const { mangoAccountAddress } = useMangoAccount()
   const { group } = useMangoGroup()
   const [showAccountSizeModal, setShowAccountSizeModal] = useState(false)
+  const [
+    showCloseUnusedAccountSlotsModal,
+    setShowCloseUnusedAccountSlotsModal,
+  ] = useState(false)
   const {
     usedTokens,
     usedSerum3,
@@ -51,57 +44,6 @@ const AccountSettings = () => {
     isAccountFull,
   } = useMangoAccountAccounts()
 
-  const handleCloseSlots = async (closeType: CLOSE_TYPE) => {
-    const client = mangoStore.getState().client
-    const group = mangoStore.getState().group
-    const mangoAccount = mangoStore.getState().mangoAccount.current
-    const actions = mangoStore.getState().actions
-    if (!mangoAccount || !group) return
-    try {
-      let ixs: TransactionInstruction[] = []
-      if (closeType == CLOSE_TYPE.TOKEN) {
-        // No instruction yet
-      } else if (closeType === CLOSE_TYPE.PERP) {
-        ixs = await Promise.all(
-          emptyPerps.map((p) =>
-            client.perpDeactivatePositionIx(group, mangoAccount, p.marketIndex),
-          ),
-        )
-      } else if (closeType === CLOSE_TYPE.SERUMOO) {
-        ixs = await Promise.all(
-          emptySerum3.map((s) =>
-            client.serum3CloseOpenOrdersIx(
-              group,
-              mangoAccount,
-              new PublicKey(s),
-            ),
-          ),
-        )
-      } else if (closeType === CLOSE_TYPE.PERPOO) {
-        // No instruction yet
-      }
-
-      if (ixs.length === 0) return
-      const tx = await client.sendAndConfirmTransaction(ixs)
-
-      notify({
-        title: 'Transaction confirmed',
-        type: 'success',
-        txid: tx.signature,
-      })
-      await actions.reloadMangoAccount()
-    } catch (e) {
-      console.error(e)
-      if (!isMangoError(e)) return
-      notify({
-        title: 'Transaction failed',
-        description: e.message,
-        txid: e?.txid,
-        type: 'error',
-      })
-    }
-  }
-
   return mangoAccountAddress && group ? (
     <>
       <h2 className="mb-4 text-base">{t('account')}</h2>
@@ -117,65 +59,13 @@ const AccountSettings = () => {
           </LinkButton>
         ) : null}
         {emptySerum3.length > 0 || emptyPerps.length > 0 ? (
-          <Popover className="relative sm:w-1/3 md:w-auto">
-            {({ open }) => (
-              <>
-                <Popover.Button
-                  className={`w-full focus:outline-none`}
-                  as="div"
-                >
-                  <LinkButton className="flex items-center">
-                    <MinusCircleIcon className="mr-1.5 h-4 w-4" />
-                    {t('settings:close-unused-slots')}
-                  </LinkButton>
-                </Popover.Button>
-                <Transition
-                  appear={true}
-                  show={open}
-                  as={Fragment}
-                  enter="transition ease-in duration-75"
-                  enterFrom="opacity-0 nice scale-75"
-                  enterTo="opacity-100 scale-100"
-                  leave="transition ease-out duration-100"
-                  leaveFrom="opacity-100"
-                  leaveTo="opacity-0"
-                >
-                  <Popover.Panel className="absolute right-0 top-10 mt-1 space-y-2 rounded-md bg-th-bkg-2 px-4 py-2.5">
-                    {/* <ActionsLinkButton
-                      disabled={emptyTokens.length === 0}
-                      mangoAccount={mangoAccount!}
-                      onClick={() => console.log('handle close tokens')}
-                    >
-                      <span className="ml-2">{'Close unused token positions'}</span>
-                    </ActionsLinkButton> */}
-                    <ActionsLinkButton
-                      disabled={emptySerum3.length === 0}
-                      mangoAccount={mangoAccount!}
-                      onClick={() => handleCloseSlots(CLOSE_TYPE.SERUMOO)}
-                    >
-                      <span className="ml-2">
-                        {t('settings:close-spot-oo')}
-                      </span>
-                    </ActionsLinkButton>
-                    <ActionsLinkButton
-                      disabled={emptyPerps.length === 0}
-                      mangoAccount={mangoAccount!}
-                      onClick={() => handleCloseSlots(CLOSE_TYPE.PERP)}
-                    >
-                      <span className="ml-2">{t('settings:close-perp')}</span>
-                    </ActionsLinkButton>
-                    {/* <ActionsLinkButton
-                      disabled={emptyPerpOo.length === 0}
-                      mangoAccount={mangoAccount!}
-                      onClick={() => console.log('close perp oos')}
-                    >
-                      <span className="ml-2">{'Close unused perp OOs'}</span>
-                    </ActionsLinkButton> */}
-                  </Popover.Panel>
-                </Transition>
-              </>
-            )}
-          </Popover>
+          <LinkButton
+            className="flex items-center"
+            onClick={() => setShowCloseUnusedAccountSlotsModal(true)}
+          >
+            <MinusCircleIcon className="mr-1.5 h-4 w-4" />
+            {t('settings:close-unused-slots')}
+          </LinkButton>
         ) : null}
       </div>
       <Disclosure>
@@ -424,6 +314,12 @@ const AccountSettings = () => {
           onClose={() => setShowAccountSizeModal(false)}
         />
       ) : null}
+      {showCloseUnusedAccountSlotsModal ? (
+        <CloseUnusedAccountSlotsModal
+          isOpen={showCloseUnusedAccountSlotsModal}
+          onClose={() => setShowCloseUnusedAccountSlotsModal(false)}
+        />
+      ) : null}
     </>
   ) : null
 }

hooks/useMangoAccountAccounts.ts

@@ -96,14 +96,17 @@ export default function useMangoAccountAccounts() {
       .map((s) => mangoAccount.serum3OosMapByMarketIndex.get(s.marketIndex))
       .filter((o) => o !== undefined) as OpenOrders[]
     const maxFreeSlotBits = new BN(2).pow(new BN(128)).sub(new BN(1)) // 2^128 - 1
-    const emptySerum3 = usedOpenOrders
+    const emptySerum3Keys = usedOpenOrders
       .filter(
         (o) =>
           o.baseTokenTotal.isZero() &&
           o.quoteTokenTotal.isZero() &&
           o.freeSlotBits.eq(maxFreeSlotBits),
       )
-      .map((f) => f.market)
+      .map((f) => f.address)
+    const emptySerum3 = usedSerum3.filter((s) =>
+      emptySerum3Keys.includes(s.openOrders),
+    )
 
     return [
       usedTokens,

public/locales/en/settings.json

@@ -20,8 +20,11 @@
     "chinese": "简体中文",
     "chinese-traditional": "繁體中文",
     "close-unused-slots": "Close Unused Slots",
-    "close-spot-oo": "Close Spot Open Orders",
+    "close-unused-slots-desc": "Closing unused slots will refund SOL to your account. Each slot type has different requirements for closure (hover over the buttons for details)",
+    "close-spot-oo": "Close Spot Open Orders",    
+    "close-spot-oo-desc": "To close a spot open orders account make sure that there are no outstanding orders and all funds are settled",
     "close-perp": "Close Perp Positions",
+    "close-perp-desc": "To close a perp position make sure that all positions are closed, there are no outstanding orders and all funding has been settled",
     "connect-notifications": "Connect to update your notification settings",
     "custom": "Custom",
     "dark": "Dark",

public/locales/es/settings.json

@@ -20,8 +20,10 @@
     "chinese": "简体中文",
     "chinese-traditional": "繁體中文",
     "close-unused-slots": "Close Unused Slots",
-    "close-spot-oo": "Close Spot Open Orders",
+    "close-spot-oo": "Close Spot Open Orders",    
+    "close-spot-oo-desc": "To close a spot open orders account make sure that there are no outstanding orders and all funds are settled",
     "close-perp": "Close Perp Positions",
+    "close-perp-desc": "To close a perp position make sure that all positions are closed, there are no outstanding orders and all funding has been settled",
     "connect-notifications": "Connect to update your notification settings",
     "custom": "Custom",
     "dark": "Dark",

public/locales/ru/settings.json

@@ -20,8 +20,10 @@
     "chinese": "简体中文",
     "chinese-traditional": "繁體中文",
     "close-unused-slots": "Close Unused Slots",
-    "close-spot-oo": "Close Spot Open Orders",
+    "close-spot-oo": "Close Spot Open Orders",    
+    "close-spot-oo-desc": "To close a spot open orders account make sure that there are no outstanding orders and all funds are settled",
     "close-perp": "Close Perp Positions",
+    "close-perp-desc": "To close a perp position make sure that all positions are closed, there are no outstanding orders and all funding has been settled",
     "connect-notifications": "Connect to update your notification settings",
     "custom": "Custom",
     "dark": "Dark",

public/locales/zh/settings.json

@@ -20,8 +20,10 @@
     "chinese": "简体中文",
     "chinese-traditional": "繁體中文",
     "close-unused-slots": "Close Unused Slots",
-    "close-spot-oo": "Close Spot Open Orders",
+    "close-spot-oo": "Close Spot Open Orders",    
+    "close-spot-oo-desc": "To close a spot open orders account make sure that there are no outstanding orders and all funds are settled",
     "close-perp": "Close Perp Positions",
+    "close-perp-desc": "To close a perp position make sure that all positions are closed, there are no outstanding orders and all funding has been settled",
     "connect-notifications": "Connect to update your notification settings",
     "custom": "自定",
     "dark": "暗",

public/locales/zh_tw/settings.json

@@ -20,8 +20,10 @@
     "chinese": "简体中文",
     "chinese-traditional": "繁體中文",
     "close-unused-slots": "Close Unused Slots",
-    "close-spot-oo": "Close Spot Open Orders",
+    "close-spot-oo": "Close Spot Open Orders",    
+    "close-spot-oo-desc": "To close a spot open orders account make sure that there are no outstanding orders and all funds are settled",
     "close-perp": "Close Perp Positions",
+    "close-perp-desc": "To close a perp position make sure that all positions are closed, there are no outstanding orders and all funding has been settled",
     "connect-notifications": "連接錢包來切換通知設定",
     "custom": "自定",
     "dark": "暗",