Feature Connect A Wallet Widget by goodbounties-nanoclaw-agent[bot] · Pull Request #116 · GoodDollar/GoodWidget

goodbounties-nanoclaw-agent · 2026-07-24T12:52:36Z

Description

Adds the Connect-a-wallet widget: lets a user link a secondary address to their connected host wallet across Fuse, Celo, and XDC via @goodsdks/citizen-sdk's IdentitySDK (connectAccount/disconnectAccount/checkConnectedStatus). Follows the streaming-widget decomposition standard (thin ConnectAWalletWidget.tsx entry + components/ tree), uses packages/ui's Dialog for the blocking security-confirmation prompt before each link/unlink transaction, and Toast for transaction success/failure. Per-chain rows always show a Connect or Disconnect action (never hidden), with a loading indicator while a row's status is in flight.

About #113, #114

How Has This Been Tested?

pnpm turbo run build --filter=@goodwidget/connect-a-wallet-widget... and pnpm --filter @goodwidget/connect-a-wallet-widget lint both pass clean.
Storybook QA fixture stories (QA/ConnectAWalletWidget/Runtime Fixtures) cover: not-connected, connecting, connected-no-input, checking-address, ready-with-mixed-row-statuses, unsupported-network, top-level-error-with-retry.
Playwright tests/widgets/connect-a-wallet-widget/states.spec.ts — 7/7 passing, with screenshots committed under tests/widgets/connect-a-wallet-widget/test-results/.

Checklist:

…ht specs Implements the ConnectAWalletWidget for linking a secondary wallet address to the connected host wallet's GoodID across Fuse, Celo, and XDC via @goodsdks/citizen-sdk's IdentitySDK. Adds QA runtime-fixture stories, a manual showcase story, MDX docs, and a Playwright states spec covering the disconnected, connecting, address-entry, checking, mixed per-chain row statuses, unsupported-network, and top-level error/retry states. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

…idget Every widget in this repo renders its own GoodDollar/chain-badge header inside its own view (see StreamingWidgetView) rather than relying on the shared MiniAppShell for it — this widget was missing that, and the "Primary verified identity" card showing which host address is linking from, per the #113 design reference. Regenerated Playwright screenshots to reflect both changes.

…ht specs Implements the ConnectAWalletWidget for linking a secondary wallet address to the connected host wallet's GoodID across Fuse, Celo, and XDC via @goodsdks/citizen-sdk's IdentitySDK. Adds QA runtime-fixture stories, a manual showcase story, MDX docs, and a Playwright states spec covering the disconnected, connecting, address-entry, checking, mixed per-chain row statuses, unsupported-network, and top-level error/retry states. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

…idget Every widget in this repo renders its own GoodDollar/chain-badge header inside its own view (see StreamingWidgetView) rather than relying on the shared MiniAppShell for it — this widget was missing that, and the "Primary verified identity" card showing which host address is linking from, per the #113 design reference. Regenerated Playwright screenshots to reflect both changes.

* fix: UI polish and lint fixes for connect-a-wallet-widget - Fix missing Alert import crash on error/unsupported states - Remove unused address prop from ChainLinkRow (lint fix) - Restructure PrimaryIdentityCard layout (shield/text/copy) - Reduce GlowCard shadow opacity and radius - Update unlink SVG path to match lucide icon - Add flexWrap to ChainLinkRow for 320px viewport support - Reduce input/button sizes for small viewports - Center address in verified identity box with wide gap - Adjust heading spacing and checkmark position - Update Playwright test screenshots * fix: address Copilot review findings on connect-a-wallet-widget Adds a changeSecondaryAddress adapter action and "Change address" button so users can check a different address without reloading, replaces a hardcoded RGBA background with the $infoMuted token, and swaps the copy-address control for an accessible, focusable Button. * fix: address pheobeayo review findings on connect-a-wallet-widget Remove unused ChainRowCard export, disambiguate the duplicate "Connect or Disconnect Address" heading, swap hover-tracked useState for hoverStyle on the disconnect button (RN Web/touch compatible), and clear the copy-feedback timeout on unmount. * fix: restore hover text contrast on disconnect button hoverStyle only flips the background to red; icon/label were still hardcoded to error color, making them invisible on hover. Reintroduce a small hover flag via onHoverIn/onHoverOut to swap text/icon to white on hover, per pheobeayo's review. * test: refresh connect-a-wallet-widget screenshots and fix stale spec assertion The ready-state heading changed to 'Linked address' in earlier review-fix commits; update the unsupported-network assertion and regenerate caw-05, 06, 08 and 09 so the committed evidence matches the current UI. * fix: clear pending copy timeout before scheduling a new one

