Как мы сделали криптокошелек (а еще собрали мозаику из API и сэкономили деньги клиента)

В ноябре в Purrweb обратились Майкл и Яо из Японии с концепцией приложения-криптокошелька. Мы до этого уже сделали приложение для криптобиржи Broex и поменяли дизайн кошелька PayPay. Так что мы и в крипте разбирались, и в том, как работают кошельки. Поэтому заказчиков и заинтересовал Purrweb.

Что должен уметь хороший криптокошелек? Ключевые фичи и немного больше

Пункт назначения — работающее приложение, в котором можно:

- Хранить криптовалюты и NFT-токены

- Получать и переводить криптовалюту

- Проверять баланс

- Просматривать историю транзакций

Заказчики просили, чтобы в MVP можно было удалять NFT и вручную импортировать токены с площадки-аукциона. Мы предложили заняться этим позже. Гораздо важнее для пользователей базовые функции кошелька — перевод токенов, проверка баланса, просмотр истории транзакций. Лишние фичи увеличили бы срок разработки и цену MVP. Заказчики согласились.

В итоге мы уложились в сроки, а ручной импорт и возможность удалять NFT добавили уже в готовое приложение, пока шло тестирование.

Путь пользователя для этого приложения стандартный для криптокошельков:

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

- Получает seed-фразу — это длинный набор слов, который обязательно нужно сохранить. Если человек забудет данные для входа, seed-фраза поможет восстановить доступ к кошельку.

- Попадает на главный экран и видит баланс кошелька.

- Отправляет токены и просматривает баланс в разной валюте прямо с главной страницы.

Для работы над проектом мы собрали команду из 5 человек: проектный менеджер, дизайнер, 2 разработчика и тестировщик. Заказчики помогали по техническим вопросам. Когда делали визуал, дизайнер от заказчиков его отсматривал. 

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

Также мы взяли позитивные референсы. Например, Майкл и Яо хотели, чтобы приложение было похоже на Metamask. Его визуал почти лишен цветов и акцентов, создается ощущение простой строгости. Помимо него, мы ориентировались на несколько Dribbble-шотов.
 

Заказчики согласовали майндмэп и вайрфреймы очень быстро, потому что мы попали в ожидания. В итоге майндмэп сделали за 2 часа, а вайрфреймы за 7. Для примера — обычно мы закладываем на майндмэп 8-10 часов, на вайрфрейминг — до 20. Мы срезали путь и быстро продвинулись к цели. 

Мы посмотрели похожие приложения и остановились на шрифте Outfit. Для проекта он подходил по всем параметрам.

Оптимальная ширина. В приложении-кошельке главное — цифры, а у Outfit они подходят по ширине для экрана смартфона. В итоге даже длинные числа помещаются на экране.

Хорошая читаемость. Это свойство — важная часть пользовательского опыта. Пусть в криптокошельке и не нужны элементы с текстом в несколько строк. А еще у Outfit много начертаний, что помогает структурировать информацию.

Оригинальность. Популярные криптокошельки не используют Outfit, поэтому он не успел надоесть пользователям и примелькаться. 

Заказчик хотел светлую цветовую гамму, чтобы дизайн выглядел чисто и стильно. Без ярких цветов и большого количества элементов, чтобы не перегружать. Мы использовали белый, серый и голубой, так как эти цвета ассоциируются с чистотой и легкостью. Для акцентов взяли песочный, красный и зеленый. Вышло вот так:

На этом моменте к работе неожиданно присоединился дизайнер от заказчиков. Он практически не вмешивался в процесс — весь визуал разработала команда Purrweb. Сторонний дизайнер просматривал макеты в Figma и оставлял пожелания. Комментарии были незначительные и касались мелких деталей, вроде скругления углов или цвета разных элементов. Дизайнер не предлагал серьезные изменения, так как заказчикам нравилось направление нашей работы. 

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

Заказчики задумали приложение как часть образовательного проекта, поэтому в будущем в нем появятся игровые элементы. У нас не было задачи продумать игровую механику и встроить ее в UI/UX. Но нам нужно было учесть развитие проекта и сделать дизайн динамичным и современным, с яркими акцентами. Для этого мы добавили легкий синий градиент и необычный геометрический элемент на плашку со счетом пользователя. А еще для криптовалют взяли яркие цветные иконки.

Так выглядит счёт пользователя:

А вот так — иконки криптовалют:

У наших заказчиков были четкие требования — данные пользователей должны быть максимально защищены. Это возможно, только если приложение будет децентрализованным, то есть все данные будут храниться не на безымянном сервере, а в устройстве клиента. Получается, у приложения не должно быть бэкенда. Всю функциональность нужно воплощать прямо на устройстве, а данные блокчейна брать с узлов при помощи API. Только так удастся обеспечить полную анонимность пользователей. 

Мы знали, что есть огромное количество приложений-криптокошельков, которые работают без бэкенда, поэтому принялись за работу. Спойлер: прикручивание API оказалось не таким уж простым делом.

Когда мы вникли в тему сторонних API, поняли, что можем сэкономить заказчику деньги на бесплатном и при этом работающем бэке. Для этого нужно было понять, как соединить несколько API на бесплатных тарифах так, чтобы в приложении ничего не отпадало из-за лишнего запроса в секунду или пользователя в месяц.

Дело в том, что у бесплатных API есть лимиты на количество запросов. Например, сервис может иметь лимит 1000 запросов на получение информации о транзакции в минуту. И если в приложение войдет 1001-й пользователь, то он увидит ошибку при загрузке транзакций, так как лимит исчерпан. Нам нужно было найти оптимальную комбинацию API к каждой функции. Это было похоже на задачку, где нужно провести линию к подходящему ответу:

Как мы решили эту проблему:

Сначала подобрали к каждой задаче свой API-сервис. Получился такой набор API под разные функции:

- etherscan.io — получение информации о токенах и балансе монет. Если лимит исчерпан, приложение использует infura.io;

- cryptocompare.com — отображение стоимости токенов и ethereum в различных валютах;

- opensea.io — данные об NFT-токенах;

- moralis.io — для истории транзакций. 

Затем разобрались как лучше всего подключить сервисы. Например, с cryptocompare вышло так.

Сервис cryptocompare обычно используют со специальным идентификатором клиента. Он называется API-key. Его можно получить в личном кабинете, зарегистрировавшись на сайте. Там же есть тарифы. С бесплатным cryptocompare принимает 100 000 запросов в месяц.

1 пользователь = 1 запрос. Получается, если в приложение за месяц войдет 100 001 человек, последний вместо стоимости токенов увидит ошибку. 

Поэтому мы подключили cryptocompare без API-key. Теперь система считает не количество пользователей, а количество запросов с одного устройства. Правда, лимит обращений к серверу уменьшается до 50 000 в месяц. Но одному человеку на месяц этого точно хватит. 

В результате в приложении больше не возникают ошибки из-за превышения лимита. То есть сколько бы пользователей ни было, они смогут узнать стоимость токенов. 

В конце апреля мы передали заказчикам файл приложения для Android. Пока Майкл и Яо не заливают приложение на App Store и Google Play, потому что хотят показать его инвесторам. Для этого мы собрали Test Flight версию, с которой можно презентовать проект. 

В итоге с проектом мы справились за 1268 часов. Из них 59 ушли на дизайн, 327 на тестирование, и все остальное — на разработку.