[GoodBounty] Finalize Connect-a-wallet Widget PR #122

Summary

Pick up the existing AI-generated PR for the Connect-a-wallet widget
(packages/connect-a-wallet-widget), run it locally, close the gaps below,
update tests/evidence, and prepare it for human review.

PR: #116
Commit: 93ca2ff
Parent issue: #113 · Plan: #114

Contributor task

This task require to start on the feature-branch produced by the agent and branch out from it.
the resulting pull-request should be against the feature-branch plan/connect-a-wallet-widget
not against main

• Claim the bounty with an ETA.
• Check out branch plan/connect-a-wallet-widget and run it locally.
• Compare the implementation against [Feature]: Add Connect-a-wallet widget #113 (required states), [PLAN] Add Connect-a-wallet widget to GoodWidget #114 (plan), and the design
  reference attached to [Feature]: Add Connect-a-wallet widget #113.
• Fix the concrete gaps below.
• Update screenshots when UI changes.
• Leave a handoff comment with what changed, what was tested, and remaining risks.

Scope checks

• Visual alignment: the widget is close to the design reference (chain avatars,
  colored Connect/Disconnect, info callout, footer, "Connect identity" tab are all present)
  but still needs a side-by-side pass against design-reference.png on [Feature]: Add Connect-a-wallet widget #113 for spacing,
  proportions, and copy — don't consider this done from the current screenshot alone.
• Container overflow — real bug, not a test artifact: ChainLinkRow's row
  (avatar + chain badge + address + status badge + action button) has no flexWrap or
  width guards on a flexDirection:'row', justifyContent:'space-between' container with
  4+ children. This is what's pushing content past the widget's container at the fixed
  400px width used in Storybook — confirmed by diffing the Storybook harness
  (connectAWalletWidgetStories.tsx) against streaming-widget's, which is
  byte-for-byte identical. So this isn't a harness/Playwright bug — fix the row layout
  itself (wrap, truncate, or restructure the row) rather than the test fixture.
• Input/button sizing: buttons and input fields are overly large and don't align
  height-wise with each other or their copy. Input and TransactionButton use shared
  packages/ui defaults (not overridden with custom size props in this widget), so the
  root cause may be in the shared default components rather than this widget — but
  confirming that requires checking rendering across other widgets that reuse the same
  components, which is out of scope to redo here. Prefer a localized fix if one exists
  scoped to this widget (e.g. adjust button font-size, or align input height to the
  button's via a local style override) over touching shared packages/ui components,
  which would need cross-widget verification. Only touch the shared components if no
  localized fix is possible, and flag that decision in the handoff comment.
  components/shared.tsx's local ActionButton wrapper also sets its own default
  minWidth (108, overridden to 128 in the address form) — simplify or drop unless
  there's a real reason for it.
• Font — not this widget's bug, don't chase it here: no fontFamily override
  exists anywhere in connect-a-wallet-widget/src. The repo's only font preset
  (packages/ui/src/presets.ts) is Avenir Next, Inter, system-ui, ... sans-serif — no
  monospace token exists anywhere in the repo. The monospace look in screenshots is a
  pre-existing font-loading/fallback issue in the Storybook/demo environment, unrelated to
  this package. Flag separately if it needs fixing; not in scope for this bounty.
• Transaction-failure state — confirm against spec: [Feature]: Add Connect-a-wallet widget #113/[PLAN] Add Connect-a-wallet widget to GoodWidget #114 specify
  "Connect/disconnect transaction failure → red error block." As implemented,
  connectChain/disconnectChain in adapter.ts route failures to a Toast only; the
  red Alert block only fires for the primary/secondary address-check failure. Confirm
  with the Bounty Lead whether Toast-only is the intended reading of [Feature]: Add Connect-a-wallet widget #113/[PLAN] Add Connect-a-wallet widget to GoodWidget #114, or fix to
  match the documented red-block behavior.
• Test/screenshot fidelity vs. manual browser load: the committed Playwright
  screenshots don't match how the widget actually renders when loaded manually in a
  browser. Compare tests/widgets/connect-a-wallet-widget/states.spec.ts and its fixture
  setup against another widget's test whose screenshots do match manual rendering
  (e.g. streaming-widget or citizen-claim-widget) to find what's different — viewport
  size, wait conditions, font/asset loading before capture, etc. — rather than assuming
  the widget code itself is at fault.
• Manual testing of error states: don't rely on the Playwright fixtures alone.
  Manually exercise the error paths in a real browser — including cancelling a
  connect/disconnect transaction request from the wallet prompt — and confirm the actual
  on-screen behavior matches what [Feature]: Add Connect-a-wallet widget #113/[PLAN] Add Connect-a-wallet widget to GoodWidget #114 specify (see the transaction-failure check
  above), not just that a test assertion passes.
• The implementation follows the plan ([PLAN] Add Connect-a-wallet widget to GoodWidget #114) or explains any deviation.
• Existing repo patterns and package boundaries are respected (this part is solid —
  component decomposition already matches streaming-widget's precedent and is cleaner
  than citizen-claim-widget's monolithic file).
• Main happy path and important edge/error states work end to end, manually, not just
  via the Playwright fixtures.
• Desktop and mobile layouts are usable (check the overflow bug above at mobile widths
  too, not just the 400px Storybook shell).
• The PR description links the source issues and includes test evidence (already true —
  just keep evidence current after fixes).

Required commands

pnpm install
pnpm build --filter=@goodwidget/connect-a-wallet-widget...
pnpm --filter @goodwidget/connect-a-wallet-widget lint
pnpm test:demo tests/widgets/connect-a-wallet-widget

If a command cannot be run, document why.

Handoff comment

Contributor: @<handle>
PR: #116
Commit: <commit>

Fixed:

- <fix>

Verified:

- <scenario>: <result>

Evidence:

- <confirm which scenarios/UX flows are testable via the Playwright tests; the reviewer runs them>

Remaining risks:

- <None / details>