import { Serum3Side } from '@blockworks-foundation/mango-v4'
import Button from '@components/shared/Button'
import SideBadge from '@components/shared/SideBadge'
import TabButtons from '@components/shared/TabButtons'
import { LinkIcon, QuestionMarkCircleIcon } from '@heroicons/react/20/solid'
import { Order } from '@project-serum/serum/lib/market'
import { useWallet } from '@solana/wallet-adapter-react'
import { PublicKey } from '@solana/web3.js'
import mangoStore from '@store/mangoStore'
import { useTranslation } from 'next-i18next'
import Image from 'next/image'
import { useCallback, useMemo, useState } from 'react'
import { notify } from 'utils/notifications'
import { formatDecimal } from 'utils/numbers'
const TABS = ['Balances', 'Orders']
const BalanceAndOpenOrders = () => {
const [selectedTab, setSelectedTab] = useState('Balances')
return (
setSelectedTab(tab)}
values={TABS}
showBorders
/>
{selectedTab === 'Balances' ?
: null}
{selectedTab === 'Orders' ?
: null}
)
}
const Balances = () => {
const { t } = useTranslation('common')
const mangoAccount = mangoStore((s) => s.mangoAccount.current)
const spotBalances = mangoStore((s) => s.mangoAccount.spotBalances)
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}
|
{spotBalances[bank.mint.toString()]?.inOrders || 0.0}
|
{spotBalances[bank.mint.toString()]?.unsettled || 0.0}
|
)
})}
)
}
const OpenOrders = () => {
const { t } = useTranslation('common')
const { connected } = useWallet()
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
const actions = mangoStore.getState().actions
if (!group || !mangoAccount) return
try {
const tx = await client.serum3CancelOrder(
group,
mangoAccount,
selectedMarket!.serumMarketExternal,
o.side === 'buy' ? Serum3Side.bid : Serum3Side.ask,
o.orderId
)
actions.fetchSerumOpenOrders()
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 connected ? (
Object.values(openOrders).flat().length ? (
Token |
Side |
Size |
Price |
|
{Object.entries(openOrders)
.map(([marketPk, orders]) => {
return orders.map((o) => {
const group = mangoStore.getState().group
return (
{
group?.getSerum3MarketByPk(new PublicKey(marketPk))
?.name
}
|
|
{o.size} |
{o.price} |
|
)
})
})
.flat()}
) : (
)
) : (
Connect to view your open orders
)
}
export default BalanceAndOpenOrders