mirror of
https://github.com/MODSetter/SurfSense.git
synced 2026-04-27 01:36:30 +02:00
a052b01a68
- Added UX strategy: Extension for Quick Actions, Frontend for Management - Organized features into 4 phases (Phase 1 completed) - Added 14 new extension features (FR-EXT-07 to FR-EXT-17): * Smart Monitoring: Price alerts, whale tracking, rug pull detection * Trading Intelligence: Token analysis, entry/exit suggestions, portfolio tracker * Content Creation: Chart screenshots, AI thread generator * Productivity: Quick actions, notifications, keyboard shortcuts - Added Feature Responsibility Matrix showing Extension vs Frontend roles - Added Settings Sync strategy (FR-EXT-06) with deep links to frontend - Documented state sync architecture: Extension ↔ Backend API ↔ Frontend
83 lines
3.1 KiB
TypeScript
83 lines
3.1 KiB
TypeScript
import type { TokenData } from "../context/PageContextProvider";
|
|
import { Button } from "@/routes/ui/button";
|
|
import { TrendingUp, Shield, Users } from "lucide-react";
|
|
|
|
interface TokenInfoCardProps {
|
|
tokenData: TokenData;
|
|
}
|
|
|
|
/**
|
|
* Token info card displayed when viewing DexScreener
|
|
* Shows quick token stats and action buttons
|
|
*/
|
|
export function TokenInfoCard({ tokenData }: TokenInfoCardProps) {
|
|
const handleQuickAction = (action: string) => {
|
|
// TODO: Implement quick actions
|
|
console.log("Quick action:", action, tokenData);
|
|
};
|
|
|
|
return (
|
|
<div className="border-b p-4 bg-muted/50">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center">
|
|
<span className="text-lg">🪙</span>
|
|
</div>
|
|
<div className="flex-1">
|
|
<h3 className="font-semibold">
|
|
{tokenData.tokenSymbol || "Unknown Token"}
|
|
</h3>
|
|
<p className="text-xs text-muted-foreground">
|
|
{tokenData.chain} • {tokenData.pairAddress.slice(0, 8)}...
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Token stats */}
|
|
<div className="grid grid-cols-3 gap-2 mt-3 text-sm">
|
|
<div>
|
|
<span className="text-muted-foreground block text-xs">Price</span>
|
|
<p className="font-medium">{tokenData.price || "—"}</p>
|
|
</div>
|
|
<div>
|
|
<span className="text-muted-foreground block text-xs">24h Vol</span>
|
|
<p className="font-medium">{tokenData.volume24h || "—"}</p>
|
|
</div>
|
|
<div>
|
|
<span className="text-muted-foreground block text-xs">Liquidity</span>
|
|
<p className="font-medium">{tokenData.liquidity || "—"}</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Quick actions */}
|
|
<div className="flex gap-2 mt-3">
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
className="flex-1"
|
|
onClick={() => handleQuickAction("safety")}
|
|
>
|
|
<Shield className="mr-1 h-3 w-3" />
|
|
Safety
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
className="flex-1"
|
|
onClick={() => handleQuickAction("holders")}
|
|
>
|
|
<Users className="mr-1 h-3 w-3" />
|
|
Holders
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
className="flex-1"
|
|
onClick={() => handleQuickAction("prediction")}
|
|
>
|
|
<TrendingUp className="mr-1 h-3 w-3" />
|
|
Predict
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|