disagree range

src/app/components/DataTable.tsx

@@ -85,9 +85,9 @@ function DataTableContent() {
 		retCode: 0,
 		result: {
 			data: {
-				records: []
-			}
-		}
+				records: [],
+			},
+		},
 	})
 
 	const [selectedPoolAddress, setSelectedPoolAddress] = useState<string>(
@@ -112,12 +112,21 @@ function DataTableContent() {
 	// const [priceLower, setPriceLower] = useState<number>(0)
 	// const [priceUpper, setPriceUpper] = useState<number>(0)
 	const [balanceUsd, setBalanceUsd] = useState<number>(0)
+	const [currentPrice, setCurrentPrice] = useState<number>(0)
 
-	const fetchBalance = async (tokenAddress: string, userAddress: string, price: number) => {
-		const response = await fetch(`/api/my-lp/getBalanceByToken?tokenAddress=${tokenAddress}&accountAddress=${userAddress}`)
+	const fetchBalance = async (
+		tokenAddress: string,
+		userAddress: string,
+		price: number
+	) => {
+		const response = await fetch(
+			`/api/my-lp/getBalanceByToken?tokenAddress=${tokenAddress}&accountAddress=${userAddress}`
+		)
 		const result = await response.json()
 		setBalance(result.result.data.balance)
-		setBalanceUsd(Number((Number(result.result.data.balance) * price).toFixed(2)))
+		setBalanceUsd(
+			Number((Number(result.result.data.balance) * price).toFixed(2))
+		)
 	}
 
 	function fetchAddress() {
@@ -132,8 +141,13 @@ function DataTableContent() {
 			})
 	}
 
-	const getTokenBalance = async (result: PoolsListResponse, selectedPoolAddress: string) => {
-		const poolInfo = result?.result?.data?.records?.find((option) => option.poolAddress === selectedPoolAddress)
+	const getTokenBalance = async (
+		result: PoolsListResponse,
+		selectedPoolAddress: string
+	) => {
+		const poolInfo = result?.result?.data?.records?.find(
+			(option) => option.poolAddress === selectedPoolAddress
+		)
 		const symbolA = poolInfo?.mintA?.mintInfo?.symbol || ''
 		const symbolB = poolInfo?.mintB?.mintInfo?.symbol || ''
 		let label = ''
@@ -148,6 +162,7 @@ function DataTableContent() {
 			label = symbolA
 			price = poolInfo?.mintA?.price || 0
 		}
+		setCurrentPrice(price)
 		setTokenName(label || '')
 		fetchBalance(address, userAddressRef.current, price)
 	}
@@ -352,8 +367,9 @@ function DataTableContent() {
 						positionAddress: record.positionAddress,
 						nftMintAddress: record.nftMintAddress,
 						maxUsdValue: quickCopyAmount,
-						// priceLower,
-						// priceUpper,
+						isInrange:
+							currentPrice > Number(record.priceRange?.split('-')[0]) &&
+							currentPrice < Number(record.priceRange?.split('-')[1]),
 					}),
 				})
 
@@ -435,8 +451,14 @@ function DataTableContent() {
 			title: '区间',
 			dataIndex: 'priceRange',
 			key: 'priceRange',
-			render: (text: string) => {
-				return <span className="font-bold text-lg">{text}</span>
+			render: (text: string, record: TableData) => {
+				if (record.isInrange) {
+					return (
+						<span className="font-bold text-lg text-green-500">{text}</span>
+					)
+				} else {
+					return <span className="font-bold text-lg text-red-500">{text}</span>
+				}
 			},
 		},
 		{
@@ -822,7 +844,9 @@ function DataTableContent() {
 						(option?.label ?? '').toLowerCase().includes(input.toLowerCase())
 					}
 				/>
-				<span className="ml-2 mr-2 text-lg font-bold text-green-500">余额：{balance} {tokenName} (${balanceUsd})</span>
+				<span className="ml-2 mr-2 text-lg font-bold text-green-500">
+					余额：{balance} {tokenName} (${balanceUsd})
+				</span>
 				<Button type="primary" className="ml-2 mr-2" onClick={handleRefresh}>
 					刷新
 				</Button>