add close account modal
This commit is contained in:
parent
7c49882fcc
commit
04a6722ef1
|
@ -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}
|
||||
|
|
|
@ -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
|
|
@ -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
|
|
@ -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">
|
||||
|
|
|
@ -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
|
|
@ -1,53 +1,55 @@
|
|||
{
|
||||
"account-value": "Account Value",
|
||||
"available": "Available",
|
||||
"available-balance": "Available Balance",
|
||||
"balance": "Balance",
|
||||
"borrow": "Borrow",
|
||||
"borrow-value": "Borrow Value",
|
||||
"buy": "Buy",
|
||||
"chinese": "简体中文",
|
||||
"chinese-traditional": "繁體中文",
|
||||
"close-account": "Close 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",
|
||||
"connect": "Connect",
|
||||
"connect-helper": "Connect to get started",
|
||||
"daily-volume": "24h Volume",
|
||||
"deposit": "Deposit",
|
||||
"deposit-value": "Deposit Value",
|
||||
"disconnect": "Disconnect",
|
||||
"english": "English",
|
||||
"fee": "Fee",
|
||||
"fees": "Fees",
|
||||
"governance": "Governance",
|
||||
"health-impact": "Health Impact",
|
||||
"language": "Language",
|
||||
"learn": "Learn",
|
||||
"leverage": "Leverage",
|
||||
"liquidity": "Liquidity",
|
||||
"margin": "Margin",
|
||||
"max": "Max",
|
||||
"more": "More",
|
||||
"portfolio": "Portfolio",
|
||||
"price": "Price",
|
||||
"rate": "Rate (APR)",
|
||||
"rates": "Rates (APR)",
|
||||
"rolling-change": "24h Change",
|
||||
"select-token": "Select Token",
|
||||
"sell": "Sell",
|
||||
"settings": "Settings",
|
||||
"show-zero-balances": "Show Zero Balances",
|
||||
"spanish": "Español",
|
||||
"stats": "Stats",
|
||||
"theme": "Theme",
|
||||
"token": "Token",
|
||||
"tokens": "Tokens",
|
||||
"token-collateral-multiplier": "{{token}} Collateral Multiplier",
|
||||
"trade": "Trade",
|
||||
"wallet-balance": "Wallet Balance",
|
||||
"withdraw": "Withdraw",
|
||||
"withdrawal-value": "Withdrawal Value"
|
||||
"account-closed": "Account Closed 👋",
|
||||
"account-value": "Account Value",
|
||||
"available": "Available",
|
||||
"available-balance": "Available Balance",
|
||||
"balance": "Balance",
|
||||
"borrow": "Borrow",
|
||||
"borrow-value": "Borrow Value",
|
||||
"buy": "Buy",
|
||||
"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",
|
||||
"connect": "Connect",
|
||||
"connect-helper": "Connect to get started",
|
||||
"daily-volume": "24h Volume",
|
||||
"deposit": "Deposit",
|
||||
"deposit-value": "Deposit Value",
|
||||
"disconnect": "Disconnect",
|
||||
"english": "English",
|
||||
"fee": "Fee",
|
||||
"fees": "Fees",
|
||||
"governance": "Governance",
|
||||
"health-impact": "Health Impact",
|
||||
"language": "Language",
|
||||
"learn": "Learn",
|
||||
"leverage": "Leverage",
|
||||
"liquidity": "Liquidity",
|
||||
"margin": "Margin",
|
||||
"max": "Max",
|
||||
"more": "More",
|
||||
"portfolio": "Portfolio",
|
||||
"price": "Price",
|
||||
"rate": "Rate (APR)",
|
||||
"rates": "Rates (APR)",
|
||||
"rolling-change": "24h Change",
|
||||
"select-token": "Select Token",
|
||||
"sell": "Sell",
|
||||
"settings": "Settings",
|
||||
"show-zero-balances": "Show Zero Balances",
|
||||
"spanish": "Español",
|
||||
"stats": "Stats",
|
||||
"theme": "Theme",
|
||||
"token": "Token",
|
||||
"tokens": "Tokens",
|
||||
"token-collateral-multiplier": "{{token}} Collateral Multiplier",
|
||||
"trade": "Trade",
|
||||
"wallet-balance": "Wallet Balance",
|
||||
"withdraw": "Withdraw",
|
||||
"withdrawal-value": "Withdrawal Value"
|
||||
}
|
||||
|
|
@ -1,53 +1,55 @@
|
|||
{
|
||||
"account-value": "Account Value",
|
||||
"available": "Available",
|
||||
"available-balance": "Available Balance",
|
||||
"balance": "Balance",
|
||||
"borrow": "Borrow",
|
||||
"borrow-value": "Borrow Value",
|
||||
"buy": "Buy",
|
||||
"chinese": "简体中文",
|
||||
"chinese-traditional": "繁體中文",
|
||||
"close-account": "Close 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",
|
||||
"connect": "Connect",
|
||||
"connect-helper": "Connect to get started",
|
||||
"daily-volume": "24h Volume",
|
||||
"deposit": "Deposit",
|
||||
"deposit-value": "Deposit Value",
|
||||
"disconnect": "Disconnect",
|
||||
"english": "English",
|
||||
"fee": "Fee",
|
||||
"fees": "Fees",
|
||||
"governance": "Governance",
|
||||
"health-impact": "Health Impact",
|
||||
"language": "Language",
|
||||
"learn": "Learn",
|
||||
"leverage": "Leverage",
|
||||
"liquidity": "Liquidity",
|
||||
"margin": "Margin",
|
||||
"max": "Max",
|
||||
"more": "More",
|
||||
"portfolio": "Portfolio",
|
||||
"price": "Price",
|
||||
"rate": "Rate (APR)",
|
||||
"rates": "Rates (APR)",
|
||||
"rolling-change": "24h Change",
|
||||
"select-token": "Select Token",
|
||||
"sell": "Sell",
|
||||
"settings": "Settings",
|
||||
"show-zero-balances": "Show Zero Balances",
|
||||
"spanish": "Español",
|
||||
"stats": "Stats",
|
||||
"theme": "Theme",
|
||||
"token": "Token",
|
||||
"tokens": "Tokens",
|
||||
"token-collateral-multiplier": "{{token}} Collateral Multiplier",
|
||||
"trade": "Trade",
|
||||
"wallet-balance": "Wallet Balance",
|
||||
"withdraw": "Withdraw",
|
||||
"withdrawal-value": "Withdrawal Value"
|
||||
"account-closed": "Account Closed 👋",
|
||||
"account-value": "Account Value",
|
||||
"available": "Available",
|
||||
"available-balance": "Available Balance",
|
||||
"balance": "Balance",
|
||||
"borrow": "Borrow",
|
||||
"borrow-value": "Borrow Value",
|
||||
"buy": "Buy",
|
||||
"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",
|
||||
"connect": "Connect",
|
||||
"connect-helper": "Connect to get started",
|
||||
"daily-volume": "24h Volume",
|
||||
"deposit": "Deposit",
|
||||
"deposit-value": "Deposit Value",
|
||||
"disconnect": "Disconnect",
|
||||
"english": "English",
|
||||
"fee": "Fee",
|
||||
"fees": "Fees",
|
||||
"governance": "Governance",
|
||||
"health-impact": "Health Impact",
|
||||
"language": "Language",
|
||||
"learn": "Learn",
|
||||
"leverage": "Leverage",
|
||||
"liquidity": "Liquidity",
|
||||
"margin": "Margin",
|
||||
"max": "Max",
|
||||
"more": "More",
|
||||
"portfolio": "Portfolio",
|
||||
"price": "Price",
|
||||
"rate": "Rate (APR)",
|
||||
"rates": "Rates (APR)",
|
||||
"rolling-change": "24h Change",
|
||||
"select-token": "Select Token",
|
||||
"sell": "Sell",
|
||||
"settings": "Settings",
|
||||
"show-zero-balances": "Show Zero Balances",
|
||||
"spanish": "Español",
|
||||
"stats": "Stats",
|
||||
"theme": "Theme",
|
||||
"token": "Token",
|
||||
"tokens": "Tokens",
|
||||
"token-collateral-multiplier": "{{token}} Collateral Multiplier",
|
||||
"trade": "Trade",
|
||||
"wallet-balance": "Wallet Balance",
|
||||
"withdraw": "Withdraw",
|
||||
"withdrawal-value": "Withdrawal Value"
|
||||
}
|
||||
|
|
@ -1,53 +1,55 @@
|
|||
{
|
||||
"account-value": "Account Value",
|
||||
"available": "Available",
|
||||
"available-balance": "Available Balance",
|
||||
"balance": "Balance",
|
||||
"borrow": "Borrow",
|
||||
"borrow-value": "Borrow Value",
|
||||
"buy": "Buy",
|
||||
"chinese": "简体中文",
|
||||
"chinese-traditional": "繁體中文",
|
||||
"close-account": "Close 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",
|
||||
"connect": "Connect",
|
||||
"connect-helper": "Connect to get started",
|
||||
"daily-volume": "24h Volume",
|
||||
"deposit": "Deposit",
|
||||
"deposit-value": "Deposit Value",
|
||||
"disconnect": "Disconnect",
|
||||
"english": "English",
|
||||
"fee": "Fee",
|
||||
"fees": "Fees",
|
||||
"governance": "Governance",
|
||||
"health-impact": "Health Impact",
|
||||
"language": "Language",
|
||||
"learn": "Learn",
|
||||
"leverage": "Leverage",
|
||||
"liquidity": "Liquidity",
|
||||
"margin": "Margin",
|
||||
"max": "Max",
|
||||
"more": "More",
|
||||
"portfolio": "Portfolio",
|
||||
"price": "Price",
|
||||
"rate": "Rate (APR)",
|
||||
"rates": "Rates (APR)",
|
||||
"rolling-change": "24h Change",
|
||||
"select-token": "Select Token",
|
||||
"sell": "Sell",
|
||||
"settings": "Settings",
|
||||
"show-zero-balances": "Show Zero Balances",
|
||||
"spanish": "Español",
|
||||
"stats": "Stats",
|
||||
"theme": "Theme",
|
||||
"token": "Token",
|
||||
"tokens": "Tokens",
|
||||
"token-collateral-multiplier": "{{token}} Collateral Multiplier",
|
||||
"trade": "Trade",
|
||||
"wallet-balance": "Wallet Balance",
|
||||
"withdraw": "Withdraw",
|
||||
"withdrawal-value": "Withdrawal Value"
|
||||
"account-closed": "Account Closed 👋",
|
||||
"account-value": "Account Value",
|
||||
"available": "Available",
|
||||
"available-balance": "Available Balance",
|
||||
"balance": "Balance",
|
||||
"borrow": "Borrow",
|
||||
"borrow-value": "Borrow Value",
|
||||
"buy": "Buy",
|
||||
"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",
|
||||
"connect": "Connect",
|
||||
"connect-helper": "Connect to get started",
|
||||
"daily-volume": "24h Volume",
|
||||
"deposit": "Deposit",
|
||||
"deposit-value": "Deposit Value",
|
||||
"disconnect": "Disconnect",
|
||||
"english": "English",
|
||||
"fee": "Fee",
|
||||
"fees": "Fees",
|
||||
"governance": "Governance",
|
||||
"health-impact": "Health Impact",
|
||||
"language": "Language",
|
||||
"learn": "Learn",
|
||||
"leverage": "Leverage",
|
||||
"liquidity": "Liquidity",
|
||||
"margin": "Margin",
|
||||
"max": "Max",
|
||||
"more": "More",
|
||||
"portfolio": "Portfolio",
|
||||
"price": "Price",
|
||||
"rate": "Rate (APR)",
|
||||
"rates": "Rates (APR)",
|
||||
"rolling-change": "24h Change",
|
||||
"select-token": "Select Token",
|
||||
"sell": "Sell",
|
||||
"settings": "Settings",
|
||||
"show-zero-balances": "Show Zero Balances",
|
||||
"spanish": "Español",
|
||||
"stats": "Stats",
|
||||
"theme": "Theme",
|
||||
"token": "Token",
|
||||
"tokens": "Tokens",
|
||||
"token-collateral-multiplier": "{{token}} Collateral Multiplier",
|
||||
"trade": "Trade",
|
||||
"wallet-balance": "Wallet Balance",
|
||||
"withdraw": "Withdraw",
|
||||
"withdrawal-value": "Withdrawal Value"
|
||||
}
|
||||
|
|
@ -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",
|
||||
|
|
|
@ -149,7 +149,7 @@ const mangoStore = create<MangoStore>(
|
|||
group,
|
||||
wallet.publicKey,
|
||||
0,
|
||||
'Main Account'
|
||||
'Account'
|
||||
)
|
||||
|
||||
// let orders = await client.getSerum3Orders(
|
||||
|
|
Loading…
Reference in New Issue