124 lines
3.6 KiB
TypeScript
124 lines
3.6 KiB
TypeScript
import { ChangeEvent, useState } from 'react'
|
|
import { useTranslation } from 'next-i18next'
|
|
import { ModalProps } from '../../types/modal'
|
|
import Modal from '../shared/Modal'
|
|
import mangoStore from '@store/mangoStore'
|
|
import { notify } from '../../utils/notifications'
|
|
import Button from '../shared/Button'
|
|
import BounceLoader from '../shared/BounceLoader'
|
|
import Input from '../forms/Input'
|
|
import Label from '../forms/Label'
|
|
import { useWallet } from '@solana/wallet-adapter-react'
|
|
import { Wallet } from '@project-serum/anchor'
|
|
import InlineNotification from '../shared/InlineNotification'
|
|
import { MangoAccount } from '@blockworks-foundation/mango-v4'
|
|
|
|
const getNextAccountNumber = (accounts: MangoAccount[]): number => {
|
|
if (accounts.length > 1) {
|
|
return (
|
|
accounts
|
|
.map((a) => a.accountNum)
|
|
.reduce((a, b) => Math.max(a, b), -Infinity) + 1
|
|
)
|
|
} else if (accounts.length === 1) {
|
|
return accounts[0].accountNum + 1
|
|
}
|
|
return 0
|
|
}
|
|
|
|
interface CreateAccountModalProps {
|
|
isFirstAccount?: boolean
|
|
}
|
|
|
|
type ModalCombinedProps = ModalProps & CreateAccountModalProps
|
|
|
|
const CreateAccountModal = ({
|
|
isFirstAccount,
|
|
isOpen,
|
|
onClose,
|
|
}: ModalCombinedProps) => {
|
|
const { t } = useTranslation('common')
|
|
const [loading, setLoading] = useState(false)
|
|
const [name, setName] = useState('')
|
|
const { wallet } = useWallet()
|
|
|
|
const handleNewAccount = async () => {
|
|
const client = mangoStore.getState().client
|
|
const group = mangoStore.getState().group
|
|
const mangoAccounts = mangoStore.getState().mangoAccounts.accounts
|
|
const actions = mangoStore.getState().actions
|
|
if (!group || !wallet) return
|
|
setLoading(true)
|
|
try {
|
|
const newAccountNum = getNextAccountNumber(mangoAccounts)
|
|
const tx = await client.createMangoAccount(
|
|
group,
|
|
newAccountNum,
|
|
name || `Account ${newAccountNum + 1}`
|
|
)
|
|
actions.fetchMangoAccounts(wallet!.adapter as unknown as Wallet)
|
|
if (tx) {
|
|
setLoading(false)
|
|
onClose()
|
|
notify({
|
|
title: t('new-account-success'),
|
|
type: 'success',
|
|
txid: tx,
|
|
})
|
|
}
|
|
} catch (e: any) {
|
|
setLoading(false)
|
|
notify({
|
|
title: t('new-account-failed'),
|
|
txid: e?.signature,
|
|
type: 'error',
|
|
})
|
|
console.error(e)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Modal isOpen={isOpen} onClose={onClose}>
|
|
<div className="h-80">
|
|
{loading ? (
|
|
<BounceLoader loadingMessage={t('creating-account')} />
|
|
) : (
|
|
<div className="flex h-full flex-col justify-between">
|
|
<div className="pb-4">
|
|
<h2>{t('create-account')}</h2>
|
|
{isFirstAccount ? (
|
|
<p className="mt-1">You need a Mango Account to get started.</p>
|
|
) : null}
|
|
<div className="pt-4">
|
|
<Label optional text={t('account-name')} />
|
|
</div>
|
|
<Input
|
|
type="text"
|
|
name="name"
|
|
id="name"
|
|
placeholder="Account"
|
|
value={name}
|
|
onChange={(e: ChangeEvent<HTMLInputElement>) =>
|
|
setName(e.target.value)
|
|
}
|
|
/>
|
|
</div>
|
|
<div className="space-y-6">
|
|
<InlineNotification type="info" desc={t('insufficient-sol')} />
|
|
<Button
|
|
className="w-full"
|
|
onClick={handleNewAccount}
|
|
size="large"
|
|
>
|
|
{t('create-account')}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</Modal>
|
|
)
|
|
}
|
|
|
|
export default CreateAccountModal
|