Design a variety of tx approval screen options

[danfinlay]

The tx approval screen is a really open ended design challenge, so I'm going to try to formally pose the problem here so new designers can hop in and take their shots.

The Current Behavior

When a Dapp requests that a user signs a transaction to the blockchain, we use a Chrome notification to indicate that transaction to the user.

We recently made a technical breakthrough that allows us to inject arbitrary styled HTML into a portion of the chrome notification usually reserved for an image. Here is our current notification, note it renders the bare minimum text.

Notification version

If you dismiss this (by pressing the top x), the next time you open MetaMask, you will also be prompted with the transaction. Here's our current view, note it's actually rendered with the same template, just different dimensions:

Extension version

The basic information we want to display

• The sender account
• The receiver account
• The value in ether sent
• The maximum transaction cost (gas costs)
• Warnings of potentially malicious contracts
• Any other efficient visual indications that can be conceived of.

The Challenge

What's our best efficient and aesthetic way to represent a pending transaction? This could be a vote in a democracy, or sending a token (and for standard contract types, we very well might identify those transaction types and visually represent those types of interactions!)

Chrome Notification Constraints

We're using Chrome Rich Notifications, and so we're restricted to the flexibility they provide.

• Fig A: One icon in the top-left, can be styled however we like, but it helps to show who is sending the notification. (80x80px)
• Fig B: This mandatory block can only have up to four lines of unstyled text. (280x80px)
• Fig C: An optional block that can be styled as we please with non-interactive HTML. (360x240px)
• Fig D: Up to two buttons at the bottom that can have text on them.

Current ideas

Addresses are normally 32-character hex strings, but those are both ugly and users are unlikely to read them, so we've been experimenting with visual representations of long numbers, including how we might click them to copy the full address. Feel free to mock up your own!

Once we have efficiently narrow visual account representations, we can start using more horizontal space, like maybe an arrow pointing between accounts to the right.

Another strange & ambitions concept is to show a graph of the contracts that get touched by that transaction, pictured in the below image, below the blue line:

We could also try to use the concept of "attestations", maybe showing the identity of someone who vouches for this contract's security. It's easier to read that someone approves of something than to understand why you should trust it yourself, which is honestly probably beyond the scope of a tx notification.

Anyways, I hope this inspires some fresh ideas, the Ethereum ecosystem needs them all!

[danfinlay]

A sideways take on user confirmations

If the chrome notification was simply too stifling and limiting, we can also optionally open a new tab, and within that tab, render whatever we damn well please to represent a transaction confirmation.

Sorry for not throwing out that kind of basic, open-ended option in the first place. Sometimes the hardest ideas are the simplest ones.

This approach has the tradeoff that any app can open a new tab, so it doesn't have the inherent trustworthiness of a chrome notification.

[danfinlay]

This one by @sandrasong meets all the requirements & constraints nicely:

[danfinlay]

Here's a fresh design from @yunyunchen1012!

[danfinlay]

Here's the latest from @VladTod, I like the use of icons :)