Fix: AI Credits widget UX polish (errors, badges, Manage, buy flow)

[blueogin]

Description

• Polishes AI Credits Buy/Manage UX for issue Feature: AI Credits Widget UX polish (errors, badges, Manage stats) #79: clearer payment errors, network/badge copy, credit history discoverability, stepper Ready vs In progress, hybrid drawer open on step advance, and Buy rate hint.
• Keeps G$ balance as the hero signal; GoodID shows as a verified status badge (rates remain on amount fields).

Closes #79

How Has This Been Tested?

Please describe the tests that you ran to verify your changes.

Checklist:

• PR title matches follow: (Feature|Bug|Chore) Task Name
• My code follows the style guidelines of this project
• I have followed all the instructions described in the initial task (check Definitions of Done)
• I have performed a self-review of my own code
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• I have added reference to a related issue in the repository
• I have added a detailed description of the changes proposed in the pull request. I am as descriptive as possible, assisting reviewers as much as possible.
• I have added screenshots related to my pull request (for frontend tasks)
• I have pasted a gif showing the feature.
• @mentions of the person or team responsible for reviewing proposed changes

[Copilot]

Pull request overview

This PR polishes the AI Credits widget buy/manage experience (issue #79) by simplifying badges/copy, improving payment failure messaging, adjusting the purchase stepper behavior, and making credit history/stats easier to scan and discover.

Changes:

• Refines user-facing copy and UX cues (GoodID verified badge, network display name, “Ready” vs “In progress”, payment failure messaging).
• Improves buy/manage usability (rate hint on Buy, clearer “Update Monthly Stream” label, expandable credit history + exact-value tooltip for large G$ stats).
• Adds error-mapping to sanitize noisy on-chain/wallet errors and updates Storybook + Playwright state coverage accordingly.

Reviewed changes

Copilot reviewed 18 out of 30 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
tests/widgets/ai-credits-widget/states.spec.ts	Updates Playwright assertions/screenshots for GoodID badge + payment_failed UX expectations.
packages/ui/src/index.ts	Re-exports getChainDisplayName from ChainBadge.
packages/ui/src/components/WidgetTabs.tsx	Uses getChainDisplayName(chainId) instead of “Chain {id}”.
packages/ui/src/components/stepperStyles.ts	Adds new ready status style and includes it in focused statuses.
packages/ui/src/components/Stepper.tsx	Makes ready steps pressable (when onStepPress is provided).
packages/ui/src/components-test/ChainBadge.tsx	Adds chain name map entries + exposes getChainDisplayName.
packages/ai-credits-widget/src/quoteMath.ts	Adds formatUsd1ToG for the “US$1 ≈ … G$” hint.
packages/ai-credits-widget/src/paymentErrors.ts	New payment error mapper to sanitize wallet/on-chain errors into short user copy.
packages/ai-credits-widget/src/components/theme/cards.ts	Tweaks notice card background to $backgroundHover.
packages/ai-credits-widget/src/components/manage/UsageLog.tsx	Makes credit history show a short list with a “show more/less” toggle.
packages/ai-credits-widget/src/components/manage/CreditsManagementCard.tsx	Adds hover/focus/tap tooltip to reveal exact values for compacted large G$ stats.
packages/ai-credits-widget/src/components/flow/AiCreditsPurchaseFlow.tsx	Auto-opens the drawer when advancing steps (keeps closed on initial mount).
packages/ai-credits-widget/src/components/flow/AiCreditsFlowStepper.tsx	Uses ready for the current step (and active only during payment pending/confirmed).
packages/ai-credits-widget/src/components/buy/AmountPicker.tsx	Softer “Verify for +%” bonus labels, adds US$1 rate hint, and clarifies stream-update label.
packages/ai-credits-widget/src/components/buy/AiCreditsHero.tsx	Replaces dense multi-line bonus pill with a simple “GoodID verified” badge.
packages/ai-credits-widget/src/AiCreditsWidget.tsx	Removes “Try Again” button from payment_failed notice; adjusts toast fallback/duration and hero props.
packages/ai-credits-widget/src/adapter.ts	Uses mapPaymentError for payment/validation failures and rethrows sanitized errors.
examples/storybook/src/stories/helpers/aiCreditsWidgetStories.tsx	Updates payment_failed story error copy to match new UX.

[sirpy]

can you make sure to add images showing the new fixes

[blueogin]

@sirpy
I have updated the screenshots with Playwright

The comments are already addressed/answered