color

src/app/components/DataTable.tsx

@@ -2,10 +2,11 @@
 
 import { useEffect, useState } from 'react'
 import { Table, message, Select, Typography, Tag, Button } from 'antd'
-// import type { ColumnsType } from 'antd/es/table'
 
 interface TableData {
   key: string
+  earnedUsd: string
+  positionAgeMs: number
   [key: string]: unknown
 }
 
@@ -136,7 +137,7 @@ export default function DataTable() {
         setData(records.map((item, index) => ({
           key: `${item.id || index}`,
           ...item,
-        })))
+        })) as TableData[])
         setPagination({
           current: current,
           pageSize: pageSize,
@@ -158,6 +159,12 @@ export default function DataTable() {
     await fetchData(1, 100)
   }
 
+  const calculateAPR = (record: TableData) => {
+    const useEarnSecond = Number(record.earnedUsd) / (Number(record.positionAgeMs) / 1000)
+    const apr = useEarnSecond * 60 * 60 * 24 * 365 / Number(record.liquidityUsd)
+    return (apr * 100).toFixed(2) + '%'
+  }
+
   useEffect(() => {
     init()
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -185,9 +192,8 @@ export default function DataTable() {
       title: '复制数',
       dataIndex: 'copies',
       key: 'copies',
-      sorter: true,
       render: (text: string) => {
-        return <span className="text-green-500 font-bold text-lg">{text}</span>
+        return <span className={`font-bold text-lg ${Number(text) === 0 ? 'text-red-500' : 'text-green-500'}`}>{text}</span>
       }
     },
     {
@@ -198,14 +204,14 @@ export default function DataTable() {
         return <span className="text-orange-500 font-bold text-lg">${Number(text).toFixed(2)}</span>
       }
     },
-    // {
-    //   title: 'APR',
-    //   dataIndex: 'bonusUsd',
-    //   key: 'bonusUsd',
-    //   render: (text: string) => {
-    //     return <span className="text-orange-500 font-bold text-lg">{Number(text).toFixed(2)}</span>
-    //   }
-    // },
+    {
+      title: 'APR',
+      dataIndex: 'apr',
+      key: 'apr',
+      render: (_text: string, record: TableData) => {
+        return <span className="font-bold text-lg" style={{ color: '#00B098'}}>{ calculateAPR(record) }</span>
+      }
+    },
     {
       title: 'FEE',
       dataIndex: 'earnedUsd',
@@ -222,15 +228,6 @@ export default function DataTable() {
         return <span className="text-orange-500 font-bold text-lg" style={{ color: Number(text) > 0 ? '#00B098' : '#FF0000'}}>${Number(text).toFixed(2)}</span>
       }
     },
-    // {
-    //   title: '创建时间',
-    //   dataIndex: 'positionAgeMs',
-    //   key: 'positionAgeMs',
-    //   render: (text: string) => {
-    //     // positionAgeMs 转化成时间，格式为小时
-    //     return <span className="font-bold text-lg">{Math.floor(Number(text) / 1000 / 60 / 60)} 小时</span>
-    //   }
-    // },
     {
       title: '创建时间',
       dataIndex: 'positionAgeMs',
@@ -239,14 +236,6 @@ export default function DataTable() {
         return <span className="font-bold text-lg">{Math.floor(Number(text) / 1000 / 60 / 60)} 小时</span>
       }
     },
-    {
-      title: '状态',
-      dataIndex: 'status',
-      key: 'status',
-      render: (status: number) => {
-        return status === 0 ? <Tag color="green">Active</Tag> : <Tag color="red">Inactive</Tag>
-      }
-    },
     {
       title: '操作',
       dataIndex: 'walletAddress',
@@ -351,10 +340,10 @@ export default function DataTable() {
       const result: ApiResponse = await response.json()
       if (result.result) {
         const { records } = result.result.data
-        const childData = records.map((item, index) => ({
+        const childData: TableData[] = records.map((item, index) => ({
           key: `${parentPositionAddress}-${item.id || index}`,
           ...item,
-        }))
+        })) as TableData[]
         setChildTableData((prev) => ({
           ...prev,
           [parentPositionAddress]: childData,
@@ -535,6 +524,9 @@ export default function DataTable() {
         }}
         onChange={handleTableChange}
         scroll={{ x: 'max-content' }}
+        rowClassName={(record: TableData) => {
+          return Number(record.copies) === 0 ? 'bg-red-100' : ''
+        }}
         expandable={{
           expandedRowKeys,
           onExpand: handleExpand,
@@ -551,6 +543,9 @@ export default function DataTable() {
                 pagination={false}
                 size="small"
                 scroll={{ x: 'max-content' }}
+                rowClassName={(childRecord: TableData) => {
+                  return Number(childRecord.copies) === 0 ? 'bg-red-100' : ''
+                }}
               />
             )
           },