[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 current implemented claim screen is shown
• wallet is connected: the newly designed claim screen will show and display all available pools to claim from

What should happen when a user clicks on the blue claim now button (Implementation of the Web3Action button):

1. checks if a user is connected, if not requests to connect
2. checks if a user wallet is on the right chain, if not request to switch
3. if connected and on the right chain we verify if a user has already done the upgrade flow 3a. if yes --> continue to new claim screen Depending on the final design it either automatically triggers the claim (like it does now) or it shows the new claim screen with separate claim buttons per available pool

3b. if no --> navigate to the good-id page.

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 navigates manually to the good-id page and it has done the upgrade flow
• When a user is navigated to the good-id page based on claim-button action.

What should happen for the pre-upgrade 'upgrade' button and claim-button action navigation?

• it should show the onboard screen. this screen can be implemented as is. all it needs is the address of the connected account.

Technical Implementation

• [ ] Update current claim screen and implement the new claim button
• [ ] Add the new screen state of the claim page for a connected wallet
• [ ] update the good-id page pre/post upgrade (see dependency tickets)
• [ ] add the onboard screen to the good-id page
• [ ] add a param for the good-id page to be used to show the onboard screen.
• [ ] the param should be used when using the upgrade button on the pre-upgrade screen
• [ ] the param should be used when navigating from the claim page to the good-id page

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)