Action Cards <-> Action Sheet

[weiwu.zhang]

An action cad is something that can be done to a token. It can be a blockchain transaction (transfer-ownership) or integration (start-engine, for a car token). They are contextual, meaning some actions is available in some context. For example, "lend" action is available for the car token owner, but not for the person who borrowed the car token to use, since he can't further lend it to another.

When a user starts an action, the action card is drawn. The user could do some interaction like filling a form on that action card, then confirm the action. Upon confirming, an action sheet is sometimes used to preview the result of the action. The word action sheet is borrowed from iOS.

I've made some rudimentary drawing to illustrate the difference.

First, an action card - in this case, transfer DAI to xDAI:

Then, an action sheet opens to preview the effect of the transaction:

The action sheet is coloured with a pattern. The content of the action sheet is cluttered - we need to fix that - but the concept is clear.

[farrahfazirah]

Illustration of an action card using DAI bridge, transferring DAI to xDAI, as an example:

I believe "Review" is a better UX copy to hint the assembling of the blockchain transaction and preview.

When user clicks on "Review", an action sheet opens up to preview the transaction.

[weiwu.zhang]

I struggled a bit to figure out how to let the user know their current DAI balance without cluttering the user interface (airlines would show the available points as well as points need to be spent for the current booking but often end up cluttering the UI). Now I see what brilliant idea you have: you kept the original balance in the action card uncovered, so when the action sheet slides in, the current balance is still in the darkened action card for those who are looking for this value. Also I like the way you differentiated what user will get with what user will pay.