add close account modal

components/account/AccountActions.tsx

@@ -1,17 +1,18 @@
 import { useWallet } from '@solana/wallet-adapter-react'
-import { Fragment, useState } from 'react'
+import { useState } from 'react'
 import Button, { LinkButton } from '../shared/Button'
 import DepositModal from '../modals/DepositModal'
 import WithdrawModal from '../modals/WithdrawModal'
 import mangoStore from '../../store/state'
-import { Popover, Transition } from '@headlessui/react'
 import { DotsHorizontalIcon, TrashIcon, XIcon } from '@heroicons/react/solid'
 import { useTranslation } from 'next-i18next'
 import IconDropMenu from '../shared/IconDropMenu'
+import CloseAccountModal from '../modals/CloseAccountModal'
 
 const AccountActions = () => {
   const { t } = useTranslation(['common', 'close-account'])
   const { connected } = useWallet()
+  const [showCloseAccountModal, setShowCloseAccountModal] = useState(false)
   const [showDepositModal, setShowDepositModal] = useState(false)
   const [showWithdrawModal, setShowWithdrawModal] = useState(false)
 
@@ -50,14 +51,19 @@ const AccountActions = () => {
           <LinkButton
             className="flex items-center whitespace-nowrap"
             disabled={!connected}
-            onClick={handleCloseMangoAccount}
+            onClick={() => setShowCloseAccountModal(true)}
           >
             <TrashIcon className="mr-2 h-5 w-5" />
             {t('close-account')}
           </LinkButton>
         </IconDropMenu>
       </div>
-
+      {showCloseAccountModal ? (
+        <CloseAccountModal
+          isOpen={showCloseAccountModal}
+          onClose={() => setShowCloseAccountModal(false)}
+        />
+      ) : null}
       {showDepositModal ? (
         <DepositModal
           isOpen={showDepositModal}

components/modals/CloseAccountModal.tsx

@@ -0,0 +1,65 @@
+import { ModalProps } from '../../types/modal'
+import Modal from '../shared/Modal'
+import mangoStore from '../../store/state'
+import { notify } from '../../utils/notifications'
+import { useWallet } from '@solana/wallet-adapter-react'
+import Button from '../shared/Button'
+import { useTranslation } from 'next-i18next'
+import { useState } from 'react'
+import BounceLoader from '../shared/BounceLoader'
+
+const CloseAccountModal = ({ isOpen, onClose }: ModalProps) => {
+  const { t } = useTranslation('common')
+  const { disconnect } = useWallet()
+  const [loading, setLoading] = useState(false)
+
+  const handleCloseMangoAccount = async () => {
+    const client = mangoStore.getState().client
+    const mangoAccount = mangoStore.getState().mangoAccount.current
+    const group = mangoStore.getState().group
+    if (!mangoAccount || !group) return
+    setLoading(true)
+    try {
+      const tx = await client.closeMangoAccount(group, mangoAccount)
+      if (tx) {
+        disconnect()
+        setLoading(false)
+        onClose()
+        notify({
+          title: t('account-closed'),
+          type: 'success',
+          txid: tx,
+        })
+      }
+    } catch (e) {
+      setLoading(false)
+      console.log(e)
+    }
+  }
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <div className="h-56">
+        {loading ? (
+          <BounceLoader loadingMessage={t('closing-account')} />
+        ) : (
+          <div className="flex h-full flex-col justify-between">
+            <div className="pb-6">
+              <h2 className="mb-1">{t('close-account')}</h2>
+              <p>Are you sure? Closing your account is irreversible.</p>
+            </div>
+            <Button
+              className="w-full"
+              onClick={handleCloseMangoAccount}
+              size="large"
+            >
+              {t('close-account')}
+            </Button>
+          </div>
+        )}
+      </div>
+    </Modal>
+  )
+}
+
+export default CloseAccountModal

components/modals/IntroModal.tsx

@@ -1,12 +0,0 @@
-import { ModalProps } from '../../types/modal'
-import Modal from '../shared/Modal'
-
-const IntroModal = ({ isOpen, onClose }: ModalProps) => {
-  return (
-    <Modal isOpen={isOpen} onClose={onClose}>
-      <div>Hi</div>
-    </Modal>
-  )
-}
-
-export default IntroModal

components/modals/UserSetupModal.tsx

@@ -18,6 +18,7 @@ import { IS_ONBOARDED_KEY } from '../Layout'
 import DepositTokenList from '../shared/DepositTokenList'
 import { EnterRightExitLeft } from '../shared/Transitions'
 import Image from 'next/image'
+import BounceLoader from '../shared/BounceLoader'
 
 const UserSetupModal = ({ isOpen, onClose }: ModalProps) => {
   const { t } = useTranslation()
@@ -130,12 +131,7 @@ const UserSetupModal = ({ isOpen, onClose }: ModalProps) => {
         >
           {mangoAccountLoading ? (
             <div className="flex h-full items-center justify-center">
-              <div className="flex flex-col items-center">
-                <div className="animate-bounce">
-                  <Image src="/icons/mngo.svg" alt="" width="32" height="32" />
-                </div>
-                <p className="text-center">Loading message...</p>
-              </div>
+              <BounceLoader />
             </div>
           ) : (
             <div className="flex h-full flex-col justify-between">

components/shared/BounceLoader.tsx

@@ -0,0 +1,12 @@
+import Image from 'next/image'
+
+const BounceLoader = ({ loadingMessage }: { loadingMessage?: string }) => (
+  <div className="flex h-full flex-col items-center justify-center">
+    <div className="animate-bounce">
+      <Image src="/icons/mngo.svg" alt="" width="32" height="32" />
+    </div>
+    {loadingMessage ? <p className="text-center">{loadingMessage}</p> : null}
+  </div>
+)
+
+export default BounceLoader

public/locales/en/common.json

@@ -1,4 +1,5 @@
 {
+  "account-closed": "Account Closed 👋",
   "account-value": "Account Value",
   "available": "Available",
   "available-balance": "Available Balance",
@@ -9,6 +10,7 @@
   "chinese": "简体中文",
   "chinese-traditional": "繁體中文",
   "close-account": "Close Account",
+  "closing-account": "Closing your account...",
   "collateral-multiplier": "Collateral Multiplier",
   "collateral-multiplier-desc": "Each token on Mango has a multiplier used to calculate the collateral value of that token. The higher the multiplier, the more collateral you get.",
   "collateral-value": "Collateral Value",

public/locales/es/common.json

@@ -1,4 +1,5 @@
 {
+  "account-closed": "Account Closed 👋",
   "account-value": "Account Value",
   "available": "Available",
   "available-balance": "Available Balance",
@@ -9,6 +10,7 @@
   "chinese": "简体中文",
   "chinese-traditional": "繁體中文",
   "close-account": "Close Account",
+  "closing-account": "Closing your account...",
   "collateral-multiplier": "Collateral Multiplier",
   "collateral-multiplier-desc": "Each token on Mango has a multiplier used to calculate the collateral value of that token. The higher the multiplier, the more collateral you get.",
   "collateral-value": "Collateral Value",

public/locales/zh/common.json

@@ -1,4 +1,5 @@
 {
+  "account-closed": "Account Closed 👋",
   "account-value": "Account Value",
   "available": "Available",
   "available-balance": "Available Balance",
@@ -9,6 +10,7 @@
   "chinese": "简体中文",
   "chinese-traditional": "繁體中文",
   "close-account": "Close Account",
+  "closing-account": "Closing your account...",
   "collateral-multiplier": "Collateral Multiplier",
   "collateral-multiplier-desc": "Each token on Mango has a multiplier used to calculate the collateral value of that token. The higher the multiplier, the more collateral you get.",
   "collateral-value": "Collateral Value",

public/locales/zh_tw/common.json

@@ -1,4 +1,5 @@
 {
+  "account-closed": "Account Closed 👋",
   "account-value": "Account Value",
   "available": "Available",
   "available-balance": "Available Balance",
@@ -9,6 +10,7 @@
   "chinese": "简体中文",
   "chinese-traditional": "繁體中文",
   "close-account": "Close Account",
+  "closing-account": "Closing your account...",
   "collateral-multiplier": "Collateral Multiplier",
   "collateral-multiplier-desc": "Each token on Mango has a multiplier used to calculate the collateral value of that token. The higher the multiplier, the more collateral you get.",
   "collateral-value": "Collateral Value",

store/state.ts

@@ -149,7 +149,7 @@ const mangoStore = create<MangoStore>(
               group,
               wallet.publicKey,
               0,
-              'Main Account'
+              'Account'
             )
 
             // let orders = await client.getSerum3Orders(