The account used to ECDSA sign the contribution message must be the same as is used to sign in. This must be actively verified before requesting the ECDSA signature. i.e. the account selected in Metamask (or other browser wallet) must be the same as used for SIWE.
Also, the network selected in the wallet must be Ethereum mainnet, If possible, request a change to the network if it's not correctly set.

We should have an instance of the final version code deployed on IPFS such that this is a viable option for many users to run the front end. The aim is to have a content-addressed link for the sake of transparency wrt the code that users are running.

design coming soon

Sigma_Prime_Ethereum_Foundation_KZG_Ceremony_Security_Assessment.pdf

In the /src/pages/doubleSign.tsx, there is a section that retrieves potPubkeys from the wasm (use wasm.getPotPubkeys) and signs it using Metamask. This section should be activated when the sequencer/crypto library implements a getPotPubkeys function (checkout derive_taus).

Description

The current interface stops users from mobile devices from experiencing the website at all. Part of this is due to concerns over hardware performance, and potential browser session timeouts on mobile.

If it is decided to not allow contributions from mobile, I think we could still generate some wins by at least enabling the core of the site for mobile users, which is to include an additional FAQ page (#55) and View contributions page (#56). This will allow a mobile user to at least learn a bit about what is going on, even if they are unable to contribute directly from their mobile device.

If we end up not restricting mobile devices from participating, we need to consider easier ways for user to input entropy, as it would currently involve tapping quite a bit. This may also include small updates to the copy explaining that step.

Objectives

• Remove mobile device redirect from all pages, and only redirect mobile users if they try to go to a path of any contribution step. #63
• Improve mobile responsive design to make content accessible on all screen sizes #59

Optional items to consider:

• Consider hamburger menu to include network status, optionally connected address, language selector, FAQ, and view contributions links
• If language selector kept visible from Header on mobile, consider reducing to only using language short-code, ie "en" instead of "English". Or just hide language name, leaving the globe icon and down chevron.

Also,

• Work out which, if any, devices should be blocked from utilizing the app based on performance of timeout limitations
  If we don't restrict mobile devices: (Update, mobile devices will be restricted)
• Add new method of obtaining entropy from a mobile device
• Update explainer copy for this step (Would need to be translated as well)

It is not working and there is no trial token as in Chrome

1. "testnet ceremony" can be removed
2. the nav bar shouldn't overlap the main image. maybe scale it down? see the image below from the figma for the ideal fit
3. the beige backing circle is slightly too small, and leaves some white space. can it be a separate component that is behind the snake head? the inner circle should also be colored in this first step, as in the image from figma below
4. visually reduce the prominence of the Github option. we'd like to steer people towards Ethereum login as it enables double signing - see image below as well
5. scroll bars, not sure we should have them for either direction?

Every contribution will be linked to an Ethereum account (0x123.....). It is not possible to save the ENS at contribution time because if I had access to an specific ENS at that time I could impersonate him/her. But in the present and future, people should be able to search for a contribution of a known user like vitalik.eth

I think we can implemented a small ENS search ( const address = provider.lookupAddress( ens )) when users start typing in the search bar

Just a "Download Receipt" button here

Show /info/status in a nice way

Issue

Currently we have two separate header components (Header and HeaderJustGoingBack), and a new instance of one of these is placed on every page independently. This is leading to the header component being unmounted and remounted with a fresh instance which loses the state of which language to show.

Suggested fix

We are repeating a lot of layout logic by manually adding a Header and Footer component to each page. We should have one "Layout" component that handles the logic for overall page layout (ie, always render Header, Main and Footer sections, and depending on the route, alter the way these appear). This would allow us to remove the separate instances of the header and footer components on each page, and prevent them from losing state upon path change.

Note we already have a "Layout" component, but I would argue we should rename this to something like "SharedStyledComponents" since this is not really a layout component, but instead a bunch of themed components that are shared throughout the app.

I am viewing this with chrome on windows

• the white nav bar should not overlap with the blue decorative border
• there is still a horizontal scrollbar even when the zoom is at 100%
• body text should be left aligned, not centered
• does "Unlock" need to be visible if it just takes contributors to the next page?

The sequencer API is returning different error codes / HTTP status code to notify the frontend what happened when a specific route was called. Right now the frontend only tries to get a correct HTTP status code with a contribution object but does not handle the other errors

To enable visitors to view in different lang.

design: https://www.figma.com/file/PxzmldIzJ6hLkNZxWnXtnH?node-id=1439:364400#294038188

Objective

Provide two options for the theme of the copy throughout the process. The primary text currently in place tells a story and uses language that makes the experience enjoyable. A second option with more simplified language and explanation would help towards the goal of enabling as many people as possible to be able to understand and participate in this ceremony.

Design considerations

This could potentially be treated in the code as another "locale" or "language". On the front-end we should consider better ways to handle this beyond just doubling the list length for the language dropdown. A toggle that switches between the two modes for whatever language the user is on could be appropriate.

• 1. the text entropy section cursor changes to be smaller and bold, the hidden text is no longer centered in the entry box

• 2. if the user zooms below 100%, it shouldn't look cut off. we should be using the full graphic for each step
• 3. the white space between the top and bottom should be visually balanced

• 4. blue on yellow is not going to be visible, use a higher contrast color for the spinning wheel. we should also consider some prompt of "check your wallet to sign"

• 5. change background to tan #FFF8E7 - the end of the contrbution, the entire page should be saturated
• 6. move "share on twitter" button to here so participants are prompted early. make sure to give proper balance whitespace once it's added
  ~~ separate note, but we need to improve this text to better communicate what happens after the ceremony, when it will be used

i think we should consider reformatting from a long horizontal modal to a square/ vertical rectangle - stacking “My keys” above “sequencer acknowledgment” and add a scroll if necessary, similarly for the other transcript modal



• 7. 1. can we add a link in a new window to the full transcript?
• 8. should be “Participant ID” for consistency
• 9. try to reproduce the suggestions from the other modal if possible
• 10. align text with red line (signed by, integrity checks)
• 11. needs more info telling the participant what an integrity check is, what happens if it fails
• 12. remove, put on previous page
• 13. can users download the receipt as a txt file, not json? not sure if there is a specific reason for json, txt just seems more user friendly

edit Dec 16 3:48 ET - an idea on what the modal could look like.

1. • elsewhere in the copy we use "Contribution" not "Record". in the past we discussed those and "Transcript". we should pick one and be consistent, I dont have a strong preference, could even be "Contribution Records" or "Contribution Transcript" for the title. If needed, the FAQ should be updated to reflect our decision here.
2. • What is the sequencer address and why do users need to see it here?
3. • the search field has too many components and cuts off whatever appears after "#". Either we need to remove that last element, widen the search bar, or shorten some of the other text elements. Also, somewhere we had discussed not using ENS bc it might change in the future - is that still the case?
4. • what is "Seq. #"? if sequence, it's not clear bc we also use Sequencer in the docs and specs. i think it should just be "#" or nothing, it's pretty clear what that column refers to
5. • why is the word "Specification" here? if not needed it should be removed. in the "view" modal, it's called "Participant ID", which might be better for consistency
6. • i should be able to click anywhere within the red box to access the "Contribution Details" modal that is accessible when clicking "View". when a cursor is within the red box, can we do a very simple hover animation like we have for other buttons and turn the cursor into a hand? if this can be done, we can remove the "Details/ view" column entirely. otherwise the "view" is redundant. (not a strong opinion if there is good reason to keep it)
7. • Why would a user need to click into the individual "PoT Pubkeys" from here? can we move this expand interaction to the modal that comes when clicking "view"? Also, can we put the 4 identicons in a horizontal line instead of 2X2 to compress records vertically? (if it stays as a 2X2, thespace between the top and the bottom identicons should be the same)
8. • why is there a horizontal scroll here? should not appear at 100% zoom
9. • how is it possible there are two contributions from stefan via github? i thought we were filtering for duplicate contributions from the same participant.

Not necessarily a critical bug, but noticed this on the mobile layout.

A page to view user contributions to the ceremony

• Copy involved to be included in translations

Reported by Joseph C. 'Seems to get stuck on Bind Your Contribution'

Description

The website currently supports internationalization. The copy on the page is currently in English and Spanish, although plans are to translate the copy into additional languages with the goal of allowing even more users to access and participate in the ceremony.

Steps involved

• Set up the Crowdin project/program
• Decide on languages to support
• Finalize and upload all copy to Crowin
• Order translations
• Import completed translation files into site
• Test

Given that soon we are going to add more languages and translations to the site, it would be beneficial to break the translations out of the current i18n.js file.

This will allow us:

• To scale better and avoid having a huge js file
• To share the translation files more easily with the translation services

This is bad for UX and defeats the purpose of deleting the secret (should a user actually save the password.

When signing on a url from ethereum.org with metamask, it prompts

You are signing-in to kzg-ceremony-sequencer-dev.fly.dev.

Which is the url of the sequencer. This discrepancy makes users like me worried and scared of signing anything with my wallet.

We require a reproducible build such the result will produce an identical hash (for IPFS purposes) for anyone, provided they are building from the same source. This will encompass the https://github.com/zkparty/wrapper-small-pot

When the browser is busy, the Sign button takes too long to get the PotPubkeys and open the Metamask popup to contribute. This could cause the user to double click the button and get two Metamask popups and mess up with the workflow.

Fix: put a loading spin in the Sign button and disable it until browser gets the PotPubkeys

Been waiting quite some time and over a hundred attempts later still shows the same wondering if it got stuck or was paused but the site says the sequencer is online. I might try to open a PR for attempts if there's interest in adding that to the page.

Temporary change to the tweet intent text to make it clear that it's a test run.

sharing the ceremony.ethereum.org URL should produce a preview card similar to the image below. as a stretch, it would be nice if it had a dynamic display which shared the total number of complete contributions at that time (not a priority at this time). im not entirely sure how to configure this on the site, carl might have an idea

we can use this image for the preview card for now, let me know if you need any modifications to ratio/ otherwise

• Entropy Input: prevent input size change when entering entropy string
• Landing: "learn more about" is not working

I guess this should be an easy fix, let me know if I can help you in something or you need any more information.

It's easy repeatable, here an screenshot of the console with some context.

Maybe it's just an update to the latest version of the lib. :-)

• 1. background color should be #FFF8E7, remove gradient circle behind text

• 2. use the border design suggested in the figma doc for the intro content, the “Latest Contribution” section, and the FAQ

  • trent to update design
• 3. make header text single line, we can update translations later
• 
4. add countdown suggested in figma doc
 between title and copy
• 5. delete button and text, these are not needed anymore. be sure to reapportion leftover whitespace
• 6. 
users should be able to click through to the link anywhere within that red box, not just on the text. the links should also go to:

• IPFS: https://github.com/ethereum/kzg-ceremony/blob/main/README.md#ipfs-hosted-versions (i can point kzgceremony.eth to these hashes)
• Hosted Interface: https://ceremony.ethereum.org/#/entropy_input
• Other clients: correct link
• Write your own: https://blog.ethereum.org/2022/12/15/kzg-ceremony-grants-round

• 7. hover states/ border not consistent between each button. second blue border should be further in if size of font allows for it, see figma for reference

• 8. Use bold Inter copy font for FAQ headers, not Taviraj. also, if possible we should tighten the whitespace around each FAQ (red line suggestion), make sure to apply to all FAQs, not just the last one. not a priority, but on hover state for the FAQs, everything below moves up a few pixels because the bottom line is removed. time permitting, this should not happen
• 9. “Built”, not “Build”

• 10. ❓do we even need the nav bar at this point if we’re removing the arrow? it would be cleaner without it. if people want to change the language they could just do this at the beginning. or we can keep the language dropdown in the corner but still remove the white bar. not a strong opinion, and not a huge priority (this would apply to all steps of the hosted interface after this one as well)


• 11. remove green around cursor - seems to be a bit laggy in my experience, and doesn’t fit with the rest of the graphic theme
• 
12. any context on what the wait icon is for?

• 13. remove arrow to be consistent with the previous page. (realizing now the arrow might be an antipattern if we encourage people to do it, the site might time out if they do it at a certain point in the flow)


• 14. hover shadow characteristics (placement, spread, opacity) for all applications (including buttons) should be the same as elsewhere eg. landing page options, FAQ, Transcript contributions. here it is too light. not a high priority
• 15. add underline and ↗ to indicate a link out

• 16. remove arrow as in previous steps


• 17. ❓perhaps the text should note “After signing with a wallet, you will be redirected to a “Sign-in with Ethereum" page, and then back here to complete the process of contribution.” it’s a little strange to be redirected without notice after signing the first time in the wallet.
• 18. 

content should ideally be centered vertically in the circle
• 19. move addition of yellow ring to the previous step in the flow to distribute the color between the steps better

• 20. move the computation pulse animation (where the shields become yellow) to this lobby step and just keep it consistent until the completion of the calculation / “Dankshard draws Near”
• 21. the disk animation / color should be moved to the previous step but without the spinning animation. 1. this will help spread out the appearance of color throughout all the steps. 2. i’d like it to not move because the spinning exposes disconnected areas under the graphic that it wasn’t designed for

• 22. i should have been more specific - this should link to the hosted records interface at https://ceremony.ethereum.org/#/record

• 23. integrity check info is anchored to the wrong place


• 24. the bottom of the “View Contribution” ends with the bottom of the page, which feels a bit odd. the user should be able to scroll a bit further so “Download receipt” is slightly higher on the page

• 25. clicking the “View all Contributions” button on the homepage takes you to the bottom of the records page, not the top

• 26. each data point should be a newline for visual clarity and other languages. suggestion on the right

• 27. minor text alignment issues on the homepage - seen with simple english, french, spanish. not sure the cause

When user moves the mouse in the entropy input page, the snake starts coloring to indicate the user progress. It would be great to smooth that animation and/or add additional details to make the UX better

@vacekj

https://www.figma.com/file/PxzmldIzJ6hLkNZxWnXtnH/KZG-x-Trent-x-PSE?node-id=329%3A4305&t=JR0UtCX47rdDrMid-0

The popup requires COOP/COEP settings that aren't available in Firefox. We can avoid this requirement if the signin is done with a redirect, then redirect back to our site upon completion.

We have an offer to provide a Spanish translation of our text. We first need to implement internationalization capabilities, then we can accept a PR for that translation, and any other languages that might be offered.

We’ll need a simple, unobtrusive way to select the language in the page header, and an i18n wrapper around text elements.

Portis, Torus and Formatic require specific http headers to work in our website (they use auth popups). Wasm code requires specific http headers that block popups.

Approach:

1. check service worker in public/sw.js and see if the HTTP headers can be set for one page (doubleSign) and not for others
2. force window reload in doubleSign page so the standard React proxy can setup the required HTTP headers

Description

In PR #103 we introduce copy in 14 new languages which highlights some layout bugs in a few languages where the copy runs longer than in English. Noticing this in the following languages: bn, de, es, fr, in, pt, ru, tr

Screenshot

Note the input and button extending into the circular frame

Suggestion

To minimize issues with reframing this, I would suggest we decrease the font size a reasonable amount to allow the test to fit properly in all languages.

1. - 1) the cursor over this part indicates interaction, but i think it should just be a regular cursor
2. - 2) the dropdown menu should be the same width as the globe <> down arrow (red lines), or at least centered on this group
3. - 3) this area still needs work but at a minimum the tan circle should be centered vertically on the red box of content
4. - 4) can we make this one line instead of two to give the other content more room to breathe
5. - 5) can we add the FAQ section directly to this page and remove it from the footer? adjust other footer elements up
6. - 6) “Built by the Ethereum community - 2022” given there have been many contributors to this, not just the EF.
7. - 7) the width between these two text lines should be normalized somehow, maybe to the red lines? i believe the top width matches the following pages, but it might be worth breaking in this case
8. - 8) we should consider a small section of “latest contributions” with ~3 of the latest and a button to “View all” that takes you to the existing Contribution transcript interface
9. - 9) we should delete this text - it’s unnecessary. we can wait to delete once we have a more substantial set of text changes to pass to the translation team when we get there
10. - 10) i think this information should be presented to users on the landing page, possibly centered in the toolbar? open to suggestions

