Mobile Multicurrency Crypto Wallet Development CryptoWallet
2021 UX/UI design Purrweb

Crypto
Wallet

Idea

The crypto wallet enables users to send
& get tokens and view imported NFT collections.

Clients

Michal and Yao from Japan.
They liked our website and cases. Their request was to design and develop a crypto wallet that should become a Metamask alternative.

phone star

The app’s purpose

The 2009 crypto investors used only bitcoins. The modern crypto market offers over 1500 various altcoins. Some coins help preserve savings, the others are unpredictable. That’s why it's vital to invest in several different coins to decrease financial risks.

Traditional banks keep away from bitcoins, so users need an alternative to manage tokens.

Both newbies and experienced users will appreciate this crypto wallet.

wallet
How the app functions lock

The main page displays a user’s total balance in fiat and a list of their tokens.

As users enter such apps, they see their balance and can quickly send and get tokens.

screen screen wallet

Two ways to start using the app:

number 1 To create a wallet and get a seed phrase
A seed phrase is a long password key. This key helps a user restore their wallet in any other app.
number 2 To import an existing wallet
A user can see the general balance and NFT tokens in the imported wallet.
galery

Besides, a user can see their imported NFT tokens, but can’t buy new or sell old ones.

A user can have only one wallet at a time, but they can delete it and create a new one. The deleted wallet can be easily restored from Ethereum.

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

Mind map
and wireframes

ImToken and Metamask were our references for the app’s functionality, and we created the mind map based on them. The clients provided us with references for wireframes too.

This stage took us 7 hours.

screen
Analytics

We analyzed the project in detail. As a result, we preserved the reference’s advantages like the main screen functionality and got rid of the disadvantages like the complicated navigation and unrequired scroll.

Read more on this below.

UI/UX screen

We developed a pure and minimalist design with white as the key color. The clients’ designer reviewed our work.

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

This is the main reference - Metamask

And here's our design

The UX was inspired by Metamask.

There was no need to reinvent a bike and cause any inconvenience to users.

screens
screen menu-bottom tokens functionality

We made some changes to the reference UX. In Metamask, they use an outdated burger menu in the left upper corner. Having considered the usability, we implemented a tab bar instead. The tab bar is more convenient because a user doesn't have to stretch their fingers reaching the upper corner or use the other hand.

The reference app has the Token Import button placed under the token list. Having many tokens, one has to scroll down to find the button. We placed the button on top of the token list so that users can access it quickly.

We preserved the main screen functionality: the balance display, a list of tokens, and the option to get them quickly. These are the most popular crypto wallet functions. Besides, users can still restore a wallet with a seed phrase.

shield

Typography and colors cloud

We used the Outfit typeface, as it’s pretty readable and looks fresh to users.

The figures have the perfect width to display long numbers. It’s crucial as tokens may have multiple signs after a comma.

Outfit

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

The clients wanted the app to look clear, so we used a light blue shade. It gives a sense of purity and lightness. Besides, it makes a good contrast with white.

shape

Development

We picked a standard React Native stack for mobile apps.

react redux native

As a rule, apps work like this: the backend processes data, and the frontend displays them and creates new requests.

transition
token-coin
wallet-card

As a rule, apps work like this: the backend processes data, and the frontend displays them and creates new requests.

App without backend

The crypto wallet has no backend. Instead, its frontend turns to Ethereum that deals with tokens.

The app requests some data directly from Ethereum. Independent APIs make the process easier. They conduct transactions and display.

We used only free services,
but clients may have to buy some API’s
full versions as the project evolves. The clients don’t mind this as it won’t be an expensive deal.

etherscan cryptocompare opensea ether

We used the following APIs

Etherscan

provides tokens and transaction information.

Cryptocompare

provides information about token costs in different currencies.

Opensea

provides information about NFT tokens.

Etherjs

is the main development library that enables users to create dApps.

The project’s present.

arrow

We discussed App Store and Google Play deployment. Nevertheless, the clients want to get iOS test flight and Android APK versions. That’s why we don’t publish the app and users can’t download it.

Still, the app is ready to be demonstrated to investors.

star

Perhaps, our team will create a logo.

send

The Test Flight version is ready, and the clients can show it to investors.

purrweb