Feature: AI Credits Widget UX polish (errors, badges, Manage stats)

[blueogin]

When a payment is rejected in the wallet or reverts on-chain, the error UI is hard to read - long raw messages stack in the toast/stepper and look messy.

extra entries are easy to miss.

3. GoodID bonus badge is too dense
   Hero packs +10% deposit, +20% stream, and GoodID bonus into a tiny multi-line pill. Hard to scan on the narrow widget width.

4. Network badge shows Chain 42220 instead of “Celo”
   Weak for buyers checking they’re on the right network. “Celo” (optionally with the id) would reassure faster.

5. “no bonus” badges feel punitive
   Orange no bonus on deposit/stream reads like an error. Softer “Verify for +10%” would invite action instead of shaming.

6. Compact G$ stats hide precision
   Manage uses 6.21M / 9K with no exact value on tap/hover. Fine for glanceability, weak when users need the real amount.

Monthly stream field looks like a new stream; in update flow the label should make that clear. e.g. "Update Monthly Stream"

[L03TJ3]

To your review points
4. Celo should be sufficient

Additional points or questions

1. In progress shows already pending on first load
2. difficult to see where users attention should first go too
3. outside of the pill being small (for bonus), I think the emphasis should be more on the bonus (maybe the balance is just to oversized in comparison?)
4. On the manage page: what is the 'withdraw in US$' and should it not show the amount of G$ someone receives back?
5. I think should be more clearly explained why the address shown after
6. not sure if decided to be like this, but should the next steps not automatically load (without having to click on the button to trigger the drawer?)
7. Buy credits screen could use a '1USD = X G$'
8. what is sign consent?

Likely out of scope:

• Could use something like a landing page before showing just a buy flow
• What can we do for the 'next-steps' after buying to make it easier. are there setup scripts we can create (for claude/codex)? can we produce a demo-video maybe?

@blueogin

[blueogin]

Thanks @L03TJ3 — notes below.

4. Celo should be sufficient
   Agreed / done — network badge shows Celo.

In progress on first load
Fixed — current step shows Ready (no spinner) until a tx is actually in flight; then In progress.

Attention / next step drawer
Hybrid: drawer stays closed on cold load (CTA / step tap to open). When the flow advances to the next step, that step’s drawer opens automatically so “what’s next” is clearer without always covering the screen.

Bonus emphasis vs balance size
Keeping balance as the primary hero signal on purpose. Hero only shows GoodID verified; deposit/stream rates stay on the amount fields. We’re not upsizing the bonus pill or shrinking balance for now.

Withdraw in US$ / G$ back
Intentional — withdraw is unused principal as US$ on Base to the payer wallet, not G$ on Celo. Covered in Buy FAQ → What funds can I withdraw?

Addresses (payer / buyer)
Also covered in FAQ (buyer key + operator consent). Manage shows the addresses; FAQ explains the roles. Happy to add inline tooltips later if still unclear.

US$1 ≈ X G$
Added on the Buy Credits drawer header (approx. rate from current G$ price).

What is Sign Consent?
FAQ → Why do I authorize the GoodDollar operator?