Кейс: OrbitSoft кастомизировал криптокошелек для платформы со взрослым контентом

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

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

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

Чтобы больше пользователей подписывалось на сервис, компания решила принимать платежи в криптовалюте. Все криптовалюты работают на блокчейне и сохраняют анонимность плательщиков: личная информация зашифрована с помощью криптографических алгоритмов.

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

Для совершения операций по оплате подписки компания выбрала MyEtherWallet. Это популярный криптокошелек для токена ETH и других валют на базе Ethereum. Он бесплатный, у него удобный веб-интерфейс с понятными настройками, есть приложения для Android и iOS.

Компания планировала использовать веб-версию криптокошелька, установив плагин MyEtherWallet Chrome Extension. Это проект с открытым исходным кодом на Angular, который работает через API. Он дает пользователю возможность покупать, продавать и обменивать криптовалюту прямо в своем браузере.

По умолчанию расширение MEW поддерживает более 300 криптовалют на базе Ethereum — они отображаются в алфавитном порядке. Разные токены можно группировать в папки — кошельки. Они отображаются в порядке добавления. Опытные криптоинвесторы считают интерфейс MEW одним из самых удобных.

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

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

Заказчик сформулировал задачу так: «Пользователям должно быть удобно работать с нашими токенами». Мы составили план работ:

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

Плагин MEW CX написан на JavaScript с использованием библиотеки Angular. Это продукт с открытым исходным кодом, который поддерживает обширное сообщество разработчиков. Кажется, что это должно облегчить задачу: код программы есть в общем доступе, нужно только взять его и немного отредактировать.

На деле MEW CX — сложный продукт с разветвленной архитектурой. Нам предстояло в ней разобраться, изучить взаимодействие с API, найти места, которые следует отредактировать, внести изменения и проследить, чтобы при этом не пострадала производительность веб-приложения.

Так, чтобы получить список токенов, мы изучили, где и как хранятся данные, которые MEW получает по API с сервера. Оказалось, список хранится в памяти веб-приложения в виде обычного массива JavaScript.

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

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

MEW работает на Angular. Это быстрый фреймворк, но если приложение работает с большим объемом контента, могут возникнуть проблемы со скоростью. Наш подход помог выполнить задачу клиента, сохранив производительность плагина.

Заказчик предоставил нам свой логотип, референсы и короткое ТЗ. Мы изменили внешний вид личного кабинета, чтобы его дизайн ассоциировался с брендом компании.

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

Gulp — программа, которая автоматизирует рутинные задачи. Например, уменьшает код, ускоряет верстку, оптимизирует размер изображений на странице. Это ускоряет разработку.

Инструмент работает по принципу таск-раннера: разработчик пишет задания на JavaScript, а система выполняет их в нужной последовательности. К Gulp можно добавлять модули для выполнения конкретных задач веб-разработки.

После упаковки MEW CX с помощью Gulp мы добавили плагин в Google Chrome и протестировали.

За 15 дней изменили логику отображения валют в личном кабинете и обновили интерфейс:

• Новые токены заказчика стало проще добавлять.
• Токены заказчика отображаются первыми в каждом кошельке, игнорируя алфавитный порядок.
• Баланс каждого кошелька отображается в токенах заказчика вместо ETH.
• Заменили логотип MyEtherWallet на логотип заказчика.
• Изменили оформление личного кабинета в соответствии с фирменным стилем компании.