|
@@ -165,6 +165,12 @@ export default function DataTable() {
|
|
|
return (apr * 100).toFixed(2) + '%'
|
|
return (apr * 100).toFixed(2) + '%'
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+ const calculateAPRValue = (record: TableData) => {
|
|
|
|
|
+ const useEarnSecond = Number(record.earnedUsd) / (Number(record.positionAgeMs) / 1000)
|
|
|
|
|
+ const apr = useEarnSecond * 60 * 60 * 24 * 365 / Number(record.liquidityUsd)
|
|
|
|
|
+ return apr * 100
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
useEffect(() => {
|
|
useEffect(() => {
|
|
|
init()
|
|
init()
|
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
@@ -183,7 +189,6 @@ export default function DataTable() {
|
|
|
title: 'Liquidity',
|
|
title: 'Liquidity',
|
|
|
dataIndex: 'liquidityUsd',
|
|
dataIndex: 'liquidityUsd',
|
|
|
key: 'liquidityUsd',
|
|
key: 'liquidityUsd',
|
|
|
- sorter: true,
|
|
|
|
|
render: (text: string) => {
|
|
render: (text: string) => {
|
|
|
return <span className="text-orange-500 font-bold text-lg" style={{ color: '#00B098'}}>${Number(text).toFixed(2)}</span>
|
|
return <span className="text-orange-500 font-bold text-lg" style={{ color: '#00B098'}}>${Number(text).toFixed(2)}</span>
|
|
|
}
|
|
}
|
|
@@ -208,6 +213,9 @@ export default function DataTable() {
|
|
|
title: 'APR',
|
|
title: 'APR',
|
|
|
dataIndex: 'apr',
|
|
dataIndex: 'apr',
|
|
|
key: 'apr',
|
|
key: 'apr',
|
|
|
|
|
+ sorter: (a: TableData, b: TableData) => {
|
|
|
|
|
+ return calculateAPRValue(a) - calculateAPRValue(b)
|
|
|
|
|
+ },
|
|
|
render: (_text: string, record: TableData) => {
|
|
render: (_text: string, record: TableData) => {
|
|
|
return <span className="font-bold text-lg" style={{ color: '#00B098'}}>{ calculateAPR(record) }</span>
|
|
return <span className="font-bold text-lg" style={{ color: '#00B098'}}>{ calculateAPR(record) }</span>
|
|
|
}
|
|
}
|
|
@@ -232,6 +240,9 @@ export default function DataTable() {
|
|
|
title: '创建时间',
|
|
title: '创建时间',
|
|
|
dataIndex: 'positionAgeMs',
|
|
dataIndex: 'positionAgeMs',
|
|
|
key: 'positionAgeMs',
|
|
key: 'positionAgeMs',
|
|
|
|
|
+ sorter: (a: TableData, b: TableData) => {
|
|
|
|
|
+ return Number(a.positionAgeMs) - Number(b.positionAgeMs)
|
|
|
|
|
+ },
|
|
|
render: (text: string) => {
|
|
render: (text: string) => {
|
|
|
return <span className="font-bold text-lg">{Math.floor(Number(text) / 1000 / 60 / 60)} 小时</span>
|
|
return <span className="font-bold text-lg">{Math.floor(Number(text) / 1000 / 60 / 60)} 小时</span>
|
|
|
}
|
|
}
|
|
@@ -281,12 +292,12 @@ export default function DataTable() {
|
|
|
shouldResetPage = true
|
|
shouldResetPage = true
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
+ return
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
setSortField(currentSortField)
|
|
setSortField(currentSortField)
|
|
|
const targetPage = shouldResetPage ? 1 : newPagination.current || pagination.current
|
|
const targetPage = shouldResetPage ? 1 : newPagination.current || pagination.current
|
|
|
const targetPageSize = newPagination.pageSize || pagination.pageSize
|
|
const targetPageSize = newPagination.pageSize || pagination.pageSize
|
|
|
-
|
|
|
|
|
setPagination({
|
|
setPagination({
|
|
|
...pagination,
|
|
...pagination,
|
|
|
current: targetPage,
|
|
current: targetPage,
|