2021-04-12 20:39:08 -07:00
|
|
|
import { useState } from 'react'
|
2021-04-05 14:38:59 -07:00
|
|
|
import { TrashIcon } from '@heroicons/react/solid'
|
2021-04-07 14:49:37 -07:00
|
|
|
import { useOpenOrders } from '../hooks/useOpenOrders'
|
2021-04-12 20:39:08 -07:00
|
|
|
import { cancelOrderAndSettle } from '../utils/mango'
|
|
|
|
import Button from './Button'
|
|
|
|
import Loading from './Loading'
|
|
|
|
import { PublicKey } from '@solana/web3.js'
|
|
|
|
import useConnection from '../hooks/useConnection'
|
|
|
|
import useMangoStore from '../stores/useMangoStore'
|
|
|
|
import { notify } from '../utils/notifications'
|
2021-04-05 14:38:59 -07:00
|
|
|
|
|
|
|
const OpenOrdersTable = () => {
|
2021-04-07 14:49:37 -07:00
|
|
|
const openOrders = useOpenOrders()
|
2021-04-12 20:39:08 -07:00
|
|
|
const [cancelId, setCancelId] = useState(null)
|
|
|
|
const { connection, programId } = useConnection()
|
|
|
|
|
|
|
|
const handleCancelOrder = async (order) => {
|
|
|
|
const wallet = useMangoStore.getState().wallet.current
|
|
|
|
const selectedMangoGroup = useMangoStore.getState().selectedMangoGroup
|
|
|
|
.current
|
|
|
|
const selectedMarginAccount = useMangoStore.getState().selectedMarginAccount
|
|
|
|
.current
|
|
|
|
setCancelId(order?.orderId)
|
|
|
|
try {
|
|
|
|
if (!selectedMangoGroup || !selectedMarginAccount) return
|
|
|
|
await cancelOrderAndSettle(
|
|
|
|
connection,
|
|
|
|
new PublicKey(programId),
|
|
|
|
selectedMangoGroup,
|
|
|
|
selectedMarginAccount,
|
|
|
|
wallet,
|
|
|
|
order.market,
|
|
|
|
order
|
|
|
|
)
|
|
|
|
notify({
|
|
|
|
message: 'Order cancelled',
|
|
|
|
type: 'success',
|
|
|
|
})
|
|
|
|
} catch (e) {
|
|
|
|
notify({
|
|
|
|
message: 'Error cancelling order',
|
|
|
|
description: e.message,
|
|
|
|
type: 'error',
|
|
|
|
})
|
|
|
|
return
|
|
|
|
} finally {
|
|
|
|
setCancelId(null)
|
|
|
|
}
|
|
|
|
}
|
2021-04-05 14:38:59 -07:00
|
|
|
|
|
|
|
return (
|
2021-04-12 09:49:02 -07:00
|
|
|
<div className={`flex flex-col py-6`}>
|
|
|
|
<div className={`-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8`}>
|
|
|
|
<div className={`align-middle inline-block min-w-full sm:px-6 lg:px-8`}>
|
2021-04-11 21:17:23 -07:00
|
|
|
{openOrders && openOrders.length > 0 ? (
|
2021-04-07 14:49:37 -07:00
|
|
|
<div
|
2021-04-12 20:39:08 -07:00
|
|
|
className={`shadow overflow-hidden border-b border-th-bkg-2 sm:rounded-md`}
|
2021-04-07 14:49:37 -07:00
|
|
|
>
|
2021-04-12 20:39:08 -07:00
|
|
|
<table className={`min-w-full divide-y divide-th-bkg-2`}>
|
2021-04-07 14:49:37 -07:00
|
|
|
<thead>
|
|
|
|
<tr>
|
|
|
|
<th
|
|
|
|
scope="col"
|
2021-04-12 21:40:26 -07:00
|
|
|
className={`px-6 py-3 text-left text-base font-medium text-th-fgd-2 tracking-wider`}
|
2021-04-05 14:38:59 -07:00
|
|
|
>
|
2021-04-07 14:49:37 -07:00
|
|
|
Market
|
|
|
|
</th>
|
|
|
|
<th
|
|
|
|
scope="col"
|
2021-04-12 21:40:26 -07:00
|
|
|
className={`px-6 py-3 text-left text-base font-medium text-th-fgd-2 tracking-wider`}
|
2021-04-05 14:38:59 -07:00
|
|
|
>
|
2021-04-07 14:49:37 -07:00
|
|
|
Side
|
|
|
|
</th>
|
|
|
|
<th
|
|
|
|
scope="col"
|
2021-04-12 21:40:26 -07:00
|
|
|
className={`px-6 py-3 text-left text-base font-medium text-th-fgd-2 tracking-wider`}
|
2021-04-05 14:38:59 -07:00
|
|
|
>
|
2021-04-07 14:49:37 -07:00
|
|
|
Size
|
|
|
|
</th>
|
|
|
|
<th
|
|
|
|
scope="col"
|
2021-04-12 21:40:26 -07:00
|
|
|
className={`px-6 py-3 text-left text-base font-medium text-th-fgd-2 tracking-wider`}
|
2021-04-05 14:38:59 -07:00
|
|
|
>
|
2021-04-07 14:49:37 -07:00
|
|
|
Price
|
|
|
|
</th>
|
2021-04-12 09:49:02 -07:00
|
|
|
<th scope="col" className={`relative px-6 py-3`}>
|
|
|
|
<span className={`sr-only`}>Edit</span>
|
2021-04-07 14:49:37 -07:00
|
|
|
</th>
|
|
|
|
</tr>
|
|
|
|
</thead>
|
|
|
|
<tbody>
|
|
|
|
{openOrders.map((order, index) => (
|
|
|
|
<tr
|
|
|
|
key={`${order.orderId}${order.side}`}
|
2021-04-12 09:49:02 -07:00
|
|
|
className={`
|
2021-04-12 20:39:08 -07:00
|
|
|
${index % 2 === 0 ? `bg-th-bkg-1` : `bg-th-bkg-3`}
|
2021-04-12 09:49:02 -07:00
|
|
|
`}
|
2021-04-05 14:38:59 -07:00
|
|
|
>
|
2021-04-07 14:49:37 -07:00
|
|
|
<td
|
2021-04-12 21:40:26 -07:00
|
|
|
className={`px-6 py-4 whitespace-nowrap text-sm text-th-fgd-2 font-light`}
|
2021-04-05 14:38:59 -07:00
|
|
|
>
|
2021-04-07 14:49:37 -07:00
|
|
|
{order.marketName}
|
|
|
|
</td>
|
|
|
|
<td
|
2021-04-12 21:40:26 -07:00
|
|
|
className={`px-6 py-4 whitespace-nowrap text-sm text-th-fgd-2 font-light`}
|
2021-04-07 14:49:37 -07:00
|
|
|
>
|
|
|
|
<div
|
2021-04-12 09:49:02 -07:00
|
|
|
className={`rounded inline-block bg-mango-green px-2 py-1 text-mango-dark font-bold`}
|
2021-04-07 14:49:37 -07:00
|
|
|
>
|
|
|
|
{order.side.toUpperCase()}
|
|
|
|
</div>
|
|
|
|
</td>
|
|
|
|
<td
|
2021-04-12 21:40:26 -07:00
|
|
|
className={`px-6 py-4 whitespace-nowrap text-sm text-th-fgd-2 font-light`}
|
2021-04-07 14:49:37 -07:00
|
|
|
>
|
|
|
|
{order.size}
|
|
|
|
</td>
|
|
|
|
<td
|
2021-04-12 21:40:26 -07:00
|
|
|
className={`px-6 py-4 whitespace-nowrap text-sm text-th-fgd-2 font-light`}
|
2021-04-07 14:49:37 -07:00
|
|
|
>
|
|
|
|
{order.price}
|
|
|
|
</td>
|
|
|
|
<td
|
2021-04-12 09:49:02 -07:00
|
|
|
className={`px-6 py-4 opacity-75 whitespace-nowrap text-right text-sm font-medium`}
|
2021-04-07 14:49:37 -07:00
|
|
|
>
|
2021-04-12 20:39:08 -07:00
|
|
|
<Button
|
|
|
|
onClick={() => handleCancelOrder(order)}
|
|
|
|
className={`flex items-center ml-auto rounded text-th-red border border-th-red hover:text-th-red hover:border-th-red py-1`}
|
2021-04-07 14:49:37 -07:00
|
|
|
>
|
2021-04-12 20:39:08 -07:00
|
|
|
{cancelId + '' === order?.orderId + '' ? (
|
|
|
|
<Loading />
|
|
|
|
) : (
|
|
|
|
<TrashIcon className={`h-5 w-5 mr-1`} />
|
|
|
|
)}
|
2021-04-07 14:49:37 -07:00
|
|
|
<span>Cancel Order</span>
|
2021-04-12 20:39:08 -07:00
|
|
|
</Button>
|
2021-04-07 14:49:37 -07:00
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
))}
|
|
|
|
</tbody>
|
|
|
|
</table>
|
|
|
|
</div>
|
|
|
|
) : (
|
|
|
|
<div
|
2021-04-13 16:41:04 -07:00
|
|
|
className={`w-full text-center py-6 text-base bg-th-bkg-1 font-light text-th-fgd-3 rounded-md`}
|
2021-04-07 14:49:37 -07:00
|
|
|
>
|
|
|
|
No open orders
|
|
|
|
</div>
|
|
|
|
)}
|
2021-04-05 14:38:59 -07:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
export default OpenOrdersTable
|