[Feature] AI Credits: Update Setup onboarding, signer key flow, and AntSeed guidance

[blueogin]

Feature summary

Update the AI Credits widget onboarding flow based on the provided wireframes/mock designs.

The main changes are only around the onboarding process:

• Wallet connection
• Download AntSeed
• Signer Key
• Authorize Wallet
• AntSeed guidance

Most of what we already have should stay as-is.

Add a new Setup tab for the onboarding flow.

Keep the existing Buy tab and its current Deposit/Stream functionality unchanged. Do not move the Buy flow into Setup or Manage.

---

Current Buy Credits tab

This is the current Buy Credits tab in the AI Credits widget:

We should add a tab named "Setup" for onboarding

---

Design reference

This is the mock design/wireframe for the updated experience:

The screenshots are primarily references for the onboarding flow, content, and layout.

The implementation does not need to match the screenshots exactly in terms of colors/components. Prefer existing GoodWidget UI primitives and the current design system.

---

1. Wallet connection

Remove the current separate Connect Wallet screen.

The Connect Wallet button should instead be available directly from the main widget, following the provided design.

Users should be able to see the main widget before connecting their wallet.

---

2. Add Setup tab

Add a new Setup tab for the AntSeed onboarding flow.

Keep the existing Buy tab and its current functionality as-is. Do not move the Buy flow into Setup or Manage.

The new Setup tab should contain three steppers:

1. Download AntSeed
2. Signer Key
3. Authorize Wallet

After completing the Setup flow, users can go to the existing Buy tab to deposit or stream and purchase AI Credits.

The existing Buy, Manage, and History flows should remain unchanged unless explicitly required by the onboarding changes.

---

3. Setup guidance

Add the guidance card at the top of the widget, above the tab navigation.

This section should provide entry points for:

• How to use — opens the AntSeed usage guide inside the widget.
• FAQ — opens the FAQ inside the widget.
• AntSeed Site — opens the AntSeed website in a new browser tab.

How to use

When the user clicks How to use, show the AntSeed usage guide
Design references:

The guide should help users understand how they can use AntSeed and their purchased AI Credits.

FAQ

When the user clicks FAQ, show the FAQ content.

Design reference:

AntSeed Site

When the user clicks AntSeed Site, open the AntSeed website in a new browser tab.

Guide and FAQ behavior

Guide and FAQ are not additional navigation tabs.

They are alternate content views rendered inside the Setup tab's content area.

4. Download AntSeed

Add Download AntSeed as the first step in Setup.

Design reference:

The step should provide a link for downloading AntSeed VPR/Desktop.

The resulting Setup flow is:

Download AntSeed
      ↓
Signer Key
      ↓
Authorize Wallet

---

5. Signer Key

Rename the existing Buyer Key step to:

Signer Key

When the user opens this step, instead of immediately generating a key, provide two options:

1. Generate Signer Key — recommended
2. Import Signer Key

Design references:

Generate Signer Key

Use the existing signer-key generation process.

The signer key should continue to be generated from the connected wallet using the existing implementation.

After generation:

• Show the generated signer key(private and public key).
• Allow the user to copy it.
• Show instructions for importing it into AntSeed VPR.
• Tell the user to back up their existing AntSeed signer key before importing the newly generated key.

Generate Signer Key should be presented as the recommended option.

Import Signer Key

Allow the user to paste/import an existing AntSeed signer private key.

The instructions should show how to export the signer key from AntSeed VPR and import it into the widget.

After importing the signer key, check its operator state.

There are three possible cases:

1. No operator configured
2. GoodDollar operator already configured
3. Another operator configured

If the imported signer already has an operator and that state prevents the required GoodDollar authorization, the user cannot proceed with that signer.

Return the user to the Generate Signer Key / Import Signer Key selection and allow them to choose another option.

---

6. Authorize Wallet

Rename the existing step:

Operator Consent → Authorize Wallet

Keep the existing underlying operator-consent mechanics unless a functional change is explicitly required.

The instructions should explain:

• Why GoodDollar needs the wallet authorization.
• What permission is being granted.
• What the controlling wallet can do.
• What the implications are.
• That the authorization can be revoked in the future.

Reuse the existing verified copy where possible and double-check new permission/security-related copy for technical accuracy.

---

Terminology changes

Update the following user-facing terminology:

• Buyer Key → Signer Key
• Generate Buyer Key → Generate Signer Key
• Import Buyer Key → Import Signer Key
• Operator Consent → Authorize Wallet

Do not globally replace protocol-level terms such as buyer or operator. These changes apply to user-facing copy where the terms refer specifically to the signing key or authorization step.

---

Design guidance

The provided screenshots/wireframes should primarily be used as references for the onboarding flow and layout, rather than as pixel-perfect final designs.

Prefer to reuse:

• Existing GoodWidget components
• Existing UI primitives
• Existing colors and styling
• Existing drawer patterns
• Existing stepper patterns

Avoid unnecessarily redesigning existing parts of the AI Credits widget.

---

Mock design

The attached HTML file contains the full interactive mock design for the updated AI Credits onboarding flow.

gooddollar_widget_redesigned (9).html

Use the mock to understand the overall flow and interactions. The screenshots below highlight the specific states and changes required for implementation.

The mock is a design reference and does not need to be matched pixel-for-pixel. Existing GoodWidget components, UI primitives, and styling should be reused where possible.

Acceptance criteria

• Separate Connect Wallet screen is removed.
• Connect Wallet is available directly from the main widget.
• Buy Credits tab is renamed to Setup.
• Setup contains four steppers: Download AntSeed → Signer Key → Authorize Wallet → Buy Credits.
• Setup contains the new guidance section.
• How to use opens the AntSeed usage guide.
• FAQ displays the existing FAQ content.
• Download AntSeed links users to AntSeed VPR/Desktop.
• Buyer Key is renamed to Signer Key in relevant user-facing copy.
• Signer Key provides Generate and Import options.
• Generate Signer Key is the recommended option.
• Generate uses the existing signer-generation implementation.
• Generate flow tells users to back up their existing AntSeed signer key before importing the new one.
• Import allows an existing AntSeed signer private key to be entered.
• Import flow checks the signer's existing operator state.
• An incompatible existing operator prevents the imported signer from proceeding.
• Operator Consent is renamed to Authorize Wallet.
• Existing Buy Credits Deposit/Stream flow remains the final Setup step.
• Existing Manage, History, transaction, success, and error functionality remains unchanged unless required by the onboarding changes.
• Existing GoodWidget design system/UI primitives are reused wherever possible.