From quote to confirmation

The moment before you sign a transaction needs a little space. Until then you've been filling out a form. Now you're about to act on it. A big confirm button is easy. Explaining what that button commits you to is the actual work.Up to here it is still just a form

I owned the quote, fee, route, and transaction states in Matcha's trade module. I also did amount entry and token selection, but here I want to talk about the step from entering a trade to reviewing it.

Give the numbers a clear meaning

What you're paying, what you'll get back, and the network fee answer different questions. Show them as three identical rows and people have to sort out what matters themselves. Make the secondary stuff too faint and the form looks clean, but you can't really check it.

In the module, cost, route, and what you'll receive are all there before you sign. I wanted two passes. First glance: yes, that's my trade. Second look: the details to check it. And during that second look you shouldn't lose track of which tokens and how much.Recognize it first, check it second

A warning needs room for uncertainty

The GoPlus integration added token checks for source code, tax, minting, and honeypots. I designed the loading, pending, warning, and result states. Those need to look different. A check that hasn't come back yet should never look like a pass.

The checks are extra information right when you're deciding. They shouldn't sound more certain than they are. A row of green checkmarks next to a button looks very official, so the wording and weight matter as much as the warning color.