[GoodBounty] Finalize Connect-a-wallet Widget PR

[goodbounties-nanoclaw-agent]

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>

[Godbrand0]

I’d like to claim this bounty and finish the existing AI-generated PR.
How I’ll work on it

Check out plan/connect-a-wallet-widget, install deps, and run the widget locally with the required commands.
Do a side-by-side pass against the design reference, #113 required states, and #114 plan.
Fix the concrete gaps in priority order:
Container overflow in ChainLinkRow (layout/wrap/truncate)
Input/button sizing with a localized override if possible
Confirm transaction-failure behavior (Toast vs red Alert) with the Bounty Lead
Align Playwright screenshots with real browser rendering

Manually test happy path + error states (including wallet cancel) on desktop and mobile.
Update screenshots and leave a clear handoff comment covering fixes, verification, evidence, and any remaining risks.

ETA: 2–3 days after assignment.
I’ll keep the PR against the feature branch and respect existing package patterns.

[Ryjen1]

Hi @L03TJ3

I would like to work on this issue. I have read the implementation plan and understand what needs to be done. ETA: 48 hours.

I'll check out the current PR, run Storybook, tests locally, complete any remaining gaps, and prepare the widget for review

Happy to start once assigned!

[sammajayi]

Hi Maintainer, I am a Frontend and Smart Contract developer who is familiar with building on Gooddollar using its SDK.

Kindly assign me this issue, so that i can get started ASAP and hand it off in less than 24 hours.

[Abidoyesimze]

Hi I'd like to take on this issue.
I'm a full stack blockchain developer and I understand the issue very well

I'd like to take on this kindly assign me

ETA:24hrs

[L03TJ3]

Hey @sammajayi, you will be assigned

Since this is your first contribution with us and our bounties program please read up on the bounty program and contribution guidelines

Also make sure to read up on our widget author instructions when working on widgets and utilizing the design system api