Skip to content

[Feature] AI Credits widget: buyer key setup — generate vs import choice #160

Description

@goodbounties-nanoclaw-agent

Feature summary

Replace the current single "Sign & Generate Key" buyer-key step with a first-time-user choice between two paths — Generate a new key or Import an existing key — each with a short explanation and its own step-by-step instructions.

Problem or opportunity

BuyerKeyPanel (packages/ai-credits-widget/src/components/buy/BuyerKeyPanel.tsx) currently only supports deriving a new deterministic buyer key from a wallet signature — there's no way for a user who already has an AntSeed signer key to bring it into the widget. This forces AntSeed-experienced users into an unwanted duplicate identity, and gives no guidance on what to do with a freshly generated key afterward (import into AntSeed) or where to find/export an existing one.

Proposed solution

  1. First-time user (no buyerPubKey yet) sees two options instead of the single "Sign & Generate Key" button:
    • Generate a new key — "The widget creates a new buyer identity based on the user's connected wallet. The user can then import the generated signer key into AntSeed."
    • Import an existing key — "The user exports their existing signer key from AntSeed and imports it into the widget, so they can use their existing AntSeed buyer identity."
  2. After the user picks an option, show step-by-step instructions for that path (screenshot of AntSeed highlighting the import/export location — left as a placeholder for now; better screenshots to follow before ship).
  3. apps/ai-credits-web composes the same ai-credits-widget package, so the standalone app inherits this flow automatically — no separate implementation needed there.

Required states, flows, and behaviors

  • First-time user, no buyerPubKey → choice screen (Generate new key / Import existing key), not today's single-button panel.
  • Generate new key chosen → existing wallet-signature-derived key flow (current onGenerate behavior in BuyerKeyPanel), reached via this option, followed by step-by-step "import into AntSeed" instructions (screenshot placeholder).
  • Import existing key chosen → the user pastes an existing private key into a field, preceded by step-by-step "export from AntSeed" instructions (screenshot placeholder).
  • Returning user (buyerPubKey already set) → unaffected, same as today.
  • apps/ai-credits-web renders the same choice/flow as any other ai-credits-widget host — no standalone-only branching.

Acceptance criteria

  • First-time buyer-key step shows the two options with the copy above, instead of the current single "Sign & Generate Key" button.
  • Generate new key preserves existing wallet-signature-derived key generation, then shows step-by-step "import into AntSeed" instructions (screenshot placeholder).
  • Import existing key lets the user paste an existing private key into a field, preceded by step-by-step "export from AntSeed" instructions (screenshot placeholder).
  • Returning users with an existing buyerPubKey see no change in behavior.
  • apps/ai-credits-web shows the same flow with no separate implementation.
  • No regression to the operator-consent/pay steps that follow buyer-key setup.

Additional context

Requested by Michael An (internal work, not a bounty) in #goodbounties-lead, 2026-08-12. Separate from #155. Relevant files: packages/ai-credits-widget/src/components/buy/BuyerKeyPanel.tsx, packages/ai-credits-widget/src/components/flow/purchaseFlowUtils.ts (buyer_key step routing), apps/ai-credits-web (consumes the same widget). Screenshot/design reference intentionally left blank pending better AntSeed captures.

Create the plan

Based on the above description create an execution plan in a new sub-issue and preserve the original issue content unchanged.
Do not execute the plan until given instructions to do so.

Sub-issue requirements:

  • Title format: [DRAFT][PLAN] <what issue is being planned>
  • Type: Task
  • Description must start with: <sub-issue title>
  • Link the sub-issue back to this parent issue.

Instructions when creating the plan:

  • Map relevant files that are too be used as reference from all repos mentioned
  • import existing @GoodDollar packages
  • Map new components that should be created. Assess when a new component should be created in the new savings widget package or made part of the reusable packages/ui

Plan specification required sections:

  • Required states, flows, and behaviors
  • Execution plan
  • acceptance criteria
  • human-reviewer checklist

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

Status
Prepare AI Task

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions