Rebranding Gnosis Safe for Teams about safe-react HOT 12 CLOSED

I merged changes after user tests, address book and incoming transactions on zeplin: https://zpl.io/a7Ee5m8 (except for one question about icon for custom transactions)

from safe-react.

Rebranding is up for review: https://invis.io/C8TFLRFU4ZV

from safe-react.

This screen is outdated (not needed): https://projects.invisionapp.com/share/C8TFLRFU4ZV#/screens/378759100

Is value in this screen the value for a single token or the value for the token balance? https://projects.invisionapp.com/share/C8TFLRFU4ZV#/screens/378759307

If we make the Safe for Teams compatible with Mainnet, will the network value use the same orange circle as Rinkeby here? https://projects.invisionapp.com/share/C8TFLRFU4ZV#/screens/378758900

from safe-react.

Changes are up for review: https://invis.io/C8TFLRFU4ZV

What's been done: improvements from https://github.com/gnosis/safe-react/milestone/2?closed=1 and https://github.com/gnosis/safe-react/milestone/3.

This screen is outdated (not needed):

@germartinez This screen is updated

Is value in this screen the value for a single token or the value for the token balance?

Not for single token

If we make the Safe for Teams compatible with Mainnet, will the network value use the
same orange circle as Rinkeby here?

We can take the color from metamask

from safe-react.

Some small changed after comments on Invision: https://invis.io/C8TFLRFU4ZV

from safe-react.

Proposed changes after user tests

Problems we have:

• status of transaction is not clear (confirmed or executed).
• there is no indication when you have to confirm a transaction submitted by another owner.
  The problem could be solved by showing notification when confirmation is required:

Clicking on it could open tx details. One way to show the status of transaction more clearly is to get rid of the tabs (confirmed/unconfirmed) and show the actions in the order in which they came. Each action has its own progress bar.

1. No one confirmed:
   

2. One owner confirmed, progress bar appears:
   

3. Two owners confirmed, tx awaiting execution:
   

4. Tx executed:
   
   It is important that "Confirm" button shows against your address so you know which one is you. The statuses in the list could be more specific: "Awaiting your confirmation", "Awaiting execution", "Executed".

The second option is to show it in the form of timeline, every action has a vertical progress bar.

1. No one confirmed:
   

2. One owner confirmed, progress bar appears:
   

3. Two owners confirmed, tx awaiting execution:
   

4. Tx executed:
   

from safe-react.

I really like the suggestions. I think they help understand better what actions are needed to actually execute a transaction. I prefer the second option with the timeline, but would maybe slightly simplify it.

I would rename "CONFIRM" to "TO CONFIRM" and remove the numbers behind that, so it only show the threshold after "CONFIRMED".

Especially, as we will move to off-chain signatures, having a progress bar for each owner does not make that much sense. Instead of individual segments, I would just make one line between the categories. And maybe in the circle besides "TO CONFIRM" a clock or hourglass symbol on a grey background.

What do you think?

from safe-react.

@lukasschor So we have these states:

I don't agree with removing numbers after "TO CONFIRM", I think it's passing the responsibility of doing math onto the users.

from safe-react.

I don't agree with removing numbers after "TO CONFIRM", I think it's passing the responsibility of doing math onto the users.

I like the new timeline style. I think we can simplify this even further by completely leaving out the "TO CONFIRM" section and just alway show the structure used in the designs at the bottom. (just two sections CONFIRMED and EXECUTE TX with the ones confirmed being filled and the others non-filled circles). What do you think?

So far there is no state "No one confirmed" as by creating a transaction one does already make the first confirmation.

Also, does it make sense to show the execute button always under the EXECUTE TX section, and show owner address on the left? So show this:

also like this:

from safe-react.

@lukasschor Corrected

from safe-react.

Looks very good.

Just to clarify, the number after "CONFIRMED" should be number of collected confirmations / threshold? In that case the two lower designs should be changed to say (3/3) instead of (3/5) not to cause confusion during implementation.

from safe-react.

@lukasschor Yes this should be "collected confirmations/threshold".

from safe-react.