Implement multi step action modals

[faboweb]

We get some bad feedback about the action modal. It seems to not be well designed for the expectation of customers. Let's come up with 2 proposals on how the action modal should look like and collect feedback from our colleagues.

[fedekunze]

I propose to use the same steps as Ledger Live for signing with the Signer app or Ledger:

1. Transaction details (generate_only)
2. Connect Ledger/Signer app and sign the transaction (sign)
3. Verification (broadcast)
4. Confirmation of the transaction and link to Transaction History or Transaction Page (from the sketches we made)

[fedekunze]

If the user uses the account password on step 1 we can skip steps 2 and 3

[faboweb]

I would do signing with password also step 2

[faboweb]

Wait for #1807

[jbibla]

#1807 will help make improvements mentioned here easier to implement!

[fedekunze]

also we should add a Back button on step 2. to change the tx details before signing with Ledger or password

[faboweb]

Bring back the back button he said 🤣

[jbibla]

i think this is blocking on #1338

[faboweb]

i think this is blocking on #1338

Can't we already have a design for the signing approach without final implementation?

[jbibla]

Can't we already have a design for the signing approach without final implementation?

my mistake. yes, you are correct.

i will do this!

[jbibla]

ok ya'll!

here are some design proposals. these designs will result in smaller action modals #1897 and add support for numerous signing methods #1823.

https://app.zeplin.io/project/59e66beff6721ea8bf562e5b/dashboard?seid=5c51aeea881152354d6f7101

[migueog]

@jbibla Are the designs that you provided above ready to be implemented? If so, could you please invite me to that Zeplin project?

[jbibla]

@migueog done!

there are a lot of improvements mentioned in this thread. please only worry about the following items. I would recommend making a separate PR for each of them.

1. show step count and center modal header

2. display small tx-li for each modal (send, delegation, vote etc)

[faboweb]

For 2) we want to use the actual transaction list component (probably) LiAnyTransaction

[migueog]

@jbibla Thanks for the invite and outlining the work for this issue! I'll let you know if I run into any troubles.

[jbibla]

For 2) we want to use the actual transaction list component (probably) LiAnyTransaction

yep! thank you @faboweb

[migueog]

@jbibla Following your advice with regards to creating a PR for each item in this issue, I was thinking of create a branch for this issue. I would then create a branch for each item in this issue. That way I can create separate PRs for each item and each PR would then be merged into this issues' branch.

Let me know if approach makes sense to you.

[jbibla]

usually we have a branch per issue. when the branch is ready to be merged you can make a PR to develop. feel free to make as many PRs and issues as you'd like. the smaller they are, the easier they are to review and get merged!

[migueog]

@jbibla Just checking to see if this is the sort of behaviour you're expecting

[faboweb]

Looks good

[jbibla]

yep! very much so!