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 2026-02-04 13:11:39 +07:00
parent 2bf40ab5ce
commit 8bc092e40e
23 changed files with 2173 additions and 111 deletions

View file

@ -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>
);
}