-
+
{tx.type}
diff --git a/components/TokenDetails.tsx b/components/TokenDetails.tsx
new file mode 100644
index 0000000..b7b92f1
--- /dev/null
+++ b/components/TokenDetails.tsx
@@ -0,0 +1,188 @@
+'use client';
+
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { getTokenInfo } from '@/lib/solana';
+import { formatNumber } from '@/lib/utils';
+import { Stack } from 'rinlab';
+import Image from 'next/image';
+import { useEffect, useState } from 'react';
+
+interface TokenData {
+ metadata?: {
+ name?: string;
+ symbol?: string;
+ description?: string;
+ image?: string;
+ updateAuthority?: string;
+ attributes?: Array<{
+ trait_type: string;
+ value: string;
+ }>;
+ };
+ price?: number;
+ marketCap?: number;
+ supply?: number;
+ holders?: number;
+ decimals: number;
+ volume24h?: number;
+}
+
+interface Props {
+ mint: string;
+}
+
+export default function TokenDetails({ mint }: Props) {
+ const [data, setData] = useState
(null);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+
+ useEffect(() => {
+ async function fetchData() {
+ try {
+ const tokenInfo = await getTokenInfo(mint);
+ setData(tokenInfo);
+ } catch (err) {
+ setError(err instanceof Error ? err.message : 'Failed to fetch token data');
+ } finally {
+ setLoading(false);
+ }
+ }
+
+ fetchData();
+ }, [mint]);
+
+ if (loading) {
+ return Loading...
;
+ }
+
+ if (error || !data) {
+ return Error: {error || 'Failed to load token data'}
;
+ }
+
+ return (
+
+ {/* Token Overview */}
+
+
+
+ {data.metadata?.image && (
+
+ )}
+
+
+ {data.metadata?.name || 'Unknown Token'}
+
+
+ {data.metadata?.symbol || mint}
+
+
+
+ Price
+
+ ${data.price?.toFixed(4) || 'N/A'}
+
+
+
+ Market Cap
+
+ ${formatNumber(data.marketCap || 0)}
+
+
+
+ Supply
+
+ {formatNumber(data.supply || 0)}
+
+
+
+ Holders
+
+ {formatNumber(data.holders || 0)}
+
+
+
+ Decimals
+
+ {data.decimals}
+
+
+
+ Volume (24h)
+
+ ${formatNumber(data.volume24h || 0)}
+
+
+
+
+ {/* Token Info */}
+
+
+ Token Information
+
+
+
+
+
+
Mint Address
+
+ {mint}
+
+
+ {data.metadata?.updateAuthority && (
+
+
Update Authority
+
+ {data.metadata.updateAuthority}
+
+
+ )}
+
+ {data.metadata?.description && (
+
+
Description
+
+ {data.metadata.description}
+
+
+ )}
+
+
+ {/* Token Attributes */}
+ {data.metadata?.attributes && data.metadata.attributes.length > 0 && (
+
+
+ Attributes
+
+
+
+ {data.metadata.attributes.map((attr, index) => (
+
+
+ {attr.trait_type}
+
+
+ {attr.value}
+
+
+ ))}
+
+ )}
+