Skip to content

Sammajayi/connect a wallet fixes #135

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
L03TJ3 merged 6 commits into from
Oct 9, 2026
Merged

Sammajayi/connect a wallet fixes #135

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
ed45fce
fix: UI polish and lint fixes for connect-a-wallet-widget
sammajayi Jul 30, 2026
464ae2a
fix: address Copilot review findings on connect-a-wallet-widget
sammajayi Aug 17, 2026
fed0846
fix: address pheobeayo review findings on connect-a-wallet-widget
sammajayi Aug 18, 2026
a7b6276
fix: restore hover text contrast on disconnect button
sammajayi Aug 18, 2026
3a27e14
test: refresh connect-a-wallet-widget screenshots and fix stale spec …
sammajayi Oct 5, 2026
4d77827
fix: clear pending copy timeout before scheduling a new one
sammajayi Oct 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 5 additions & 4 deletions packages/connect-a-wallet-widget/src/components/AddressLinkForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@ export function AddressLinkForm({
}: AddressLinkFormProps) {
return (
<AddressFormCard>
<Heading level={5}>Wallet address to link</Heading>
<Text secondary>
<Heading level={6} fontSize="$1">Connect or Disconnect Address</Heading>
<Text fontSize="$1" secondary>
Enter the address you want to connect to or disconnect from your GoodID, then check its
status on each supported chain.
</Text>
Expand All @@ -27,9 +27,10 @@ export function AddressLinkForm({
onChangeText={onChangeAddressInput}
placeholder="0x…"
disabled={isChecking}
size="sm"
/>
<ActionButton onPress={onCheckAddress} disabled={isChecking || !addressInput} fullWidth>
{isChecking ? <Spinner size="sm" /> : <ButtonText>Check address</ButtonText>}
<ActionButton onPress={onCheckAddress} disabled={isChecking || !addressInput} fullWidth size="sm">
{isChecking ? <Spinner size="sm" /> : <ButtonText fontSize="$1">Check address</ButtonText>}
</ActionButton>
</AddressFormCard>
)
Expand Down
122 changes: 103 additions & 19 deletions packages/connect-a-wallet-widget/src/components/ChainLinkRow.tsx
View file
Open in desktop
Comment thread
L03TJ3 marked this conversation as resolved.
Original file line number Diff line number Diff line change
@@ -1,12 +1,11 @@
import React from 'react'
import { AddressDisplay, Badge, BadgeText, ButtonText, ChainBadge, Spinner } from '@goodwidget/ui'
import React, { useState } from 'react'
import { ButtonText, Icon, Spinner, Stack, Text, XStack, YStack } from '@goodwidget/ui'
import type { ConnectAWalletChainLinkState } from '../widgetRuntimeContract'
import { chainLinkRowPresentation } from './format'
import { ActionButton, ChainRowCard } from './shared'
import { ActionButton } from './shared'

interface ChainLinkRowProps {
row: ConnectAWalletChainLinkState
address: `0x${string}`
onConnect: () => void
onDisconnect: () => void
}
Expand All @@ -16,24 +15,109 @@ interface ChainLinkRowProps {
* Disconnect (never hidden) with a Spinner while a status is in flight, per
* Bounty Lead sign-off on the human-reviewer checklist.
*/
export function ChainLinkRow({ row, address, onConnect, onDisconnect }: ChainLinkRowProps) {
export function ChainLinkRow({ row, onConnect, onDisconnect }: ChainLinkRowProps) {
const { actionLabel, isBusy, isDisabled } = chainLinkRowPresentation(row.status)
const handlePress = actionLabel === 'Connect' ? onConnect : onDisconnect
const [disconnectHovered, setDisconnectHovered] = useState(false)

// Map status to dot color and display text
let dotColor = '$placeholderColor'
let statusText = 'Not Connected'

if (row.status === 'connected') {
dotColor = '$success'
statusText = 'Connected'
} else if (row.status === 'connecting') {
statusText = 'Connecting...'
} else if (row.status === 'disconnecting') {
statusText = 'Disconnecting...'
} else if (row.status === 'checking') {
statusText = 'Checking...'
}

const isDisconnect = actionLabel === 'Disconnect'

return (
<ChainRowCard>
<ChainBadge chainId={row.chainId} name={row.chainName} />
<AddressDisplay address={address} size="sm" />
<Badge type={row.status === 'connected' ? 'success' : 'info'}>
<BadgeText>{row.status === 'checking' ? 'checking…' : row.status.replace('_', ' ')}</BadgeText>
</Badge>
<ActionButton
onPress={handlePress}
disabled={isDisabled}
variant={actionLabel === 'Disconnect' ? 'outline' : 'primary'}
>
{isBusy ? <Spinner size="sm" /> : <ButtonText>{actionLabel}</ButtonText>}
</ActionButton>
</ChainRowCard>
<XStack
padding="$4"
alignItems="center"
justifyContent="space-between"
gap="$3"
borderBottomWidth={1}
borderBottomColor="$borderColor"
flexWrap="wrap"
>
<XStack alignItems="center" gap="$2" flex={1} minWidth={0}>
<Stack
width={32}
height={32}
borderRadius="$full"
backgroundColor="$backgroundPress"
alignItems="center"
justifyContent="center"
flexShrink={0}
>
<Text fontWeight="700" fontSize="$1" color="$color">
{row.chainName.charAt(0)}
</Text>
</Stack>

<YStack gap="$0.5" flex={1} minWidth={0}>
<Text fontWeight="700" fontSize="$1" color="$color" numberOfLines={1}>
{row.chainName}
</Text>
<XStack alignItems="center" gap="$1">
<Stack width={5} height={5} borderRadius={3} backgroundColor={dotColor} flexShrink={0} />
<Text fontSize="$1" fontWeight="600" color="$placeholderColor">
{statusText}
</Text>
</XStack>
</YStack>
</XStack>

{isBusy ? (
<ActionButton
disabled
variant={isDisconnect ? 'outline' : 'primary'}
borderColor={isDisconnect ? '$error' : undefined}
paddingHorizontal="$3.5"
flexShrink={0}
>
<Spinner size="sm" />
</ActionButton>
) : isDisconnect ? (
<ActionButton
onPress={handlePress}
disabled={isDisabled}
variant="outline"
borderColor="$error"
backgroundColor={disconnectHovered ? '$error' : 'transparent'}
paddingHorizontal="$2.5"
paddingVertical="$1.5"
flexShrink={0}
onMouseEnter={() => setDisconnectHovered(true)}
onMouseLeave={() => setDisconnectHovered(false)}
>
Comment thread
L03TJ3 marked this conversation as resolved.
<XStack alignItems="center" gap="$1">
<Icon name="unlink" size="xs" color={disconnectHovered ? 'white' : 'error'} />
<ButtonText fontSize="$1" color={disconnectHovered ? '$white' : '$error'}>Disconnect</ButtonText>
</XStack>
</ActionButton>
) : (
<ActionButton
onPress={handlePress}
disabled={isDisabled}
variant="primary"
paddingHorizontal="$2.5"
paddingVertical="$1.5"
flexShrink={0}
>
<XStack alignItems="center" gap="$1">
<Icon name="link" size="xs" color="white" />
<ButtonText fontSize="$1" color="$white">Connect</ButtonText>
</XStack>
</ActionButton>
)}
</XStack>
)
}
140 changes: 119 additions & 21 deletions packages/connect-a-wallet-widget/src/components/ConnectAWalletWidgetView.tsx
View file
Open in desktop

@pheobeayo pheobeayo Aug 18, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

<Heading level={6} fontSize="$1">Connect or Disconnect Address</Heading>
This is the exact same string as the heading in AddressLinkForm.tsx, but it's showing at a different point in the flow (after the address has already been checked, next to "Change address"). Two headings with identical text at different steps could be confusing when navigating by heading (e.g. screen readers), and it reads oddly sitting above rows that are already linked/checked. Could we give this one distinct copy, e.g. "Linked address" or "Manage connections"?

Original file line number Diff line number Diff line change
@@ -1,12 +1,30 @@
import React from 'react'
import { Alert, Badge, BadgeText, ButtonText, Heading, Spinner, XStack } from '@goodwidget/ui'
import {
AddressDisplay,
Alert,
ButtonText,
Card,
Heading,
Icon,
Spinner,
Stack,
Text,
XStack,
YStack,
} from '@goodwidget/ui'
import type { ConnectAWalletWidgetAdapterResult } from '../widgetRuntimeContract'
import { AddressLinkForm } from './AddressLinkForm'
import { ChainLinkRow } from './ChainLinkRow'
import { PrimaryIdentityCard } from './PrimaryIdentityCard'
import { ActionButton, EmptyStateCard, WidgetContent } from './shared'
import { WalletGate } from './WalletGate'

const CHAIN_NAMES: Record<number, string> = {
122: 'Fuse',
42220: 'Celo',
50: 'XDC',
}

interface ConnectAWalletWidgetViewProps {
adapter: ConnectAWalletWidgetAdapterResult
'data-testid'?: string
Expand All @@ -22,16 +40,61 @@ export function ConnectAWalletWidgetView({
// header rather than relying on the host shell for it (see
// StreamingWidgetView) — matches the #113 design reference's top bar.
const header = (
<XStack justifyContent="space-between" alignItems="center" paddingHorizontal="$1">
<Heading level={4}>GoodDollar</Heading>
{state.activeChainId && (
<Badge type={state.isActiveChainSupported ? 'info' : 'warning'}>
<BadgeText>Chain {state.activeChainId}</BadgeText>
</Badge>
)}
<YStack gap="$3" width="100%">
<XStack justifyContent="space-between" alignItems="center" paddingHorizontal="$1">
<Heading level={4} fontSize="$3">GoodDollar</Heading>
{state.activeChainId && (
<Stack
paddingHorizontal="$2"
paddingVertical="$1"
borderRadius="$full"
borderWidth={1}
borderColor="$borderColor"
backgroundColor="$backgroundHover"
>
<Text fontSize="$1" fontWeight="600" color="$color">
{CHAIN_NAMES[state.activeChainId] ?? `Chain ${state.activeChainId}`}
</Text>
</Stack>
)}
</XStack>
<YStack alignItems="center" width="100%" gap="$2">
<Text fontSize="$2" fontWeight="600" color="$placeholderColor">
Connect identity
</Text>
<Stack height={2} width="100%" backgroundColor="$primary" />
</YStack>
</YStack>
)

const infoCallout = (
<XStack
backgroundColor="$backgroundHover"
padding="$4"
borderRadius="$3"
borderWidth={1}
borderColor="$borderColor"
gap="$3"
alignItems="flex-start"
>
<Icon name="info" size="sm" color="muted" marginTop="$0.5" />
<YStack flex={1} gap="$1">
<Text fontSize="$1" color="$placeholderColor" lineHeight="$3">
You can connect multiple wallet addresses.
</Text>
<Text fontSize="$1" fontWeight="700" color="$color" lineHeight="$3">
However, only one claim per day is available, shared between the connected accounts.
</Text>
</YStack>
</XStack>
)

const footer = (
<Text fontSize="$1" color="$placeholderColor" textAlign="center" paddingVertical="$2">
Supported Networks: Celo, XDC, Fuse
</Text>
)

if (!state.isWalletConnected) {
return (
<WidgetContent data-testid={dataTestId}>
Expand All @@ -45,10 +108,14 @@ export function ConnectAWalletWidgetView({
)
}

const showForm = state.status !== 'error' && !(state.status === 'ready' && state.secondaryAddress)
Comment thread
L03TJ3 marked this conversation as resolved.

return (
<WidgetContent data-testid={dataTestId}>
{header}

{infoCallout}

<PrimaryIdentityCard walletAddress={state.walletAddress} />

{!state.isActiveChainSupported && (
Expand All @@ -61,17 +128,17 @@ export function ConnectAWalletWidgetView({

{state.status === 'error' && (
<EmptyStateCard>
<Heading level={5} textAlign="center">
<Heading level={6} fontSize="$1" textAlign="center">
Couldn't load link status
</Heading>
<Alert type="error" message={state.error ?? 'Something went wrong.'} />
<ActionButton onPress={actions.checkSecondaryAddress}>
<ButtonText>Retry</ButtonText>
<ActionButton onPress={actions.checkSecondaryAddress} size="sm">
<ButtonText fontSize="$1">Retry</ButtonText>
</ActionButton>
</EmptyStateCard>
)}

{state.status !== 'error' && (
{showForm && (
<AddressLinkForm
addressInput={state.secondaryAddressInput}
isChecking={state.status === 'checking_address'}
Expand All @@ -88,17 +155,48 @@ export function ConnectAWalletWidgetView({

{state.status === 'ready' && state.secondaryAddress && (
<>
{state.chainLinks.map((row) => (
<ChainLinkRow
key={row.chainId}
row={row}
address={state.secondaryAddress as `0x${string}`}
onConnect={() => actions.connectChain(row.chainId)}
onDisconnect={() => actions.disconnectChain(row.chainId)}
/>
))}
<Heading level={6} marginBottom="$1" fontSize="$1">Connect or Disconnect Address</Heading>
<XStack
backgroundColor="$backgroundHover"
padding="$3"
borderRadius="$3"
flexDirection="row"
alignItems="center"
gap="$4"
borderWidth={1}
borderColor="$borderColor"
>
<YStack
width={20}
height={20}
borderRadius="$full"
backgroundColor="$successMuted"
alignItems="center"
justifyContent="center"
flexShrink={0}
marginLeft={3}
>
<Icon name="check" size="xs" color="success" />
</YStack>
<XStack flex={1} justifyContent="center">
<AddressDisplay address={state.secondaryAddress} size="sm" copyable={false} truncate={true} />
</XStack>
</XStack>

<Card padding="$0" borderRadius="$3" overflow="hidden" borderWidth={1} borderColor="$borderColor">
{state.chainLinks.map((row) => (
<ChainLinkRow
key={row.chainId}
row={row}
onConnect={() => actions.connectChain(row.chainId)}
onDisconnect={() => actions.disconnectChain(row.chainId)}
/>
))}
</Card>
</>
)}

{footer}
</WidgetContent>
)
}
Loading