Repository navigation
Feature Connect A Wallet Widget - #116
Open
goodbounties-nanoclaw-agent[bot] wants to merge 7 commits into
Open
goodbounties-nanoclaw-agent[bot] wants to merge 7 commits into
goodbounties-nanoclaw-agent[bot] wants to merge 7 commits into
Conversation
…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.
6 of 18 tasks
L03TJ3
force-pushed
the
plan/connect-a-wallet-widget
branch
from
July 27, 2026 05:18
93ca2ff to
ea4bd47
Compare
12 tasks
…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.
goodbounties-nanoclaw-agent
Bot
force-pushed
the
plan/connect-a-wallet-widget
branch
from
July 30, 2026 07:48
ea4bd47 to
5107fa7
Compare
10 of 12 tasks
* 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
L03TJ3
had a problem deploying
to
preview-superfluid-campaign
October 9, 2026 07:36 — with 
GitHub Actions
Failure
GitHub Actions
Failure
L03TJ3
had a problem deploying
to
preview-gooddata
October 9, 2026 07:36 — with
GitHub Actions
Failure
GitHub Actions
Failure
Contributor
There was a problem hiding this comment.
🟡 Changes recommended
Provider routing, custom-element integration, dialog concurrency, validation feedback, accessibility, and test artifact issues remain unresolved.
9 open findings
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
GlowCardstyling.
| 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.
Comment on lines
+162
to
+167
| 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]) }) |
Comment on lines
+19
to
+20
| export const ConnectAWalletWidgetElement = createMiniAppElement( | ||
| ConnectAWalletWidget as React.ComponentType<Record<string, unknown>>, |
| */ | ||
| function confirmSecurityMessageViaDialog(message: string): Promise<boolean> { | ||
| return new Promise((resolve) => { | ||
| createDialog({ |
Comment on lines
+181
to
+184
| if (!isAddress(trimmed)) { | ||
| setStatus('connected_no_input') | ||
| setError('Enter a valid wallet address.') | ||
| return |
Comment on lines
+286
to
+290
| await sdk.connectAccount(secondaryAddress, { | ||
| onSecurityMessage: confirmSecurityMessageViaDialog, | ||
| onHash: (hash: `0x${string}`) => { | ||
| transactionHash = hash | ||
| }, |
Comment on lines
+25
to
+28
| <Input | ||
| value={addressInput} | ||
| onChangeText={onChangeAddressInput} | ||
| placeholder="0x…" |
Comment on lines
+85
to
+87
| > | ||
| <Spinner size="sm" /> | ||
| </ActionButton> |
|
|
||
| async function saveScreenshot(page: Page, name: string) { | ||
| await page.screenshot({ | ||
| path: `tests/widgets/connect-a-wallet-widget/test-results/${name}.png`, |
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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'sIdentitySDK(connectAccount/disconnectAccount/checkConnectedStatus). Follows thestreaming-widgetdecomposition standard (thinConnectAWalletWidget.tsxentry +components/tree), usespackages/ui'sDialogfor the blocking security-confirmation prompt before each link/unlink transaction, andToastfor 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...andpnpm --filter @goodwidget/connect-a-wallet-widget lintboth pass clean.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.tests/widgets/connect-a-wallet-widget/states.spec.ts— 7/7 passing, with screenshots committed undertests/widgets/connect-a-wallet-widget/test-results/.Checklist: