206 lines
8.6 KiB
TypeScript
206 lines
8.6 KiB
TypeScript
import { FunctionComponent } from 'react'
|
|
import { Table, Thead, Tbody, Tr, Th, Td } from 'react-super-responsive-table'
|
|
import { ArrowSmDownIcon, ExternalLinkIcon } from '@heroicons/react/outline'
|
|
import { useSortableData } from '../hooks/useSortableData'
|
|
import { LinkButton } from './Button'
|
|
import useMangoStore from '../stores/useMangoStore'
|
|
import { tokenPrecision } from '../utils'
|
|
|
|
interface DepositWithdrawHistoryTableProps {
|
|
type: 'deposits' | 'withdrawals'
|
|
}
|
|
|
|
const DepositWithdrawHistoryTable: FunctionComponent<DepositWithdrawHistoryTableProps> =
|
|
({ type }) => {
|
|
const depositHistory = useMangoStore((s) => s.depositHistory)
|
|
const withdrawalHistory = useMangoStore((s) => s.withdrawalHistory)
|
|
const history = type === 'deposits' ? depositHistory : withdrawalHistory
|
|
|
|
const { items, requestSort, sortConfig } = useSortableData(history)
|
|
|
|
const renderTransactionTime = (timestamp) => {
|
|
const date = new Date(timestamp)
|
|
return (
|
|
<>
|
|
<div>{date.toLocaleDateString()}</div>
|
|
<div className="text-xs text-th-fgd-3">
|
|
{date.toLocaleTimeString()}
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className={`flex flex-col py-4`}>
|
|
<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`}
|
|
>
|
|
{history.length > 0 ? (
|
|
<div
|
|
className={`overflow-hidden border-b border-th-bkg-2 sm:rounded-md`}
|
|
>
|
|
<Table className={`min-w-full divide-y divide-th-bkg-2`}>
|
|
<Thead>
|
|
<Tr className="text-th-fgd-3 text-xs">
|
|
<Th
|
|
scope="col"
|
|
className={`px-6 py-3 text-left font-normal`}
|
|
>
|
|
<LinkButton
|
|
className="flex items-center no-underline"
|
|
onClick={() => requestSort('block_time')}
|
|
>
|
|
Date/Time
|
|
<ArrowSmDownIcon
|
|
className={`default-transition flex-shrink-0 h-4 w-4 ml-1 ${
|
|
sortConfig?.key === 'block_time'
|
|
? sortConfig.direction === 'ascending'
|
|
? 'transform rotate-180'
|
|
: 'transform rotate-360'
|
|
: null
|
|
}`}
|
|
/>
|
|
</LinkButton>
|
|
</Th>
|
|
<Th
|
|
scope="col"
|
|
className={`px-6 py-3 text-left font-normal`}
|
|
>
|
|
<LinkButton
|
|
className="flex items-center no-underline"
|
|
onClick={() => requestSort('symbol')}
|
|
>
|
|
Asset
|
|
<ArrowSmDownIcon
|
|
className={`default-transition flex-shrink-0 h-4 w-4 ml-1 ${
|
|
sortConfig?.key === 'symbol'
|
|
? sortConfig.direction === 'ascending'
|
|
? 'transform rotate-180'
|
|
: 'transform rotate-360'
|
|
: null
|
|
}`}
|
|
/>
|
|
</LinkButton>
|
|
</Th>
|
|
<Th
|
|
scope="col"
|
|
className={`px-6 py-3 text-left font-normal`}
|
|
>
|
|
<LinkButton
|
|
className="flex items-center no-underline"
|
|
onClick={() => requestSort('quantity')}
|
|
>
|
|
Quantity
|
|
<ArrowSmDownIcon
|
|
className={`default-transition flex-shrink-0 h-4 w-4 ml-1 ${
|
|
sortConfig?.key === 'quantity'
|
|
? sortConfig.direction === 'ascending'
|
|
? 'transform rotate-180'
|
|
: 'transform rotate-360'
|
|
: null
|
|
}`}
|
|
/>
|
|
</LinkButton>
|
|
</Th>
|
|
<Th
|
|
scope="col"
|
|
className={`px-6 py-3 text-left font-normal`}
|
|
>
|
|
<LinkButton
|
|
className="flex items-center no-underline"
|
|
onClick={() => requestSort('usd_equivalent')}
|
|
>
|
|
Value
|
|
<ArrowSmDownIcon
|
|
className={`default-transition flex-shrink-0 h-4 w-4 ml-1 ${
|
|
sortConfig?.key === 'usd_equivalent'
|
|
? sortConfig.direction === 'ascending'
|
|
? 'transform rotate-180'
|
|
: 'transform rotate-360'
|
|
: null
|
|
}`}
|
|
/>
|
|
</LinkButton>
|
|
</Th>
|
|
</Tr>
|
|
</Thead>
|
|
<Tbody>
|
|
{items.map((transaction, index) => (
|
|
<Tr
|
|
key={`${index}`}
|
|
className={`border-b border-th-bkg-3
|
|
${index % 2 === 0 ? `bg-th-bkg-3` : `bg-th-bkg-2`}
|
|
`}
|
|
>
|
|
<Td
|
|
className={`px-6 py-3 whitespace-nowrap text-sm text-th-fgd-1`}
|
|
>
|
|
{renderTransactionTime(transaction.block_datetime)}
|
|
</Td>
|
|
<Td
|
|
className={`px-6 py-3 whitespace-nowrap text-sm text-th-fgd-1`}
|
|
>
|
|
<div className="flex items-center">
|
|
<img
|
|
alt=""
|
|
width="20"
|
|
height="20"
|
|
src={`/assets/icons/${transaction.symbol.toLowerCase()}.svg`}
|
|
className={`mr-2.5`}
|
|
/>
|
|
<div>{transaction.symbol}</div>
|
|
</div>
|
|
</Td>
|
|
<Td
|
|
className={`px-6 py-3 whitespace-nowrap text-sm text-th-fgd-1`}
|
|
>
|
|
{transaction.quantity.toLocaleString(undefined, {
|
|
maximumFractionDigits:
|
|
tokenPrecision[transaction.symbol],
|
|
})}
|
|
</Td>
|
|
<Td
|
|
className={`px-6 py-3 whitespace-nowrap text-sm text-th-fgd-1`}
|
|
>
|
|
$
|
|
{transaction.usd_equivalent.toLocaleString(
|
|
undefined,
|
|
{
|
|
maximumFractionDigits: 2,
|
|
}
|
|
)}
|
|
</Td>
|
|
<Td
|
|
className={`px-6 py-3 whitespace-nowrap text-sm text-th-fgd-1`}
|
|
>
|
|
<a
|
|
className="default-transition flex items-center justify-end text-th-fgd-2"
|
|
href={`https://explorer.solana.com/tx/${transaction.signature}`}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
<span>View Transaction</span>
|
|
<ExternalLinkIcon className={`h-4 w-4 ml-1.5`} />
|
|
</a>
|
|
</Td>
|
|
</Tr>
|
|
))}
|
|
</Tbody>
|
|
</Table>
|
|
</div>
|
|
) : (
|
|
<div
|
|
className={`w-full text-center py-6 bg-th-bkg-1 text-th-fgd-3 rounded-md`}
|
|
>
|
|
{type === 'deposits' ? 'No deposits' : 'No withdrawals'}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default DepositWithdrawHistoryTable
|