mango account list modal errors
This commit is contained in:
saml33
parent
d059de8c9a
commit
a0a020f7aa
|
|
@ -208,7 +208,6 @@ const AccountPage = () => {
|
|||
</p>
|
||||
</Tooltip>
|
||||
<div className="mb-1 flex items-center text-5xl font-bold text-th-fgd-1">
|
||||
$
|
||||
{group && mangoAccount ? (
|
||||
<FlipNumbers
|
||||
height={48}
|
||||
|
|
@ -217,7 +216,9 @@ const AccountPage = () => {
|
|||
delay={0.05}
|
||||
duration={1}
|
||||
numbers={formatFixedDecimals(
|
||||
toUiDecimalsForQuote(mangoAccount.getEquity(group)!.toNumber()),
|
||||
toUiDecimalsForQuote(
|
||||
mangoAccount.getEquity(group)!.toNumber()
|
||||
),
|
||||
true
|
||||
)}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -29,6 +29,7 @@ const MangoAccountsListModal = ({
|
|||
const { t } = useTranslation('common')
|
||||
const mangoAccounts = mangoStore((s) => s.mangoAccounts)
|
||||
const actions = mangoStore((s) => s.actions)
|
||||
const group = mangoStore((s) => s.group)
|
||||
const loading = mangoStore((s) => s.mangoAccount.initialLoad)
|
||||
const [showNewAccountForm, setShowNewAccountForm] = useState(false)
|
||||
const [, setLastAccountViewed] = useLocalStorageStringState(LAST_ACCOUNT_KEY)
|
||||
|
|
@ -36,16 +37,13 @@ const MangoAccountsListModal = ({
|
|||
const handleSelectMangoAccount = async (acc: MangoAccount) => {
|
||||
const set = mangoStore.getState().set
|
||||
const client = mangoStore.getState().client
|
||||
const group = mangoStore.getState().group
|
||||
if (!group) return
|
||||
set((s) => {
|
||||
s.activityFeed.feed = []
|
||||
s.activityFeed.loading = true
|
||||
})
|
||||
try {
|
||||
const reloadedMangoAccount = await retryFn(() =>
|
||||
acc.reload(client, group)
|
||||
)
|
||||
const reloadedMangoAccount = await retryFn(() => acc.reload(client))
|
||||
set((s) => {
|
||||
s.mangoAccount.current = reloadedMangoAccount
|
||||
s.mangoAccount.lastUpdatedAt = new Date().toISOString()
|
||||
|
|
@ -63,70 +61,74 @@ const MangoAccountsListModal = ({
|
|||
<Modal isOpen={isOpen} onClose={onClose}>
|
||||
<div className="inline-block w-full transform overflow-x-hidden">
|
||||
<div className="flex min-h-[264px] flex-col justify-between">
|
||||
<h2 className="text-center">{t('accounts')}</h2>
|
||||
{loading ? (
|
||||
<Loading />
|
||||
) : mangoAccounts.length ? (
|
||||
<div className="thin-scroll mt-4 max-h-[280px] space-y-2 overflow-y-auto">
|
||||
{mangoAccounts.map((acc) => {
|
||||
const accountValue = formatFixedDecimals(
|
||||
toUiDecimalsForQuote(Number(acc.getEquity())),
|
||||
true
|
||||
)
|
||||
const maintHealth = acc.getHealthRatioUi(HealthType.maint)
|
||||
return (
|
||||
<div key={acc.publicKey.toString()}>
|
||||
<button
|
||||
onClick={() => handleSelectMangoAccount(acc)}
|
||||
className="default-transition flex w-full items-center justify-between rounded-md bg-th-bkg-2 p-4 text-th-fgd-1 hover:bg-th-bkg-3"
|
||||
>
|
||||
<div className="flex w-full items-center justify-between">
|
||||
<div className="text-left">
|
||||
<p className="mb-0.5 text-sm font-bold text-th-fgd-1">
|
||||
{acc.name}
|
||||
</p>
|
||||
<div className="flex">
|
||||
<span className="text-sm text-th-fgd-3">
|
||||
{accountValue}
|
||||
</span>
|
||||
<span className="mx-2 text-th-fgd-4">|</span>
|
||||
<div
|
||||
className={`flex items-center ${
|
||||
maintHealth
|
||||
? maintHealth > 15 && maintHealth < 50
|
||||
? 'text-th-orange'
|
||||
: maintHealth >= 50
|
||||
? 'text-th-green'
|
||||
: 'text-th-red'
|
||||
: 'text-th-fgd-4'
|
||||
}`}
|
||||
>
|
||||
<HeartIcon className="mr-1 h-4 w-4" />
|
||||
<span className="text-sm">{maintHealth}%</span>
|
||||
<div>
|
||||
<h2 className="text-center">{t('accounts')}</h2>
|
||||
{loading ? (
|
||||
<Loading />
|
||||
) : mangoAccounts.length ? (
|
||||
<div className="thin-scroll mt-4 max-h-[280px] space-y-2 overflow-y-auto">
|
||||
{mangoAccounts.map((acc) => {
|
||||
const accountValue = formatFixedDecimals(
|
||||
toUiDecimalsForQuote(Number(acc.getEquity(group!))),
|
||||
true
|
||||
)
|
||||
const maintHealth = acc.getHealthRatioUi(
|
||||
group!,
|
||||
HealthType.maint
|
||||
)
|
||||
return (
|
||||
<div key={acc.publicKey.toString()}>
|
||||
<button
|
||||
onClick={() => handleSelectMangoAccount(acc)}
|
||||
className="default-transition flex w-full items-center justify-between rounded-md bg-th-bkg-2 p-4 text-th-fgd-1 hover:bg-th-bkg-3"
|
||||
>
|
||||
<div className="flex w-full items-center justify-between">
|
||||
<div className="text-left">
|
||||
<p className="mb-0.5 text-sm font-bold text-th-fgd-1">
|
||||
{acc.name}
|
||||
</p>
|
||||
<div className="flex">
|
||||
<span className="text-sm text-th-fgd-3">
|
||||
{accountValue}
|
||||
</span>
|
||||
<span className="mx-2 text-th-fgd-4">|</span>
|
||||
<div
|
||||
className={`flex items-center ${
|
||||
maintHealth
|
||||
? maintHealth > 15 && maintHealth < 50
|
||||
? 'text-th-orange'
|
||||
: maintHealth >= 50
|
||||
? 'text-th-green'
|
||||
: 'text-th-red'
|
||||
: 'text-th-fgd-4'
|
||||
}`}
|
||||
>
|
||||
<HeartIcon className="mr-1 h-4 w-4" />
|
||||
<span className="text-sm">{maintHealth}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{acc.publicKey.toString() ===
|
||||
mangoAccount?.publicKey.toString() ? (
|
||||
<div className="flex h-5 w-5 items-center justify-center rounded-full bg-th-green">
|
||||
<CheckIcon className="h-4 w-4 text-th-bkg-1" />
|
||||
</div>
|
||||
) : (
|
||||
<div className="h-5 w-5 rounded-full bg-th-bkg-4" />
|
||||
)}
|
||||
</div>
|
||||
{acc.publicKey.toString() ===
|
||||
mangoAccount?.publicKey.toString() ? (
|
||||
<div className="flex h-5 w-5 items-center justify-center rounded-full bg-th-green">
|
||||
<CheckIcon className="h-4 w-4 text-th-bkg-1" />
|
||||
</div>
|
||||
) : (
|
||||
<div className="h-5 w-5 rounded-full bg-th-bkg-4" />
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
<div className="h-full">
|
||||
<p className="text-center text-sm">
|
||||
Create your first account 😎
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex h-48 flex-col items-center justify-center">
|
||||
<span className="mb-1 text-2xl">😎</span>
|
||||
<p className="text-center text-sm">Create your first account</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="pt-6">
|
||||
<LinkButton
|
||||
className="w-full justify-center"
|
||||
|
|
|
|||
Loading…
Reference in New Issue