CB Tools

Децентралізована біржа це своп, плюс пули ліквідності, які роблять своп можливим, плюс ферми, які платять людям за постачання тієї ліквідності, плюс стейкінг, який платить за утримання токена, плюс реферальна програма, яка платить за приведених друзів. Кожне з цього окрема ментальна модель, і всі пʼять живуть під однією навігацією.

CB Tools ніс усе це, і інтерфейс каже про це прямо: у футері Swap, Liquidity, Staking, Pools, Docs, Whitepaper, Audit, Analytics, News, Partners, Team, Contacts. Кнопка на девʼять крапок у хедері відкриває ширшу екосистему. Головна сторінка несе діаграму економіки самого токена, два фонди і потік комісій, бо продукт продавав механізм, а не тільки інтерфейс.

Моєю роботою був інтерфейс для всього цього.

Ферми це таблиця пулів дохідності. Під кожним рядком машина станів: гаманець не підключено, підключено але контракт не схвалено, схвалено але нічого не застейкано, застейкано і збирає, завершено. Пʼять станів, і кожному потрібна інша кнопка.

Я намалював це у двох поданнях, з перемикачем між ними. Сітка кладе кожен пул у картку, де стан це одна кнопка внизу, а розкривачка Details тримає ліквідність, контракт і посилання на пару. Список кладе пули у щільну таблицю і, при розкритті рядка, розкладає машину станів на три пронумеровані кроки: отримати токен, підключити гаманець і застейкати, зібрати.

Розкладка на кроки і є рішенням, вартим уваги. У картці стан це одна кнопка, і користувач має сам здогадатись, що буде далі. У списку вся послідовність видно одразу, а підсвічений тільки поточний крок. Ті самі дані, ті самі стани, два різні рівні підказки, і користувач сам обирає, який йому потрібен.

Частина роботи, яка не фотографується як «екрани» і важить найбільше.

Ліквідність це один фрейм 1920 на 13 666, що тримає близько вісімнадцяти станів флоу додавання і виведення, складених вертикально: порожній список пулів, імпорт пулу, обрана пара, введені суми, превʼю частки, бурштинове попередження про вплив на ціну, слайдер виведення, підтвердження. Не вісімнадцять сторінок. Одна вертикальна мапа, яку читаєш як специфікацію, і це рівно те, що потрібно розробнику, коли флоу умовний, а не лінійний.

Транзакційні модалки живуть на дошці 11 980 на 2 408: близько двадцяти чотирьох станів у ряд, темні зверху, світлі знизу, увесь шлях від вибору токена до відправленої транзакції.

Панелі гаманця мають справжні skeleton-лоадери власним набором компонентів, де блоки мерехтіння повторюють форму контенту, який стане на їхнє місце. Продукт чекає на блокчейн, тому очікування це поверхня дизайну, а не спінер.

Аналітичний продукт екосистеми. Сторінка токена йде трьома колонками: інформація про контракт і пули ліворуч разом із панеллю safety check, яка перевіряє honeypot, податок на купівлю і продаж, паузу переказів, проксі-контракт, частку ліквідності у творця і чорний список. По центру графік і тредбук на шість вкладок із фільтрами по сумі, вартості, ціні й діапазону дат. Праворуч своп і портфель. Обидві бічні колонки згортаються.

Головне тут це сітка мультичарта. Порожній стан обіцяє шістнадцять токенів одночасно, і файл цю обіцянку відпрацьовує тринадцятьма різними розкладками: один графік займає полотно, два ділять його навпіл, три стають у ряд, далі сітка починає змішувати розміри, три великі над чотирма малими, два широкі над двома рядами по чотири, три на три, чотири на три. Графіки не просто зменшуються, коли їх додають, сітка щоразу перекладається наново.

Графіки додаються через модалку з лічильником проти ліміту і переставляються перетягуванням з пунктирною зоною скидання.

Темізація закладалась із самого початку, але засобами, які тоді існували: пари стилів day і night, дисципліна іменування, матриці станів. Змінних у Figma на той момент не було взагалі, вони зʼявились двома роками пізніше, тому вся ця логіка трималась на конвенції.

Коли інструмент дозріс, я повернувся до цього продукту і перезібрав шар під екраном Charts як повноцінну токен-систему. 285 змінних у шести колекціях і дванадцяти модах: чотири теми разом із двома high-contrast, два бренди, дві щільності, дві гарнітури. 43 сети компонентів, 332 варіанти, 26 текстових стилів, привʼязаних по всіх пʼяти полях шрифту, 13 ефект-стилів із привʼязаним кольором, 3 421 іконка.

Доказ лежить у тому ж файлі: той самий термінал Charts, зібраний повністю з системи, і сім рендерів одного мобільного дерева, по одному на мод. Між ними нічого не перемальовано, всю роботу робить перемикання колекції. Скан обходить 4 730 нод і не знаходить жодного порушення, 44 з 44 контрастних пар проходять WCAG у чотирьох темах.

Старі стилі day і night при цьому задепрековані, а не видалені: на них досі 12 399 заливок, і кожен несе у своєму описі найближчий новий токен. Так міграція стає покроковою, а не переписуванням файлу з нуля.

Дизайн передали інженерній команді, продукт написали. Публічного релізу не було: рішення замовника, і воно лежить поза зоною дизайну. Тому тут немає бізнесових метрик, і вигадувати їх я не буду.

Що піддається перевірці, те й винесено в цифри нижче: обсяг, покриття брейкпоінтів, теми, і система, зібрана поверх цього продукту пізніше.