Copilot

🟡 Changes recommended

Provider routing, custom-element integration, dialog concurrency, validation feedback, accessibility, and test artifact issues remain unresolved.

9 open findings

Use configured HTTP transports for per-chain read clients · New
Avoid shadowing the bridge-provided widget provider · New
Prevent dialog replacement from leaving confirmations unresolved · New
Display validation errors in the connected input state · New
Add interaction tests for link and unlink transactions · New
Add a programmatic label to the wallet address input · New
Keep action labels visible while showing the busy spinner · New
Apply reduced GlowCard styling only to the identity card · New
Store screenshots in the canonical evidence directory · New

What changed in this PR

Adds a provider-first wallet-linking widget using Citizen SDK across Fuse, Celo, and XDC.

Changes:

Adds the widget package, adapter, custom element, and UI.
Adds Storybook documentation, runtime fixtures, and Playwright coverage.
Extends shared icons and adjusts GlowCard styling.

File	Description
`packages/connect-a-wallet-widget/package.json`	Defines the new package.
`packages/connect-a-wallet-widget/tsup.config.ts`	Configures package builds.
`packages/connect-a-wallet-widget/tsconfig.json`	Configures development TypeScript.
`packages/connect-a-wallet-widget/tsconfig.build.json`	Configures build TypeScript.
`packages/connect-a-wallet-widget/src/adapter.ts`	Implements SDK wallet-link behavior.
`packages/connect-a-wallet-widget/src/ConnectAWalletWidget.tsx`	Wires provider, adapter, and view.
`packages/connect-a-wallet-widget/src/element.ts`	Defines the custom element.
`packages/connect-a-wallet-widget/src/index.ts`	Exposes the public API.
`packages/connect-a-wallet-widget/src/integration.ts`	Declares integration metadata.
`packages/connect-a-wallet-widget/src/register.ts`	Registers the custom element.
`packages/connect-a-wallet-widget/src/widgetRuntimeContract.ts`	Defines runtime contracts and states.
`packages/connect-a-wallet-widget/src/components/AddressLinkForm.tsx`	Renders address input controls.
`packages/connect-a-wallet-widget/src/components/ChainLinkRow.tsx`	Renders per-chain actions.
`packages/connect-a-wallet-widget/src/components/ConnectAWalletWidgetView.tsx`	Composes widget states.
`packages/connect-a-wallet-widget/src/components/ConnectPrompt.tsx`	Renders the wallet gate prompt.
`packages/connect-a-wallet-widget/src/components/format.ts`	Maps chain-row presentation state.
`packages/connect-a-wallet-widget/src/components/PrimaryIdentityCard.tsx`	Displays the primary identity.
`packages/connect-a-wallet-widget/src/components/shared.tsx`	Provides widget-local UI helpers.
`packages/connect-a-wallet-widget/src/components/WalletGate.tsx`	Gates disconnected wallets.
`packages/ui/src/components/Icon.tsx`	Adds link and unlink icons.
`packages/ui/src/components/GlowCard.ts`	Changes shared glow styling.
`examples/storybook/package.json`	Adds the widget dependency.
`examples/storybook/src/stories/helpers/connectAWalletWidgetStories.tsx`	Defines deterministic fixtures.
`examples/storybook/src/stories/connect-a-wallet-widget/ConnectAWalletWidgetShowcase.stories.tsx`	Adds the interactive showcase.
`examples/storybook/src/stories/connect-a-wallet-widget/ConnectAWalletWidgetQA.stories.tsx`	Adds QA state stories.
`examples/storybook/src/stories/connect-a-wallet-widget/ConnectAWalletWidget.mdx`	Documents widget usage.
`tests/widgets/connect-a-wallet-widget/states.spec.ts`	Adds Playwright state checks.
`tests/widgets/connect-a-wallet-widget/test-results/caw-01-not-connected.png`	Captures disconnected state.
`tests/widgets/connect-a-wallet-widget/test-results/caw-02-connecting.png`	Captures connecting state.
`tests/widgets/connect-a-wallet-widget/test-results/caw-03-connected-no-input.png`	Captures empty address state.
`tests/widgets/connect-a-wallet-widget/test-results/caw-04-checking-address.png`	Captures address checking.
`tests/widgets/connect-a-wallet-widget/test-results/caw-05-ready-mixed-row-statuses.png`	Captures mixed chain states.
`tests/widgets/connect-a-wallet-widget/test-results/caw-06-unsupported-network.png`	Captures network warning.
`tests/widgets/connect-a-wallet-widget/test-results/caw-07-top-level-error-with-retry.png`	Captures retryable error.
`tests/widgets/connect-a-wallet-widget/test-results/caw-08-mobile-ready.png`	Captures mobile layout.
`tests/widgets/connect-a-wallet-widget/test-results/caw-09-desktop-ready.png`	Captures desktop layout.
`pnpm-lock.yaml`	Locks new workspace dependencies.

