Add GoodDollar header and primary-identity card to connect-a-wallet-widget

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.

Author: BountyCoder

packages/connect-a-wallet-widget/src/components/ConnectAWalletWidgetView.tsx

@@ -1,8 +1,9 @@
 import React from 'react'
-import { Alert, ButtonText, Heading, Spinner } from '@goodwidget/ui'
+import { Alert, Badge, BadgeText, ButtonText, Heading, Spinner, XStack } 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'
 
@@ -17,9 +18,24 @@ export function ConnectAWalletWidgetView({
 }: ConnectAWalletWidgetViewProps) {
   const { state, actions } = adapter
 
+  // Every widget in this repo renders its own "GoodDollar" + active-chain
+  // 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>
+      )}
+    </XStack>
+  )
+
   if (!state.isWalletConnected) {
     return (
       <WidgetContent data-testid={dataTestId}>
+        {header}
         <WalletGate
           isWalletConnected={state.isWalletConnected}
           isConnecting={state.status === 'connecting'}
@@ -31,6 +47,10 @@ export function ConnectAWalletWidgetView({
 
   return (
     <WidgetContent data-testid={dataTestId}>
+      {header}
+
+      <PrimaryIdentityCard walletAddress={state.walletAddress} />
+
       {!state.isActiveChainSupported && (
         <Alert
           type="warning"

packages/connect-a-wallet-widget/src/components/PrimaryIdentityCard.tsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import { AddressDisplay, Icon, Text, XStack, YStack, createComponent } from '@goodwidget/ui'
+
+const IdentityIconBadge = createComponent(YStack, {
+  name: 'PrimaryIdentityIconBadge',
+  width: 36,
+  height: 36,
+  borderRadius: '$full',
+  alignItems: 'center',
+  justifyContent: 'center',
+  backgroundColor: '$infoMuted',
+})
+
+const IdentityCard = createComponent(XStack, {
+  name: 'PrimaryIdentityCard',
+  alignItems: 'center',
+  gap: '$3',
+  padding: '$3',
+  borderRadius: '$3',
+  borderWidth: 1,
+  borderColor: '$borderColor',
+})
+
+interface PrimaryIdentityCardProps {
+  walletAddress: string | null
+}
+
+/**
+ * Shows which address the per-chain rows below are linking *from* — the
+ * connected host wallet, i.e. the user's GoodID primary identity. Mirrors
+ * the "Primary Verified Identity" card in the #113 design reference.
+ */
+export function PrimaryIdentityCard({ walletAddress }: PrimaryIdentityCardProps) {
+  if (!walletAddress) {
+    return null
+  }
+
+  return (
+    <IdentityCard data-testid="connect-a-wallet-widget-primary-identity">
+      <IdentityIconBadge>
+        <Icon name="shield-check" size="sm" color="primary" />
+      </IdentityIconBadge>
+      <YStack flex={1} gap="$0.5">
+        <Text variant="label" tone="secondary" fontWeight="700">
+          Primary verified identity
+        </Text>
+        <AddressDisplay address={walletAddress} size="sm" />
+      </YStack>
+    </IdentityCard>
+  )
+}