deman4ik / cpz_web Goto Github PK

https://www.apollographql.com/docs/react/migrating/apollo-client-3-migration/

Проверить работоспособность

Для корректной работы запросов для роли "manager" необходимо:

• считывать user_id из JWT токена
• подставлять в условия отбора user_id во все запросы где есть это поле (users, user_signals, user_robots, ...)

На данный момент отбор по user_id происходит автоматически на бэкенде. Пользователь может смотреть только свои данные. Но для пользователя manager будут доступны данные других пользователей. И на данный момент в интерфейсе выходит полная неразбериха.

эту задачу необходимо сделать перед #76

Все AUTH_API_URL эндпоинты получили эквивалентные мутации в graphql схеме

• Заменить все POST запросы на вызов соответствующих мутаций
  • login
  • loginTg
  • logout
  • register
  • refreshToken
  • activateAccount
  • passwordReset
  • confirmPasswordReset
  • changeEmail
  • confirmChangeEmail

Обратить внимание что некоторые эндпоинты могут некорректно работать на localhost'е т.к. используется http-only cookie, а refresh token зашит в переменную окружения. Данный функционал необходимо тестировать на dev стенде.

На формах подписки на сигналы и добавления робота
к инпуту для ввода торгового объема в asset (BTC) добавляем еще один инпут для ввода торгового объема в currency ($).

два этих инпута взаимосвязаны и значение во втором инпуте пересчитываются по текущей средней цене

• при вводе числа в инпут asset (например BTC) пересчитывается значение в currency ($)
  currency_value = asset_value * price
• при ввода числа в инпут currency ($) пересчитывается значение в asset (например BTC)
  asset_value = currency_value / price

текущая цена получается следующим запросом при открытии формы

query last_daily_candle($exchange: String!, $asset: String!) {
  candles1440(
    where: { exchange: { _eq: $exchange }, asset: { _eq: $asset } }
    limit: 1
    order_by: { time: desc }
  ) {
    high
    low
  }
}

и рассчитывается среднее значение price = (high+low)/2

форма выглядит следующим образом

Please enter desired trading volume
Minimum value is 0.002 BTC ≈ 14,2 $

| инпут asset_value | BTC
≈
| инпут currency_value | $

валидация остается по полю asset_value и передаем именно это значение как и раньше
currency_value в $ просто для упрощения ввода

Сейчас торгуются пары только связанные с долларом или эквивалентом (USD/USDT) поэтому везде указывается знак $.

Необходимо поменять функцию вывода валюты

• если currency = USD или USDT то выводим знак $
• если любое другое значение то выводим сам currency

Все запросы

• убрать дублирование данных - отбор count и id

• не подставлять фильтр like если в поисковой строке пусто или пробел

• добавить проверки на необязательные данные

Users

• При отборе пользователей с фильтрами не доступна пагинация

• Объеденить колонки ID и Name

Name - белым
ID - синим

Dashboard

• добавить в запрос условие только Active аккаунты
• With Robots - добавить в запрос условие user_robots.status = 'started'

Robots

• поменять местами id и name

• id синим

User Robots

• статистика и performance из user_robots а не robots

Роутинг

• при переходе по url на роуты /manage часто происходит редирект, хотя пользователь не менялся
  похоже на проблему проверки роли на серверной стороне

На экране /signals/robot выводится текущая дата, а не дата сигнала

заодно проверить вывод даты сигнала в /notifications

• увеличить шрифт на стандартный во всех табличных представлениях

• увеличить ширину Search полей на всех manage экранах

• в меню убрать Community

Users

• порядок колонок ID, Name, Email, Telegram, Status, Roles, Created, Entries, Settings

• пока нет других настроек убираем подпись "Notifications"

• для сокращения в Telegram выводим в таком формате без лейблов

241396568
KirillEduardovich

• для сокращения в roles выводим в таком формате без лейблов

manager
(user, manager, admin)

• в Entries переименовываем Keys в API Keys

• все лейблы/подписи раскрашиваем стандартным цветом лейблов - синим, все данные остаются белым

Manage Robots

• Info выводим без лейблов

  ID раскрашиваем в синий

  Status раскрашиваем
  Started - зеленый
  Stopped - красный
  Paused - желтый
  любой другой статус - белый

BR-1 Binance Fut XRP/USD 1d
d8d12e73-7681-401f-b873-2ae23cefe409
stopped

• добавляем новую колонку Available перед Types, данные из колонки available со следующим преобразованием
  0 - No
  5 - Manager
  10 - VIP
  15 - User
  20 - Anonymous
  любое другое значение выводим как есть числом

• в Settings последний Volume который берется из requiredHistoryMaxBars нужно назвать Max Bars

• в Settings нужно отделить strategyParameters от остальных параметров одной пустой строкой

Adx High: 15
Look Back: 10
Adx Period: 50
Trail Bars: 6

Volume: 900
Max Bars: 300

• Statistics разделить на 2 колонки Performance и Statistics как и во всех таблицах с роботами

• Добавить еще первым пунктом Profit в Statistics

• График Performance уменьшить максимально

• Types для экономии места выводить в 2 строки

Signals
Trading

User Signals

• Объеденяем 2 колонки Signal ID и Code в одну "Signal Robot"

  вместо code выводим name

  ID раскрашиваем в синий

CHAN 1 Bitfinex ETH USD 8h
f6ed5e97-3f13-44bb-b0a3-e14924a101b0

• Объеденяем 2 колонки User ID и User Bane в одну "User"
  User ID раскрашиваем в синий

modecrywork
b6d0e992-f716-42d5-b69c-6a0b29ef4172

User Robots

• Statistics разделить на 2 колонки Performance и Statistics как и во всех таблицах с роботами

• Добавить еще первым пунктом Profit в Statistics

• График Performance уменьшить максимально

• порядок колонок Robot Info, User Info, Performance, Statistics, Activity

• User Info убираем лейблы
  User ID раскрашиваем в синий

modecrywork
b6d0e992-f716-42d5-b69c-6a0b29ef4172

• Robot Info убираем лейблы
  для Volume добавляем asset в конце
  ID раскрашиваем в синий

CHAN 1 Bitfinex ETH USD 8h
f6ed5e97-3f13-44bb-b0a3-e14924a101b0
0.002 ETH

Переименовать лейблы Volume в Amount

hover эффекты на кнопках/тултипах реализовать с помощью css а не js

на данный момент при быстром перемещении курсора по кнопкам, некоторые кнопки могут "залипнуть" в hover состоянии

Перепроверить вывод значения Action в секции Signals экрана /signals/robot

Должно выводиться

• Position Long -> Action BUY стрелка вверх
• Position Short -> Action SELL стрелка вниз
• Position Close Long -> Action SELL стрелка вниз
• Position Close Short -> Action BUY стрелка вверх

В Open Positions (/signals, /signals/robot, /robots, /robots/robot) выводим profit с заголовком Unrealized Profit

После возврата со страницы робота (/signals/robot/ или /robots/robot) с помощью кнопки назад в интерфейсе или браузере на страницы (/signals или /signals/search или /robots или /robots/search) не всегда подгружаются данные или подгружается только часть данных (некоторые подразделы).

Сходу смоделировать не всегда получается.

Рассмотреть возможность интеграции сайта документации(support.cryptuoso.com) в основной сайт.

https://dokz.site/

Графики свечей на экране робота обновляют данные по ws подписке.

Если изменить масштаб или позицию графика, то после обновления данных график сбрасывается в состояние по умолчанию.

Необходимо разобраться как этого сбрасывания можно избежать, чтобы график работал как в этом примере при обновлении данных.
https://jsfiddle.net/TradingView/yozeu6k1/

В dev окружении график обновляется только у роботов по BTC и с timeframe > 5

