blockworks-foundation
/
mango-v4-ui
mirror of https://github.com/blockworks-foundation/mango-v4-ui.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

add edit account name

This commit is contained in:
saml33 2022-07-28 22:13:42 +10:00
parent f1d1e6658f
commit c8330008d3
7 changed files with 108 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
components/account/AccountActions.tsx
View File

@ -4,16 +4,23 @@ import Button, { LinkButton } from '../shared/Button'
import DepositModal from '../modals/DepositModal'
import WithdrawModal from '../modals/WithdrawModal'
import mangoStore from '../../store/state'
import { DotsHorizontalIcon, TrashIcon, XIcon } from '@heroicons/react/solid'
import {
DotsHorizontalIcon,
PencilIcon,
TrashIcon,
XIcon,
} from '@heroicons/react/solid'
import { useTranslation } from 'next-i18next'
import IconDropMenu from '../shared/IconDropMenu'
import CloseAccountModal from '../modals/CloseAccountModal'
import AccountNameModal from '../modals/AccountNameModal'
const AccountActions = () => {
const { t } = useTranslation(['common', 'close-account'])
const { connected } = useWallet()
const [showCloseAccountModal, setShowCloseAccountModal] = useState(false)
const [showDepositModal, setShowDepositModal] = useState(false)
const [showEditAccountModal, setShowEditAccountModal] = useState(false)
const [showWithdrawModal, setShowWithdrawModal] = useState(false)
const handleCloseMangoAccount = async () => {
@ -48,6 +55,14 @@ const AccountActions = () => {
{t('withdraw')}
</Button>
<IconDropMenu icon={<DotsHorizontalIcon className="h-5 w-5" />} large>
<LinkButton
className="flex items-center whitespace-nowrap"
disabled={!connected}
onClick={() => setShowEditAccountModal(true)}
>
<PencilIcon className="mr-2 h-5 w-5" />
{t('edit-account')}
</LinkButton>
<LinkButton
className="flex items-center whitespace-nowrap"
disabled={!connected}
@ -70,6 +85,12 @@ const AccountActions = () => {
onClose={() => setShowDepositModal(false)}
/>
) : null}
{showEditAccountModal ? (
<AccountNameModal
isOpen={showEditAccountModal}
onClose={() => setShowEditAccountModal(false)}
/>
) : null}
{showWithdrawModal ? (
<WithdrawModal
isOpen={showWithdrawModal}

81
components/modals/AccountNameModal.tsx Normal file
View File

@ -0,0 +1,81 @@
import { ModalProps } from '../../types/modal'
import Modal from '../shared/Modal'
import mangoStore from '../../store/state'
import { notify } from '../../utils/notifications'
import Button from '../shared/Button'
import { useTranslation } from 'next-i18next'
import { ChangeEvent, useState } from 'react'
import BounceLoader from '../shared/BounceLoader'
import Input from '../forms/Input'
import Label from '../forms/Label'
const AccountNameModal = ({ isOpen, onClose }: ModalProps) => {
const { t } = useTranslation('common')
const mangoAccount = mangoStore((s) => s.mangoAccount.current)
const [loading, setLoading] = useState(false)
const [name, setName] = useState(mangoAccount?.name || '')
// This doesn't work yet...
const handleUpdateccountName = async () => {
const client = mangoStore.getState().client
const group = mangoStore.getState().group
if (!mangoAccount || !group) return
setLoading(true)
try {
const tx = await client.editMangoAccount(group, mangoAccount, name)
if (tx) {
setLoading(false)
onClose()
notify({
title: t('account-updated'),
type: 'success',
txid: tx,
})
}
} catch (e) {
setLoading(false)
notify({
title: t('account-update-failed'),
type: 'error',
})
console.log(e)
}
}
return (
<Modal isOpen={isOpen} onClose={onClose}>
<div className="h-64">
{loading ? (
<BounceLoader loadingMessage={t('updating-account-name')} />
) : (
<div className="flex h-full flex-col justify-between">
<div className="pb-4">
<h2 className="mb-1">{t('edit-account')}</h2>
<p className="mb-4">{t('account-name-desc')}</p>
<Label text={t('account-name')} />
<Input
type="text"
name="name"
id="name"
placeholder="0.00"
value={name}
onChange={(e: ChangeEvent<HTMLInputElement>) =>
setName(e.target.value)
}
/>
</div>
<Button
className="w-full"
onClick={handleUpdateccountName}
size="large"
>
{t('update')}
</Button>
</div>
)}
</div>
</Modal>
)
}
export default AccountNameModal

2
components/modals/CloseAccountModal.tsx
View File

@ -46,7 +46,7 @@ const CloseAccountModal = ({ isOpen, onClose }: ModalProps) => {
<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>
<p>{t('close-account-desc')}</p>
</div>
<Button
className="w-full"

1
public/locales/en/common.json
View File

@ -10,6 +10,7 @@
"chinese": "简体中文",
"chinese-traditional": "繁體中文",
"close-account": "Close Account",
"close-account-desc": "Are you sure? Closing your account is irreversible.",
"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.",

1
public/locales/es/common.json
View File

@ -11,6 +11,7 @@
"chinese-traditional": "繁體中文",
"close-account": "Close Account",
"closing-account": "Closing your account...",
"close-account-desc": "Are you sure? Closing your account is irreversible.",
"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",

1
public/locales/zh/common.json
View File

@ -11,6 +11,7 @@
"chinese-traditional": "繁體中文",
"close-account": "Close Account",
"closing-account": "Closing your account...",
"close-account-desc": "Are you sure? Closing your account is irreversible.",
"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",

1
public/locales/zh_tw/common.json
View File

@ -10,6 +10,7 @@
"chinese": "简体中文",
"chinese-traditional": "繁體中文",
"close-account": "Close Account",
"close-account-desc": "Are you sure? Closing your account is irreversible.",
"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.",