11. - 11) move FAQ to the landing page. make sure that the text width of copy aligns with the other copy blocks
12. - 12) hover state and lines between entries should match the contributions page.
13. - 13) question header should not match page title size/weight (esp after moving it to the home page where there are other headers). i’d make all of these headers bold but the same typeface as the copy itself, just bold

this page is looking really good! great work



13. - 13) 1 need a higher contrast color for the loading indicator, match whatever is decided elsewhere
14. - 14) add an option to toggle between oldest / newest
15. - 15) align text with other elements below
16. - 16) we need to add some context in the genesis modal explaining why this contribution is this way
17. - 17) shouldn’t this show the last page # instead of 6? ie, there are 34 pages right now, how can a user skip to the end? if we implement #14, then this becomes less of an issue
18. - 18) minor, but didn’t we talk about omitting ENS from search bc it might change owners in the future?
19. - 19) change background to tan #FFF8E7
20. - 20) the tooltip aid should expand into the right margin, not over another contribution. the triangle pointer overlaps “fingerprint”. tooltip text should be 2 or three lines, possibly the size of the red rectangle

just a thought, should these contribution modal layouts match the one available at the “dankshard draws near”? (edit: just realizing that that's the "sequencer acknowledgment" - i didn't realize they were different things and other people probably wont. it would be good to add some introduction text explaining why this page is important.)

Suggested: 'your random inputs are being combined with others'

Show participants how many people are waiting. Use the /info/state sequencer route

Fix the flower overlap in the contributing and complete screens

The entropy input page asks the user to move the mouse to generate entropy while the snake image gets colored. To improve user experience, we could implement a custom cursor that would notify the user that he needs to move it in order to continue. The current ideas we have are:

1. Use a creature image (10px - 20px) as cursor so we tell the users to run away from the creature.
2. Transform the mouse cursor to some kind of candle light that would illuminate portions of the page where it is located. Exs: https://codemyui.com/flashlight-mouse-pointer/ and https://codepen.io/StephenScaff/pen/Jjdveyw

@vacekj

Figma: https://www.figma.com/file/PxzmldIzJ6hLkNZxWnXtnH/KZG-x-Trent-x-PSE?node-id=329%3A4305&t=JR0UtCX47rdDrMid-0

In effort to provide more context and understanding to users who will have questions about the ceremony.

To be included in translations.

Update, #64 initializes the FAQ page, but there are still a few outstanding tasks before calling this issue closed:

TODO:

• Finalize and polish existing copy (cc: @CarlBeek)
• Determine any additional questions/explainers to include. If so, write them and update.
• Add other links to this page