При возврате на страницу /robots раздел My Robots Open Positions иногда не подгружает данные

Для защиты от всяческих хаков необходимо подключить заголовки в частности X-Frame-Options

Рассмотреть возможность подключения готовых библиотек для next.js

• https://github.com/jagaapple/next-secure-headers

Это было частью тестового задания

Когда мы переходим со страницы поиска (/robots/search или /signals/search)
на страницу робота (/robots/robot или /signals/robot) необходимо:

• на странице поиска запоминать текущие фильтры, сортировку, параметры поиска, количество подгруженных страниц

• при переходе со страницы робота обратно на страницу поиска (кнопка назад в интерфейсе и кнопка назад в браузере) позиционировать на том же элементе.

Новые страницы
Support Requests /manage/support и
Support Chat /manage/support/:userId

Support Requests

Выводим список чатов с группировкой по messages (где from и to это один и тот же пользователь)

Колонки
User Info (name + id) - как на остальных экранах
Latest message - текст и дата отправки последнего сообщения
Кнопка Reply - открывает новый экран с чатом /manage/support/:userId

Support Chat

Аналогично чату из /support только со стороны админа

мутация replySupportMessage

Для бОльшей прозрачности и SEO оптимизации необходимо выводить список роботов без аутентификации.

Сделать это возможно 2 способами:

1. Перенести проверку аутентификации из слоя роутинга в слой страницы/компонентов

Для не аутентифицированных пользователей должны быть доступны экраны поиска и описания робота (/signals/search /signals/robot /robots/search /robots/robot)
На всех остальных экранах делаются заглушки.
Все кнопки ведут на экран регистрации

2. Создать отдельную страницу на лендинге со списком роботов и возможности просмотра дополнительной информации

Оставить минимум фильтров (биржа/валюта), а просмотр подробной информации о роботе можно оставить на той же странице, например через аккордеон.

