mobile unsettled
This commit is contained in:
saml33
parent
bbc9e5681d
commit
b16435441a
|
|
@ -29,7 +29,7 @@ const TabButtons: FunctionComponent<TabButtonsProps> = ({
|
||||||
{values.map(([label, count], i) => (
|
{values.map(([label, count], i) => (
|
||||||
<div className={fillWidth ? 'flex-1' : ''} key={label + i}>
|
<div className={fillWidth ? 'flex-1' : ''} key={label + i}>
|
||||||
<button
|
<button
|
||||||
className={`default-transition flex h-12 w-full items-center justify-center px-6 font-bold ${
|
className={`default-transition flex h-12 w-full items-center justify-center px-4 font-bold md:px-6 ${
|
||||||
rounded ? 'rounded-md' : 'rounded-none'
|
rounded ? 'rounded-md' : 'rounded-none'
|
||||||
} ${showBorders ? 'border-r border-th-bkg-3' : ''} ${
|
} ${showBorders ? 'border-r border-th-bkg-3' : ''} ${
|
||||||
label === activeValue
|
label === activeValue
|
||||||
|
|
|
||||||
|
|
@ -8,6 +8,8 @@ import { useWallet } from '@solana/wallet-adapter-react'
|
||||||
import { CheckIcon, LinkIcon } from '@heroicons/react/20/solid'
|
import { CheckIcon, LinkIcon } from '@heroicons/react/20/solid'
|
||||||
import Tooltip from '@components/shared/Tooltip'
|
import Tooltip from '@components/shared/Tooltip'
|
||||||
import Loading from '@components/shared/Loading'
|
import Loading from '@components/shared/Loading'
|
||||||
|
import { useViewport } from 'hooks/useViewport'
|
||||||
|
import { breakpoints } from 'utils/theme'
|
||||||
|
|
||||||
const UnsettledTrades = ({
|
const UnsettledTrades = ({
|
||||||
unsettledSpotBalances,
|
unsettledSpotBalances,
|
||||||
|
|
@ -19,6 +21,8 @@ const UnsettledTrades = ({
|
||||||
const group = mangoStore((s) => s.group)
|
const group = mangoStore((s) => s.group)
|
||||||
// const jupiterTokens = mangoStore((s) => s.jupiterTokens)
|
// const jupiterTokens = mangoStore((s) => s.jupiterTokens)
|
||||||
const [settleMktAddress, setSettleMktAddress] = useState<string>('')
|
const [settleMktAddress, setSettleMktAddress] = useState<string>('')
|
||||||
|
const { width } = useViewport()
|
||||||
|
const showTableView = width ? width > breakpoints.md : false
|
||||||
|
|
||||||
const handleSettleFunds = useCallback(async (mktAddress: string) => {
|
const handleSettleFunds = useCallback(async (mktAddress: string) => {
|
||||||
const client = mangoStore.getState().client
|
const client = mangoStore.getState().client
|
||||||
|
|
@ -58,16 +62,68 @@ const UnsettledTrades = ({
|
||||||
|
|
||||||
return connected ? (
|
return connected ? (
|
||||||
Object.values(unsettledSpotBalances).flat().length ? (
|
Object.values(unsettledSpotBalances).flat().length ? (
|
||||||
<table className="min-w-full">
|
showTableView ? (
|
||||||
<thead>
|
<table className="min-w-full">
|
||||||
<tr>
|
<thead>
|
||||||
<th className="bg-th-bkg-1 text-left">{t('market')}</th>
|
<tr>
|
||||||
<th className="bg-th-bkg-1 text-right">{t('trade:base')}</th>
|
<th className="bg-th-bkg-1 text-left">{t('market')}</th>
|
||||||
<th className="bg-th-bkg-1 text-right">{t('trade:quote')}</th>
|
<th className="bg-th-bkg-1 text-right">{t('trade:base')}</th>
|
||||||
<th className="bg-th-bkg-1 text-right" />
|
<th className="bg-th-bkg-1 text-right">{t('trade:quote')}</th>
|
||||||
</tr>
|
<th className="bg-th-bkg-1 text-right" />
|
||||||
</thead>
|
</tr>
|
||||||
<tbody>
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{Object.entries(unsettledSpotBalances).map(
|
||||||
|
([mktAddress, balance]) => {
|
||||||
|
const market = group.getSerum3MarketByPk(
|
||||||
|
new PublicKey(mktAddress)
|
||||||
|
)
|
||||||
|
const base = market?.name.split('/')[0]
|
||||||
|
const quote = market?.name.split('/')[1]
|
||||||
|
|
||||||
|
return (
|
||||||
|
<tr key={mktAddress} className="text-sm">
|
||||||
|
<td>
|
||||||
|
<div className="flex items-center">
|
||||||
|
<span>{market ? market.name : ''}</span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td className="text-right font-mono">
|
||||||
|
{unsettledSpotBalances[mktAddress].base || 0.0}{' '}
|
||||||
|
<span className="font-body tracking-wide text-th-fgd-4">
|
||||||
|
{base}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td className="text-right font-mono">
|
||||||
|
{unsettledSpotBalances[mktAddress].quote || 0.0}{' '}
|
||||||
|
<span className="font-body tracking-wide text-th-fgd-4">
|
||||||
|
{quote}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<div className="flex justify-end">
|
||||||
|
<Tooltip content={t('trade:settle-funds')}>
|
||||||
|
<IconButton
|
||||||
|
onClick={() => handleSettleFunds(mktAddress)}
|
||||||
|
size="small"
|
||||||
|
>
|
||||||
|
{settleMktAddress === mktAddress ? (
|
||||||
|
<Loading className="h-4 w-4" />
|
||||||
|
) : (
|
||||||
|
<CheckIcon className="h-4 w-4" />
|
||||||
|
)}
|
||||||
|
</IconButton>
|
||||||
|
</Tooltip>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
)}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
) : (
|
||||||
|
<div className="pb-20">
|
||||||
{Object.entries(unsettledSpotBalances).map(
|
{Object.entries(unsettledSpotBalances).map(
|
||||||
([mktAddress, balance]) => {
|
([mktAddress, balance]) => {
|
||||||
const market = group.getSerum3MarketByPk(
|
const market = group.getSerum3MarketByPk(
|
||||||
|
|
@ -77,46 +133,44 @@ const UnsettledTrades = ({
|
||||||
const quote = market?.name.split('/')[1]
|
const quote = market?.name.split('/')[1]
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<tr key={mktAddress} className="text-sm">
|
<div
|
||||||
<td>
|
key={mktAddress}
|
||||||
<div className="flex items-center">
|
className="flex items-center justify-between border-b border-th-bkg-3 p-4"
|
||||||
<span>{market ? market.name : ''}</span>
|
>
|
||||||
</div>
|
<div className="flex items-center">
|
||||||
</td>
|
<span>{market ? market.name : ''}</span>
|
||||||
<td className="text-right font-mono">
|
</div>
|
||||||
{unsettledSpotBalances[mktAddress].base || 0.0}{' '}
|
<div className="flex items-center space-x-3">
|
||||||
<span className="font-body tracking-wide text-th-fgd-4">
|
{unsettledSpotBalances[mktAddress].base ? (
|
||||||
{base}
|
<span className="font-mono text-sm">
|
||||||
</span>
|
{unsettledSpotBalances[mktAddress].base}{' '}
|
||||||
</td>
|
<span className="font-body tracking-wide text-th-fgd-4">
|
||||||
<td className="text-right font-mono">
|
{base}
|
||||||
{unsettledSpotBalances[mktAddress].quote || 0.0}{' '}
|
</span>
|
||||||
<span className="font-body tracking-wide text-th-fgd-4">
|
</span>
|
||||||
{quote}
|
) : null}
|
||||||
</span>
|
{unsettledSpotBalances[mktAddress].quote ? (
|
||||||
</td>
|
<span className="font-mono text-sm">
|
||||||
<td>
|
{unsettledSpotBalances[mktAddress].quote}{' '}
|
||||||
<div className="flex justify-end">
|
<span className="font-body tracking-wide text-th-fgd-4">
|
||||||
<Tooltip content={t('trade:settle-funds')}>
|
{quote}
|
||||||
<IconButton
|
</span>
|
||||||
onClick={() => handleSettleFunds(mktAddress)}
|
</span>
|
||||||
size="small"
|
) : null}
|
||||||
>
|
<IconButton onClick={() => handleSettleFunds(mktAddress)}>
|
||||||
{settleMktAddress === mktAddress ? (
|
{settleMktAddress === mktAddress ? (
|
||||||
<Loading className="h-4 w-4" />
|
<Loading className="h-4 w-4" />
|
||||||
) : (
|
) : (
|
||||||
<CheckIcon className="h-4 w-4" />
|
<CheckIcon className="h-4 w-4" />
|
||||||
)}
|
)}
|
||||||
</IconButton>
|
</IconButton>
|
||||||
</Tooltip>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
)}
|
)}
|
||||||
</tbody>
|
</div>
|
||||||
</table>
|
)
|
||||||
) : (
|
) : (
|
||||||
<div className="flex flex-col items-center p-8">
|
<div className="flex flex-col items-center p-8">
|
||||||
<p>{t('trade:no-unsettled')}</p>
|
<p>{t('trade:no-unsettled')}</p>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue