701 lines
25 KiB
TypeScript
701 lines
25 KiB
TypeScript
import { useState, useEffect, useMemo } from 'react'
|
|
import { useTranslation } from 'next-i18next'
|
|
import {
|
|
ArrowSmDownIcon,
|
|
ExternalLinkIcon,
|
|
InformationCircleIcon,
|
|
SaveIcon,
|
|
} from '@heroicons/react/outline'
|
|
import {
|
|
getMarketByBaseSymbolAndKind,
|
|
PerpMarket,
|
|
} from '@blockworks-foundation/mango-client'
|
|
|
|
import TradeHistoryTable from '../TradeHistoryTable'
|
|
import useMangoStore from '../../stores/useMangoStore'
|
|
import {
|
|
Table,
|
|
TrHead,
|
|
Th,
|
|
TrBody,
|
|
Td,
|
|
TableDateDisplay,
|
|
Row,
|
|
} from '../TableElements'
|
|
import { LinkButton } from '../Button'
|
|
import { useSortableData } from '../../hooks/useSortableData'
|
|
import { formatUsdValue, getDelistedMarketKey } from '../../utils'
|
|
import Tooltip from '../Tooltip'
|
|
import { exportDataToCSV } from '../../utils/export'
|
|
import { notify } from '../../utils/notifications'
|
|
import Button from '../Button'
|
|
import { useViewport } from '../../hooks/useViewport'
|
|
import { breakpoints } from '.././TradePageGrid'
|
|
import MobileTableHeader from 'components/mobile/MobileTableHeader'
|
|
|
|
const historyViews = [
|
|
{ label: 'Trades', key: 'Trades' },
|
|
{ label: 'Deposits', key: 'Deposit' },
|
|
{ label: 'Withdrawals', key: 'Withdraw' },
|
|
{ label: 'Liquidations', key: 'Liquidation' },
|
|
]
|
|
|
|
export default function AccountHistory() {
|
|
const { t } = useTranslation('common')
|
|
const [view, setView] = useState('Trades')
|
|
const [history, setHistory] = useState(null)
|
|
const mangoAccount = useMangoStore((s) => s.selectedMangoAccount.current)
|
|
|
|
const mangoAccountPk = useMemo(() => {
|
|
if (mangoAccount) {
|
|
return mangoAccount.publicKey.toString()
|
|
}
|
|
}, [mangoAccount])
|
|
|
|
useEffect(() => {
|
|
const fetchAccountActivity = async () => {
|
|
const response = await fetch(
|
|
`https://mango-transaction-log.herokuapp.com/v3/stats/activity-feed?mango-account=${mangoAccountPk}`
|
|
)
|
|
const parsedResponse = await response.json()
|
|
setHistory(parsedResponse)
|
|
}
|
|
|
|
if (mangoAccountPk) {
|
|
fetchAccountActivity()
|
|
}
|
|
}, [mangoAccountPk])
|
|
|
|
return (
|
|
<>
|
|
<div className="mb-4 flex rounded-md bg-th-bkg-3 px-3 py-2 md:mb-6 md:px-4">
|
|
{historyViews.map(({ label, key }, index) => (
|
|
<div
|
|
className={`py-1 text-xs font-bold md:px-2 md:text-sm ${
|
|
index > 0 ? 'ml-4 md:ml-2' : null
|
|
} default-transition cursor-pointer rounded-md
|
|
${
|
|
view === key
|
|
? `text-th-primary`
|
|
: `text-th-fgd-3 hover:text-th-fgd-1`
|
|
}
|
|
`}
|
|
onClick={() => setView(key)}
|
|
key={key as string}
|
|
>
|
|
{t(label.toLowerCase())}
|
|
</div>
|
|
))}
|
|
</div>
|
|
<ViewContent view={view} history={history} />
|
|
</>
|
|
)
|
|
}
|
|
|
|
const ViewContent = ({ view, history }) => {
|
|
switch (view) {
|
|
case 'Trades':
|
|
return <TradeHistoryTable showActions />
|
|
case 'Deposit':
|
|
return <HistoryTable history={history} view={view} />
|
|
case 'Withdraw':
|
|
return <HistoryTable history={history} view={view} />
|
|
case 'Liquidation':
|
|
return <LiquidationHistoryTable history={history} view={view} />
|
|
default:
|
|
return <TradeHistoryTable showActions />
|
|
}
|
|
}
|
|
|
|
const parseActivityDetails = (activity_details, activity_type, perpMarket) => {
|
|
let assetGained, assetLost
|
|
|
|
const assetSymbol =
|
|
activity_type === 'liquidate_perp_market'
|
|
? 'USD (PERP)'
|
|
: activity_details.asset_symbol
|
|
|
|
const liabSymbol =
|
|
activity_type === 'liquidate_perp_market' ||
|
|
activity_details.liab_type === 'Perp'
|
|
? activity_details.liab_symbol.includes('USDC')
|
|
? 'USD (PERP)'
|
|
: `${activity_details.liab_symbol}-PERP`
|
|
: activity_details.liab_symbol
|
|
|
|
const liabAmount =
|
|
perpMarket && liabSymbol !== 'USD (PERP)'
|
|
? perpMarket.baseLotsToNumber(activity_details.liab_amount)
|
|
: activity_details.liab_amount
|
|
|
|
const assetAmount = activity_details.asset_amount
|
|
|
|
const asset_amount = {
|
|
amount: parseFloat(assetAmount),
|
|
symbol: assetSymbol,
|
|
price: parseFloat(activity_details.asset_price),
|
|
}
|
|
|
|
const liab_amount = {
|
|
amount: parseFloat(liabAmount),
|
|
symbol: liabSymbol,
|
|
price: parseFloat(activity_details.liab_price),
|
|
}
|
|
|
|
switch (activity_type) {
|
|
case 'liquidate_token_and_token':
|
|
return [liab_amount, asset_amount]
|
|
case 'liquidate_token_and_perp':
|
|
if (activity_details.asset_type === 'Token') {
|
|
return [liab_amount, asset_amount]
|
|
} else {
|
|
return [asset_amount, liab_amount]
|
|
}
|
|
case 'liquidate_perp_market':
|
|
if (parseFloat(activity_details.asset_amount) > 0) {
|
|
assetGained = asset_amount
|
|
assetLost = liab_amount
|
|
} else {
|
|
assetGained = liab_amount
|
|
assetLost = asset_amount
|
|
}
|
|
return [assetGained, assetLost]
|
|
default:
|
|
return []
|
|
}
|
|
}
|
|
|
|
const LiquidationHistoryTable = ({ history, view }) => {
|
|
const { t } = useTranslation('common')
|
|
const mangoAccount = useMangoStore((s) => s.selectedMangoAccount.current)
|
|
const markets = useMangoStore((s) => s.selectedMangoGroup.markets)
|
|
const groupConfig = useMangoStore((s) => s.selectedMangoGroup.config)
|
|
const filteredHistory = useMemo(() => {
|
|
return history?.length
|
|
? history.filter((h) => h.activity_type.includes('liquidate'))
|
|
: []
|
|
}, [history, view])
|
|
const { items, requestSort, sortConfig } = useSortableData(filteredHistory)
|
|
|
|
const exportHistoryToCSV = () => {
|
|
const dataToExport = history
|
|
.filter((val) => val.activity_type == view)
|
|
.map((row) => {
|
|
row = row.activity_details
|
|
const timestamp = new Date(row.block_datetime)
|
|
|
|
return {
|
|
date: `${timestamp.toLocaleDateString()} ${timestamp.toLocaleTimeString()}`,
|
|
asset: row.symbol,
|
|
quantity: row.quantity,
|
|
value: row.usd_equivalent,
|
|
}
|
|
})
|
|
const headers = ['Timestamp', 'Asset', 'Quantity', 'Value']
|
|
|
|
if (dataToExport.length == 0) {
|
|
notify({
|
|
title: t('export-data-empty'),
|
|
description: '',
|
|
type: 'info',
|
|
})
|
|
return
|
|
}
|
|
|
|
const tab = historyViews.filter((v) => v.key == view)[0].label
|
|
const title = `${
|
|
mangoAccount?.name || mangoAccount?.publicKey
|
|
}-${tab}-${new Date().toLocaleDateString()}`
|
|
|
|
exportDataToCSV(dataToExport, title, headers, t)
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<div className="flex items-center justify-between pb-3">
|
|
<div className="flex items-center">
|
|
<h4 className="mb-0 text-th-fgd-1">
|
|
{filteredHistory.length === 1
|
|
? t('number-liquidation', { number: filteredHistory.length })
|
|
: t('number-liquidations', { number: filteredHistory.length })}
|
|
</h4>
|
|
<Tooltip
|
|
content={
|
|
<div className="mr-4 text-xs text-th-fgd-3">
|
|
{t('delay-displaying-recent')} {t('use-explorer-one')}
|
|
<a
|
|
href={`https://explorer.solana.com/address/${mangoAccount?.publicKey?.toString()}`}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
{t('use-explorer-two')}
|
|
</a>
|
|
{t('use-explorer-three')}
|
|
</div>
|
|
}
|
|
>
|
|
<InformationCircleIcon className="ml-1.5 h-5 w-5 cursor-pointer text-th-fgd-3" />
|
|
</Tooltip>
|
|
</div>
|
|
<Button
|
|
className={`flex h-8 items-center justify-center whitespace-nowrap pt-0 pb-0 pl-3 pr-3 text-xs`}
|
|
onClick={exportHistoryToCSV}
|
|
>
|
|
<div className={`flex items-center`}>
|
|
<SaveIcon className={`mr-1.5 h-4 w-4`} />
|
|
{t('export-data')}
|
|
</div>
|
|
</Button>
|
|
</div>
|
|
{items.length ? (
|
|
<>
|
|
<Table>
|
|
<thead>
|
|
<TrHead>
|
|
<Th>
|
|
<LinkButton
|
|
className="flex items-center font-normal no-underline"
|
|
onClick={() => requestSort('block_datetime')}
|
|
>
|
|
<span className="font-normal">{t('date')}</span>
|
|
<ArrowSmDownIcon
|
|
className={`default-transition ml-1 h-4 w-4 flex-shrink-0 ${
|
|
sortConfig?.key === 'block_datetime'
|
|
? sortConfig.direction === 'ascending'
|
|
? 'rotate-180 transform'
|
|
: 'rotate-360 transform'
|
|
: null
|
|
}`}
|
|
/>
|
|
</LinkButton>
|
|
</Th>
|
|
|
|
<Th>
|
|
<LinkButton
|
|
className="flex items-center font-normal no-underline"
|
|
onClick={() => requestSort('asset_amount')}
|
|
>
|
|
<span className="font-normal">Asset Lost</span>
|
|
<ArrowSmDownIcon
|
|
className={`default-transition ml-1 h-4 w-4 flex-shrink-0 ${
|
|
sortConfig?.key === 'asset_amount'
|
|
? sortConfig.direction === 'ascending'
|
|
? 'rotate-180 transform'
|
|
: 'rotate-360 transform'
|
|
: null
|
|
}`}
|
|
/>
|
|
</LinkButton>
|
|
</Th>
|
|
<Th>
|
|
<LinkButton
|
|
className="flex items-center font-normal no-underline"
|
|
onClick={() => requestSort('asset_price')}
|
|
>
|
|
<span className="font-normal">Price</span>
|
|
<ArrowSmDownIcon
|
|
className={`default-transition ml-1 h-4 w-4 flex-shrink-0 ${
|
|
sortConfig?.key === 'asset_price'
|
|
? sortConfig.direction === 'ascending'
|
|
? 'rotate-180 transform'
|
|
: 'rotate-360 transform'
|
|
: null
|
|
}`}
|
|
/>
|
|
</LinkButton>
|
|
</Th>
|
|
|
|
<Th>
|
|
<LinkButton
|
|
className="flex items-center font-normal no-underline"
|
|
onClick={() => requestSort('liab_amount')}
|
|
>
|
|
<span className="font-normal">Asset Gained</span>
|
|
<ArrowSmDownIcon
|
|
className={`default-transition ml-1 h-4 w-4 flex-shrink-0 ${
|
|
sortConfig?.key === 'liab_amount'
|
|
? sortConfig.direction === 'ascending'
|
|
? 'rotate-180 transform'
|
|
: 'rotate-360 transform'
|
|
: null
|
|
}`}
|
|
/>
|
|
</LinkButton>
|
|
</Th>
|
|
<Th>
|
|
<LinkButton
|
|
className="flex items-center font-normal no-underline"
|
|
onClick={() => requestSort('liab_price')}
|
|
>
|
|
<span className="font-normal">Price</span>
|
|
<ArrowSmDownIcon
|
|
className={`default-transition ml-1 h-4 w-4 flex-shrink-0 ${
|
|
sortConfig?.key === 'liab_price'
|
|
? sortConfig.direction === 'ascending'
|
|
? 'rotate-180 transform'
|
|
: 'rotate-360 transform'
|
|
: null
|
|
}`}
|
|
/>
|
|
</LinkButton>
|
|
</Th>
|
|
<Th>
|
|
<span></span>
|
|
</Th>
|
|
</TrHead>
|
|
</thead>
|
|
<tbody>
|
|
{items.map(({ activity_details, activity_type }) => {
|
|
let perpMarket: PerpMarket | null = null
|
|
if (activity_type.includes('perp')) {
|
|
const symbol = activity_details.perp_market.split('-')[0]
|
|
|
|
const marketConfig = getMarketByBaseSymbolAndKind(
|
|
groupConfig,
|
|
symbol,
|
|
'perp'
|
|
)
|
|
|
|
if (marketConfig && marketConfig.publicKey) {
|
|
perpMarket = markets[
|
|
marketConfig.publicKey.toString()
|
|
] as PerpMarket
|
|
} else {
|
|
perpMarket = markets[getDelistedMarketKey(symbol)] as PerpMarket
|
|
}
|
|
}
|
|
|
|
const [assetGained, assetLost] = parseActivityDetails(
|
|
activity_details,
|
|
activity_type,
|
|
perpMarket
|
|
)
|
|
|
|
const lostDecimals = assetLost.symbol === 'SOL' ? 9 : 6
|
|
const gainedDecimals = assetGained.symbol === 'SOL' ? 9 : 6
|
|
return (
|
|
<TrBody key={activity_details.signature}>
|
|
<Td>
|
|
<TableDateDisplay
|
|
date={activity_details.block_datetime}
|
|
/>
|
|
</Td>
|
|
|
|
<Td>
|
|
<span className="text-th-red">
|
|
{Math.abs(assetLost.amount).toLocaleString(undefined, {
|
|
maximumFractionDigits: lostDecimals,
|
|
})}{' '}
|
|
</span>
|
|
{assetLost.symbol}
|
|
</Td>
|
|
<Td>
|
|
{assetLost.price.toLocaleString(undefined, {
|
|
maximumFractionDigits: lostDecimals,
|
|
})}
|
|
</Td>
|
|
<Td>
|
|
<span className="text-th-green">
|
|
{Math.abs(assetGained.amount).toLocaleString(
|
|
undefined,
|
|
{
|
|
maximumFractionDigits: gainedDecimals,
|
|
}
|
|
)}{' '}
|
|
</span>
|
|
{assetGained.symbol}
|
|
</Td>
|
|
<Td>
|
|
{assetGained.price.toLocaleString(undefined, {
|
|
maximumFractionDigits: gainedDecimals,
|
|
})}
|
|
</Td>
|
|
<Td>
|
|
<a
|
|
className="default-transition flex items-center justify-end text-th-fgd-2"
|
|
href={`https://explorer.solana.com/tx/${activity_details.signature}`}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
<span>View Transaction</span>
|
|
<ExternalLinkIcon className={`ml-1.5 h-4 w-4`} />
|
|
</a>
|
|
</Td>
|
|
</TrBody>
|
|
)
|
|
})}
|
|
</tbody>
|
|
</Table>
|
|
</>
|
|
) : (
|
|
<div className="w-full rounded-md bg-th-bkg-1 py-6 text-center text-th-fgd-3">
|
|
{t('history-empty')}
|
|
</div>
|
|
)}
|
|
</>
|
|
)
|
|
}
|
|
|
|
const HistoryTable = ({ history, view }) => {
|
|
const { t } = useTranslation('common')
|
|
const mangoAccount = useMangoStore((s) => s.selectedMangoAccount.current)
|
|
const { width } = useViewport()
|
|
const isMobile = width ? width < breakpoints.md : false
|
|
const filteredHistory = useMemo(() => {
|
|
return history?.length
|
|
? history
|
|
.filter((h) => h.activity_type === view)
|
|
.map((h) => h.activity_details)
|
|
: []
|
|
}, [history, view])
|
|
const { items, requestSort, sortConfig } = useSortableData(filteredHistory)
|
|
|
|
const exportHistoryToCSV = () => {
|
|
const dataToExport = history
|
|
.filter((val) => val.activity_type == view)
|
|
.map((row) => {
|
|
row = row.activity_details
|
|
const timestamp = new Date(row.block_datetime)
|
|
|
|
return {
|
|
date: `${timestamp.toLocaleDateString()} ${timestamp.toLocaleTimeString()}`,
|
|
asset: row.symbol,
|
|
quantity: row.quantity,
|
|
value: row.usd_equivalent,
|
|
}
|
|
})
|
|
const headers = ['Timestamp', 'Asset', 'Quantity', 'Value']
|
|
|
|
if (dataToExport.length == 0) {
|
|
notify({
|
|
title: t('export-data-empty'),
|
|
description: '',
|
|
type: 'info',
|
|
})
|
|
return
|
|
}
|
|
|
|
const tab = historyViews.filter((v) => v.key == view)[0].label
|
|
const title = `${
|
|
mangoAccount?.name || mangoAccount?.publicKey
|
|
}-${tab}-${new Date().toLocaleDateString()}`
|
|
|
|
exportDataToCSV(dataToExport, title, headers, t)
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<div className="flex items-center justify-between pb-3">
|
|
<div className="flex items-center">
|
|
<h4 className="mb-0 text-th-fgd-1">
|
|
{filteredHistory.length === 1
|
|
? view === 'Withdraw'
|
|
? t('number-withdrawal', { number: filteredHistory.length })
|
|
: t('number-deposit', { number: filteredHistory.length })
|
|
: view === 'Withdraw'
|
|
? t('number-withdrawals', { number: filteredHistory.length })
|
|
: t('number-deposits', { number: filteredHistory.length })}
|
|
</h4>
|
|
<Tooltip
|
|
content={
|
|
<div className="mr-4 text-xs text-th-fgd-3">
|
|
{t('delay-displaying-recent')} {t('use-explorer-one')}
|
|
<a
|
|
href={`https://explorer.solana.com/address/${mangoAccount?.publicKey?.toString()}`}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
{t('use-explorer-two')}
|
|
</a>
|
|
{t('use-explorer-three')}
|
|
</div>
|
|
}
|
|
>
|
|
<InformationCircleIcon className="ml-1.5 h-5 w-5 cursor-pointer text-th-fgd-3" />
|
|
</Tooltip>
|
|
</div>
|
|
<Button
|
|
className={`flex h-8 items-center justify-center whitespace-nowrap pt-0 pb-0 pl-3 pr-3 text-xs`}
|
|
onClick={exportHistoryToCSV}
|
|
>
|
|
<div className={`flex items-center`}>
|
|
<SaveIcon className={`mr-1.5 h-4 w-4`} />
|
|
{t('export-data')}
|
|
</div>
|
|
</Button>
|
|
</div>
|
|
{items.length ? (
|
|
!isMobile ? (
|
|
<Table>
|
|
<thead>
|
|
<TrHead>
|
|
<Th>
|
|
<LinkButton
|
|
className="flex items-center font-normal no-underline"
|
|
onClick={() => requestSort('block_datetime')}
|
|
>
|
|
<span className="font-normal">{t('date')}</span>
|
|
<ArrowSmDownIcon
|
|
className={`default-transition ml-1 h-4 w-4 flex-shrink-0 ${
|
|
sortConfig?.key === 'block_datetime'
|
|
? sortConfig.direction === 'ascending'
|
|
? 'rotate-180 transform'
|
|
: 'rotate-360 transform'
|
|
: null
|
|
}`}
|
|
/>
|
|
</LinkButton>
|
|
</Th>
|
|
<Th>
|
|
<LinkButton
|
|
className="flex items-center font-normal no-underline"
|
|
onClick={() => requestSort('symbol')}
|
|
>
|
|
<span className="font-normal">{t('asset')}</span>
|
|
<ArrowSmDownIcon
|
|
className={`default-transition ml-1 h-4 w-4 flex-shrink-0 ${
|
|
sortConfig?.key === 'symbol'
|
|
? sortConfig.direction === 'ascending'
|
|
? 'rotate-180 transform'
|
|
: 'rotate-360 transform'
|
|
: null
|
|
}`}
|
|
/>
|
|
</LinkButton>
|
|
</Th>
|
|
<Th>
|
|
<LinkButton
|
|
className="flex items-center font-normal no-underline"
|
|
onClick={() => requestSort('quantity')}
|
|
>
|
|
<span className="font-normal">{t('quantity')}</span>
|
|
<ArrowSmDownIcon
|
|
className={`default-transition ml-1 h-4 w-4 flex-shrink-0 ${
|
|
sortConfig?.key === 'quantity'
|
|
? sortConfig.direction === 'ascending'
|
|
? 'rotate-180 transform'
|
|
: 'rotate-360 transform'
|
|
: null
|
|
}`}
|
|
/>
|
|
</LinkButton>
|
|
</Th>
|
|
<Th>
|
|
<LinkButton
|
|
className="flex items-center font-normal no-underline"
|
|
onClick={() => requestSort('usd_equivalent')}
|
|
>
|
|
<span className="font-normal">{t('value')}</span>
|
|
<ArrowSmDownIcon
|
|
className={`default-transition ml-1 h-4 w-4 flex-shrink-0 ${
|
|
sortConfig?.key === 'usd_equivalent'
|
|
? sortConfig.direction === 'ascending'
|
|
? 'rotate-180 transform'
|
|
: 'rotate-360 transform'
|
|
: null
|
|
}`}
|
|
/>
|
|
</LinkButton>
|
|
</Th>
|
|
<Th>
|
|
<span></span>
|
|
</Th>
|
|
</TrHead>
|
|
</thead>
|
|
<tbody>
|
|
{items.map((activity_details: any) => {
|
|
const {
|
|
signature,
|
|
block_datetime,
|
|
symbol,
|
|
quantity,
|
|
usd_equivalent,
|
|
} = activity_details
|
|
return (
|
|
<TrBody key={signature}>
|
|
<Td>
|
|
<TableDateDisplay date={block_datetime} />
|
|
</Td>
|
|
<Td>
|
|
<div className="flex items-center">
|
|
<img
|
|
alt=""
|
|
width="20"
|
|
height="20"
|
|
src={`/assets/icons/${symbol.toLowerCase()}.svg`}
|
|
className={`mr-2.5`}
|
|
/>
|
|
{symbol}
|
|
</div>
|
|
</Td>
|
|
<Td>{quantity.toLocaleString()}</Td>
|
|
<Td>{formatUsdValue(usd_equivalent)}</Td>
|
|
<Td>
|
|
<a
|
|
className="default-transition flex items-center justify-end text-th-fgd-2"
|
|
href={`https://explorer.solana.com/tx/${signature}`}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
<span>{t('view-transaction')}</span>
|
|
<ExternalLinkIcon className={`ml-1.5 h-4 w-4`} />
|
|
</a>
|
|
</Td>
|
|
</TrBody>
|
|
)
|
|
})}
|
|
</tbody>
|
|
</Table>
|
|
) : (
|
|
<div className="mb-4 border-b border-th-bkg-4">
|
|
<MobileTableHeader
|
|
colOneHeader={t('date')}
|
|
colTwoHeader={t('asset')}
|
|
/>
|
|
{items.map((activity_details: any) => {
|
|
const {
|
|
signature,
|
|
block_datetime,
|
|
symbol,
|
|
quantity,
|
|
usd_equivalent,
|
|
} = activity_details
|
|
return (
|
|
<Row key={signature}>
|
|
<div className="flex w-full items-center justify-between text-th-fgd-1">
|
|
<div className="text-left">
|
|
<TableDateDisplay date={block_datetime} />
|
|
</div>
|
|
<div className="flex items-center">
|
|
<div className="text-right">
|
|
<p className="mb-0 text-th-fgd-2">
|
|
{`${quantity.toLocaleString()} ${symbol}`}
|
|
</p>
|
|
<p className="mb-0 text-xs text-th-fgd-3">
|
|
{formatUsdValue(usd_equivalent)}
|
|
</p>
|
|
</div>
|
|
<a
|
|
className="default-transition flex items-center justify-end text-th-fgd-2"
|
|
href={`https://explorer.solana.com/tx/${signature}`}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
<ExternalLinkIcon className={`ml-3.5 h-5 w-5`} />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</Row>
|
|
)
|
|
})}
|
|
</div>
|
|
)
|
|
) : (
|
|
<div className="w-full rounded-md bg-th-bkg-1 py-6 text-center text-th-fgd-3">
|
|
{t('history-empty')}
|
|
</div>
|
|
)}
|
|
</>
|
|
)
|
|
}
|