Skip to content

Sammajayi/connect a wallet fixes - #135

Open
sammajayi wants to merge 1 commit into
GoodDollar:plan/connect-a-wallet-widgetfrom
sammajayi:sammajayi/connect-a-wallet-fixes
Open

Sammajayi/connect a wallet fixes#135
sammajayi wants to merge 1 commit into
GoodDollar:plan/connect-a-wallet-widgetfrom
sammajayi:sammajayi/connect-a-wallet-fixes

Conversation

@sammajayi

Copy link
Copy Markdown

Description

Redesigned the connect-wallet widget UI following the design reference in #113 in reference to the main pr in #116, executed following the plan in #114 . Fixed crash on error/unsupported states, addressed overflow on small viewports, and updated component styling to match the design system.

PR about #116

How Has This Been Tested?

  • Ran pnpm test: demo tests/widgets/connect-a-wallet-widget - all 8 Playwright state tests pass
  • Manual testing in Storybook for visual verification
  • Verified build and lint pass

Checklist:

  • PR title matches follow: (Feature|Bug|Chore) Task Name
  • My code follows the style guidelines of this project
  • I have followed all the instructions described in the initial task (check Definitions of Done)
  • I have performed a self-review of my own code
  • My changes generate no new warnings
  • I have added tests that prove my fix is effective or that my feature works
  • New and existing unit tests pass locally with my changes
  • I have added reference to a related issue in the repository
  • I have added a detailed description of the changes proposed in the pull request. I am as descriptive as possible, assisting reviewers as much as possible.
  • I have added screenshots related to my pull request (for frontend tasks)
  • I have pasted a gif showing the feature.
  • @mentions of the person or team responsible for reviewing proposed changes

- 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
@sammajayi
sammajayi force-pushed the sammajayi/connect-a-wallet-fixes branch from bbfde2f to ed45fce Compare July 30, 2026 11:24
@sirpy
sirpy requested a lite review from Copilot August 11, 2026 12:44

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR refines the Connect-a-wallet widget by aligning its UI more closely with the design reference, improving responsiveness on small viewports, and hardening edge/error states. It also updates supporting UI primitives and Playwright state tests to match the new copy and layout.

Changes:

  • Updated Connect-a-wallet widget view/layout (header, info callout, responsive chain rows, revised copy) and improved small-viewport behavior.
  • Added link / unlink icons and tuned GlowCard shadow styling to better match the design system.
  • Hardened Playwright state tests with a more reliable “wait until rendered” helper and added mobile/desktop layout screenshots.

Reviewed changes

Copilot reviewed 8 out of 17 changed files in this pull request and generated 3 comments.

Show a summary per file
File Description
tests/widgets/connect-a-wallet-widget/states.spec.ts Improves test stability via waitForText and adds mobile/desktop layout coverage.
packages/ui/src/components/Icon.tsx Adds link / unlink SVG paths for the redesigned connect/disconnect buttons.
packages/ui/src/components/GlowCard.ts Adjusts glow shadow intensity/radius to better fit updated visual style.
packages/connect-a-wallet-widget/src/components/shared.tsx Allows chain row card wrapping and simplifies ActionButton sizing for responsiveness.
packages/connect-a-wallet-widget/src/components/PrimaryIdentityCard.tsx Redesigns the primary identity card and adds copy-to-clipboard affordance.
packages/connect-a-wallet-widget/src/components/ConnectAWalletWidgetView.tsx Restructures the widget layout (header/callout/footer) and changes form/ready-state rendering.
packages/connect-a-wallet-widget/src/components/ChainLinkRow.tsx Redesigns per-chain rows with status indicator + icon buttons and wrapping layout.
packages/connect-a-wallet-widget/src/components/AddressLinkForm.tsx Updates form copy/typography and input/button sizing.

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

)
}

const showForm = state.status !== 'error' && !(state.status === 'ready' && state.secondaryAddress)
width={40}
height={40}
borderRadius="$2"
backgroundColor="rgba(0, 174, 255, 0.15)"
Comment on lines +59 to +67
<YStack
onPress={handleCopy}
cursor="pointer"
padding="$1"
hoverStyle={{ opacity: 0.7 }}
flexShrink={0}
>
<Icon name={copied ? 'check' : 'copy'} size="md" color={copied ? 'success' : 'muted'} />
</YStack>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants