351 lines
12 KiB
TypeScript
351 lines
12 KiB
TypeScript
import { Bank, PerpMarket } from '@blockworks-foundation/mango-v4'
|
|
import { LinkButton } from '@components/shared/Button'
|
|
import ConnectEmptyState from '@components/shared/ConnectEmptyState'
|
|
import FormatNumericValue from '@components/shared/FormatNumericValue'
|
|
import SheenLoader from '@components/shared/SheenLoader'
|
|
import {
|
|
SortableColumnHeader,
|
|
Table,
|
|
TableDateDisplay,
|
|
Td,
|
|
Th,
|
|
TrBody,
|
|
TrHead,
|
|
} from '@components/shared/TableElements'
|
|
import TokenLogo from '@components/shared/TokenLogo'
|
|
import MarketLogos from '@components/trade/MarketLogos'
|
|
import { Disclosure, Transition } from '@headlessui/react'
|
|
import { NoSymbolIcon } from '@heroicons/react/20/solid'
|
|
import { useWallet } from '@solana/wallet-adapter-react'
|
|
import mangoStore from '@store/mangoStore'
|
|
import { useInfiniteQuery } from '@tanstack/react-query'
|
|
import useMangoAccount from 'hooks/useMangoAccount'
|
|
import { useSortableData } from 'hooks/useSortableData'
|
|
import { useViewport } from 'hooks/useViewport'
|
|
import { useMemo } from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import {
|
|
MarginFundingFeed,
|
|
isCollateralFundingItem,
|
|
isPerpFundingItem,
|
|
} from 'types'
|
|
import { MANGO_DATA_API_URL, PAGINATION_PAGE_LENGTH } from 'utils/constants'
|
|
import { breakpoints } from 'utils/theme'
|
|
|
|
type FundingItem = {
|
|
asset: string
|
|
amount: number
|
|
marketOrBank: PerpMarket | Bank | undefined
|
|
time: string
|
|
type: string
|
|
value?: number
|
|
}
|
|
|
|
export const fetchMarginFunding = async (
|
|
mangoAccountPk: string,
|
|
offset = 0,
|
|
noLimit?: boolean,
|
|
) => {
|
|
const params = noLimit ? '' : `&limit=${PAGINATION_PAGE_LENGTH}`
|
|
try {
|
|
const response = await fetch(
|
|
`${MANGO_DATA_API_URL}/stats/margin-funding?mango-account=${mangoAccountPk}&offset=${offset}${params}`,
|
|
)
|
|
const parsedResponse = await response.json()
|
|
|
|
if (Array.isArray(parsedResponse)) {
|
|
return parsedResponse
|
|
}
|
|
return []
|
|
} catch (e) {
|
|
console.error('Failed to fetch account margin funding', e)
|
|
}
|
|
}
|
|
|
|
const FundingTable = () => {
|
|
const { t } = useTranslation(['common', 'account'])
|
|
const { mangoAccountAddress } = useMangoAccount()
|
|
const { connected } = useWallet()
|
|
const { width } = useViewport()
|
|
const showTableView = width ? width > breakpoints.md : false
|
|
|
|
const {
|
|
data: fundingData,
|
|
isLoading,
|
|
// isFetching,
|
|
isFetchingNextPage,
|
|
fetchNextPage,
|
|
} = useInfiniteQuery(
|
|
['margin-funding', mangoAccountAddress],
|
|
({ pageParam }) => fetchMarginFunding(mangoAccountAddress, pageParam),
|
|
{
|
|
cacheTime: 1000 * 60 * 10,
|
|
staleTime: 1000 * 60 * 5,
|
|
retry: 3,
|
|
refetchOnWindowFocus: false,
|
|
keepPreviousData: true,
|
|
getNextPageParam: (_lastPage, pages) =>
|
|
pages.length * PAGINATION_PAGE_LENGTH,
|
|
},
|
|
)
|
|
|
|
const tableData: FundingItem[] = useMemo(() => {
|
|
if (!fundingData || !fundingData?.pages.length) return []
|
|
const group = mangoStore.getState().group
|
|
const data: FundingItem[] = []
|
|
fundingData.pages.flat().forEach((item: MarginFundingFeed) => {
|
|
const time = item.date_time
|
|
if (isPerpFundingItem(item)) {
|
|
const asset = item.activity_details.perp_market
|
|
const amount =
|
|
item.activity_details.long_funding +
|
|
item.activity_details.short_funding
|
|
const type = 'Perp'
|
|
const market = group?.getPerpMarketByName(asset)
|
|
const perpFundingItem = {
|
|
asset,
|
|
amount,
|
|
marketOrBank: market,
|
|
type,
|
|
time,
|
|
}
|
|
if (Math.abs(amount) > 0) {
|
|
data.push(perpFundingItem)
|
|
}
|
|
}
|
|
if (isCollateralFundingItem(item)) {
|
|
const asset = item.activity_details.symbol
|
|
const amount = item.activity_details.fee_tokens * -1
|
|
const value = item.activity_details.fee_value_usd * -1
|
|
const type = 'Collateral'
|
|
const bank = group?.banksMapByName.get(asset)?.[0]
|
|
const collateralFundingItem = {
|
|
asset,
|
|
amount,
|
|
marketOrBank: bank,
|
|
type,
|
|
time,
|
|
value,
|
|
}
|
|
data.push(collateralFundingItem)
|
|
}
|
|
})
|
|
data.sort((a, b) => new Date(b.time).getTime() - new Date(a.time).getTime())
|
|
return data
|
|
}, [fundingData])
|
|
|
|
const {
|
|
items: sortedTableData,
|
|
requestSort,
|
|
sortConfig,
|
|
} = useSortableData(tableData)
|
|
|
|
return mangoAccountAddress &&
|
|
(sortedTableData?.length || isLoading || isFetchingNextPage) ? (
|
|
<>
|
|
{showTableView ? (
|
|
<Table>
|
|
<thead>
|
|
<TrHead>
|
|
<Th className="text-left">
|
|
<SortableColumnHeader
|
|
sortKey="time"
|
|
sort={() => requestSort('time')}
|
|
sortConfig={sortConfig}
|
|
title={t('date')}
|
|
/>
|
|
</Th>
|
|
<Th>
|
|
<div className="flex justify-end">
|
|
<SortableColumnHeader
|
|
sortKey="asset"
|
|
sort={() => requestSort('asset')}
|
|
sortConfig={sortConfig}
|
|
title={t('asset')}
|
|
/>
|
|
</div>
|
|
</Th>
|
|
<Th>
|
|
<div className="flex justify-end">
|
|
<SortableColumnHeader
|
|
sortKey="type"
|
|
sort={() => requestSort('type')}
|
|
sortConfig={sortConfig}
|
|
title={t('account:funding-type')}
|
|
/>
|
|
</div>
|
|
</Th>
|
|
<Th>
|
|
<div className="flex justify-end">
|
|
<SortableColumnHeader
|
|
sortKey="amount"
|
|
sort={() => requestSort('amount')}
|
|
sortConfig={sortConfig}
|
|
title={t('amount')}
|
|
/>
|
|
</div>
|
|
</Th>
|
|
</TrHead>
|
|
</thead>
|
|
<tbody>
|
|
{sortedTableData.map((item, i) => {
|
|
const { asset, amount, marketOrBank, time, type, value } = item
|
|
return (
|
|
<TrBody key={asset + amount + i}>
|
|
<Td>
|
|
<TableDateDisplay date={time} />
|
|
</Td>
|
|
<Td>
|
|
<div className="flex items-center justify-end">
|
|
{marketOrBank ? (
|
|
marketOrBank instanceof PerpMarket ? (
|
|
<MarketLogos market={marketOrBank} size="small" />
|
|
) : (
|
|
<div className="mr-1.5">
|
|
<TokenLogo bank={marketOrBank} size={16} />
|
|
</div>
|
|
)
|
|
) : null}
|
|
<p className="font-body">{asset}</p>
|
|
</div>
|
|
</Td>
|
|
<Td>
|
|
<p className="text-right font-body">{type}</p>
|
|
</Td>
|
|
<Td>
|
|
<p>
|
|
{type === 'Perp' ? (
|
|
<span
|
|
className={`flex flex-col items-end ${
|
|
amount > 0 ? 'text-th-up' : 'text-th-down'
|
|
}`}
|
|
>
|
|
<FormatNumericValue value={amount} isUsd />
|
|
</span>
|
|
) : (
|
|
<span className="flex flex-col items-end">
|
|
<span className="text-th-down">
|
|
<FormatNumericValue value={amount} />{' '}
|
|
<span className="font-body text-th-fgd-4">
|
|
{asset}
|
|
</span>
|
|
</span>
|
|
{value ? (
|
|
<span className="text-xs text-th-fgd-4">
|
|
<FormatNumericValue value={value} isUsd />
|
|
</span>
|
|
) : null}
|
|
</span>
|
|
)}
|
|
</p>
|
|
</Td>
|
|
</TrBody>
|
|
)
|
|
})}
|
|
</tbody>
|
|
</Table>
|
|
) : (
|
|
sortedTableData.map((item, i) => {
|
|
const { asset, amount, marketOrBank, time, type, value } = item
|
|
return (
|
|
<Disclosure key={asset + amount + i}>
|
|
<>
|
|
<Disclosure.Button
|
|
className={`w-full border-b border-th-bkg-3 p-4 text-left first:border-t-0 focus:outline-none`}
|
|
>
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<TableDateDisplay date={time} />
|
|
</div>
|
|
<div>
|
|
<div className="mb-0.5 flex items-center justify-end">
|
|
{marketOrBank ? (
|
|
marketOrBank instanceof PerpMarket ? (
|
|
<MarketLogos market={marketOrBank} size="small" />
|
|
) : (
|
|
<div className="mr-1.5">
|
|
<TokenLogo bank={marketOrBank} size={16} />
|
|
</div>
|
|
)
|
|
) : null}
|
|
<p className="text-right">{asset}</p>
|
|
</div>
|
|
<p className="font-mono">
|
|
{type === 'Perp' ? (
|
|
<span
|
|
className={`flex flex-col items-end ${
|
|
amount > 0 ? 'text-th-up' : 'text-th-down'
|
|
}`}
|
|
>
|
|
<FormatNumericValue value={amount} isUsd />
|
|
</span>
|
|
) : (
|
|
<span className="flex flex-col items-end">
|
|
<span className="text-th-down">
|
|
<FormatNumericValue value={amount} />{' '}
|
|
<span className="font-body text-th-fgd-4">
|
|
{asset}
|
|
</span>
|
|
</span>
|
|
{value ? (
|
|
<span className="text-xs text-th-fgd-4">
|
|
<FormatNumericValue value={value} isUsd />
|
|
</span>
|
|
) : null}
|
|
</span>
|
|
)}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</Disclosure.Button>
|
|
<Transition
|
|
enter="transition ease-in duration-200"
|
|
enterFrom="opacity-0"
|
|
enterTo="opacity-100"
|
|
>
|
|
<Disclosure.Panel>
|
|
<div className="mx-4 grid grid-cols-2 gap-4 border-t border-th-bkg-3 py-4">
|
|
<div className="col-span-1">
|
|
<p className="text-xs text-th-fgd-3">
|
|
{t('available')}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</Disclosure.Panel>
|
|
</Transition>
|
|
</>
|
|
</Disclosure>
|
|
)
|
|
})
|
|
)}
|
|
{isLoading || isFetchingNextPage ? (
|
|
<div className="mt-2 space-y-2 px-4 md:px-6">
|
|
{[...Array(20)].map((x, i) => (
|
|
<SheenLoader className="flex flex-1" key={i}>
|
|
<div className="h-16 w-full rounded-md bg-th-bkg-2" />
|
|
</SheenLoader>
|
|
))}
|
|
</div>
|
|
) : null}
|
|
{tableData.length && !(tableData.length % PAGINATION_PAGE_LENGTH) ? (
|
|
<LinkButton className="mx-auto my-6" onClick={() => fetchNextPage()}>
|
|
{t('show-more')}
|
|
</LinkButton>
|
|
) : null}
|
|
</>
|
|
) : mangoAccountAddress || connected ? (
|
|
<div className="flex flex-1 flex-col items-center justify-center">
|
|
<div className="flex flex-col items-center p-8">
|
|
<NoSymbolIcon className="mb-2 h-6 w-6 text-th-fgd-4" />
|
|
<p>{t('account:no-funding')}</p>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="flex flex-1 flex-col items-center justify-center p-8">
|
|
<ConnectEmptyState text={t('account:connect-funding')} />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default FundingTable
|