Інтерфейс дашборду Crypto

Модуль Crypto має сучасний дашборд рівня SaaS із візуалізацією даних у реальному часі.

🎨 Дизайн-система

Кольорова палітра

Елемент	Колір	Використання
Фон	Темний грифельний (#0f172a)	Основний фон
Карти	Glassmorphic	Контейнери для контенту
Акцент	Блакитний (#22d3ee)	Акценти, анімації
Trust Score	Градієнт	Відображення показника

Кольори рівня ризику

Рівень	Колір	Hex
LOW	Зелений	#22c55e
MEDIUM	Жовтий	#eab308
HIGH	Помаранчевий	#f97316
CRITICAL	Червоний	#ef4444

---

🏠 Основні компоненти

1. Анімований логотип

Користувацький SVG логотип з анімаціями:

• Форма щита з літерою "S"
• Обертове радарне сканування (цикл 360°)
• Пульсуючі кільця (блакитне світіння)
• Градієнтна заливка (синьо-фіолетовий)

2. Заголовок проєкту

Відображає:

• Назва та символ проєкту (наприклад, "Aave (AAVE)")
• Поточна ціна зі зміною за 24 години
• Значок Trust Score
• Кнопка оновлення

3. Картка Trust Score

Велике відображення Trust Score:

• Числове значення Score (0-100) з градієнтом
• Значок рівня ризику (кольоровий)
• 6-стовпчикова радарна діаграма (@nivo/radar)

4. Картка фінансового здоров'я

Ключові метрики:

• Price USD
• Market Cap
• Fully Diluted Valuation (FDV)
• MCap/FDV Ratio

5. Картка активності розробників

Метрики GitHub:

• Організація репозиторію
• Commits (останні 30 днів)
• Активні розробники
• Дата останнього commit

6. Картка TVL (DeFi проєкти)

Дані DefiLlama:

• Total Value Locked
• Розподіл за чейнами
• MCap/TVL ratio

---

🔍 Компонент пошуку

Функції

• Debounced input (затримка 300 мс)
• Autocomplete dropdown з Trust Scores
• Click-outside для закриття
• Keyboard navigation (клавіші зі стрілками, enter)

Реалізація

const CryptoSearch = ({ onSelect }) => {
  const [query, setQuery] = useState("");
  const [isOpen, setIsOpen] = useState(false);

  const { data: results } = useQuery({
    queryKey: ["cryptoSearch", query],
    queryFn: () => searchProjects(query),
    enabled: query.length >= 2,
  });

  return (
    <div className="relative">
      <input
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Search projects..."
      />
      {isOpen && results && <Dropdown items={results} onSelect={onSelect} />}
    </div>
  );
};

---

📊 Радарна діаграма

6-стовпчикова візуалізація за допомогою @nivo/radar:

Конфігурація

const radarData = [
  { pillar: "Security", score: 95 },
  { pillar: "Treasury", score: 80 },
  { pillar: "Dev Activity", score: 55 },
  { pillar: "Financials", score: 85 },
  { pillar: "Tokenomics", score: 80 },
  { pillar: "Community", score: 65 },
];

<ResponsiveRadar
  data={radarData}
  keys={["score"]}
  indexBy="pillar"
  maxValue={100}
  margin={{ top: 40, right: 60, bottom: 40, left: 60 }}
  colors={["#22d3ee"]}
  fillOpacity={0.3}
  borderColor="#22d3ee"
  gridLevels={5}
  theme={darkTheme}
/>;

---

🚀 Розділи "Незабаром"

Картки-заглушки для майбутніх функцій:

Tokenomics (Фаза 3.3)

• Візуалізація графіку вестингу
• Майбутні розблокування токенів
• % розподілу серед інсайдерів

Достовірність команди (Фаза 3.4)

• Профілі засновників
• Інтеграція з LinkedIn
• Аналіз послужного списку

Здоров'я спільноти (Фаза 3.5)

• Якість підписників у Twitter
• Активність у Discord/Telegram
• Аналіз настроїв

---

📱 Адаптивний дизайн

Breakpoint	Layout
Desktop (1024px+)	Двостовпцева сітка
Tablet (768-1023px)	Один стовпець, повноширинні карти
Mobile (до 768px)	Складені карти, компактний вигляд

---

⚡ Продуктивність

Метрика	Ціль	Фактично
Initial load	менше 1с	0.8с
Search response	менше 500мс	300мс
Chart render	менше 100мс	80мс

---

Інтерфейс Crypto розділяє ту саму дизайн-систему, що й Corporate module, для єдиного досвіду використання.