feat: ui

src/app/my-lp/page.tsx

@@ -74,7 +74,9 @@ function MyLPPageContent() {
 	const [batchClosing, setBatchClosing] = useState(false)
 	const inputNumberRef = useRef<React.ComponentRef<typeof InputNumber>>(null)
 	const [mintList, setMintList] = useState<MintInfo[]>([])
-	const [tokenAddress, setTokenAddress] = useState<string>('')
+	const [tokenAddress, setTokenAddress] = useState<string | undefined>(
+		undefined
+	)
 
 	const fetchLPDetail = async (positions: RecordInfo[]) => {
 		message.loading(`正在查询当前页面仓位详细信息，请稍等...`)
@@ -323,6 +325,13 @@ function MyLPPageContent() {
 		})
 	}
 
+	function getColor(text: string, allCopyAmount: string) {
+		const percentage = (Number(text) / Number(allCopyAmount)) * 100
+		if (percentage > 50) return 'green'
+		else if (percentage > 20) return 'orange'
+		else return 'red'
+	}
+
 	const columns: ColumnsType<RecordInfo> = [
 		{
 			title: 'LP Token',
@@ -367,12 +376,13 @@ function MyLPPageContent() {
 			dataIndex: 'liquidityUsd',
 			key: 'liquidityUsd',
 			render: (text: string, record: RecordInfo) => (
-				<span className="font-mono text-sm">
-					${Number(text).toFixed(2)}
-					<span className="text-sm text-blue-500">
-						({((Number(text) / Number(record.allCopyAmount)) * 100).toFixed(2)}
-						%)
+				<span className="font-mono text-base">
+					<span className="text-orange-500 font-bold mr-2">
+						${Number(text).toFixed(2)}
 					</span>
+					<Tag variant="outlined" color={getColor(text, record.allCopyAmount)}>
+						{((Number(text) / Number(record.allCopyAmount)) * 100).toFixed(2)}%
+					</Tag>
 				</span>
 			),
 		},
@@ -407,7 +417,7 @@ function MyLPPageContent() {
 			key: 'pnlUsd',
 			render: (text: string) => (
 				<span
-					className="font-mono text-sm"
+					className="font-mono text-base"
 					style={{ color: Number(text) > 0 ? '#00B098' : '#FF0000' }}
 				>
 					${Number(text).toFixed(2)}
@@ -487,7 +497,7 @@ function MyLPPageContent() {
 			dataIndex: 'bonusUsd',
 			key: 'bonusUsd',
 			render: (text: string) => (
-				<span className="font-mono text-sm text-orange-500">
+				<span className="font-mono text-base text-orange-500">
 					${Number(text).toFixed(2)}
 				</span>
 			),