import { Serum3Side } from '@blockworks-foundation/mango-v4'
import Button from '@components/shared/Button'
import SideBadge from '@components/shared/SideBadge'
import { QuestionMarkCircleIcon } from '@heroicons/react/20/solid'
import { Order } from '@project-serum/serum/lib/market'
import mangoStore from '@store/mangoStore'
import { useTranslation } from 'next-i18next'
import Image from 'next/image'
import { useCallback, useEffect, useMemo, useState } from 'react'
import { notify } from 'utils/notifications'
import { formatDecimal, formatFixedDecimals } from 'utils/numbers'
const TABS = ['Balances', 'Open Orders']
const BalanceAndOpenOrders = () => {
const [selectedTab, setSelectedTab] = useState('Balances')
const mangoAccount = mangoStore((s) => s.mangoAccount.current)
const selectedMarket = mangoStore((s) => s.selectedMarket.current)
useEffect(() => {
const actions = mangoStore.getState().actions
if (mangoAccount && selectedMarket) {
actions.fetchOpenOrdersForMarket(selectedMarket)
}
}, [mangoAccount, selectedMarket])
return (
{TABS.map((tab) => {
return (
setSelectedTab(tab)}
className={`border-r border-th-bkg-3 px-4 py-4 font-bold ${
selectedTab === tab
? 'bg-th-bkg-2 text-th-primary'
: 'hover:cursor-pointer hover:text-th-fgd-2'
}`}
>
{tab}
)
})}
{selectedTab === 'Balances' ?
: null}
{selectedTab === 'Open Orders' ?
: null}
)
}
const Balances = () => {
const { t } = useTranslation('common')
const mangoAccount = mangoStore((s) => s.mangoAccount.current)
const group = mangoStore((s) => s.group)
const jupiterTokens = mangoStore((s) => s.jupiterTokens)
const banks = useMemo(() => {
if (group) {
const rawBanks = Array.from(group?.banksMapByName, ([key, value]) => ({
key,
value,
}))
const sortedBanks = mangoAccount
? rawBanks.sort(
(a, b) =>
Math.abs(
mangoAccount?.getTokenBalanceUi(b.value[0]) *
b.value[0].uiPrice!
) -
Math.abs(
mangoAccount?.getTokenBalanceUi(a.value[0]) *
a.value[0].uiPrice!
)
)
: rawBanks
return mangoAccount
? sortedBanks.filter(
(b) => mangoAccount?.getTokenBalanceUi(b.value[0]) !== 0
)
: sortedBanks
}
return []
}, [group, mangoAccount])
return (
{t('token')} |
{t('balance')} |
In Orders |
Unsettled |
{banks.map(({ key, value }) => {
const bank = value[0]
const oraclePrice = bank.uiPrice
let logoURI
if (jupiterTokens.length) {
logoURI = jupiterTokens.find(
(t) => t.address === bank.mint.toString()
)!.logoURI
}
return (
{logoURI ? (
) : (
)}
{bank.name}
|
{mangoAccount
? formatDecimal(
mangoAccount.getTokenBalanceUi(bank),
bank.mintDecimals
)
: 0}
|
0.00 |
0.00 |
)
})}
)
}
const OpenOrders = () => {
const { t } = useTranslation('common')
const openOrders = mangoStore((s) => s.mangoAccount.openOrders)
const handleCancelOrder = useCallback(
async (o: Order) => {
const client = mangoStore.getState().client
const group = mangoStore.getState().group
const mangoAccount = mangoStore.getState().mangoAccount.current
const selectedMarket = mangoStore.getState().selectedMarket.current
if (!group || !mangoAccount) return
try {
const tx = await client.serum3CancelOrder(
group,
mangoAccount,
selectedMarket!.serumMarketExternal,
o.side === 'buy' ? Serum3Side.bid : Serum3Side.ask,
o.orderId
)
notify({
type: 'success',
title: 'Transaction successful',
txid: tx,
})
} catch (e: any) {
console.error('Error canceling', e)
notify({
title: t('order-error'),
description: e.message,
txid: e.txid,
type: 'error',
})
}
},
[t]
)
return (
Side |
Size |
Price |
|
{openOrders.map((o) => {
return (
|
{o.size} |
{o.price} |
|
)
})}
)
}
export default BalanceAndOpenOrders