(В одной из итераций мы думали раздел Data таким образом сделать https://www.figma.com/file/GTRhJGJ2wVHdKec5WpJvYo/LANDING_ITERATION_OLD)

Необходимо для каждого из этих вариантов

• продумать реализацию
• оценить трудозатраты
• совместно принять решение и описать план работ

• фильтрация в /signals/search и /robots/search аналогично /stats
  по exchange и asset и timeframe (1h, 2h, 8h, 1d...)

кнопку очистки фильтров дополнительно встраиваем на верхнюю навигационную панель

запрос строится с учетом фильтров + то что введено в search

• сортировка по profit, winrate, recovery factor, trades count

подумать как лучше сделать, в одном окне с фильтрами или отдельно например в виде табов

• сохранение истории фильтрации, сортировки и пагинация
  при переходе со страницы поиска на страницу робота и обратно - фильтрация, сортировка и пагинация должна сохраняться

Во всех таблицах где выводится статистика необходимо поправить вывод

Winners - Average Bars Held - из колонки avgBarsHeldWinning

Losses - Average Bars Held - из колонки avgBarsHeldLosing

На данные момент почти везде используется округление до 2х знаков после запятой.
Необходимо изменить разрядность всех чисел, которые меньше единицы до 6 знаков.

Применимо в разделах:

• Signals (/signals/robot)
• Open Positions (/robots, /signals и /robots/robot, /signals/robot)
• Closed Positions (/robots/robot, /signals/robot)
• Notifications

Импорты сейчас выглядят таким образом:

Нужно добавить алиасы для корректного/читаемого импорта файлов

Интерфейс такой же как и на сайте, дэсктоп/мобайл адаптивность, навигацию можно оставить только в боковом меню (без мобильных нижних табов)

Dashboard

• Количество пользователей всего

• Количество пользователей за сегодня + за вчера + за неделю + за месяц

• Количество пользователей с user_signals

• Количество пользователей с user_robots

Users

Выводится примерно как robots search

Все доступные колонки включая id +

• Количество user_signals

• Количество user_robots

• Количество user_ex_accs

• Поиск по id пользователя, имени пользователя, telegram, email

• Фильтр по status, заполнен email, заполнен telegram, есть user_signals, есть user_robots, есть user_ex_accs

• Сортировка по дате регистрации и количеству user_signals, user_robots, user_ex_accs

Robots

Выводится примерно как robots search

Колонки

• id

• code

• status

• settings

• trading_settings

• statistics (также из equity) (с графиком)

• signals

• trading

• количество user_signals

• количество user_robots

• Поиск по name

• Отбор по полям exchange, asset, currency, timeframe, strategy, signals, trading, status

• Сортировка по статистике + количеству user_signals/user_robots

User Signals

• id пользователя

• имя пользователя

• id робота

• code робота

• дата подписки

• объем из user_signals

• Поиск по пользователю и роботу

• Сортировка по дате подписки

User Robots

• id пользователя

• имя пользователя

• id user_robot

• id robot

• code robot

• volume user_robot

• statistics (equity с графиком)

• status user_robot

• дата добавления / запуска

• Поиск по пользователю и роботу

• Фильтрация по exchange, asset...

• Сортировка по statistics, дате добавления/запуска

Создаем новую страницу /support

• В меню переносим ссылку Support выше к остальным табам

  • проверить корректное отображение меню в мобайле (если не будет влезать придумаем еще что-нибудь)

• Первый раздел First steps

  • Заголовок
  • 3 карточки внутри иконка и текст сама карточка - ссылка
    • Learn about automated сryptocurrency trading with Cryptuoso Robots (https://support.cryptuoso.com/robots)
    • Learn about manual сryptocurrency trading with Cryptuoso Signals (https://support.cryptuoso.com/signals)
    • Learn how to create and configure сryptocurrency exchange API Keys with your Cryptuoso Account (https://support.cryptuoso.com/exchange-accounts)

• Второй раздел Contact Support

  • Telegram Community Support
    Having common questions with signals or robots? Ask it in our Telegram Community and we will help you.

  • Cryptuoso Support Team
    Have a personal problem regarding connecting an exchange or billing? Send message here:

    • сюда вставляем большое текстовое поле и кнопку Send
      • при нажатии кнопки Send вызывается мутация supportMessage(message: String!)
    • далее контейнер с вертикальным скроллом в виде чата, а внутри карточки с сообщениями (пример карточки из Notifications туда уже приходят сообщения от команды поддержки)
      Данные из таблицы messages
      • слева от Cryptuoso Team (где to = user_id)
      • справа от пользователя (где from = user_id)

• На странице Notifications для всех карточек от Support Team сделать ссылку на страницу /support а не отдельный support сайт

Проверить логику отображения графика My Performance на странице /signals/robot и /robots/robot

Написать в комментарии об отличиях если они будут

Для админки требуется хороший компонент с таблицами, необходимый функционал:

• сортировка
• перемещение колонок
• изменение размера колонок
• пагинация
• возможно какой-то интерфейс для фильтрации/поиска, но это опционально

Ссылки на библиотеки (с демками) скидывать сюда.
Расписать по каждой библиотеке плюсы/минусы.

Исходя из поиска по коментарию дизейбла, есть большое кол-во не решенных проблем.
Требуется пофиксить данные проблемы:

Пользователи порой путаются с созданием аккаунта после использования телеграм бота.
У нас есть в планах поменять процесс регистрации, но пока необходимо сделать небольшие изменения

• Перемещаем текст и кнопку CREATE ACCOUNT из правой части в левую под кнопку LOG IN.

If you don’t already have an account and have not used our Telegram Bot yet click the button below to create your account with email.

| CREATE ACCOUNT |

• На правой стороне пишем текст

If you have a Telegram account and want to use our Telegram Bot just log in using Telegram

далее телеграм виджет и текст остается как есть
| Log in with Telegram |
If you do not see the Telegram login widget here, it seems that the Telegram is blocked in your country. Please use a proxy or VPN to access the Telegram login widget.

• По середине между левой и правой частью там где проходит разделительная вертикальная линия в центре добавляем лейбл "OR"
  и не забыть что на мобильных устройствах форма перестраивается и линия становится горизонтальной
  

• Выделяем отдельный layout для админки

• В основном layout остаются только пользовательские роуты

• В admin layout только админские роуты

• Если пользователь заходит по любому админскому роуту и имеет любую другую роль кроме manage - ридеректить на основной сайт

• В admin layout убрать ограничения на максимальную ширину контейнера

Разобраться как интегрировать гугл аналитику в next js.

Для AdWords необходимо отслеживать конверсию при переходе по баннеру (тег AW-***)

• переход на лендинг

• нажатие основных кнопок лендинга (TRY IT FREE, MORE ROBOTS...)

• переход на логин/создание аккаунта

Для аналитики необходимо отслеживать ключевые события (тег G-***)

• переходы на все страницы

• подписка на signals

• добавление API ключа

• добавление робота

• старт робота

• подключить Trailing Slash in URLs

на втором шаге происходит добавление робота
почему-то не перешли на 3ий шаг и соответственно при повторном нажатии кнопки Next происходит вызов той же самой процедуры добавления - получаем ошибку

необходимо:

• понять почему не происходит переход на 3ий шаг, мб нет долго ответа от мутации или еще что-то
• в любом случае при повторном нажатии и получении ошибки что робот уже существует и если робот еще не запущен - переходить на 3ий шаг

Сейчас есть проблемы при проверке файлов текущим конфигом:

• фильтрация нотификаций выпадающий список в хэдере
  All, News(message.broadcast), Status(user_robot.started..., ..error, message.support-reply), Signals(signals.), Trading(user-robot.trade)

Для всех manage страниц используем следующий layout

• меню слева перемещается в скрываемый drawer

• в хэдере каждой страницы всегда отображается кнопка для открытия/закрытия drawer с меню

• на мобильном экране убираются табы

Использовать запросы с группировкой/distinct для получения только уникальных значений для фильтров

• robots/search
• signals/search
• manage/robots; userRobots; userSignals

Доработки

• Вытянуть колонки в запросах отдельно для каждого значения фильтров
  exchange: robots(distinct_on: [exchange]) { exchange } asset: robots(distinct_on: [asset]) { asset }

• Скорректировать передачу этих данных в ui фильтров

С этим надо работать комплексно, но пока из очевидного:

Меняем divы на H теги

• H1 - Cryptocurrency trading robots for your successful investment

• H2 - Top Performance Robots, Cryptuoso Trading App, ... и остальные

• H3 - Receive Signals, Automatic Trading, Automatic, Instant, Secure, Simple

Sitemap - только главная страница и /auth/login /auth/signup

robots.txt

Необходимо Areachartы заливать разными цветами в зависимости от значения

• значения больше нуля зеленым цветом
• значения меньше нуля красным цветом

Актуально для миниграфиков

• вместо API_URL и WS_URL делаем новую HASURA_URL
  значение будет типа hasura.dev.cryptuoso.com/v1/graphql
  и уже подставляем где надо https:// и wss://

• TELEGRAM_BOT_URL убираем, а BOT_NAME переименовываем в TELEGRAM_BOT_NAME
  для ссылок на бота просто подставляем https://t.me/${TELEGRAM_BOT_NAME}

• DOCS_URL, TERMS_URL, PRIVACY_URL, SUPPORT_URL убираем и зашиваем в константы значения
  https://support.cryptuoso.com/, /terms-of-use, /privacy-policy, /support

• TELEGRAM_COMMUNITY_URL убираем
  https://t.me/joinchat/ACVS-0zaWVBgAYm8gOKYHA зашиваем в константы

Проверить работоспособность и отдельно breaking changes