mirror of
https://github.com/MODSetter/SurfSense.git
synced 2026-04-28 10:26:33 +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,225 @@
|
|||
import { useState } from "react";
|
||||
import { cn } from "~/lib/utils";
|
||||
import { Bell, BellOff, Volume2, VolumeX, Clock, Filter, ChevronRight } from "lucide-react";
|
||||
import { Button } from "@/routes/ui/button";
|
||||
|
||||
export interface NotificationSettings {
|
||||
enabled: boolean;
|
||||
sound: boolean;
|
||||
quietHoursEnabled: boolean;
|
||||
quietHoursStart: string;
|
||||
quietHoursEnd: string;
|
||||
groupNotifications: boolean;
|
||||
priorities: {
|
||||
high: boolean;
|
||||
medium: boolean;
|
||||
low: boolean;
|
||||
};
|
||||
categories: {
|
||||
priceAlerts: boolean;
|
||||
whaleActivity: boolean;
|
||||
rugPullWarnings: boolean;
|
||||
portfolioUpdates: boolean;
|
||||
newsAlerts: boolean;
|
||||
};
|
||||
}
|
||||
|
||||
export interface NotificationSettingsPanelProps {
|
||||
settings: NotificationSettings;
|
||||
onSettingsChange: (settings: NotificationSettings) => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const DEFAULT_SETTINGS: NotificationSettings = {
|
||||
enabled: true,
|
||||
sound: true,
|
||||
quietHoursEnabled: false,
|
||||
quietHoursStart: "22:00",
|
||||
quietHoursEnd: "08:00",
|
||||
groupNotifications: true,
|
||||
priorities: {
|
||||
high: true,
|
||||
medium: true,
|
||||
low: false,
|
||||
},
|
||||
categories: {
|
||||
priceAlerts: true,
|
||||
whaleActivity: true,
|
||||
rugPullWarnings: true,
|
||||
portfolioUpdates: true,
|
||||
newsAlerts: false,
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* NotificationSettingsPanel - Configure notification preferences
|
||||
* Part of Epic 4.4 - Smart Notifications
|
||||
*/
|
||||
export function NotificationSettingsPanel({
|
||||
settings = DEFAULT_SETTINGS,
|
||||
onSettingsChange,
|
||||
className,
|
||||
}: NotificationSettingsPanelProps) {
|
||||
const updateSettings = (partial: Partial<NotificationSettings>) => {
|
||||
onSettingsChange({ ...settings, ...partial });
|
||||
};
|
||||
|
||||
const updatePriority = (key: keyof NotificationSettings["priorities"], value: boolean) => {
|
||||
onSettingsChange({
|
||||
...settings,
|
||||
priorities: { ...settings.priorities, [key]: value },
|
||||
});
|
||||
};
|
||||
|
||||
const updateCategory = (key: keyof NotificationSettings["categories"], value: boolean) => {
|
||||
onSettingsChange({
|
||||
...settings,
|
||||
categories: { ...settings.categories, [key]: value },
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={cn("rounded-lg border bg-card p-4 space-y-4", className)}>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Bell className="h-5 w-5 text-primary" />
|
||||
<span className="font-medium">Notification Settings</span>
|
||||
</div>
|
||||
<Button
|
||||
variant={settings.enabled ? "default" : "outline"}
|
||||
size="sm"
|
||||
onClick={() => updateSettings({ enabled: !settings.enabled })}
|
||||
>
|
||||
{settings.enabled ? (
|
||||
<>
|
||||
<Bell className="h-4 w-4 mr-1" /> On
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<BellOff className="h-4 w-4 mr-1" /> Off
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{settings.enabled && (
|
||||
<>
|
||||
{/* Sound Toggle */}
|
||||
<div className="flex items-center justify-between py-2 border-b">
|
||||
<div className="flex items-center gap-2">
|
||||
{settings.sound ? (
|
||||
<Volume2 className="h-4 w-4 text-muted-foreground" />
|
||||
) : (
|
||||
<VolumeX className="h-4 w-4 text-muted-foreground" />
|
||||
)}
|
||||
<span className="text-sm">Sound</span>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => updateSettings({ sound: !settings.sound })}
|
||||
>
|
||||
{settings.sound ? "On" : "Off"}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Quiet Hours */}
|
||||
<div className="space-y-2 py-2 border-b">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Clock className="h-4 w-4 text-muted-foreground" />
|
||||
<span className="text-sm">Quiet Hours</span>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => updateSettings({ quietHoursEnabled: !settings.quietHoursEnabled })}
|
||||
>
|
||||
{settings.quietHoursEnabled ? "On" : "Off"}
|
||||
</Button>
|
||||
</div>
|
||||
{settings.quietHoursEnabled && (
|
||||
<div className="flex items-center gap-2 ml-6 text-xs text-muted-foreground">
|
||||
<input
|
||||
type="time"
|
||||
value={settings.quietHoursStart}
|
||||
onChange={(e) => updateSettings({ quietHoursStart: e.target.value })}
|
||||
className="bg-muted rounded px-2 py-1"
|
||||
/>
|
||||
<span>to</span>
|
||||
<input
|
||||
type="time"
|
||||
value={settings.quietHoursEnd}
|
||||
onChange={(e) => updateSettings({ quietHoursEnd: e.target.value })}
|
||||
className="bg-muted rounded px-2 py-1"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Priority Levels */}
|
||||
<div className="space-y-2 py-2 border-b">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<Filter className="h-4 w-4 text-muted-foreground" />
|
||||
<span className="text-sm font-medium">Priority Levels</span>
|
||||
</div>
|
||||
<div className="space-y-1 ml-6">
|
||||
{(["high", "medium", "low"] as const).map((priority) => (
|
||||
<label key={priority} className="flex items-center gap-2 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={settings.priorities[priority]}
|
||||
onChange={(e) => updatePriority(priority, e.target.checked)}
|
||||
className="rounded"
|
||||
/>
|
||||
<span className={cn(
|
||||
"text-xs capitalize",
|
||||
priority === "high" && "text-red-500",
|
||||
priority === "medium" && "text-yellow-500",
|
||||
priority === "low" && "text-muted-foreground"
|
||||
)}>
|
||||
{priority}
|
||||
</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Categories */}
|
||||
<div className="space-y-2 py-2">
|
||||
<span className="text-sm font-medium">Categories</span>
|
||||
<div className="space-y-1">
|
||||
{Object.entries(settings.categories).map(([key, value]) => (
|
||||
<label key={key} className="flex items-center justify-between cursor-pointer py-1">
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{key.replace(/([A-Z])/g, " $1").replace(/^./, (s) => s.toUpperCase())}
|
||||
</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={value}
|
||||
onChange={(e) => updateCategory(key as keyof NotificationSettings["categories"], e.target.checked)}
|
||||
className="rounded"
|
||||
/>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Group Notifications */}
|
||||
<div className="flex items-center justify-between pt-2 border-t">
|
||||
<span className="text-sm">Group similar notifications</span>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => updateSettings({ groupNotifications: !settings.groupNotifications })}
|
||||
>
|
||||
{settings.groupNotifications ? "On" : "Off"}
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
6
surfsense_browser_extension/sidepanel/settings/index.ts
Normal file
6
surfsense_browser_extension/sidepanel/settings/index.ts
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
// Settings components for SurfSense Browser Extension
|
||||
|
||||
export { NotificationSettingsPanel, type NotificationSettings, type NotificationSettingsPanelProps } from "./NotificationSettingsPanel";
|
||||
export { NotificationsList, type Notification, type NotificationsListProps } from "./NotificationsList";
|
||||
export { ProductivitySettings } from "./ProductivitySettings";
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue