Summary
Redesign the AI credits purchase widget so setup, buying, and connecting to Antseed are three clearly separated steps instead of one continuous flow. Renames "Buyer Key" → Signer key and "Operator Consent" → Authorize wallet to match Antseed's own terminology, and adds inline explanations for both instead of showing them as bare status labels.
Motivation
The current flow shows Buyer Key and Operator Consent as Completed checkmarks with no explanation of what either one is, no way to see them again, and no mention of Antseed until the user finds it separately. Buying credits and one-time setup are also mixed into a single "Purchase Flow," even though setup only happens once and buying happens repeatedly (first purchase, later top-ups).
What changed
-
**Four tabs *: Setup (connect wallet + one-time gate),Buy (buy or stream credits), Manage (view balance, withdraw), Connect (link Antseed).
-
added main card with explanation on the widget
-
Setup is a locked, sequential 3-step gate: Download Antseed → Signer key → Authorize wallet. Each step must be completed before the next unlocks. Manage and Connect tabs stay locked (🔒) until a wallet is connected.
-
"Buyer Key" renamed to Signer key, "Operator Consent" renamed to Authorize wallet, matching the terms Antseed itself uses.
-
Both steps now open an explanatory popup instead of just showing a checkmark:
-
Signer key: explains it's deterministic (tied to the connected wallet) and is the exact key Antseed VPR uses. Offers two real paths — Generate in this widget (recommended) or Import from Antseed — each with the actual Antseed screenshots showing where the export/import icons live and what the import screen looks like, including the backup-before-import warning.
The existing signer key modal should be modified as a two step part. In the first part user is shown two options "Generate new signer key" "Improt existing antseed signer key", the two options are a card with an explanation and a button.
Once the user chooses the modal content changes to display the actions required in case of generate, show the existing flow to generate a key and copy the key, with an explanation to first backup existing antseed and then import it with a screenshot showing the import/export flow in antseed.
In. case of imporat show the explanation and screenshot from antseed how to export and an input with paste icon for the user to paste the key
-
Authorize wallet: explains it as a can/cannot permission (can move funds inside the credit balance; cannot touch the wallet or savings) rather than a wall of text, and states plainly it's a standard, revocable approval — not a novel security mechanism.
-
Connect tab is aware Antseed was already downloaded in Setup — doesn't ask again.
-
Tagline and copy updated to mention chat, not just coding tools, since Antseed VPR is used for both.
Screens
Top card
Add the guidance card from the latest design at the top of the widget.
This card provides navigation to the onboarding/help views:
- How to use → opens the Guide view/tab with detailed AntSeed usage instructions.
- AntSeed site → opens the AntSeed website.
- FAQ → opens the existing FAQ view/tab.
The card itself only provides a short introduction and navigation. The detailed content should be shown in the corresponding Guide, Setup, or FAQ view.
Setup stepper
signer key modal steps
Connect tab
Authorize modal
Summary
Redesign the AI credits purchase widget so setup, buying, and connecting to Antseed are three clearly separated steps instead of one continuous flow. Renames "Buyer Key" → Signer key and "Operator Consent" → Authorize wallet to match Antseed's own terminology, and adds inline explanations for both instead of showing them as bare status labels.
Motivation
The current flow shows Buyer Key and Operator Consent as
Completedcheckmarks with no explanation of what either one is, no way to see them again, and no mention of Antseed until the user finds it separately. Buying credits and one-time setup are also mixed into a single "Purchase Flow," even though setup only happens once and buying happens repeatedly (first purchase, later top-ups).What changed
**Four tabs *: Setup (connect wallet + one-time gate),Buy (buy or stream credits), Manage (view balance, withdraw), Connect (link Antseed).
added main card with explanation on the widget
Setup is a locked, sequential 3-step gate: Download Antseed → Signer key → Authorize wallet. Each step must be completed before the next unlocks.
ManageandConnecttabs stay locked (🔒) until a wallet is connected."Buyer Key" renamed to Signer key, "Operator Consent" renamed to Authorize wallet, matching the terms Antseed itself uses.
Both steps now open an explanatory popup instead of just showing a checkmark:
Signer key: explains it's deterministic (tied to the connected wallet) and is the exact key Antseed VPR uses. Offers two real paths — Generate in this widget (recommended) or Import from Antseed — each with the actual Antseed screenshots showing where the export/import icons live and what the import screen looks like, including the backup-before-import warning.
The existing signer key modal should be modified as a two step part. In the first part user is shown two options "Generate new signer key" "Improt existing antseed signer key", the two options are a card with an explanation and a button.
Once the user chooses the modal content changes to display the actions required in case of generate, show the existing flow to generate a key and copy the key, with an explanation to first backup existing antseed and then import it with a screenshot showing the import/export flow in antseed.
In. case of imporat show the explanation and screenshot from antseed how to export and an input with paste icon for the user to paste the key
Authorize wallet: explains it as a can/cannot permission (can move funds inside the credit balance; cannot touch the wallet or savings) rather than a wall of text, and states plainly it's a standard, revocable approval — not a novel security mechanism.
Connect tab is aware Antseed was already downloaded in Setup — doesn't ask again.
Tagline and copy updated to mention chat, not just coding tools, since Antseed VPR is used for both.
Screens
Top card
Add the guidance card from the latest design at the top of the widget.
This card provides navigation to the onboarding/help views:
The card itself only provides a short introduction and navigation. The detailed content should be shown in the corresponding Guide, Setup, or FAQ view.
Setup stepper
signer key modal steps
Connect tab
Authorize modal