Function SignalPanel

src/components/SignalPanel.tsx:107–153

({
  trades,
  markets,
  leaderboard,
  onSelectMarket,
  onSelectWallet,
  onOpenTrade,
  categoryFilter,
  strengthFilter,
  onTrade,
}: SignalPanelProps)

}

export default function SignalPanel({
  trades,
  markets,
  leaderboard,
  onSelectMarket,
  onSelectWallet,
  onOpenTrade,
  categoryFilter,
  strengthFilter,
  onTrade,
}: SignalPanelProps) {
  const { t } = useI18n();
  const { signals, slugToCategory } = useSignalData(trades, markets, leaderboard);
  const filtered = useMemo(() => {
    let result = signals;
    if (strengthFilter.size > 0) result = result.filter((s) => strengthFilter.has(s.strength));
    if (categoryFilter.size > 0) result = result.filter((s) => {
      const cat = slugToCategory.get(s.market.slug);
      return cat && categoryFilter.has(cat);
    });
    return result;
  }, [signals, categoryFilter, strengthFilter, slugToCategory]);

  return (
    <div className="font-mono">
      {filtered.length === 0 ? (
        <div className="text-[12px] text-[var(--text-ghost)] py-4 text-center">
          {t("signals.noSignals")}
        </div>
      ) : (
        <div className="space-y-0">
          {filtered.map((sig) => (
            <SignalCard
              key={sig.id}
              signal={sig}
              markets={markets}
              onSelectMarket={onSelectMarket}
              onSelectWallet={onSelectWallet}
              onOpenTrade={onOpenTrade}
              onTrade={onTrade}
            />
          ))}
        </div>
      )}
    </div>
  );
}

const POPUP_W = 480;
const POPUP_MAX_H = 420;