Files not reviewed (1)

pnpm-lock.yaml: Generated file

🧠 Review effort: Balanced

💡 Add a code-review agent skill for context-aware, tailored reviews. Learn more in the docs.

edehvictor · 2026-10-13T16:43:43Z

+  const publicClientsByChain = useMemo(
+    () =>
+      CONNECT_A_WALLET_CHAINS.reduce(
+        (acc, id) => {
+          const chain = CHAIN_CONFIGS[id]
+          acc[id] = createPublicClient({ chain, transport: custom(provider as Parameters<typeof custom>[0]) })


Addressed in follow-up #249 (074b547): status reads now use each chain's configured HTTP RPC, while wallet operations retain the host provider. Tests assert all three HTTP endpoints, no wallet eth_call, and safe missing-provider/error handling.

edehvictor · 2026-10-13T16:46:05Z

+ */
+function confirmSecurityMessageViaDialog(message: string): Promise<boolean> {
+  return new Promise((resolve) => {
+    createDialog({


Addressed in #249 (074b547) with a synchronous widget-wide busy guard. Competing chain actions and address edits stay disabled until settlement; pending confirmation is cancelled on wallet change/unmount. Tests cover rapid clicks, receipt waiting, cancellation and failures. No queue or new dialog architecture added.

edehvictor · 2026-10-13T16:47:51Z

+    if (!isAddress(trimmed)) {
+      setStatus('connected_no_input')
+      setError('Enter a valid wallet address.')
+      return


Addressed in #249 (074b547): the address form now displays inline validation feedback, clears it on edit, and exposes aria-invalid. The interaction test verifies the error, recovery on editing, and that invalid input makes no RPC calls.

edehvictor · 2026-10-13T16:49:35Z

+        await sdk.connectAccount(secondaryAddress, {
+          onSecurityMessage: confirmSecurityMessageViaDialog,
+          onHash: (hash: `0x${string}`) => {
+            transactionHash = hash
+          },


Added in #249 (074b547): SDK-backed mocked interaction coverage for link/unlink confirmation, cancellation, wallet rejection, reverted receipts, callbacks/toasts and busy-state recovery. All 27 targeted tests pass with retries disabled. QA.md separates automated screenshots from manual Celo link/unlink evidence and documents the local WalletConnect workaround and untested live Fuse/XDC transactions.

edehvictor · 2026-10-13T16:51:01Z

+
+async function saveScreenshot(page: Page, name: string) {
+  await page.screenshot({
+    path: `tests/widgets/connect-a-wallet-widget/test-results/${name}.png`,


Clarified in #249 (074b547), following the scope specified in #245: root /test-results/ is ignored temporary output, while tests/widgets/<widget>/test-results/ holds curated tracked evidence. Updated AGENTS.md and both QA docs; existing screenshot locations and the anchored ignore rule are unchanged.

goodbounties-nanoclaw-agent Bot requested review from a team and L03TJ3 July 24, 2026 12:52

L03TJ3 linked an issue Jul 27, 2026 that may be closed by this pull request

[PLAN] Add Connect-a-wallet widget to GoodWidget #114

Open

6 of 18 tasks

L03TJ3 force-pushed the plan/connect-a-wallet-widget branch from 93ca2ff to ea4bd47 Compare July 27, 2026 05:18

L03TJ3 added this to GoodBounties Jul 28, 2026

L03TJ3 moved this to Prepare AI Task in GoodBounties Jul 28, 2026

goodbounties-nanoclaw-agent Bot mentioned this pull request Jul 28, 2026

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

Open

12 tasks

goodbounties-nanoclaw-agent Bot and others added 2 commits July 30, 2026 07:48

goodbounties-nanoclaw-agent Bot force-pushed the plan/connect-a-wallet-widget branch from ea4bd47 to 5107fa7 Compare July 30, 2026 07:48

sammajayi mentioned this pull request Jul 30, 2026

Sammajayi/connect a wallet fixes #135

Merged

10 of 12 tasks

Copilot AI balanced review requested due to automatic review settings October 9, 2026 07:36

L03TJ3 deployed to internal October 9, 2026 07:36 — with GitHub Actions Active

L03TJ3 deployed to preview-storybook October 9, 2026 07:36 — with GitHub Actions

View deployment

L03TJ3 had a problem deploying to preview-superfluid-campaign October 9, 2026 07:36 — with GitHub Actions Failure

L03TJ3 deployed to preview-ai-credits October 9, 2026 07:36 — with GitHub Actions

View deployment

L03TJ3 had a problem deploying to preview-gooddata October 9, 2026 07:36 — with GitHub Actions Failure

Copilot started reviewing October 9, 2026 07:39

View session

Copilot AI reviewed Oct 9, 2026

View reviewed changes

L03TJ3 added 2 commits October 9, 2026 18:42

Merge remote connect-a-wallet-widget fixes for #116

e257ca3

Merge main into connect-a-wallet-widget for #116

3ce69ab

L03TJ3 deployed to internal October 9, 2026 11:42 — with GitHub Actions Active

L03TJ3 deployed to preview-storybook October 9, 2026 11:42 — with GitHub Actions

View deployment

L03TJ3 deployed to preview-superfluid-campaign October 9, 2026 11:42 — with GitHub Actions

View deployment

L03TJ3 deployed to preview-gooddata October 9, 2026 11:42 — with GitHub Actions

View deployment

L03TJ3 deployed to preview-ai-credits October 9, 2026 11:42 — with GitHub Actions

View deployment

L03TJ3 mentioned this pull request Oct 13, 2026

[GoodBounty-Patch] Connect-a-wallet widget: follow-up fixes and testing #245

Open

14 tasks

edehvictor mentioned this pull request Oct 13, 2026

fix(connect-a-wallet-widget): harden wallet flows and QA (#245) #249

Open

Navigation Menu

Repository navigation

Feature Connect A Wallet Widget - #116

Feature Connect A Wallet Widget#116
goodbounties-nanoclaw-agent[bot] wants to merge 7 commits into
mainfrom
plan/connect-a-wallet-widget

goodbounties-nanoclaw-agent Bot commented Jul 24, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

edehvictor Oct 13, 2026

Uh oh!

Uh oh!

edehvictor Oct 13, 2026

Uh oh!

edehvictor Oct 13, 2026

Uh oh!

edehvictor Oct 13, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

edehvictor Oct 13, 2026

Uh oh!

This branch was successfully deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

goodbounties-nanoclaw-agent Bot commented Jul 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

How Has This Been Tested?

Checklist:

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🟡 Changes recommended

Uh oh!

edehvictor Oct 13, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

edehvictor Oct 13, 2026

Choose a reason for hiding this comment

Uh oh!

edehvictor Oct 13, 2026

Choose a reason for hiding this comment

Uh oh!

edehvictor Oct 13, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

edehvictor Oct 13, 2026

Choose a reason for hiding this comment

Uh oh!

This branch was successfully deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

goodbounties-nanoclaw-agent Bot commented Jul 24, 2026 •

edited

Loading