Record page (view contribution)

[wackerow]

Description

• Creates and implements Pagination component for /record page
• Clean up layout for record page and RecordTable
• Enable search/filtering on record page
• Update "View contributions" button to go to /record

Screenshots

Related issue

• UI to view my contribution #44

* Still using dummy data; still need to pull actual contributions

[NicoSerranoP]

This is awesome! Thanks @wackerow. Regarding the data, you could try to run the sequencer to run some contributions and get the transcript.json file. To run the sequencer you can:

Sequencer

0. Run it in Ubuntu (if you use Windows try WSL)
1. Install Rust (https://www.digitalocean.com/community/tutorials/install-rust-on-ubuntu-linux)
2. Install SQLite (https://www.digitalocean.com/community/tutorials/how-to-install-and-use-sqlite-on-ubuntu-20-04)
3. Clone the repo (https://github.com/ethereum/kzg-ceremony-sequencer)
4. Create the local db running sqlite3 sequencer.db and sqlx database create
5. Create SIWE credentials by sending a POST request to https://oidc.signinwithethereum.org/register with body
   {
   "redirect_uris": [
   "http://localhost:3000/auth/callback/eth",
   "http://localhost:3000/auth/callback/github"
   ]
   }
6. Copy id and secret
7. Create a Github OAuth app here https://github.com/settings/developers and get id and secret
8. Set the following env variables

export GH_CLIENT_SECRET=XXXXXXXXXXXXXXXXXXXXXXXXXXX
export GH_CLIENT_ID=XXXXXXXXXXXXXXXXXXXXXXXXXXX
export ETH_RPC_URL=YOU_CAN_USE_YOUR_INFURA_URL_HERE
export ETH_CLIENT_SECRET=XXXXXXXXXXXXXXXXXXXXXXXXXXX
export ETH_CLIENT_ID=XXXXXXXXXXXXXXXXXXXXXXXXXXX
export DATABASE_URL=sqlite:sequencer.db
export ETH_REDIRECT_URL=http://localhost:3000/auth/callback/eth
export GH_REDIRECT_URL=http://localhost:3000/auth/callback/github

This is for testing/development only

export ETH_MIN_NONCE=0
export MULTI_CONTRIBUTION=true
9. Run the sequencer with cargo run -- -vvv

Frontend

1. Clone the repo (https://github.com/zkparty/trusted-setup-frontend)
2. Run yarn install
3. Run yarn start

The sequencer would use port 3000 and the frontend would use port 3001.

[wackerow]

@NicoSerranoP Don't have access to Ubuntu at the moment myself. Any reason I would need to set all that up for this PR? Is there a way we can tap into the existing dev sequencer to test pulling the data into the front-end?

[NicoSerranoP]

@wackerow I just created a transcription.json with 4 participants. You can find it here https://drive.google.com/file/d/15cHdwoJssQbD1PrkbTmKv9trs9_bEByY/view?usp=sharing

The participants ids are

"participantIds": [
    "",
    "eth|0xe4721a80c6e56f4ebeed6acee91b3ee715e7dd64",
    "git|38594836|NicoSerranoP",
    "eth|0x978a1f883414bda32a84360aac797eca1d8e5b28",
    "eth|0x47bc951fb20e282243f3ddb653f111fb8c6062b8"
  ],

Would it be a good idea to implement a function that checks the signature and guarantee that the contribution is coming from that participant? The search function would only look that the participantsIds but the sequencer could been sending wrong data. Do you think people would trust our implemented function or we just let them download the file and perform the verification by themselves (with their own built tools)

[wackerow]

@NicoSerranoP That's a great question... Do you mean just checking the signature of the active user, or checking the validity of every contribution before displaying? My concern on the later would just be performance... if we end up having to verify thousands of signatures before rendering the page.

[NicoSerranoP]

I was thinking only validating the signature of the searched contribution. If I type nicoserranop.eth, the frontend should show me the contribution and some check mark indicating it is valid (passing through a signature check).

I am thinking that maybe people that care about it might want to do the checking themselves and not trust any other party tool.