116 lines
3.1 KiB
TypeScript
116 lines
3.1 KiB
TypeScript
import { FunctionComponent, useState } from 'react'
|
|
import useMangoStore from '../stores/useMangoStore'
|
|
import {
|
|
ExclamationCircleIcon,
|
|
InformationCircleIcon,
|
|
} from '@heroicons/react/outline'
|
|
import Input, { Label } from './Input'
|
|
import Button from './Button'
|
|
import Modal from './Modal'
|
|
import { ElementTitle } from './styles'
|
|
import Tooltip from './Tooltip'
|
|
import { notify } from '../utils/notifications'
|
|
import { useTranslation } from 'next-i18next'
|
|
|
|
interface AccountNameModalProps {
|
|
accountName?: string
|
|
isOpen: boolean
|
|
onClose?: (x?) => void
|
|
}
|
|
|
|
const AccountNameModal: FunctionComponent<AccountNameModalProps> = ({
|
|
accountName,
|
|
isOpen,
|
|
onClose,
|
|
}) => {
|
|
const { t } = useTranslation('common')
|
|
const [name, setName] = useState(accountName || '')
|
|
const [invalidNameMessage, setInvalidNameMessage] = useState('')
|
|
const mangoGroup = useMangoStore((s) => s.selectedMangoGroup.current)
|
|
const mangoAccount = useMangoStore((s) => s.selectedMangoAccount.current)
|
|
const mangoClient = useMangoStore((s) => s.connection.client)
|
|
const actions = useMangoStore((s) => s.actions)
|
|
|
|
const submitName = async () => {
|
|
const wallet = useMangoStore.getState().wallet.current
|
|
|
|
try {
|
|
const txid = await mangoClient.addMangoAccountInfo(
|
|
mangoGroup,
|
|
mangoAccount,
|
|
wallet,
|
|
name
|
|
)
|
|
actions.fetchAllMangoAccounts()
|
|
actions.reloadMangoAccount()
|
|
onClose()
|
|
notify({
|
|
title: t('name-updated'),
|
|
txid,
|
|
})
|
|
} catch (err) {
|
|
console.warn('Error setting account name:', err)
|
|
notify({
|
|
title: t('name-error'),
|
|
description: `${err}`,
|
|
txid: err.txid,
|
|
type: 'error',
|
|
})
|
|
}
|
|
}
|
|
|
|
const validateNameInput = () => {
|
|
if (name.length >= 33) {
|
|
setInvalidNameMessage(t('character-limit'))
|
|
}
|
|
if (name.length === 0) {
|
|
setInvalidNameMessage(t('enter-name'))
|
|
}
|
|
}
|
|
|
|
const onChangeNameInput = (name) => {
|
|
setName(name)
|
|
if (invalidNameMessage) {
|
|
setInvalidNameMessage('')
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Modal onClose={onClose} isOpen={isOpen}>
|
|
<Modal.Header>
|
|
<ElementTitle noMarginBottom>{t('name-your-account')}</ElementTitle>
|
|
<p className="flex items-center justify-center">
|
|
{t('edit-nickname')}
|
|
<Tooltip content={t('tooltip-name-onchain')}>
|
|
<InformationCircleIcon className="h-5 w-5 ml-2 text-th-primary" />
|
|
</Tooltip>
|
|
</p>
|
|
</Modal.Header>
|
|
<Label>{t('account-name')}</Label>
|
|
<Input
|
|
type="text"
|
|
error={!!invalidNameMessage}
|
|
placeholder="e.g. Calypso"
|
|
value={name}
|
|
onBlur={validateNameInput}
|
|
onChange={(e) => onChangeNameInput(e.target.value)}
|
|
/>
|
|
{invalidNameMessage ? (
|
|
<div className="flex items-center pt-1.5 text-th-red">
|
|
<ExclamationCircleIcon className="h-4 w-4 mr-1.5" />
|
|
{invalidNameMessage}
|
|
</div>
|
|
) : null}
|
|
<Button
|
|
onClick={() => submitName()}
|
|
disabled={name.length >= 33}
|
|
className="mt-6 w-full"
|
|
>
|
|
{t('save-name')}
|
|
</Button>
|
|
</Modal>
|
|
)
|
|
}
|
|
|
|
export default AccountNameModal
|