apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-04-28 10:26:33 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

feat(epic-3): implement Trading Intelligence components with mock data

Browse source 
- Add TokenAnalysisPanel.tsx for comprehensive token analysis
  * AI-generated summary with buy/hold/sell/avoid recommendation
  * Contract analysis (verified, renounced, proxy, source code)
  * Holder distribution with top 10% concentration
  * Liquidity analysis with LP lock status and duration
  * Volume trends and trading activity metrics
  * Price history (ATH/ATL, 7d/30d changes, volatility)
  * Social sentiment analysis (Twitter, Telegram, Reddit)

- Add TradingSuggestionPanel.tsx for entry/exit suggestions
  * Entry zone recommendations with reasoning
  * Multiple take-profit targets (3 levels) with confidence scores
  * Stop-loss suggestions with invalidation reasoning
  * Risk/reward ratio calculation and assessment
  * Technical analysis levels (support/resistance)
  * AI reasoning and invalidation conditions

- Add PortfolioPanel.tsx for portfolio tracking
  * Total portfolio value with 24h change
  * Holdings list with current value and P&L tracking
  * Performance analytics (best/worst performers, win rate)
  * Quick actions per token (analyze, alert, view)
  * Manual position entry support

- Add comprehensive mock data for all Epic 3 components
  * MOCK_TOKEN_ANALYSIS with realistic metrics
  * MOCK_TRADING_SUGGESTION with entry/exit levels
  * MOCK_PORTFOLIO with 5 holdings and analytics

Implements Stories 3.1, 3.2, 3.3 from Epic 3: Trading Intelligence
This commit is contained in:
API Test Bot 2026-02-04 02:36:35 +07:00
parent db22cd4a64
commit ea2080619b
4 changed files with 1199 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

282
surfsense_browser_extension/sidepanel/analysis/TradingSuggestionPanel.tsx Normal file
View file

