add activity details view
This commit is contained in:
saml33
parent
e81d048bee
commit
b6513b70d1
|
|
@ -1,76 +1,129 @@
|
|||
import { LinkButton } from '@components/shared/Button'
|
||||
import mangoStore from '@store/mangoStore'
|
||||
import { IconButton } from '@components/shared/Button'
|
||||
import { ArrowLeftIcon } from '@heroicons/react/20/solid'
|
||||
import mangoStore, {
|
||||
DepositWithdrawFeedItem,
|
||||
LiquidationFeedItem,
|
||||
} from '@store/mangoStore'
|
||||
import dayjs from 'dayjs'
|
||||
import useLocalStorageState from 'hooks/useLocalStorageState'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
import { useCallback, useState } from 'react'
|
||||
import { formatFixedDecimals } from 'utils/numbers'
|
||||
import Image from 'next/image'
|
||||
import { EXPLORERS } from 'pages/settings'
|
||||
import { useState } from 'react'
|
||||
import { PREFERRED_EXPLORER_KEY } from 'utils/constants'
|
||||
import { formatDecimal, formatFixedDecimals } from 'utils/numbers'
|
||||
import ActivityFeedTable from './ActivityFeedTable'
|
||||
|
||||
const ActivityFeed = () => {
|
||||
const { t } = useTranslation(['common', 'activity'])
|
||||
const activityFeed = mangoStore((s) => s.activityFeed.feed)
|
||||
const actions = mangoStore((s) => s.actions)
|
||||
const loadActivityFeed = mangoStore((s) => s.activityFeed.loading)
|
||||
const [offset, setOffset] = useState(0)
|
||||
const [showActivityDetail, setShowActivityDetail] = useState(null)
|
||||
|
||||
const handleShowMore = useCallback(() => {
|
||||
const mangoAccount = mangoStore.getState().mangoAccount.current
|
||||
if (!mangoAccount) return
|
||||
setOffset(offset + 25)
|
||||
actions.fetchActivityFeed(mangoAccount.publicKey.toString(), offset + 25)
|
||||
}, [actions, offset])
|
||||
const handleShowActivityDetails = (activity: any) => {
|
||||
setShowActivityDetail(activity)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<table className="min-w-full">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="bg-th-bkg-1 text-left">{t('date')}</th>
|
||||
<th className="bg-th-bkg-1 text-right">{t('activity:activity')}</th>
|
||||
<th className="bg-th-bkg-1 text-right">{t('activity:credit')}</th>
|
||||
<th className="bg-th-bkg-1 text-right">{t('activity:debit')}</th>
|
||||
<th className="bg-th-bkg-1 text-right">
|
||||
{t('activity:activity-value')}
|
||||
</th>
|
||||
{/* <th className="bg-th-bkg-1 text-right">{t('account-value')}</th> */}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{activityFeed.map((activity, i) => {
|
||||
const { activity_type, block_datetime } = activity
|
||||
const { symbol, quantity, usd_equivalent } =
|
||||
activity.activity_details
|
||||
const credit =
|
||||
activity_type === 'Deposit' ? `${quantity} ${symbol}` : '0'
|
||||
const debit =
|
||||
activity_type === 'Withdraw' ? `${quantity} ${symbol}` : '0'
|
||||
return (
|
||||
<tr key={block_datetime + i} className="text-sm">
|
||||
<td>
|
||||
<p className="font-body tracking-wide">
|
||||
{dayjs(block_datetime).format('ddd D MMM')}
|
||||
</p>
|
||||
<p className="text-xs text-th-fgd-3">
|
||||
{dayjs(block_datetime).format('h:mma')}
|
||||
</p>
|
||||
</td>
|
||||
<td className="text-right">{activity_type}</td>
|
||||
<td className="text-right">{credit}</td>
|
||||
<td className="text-right">{debit}</td>
|
||||
<td className="text-right">
|
||||
{formatFixedDecimals(usd_equivalent, true)}
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
{activityFeed.length % 25 === 0 ? (
|
||||
<div className="flex justify-center pt-6">
|
||||
<LinkButton onClick={handleShowMore}>Show More</LinkButton>
|
||||
</div>
|
||||
) : null}
|
||||
</>
|
||||
return !showActivityDetail ? (
|
||||
<ActivityFeedTable
|
||||
activityFeed={activityFeed}
|
||||
handleShowActivityDetails={handleShowActivityDetails}
|
||||
/>
|
||||
) : (
|
||||
<ActivityDetails
|
||||
activity={showActivityDetail}
|
||||
setShowActivityDetail={setShowActivityDetail}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export default ActivityFeed
|
||||
|
||||
const ActivityDetails = ({
|
||||
activity,
|
||||
setShowActivityDetail,
|
||||
}: {
|
||||
activity: LiquidationFeedItem
|
||||
setShowActivityDetail: (x: any) => void
|
||||
}) => {
|
||||
console.log(activity)
|
||||
const { t } = useTranslation(['common', 'activity'])
|
||||
const [preferredExplorer] = useLocalStorageState(
|
||||
PREFERRED_EXPLORER_KEY,
|
||||
EXPLORERS[0]
|
||||
)
|
||||
const { block_datetime } = activity
|
||||
const {
|
||||
asset_amount,
|
||||
asset_price,
|
||||
asset_symbol,
|
||||
liab_amount,
|
||||
liab_price,
|
||||
liab_symbol,
|
||||
signature,
|
||||
} = activity.activity_details
|
||||
return (
|
||||
<div>
|
||||
<div className="flex items-center p-6">
|
||||
<IconButton
|
||||
className="mr-4"
|
||||
onClick={() => setShowActivityDetail(null)}
|
||||
>
|
||||
<ArrowLeftIcon className="h-5 w-5" />
|
||||
</IconButton>
|
||||
<h2 className="text-lg">Liquidation Details</h2>
|
||||
</div>
|
||||
<div className="grid grid-cols-3 gap-6 px-6">
|
||||
<div className="col-span-1">
|
||||
<p className="mb-0.5 text-sm">{t('date')}</p>
|
||||
<p className="text-th-fgd-1">
|
||||
{dayjs(block_datetime).format('ddd D MMM')}
|
||||
</p>
|
||||
<p className="text-xs text-th-fgd-3">
|
||||
{dayjs(block_datetime).format('h:mma')}
|
||||
</p>
|
||||
</div>
|
||||
<div className="col-span-1">
|
||||
<p className="mb-0.5 text-sm">{t('activity:asset-liquidated')}</p>
|
||||
<p className="text-th-fgd-1">
|
||||
{`${formatDecimal(
|
||||
asset_amount
|
||||
)} ${asset_symbol} at ${formatFixedDecimals(asset_price, true)}`}
|
||||
</p>
|
||||
<p className="text-xs text-th-fgd-3">
|
||||
{formatFixedDecimals(asset_price * asset_amount, true)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="col-span-1">
|
||||
<p className="mb-0.5 text-sm">{t('activity:asset-returned')}</p>
|
||||
<p className="text-th-fgd-1">
|
||||
{`${formatDecimal(
|
||||
liab_amount
|
||||
)} ${liab_symbol} at ${formatFixedDecimals(liab_price, true)}`}
|
||||
</p>
|
||||
<p className="text-xs text-th-fgd-3">
|
||||
{formatFixedDecimals(liab_price * liab_amount, true)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-span-3 mt-8 flex justify-center border-y border-th-bkg-3 py-3">
|
||||
{/* <p className="mb-0.5 text-sm">{t('transaction')}</p> */}
|
||||
<a
|
||||
className="default-transition flex items-center text-th-fgd-1 hover:text-th-fgd-3"
|
||||
href={`${preferredExplorer.url}${signature}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
alt=""
|
||||
width="20"
|
||||
height="20"
|
||||
src={`/explorer-logos/${preferredExplorer.name}.png`}
|
||||
/>
|
||||
<span className="ml-2 text-base">{`View on ${t(
|
||||
`settings:${preferredExplorer.name}`
|
||||
)}`}</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,199 @@
|
|||
import { LinkButton } from '@components/shared/Button'
|
||||
import Tooltip from '@components/shared/Tooltip'
|
||||
import { BoltIcon, ChevronRightIcon, LinkIcon } from '@heroicons/react/20/solid'
|
||||
import { useWallet } from '@solana/wallet-adapter-react'
|
||||
import mangoStore, {
|
||||
DepositWithdrawFeedItem,
|
||||
LiquidationFeedItem,
|
||||
} from '@store/mangoStore'
|
||||
import dayjs from 'dayjs'
|
||||
import useLocalStorageState from 'hooks/useLocalStorageState'
|
||||
import { capitalize } from 'lodash'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
import Image from 'next/image'
|
||||
import { EXPLORERS } from 'pages/settings'
|
||||
import { useCallback, useState } from 'react'
|
||||
import { PREFERRED_EXPLORER_KEY } from 'utils/constants'
|
||||
import { formatDecimal, formatFixedDecimals } from 'utils/numbers'
|
||||
|
||||
const ActivityFeedTable = ({
|
||||
activityFeed,
|
||||
handleShowActivityDetails,
|
||||
}: {
|
||||
activityFeed: any
|
||||
handleShowActivityDetails: (x: LiquidationFeedItem) => void
|
||||
}) => {
|
||||
const { t } = useTranslation(['common', 'activity'])
|
||||
const { connected } = useWallet()
|
||||
// const activityFeed = mangoStore((s) => s.activityFeed.feed)
|
||||
const actions = mangoStore((s) => s.actions)
|
||||
const [offset, setOffset] = useState(0)
|
||||
const [preferredExplorer] = useLocalStorageState(
|
||||
PREFERRED_EXPLORER_KEY,
|
||||
EXPLORERS[0]
|
||||
)
|
||||
|
||||
const handleShowMore = useCallback(() => {
|
||||
const mangoAccount = mangoStore.getState().mangoAccount.current
|
||||
if (!mangoAccount) return
|
||||
setOffset(offset + 25)
|
||||
actions.fetchActivityFeed(mangoAccount.publicKey.toString(), offset + 25)
|
||||
}, [actions, offset])
|
||||
|
||||
const getCreditAndDebit = (activity: any) => {
|
||||
const { activity_type } = activity
|
||||
let credit = '0'
|
||||
let debit = '0'
|
||||
if (activity_type === 'liquidate_token_with_token') {
|
||||
const { side, liab_amount, liab_symbol, asset_amount, asset_symbol } =
|
||||
activity.activity_details
|
||||
if (side === 'liqee') {
|
||||
credit = `${formatDecimal(liab_amount)} ${liab_symbol}`
|
||||
debit = `${formatDecimal(asset_amount)} ${asset_symbol}`
|
||||
} else {
|
||||
credit = `${formatDecimal(asset_amount)} ${asset_symbol}`
|
||||
debit = `${formatDecimal(liab_amount)} ${liab_symbol}`
|
||||
}
|
||||
}
|
||||
if (activity_type === 'deposit') {
|
||||
const { symbol, quantity } = activity.activity_details
|
||||
credit = `${formatDecimal(quantity)} ${symbol}`
|
||||
debit = '0'
|
||||
}
|
||||
if (activity_type === 'withdraw') {
|
||||
const { symbol, quantity } = activity.activity_details
|
||||
credit = '0'
|
||||
debit = `${formatDecimal(quantity)} ${symbol}`
|
||||
}
|
||||
return { credit, debit }
|
||||
}
|
||||
|
||||
const getValue = (activity: any) => {
|
||||
const { activity_type } = activity
|
||||
let value = 0
|
||||
if (activity_type === 'liquidate_token_with_token') {
|
||||
const { side, liab_amount, liab_price, asset_amount, asset_price } =
|
||||
activity.activity_details
|
||||
if (side === 'liqee') {
|
||||
value = asset_amount * asset_price - liab_amount * liab_price
|
||||
} else {
|
||||
value = liab_amount * liab_price - asset_amount * asset_price
|
||||
}
|
||||
}
|
||||
if (activity_type === 'deposit' || activity_type === 'withdraw') {
|
||||
const { usd_equivalent } = activity.activity_details
|
||||
value = usd_equivalent
|
||||
}
|
||||
return value
|
||||
}
|
||||
|
||||
return connected ? (
|
||||
activityFeed.length ? (
|
||||
<>
|
||||
<table className="min-w-full">
|
||||
<thead>
|
||||
<tr className="sticky top-0 z-10">
|
||||
<th className="bg-th-bkg-1 text-left">{t('date')}</th>
|
||||
<th className="bg-th-bkg-1 text-right">
|
||||
{t('activity:activity')}
|
||||
</th>
|
||||
<th className="bg-th-bkg-1 text-right">{t('activity:credit')}</th>
|
||||
<th className="bg-th-bkg-1 text-right">{t('activity:debit')}</th>
|
||||
<th className="bg-th-bkg-1 text-right">
|
||||
{t('activity:activity-value')}
|
||||
</th>
|
||||
<th className="bg-th-bkg-1 text-right">{t('explorer')}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{activityFeed.map((activity: any, i: number) => {
|
||||
const { activity_type, block_datetime } = activity
|
||||
const { signature } = activity.activity_details
|
||||
const isLiquidation =
|
||||
activity_type === 'liquidate_token_with_token'
|
||||
const activityName = isLiquidation ? 'liquidation' : activity_type
|
||||
const amounts = getCreditAndDebit(activity)
|
||||
const value = getValue(activity)
|
||||
return (
|
||||
<tr
|
||||
key={block_datetime + i}
|
||||
className={`default-transition text-sm hover:bg-th-bkg-2 ${
|
||||
isLiquidation ? 'cursor-pointer' : ''
|
||||
}`}
|
||||
onClick={
|
||||
isLiquidation
|
||||
? () => handleShowActivityDetails(activity)
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
<td>
|
||||
<p className="font-body tracking-wide">
|
||||
{dayjs(block_datetime).format('ddd D MMM')}
|
||||
</p>
|
||||
<p className="text-xs text-th-fgd-3">
|
||||
{dayjs(block_datetime).format('h:mma')}
|
||||
</p>
|
||||
</td>
|
||||
<td className="text-right">{capitalize(activityName)}</td>
|
||||
<td className="text-right">{amounts.credit}</td>
|
||||
<td className="text-right">{amounts.debit}</td>
|
||||
<td className="text-right">
|
||||
{formatFixedDecimals(value, true)}
|
||||
</td>
|
||||
<td>
|
||||
{activity_type !== 'liquidate_token_with_token' ? (
|
||||
<div className="flex items-center justify-end">
|
||||
<Tooltip
|
||||
content={`View on ${t(
|
||||
`settings:${preferredExplorer.name}`
|
||||
)}`}
|
||||
placement="top-end"
|
||||
>
|
||||
<a
|
||||
href={`${preferredExplorer.url}${signature}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<div className="h-6 w-6">
|
||||
<Image
|
||||
alt=""
|
||||
width="24"
|
||||
height="24"
|
||||
src={`/explorer-logos/${preferredExplorer.name}.png`}
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
</Tooltip>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center justify-end">
|
||||
<ChevronRightIcon className="h-6 w-6 text-th-fgd-3" />
|
||||
</div>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
{activityFeed.length % 25 === 0 ? (
|
||||
<div className="flex justify-center pt-6">
|
||||
<LinkButton onClick={handleShowMore}>Show More</LinkButton>
|
||||
</div>
|
||||
) : null}
|
||||
</>
|
||||
) : (
|
||||
<div className="flex flex-col items-center p-8">
|
||||
<BoltIcon className="mb-2 h-6 w-6 text-th-fgd-4" />
|
||||
<p>No account activity found...</p>
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
<div className="flex flex-col items-center p-8">
|
||||
<LinkIcon className="mb-2 h-6 w-6 text-th-fgd-4" />
|
||||
<p>Connect to view your account activity</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ActivityFeedTable
|
||||
|
|
@ -73,7 +73,7 @@ export interface PerformanceDataItem {
|
|||
transfer_balance: number
|
||||
}
|
||||
|
||||
export interface ActivityFeedItem {
|
||||
export interface DepositWithdrawFeedItem {
|
||||
activity_details: {
|
||||
block_datetime: string
|
||||
mango_account: string
|
||||
|
|
@ -88,6 +88,25 @@ export interface ActivityFeedItem {
|
|||
symbol: string
|
||||
}
|
||||
|
||||
export interface LiquidationFeedItem {
|
||||
activity_details: {
|
||||
asset_amount: number
|
||||
asset_price: number
|
||||
asset_symbol: string
|
||||
block_datetime: string
|
||||
liab_amount: number
|
||||
liab_price: number
|
||||
liab_symbol: string
|
||||
mango_account: string
|
||||
mango_group: string
|
||||
side: string
|
||||
signature: string
|
||||
}
|
||||
activity_type: string
|
||||
block_datetime: string
|
||||
symbol: string
|
||||
}
|
||||
|
||||
export interface SwapHistoryItem {
|
||||
block_datetime: string
|
||||
mango_account: string
|
||||
|
|
@ -118,7 +137,7 @@ interface ProfileDetails {
|
|||
|
||||
export type MangoStore = {
|
||||
activityFeed: {
|
||||
feed: ActivityFeedItem[]
|
||||
feed: Array<DepositWithdrawFeedItem | LiquidationFeedItem>
|
||||
loading: boolean
|
||||
}
|
||||
coingeckoPrices: {
|
||||
|
|
@ -375,7 +394,7 @@ const mangoStore = create<MangoStore>()(
|
|||
})
|
||||
try {
|
||||
const response = await fetch(
|
||||
`https://mango-transaction-log.herokuapp.com/v4/stats/activity-feed?mango-account=${mangoAccountPk}&offset=${offset}&limit=25`
|
||||
`https://mango-transaction-log.herokuapp.com/v4/stats/activity-feed?mango-account=8nHXz5wvZw6mVySbgXLfc9tx68ep9aGSy44ZaNiY9Viv&offset=${offset}&limit=25`
|
||||
)
|
||||
const parsedResponse = await response.json()
|
||||
const entries: any = Object.entries(parsedResponse).sort((a, b) =>
|
||||
|
|
@ -389,7 +408,10 @@ const mangoStore = create<MangoStore>()(
|
|||
})
|
||||
.filter((x: string) => x)
|
||||
.sort(
|
||||
(a: ActivityFeedItem, b: ActivityFeedItem) =>
|
||||
(
|
||||
a: DepositWithdrawFeedItem | LiquidationFeedItem,
|
||||
b: DepositWithdrawFeedItem | LiquidationFeedItem
|
||||
) =>
|
||||
dayjs(b.block_datetime).unix() -
|
||||
dayjs(a.block_datetime).unix()
|
||||
)
|
||||
|
|
|
|||
Loading…
Reference in New Issue