An atomic swap is a self-enforcing hash timelock contract (HTCL) contract that creates automated execution of paired digital assets exchange once predetermined rules are met. The concept of atomic swap was introduced the first time in 2013 by Tier Nolan as a basic principle for cross-chain cryptocurrency swaps. Today, it is becoming more popular among crypto natives with the key projects such as Uniswap, Kyberswap and 1Inch exchange. Uniswap alone has a total trade volume of almost 1billion USD and more than 50,000 unique users.
In light of Decentralized Autonomous Organization (DAO) popularity, there is an increased usage of a specific token pair like Ether (ETH) and Wrapped Ether (wETH) in the DAO operation for voting and staking. Raidguild, a decentralized design cooperative, plans to launch a web app for this specific purpose.
The aim is to design the platform that enables users to ‘wrap’ and ‘unwrap’ tokens as effortlessly as possible. I have experimented on this by drafting several design patterns. The goal to discover the pattern which allows the shortest path to achieve the task (for example, with the least number of clicks) while making the atomic swap interface become more intuitive.
Micro onboarding flow
In order to make the interface more intuitive, users need to grasp the big picture quickly - what is the goal and how to reach it. Therefore, a micro onboarding flow has been integrated into the application to help clarify every step of the action. I chose to explicitly use the word ‘step’ to imply the order of actions.
Step 1: Select the token to wrap/unwrap
Step 2: Enter the amount
Step 3: The amount you’ll receive
An (almost) Homograph problem
The spelling of ‘ETH’ and ‘WETH’ are almost identical. Users will experience time and fund lost by simply selecting wrong tokens to swap. In order to make sure that users are able to differentiate between two tokens at the first glance, the small underline under the ‘w’ is added together with the reduction of text size.
To dropdown or not to dropdown
This has been a tough decision because most users are familiar with dropdown list simply because most atomic swap applications are using them. But for one token pair atomic swap, the use of dropdown is an overkill. Instead of dropdown, the toggle UI is used so that all choices are revealed and users can accomplish the task with one click.
Form label utility
Adding an auto-display ‘max’ amount of token available in users’ wallet enables them to complete the task with less time. Users can stay inside the app from start to finish and do not need to leave to manually check the amount in their wallet.