blockworks-foundation
/
mango-v4-ui
mirror of https://github.com/blockworks-foundation/mango-v4-ui.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

mobile unsettled

This commit is contained in:
saml33 2022-10-04 14:42:05 +11:00
parent bbc9e5681d
commit b16435441a
2 changed files with 102 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/shared/TabButtons.tsx
View File

@ -29,7 +29,7 @@ const TabButtons: FunctionComponent<TabButtonsProps> = ({
{values.map(([label, count], i) => (
<div className={fillWidth ? 'flex-1' : ''} key={label + i}>
<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'
} ${showBorders ? 'border-r border-th-bkg-3' : ''} ${
label === activeValue

148
components/trade/UnsettledTrades.tsx
View File

@ -8,6 +8,8 @@ import { useWallet } from '@solana/wallet-adapter-react'
import { CheckIcon, LinkIcon } from '@heroicons/react/20/solid'
import Tooltip from '@components/shared/Tooltip'
import Loading from '@components/shared/Loading'
import { useViewport } from 'hooks/useViewport'
import { breakpoints } from 'utils/theme'
const UnsettledTrades = ({
unsettledSpotBalances,
@ -19,6 +21,8 @@ const UnsettledTrades = ({
const group = mangoStore((s) => s.group)
// const jupiterTokens = mangoStore((s) => s.jupiterTokens)
const [settleMktAddress, setSettleMktAddress] = useState<string>('')
const { width } = useViewport()
const showTableView = width ? width > breakpoints.md : false
const handleSettleFunds = useCallback(async (mktAddress: string) => {
const client = mangoStore.getState().client
@ -58,16 +62,68 @@ const UnsettledTrades = ({
return connected ? (
Object.values(unsettledSpotBalances).flat().length ? (
<table className="min-w-full">
<thead>
<tr>
<th className="bg-th-bkg-1 text-left">{t('market')}</th>
<th className="bg-th-bkg-1 text-right">{t('trade:base')}</th>
<th className="bg-th-bkg-1 text-right">{t('trade:quote')}</th>
<th className="bg-th-bkg-1 text-right" />
</tr>
</thead>
<tbody>
showTableView ? (
<table className="min-w-full">
<thead>
<tr>
<th className="bg-th-bkg-1 text-left">{t('market')}</th>
<th className="bg-th-bkg-1 text-right">{t('trade:base')}</th>
<th className="bg-th-bkg-1 text-right">{t('trade:quote')}</th>
<th className="bg-th-bkg-1 text-right" />
</tr>
</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(
([mktAddress, balance]) => {
const market = group.getSerum3MarketByPk(
@ -77,46 +133,44 @@ const UnsettledTrades = ({
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>
<div
key={mktAddress}
className="flex items-center justify-between border-b border-th-bkg-3 p-4"
>
<div className="flex items-center">
<span>{market ? market.name : ''}</span>
</div>
<div className="flex items-center space-x-3">
{unsettledSpotBalances[mktAddress].base ? (
<span className="font-mono text-sm">
{unsettledSpotBalances[mktAddress].base}{' '}
<span className="font-body tracking-wide text-th-fgd-4">
{base}
</span>
</span>
) : null}
{unsettledSpotBalances[mktAddress].quote ? (
<span className="font-mono text-sm">
{unsettledSpotBalances[mktAddress].quote}{' '}
<span className="font-body tracking-wide text-th-fgd-4">
{quote}
</span>
</span>
) : null}
<IconButton onClick={() => handleSettleFunds(mktAddress)}>
{settleMktAddress === mktAddress ? (
<Loading className="h-4 w-4" />
) : (
<CheckIcon className="h-4 w-4" />
)}
</IconButton>
</div>
</div>
)
}
)}
</tbody>
</table>
</div>
)
) : (
<div className="flex flex-col items-center p-8">
<p>{t('trade:no-unsettled')}</p>