163 lines
5.5 KiB
TypeScript
163 lines
5.5 KiB
TypeScript
import xw from 'xwind'
|
|
import { useBalances } from '../hooks/useBalances'
|
|
import useMangoStore from '../stores/useMangoStore'
|
|
import { settleAll } from '../utils/mango'
|
|
import useConnection from '../hooks/useConnection'
|
|
import Button from '../components/Button'
|
|
|
|
const BalancesTable = () => {
|
|
const balances = useBalances()
|
|
const { programId, connection } = useConnection()
|
|
|
|
async function handleSettleAll() {
|
|
const markets = Object.values(
|
|
useMangoStore.getState().selectedMangoGroup.markets
|
|
)
|
|
const marginAccount = useMangoStore.getState().selectedMarginAccount.current
|
|
const mangoGroup = useMangoStore.getState().selectedMangoGroup.current
|
|
const wallet = useMangoStore.getState().wallet.current
|
|
|
|
try {
|
|
await settleAll(
|
|
connection,
|
|
programId,
|
|
mangoGroup,
|
|
marginAccount,
|
|
markets,
|
|
wallet
|
|
)
|
|
// notify({
|
|
// message: 'Successfully settled funds',
|
|
// type: 'info',
|
|
// });
|
|
} catch (e) {
|
|
console.warn('Error settling all:', e)
|
|
if (e.message === 'No unsettled funds') {
|
|
// notify({
|
|
// message: 'There are no unsettled funds',
|
|
// type: 'error',
|
|
// });
|
|
} else {
|
|
// notify({
|
|
// message: 'Error settling funds',
|
|
// description: e.message,
|
|
// type: 'error',
|
|
// });
|
|
}
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div css={xw`flex flex-col py-6`}>
|
|
<div css={xw`-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8`}>
|
|
<div css={xw`align-middle inline-block min-w-full sm:px-6 lg:px-8`}>
|
|
{balances.length ? (
|
|
<div css={xw`text-right`}>
|
|
<Button onClick={handleSettleAll}>Settle All</Button>
|
|
</div>
|
|
) : null}
|
|
{balances.length ? (
|
|
<div
|
|
css={xw`shadow overflow-hidden border-b border-mango-dark-light sm:rounded-md`}
|
|
>
|
|
<table css={xw`min-w-full divide-y divide-mango-dark-light`}>
|
|
<thead>
|
|
<tr>
|
|
<th
|
|
scope="col"
|
|
css={xw`px-6 py-3 text-left text-base font-medium text-gray-300 tracking-wider`}
|
|
>
|
|
Coin
|
|
</th>
|
|
<th
|
|
scope="col"
|
|
css={xw`px-6 py-3 text-left text-base font-medium text-gray-300 tracking-wider`}
|
|
>
|
|
Deposits
|
|
</th>
|
|
<th
|
|
scope="col"
|
|
css={xw`px-6 py-3 text-left text-base font-medium text-gray-300 tracking-wider`}
|
|
>
|
|
Borrows
|
|
</th>
|
|
<th
|
|
scope="col"
|
|
css={xw`px-6 py-3 text-left text-base font-medium text-gray-300 tracking-wider`}
|
|
>
|
|
In Orders
|
|
</th>
|
|
<th
|
|
scope="col"
|
|
css={xw`px-6 py-3 text-left text-base font-medium text-gray-300 tracking-wider`}
|
|
>
|
|
Unsettled
|
|
</th>
|
|
<th
|
|
scope="col"
|
|
css={xw`px-6 py-3 text-left text-base font-medium text-gray-300 tracking-wider`}
|
|
>
|
|
Net
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{balances.map((balance, index) => (
|
|
<tr
|
|
key={`${index}`}
|
|
css={
|
|
index % 2 === 0
|
|
? xw`bg-mango-dark-light`
|
|
: xw`bg-mango-dark-lighter`
|
|
}
|
|
>
|
|
<td
|
|
css={xw`px-6 py-4 whitespace-nowrap text-sm text-gray-300 font-light`}
|
|
>
|
|
{balance.coin}
|
|
</td>
|
|
<td
|
|
css={xw`px-6 py-4 whitespace-nowrap text-sm text-gray-300 font-light`}
|
|
>
|
|
{balance.marginDeposits}
|
|
</td>
|
|
<td
|
|
css={xw`px-6 py-4 whitespace-nowrap text-sm text-gray-300 font-light`}
|
|
>
|
|
{balance.borrows}
|
|
</td>
|
|
<td
|
|
css={xw`px-6 py-4 whitespace-nowrap text-sm text-gray-300 font-light`}
|
|
>
|
|
{balance.orders}
|
|
</td>
|
|
<td
|
|
css={xw`px-6 py-4 whitespace-nowrap text-sm text-gray-300 font-light`}
|
|
>
|
|
{balance.unsettled}
|
|
</td>
|
|
<td
|
|
css={xw`px-6 py-4 whitespace-nowrap text-sm text-gray-300 font-light`}
|
|
>
|
|
{balance.net}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
) : (
|
|
<div
|
|
css={xw`w-full text-center py-6 text-lg bg-mango-dark-light font-light text-mango-med`}
|
|
>
|
|
No balances
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default BalancesTable
|