mirror of
https://github.com/MODSetter/SurfSense.git
synced 2026-04-28 18:36:23 +02:00
e4d020799b
Frontend - Web Dashboard: - Add crypto dashboard page with Watchlist, Alerts, Market, Profile tabs - Add 11 tool-ui components for inline chat display - Add crypto components (ChainIcon, SafetyBadge, PriceDisplay, etc.) - Add modals (AddTokenModal, CreateAlertModal) - Add mock data for development Frontend - Browser Extension: - Add shared components (ChainIcon, RiskBadge, PriceDisplay, SuggestionCard) - Add crypto components (SafetyScoreDisplay, WatchlistPanel, AlertConfigModal) - Add chat enhancements (WelcomeScreen, ThinkingStepsDisplay) - Add widget components for inline display - Enhance TokenInfoCard, ChatHeader, ChatInput, ChatInterface Documentation: - Add conversational UX specification - Add UX analysis report - Update extension UX design This implements the Conversational UX paradigm where crypto features are AI-callable tools that render inline in the chat interface.
129 lines
3.2 KiB
TypeScript
129 lines
3.2 KiB
TypeScript
import { cn } from "~/lib/utils";
|
|
|
|
export type ChainType = "solana" | "ethereum" | "base" | "arbitrum" | "polygon" | "bsc" | "avalanche" | "unknown";
|
|
|
|
export interface ChainIconProps {
|
|
/** Blockchain chain identifier */
|
|
chain: ChainType | string;
|
|
/** Size of the icon */
|
|
size?: "sm" | "md" | "lg";
|
|
/** Show chain name label */
|
|
showLabel?: boolean;
|
|
/** Additional class names */
|
|
className?: string;
|
|
}
|
|
|
|
// Chain configuration with colors and display names
|
|
const CHAIN_CONFIG: Record<string, { color: string; bgColor: string; label: string; emoji: string }> = {
|
|
solana: {
|
|
color: "#9945FF",
|
|
bgColor: "bg-purple-500/10",
|
|
label: "Solana",
|
|
emoji: "◎",
|
|
},
|
|
ethereum: {
|
|
color: "#627EEA",
|
|
bgColor: "bg-blue-500/10",
|
|
label: "Ethereum",
|
|
emoji: "Ξ",
|
|
},
|
|
base: {
|
|
color: "#0052FF",
|
|
bgColor: "bg-blue-600/10",
|
|
label: "Base",
|
|
emoji: "🔵",
|
|
},
|
|
arbitrum: {
|
|
color: "#28A0F0",
|
|
bgColor: "bg-sky-500/10",
|
|
label: "Arbitrum",
|
|
emoji: "🔷",
|
|
},
|
|
polygon: {
|
|
color: "#8247E5",
|
|
bgColor: "bg-violet-500/10",
|
|
label: "Polygon",
|
|
emoji: "⬡",
|
|
},
|
|
bsc: {
|
|
color: "#F0B90B",
|
|
bgColor: "bg-yellow-500/10",
|
|
label: "BSC",
|
|
emoji: "🟡",
|
|
},
|
|
avalanche: {
|
|
color: "#E84142",
|
|
bgColor: "bg-red-500/10",
|
|
label: "Avalanche",
|
|
emoji: "🔺",
|
|
},
|
|
unknown: {
|
|
color: "#6B7280",
|
|
bgColor: "bg-gray-500/10",
|
|
label: "Unknown",
|
|
emoji: "🔗",
|
|
},
|
|
};
|
|
|
|
/**
|
|
* ChainIcon - Displays blockchain chain icon with optional label
|
|
*
|
|
* Features:
|
|
* - Chain-specific colors and icons
|
|
* - Multiple size variants
|
|
* - Optional chain name label
|
|
*/
|
|
export function ChainIcon({
|
|
chain,
|
|
size = "md",
|
|
showLabel = false,
|
|
className,
|
|
}: ChainIconProps) {
|
|
const normalizedChain = chain.toLowerCase();
|
|
const config = CHAIN_CONFIG[normalizedChain] || CHAIN_CONFIG.unknown;
|
|
|
|
const sizeClasses = {
|
|
sm: "w-4 h-4 text-xs",
|
|
md: "w-5 h-5 text-sm",
|
|
lg: "w-6 h-6 text-base",
|
|
};
|
|
|
|
const labelSizes = {
|
|
sm: "text-xs",
|
|
md: "text-sm",
|
|
lg: "text-base",
|
|
};
|
|
|
|
return (
|
|
<div className={cn("flex items-center gap-1.5", className)}>
|
|
<div
|
|
className={cn(
|
|
"rounded-full flex items-center justify-center",
|
|
config.bgColor,
|
|
sizeClasses[size]
|
|
)}
|
|
style={{ color: config.color }}
|
|
title={config.label}
|
|
>
|
|
<span>{config.emoji}</span>
|
|
</div>
|
|
{showLabel && (
|
|
<span
|
|
className={cn("font-medium", labelSizes[size])}
|
|
style={{ color: config.color }}
|
|
>
|
|
{config.label}
|
|
</span>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Get chain color for custom styling
|
|
*/
|
|
export function getChainColor(chain: string): string {
|
|
const normalizedChain = chain.toLowerCase();
|
|
return CHAIN_CONFIG[normalizedChain]?.color || CHAIN_CONFIG.unknown.color;
|
|
}
|
|
|