mirror of
https://github.com/MODSetter/SurfSense.git
synced 2026-04-28 18:36:23 +02:00
feat: add new widgets for holder analysis, live token data, price, market overview, and trending tokens
- Implemented HolderAnalysisWidget to display holder distribution and concentration risk. - Created LiveTokenDataWidget for real-time market data including price changes and transaction activity. - Added LiveTokenPriceWidget to show current token price and changes over various timeframes. - Developed MarketOverviewWidget to provide a summary of market statistics and token prices. - Introduced TrendingTokensWidget to showcase trending tokens with price changes and volume. - Added TradingSuggestionToolUI for AI-powered trading suggestions with detailed entry, targets, and stop-loss information. - Enhanced settings components for better user configuration options in the SurfSense Browser Extension.
This commit is contained in:
API Test Bot
parent
2bf40ab5ce
commit
8bc092e40e
23 changed files with 2173 additions and 111 deletions
|
|
@ -0,0 +1,170 @@
|
|||
import { cn } from "~/lib/utils";
|
||||
import { Bell, AlertTriangle, TrendingUp, TrendingDown, Wallet, Fish, X, Check } from "lucide-react";
|
||||
import { Button } from "@/routes/ui/button";
|
||||
|
||||
export interface Notification {
|
||||
id: string;
|
||||
type: "price_alert" | "whale_activity" | "rug_warning" | "portfolio" | "news";
|
||||
priority: "high" | "medium" | "low";
|
||||
title: string;
|
||||
message: string;
|
||||
tokenSymbol?: string;
|
||||
timestamp: Date;
|
||||
read: boolean;
|
||||
actionUrl?: string;
|
||||
}
|
||||
|
||||
export interface NotificationsListProps {
|
||||
notifications: Notification[];
|
||||
onMarkRead: (id: string) => void;
|
||||
onMarkAllRead: () => void;
|
||||
onDismiss: (id: string) => void;
|
||||
onNotificationClick?: (notification: Notification) => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const getNotificationIcon = (type: Notification["type"]) => {
|
||||
switch (type) {
|
||||
case "price_alert":
|
||||
return <TrendingUp className="h-4 w-4" />;
|
||||
case "whale_activity":
|
||||
return <Fish className="h-4 w-4" />;
|
||||
case "rug_warning":
|
||||
return <AlertTriangle className="h-4 w-4" />;
|
||||
case "portfolio":
|
||||
return <Wallet className="h-4 w-4" />;
|
||||
case "news":
|
||||
return <Bell className="h-4 w-4" />;
|
||||
default:
|
||||
return <Bell className="h-4 w-4" />;
|
||||
}
|
||||
};
|
||||
|
||||
const getPriorityColor = (priority: Notification["priority"]) => {
|
||||
switch (priority) {
|
||||
case "high":
|
||||
return "border-l-red-500 bg-red-500/5";
|
||||
case "medium":
|
||||
return "border-l-yellow-500 bg-yellow-500/5";
|
||||
case "low":
|
||||
return "border-l-muted-foreground bg-muted/30";
|
||||
default:
|
||||
return "border-l-muted-foreground";
|
||||
}
|
||||
};
|
||||
|
||||
const formatTime = (date: Date): string => {
|
||||
const now = new Date();
|
||||
const diff = now.getTime() - date.getTime();
|
||||
const minutes = Math.floor(diff / 60000);
|
||||
const hours = Math.floor(diff / 3600000);
|
||||
const days = Math.floor(diff / 86400000);
|
||||
|
||||
if (minutes < 1) return "Just now";
|
||||
if (minutes < 60) return `${minutes}m ago`;
|
||||
if (hours < 24) return `${hours}h ago`;
|
||||
return `${days}d ago`;
|
||||
};
|
||||
|
||||
/**
|
||||
* NotificationsList - Display and manage notifications
|
||||
* Part of Epic 4.4 - Smart Notifications
|
||||
*/
|
||||
export function NotificationsList({
|
||||
notifications,
|
||||
onMarkRead,
|
||||
onMarkAllRead,
|
||||
onDismiss,
|
||||
onNotificationClick,
|
||||
className,
|
||||
}: NotificationsListProps) {
|
||||
const unreadCount = notifications.filter((n) => !n.read).length;
|
||||
|
||||
return (
|
||||
<div className={cn("rounded-lg border bg-card", className)}>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between p-3 border-b">
|
||||
<div className="flex items-center gap-2">
|
||||
<Bell className="h-4 w-4 text-primary" />
|
||||
<span className="font-medium text-sm">Notifications</span>
|
||||
{unreadCount > 0 && (
|
||||
<span className="bg-primary text-primary-foreground text-xs px-1.5 py-0.5 rounded-full">
|
||||
{unreadCount}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{unreadCount > 0 && (
|
||||
<Button variant="ghost" size="sm" className="text-xs" onClick={onMarkAllRead}>
|
||||
<Check className="h-3 w-3 mr-1" />
|
||||
Mark all read
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Notifications List */}
|
||||
<div className="max-h-[400px] overflow-y-auto">
|
||||
{notifications.length === 0 ? (
|
||||
<div className="p-8 text-center text-muted-foreground text-sm">
|
||||
<Bell className="h-8 w-8 mx-auto mb-2 opacity-50" />
|
||||
<p>No notifications yet</p>
|
||||
</div>
|
||||
) : (
|
||||
notifications.map((notification) => (
|
||||
<div
|
||||
key={notification.id}
|
||||
className={cn(
|
||||
"flex items-start gap-3 p-3 border-b border-l-2 cursor-pointer hover:bg-muted/50 transition-colors",
|
||||
getPriorityColor(notification.priority),
|
||||
!notification.read && "bg-primary/5"
|
||||
)}
|
||||
onClick={() => {
|
||||
if (!notification.read) onMarkRead(notification.id);
|
||||
onNotificationClick?.(notification);
|
||||
}}
|
||||
>
|
||||
<div className={cn(
|
||||
"p-1.5 rounded-full",
|
||||
notification.type === "rug_warning" ? "bg-red-500/20 text-red-500" :
|
||||
notification.type === "whale_activity" ? "bg-blue-500/20 text-blue-500" :
|
||||
notification.type === "price_alert" ? "bg-green-500/20 text-green-500" :
|
||||
"bg-muted text-muted-foreground"
|
||||
)}>
|
||||
{getNotificationIcon(notification.type)}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className={cn("text-sm font-medium", !notification.read && "text-foreground")}>
|
||||
{notification.title}
|
||||
</span>
|
||||
{notification.tokenSymbol && (
|
||||
<span className="text-xs bg-muted px-1.5 py-0.5 rounded">
|
||||
{notification.tokenSymbol}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground line-clamp-2 mt-0.5">
|
||||
{notification.message}
|
||||
</p>
|
||||
<span className="text-[10px] text-muted-foreground mt-1 block">
|
||||
{formatTime(notification.timestamp)}
|
||||
</span>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-6 w-6 p-0 opacity-0 group-hover:opacity-100"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onDismiss(notification.id);
|
||||
}}
|
||||
>
|
||||
<X className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue