kittybest / my-badge

My attester app built from unirep protocol.

create-unirep-app

This is a demo app of a unirep attester. In this demo app, users can request reputation from the example attester. After transition, user can prove how much reputation he has.

See: Users and Attesters

1. Installation

npx create-unirep-app

Then cd into the directory that was created. There are two ways to start the example attester:

2.1 Start with one command

yarn start

Then the frontend will be running at: http://localhost:3000/

2.2 Start with each daemon

2.2.1 Start a node

yarn contracts hardhat node

2.2.2 Deploy smart contracts

in new terminal window, from root:

yarn contracts deploy

2.2.3 Start a relayer (backend)

yarn relay keys &&
yarn relay start

2.2.4 Start a frontend

in new terminal window, from root:

yarn frontend start

It will be running at: http://localhost:3000/

my-badge's Issues

[Frontend] Mobile UI/UX

[Frontend] UST countdown

• countdown on button, disable it before it can be clicked

[Frontend/Relay] Sign in

Frontend

• enlarge the input field on Join Page
• if the user clicks the twitter/github button, will display signup error: has signed up before
• after login, redirect to user page
• if the user wanna update, check if there's access_token --> if yes, get rep directly, --> if no, oauth first.
• pass isSigningUp to relay to decide whether to sign up or not

Relay

• oauth without signup, return access_token and isSigningUp to user

[Frontend] description onHover

• every buttons on the website

[Contract] ranking

• need a circuit that is similar to epochKey.circom, with revealing the data user has
• new uploadReputation event to event emit (need to update app contract)
• the relay synchronizer will process this event, and add the record to db (need to update schema)
• the contract will check if the state_tree_root be calculated from the proof matched the current state_tree_root (refer to epochKeyProof function check, need to update app contract)
• new apis of getTop5() and getMine(epochKey, epoch) to the relay (need to have a new router)
• might also need a circuit that check the difference of 2 certain fields (e.g. check not only the 0th and 1st field diff, but can also check the 2nd and 3rd field diff. if you want, also can check the 2nd and 1st diff)

[Frontend] e2e and context tests

[Frontend] Error and Loading display on User Page

• Display error message right inside the InfoCard component
• Loading on button, prevent user do anything while it's loading

[Contract] Deploy several contracts

Modify deploy.mjs:

• deploy Unirep.sol only once
• deploy several contracts according to cmd input
• display addresses on screen

[Frontend] ranking

directly search from the contract:

• top5 of each attester
• ranking of themselves

[Relay] calculate how much rep user could get

called updateRep:

• user passes access_token and repProof to relay
• relay use access_token to get user's followers/subscribers/likes/stars...etc
• transfer the web2 data to rep points (how? now maybe just 1->1)
• calculate the difference of user's current rep and the calculated one
• give user the rep points of the amount of difference

[Contract] Ranking

• compile verifier
• pass the tests
• update contract functions

[Relay] Signup to certain attester

• pass attesterId to signup
• synchronizer is independent --> how to solve it?
• will db be independent ?? --> how to solve it?

====== Some thoughts ======

• single relay handles several synchronizers
• several relay, each of them handles single synchronizer

[Frontend/Relay] User State Transition

Frontend

• update stateTransition function
• check if the data are correctly processed and displayed
• disable UST button if there's no need to do it

Relay

• receive stateTransition request which includes attesterId

[General] Put the website somewhere that everyone could reach

• Relay on Chance's machine?
• Contract should be deployed on where?
• docker configs

[Bug] sometimes not getting correct rep

• if it's approaching epoch transition time, connect a platform won't get correct rep even already request correct rep.

[Relay] Github Stars

• Seems like github stars always give user too much reputation

[Bug] Request Title Too Large

Why?

• querying ranking from the server after so many epochs, which leads to so many epks, will cause this problem happen.

Possible Solution

• hash all epks together?
• split to several requests and compare it in the frontend

[Bug] ranking api

• now cannot get anything from calling that ranking api

[Frontend] Clear data after logging out

[Frontend] Logout

• remove the user-related data in localStorage (refer to: Unirep Social)
• add button on header

[Frontend] Sign up flow

After oauth and get access_token,

• store access_token in localStorage (ref: how to store id in userContext)
• signup on contract (ref: userContext.signup)
• display error message on page if there's any error being returned (ref: semanticUI - message)
  • will the buttons of twitter and github being displayed under this condition?
• update header buttons (from join to my and logout)
• update home page buttons on banner (from join to see my badges)

[Frontend] download zkidentity actually download nothing

[Frontend] components test

[Frontend] User Page UI

• display correct reputation
• add buttons to calculate current reputation and gen proof
• add connect button

[Frontend] change profile image

• let the user be able to change profile image

[Backend] functions tests

[Frontend] Connect account

it's quite similar as signup flow on JoinPage, but something's different:

• redirectDestination should set to /user
• how to display error?
• button loading

[Relay] ranking

• synchronizer should recognize the event: submit data
• add function to accept updating user's data
• update schema

Epoch Key is too long now

• DO NOT USE parseInt...!!!!!
• is there anywhere that hex num is required?
• how to query ranking by epochkey when the epochkey is too long

NOTICE
all the epoch key stored in the db is using BigInt.toString() (instead of hex number)

[Frontend/Relay] Github(2nd attester) cannot do anything after UST.

• rt
• also check later connect with signup or not.

[Frontend] store data of different contract(attester)

should contain:

• in config.js, should contain all contracts' address
• has access_token or not (--> display connected or not connected)
• userState
  • hasSignedUp
  • reputation (provable/general)
  • ... etc.

[Frontend] recover identity

WHY we need this feature?

• prevent user from losing their identity
• more convenient to sign in through twitter/github/other web2 services

METHODS

• 2FA as password to generate semaphore id
  • after signup through twitter/github, ask user to download google verifier and scan the QRcode on screen (or enter the long secrets)
  • then ask user to input the length-6 code and generate semaphore identity through the 2FA secrets
  • really sign up user identity to contract after this
  • next time if the user wanna log in with twitter/github, still have to input the code to re-generate the identity.

[General] Pull staging version of @Unirep

• get script from Chance

[Frontend] prevent loading another attesters events

Now the userState.sync will sync all events on chain, let the synchronizer of each userState only sync related events.

[Frontend] InfoCard UI

• The data bar max/min width should map to what quantity?

[Frontend] Error Box Modification

• close button on error box on user page
• display console.error message in error box