[GoodBounty] Finalize GoodReserve widget PR

[L03TJ3]

Summary

Pick up the existing GoodReserve widget PR, run it locally, fix implementation gaps,
align the implementation with the approved design references, update tests/evidence,
and prepare it for human review.

Source references:

• Parent issue: [Plan]: Build GoodReserve Widget — Reserve swap UI backed by GoodReserve SDK #15
• Existing PR: Add @goodwidget/goodreserve-widget with reserve swap runtime contract, quote/tx state machine, and Storybook/demo coverage #39
• Stitch prototype:
  https://stitch.withgoogle.com/preview/1645756043403511215?node-id=1d5c2d1b8fcc445f9a060ce226a5d495
• Figma:
  https://www.figma.com/design/xsk5EiF6CvStA9mtdbA9OR/GoodWidget-Library?node-id=2311-2&t=3MMOUiTScwCmxTQp-1

Contributor task

• Claim the bounty with an ETA.
• Check out PR Add @goodwidget/goodreserve-widget with reserve swap runtime contract, quote/tx state machine, and Storybook/demo coverage #39 and run Storybook plus the targeted widget tests locally.
• Compare the implementation against issue [Plan]: Build GoodReserve Widget — Reserve swap UI backed by GoodReserve SDK #15, PR Add @goodwidget/goodreserve-widget with reserve swap runtime contract, quote/tx state machine, and Storybook/demo coverage #39, the Stitch prototype, the Figma design, and the GoodWidget repo docs.
• Fix concrete gaps in reserve swap behavior, SDK wiring, UI structure, spacing, visual hierarchy, tests, or evidence.
• Keep reserve-specific logic inside packages/goodreserve-widget unless reuse is clearly needed.
• Leave a handoff comment with fixes, verification, evidence, and remaining risks.

GoodReserve checks

• packages/goodreserve-widget remains the main implementation surface for the reserve widget.
• The widget still uses the provider-first GoodWidget runtime path and does not add a new wallet abstraction.
• Disconnected and unsupported-chain states are clear and actionable.
• Supported-chain behavior is correct for Celo (42220) and XDC (50).
• Buy and sell directions both work and update token labels, balances, and quote presentation correctly.
• Amount editing, quote debounce/loading, quote success, and quote failure states are coherent and do not regress.
• Insufficient balance, reserve warning, and reserve-specific error states are surfaced with user-readable messaging.
• Slippage selection, confirm dialog, pending, success, and error transaction states all behave correctly.
• widgetRuntimeContract.ts and integration.ts still accurately describe the widget states, events, and dependencies.
• Main swap view, confirmation flow, CTA states, warning/error presentation, and success feedback align with the Stitch and Figma references from issue [Plan]: Build GoodReserve Widget — Reserve swap UI backed by GoodReserve SDK #15.
• UI stays aligned with the GoodWalletV2 swap reference and the GoodWidget design-system constraints.
• Visual polish issues are addressed, including layout, spacing, hierarchy, and component treatment where PR Add @goodwidget/goodreserve-widget with reserve swap runtime contract, quote/tx state machine, and Storybook/demo coverage #39 does not yet match the provided references (stitch and figma).
• Mobile and desktop layouts are usable.

Storybook and test checks

• Stories cover no-provider, unsupported-chain, buy/sell, amount editing, quote loading, quote-ready buy, quote-ready sell, quote error, insufficient balance, slippage selection, confirm dialog, swap pending, swap success, and swap error.
• Reserve-specific fixtures remain deterministic and CI-safe without requiring live RPC behavior.
• Playwright coverage verifies the main reserve stories and key CTA/state transitions for the widget.
• Updated screenshots reflect the latest UI after alignment to the Stitch/Figma references.
• Any updated screenshots or UI evidence are reflected in the PR description or contributor handoff comment.

Required commands

pnpm install
pnpm build
pnpm lint
pnpm test:storybook
pnpm test:demo tests/widgets/goodreserve-widget

If a command cannot be run, document why and treat the underlying blocker explicitly.

Acceptance criteria

• The PR satisfies issue [Plan]: Build GoodReserve Widget — Reserve swap UI backed by GoodReserve SDK #15 without expanding scope beyond the GoodReserve widget.

• The widget package remains implemented under packages/goodreserve-widget.

• The visible widget UI is aligned with the Stitch and Figma references linked from issue [Plan]: Build GoodReserve Widget — Reserve swap UI backed by GoodReserve SDK #15.
  There is an interactive demo on stitch:
  https://stitch.withgoogle.com/preview/1645756043403511215?node-id=1d5c2d1b8fcc445f9a060ce226a5d495
  And for exact colors, structure, spacing check the figma
  https://www.figma.com/design/xsk5EiF6CvStA9mtdbA9OR/GoodWidget-Library?node-id=2311-2&t=3MMOUiTScwCmxTQp-1