@ -0,0 +1,282 @@
import { useState } from "react";
import { cn } from "~/lib/utils";
import {
TrendingUp,
TrendingDown,
Target,
AlertCircle,
Info,
DollarSign,
Percent,
Clock,
} from "lucide-react";
import { Button } from "@/routes/ui/button";
import { ChainIcon } from "../components/shared/ChainIcon";
export interface TradingSuggestion {
tokenAddress: string;
tokenSymbol: string;
tokenName: string;
chain: string;
currentPrice: number;
timestamp: Date;
entry: {
min: number;
max: number;
reasoning: string;
};
targets: {
level: number;
price: number;
percentGain: number;
confidence: number;
}[];
stopLoss: {
price: number;
percentLoss: number;
reasoning: string;
};
riskReward: number;
overallConfidence: number;
technicalLevels: {
support: number[];
resistance: number[];
};
reasoning: string[];
invalidationConditions: string[];
}
export interface TradingSuggestionPanelProps {
/** Trading suggestion data */
suggestion: TradingSuggestion;
/** Callback when "Set Alerts" is clicked */
onSetAlerts?: () => void;
/** Callback when "View Chart" is clicked */
onViewChart?: () => void;
/** Additional class names */
className?: string;
}
/**
* TradingSuggestionPanel - AI-powered entry/exit suggestions
*
* Features:
* - Entry zone recommendations
* - Multiple take-profit targets
* - Stop-loss suggestions
* - Risk/reward ratio calculation
* - Technical analysis levels
* - AI reasoning and invalidation conditions
*/
export function TradingSuggestionPanel({
suggestion,
onSetAlerts,
onViewChart,
className,
}: TradingSuggestionPanelProps) {
const [showDetails, setShowDetails] = useState(false);
const formatPrice = (price: number) => {
if (price < 0.01) return `$${price.toFixed(8)}`;
if (price < 1) return `$${price.toFixed(6)}`;
return `$${price.toFixed(4)}`;
};
const getRiskRewardColor = (ratio: number) => {
if (ratio >= 3) return "text-green-600 dark:text-green-400";
if (ratio >= 2) return "text-yellow-600 dark:text-yellow-400";
return "text-red-600 dark:text-red-400";
};
const getRiskRewardLabel = (ratio: number) => {
if (ratio >= 3) return "Excellent";
if (ratio >= 2) return "Good";
if (ratio >= 1.5) return "Fair";
return "Poor";
};
return (
<div className={cn("flex flex-col h-full", className)}>
{/* Header */}
<div className="flex items-center justify-between p-4 border-b">
<div className="flex items-center gap-2">
<Target className="h-5 w-5 text-primary" />
<div>
<h2 className="font-semibold">Trading Suggestion</h2>
<p className="text-xs text-muted-foreground">
{suggestion.tokenSymbol} • <ChainIcon chain={suggestion.chain} size="xs" className="inline" />
</p>
</div>
</div>
<div className="text-right">
<div className="text-xs text-muted-foreground">Confidence</div>
<div className="font-bold text-sm">{suggestion.overallConfidence}%</div>
</div>
</div>
{/* Content */}
<div className="flex-1 overflow-y-auto p-4 space-y-4">
{/* Current Price */}
<div className="p-3 bg-muted/50 rounded-lg">
<div className="text-xs text-muted-foreground mb-1">Current Price</div>
<div className="font-bold text-2xl">{formatPrice(suggestion.currentPrice)}</div>
</div>
{/* Entry Zone */}
<div className="space-y-2">
<div className="flex items-center gap-2">
<div className="w-3 h-3 rounded-full bg-green-500" />
<h3 className="font-semibold text-sm">Entry Zone</h3>
</div>
<div className="p-3 bg-green-500/10 border border-green-500/20 rounded-lg">
<div className="flex items-center justify-between mb-2">
<span className="font-bold text-lg text-green-600 dark:text-green-400">
{formatPrice(suggestion.entry.min)} - {formatPrice(suggestion.entry.max)}
</span>
</div>
<p className="text-xs text-muted-foreground">{suggestion.entry.reasoning}</p>
</div>
</div>
{/* Targets */}
<div className="space-y-2">
<div className="flex items-center gap-2">
<Target className="h-4 w-4 text-muted-foreground" />
<h3 className="font-semibold text-sm">Take Profit Targets</h3>
</div>
<div className="space-y-2">
{suggestion.targets.map((target) => (
<div
key={target.level}
className="p-3 bg-blue-500/10 border border-blue-500/20 rounded-lg"
>
<div className="flex items-center justify-between mb-1">
<span className="font-semibold text-sm">🎯 Target {target.level}</span>
<span className="text-xs text-muted-foreground">
Confidence: {target.confidence}%
</span>
</div>
<div className="flex items-center justify-between">
<span className="font-bold text-blue-600 dark:text-blue-400">
{formatPrice(target.price)}
</span>
<span className="font-semibold text-sm text-green-600 dark:text-green-400">
+{target.percentGain.toFixed(1)}%
</span>
</div>
</div>
))}
</div>
</div>
{/* Stop Loss */}
<div className="space-y-2">
<div className="flex items-center gap-2">
<div className="w-3 h-3 rounded-full bg-red-500" />
<h3 className="font-semibold text-sm">Stop Loss</h3>
</div>
<div className="p-3 bg-red-500/10 border border-red-500/20 rounded-lg">
<div className="flex items-center justify-between mb-2">
<span className="font-bold text-lg text-red-600 dark:text-red-400">
{formatPrice(suggestion.stopLoss.price)}
</span>
<span className="font-semibold text-sm text-red-600 dark:text-red-400">
{suggestion.stopLoss.percentLoss.toFixed(1)}%
</span>
</div>
<p className="text-xs text-muted-foreground">{suggestion.stopLoss.reasoning}</p>
</div>
</div>
{/* Risk/Reward */}
<div className="p-4 bg-muted/50 rounded-lg">
<div className="flex items-center justify-between mb-2">
<span className="text-sm font-medium">Risk/Reward Ratio</span>
<span className={cn("font-bold text-lg", getRiskRewardColor(suggestion.riskReward))}>
1:{suggestion.riskReward.toFixed(1)}
</span>
</div>
<div className="flex items-center gap-2">
<div className={cn(
"px-2 py-1 rounded text-xs font-medium",
suggestion.riskReward >= 3 ? "bg-green-500/20 text-green-600 dark:text-green-400" :
suggestion.riskReward >= 2 ? "bg-yellow-500/20 text-yellow-600 dark:text-yellow-400" :
"bg-red-500/20 text-red-600 dark:text-red-400"
)}>
{getRiskRewardLabel(suggestion.riskReward)}
</div>
</div>
</div>
{/* Why? Section */}
<div className="space-y-2">
<button
className="flex items-center gap-2 w-full"
onClick={() => setShowDetails(!showDetails)}
>
<Info className="h-4 w-4 text-muted-foreground" />
<h3 className="font-semibold text-sm">Why?</h3>
<div className={cn(
"ml-auto transition-transform",
showDetails && "rotate-180"
)}>
▼
</div>
</button>
{showDetails && (
<div className="space-y-3 pl-6">
<div>
<h4 className="text-xs font-semibold text-muted-foreground mb-1">Reasoning:</h4>
<ul className="space-y-1">
{suggestion.reasoning.map((reason, i) => (
<li key={i} className="text-xs flex items-start gap-2">
<span className="text-green-600 dark:text-green-400">•</span>
<span>{reason}</span>
</li>
))}
</ul>
</div>
<div>
<h4 className="text-xs font-semibold text-muted-foreground mb-1">Invalidation Conditions:</h4>
<ul className="space-y-1">
{suggestion.invalidationConditions.map((condition, i) => (
<li key={i} className="text-xs flex items-start gap-2">
<AlertCircle className="h-3 w-3 text-red-600 dark:text-red-400 mt-0.5" />
<span>{condition}</span>
</li>
))}
</ul>
</div>
</div>
)}
</div>
</div>
{/* Footer Actions */}
<div className="border-t p-3 space-y-2">
<Button
variant="default"
className="w-full"
onClick={onSetAlerts}
>
Set Alerts for These Levels
</Button>
<Button
variant="outline"
className="w-full"
onClick={onViewChart}
>
View Chart
</Button>
</div>
</div>
);
}