Разработка мобильного мультивалютного криптокошелька CryptoWallet
2021 UX/UI design Purrweb

Crypto
Wallet

Идея

Криптокошелек, с помощью которого можно отправлять и получать токены, смотреть свою импортированную коллекцию NFT

Заказчики

Майкл и Яо из Японии.
Им понравился наш сайт и кейсы, и они пришли к нам за разработкой приложения, аналога сервиса Metamask — популярного криптокошелька.

phone star

Зачем нужно приложение

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

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

Этот мобильный криптокошелек подойдет и новичкам, и опытным инвесторам.

wallet
Как работает приложение lock

На главной странице отображается общий баланс пользователя в фиатной (обычной) валюте и списки токенов, которыми пользователь владеет.

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

screen screen wallet

Есть 2 способа начать пользоваться приложением:

number 1 Создать кошелек и получить seed-фразу
Seed-фраза — это длинный ключ-пароль. С помощью такого пароля можно восстановить кошелек пользователя в любом другом приложении.
number 2 Импортировать существующий кошелек
В импортированном кошельке пользователь видит общий баланс и NFT токены.
galery

Плюс, пользователь может видеть свои импортированные NFT токены, но не может купить новые или продать старые.

Одновременно пользователь может владеть только одним кошельком, но он может удалить его с устройства и создать новый при необходимости. При этом старый кошелек можно вернуть, потому что он все еще остается в сети Ethereum.

token page
revenants Revenants 5 Items
kitty
Kitty
#1094
screen screen
screen screen
screen screen

Майндмэп
и вайрфреймы

Майндмэп строили, опираясь на референсы от заказчиков — в плане функциональности это были приложения ImToken и Metamask.

Вайрфреймы тоже создавали на основе референсов. Этот этап прошел за 7 часов без существенных проблем и правок.

screen
Анализ

Мы провели подробный анализ, сохранили плюсы приложения-референса, например функциональность главного экрана, и избавились от минусов референса — сложной навигации и необходимости неоправданного скролла.

Подробнее об этом сейчас расскажем.

UI/UX screen

Дизайн сделали чистым и минималистичным, использовали много белого цвета. Заказчики решили подключить своего дизайнера в качестве ревьюера. 90% дизайн был сделан нами и 10% — с помощью ревью.

screen screen screen 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
cursor
cursor
screen

Это главный референс — Metamask

А у нас получилось так

UX старались брать с Metamask.

У нас не было необходимости изобретать велосипед и делать все как-то иначе — пользователю было бы непривычно.

screens
screen menu-bottom tokens functionality

Мы внесли некоторые изменения в UX по сравнению с референсом. В Metamask было устаревшее бургерное меню в левом верхнем углу. Мы учли эргономику и сделали таббар — с ним удобнее взаимодействовать и не придется далеко тянуться пальцем или использовать вторую руку.

В приложении-референсе кнопка импорта токена расположена под списком токенов и при их большом количестве нужно скроллить вниз. Мы перенесли кнопку, поместив ее над списком, чтобы она была в быстром доступе.

Мы сохранили функциональность главного экрана: отображение баланса, списка токенов, быстрый доступ к их получению, так как это часто используемые функции криптокошелька. Оставили и функцию импорта кошелька при помощи seed-фразы.

shield

Типографика и цвета cloud

Мы использовали шрифт Outfit, потому что он не приелся пользователю и хорошо читается с экрана.

Цифры шрифта имеют оптимальную ширину, чтобы отображать длинные цифры. Это важно, потому что токен может содержать множество знаков после запятой.

Outfit

Aa Bb Cc
#5388F0
#D6E3FF
#4BCE88
#EA6654
screen
send
input

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

shape

Разработка

Взяли стандартный стэк для мобильных приложений на React Native.

react redux native

Как обычно работают приложения: на бэкенде производится работа с данными, а фронтенд просто отображает их и формирует новые запросы.

transition
token-coin
wallet-card

Как обычно работают приложения: на бэкенде производится работа с данными, а фронтенд просто отображает их и формирует новые запросы.

Сделали приложение без бэкенда

Вместо самостоятельного бэкенда, фронтенд обращается к сети Ethereum, где происходит вся работа с токенами.

Какие-то данные берутся прямо из сети Ethereum, а сторонние API сервисы делают эту работу более простой — выполняют транзакции, отображают баланс.

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

etherscan cryptocompare opensea ether

Мы использовали такие API

Etherscan

Для получения информации о токенах и для создания транзакций в сети

Cryptocompare

Для получения стоимостей токенов (и самого Ethereum) в различных валютах

Opensea

Для получения информации об NFT-токенах

Etherjs

Основная библиотека для разработки с достаточной функциональностью для создания dApp

Что с проектом сейчас?

arrow

Мы обсуждали деплой в App Store и Google Play. Но в итоге заказчики хотят получить test flight версию для iOS и APK для Android — это значит, что мы не публикуемся на площадках, и пользователи не смогут скачать приложение.

Приложение готово для показа инвесторам.

star

Название проекта еще может измениться, заказчики не уверены на его счет.

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

send

Мы уже собрали Test Flight версию, которую можно показывать инвесторам.

Заказчики решили поменять название, теперь проект называется Blox Wallet.

purrweb