Creating ‘1-Click’ Blockchain Experiences
By: Dan Melton
Tags: Fetchmusings, Blockchain, Erc20, Ethereum, Cryptocurrency

When we set out to build Fetch, we placed the user experience first and the crypto technobabble second. Cryptography and blockchain ideals are important, but should fade into the background so users can transact with zero crypto-knowledge. Even if you have crypto-knowledge, the user experience should still be as simple as possible so you can just transact.

To build a simple user experience, we identified four challenges to solve:

Challenge 1: The Wallet ‘Play’ Wall

To start using any service, nearly every Ethereum service requires MetaMask or a USB-key attached for a hardware wallet. Users want to try the app, but first have to install something else to do so. An ecosystem of dApps have been created without built-in wallets. That’s definitely by technical design — but presents a significant user experience problem.

Challenge 2: Click, Wait, Click, Wait, Click — ‘smart’ contract steps

To open a collateralized debt position in DAI, you need to unlock 7 ‘allowances’, convert ETH into wETH and wETH into pETH. (Note, I love DAI & MakerDao and use it frequently). You can watch the tutorial video for the details. For a 0x protocol trade, you’ll need to do the wETH step, turn on an allowance and possible do an allowance on ZRX if there is a fee. A typical trade could be 3 to 5 transactions.

Current best practice is to ask the user to click ‘allow’ or ‘process’ on each step , shunting to MetaMask to do the signing. You have to check MetaMask for transaction status and the app for app status. Both systems are on different Geth/Parity nodes, which means MetaMask may indicate transaction success but, the app interface hasn’t updated yet.

The design problem here is three-fold. First, we’re asking the user to click multiple buttons repetitively in what should be a smart contract system. Second, the user perception is that they need to wait an unknown length of time for each action to finish without a clear marker of how to confirm. Last, the display in MetaMask of the transaction can be hard to decipher, and doesn’t really connect with the experience intended by the app developer.

Challenge 3: Where can I get ___ Token?

To trade on 0x Protocol, you might need the fee token ZRX. To close a DAI position, you need MKR. To do more advance actions in Augur, you need REP. These services represent a powerful ecosystem of protocols, but each require a token to unlock their potential. How do you get that token? I’ve got ETH (or worse, USD) and I need REP, MKR, ZRX, etc. Central exchanges are one route, but require advanced know your customer and yet another interface to engage. (Remember the user now has an app, wallet and now an exchange to navigate).

Challenge 4: The Crypto Word Game

Next, nearly every blockchain-based service requires the user understand the language of the cryptography, protocol or developer created terms for a smart contract interaction.

wETH is a great example. When I want to buy ZRX with ETH (outside central exchanges), it’s often quoted in terms of wrapped ETH (wETH). Hurdle one, I need to understand what wETH is and why I have to use it (so it has ERC20 properties).

After I ‘wrap’ my ETH, I need to ‘approve an allowance’. Approving an allowance has no real metaphor in today’s financial transactions and from the user’s perspective is yet another hurdle to enjoying the dApp’s benefits.

How did we solve these problems with Fetch?

Challenge 1: Solving the Play Wall

Fetch is a hybrid app and wallet that integrates the user’s wallet into the experience. It’s a downloadable desktop application, and you are up and running immediately. You don’t have to create an account to try out Fetch.

Integrating the user’s account (wallet in crypto-speak) with the application not only gets them over the play wall hurdle, it makes it possible to elegantly solve some of the other challenges. More on that below…

Challenge 2: Making smart contracts smart with ‘1-click’

A transaction often includes a series of smart contract interactions. Fetch radically simplifies this process for the user by making it 1-click for the user.

Fetch makes 1-click transactions possible because we’ve built a smart contract transaction platform.

Fetch:

Understands the underlying chain & protocol powering the transaction.

Transparently links together the smart contract steps to complete the transaction.

Bundles the user’s account with the application so users can authorize N smart contract steps with 1-click (see why the solution to Challenge 1 is so important!).

It’s helpful to walk through an example. Let’s look at an 0x trade on Radar Relay. Fetch simplifies it for a user by making it appear like a 1-Click transaction. The 0x transaction includes the following on-chain steps:

Convert ETH to wETH Approve wETH allowance for ERC20 Proxy Contract Approve ZRX allowance (in case of fees, not always necessary) Submit trade and fill amount to 0x contract (potentially multiple trades with many orders on the order book) Convert wETH back into ETH

Fetch links all of these steps together and hides all the complexity from the user. So instead of the user manually navigating these steps and incurring all the associated work, they click ‘Easy Buy’ in Fetch and they are done. Let’s take a look.

First, the user identifies the trade they would like to make.

User can click an ‘Easy Buy’ Button for a 0x Protocol Trade

Then, they press the Easy Buy button, which gives a confirmation screen with estimated fees:

Transaction Confirmation Screen for an 0x protocol-enabled transaction

If they agree, pressing Easy Buy launches a password confirmation to unlock your account and sign the transactions. Remember the user’s account is integrated with the application so they can authorize the series of transactions with just one password. Also, notice that Fetch presents a commonly understood password prompt, no transaction hashes anywhere to be seen.

Fetch uses password-based encryption to sign transactions

Finally, Fetch sends you to a transaction screen so you can follow the progress.

Technically speaking, Fetch plans out all the smart contracts steps ahead of time, and then signs all of them, increasing the account nonce each time. Then, Fetch submits the transactions to the Ethereum network, which executes them in order on each node. This is an awesome feature of Ethereum’s network and more developers should take advantage of it!

Challenge 3: Buying the Token

We have big ambitions to support every finance protocol on the blockchain. That’s a lot of tokens our users will need to access all these protocols.

Thankfully, our ‘Easy Buy’ button makes this simple. If you want to buy 10 ZRX, you specify the amount:

User enters the amount they want to buy

Then, a list of results shows all the options you have to buy that token with normalized rates in a currency you understand.

User can click an ‘Easy Buy’ Button for a 0x Protocol Trade

From there, the user is one ‘Easy Buy’ click away from having the token they need.

Challenge 4: Solving the Crypto Word Game

Fetch doesn’t use any crypto language. We call your wallet an account. Your Ethereum balance is your ‘account balance.’ Our goal is to describe every transaction in terminology analogous to something you already know.

The 1-click technology we’ve built doesn’t just power simple transactions, it makes it possible for us to avoid using any crypto jargon.

When you need to buy a token, and wETH is required, we just call it ETH and automate the management of conversions in the background so users don’t have to deal with it.

Language is not only a surface level issue of what the user is required to understand, wETH in this case. It’s also a deeper problem of what is expected from the user versus the application. Fetch automating wETH conversions behind the scenes doesn’t just remove the language for the user, it removes the work and time involved for them.

Join the Beta

It’s been a pure joy building Fetch with simplicity, clarity and beautiful design in mind. We’re inviting new users to join our beta. Sign up!