[GoodId-dapp]: onboarding flow implementation

[L03TJ3]

Business Description

We want to implement a new onboard flow

Detailed Description of Functionality

Claim page

the claim page has two different states:

• wallet is not connected: the blue claim button shows and by clicking on it a onConnect callback should handle the wallet-connection
• wallet is connected:

1. it checks if someone is whitelisted
2. if not whitelisted, onUpgrade callback should handle navigation a user to the /goodid page (for onboard flow)
3. if whitelisted, the claim-flow will be shown
   a. newsfeed provider is already added

GoodId page (Tab for this page is only shown for already whitelisted wallets, that will not change)

The goodid page can have various states.

• When a user navigates manually to good-id page and it has not done the upgrade flow yet
• When a user is navigated to the good-id page based on claim-button action.

Technical Implementation

• replace current claim screen and implement the new claim flow
  • (reference: https://github.com/GoodDollar/GoodDAPP/blob/7210a3c5edb185aaedb25d5f4b9ffa358d65eb81/src/components/goodid/Claim.jsx#L83)
• update the good-id page pre/post upgrade (see dependency tickets)
• add the onboard screen to the good-id page
• goodid page should either show onboard-screen (no certificates or not whitelisted) or goodid page (certificates exist)

Design Reference:

(Mobile)

Acceptance Criteria

Specify criteria that will be used to determine if the feature meets the requirements and functions correctly.

• (Should include a list of testing points for QA how to verify design/functionality)