• Required reserve widget states are visible in Storybook.

• Targeted Playwright coverage for tests/widgets/goodreserve-widget is current.

• The PR description links issue [Plan]: Build GoodReserve Widget — Reserve swap UI backed by GoodReserve SDK #15 and includes current test evidence.

• Leave a handoff comment with fixes, verification, evidence, and remaining risks. Use the hand-off template

[leonardoestebanmendoza-glitch]

Hi! I can take a focused pass at this bounty: check out PR #39, run the local Storybook/tests, remove concrete blockers, update evidence/screenshots, and leave a clean handoff.

Before I claim with an ETA, can you confirm the payout amount/currency and payout path for this GoodBounties - Mythic issue, and that a normal external GitHub contributor can claim it via PR without maintainer/admin permissions or a separate community-channel assignment?

[edehvictor]

Claim: Contributor Role

Contributor: @edehvictor
ETA: 12-24 hours from now

Plan

• Check out the branch locally and set up the environment.
• Audit the implementation against the feature spec and execution plan.
• Fix gaps in:
  • GoodReserve buy/sell SDK wiring, Celo/XDC chain handling, quote debounce/loading, balance validation, slippage, and confirm/pending/success/error transaction states
  • GoodWalletV2/Stitch/Figma alignment for the main swap view, confirmation flow, CTA states, warning/error presentation, spacing, hierarchy, and mobile/desktop layout
  • Storybook and Playwright evidence for required GoodReserve states, deterministic fixtures, current screenshots, and tests/widgets/goodreserve-widget coverage
• Run pnpm install, pnpm build, pnpm lint, and required test commands.
• Post the official handoff comment and prepare the branch for human review.

Initial Assessment

I have reviewed the current state of issue #44, parent issue #15, and draft PR #39. The core structure is present, but there are clear implementation gaps I will fix regarding production readiness of the GoodReserve quote/transaction flow, SDK/runtime behavior across Celo and XDC, and UI/test evidence alignment with the Stitch/Figma and GoodWalletV2 references.

Please do assign me @L03TJ3

[swright7001]

I picked this up from PR #39 and pushed a focused follow-up branch here:

https://github.com/swright7001/GoodWidget/tree/goodreserve-bounty-44-fixes

Commit: swright7001@87ab46a

What I changed:

• Fixed GoodReserve sell-direction balance handling so G$ and stable token balances swap with the selected direction instead of staying in buy-mode order.
• Made the GoodReserve network label dynamic for CELO, XDC, and unsupported-chain states.
• Tightened swap success/error callback dependencies so host callbacks are tied to the actual lifecycle fields.
• Cleared small repo-level verification blockers that were preventing the requested command set from passing cleanly.

Verification run locally with pnpm 9.15.0 via corepack:

• pnpm build
• pnpm lint
• pnpm test:storybook
• pnpm test:demo tests/widgets/goodreserve-widget
• pnpm --filter @goodwidget/goodreserve-widget lint
• pnpm --filter @goodwidget/goodreserve-widget build

All passed. pnpm lint still reports existing warnings in unrelated packages, but exits successfully.

I have not opened a PR yet because PR #39 already exists and this may be easier for a maintainer to either cherry-pick, compare, or ask me to open as a separate PR depending on preferred workflow.

[HushLuxe]

I would like to get assigned to this

[Ryjen1]

I'm the contributor who built @goodsdks/good-reserve (GoodSDKs #34, PR #35) — the Reserve SDK that this widget consumes. I'm already familiar with the reserve contract interactions, quote/swap flow, Celo/XDC chain support, and the viem patterns used across GoodSDKs.

I've reviewed PR #39, the Stitch prototype, and the Figma references. Since I wrote the underlying SDK, I can move faster on wiring gaps and debug SDK-level issues directly rather than treating them as black boxes.

Plan:

• Day 1: Check out PR Add @goodwidget/goodreserve-widget with reserve swap runtime contract, quote/tx state machine, and Storybook/demo coverage #39, run Storybook + tests locally, audit against Stitch/Figma
• Day 2–3: Fix UI alignment, missing states, and SDK wiring gaps in packages/goodreserve-widget
• Day 4: Update tests, screenshots, and handoff with evidence

Happy to start immediately

[L03TJ3]

@Ryjen1 Hey, thanks for reaching out. since you indeed worked on the SDK yourself it makes sense to be working on the UI for it.
you are assigned now

[L03TJ3]

@Ryjen1 small note. In the stitch preview and design references there is a 'slide to confirm' button for the transaction confirmation.
This can be a simple button to press, it does not have to be the slide to confirm

[Ryjen1]

Understood, thanks @L03TJ3 ....I'll implement it as a simple pressable button

Thanks for the assignment, I'll get started right away