mobile trade balances
This commit is contained in:
parent
f2fb05d718
commit
945cf94e56
|
@ -1,9 +1,11 @@
|
|||
import { QuestionMarkCircleIcon } from '@heroicons/react/20/solid'
|
||||
import mangoStore from '@store/mangoStore'
|
||||
import { useViewport } from 'hooks/useViewport'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
import Image from 'next/image'
|
||||
import { useMemo } from 'react'
|
||||
import { formatDecimal } from 'utils/numbers'
|
||||
import { breakpoints } from 'utils/theme'
|
||||
|
||||
const Balances = () => {
|
||||
const { t } = useTranslation(['common', 'trade'])
|
||||
|
@ -11,6 +13,8 @@ const Balances = () => {
|
|||
const spotBalances = mangoStore((s) => s.mangoAccount.spotBalances)
|
||||
const group = mangoStore((s) => s.group)
|
||||
const jupiterTokens = mangoStore((s) => s.jupiterTokens)
|
||||
const { width } = useViewport()
|
||||
const showTableView = width ? width > breakpoints.md : false
|
||||
|
||||
const banks = useMemo(() => {
|
||||
if (group) {
|
||||
|
@ -41,7 +45,7 @@ const Balances = () => {
|
|||
return []
|
||||
}, [group, mangoAccount])
|
||||
|
||||
return (
|
||||
return showTableView ? (
|
||||
<table className="min-w-full">
|
||||
<thead>
|
||||
<tr>
|
||||
|
@ -97,6 +101,61 @@ const Balances = () => {
|
|||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
) : (
|
||||
<>
|
||||
{banks.map(({ key, value }) => {
|
||||
const bank = value[0]
|
||||
|
||||
let logoURI
|
||||
if (jupiterTokens.length) {
|
||||
logoURI = jupiterTokens.find(
|
||||
(t) => t.address === bank.mint.toString()
|
||||
)!.logoURI
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className="flex items-center justify-between border-t border-th-bkg-3 p-4"
|
||||
key={key}
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<div className="mr-2.5 flex flex-shrink-0 items-center">
|
||||
{logoURI ? (
|
||||
<Image alt="" width="20" height="20" src={logoURI} />
|
||||
) : (
|
||||
<QuestionMarkCircleIcon className="h-7 w-7 text-th-fgd-3" />
|
||||
)}
|
||||
</div>
|
||||
<span>{bank.name}</span>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="mb-0.5 font-mono text-sm text-th-fgd-1">
|
||||
{mangoAccount
|
||||
? formatDecimal(
|
||||
mangoAccount.getTokenBalanceUi(bank),
|
||||
bank.mintDecimals
|
||||
)
|
||||
: 0}
|
||||
</p>
|
||||
<div className="flex space-x-3">
|
||||
<p className="text-xs text-th-fgd-4">
|
||||
{t('trade:in-orders')}:{' '}
|
||||
<span className="font-mono text-th-fgd-3">
|
||||
{spotBalances[bank.mint.toString()]?.inOrders || 0.0}
|
||||
</span>
|
||||
</p>
|
||||
<p className="text-xs text-th-fgd-4">
|
||||
{t('trade:unsettled')}:{' '}
|
||||
<span className="font-mono text-th-fgd-3">
|
||||
{spotBalances[bank.mint.toString()]?.unsettled || 0.0}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import mangoStore from '@store/mangoStore'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
import { useCallback, useMemo, useState } from 'react'
|
||||
import { useCallback, useState } from 'react'
|
||||
import { PublicKey } from '@solana/web3.js'
|
||||
import { IconButton } from '@components/shared/Button'
|
||||
import { notify } from 'utils/notifications'
|
||||
|
@ -73,7 +73,6 @@ const UnsettledTrades = ({
|
|||
const market = group.getSerum3MarketByPk(
|
||||
new PublicKey(mktAddress)
|
||||
)
|
||||
console.log('market', mktAddress)
|
||||
const base = market?.name.split('/')[0]
|
||||
const quote = market?.name.split('/')[1]
|
||||
|
||||
|
|
Loading…
Reference in New Issue