Frontend design fixes about trusted-setup-frontend HOT 3 CLOSED

1. • the Submit button activates before the user has added their text entropy. edit: after further investigating, users are able to actually submit without entering any text entropy..

2. • to illustrate the size change/ movement in the entropy box (i can re-export components if you need new ones):

3. • the snake graphic has misalignments and color bleeding out. the biggest one is the black line where the head meets the top of the body

4. • the snake should remain colored for the Open the Way page now that we have reordered the steps

5. • on the Bind your Contribution step - there is a misalignment of components, shouldn't be any white showing between the rings. similarly for between the tan circle

• on the Wallet Choosing modal the background should be blurred

6. • can we remove the spinning animation on the Waiting to be Submitted for now? i think it needs to either be slowed down or replaced with something more gentle, like a pulse. it's also strange that the black and white version is still visible underneath. The title and body text are not vertically centered in the white space, possibly bc we add the error message in? We should consider removing this error message, as the user already knows they need to wait by the regular copy. Finally, if an error message is needed, the two text boxes are not aligned on the left side

• last thing, it's strange that the full illustration gets cut off when adding back in the supplemental information about danksharding below. should we consider not clipping this?

7. • I have a few questions here - doesn't SIWE mean we don't need to repeat the login process each time as long as the session is still active? even though it looks like the site is persisting my address each time i log in, i still have to "Sign-In with Ethereum" in the sequence. finally, if the intent is for users to use their address once and only once, why should SIWE remember user addresses - wouldn't their address be rejected once they tried to repeat the sequence?

If there is a reason for the interface to persist information, there should be a way for them to log out an address out in case they want to use a different one.

8. • The back arrow in the Nav bar ← was intended for users that wanted to change their entropy before signing. right now it redirects to the beginning, and the entropy creation is the first step, not in the middle (less chance that someone would want to change it). should we just have the regular KZG Ceremony logo to redirect to the home page and remove the arrow?

from trusted-setup-frontend.

@tvanepps I got most of the observations finished but we should consider the following:

3. I cannot fix this because it is part of the dynamic SnakeProgress component that gets colored with the mouse movement. We need to reexport this graphic and check out with SVGator (the animation library) to see how we fix the misalignments in the snake head & body. Maybe @tkmct could you give us a hint?

5.1. Wallet Choosing: I was not able to make the background blurred because it is an external component that doesn't let us set many options. I was able to make the background darker so the back image is not that visible. What do you think?

6. I increase the animation time from 12s to 40s in the waiting lobby. The rounding animation is slower now. The pulse animation is applied when the contribution is being computed. I think a more explicit animation (rounding) is better to notify the user he might have to wait a bit in the lobby.

7. The SIWE is done between the user, the external OIDC (SIWE) and the sequencer. After the exchange, the sequencer gives the user a session id to use it as an authentication method for the other routes (lobby and contribution phases). The double signing re-asks the user to sign a message because it is done between the user, the wallet provider and the frontend. After the signature, the frontend sends the signed message along with the contribution to the sequencer.

8. We could keep the main navbar (logo in the left and language switcher on the right) but it would cut out a piece of the pizza because its height. I feel we can leave the back arrow redirecting to home but what do you think?
   

from trusted-setup-frontend.

@NicoSerranoP - your replies make sense, thanks for looking into my suggestions!

3. we can address this in a separate PR when we have the proper asset
   5.1 understood, darker is fine
4. 👍
5. 👍
6. still thinking about this one. leave as is for now 🙏

from trusted-setup-frontend.