Cerberus Wallet. Part 3. Designing a mobile application
This this the third part of series of articles is devoted to the development of the Cerberus Wallet project, which uses crypto transactions for two-factor authorization.
In this article we will talk about product design for mobile application. IMHO, many interesting crypto applications have poor UX design, and sometimes it’s difficult to use them for non tech-savvy users. So, designing a mobile application, I set the following tasks for myself:
- Convenient and simple interface.
I like simple applications that perform understandable actions and are not overloaded with “a million features”. - Easy portability on iOS and Android
This will provide more application coverage - Simple and fast onboarding process
Even a tech-savvy user should easily understand the app and start using it.
Based on these requirements, I chose React Native, because, firstly, the application can be released for both iOS and Android with minor changes. Secondly, for React Native there are many ready-made libraries, including those for interacting with Web3.
For the first version, we restrict the following functionality:
- Display a list of recent transactions
- Confirm / Cancel signed transactions
- Display list of connected wallets (accounts)
- Add a new account (wallet)
- Receive push transaction notifications.
To implement the functionality, it is convenient to use Tab Navigation and three main screens: Transactions, Wallets (Accounts) and Settings. The first version of the user experience flow :
Transaction confirmation flow
On the Transaction tab a you could see a list of recent transactions. When you click on a transaction, you will go to the confirmation screen and check whole transaction information. If the transaction is yours, then he clicks confirm. If the transaction is fraudulent, then he clicks cancel.
To improve protection, the following logic has been implemented: a confirmed transaction can be canceled (during confirmation time), but a canceled one cannot be re-confirmed.
What to do if your wallet is “hacked” usecase
Only those transactions that are signed by the private key are included in the list of transactions, which means that if there appeared a transaction that the owner did not create, then someone knows his private key, and further use of such a wallet is extremely unsafe.
In accordance with this logic, upon receiving the first call, the Client creates a new key / wallet and transfers funds to it from this one, leaving the account zero. The advantage of such a system is that information that someone knows your key is made available to you and you can take welcome measures to protect other assets.
Wallet connection flow
In the first version of the application, I planned to make a big flow for fine-tuning the wallet and its warm from the application:
Later, I abandoned this idea, as it became clear that the wallet itself should use the web (metamask) — this is good practice from a security point of view (it is possible to sign transactions using ledger-for example).
Then the idea was born to make a simple flow — to add a wallet, the user only needs to scan it. Developing a past application, I went over several QR-code scanners and chose QR-Scanner (https://github.com/moaazsidat/react-native-qrcode-scanner)
The next important UX element is an alert, which the user receives after scanning a QR code. This is important, because there may be an error during scanning, and with such Alert the user can always verify the scanned address with what is on his contract.
If the user selects this address, the application transfers the address to the backend, where it is attached to the user and added to the monitoring system.
Panic Mode. User Nervous Care
In the current version, I have not yet managed to really implement it — but the presence of PanicMode seems to me an important decision. Imagine that you are in the mountains, in a forest, or in another place with poor communication. And you received a message that someone is trying to transfer your funds. Of course you will click on cancel, but this will add to your concern — after all, information about transactions and lost funds will bother you.
By pressing Panic Mode, the user blocks any confirmations for a day and can be calm that the Cerberus server will respond to oracle requests that the transaction has not been completed. In the future, it is planned to connect a special role for the backend in the Smart Contract, which will be able to block transactions for 24 hours. This will further improve the protection of Clients funds.
Smart Contract Security Alert (planned)
It is also planned to add to the application an additional notification function about possible vulnerabilities and notifications of problems found in the smart contract.
Having received such a warning, the user will be able to populate a new protected smart contract and transfer his funds there or simply return them to his account.
In next article we’ll talk about backend development.
Stay tuned!
Full code of mobile application could be found on GitHub: https://github.com/MikaelLazarev/cerberus/tree/master/mobile
All Cerberus Wallet articles:
Part 1. Concept
Part 2. Development of a smart contract and external adapter for ChainLink
Part 3. Designing a mobile application
Part 4. Backend
Part 5. Demo wallet
Part 6. Conclusion. Future of the project
About Cerberus Wallet:
Cerberus Wallet is open source project which adds two factor authentification for your crypto wallet. Even if your private key would be stolen, hacker would not be able to transfer your assets without your confirmation.
This application was designed from scratch especially for Chainlink + CoinList Hackathon.
Official site: https://cerberus.ledger-labs.com/
Video presentation: https://www.youtube.com/watch?v=4S8OyUf7cIA
If you like this project, please vote for it: https://coinlist.co/build/chainlink/projects/44b65d6e-02f3-40de-b3cc-40d905da76cf
Join Cerberus Wallet team:
CerberusWallet is an open source project. If you are interested in join the team, please contract me at t.me/@mikael_l. Together, we could create a much-needed technology and make crypto currency safer.
