diff --git a/examples/html/src/shims/reactNativeSvg.tsx b/examples/html/src/shims/reactNativeSvg.tsx
new file mode 100644
index 00000000..496d1e48
--- /dev/null
+++ b/examples/html/src/shims/reactNativeSvg.tsx
@@ -0,0 +1,49 @@
+import React from 'react'
+
+type SvgElementProps = React.SVGProps<SVGSVGElement> & {
+  accessibilityRole?: string
+}
+
+type SvgGroupProps = React.SVGProps<SVGGElement> & {
+  rotation?: string | number
+  origin?: string
+}
+
+type SvgCircleProps = React.SVGProps<SVGCircleElement> & {
+  onPress?: () => void
+}
+
+/** Web implementation for the react-native-svg primitives used by GoodWidget dependencies. */
+function Svg({ accessibilityRole: _accessibilityRole, ...props }: SvgElementProps) {
+  return <svg {...props} />
+}
+
+/** Mirrors react-native-svg's G transform props with standard SVG attributes. */
+export function G({ rotation, origin, transform, ...props }: SvgGroupProps) {
+  const rotationTransform = rotation ? `rotate(${rotation} ${origin ?? ''})`.trim() : undefined
+  const combinedTransform = [transform, rotationTransform].filter(Boolean).join(' ')
+
+  return <g {...props} transform={combinedTransform || undefined} />
+}
+
+/** Maps react-native-svg onPress to the browser SVG onClick event. */
+export function Circle({ onPress, ...props }: SvgCircleProps) {
+  return <circle {...props} onClick={onPress} />
+}
+
+/** Static SVG primitives used by @tamagui/lucide-icons need no prop translation. */
+function createPassthroughSvgPrimitive(tag: string) {
+  return function SvgPrimitive(props: React.SVGProps<SVGElement>) {
+    return React.createElement(tag, props)
+  }
+}
+
+export const Path = createPassthroughSvgPrimitive('path')
+export const Line = createPassthroughSvgPrimitive('line')
+export const Rect = createPassthroughSvgPrimitive('rect')
+export const Polygon = createPassthroughSvgPrimitive('polygon')
+export const Polyline = createPassthroughSvgPrimitive('polyline')
+export const Ellipse = createPassthroughSvgPrimitive('ellipse')
+
+export { Svg }
+export default Svg
diff --git a/examples/html/vite.config.ts b/examples/html/vite.config.ts
index add9d78b..0913adb5 100644
--- a/examples/html/vite.config.ts
+++ b/examples/html/vite.config.ts
@@ -1,4 +1,7 @@
 import { defineConfig } from 'vite'
+import { fileURLToPath } from 'node:url'
+
+const reactNativeSvgShim = fileURLToPath(new URL('./src/shims/reactNativeSvg.tsx', import.meta.url))
 
 export default defineConfig({
   define: {
@@ -8,6 +11,8 @@ export default defineConfig({
   resolve: {
     alias: {
       'react-native': 'react-native-web',
+      // react-native-svg's Fabric native modules are not available in react-native-web.
+      'react-native-svg': reactNativeSvgShim,
     },
   },
   build: {
diff --git a/examples/react-web/src/shims/reactNativeSvg.tsx b/examples/react-web/src/shims/reactNativeSvg.tsx
new file mode 100644
index 00000000..496d1e48
--- /dev/null
+++ b/examples/react-web/src/shims/reactNativeSvg.tsx
@@ -0,0 +1,49 @@
+import React from 'react'
+
+type SvgElementProps = React.SVGProps<SVGSVGElement> & {
+  accessibilityRole?: string
+}
+
+type SvgGroupProps = React.SVGProps<SVGGElement> & {
+  rotation?: string | number
+  origin?: string
+}
+
+type SvgCircleProps = React.SVGProps<SVGCircleElement> & {
+  onPress?: () => void
+}
+
+/** Web implementation for the react-native-svg primitives used by GoodWidget dependencies. */
+function Svg({ accessibilityRole: _accessibilityRole, ...props }: SvgElementProps) {
+  return <svg {...props} />
+}
+
+/** Mirrors react-native-svg's G transform props with standard SVG attributes. */
+export function G({ rotation, origin, transform, ...props }: SvgGroupProps) {
+  const rotationTransform = rotation ? `rotate(${rotation} ${origin ?? ''})`.trim() : undefined
+  const combinedTransform = [transform, rotationTransform].filter(Boolean).join(' ')
+
+  return <g {...props} transform={combinedTransform || undefined} />
+}
+
+/** Maps react-native-svg onPress to the browser SVG onClick event. */
+export function Circle({ onPress, ...props }: SvgCircleProps) {
+  return <circle {...props} onClick={onPress} />
+}
+
+/** Static SVG primitives used by @tamagui/lucide-icons need no prop translation. */
+function createPassthroughSvgPrimitive(tag: string) {
+  return function SvgPrimitive(props: React.SVGProps<SVGElement>) {
+    return React.createElement(tag, props)
+  }
+}
+
+export const Path = createPassthroughSvgPrimitive('path')
+export const Line = createPassthroughSvgPrimitive('line')
+export const Rect = createPassthroughSvgPrimitive('rect')
+export const Polygon = createPassthroughSvgPrimitive('polygon')
+export const Polyline = createPassthroughSvgPrimitive('polyline')
+export const Ellipse = createPassthroughSvgPrimitive('ellipse')
+
+export { Svg }
+export default Svg
diff --git a/examples/react-web/vite.config.ts b/examples/react-web/vite.config.ts
index 4237508c..1fefcc07 100644
--- a/examples/react-web/vite.config.ts
+++ b/examples/react-web/vite.config.ts
@@ -1,5 +1,8 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import { fileURLToPath } from 'node:url'
+
+const reactNativeSvgShim = fileURLToPath(new URL('./src/shims/reactNativeSvg.tsx', import.meta.url))
 
 export default defineConfig({
   plugins: [react()],
@@ -11,6 +14,8 @@ export default defineConfig({
   resolve: {
     alias: {
       'react-native': 'react-native-web',
+      // react-native-svg's Fabric native modules are not available in react-native-web.
+      'react-native-svg': reactNativeSvgShim,
     },
   },
   optimizeDeps: {
diff --git a/examples/storybook/package.json b/examples/storybook/package.json
index 8188cc93..909bf9b9 100644
--- a/examples/storybook/package.json
+++ b/examples/storybook/package.json
@@ -18,6 +18,7 @@
     "@goodwidget/streaming-widget": "workspace:*",
     "@goodwidget/staking-migration-widget": "workspace:*",
     "@goodwidget/ai-credits-widget": "workspace:*",
+    "@goodwidget/superfluid-campaign-widget": "workspace:*",
     "@goodwidget/embed": "workspace:*",
     "react": "^18.3.0",
     "react-dom": "^18.3.0",
diff --git a/examples/storybook/src/shims/reactNativeSvg.tsx b/examples/storybook/src/shims/reactNativeSvg.tsx
index 09c0d379..558dc925 100644
--- a/examples/storybook/src/shims/reactNativeSvg.tsx
+++ b/examples/storybook/src/shims/reactNativeSvg.tsx
@@ -13,8 +13,8 @@ type SvgCircleProps = React.SVGProps<SVGCircleElement> & {
   onPress?: () => void
 }
 
-/** Storybook web shim for the react-native-svg primitives used by the donut chart. */
-export default function Svg({ accessibilityRole: _accessibilityRole, ...props }: SvgElementProps) {
+/** Storybook web shim for the react-native-svg primitives used by the donut chart and @tamagui/lucide-icons. */
+function Svg({ accessibilityRole: _accessibilityRole, ...props }: SvgElementProps) {
   return <svg {...props} />
 }
 
@@ -30,3 +30,25 @@ export function G({ rotation, origin, transform, ...props }: SvgGroupProps) {
 export function Circle({ onPress, ...props }: SvgCircleProps) {
   return <circle {...props} onClick={onPress} />
 }
+
+/**
+ * @tamagui/lucide-icons' generated icon components import Path/Line/Rect/Polygon/
+ * Polyline/Ellipse by name from react-native-svg purely to render static shapes —
+ * unlike Circle/G above there are no react-native-specific props to translate, so
+ * one passthrough factory covers all of them instead of five near-identical wrappers.
+ */
+function createPassthroughSvgPrimitive(tag: string) {
+  return function SvgPrimitive(props: React.SVGProps<SVGElement>) {
+    return React.createElement(tag, props)
+  }
+}
+
+export const Path = createPassthroughSvgPrimitive('path')
+export const Line = createPassthroughSvgPrimitive('line')
+export const Rect = createPassthroughSvgPrimitive('rect')
+export const Polygon = createPassthroughSvgPrimitive('polygon')
+export const Polyline = createPassthroughSvgPrimitive('polyline')
+export const Ellipse = createPassthroughSvgPrimitive('ellipse')
+
+export { Svg }
+export default Svg
diff --git a/examples/storybook/src/stories/helpers/superfluidCampaignWidgetStories.tsx b/examples/storybook/src/stories/helpers/superfluidCampaignWidgetStories.tsx
new file mode 100644
index 00000000..7b43d0f7
--- /dev/null
+++ b/examples/storybook/src/stories/helpers/superfluidCampaignWidgetStories.tsx
@@ -0,0 +1,353 @@
+import React from 'react'
+import {
+  SuperfluidCampaignWidget,
+  type AirdropStatusAdapter,
+  type CampaignLeaderboardAdapter,
+  type ProgramSupTotalsAdapter,
+  type SuperfluidCampaignWidgetProps,
+  type SuperfluidCampaignView,
+} from '@goodwidget/superfluid-campaign-widget'
+import { MiniAppShell, YStack, type GoodWidgetThemeOverrides } from '@goodwidget/ui'
+import { createCustodialEip1193Provider } from '../../fixtures/custodialEip1193'
+import { getInjectedEip1193Provider, isInjectedProviderUsable } from '../../fixtures/injectedEip1193'
+
+/**
+ * Every real airdrop-status response sampled against the live endpoint so far
+ * came back "not whitelisted" (see useAirdropStatus.ts) — that shape is the
+ * only one used as a QA/Playwright default. The loading/error/eligible
+ * variants below are illustrative fixtures for exercising those UI states,
+ * not observed live responses.
+ */
+const AIRDROP_STATUS_FIXTURES = {
+  loading: (): ReturnType<AirdropStatusAdapter> => ({ status: null, isLoading: true, error: null }),
+  requestFailed: (): ReturnType<AirdropStatusAdapter> => ({
+    status: null,
+    isLoading: false,
+    error: 'Airdrop status request failed (500)',
+  }),
+  notWhitelisted: (): ReturnType<AirdropStatusAdapter> => ({
+    status: { error: 'not whitelisted', walletData: { claims: '0', invites: '1000' } },
+    isLoading: false,
+    error: null,
+  }),
+  eligible: (): ReturnType<AirdropStatusAdapter> => ({
+    status: { walletData: { claims: '3', invites: '1000' } },
+    isLoading: false,
+    error: null,
+  }),
+} as const
+
+function fixedAirdropStatusAdapter(scenario: keyof typeof AIRDROP_STATUS_FIXTURES): AirdropStatusAdapter {
+  return () => AIRDROP_STATUS_FIXTURES[scenario]()
+}
+
+/**
+ * Fixed campaign-leaderboard pages keyed by campaignId, shaped exactly like the
+ * live Superfluid Points API (cms.superfluid.pro/points) responses confirmed in
+ * change-request-3 — one entry per #127 reward pool (606 = GoodDollar actions,
+ * 614 = Ecosystem actions) so tab-switching shows distinct data.
+ */
+const LEADERBOARD_DATA_FIXTURES: Record<number, ReturnType<CampaignLeaderboardAdapter>['data']> = {
+  606: {
+    summary: {
+      campaignId: 606,
+      name: 'GoodDollar Actions',
+      slug: 'good-dollar-actions',
+      totalPoints: 128450,
+      memberCount: 624,
+      totalEvents: 3891,
+      lastEventAt: '2026-07-29T18:42:00.000Z',
+      createdAt: '2026-01-05T00:00:00.000Z',
+    },
+    accounts: [
+      {
+        account: '0x1a2b3c4d5e6f7a8b9c0d1e2f3a4b5c6d7e8f9a0b',
+        totalPoints: 4820,
+        eventCount: 96,
+        lastEventAt: '2026-07-29T12:00:00.000Z',
+        completedActivities: ['claim-ubi', 'invite-users', 'flow-state-vote'],
+      },
+      {
+        account: '0x2b3c4d5e6f7a8b9c0d1e2f3a4b5c6d7e8f9a0b1c',
+        totalPoints: 4390,
+        eventCount: 88,
+        lastEventAt: '2026-07-29T11:00:00.000Z',
+        completedActivities: ['claim-ubi', 'invite-users'],
+      },
+      {
+        account: '0x3c4d5e6f7a8b9c0d1e2f3a4b5c6d7e8f9a0b1c2d',
+        totalPoints: 3910,
+        eventCount: 79,
+        lastEventAt: '2026-07-29T10:00:00.000Z',
+        completedActivities: ['claim-ubi'],
+      },
+    ],
+    pagination: { page: 1, limit: 10, totalDocs: 624, totalPages: 63, hasNextPage: true, hasPrevPage: false },
+  },
+  614: {
+    summary: {
+      campaignId: 614,
+      name: 'Ecosystem Contributions',
+      slug: 'ecosystem-funding-actions',
+      totalPoints: 84200,
+      memberCount: 318,
+      totalEvents: 1745,
+      lastEventAt: '2026-07-29T17:10:00.000Z',
+      createdAt: '2026-01-05T00:00:00.000Z',
+    },
+    accounts: [
+      {
+        account: '0x4d5e6f7a8b9c0d1e2f3a4b5c6d7e8f9a0b1c2d3e',
+        totalPoints: 3420,
+        eventCount: 55,
+        lastEventAt: '2026-07-29T09:00:00.000Z',
+        completedActivities: ['flow-state-funding', 'gardens-donation', 'gardens-funding'],
+      },
+      {
+        account: '0x5e6f7a8b9c0d1e2f3a4b5c6d7e8f9a0b1c2d3e4f',
+        totalPoints: 2985,
+        eventCount: 47,
+        lastEventAt: '2026-07-29T08:00:00.000Z',
+        completedActivities: ['gardens-donation'],
+      },
+    ],
+    pagination: { page: 1, limit: 10, totalDocs: 318, totalPages: 32, hasNextPage: true, hasPrevPage: false },
+  },
+}
+
+/** Named leaderboard scenarios exercised by the QA stories/Playwright spec below. */
+function fixedCampaignLeaderboardAdapter(
+  scenario: 'populated' | 'loading' | 'requestFailed',
+): CampaignLeaderboardAdapter {
+  return (campaignId) => {
+    if (scenario === 'loading') return { data: null, isLoading: true, error: null }
+    if (scenario === 'requestFailed') {
+      return { data: null, isLoading: false, error: 'Campaign leaderboard request failed (500)' }
+    }
+    return { data: LEADERBOARD_DATA_FIXTURES[campaignId] ?? null, isLoading: false, error: null }
+  }
+}
+
+/**
+ * Fixed SUP program totals keyed by campaignId. 606 (GoodDollar actions) is
+ * illustrative "healthy progress" data, not the live snapshot — the real
+ * program exists but funding hasn't started yet as of Season 6 launch, so
+ * its live totalClaimed is currently 0. totalAllocated is 217,700 SUP per the
+ * campaign spec. 614 (Ecosystem funding actions) has no matching entry on
+ * purpose, so RewardPoolSection falls back to its own placeholder—the same
+ * result produced when no pool address is passed to the live widget.
+ */
+const SUP_TOTALS_FIXTURES: Record<number, ReturnType<ProgramSupTotalsAdapter>['data']> = {
+  606: { totalAllocated: 217700, totalClaimed: 128940, totalMembers: 712 },
+}
+
+/** Named SUP-totals scenarios exercised by the QA stories/Playwright spec below. */
+function fixedProgramSupTotalsAdapter(scenario: 'populated' | 'loading' | 'requestFailed'): ProgramSupTotalsAdapter {
+  return (campaignId) => {
+    if (scenario === 'loading') return { data: null, isLoading: true, error: null }
+    if (scenario === 'requestFailed') {
+      return { data: null, isLoading: false, error: 'SUP program totals request failed (500)' }
+    }
+    return { data: SUP_TOTALS_FIXTURES[campaignId] ?? null, isLoading: false, error: null }
+  }
+}
+
+function StoryShell({ children, dataTestId }: { children: React.ReactNode; dataTestId: string }) {
+  return (
+    <MiniAppShell>
+      <YStack
+        data-testid={dataTestId}
+        style={{ width: '100%', maxWidth: 480, minHeight: '100vh', boxSizing: 'border-box' }}
+      >
+        {children}
+      </YStack>
+    </MiniAppShell>
+  )
+}
+
+function SuperfluidCampaignWidgetStoryShell({
+  provider,
+  dataTestId,
+  initialView = 'content',
+  airdropStatusAdapter,
+  leaderboardAdapter,
+  supTotalsAdapter = fixedProgramSupTotalsAdapter('populated'),
+}: {
+  provider: unknown
+  dataTestId: string
+  initialView?: SuperfluidCampaignView
+  airdropStatusAdapter?: AirdropStatusAdapter
+  leaderboardAdapter?: CampaignLeaderboardAdapter
+  supTotalsAdapter?: ProgramSupTotalsAdapter
+}) {
+  return (
+    <StoryShell dataTestId={dataTestId}>
+      <SuperfluidCampaignWidget
+        provider={provider}
+        environment="production"
+        initialView={initialView}
+        airdropStatusAdapter={airdropStatusAdapter}
+        leaderboardAdapter={leaderboardAdapter}
+        supTotalsAdapter={supTotalsAdapter}
+      />
+    </StoryShell>
+  )
+}
+
+/**
+ * Showcase story — real injected wallet (MetaMask, Rabby, etc.) with live API data.
+ * No adapter overrides are passed so all three data sources (airdrop status,
+ * leaderboard, SUP totals) hit the live endpoints.
+ */
+export function InjectedWalletStory({
+  defaultTheme,
+  themeOverrides,
+  initialView = 'content',
+}: {
+  defaultTheme?: 'light' | 'dark'
+  themeOverrides?: GoodWidgetThemeOverrides
+  initialView?: SuperfluidCampaignView
+} = {}) {
+  const injectedProvider = getInjectedEip1193Provider()
+  const usableProvider = isInjectedProviderUsable(injectedProvider)
+
+  if (!usableProvider) {
+    return (
+      <YStack data-testid="SuperfluidCampaignWidget-no-injected-wallet" style={{ width: 420 }} gap="$3">
+        <strong>No injected wallet found</strong>
+        <span>
+          Install/enable MetaMask (or another EIP-1193 wallet) in this browser, then refresh Storybook.
+        </span>
+      </YStack>
+    )
+  }
+
+  return (
+    <StoryShell dataTestId="SuperfluidCampaignWidget-injected-wallet">
+      <SuperfluidCampaignWidget
+        provider={injectedProvider}
+        environment="production"
+        initialView={initialView}
+        defaultTheme={defaultTheme}
+        themeOverrides={themeOverrides}
+      />
+    </StoryShell>
+  )
+}
+
+/**
+ * Showcase story — no wallet connected, live API data.
+ * Shows the public/disconnected view with real leaderboard and SUP-totals data.
+ */
+export function LiveDataNoWalletStory({
+  defaultTheme,
+  themeOverrides,
+  initialView = 'content',
+  poolAddresses,
+}: {
+  defaultTheme?: 'light' | 'dark'
+  themeOverrides?: GoodWidgetThemeOverrides
+  initialView?: SuperfluidCampaignView
+  poolAddresses?: SuperfluidCampaignWidgetProps['poolAddresses']
+} = {}) {
+  return (
+    <StoryShell dataTestId="SuperfluidCampaignWidget-live-no-wallet">
+      <SuperfluidCampaignWidget
+        provider={undefined}
+        environment="production"
+        initialView={initialView}
+        poolAddresses={poolAddresses}
+        defaultTheme={defaultTheme}
+        themeOverrides={themeOverrides}
+      />
+    </StoryShell>
+  )
+}
+
+/**
+ * QA fixture — deterministic custodial wallet, reproducible for Playwright
+ * screenshots. Defaults the airdrop-status card to the "not whitelisted"
+ * fixture (the one shape actually observed from the live endpoint) rather
+ * than leaving it to hit the network, which would make the leaderboard
+ * screenshot's airdrop card non-deterministic across CI runs.
+ */
+export function CustodialLocalFixtureStory({
+  initialView,
+  airdropStatusAdapter = fixedAirdropStatusAdapter('notWhitelisted'),
+  leaderboardAdapter = fixedCampaignLeaderboardAdapter('populated'),
+  supTotalsAdapter = fixedProgramSupTotalsAdapter('populated'),
+}: {
+  initialView?: SuperfluidCampaignView
+  airdropStatusAdapter?: AirdropStatusAdapter
+  leaderboardAdapter?: CampaignLeaderboardAdapter
+  supTotalsAdapter?: ProgramSupTotalsAdapter
+}) {
+  try {
+    const provider = createCustodialEip1193Provider()
+    return (
+      <SuperfluidCampaignWidgetStoryShell
+        provider={provider}
+        dataTestId="SuperfluidCampaignWidget-custodial-wallet"
+        initialView={initialView}
+        airdropStatusAdapter={airdropStatusAdapter}
+        leaderboardAdapter={leaderboardAdapter}
+        supTotalsAdapter={supTotalsAdapter}
+      />
+    )
+  } catch (error: unknown) {
+    return (
+      <YStack data-testid="SuperfluidCampaignWidget-custodial-config-error" style={{ width: 420 }}>
+        <strong>Custodial fixture not configured</strong>
+        <span>{error instanceof Error ? error.message : 'Set a local private key in custodialEip1193.ts'}</span>
+      </YStack>
+    )
+  }
+}
+
+/** QA fixture — custodial wallet with the airdrop-status card fixed to a single scenario. */
+export function CustodialAirdropStatusStory({
+  scenario,
+}: {
+  scenario: keyof typeof AIRDROP_STATUS_FIXTURES
+}) {
+  return <CustodialLocalFixtureStory initialView="leaderboard" airdropStatusAdapter={fixedAirdropStatusAdapter(scenario)} />
+}
+
+/** QA fixture — no wallet connected, matches the disconnected (public) mockup. */
+export function NoWalletStory({
+  initialView,
+  leaderboardAdapter = fixedCampaignLeaderboardAdapter('populated'),
+  supTotalsAdapter = fixedProgramSupTotalsAdapter('populated'),
+}: {
+  initialView?: SuperfluidCampaignView
+  leaderboardAdapter?: CampaignLeaderboardAdapter
+  supTotalsAdapter?: ProgramSupTotalsAdapter
+}) {
+  return (
+    <SuperfluidCampaignWidgetStoryShell
+      provider={undefined}
+      dataTestId="SuperfluidCampaignWidget-no-wallet"
+      initialView={initialView}
+      leaderboardAdapter={leaderboardAdapter}
+      supTotalsAdapter={supTotalsAdapter}
+    />
+  )
+}
+
+/** QA fixture — no wallet connected, SUP-totals fixed to a single scenario (requestFailed/populated). */
+export function NoWalletSupTotalsStory({
+  scenario,
+}: {
+  scenario: 'populated' | 'loading' | 'requestFailed'
+}) {
+  return <NoWalletStory initialView="content" supTotalsAdapter={fixedProgramSupTotalsAdapter(scenario)} />
+}
+
+/** QA fixture — no wallet connected, leaderboard fixed to a single scenario (loading/error/populated). */
+export function NoWalletLeaderboardStory({
+  scenario,
+}: {
+  scenario: 'populated' | 'loading' | 'requestFailed'
+}) {
+  return <NoWalletStory initialView="leaderboard" leaderboardAdapter={fixedCampaignLeaderboardAdapter(scenario)} />
+}
diff --git a/examples/storybook/src/stories/superfluid-campaign-widget/SuperfluidCampaignWidget.mdx b/examples/storybook/src/stories/superfluid-campaign-widget/SuperfluidCampaignWidget.mdx
new file mode 100644
index 00000000..3115ea54
--- /dev/null
+++ b/examples/storybook/src/stories/superfluid-campaign-widget/SuperfluidCampaignWidget.mdx
@@ -0,0 +1,59 @@
+import { Canvas, Meta } from '@storybook/blocks';
+import * as ShowcaseStories from './SuperfluidCampaignWidget.stories';
+import { DocsCallout, DocsCard, DocsGrid, DocsPage, DocsSection } from '../docs/DocsLayout';
+
+<Meta of={ShowcaseStories} />
+
+<DocsPage
+  eyebrow="Widget Guide"
+  title="SuperfluidCampaignWidget"
+  lead="Displays the Superfluid Ecosystem Rewards campaign: two reward pools with their eligible actions, a leaderboard, and the campaign FAQ. This phase renders against a static mock dataset — no live points/leaderboard API yet."
+>
+  <DocsSection
+    title="Manual wallet showcase"
+    description="Use this story when reviewing the widget in a browser with an injected wallet, to exercise the real connect flow and the embedded CitizenClaimWidget CTAs."
+  >
+    <Canvas of={ShowcaseStories.InjectedWallet} />
+  </DocsSection>
+
+  <DocsSection
+    title="QA coverage"
+    description="Deterministic fixtures for the disconnected (public) and connected views, and the leaderboard view, matching the two approved #127 mockups."
+  >
+    <DocsCard
+      title="Open the QA fixture demo"
+      href="?path=/story/qa-superfluidcampaignwidget-runtime-fixtures--no-wallet-content"
+    >
+      `NoWalletContent` / `NoWalletLeaderboard` match the disconnected mockups exactly (no
+      currentUserEntry, plain "Connect wallet" CTA). `CustodialLocalFixtureContent` /
+      `CustodialLocalFixtureLeaderboard` use a local custodial wallet to exercise the connected
+      view, including the highlighted current-user leaderboard row.
+    </DocsCard>
+  </DocsSection>
+
+  <DocsSection
+    title="Known gaps in this phase"
+    description="Flagged rather than silently worked around — see the plan sub-issue for the follow-up items these map to."
+  >
+    <DocsGrid>
+      <DocsCard title="Activity icon glyphs">
+        `ACTIVITY_ICON_MAP`'s exact icon names (`calendar`, `person-plus`, `megaphone`, `stream`,
+        `hand-coin`) are not yet in `@goodwidget/ui`'s Icon registry. `ActivityIcons` and
+        `ActionCard` substitute the closest already-registered glyph until the registry is
+        extended.
+      </DocsCard>
+      <DocsCard title="Live leaderboard search/pagination">
+        The leaderboard's search box filters the static fixture locally; pagination controls are
+        a disabled placeholder pending a real leaderboard API.
+      </DocsCard>
+    </DocsGrid>
+  </DocsSection>
+
+  <DocsSection title="Workflow guidance" description="Choose the story type based on the job you are trying to do.">
+    <DocsCallout title="Rule of use" tone="info">
+      Use the showcase story to validate the product-facing integration flow (including the
+      embedded CitizenClaimWidget). Use the QA fixtures to compare pixel-for-pixel against the
+      approved #127 mockups, in both the disconnected and connected states.
+    </DocsCallout>
+  </DocsSection>
+</DocsPage>
diff --git a/examples/storybook/src/stories/superfluid-campaign-widget/SuperfluidCampaignWidget.stories.tsx b/examples/storybook/src/stories/superfluid-campaign-widget/SuperfluidCampaignWidget.stories.tsx
new file mode 100644
index 00000000..562f8aad
--- /dev/null
+++ b/examples/storybook/src/stories/superfluid-campaign-widget/SuperfluidCampaignWidget.stories.tsx
@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { SuperfluidCampaignWidget, type SuperfluidCampaignView } from '@goodwidget/superfluid-campaign-widget'
+import { InjectedWalletStory, LiveDataNoWalletStory } from '../helpers/superfluidCampaignWidgetStories'
+import { BRAND_PRESET_OPTIONS, brandPresetOverrides, type BrandPreset } from '../helpers/themeOverridePresets'
+
+interface SuperfluidCampaignWidgetStoryArgs {
+  defaultTheme: 'light' | 'dark'
+  brandPreset: BrandPreset
+  initialView: SuperfluidCampaignView
+}
+
+const meta: Meta<SuperfluidCampaignWidgetStoryArgs> = {
+  title: 'Widgets/SuperfluidCampaignWidget/Showcase',
+  component: SuperfluidCampaignWidget,
+  tags: ['integrator', 'manual', 'showcase'],
+  parameters: { layout: 'padded' },
+  argTypes: {
+    defaultTheme: {
+      control: 'radio',
+      options: ['dark', 'light'],
+      description: "Base theme applied via the widget's own defaultTheme prop.",
+    },
+    brandPreset: {
+      control: 'select',
+      options: BRAND_PRESET_OPTIONS,
+      description: 'Sample host-branding themeOverrides preset.',
+    },
+    initialView: {
+      control: 'radio',
+      options: ['content', 'leaderboard'],
+      description: 'View shown on first render.',
+    },
+  },
+  args: {
+    defaultTheme: 'dark',
+    brandPreset: 'None',
+    initialView: 'content',
+  },
+}
+
+export default meta
+type Story = StoryObj<SuperfluidCampaignWidgetStoryArgs>
+
+export const InjectedWallet: Story = {
+  render: ({ defaultTheme, brandPreset, initialView }) => (
+    <InjectedWalletStory
+      defaultTheme={defaultTheme}
+      themeOverrides={brandPresetOverrides(brandPreset)}
+      initialView={initialView}
+    />
+  ),
+}
+
+export const NoWallet: Story = {
+  render: ({ defaultTheme, brandPreset, initialView }) => (
+    <LiveDataNoWalletStory
+      defaultTheme={defaultTheme}
+      themeOverrides={brandPresetOverrides(brandPreset)}
+      initialView={initialView}
+    />
+  ),
+}
diff --git a/examples/storybook/src/stories/superfluid-campaign-widget/SuperfluidCampaignWidgetQA.stories.tsx b/examples/storybook/src/stories/superfluid-campaign-widget/SuperfluidCampaignWidgetQA.stories.tsx
new file mode 100644
index 00000000..476fb82c
--- /dev/null
+++ b/examples/storybook/src/stories/superfluid-campaign-widget/SuperfluidCampaignWidgetQA.stories.tsx
@@ -0,0 +1,95 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { SuperfluidCampaignWidget } from '@goodwidget/superfluid-campaign-widget'
+import {
+  CustodialAirdropStatusStory,
+  CustodialLocalFixtureStory,
+  LiveDataNoWalletStory,
+  NoWalletLeaderboardStory,
+  NoWalletStory,
+  NoWalletSupTotalsStory,
+} from '../helpers/superfluidCampaignWidgetStories'
+
+const meta: Meta<typeof SuperfluidCampaignWidget> = {
+  title: 'QA/SuperfluidCampaignWidget/Runtime Fixtures',
+  component: SuperfluidCampaignWidget,
+  tags: ['autodocs', 'qa'],
+  parameters: { layout: 'padded' },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const NoWalletContent: Story = {
+  render: () => <NoWalletStory initialView="content" />,
+}
+
+export const NoWalletLeaderboard: Story = {
+  render: () => <NoWalletStory initialView="leaderboard" />,
+}
+
+export const CustodialLocalFixtureContent: Story = {
+  render: () => <CustodialLocalFixtureStory initialView="content" />,
+}
+
+export const CustodialLocalFixtureLeaderboard: Story = {
+  render: () => <CustodialLocalFixtureStory initialView="leaderboard" />,
+}
+
+// Airdrop-status card states — each fixes the live endpoint's response via
+// airdropStatusAdapter so the leaderboard screenshot is deterministic.
+export const AirdropStatusLoading: Story = {
+  render: () => <CustodialAirdropStatusStory scenario="loading" />,
+}
+
+export const AirdropStatusRequestFailed: Story = {
+  render: () => <CustodialAirdropStatusStory scenario="requestFailed" />,
+}
+
+export const AirdropStatusNotWhitelisted: Story = {
+  render: () => <CustodialAirdropStatusStory scenario="notWhitelisted" />,
+}
+
+export const AirdropStatusEligible: Story = {
+  render: () => <CustodialAirdropStatusStory scenario="eligible" />,
+}
+
+// Campaign leaderboard states — each fixes the Points API response via
+// leaderboardAdapter so the leaderboard/tabs screenshot is deterministic.
+export const LeaderboardLoading: Story = {
+  render: () => <NoWalletLeaderboardStory scenario="loading" />,
+}
+
+export const LeaderboardRequestFailed: Story = {
+  render: () => <NoWalletLeaderboardStory scenario="requestFailed" />,
+}
+
+export const LeaderboardPopulated: Story = {
+  render: () => <NoWalletLeaderboardStory scenario="populated" />,
+}
+
+// Unadapted story used with Playwright network routes to verify the real Points
+// API response contract, including per-account event enrichment.
+export const LeaderboardApiContract: Story = {
+  render: () => <LiveDataNoWalletStory initialView="leaderboard" />,
+}
+
+// SUP-totals progress bar states — each fixes the protocol-subgraph response via
+// supTotalsAdapter so the reward-pool progress bar screenshot is deterministic.
+export const SupTotalsRequestFailed: Story = {
+  render: () => <NoWalletSupTotalsStory scenario="requestFailed" />,
+}
+
+export const SupTotalsPopulated: Story = {
+  render: () => <NoWalletSupTotalsStory scenario="populated" />,
+}
+
+// Unadapted story used with a mocked subgraph response to verify that a passed
+// pool address drives both live distribution and current-member figures.
+export const SupTotalsSubgraphContract: Story = {
+  render: () => (
+    <LiveDataNoWalletStory
+      initialView="content"
+      poolAddresses={{ 606: '0x1111111111111111111111111111111111111111' }}
+    />
+  ),
+}
diff --git a/packages/citizen-claim-widget/src/CitizenClaimWidget.tsx b/packages/citizen-claim-widget/src/CitizenClaimWidget.tsx
index 8876c7a2..2d1b9ad4 100644
--- a/packages/citizen-claim-widget/src/CitizenClaimWidget.tsx
+++ b/packages/citizen-claim-widget/src/CitizenClaimWidget.tsx
@@ -27,6 +27,7 @@ import type {
   CitizenClaimWidgetSuccessDetail,
   CitizenClaimWidgetErrorDetail,
   CitizenClaimWidgetEnvironment,
+  CitizenClaimTab,
 } from './widgetRuntimeContract'
 
 // ---------------------------------------------------------------------------
@@ -506,7 +507,6 @@ function CitizenClaimInner({ environment, onClaimSuccess, onClaimError }: Citize
 // ---------------------------------------------------------------------------
 // Public component
 // ---------------------------------------------------------------------------
-type CitizenClaimTab = 'claim' | 'invite-rewards' | 'news-feed'
 /**
  * CitizenClaimWidget — real SDK-backed GoodDollar UBI claim flow.
  *
@@ -529,8 +529,10 @@ export function CitizenClaimWidget({
   defaultTheme = 'dark',
   onClaimSuccess,
   onClaimError,
+  initialTab,
 }: CitizenClaimWidgetProps) {
-  const [activeTab, setActiveTab] = useState<CitizenClaimTab>('claim')
+  // Initial tab only — not synced after mount, matching existing internal-state pattern.
+  const [activeTab, setActiveTab] = useState<CitizenClaimTab>(initialTab ?? 'claim')
 
   return (
     <GoodWidgetProvider
diff --git a/packages/citizen-claim-widget/src/widgetRuntimeContract.ts b/packages/citizen-claim-widget/src/widgetRuntimeContract.ts
index 4abe3c88..119681bd 100644
--- a/packages/citizen-claim-widget/src/widgetRuntimeContract.ts
+++ b/packages/citizen-claim-widget/src/widgetRuntimeContract.ts
@@ -21,6 +21,8 @@ export type CitizenClaimWidgetPrimaryAction =
   | 'switch_chain'
   | 'none'
 
+export type CitizenClaimTab = 'claim' | 'invite-rewards' | 'news-feed'
+
 export interface CitizenClaimWidgetSuccessDetail {
   address: string
   chainId: number
@@ -102,4 +104,6 @@ export interface CitizenClaimWidgetProps {
   config?: GoodWidgetConfig
   /** Starting color scheme. Defaults to 'light'. */
   defaultTheme?: 'light' | 'dark'
+  /** Tab shown on first render. Defaults to 'claim' when omitted. */
+  initialTab?: CitizenClaimTab
 }
diff --git a/packages/core/src/provider.tsx b/packages/core/src/provider.tsx
index 830db105..e511f4ac 100644
--- a/packages/core/src/provider.tsx
+++ b/packages/core/src/provider.tsx
@@ -22,12 +22,14 @@ const DEFAULT_CAPABILITIES: HostCapabilities = {
 
 export interface WalletContextValue extends WalletState {
   connect: () => Promise<void>
+  disconnect: () => Promise<void>
 }
 
 export type HostContextValue = HostState
 
 export interface GoodWidgetContextValue extends GoodWidgetState {
   connect: () => Promise<void>
+  disconnect: () => Promise<void>
 }
 
 export const WalletContext = React.createContext<WalletContextValue>({
@@ -36,6 +38,7 @@ export const WalletContext = React.createContext<WalletContextValue>({
   isConnected: false,
   provider: null,
   connect: async () => {},
+  disconnect: async () => {},
 })
 
 export const HostContext = React.createContext<HostContextValue>({
@@ -51,11 +54,13 @@ export const GoodWidgetContext = React.createContext<GoodWidgetContextValue>({
   host: 'injected',
   capabilities: DEFAULT_CAPABILITIES,
   connect: async () => {},
+  disconnect: async () => {},
 })
 
 export function GoodWidgetProvider({
   provider: explicitProvider,
   connectOverride,
+  disconnectOverride,
   config: authorConfig,
   themeOverrides,
   defaultTheme = 'dark',
@@ -124,9 +129,18 @@ export function GoodWidgetProvider({
     const accounts = (await resolvedProvider.request({
       method: 'eth_requestAccounts',
     })) as string[]
-    if (accounts.length > 0) setAddress(accounts[0])
+    if (accounts.length > 0) {
+      setAddress(accounts[0])
+    }
   }, [connectOverride, resolvedProvider])
 
+  // Wallet session ownership stays with the integrator. Provider/account
+  // updates after the override resolves flow back through the normal EIP-1193
+  // accountsChanged event or a changed provider prop.
+  const disconnect = useCallback(async () => {
+    await disconnectOverride?.()
+  }, [disconnectOverride])
+
   const mergedConfig = useMemo(() => {
     const finalConfig = mergeThemeOverrides(authorConfig, themeOverrides)
     return createGoodWidgetConfig(finalConfig ?? undefined)
@@ -139,8 +153,9 @@ export function GoodWidgetProvider({
       isConnected: address !== null,
       provider: resolvedProvider,
       connect,
+      disconnect,
     }),
-    [address, chainId, resolvedProvider, connect],
+    [address, chainId, resolvedProvider, connect, disconnect],
   )
 
   const hostValue = useMemo<HostContextValue>(() => ({ host, capabilities }), [host, capabilities])
diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
index 8dd9437c..a6f86f3e 100644
--- a/packages/core/src/types.ts
+++ b/packages/core/src/types.ts
@@ -38,6 +38,7 @@ export interface GoodWidgetState extends WalletState {
 export interface GoodWidgetProviderProps {
   provider?: EIP1193Provider
   connectOverride?: () => Promise<void>
+  disconnectOverride?: () => Promise<void>
   config?: GoodWidgetConfig
   themeOverrides?: GoodWidgetThemeOverrides
   defaultTheme?: 'light' | 'dark'
diff --git a/packages/superfluid-campaign-widget/package.json b/packages/superfluid-campaign-widget/package.json
new file mode 100644
index 00000000..28e84af2
--- /dev/null
+++ b/packages/superfluid-campaign-widget/package.json
@@ -0,0 +1,51 @@
+{
+  "name": "@goodwidget/superfluid-campaign-widget",
+  "version": "0.1.0-beta",
+  "description": "GoodWidget for the Superfluid Ecosystem Rewards campaign — campaign header, reward pools, public leaderboard, and FAQ",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./element": {
+      "types": "./dist/element.d.ts",
+      "import": "./dist/element.js",
+      "require": "./dist/element.cjs"
+    },
+    "./register": {
+      "types": "./dist/register.d.ts",
+      "import": "./dist/register.js",
+      "require": "./dist/register.cjs"
+    }
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "eslint src/",
+    "clean": "rm -rf dist .turbo"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "dependencies": {
+    "@goodwidget/citizen-claim-widget": "workspace:*",
+    "@goodwidget/core": "workspace:*",
+    "@goodwidget/embed": "workspace:*",
+    "@goodwidget/ui": "workspace:*",
+    "viem": "^2.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
+    "tsup": "^8.4.0",
+    "typescript": "^5.7.0"
+  }
+}
diff --git a/packages/superfluid-campaign-widget/src/SuperfluidCampaignWidget.tsx b/packages/superfluid-campaign-widget/src/SuperfluidCampaignWidget.tsx
new file mode 100644
index 00000000..a014c64e
--- /dev/null
+++ b/packages/superfluid-campaign-widget/src/SuperfluidCampaignWidget.tsx
@@ -0,0 +1,217 @@
+import React, { useState } from 'react'
+import { GoodWidgetProvider, useWallet } from '@goodwidget/core'
+import type { EIP1193Provider } from '@goodwidget/core'
+import { CitizenClaimWidget } from '@goodwidget/citizen-claim-widget'
+import { Card, Heading, Text, ToastContainer, YStack } from '@goodwidget/ui'
+import { CampaignHeader } from './components/CampaignHeader'
+import { FaqAccordion } from './components/FaqAccordion'
+import { LeaderboardSummary } from './components/LeaderboardSummary'
+import { LeaderboardView } from './components/LeaderboardView'
+import { RewardPoolSection } from './components/RewardPoolSection'
+import { useAirdropStatus } from './hooks/useAirdropStatus'
+import { DEFAULT_CAMPAIGN_MOCK_DATA } from './mockData'
+import type {
+  CampaignActionMockData,
+  SuperfluidCampaignView,
+  SuperfluidCampaignWidgetProps,
+} from './widgetRuntimeContract'
+
+/** Which embedded CitizenClaimWidget tab (if any) is currently open as a CTA overlay. */
+type EmbeddedClaimTab = 'claim' | 'invite-rewards' | null
+
+interface SuperfluidCampaignRuntimeProps {
+  data: SuperfluidCampaignWidgetProps['data']
+  citizenClaimEnvironment: SuperfluidCampaignWidgetProps['citizenClaimEnvironment']
+  initialView: SuperfluidCampaignView
+  poolAddresses?: SuperfluidCampaignWidgetProps['poolAddresses']
+  /** Forwarded to the embedded CitizenClaimWidget so it shares the same provider/config/theme context. */
+  provider?: SuperfluidCampaignWidgetProps['provider']
+  config?: SuperfluidCampaignWidgetProps['config']
+  themeOverrides?: SuperfluidCampaignWidgetProps['themeOverrides']
+  defaultTheme?: SuperfluidCampaignWidgetProps['defaultTheme']
+  hasDisconnectOverride: boolean
+  airdropStatusAdapter?: SuperfluidCampaignWidgetProps['airdropStatusAdapter']
+  leaderboardAdapter?: SuperfluidCampaignWidgetProps['leaderboardAdapter']
+  supTotalsAdapter?: SuperfluidCampaignWidgetProps['supTotalsAdapter']
+}
+
+/**
+ * Routes a CampaignActionMockData CTA press to its handler:
+ *   - claim-widget-claim / claim-widget-invite → open the embedded CitizenClaimWidget
+ *     on the matching tab
+ *   - external-link → open the Flow State / Gardens URL in a new tab, mirroring the
+ *     window.open(url, '_blank', 'noopener,noreferrer') pattern already used for
+ *     external verification links in citizen-claim-widget/ai-credits-widget
+ */
+function handleActionCta(
+  action: CampaignActionMockData,
+  openClaimTab: (tab: EmbeddedClaimTab) => void,
+) {
+  switch (action.ctaKind) {
+    case 'claim-widget-claim':
+      openClaimTab('claim')
+      return
+    case 'claim-widget-invite':
+      openClaimTab('invite-rewards')
+      return
+    case 'external-link':
+      if (action.href) {
+        window.open(action.href, '_blank', 'noopener,noreferrer')
+      }
+      return
+  }
+}
+
+function SuperfluidCampaignRuntime({
+  data,
+  citizenClaimEnvironment,
+  initialView,
+  poolAddresses,
+  provider,
+  config,
+  themeOverrides,
+  defaultTheme,
+  hasDisconnectOverride,
+  airdropStatusAdapter,
+  leaderboardAdapter,
+  supTotalsAdapter,
+}: SuperfluidCampaignRuntimeProps) {
+  const { isConnected, connect, disconnect, address } = useWallet()
+  const [view, setView] = useState<SuperfluidCampaignView>(initialView)
+  const [embeddedClaimTab, setEmbeddedClaimTab] = useState<EmbeddedClaimTab>(null)
+
+  // Keyed on `address` alone (see useAirdropStatus) so this fires on connect, on
+  // load when already connected, and on address change — not on every render.
+  // airdropStatusAdapter, when supplied, replaces the live fetch with a fixed
+  // result for deterministic Storybook/Playwright fixtures.
+  const airdropStatus = useAirdropStatus(address, airdropStatusAdapter)
+
+  const campaignData = data ?? DEFAULT_CAMPAIGN_MOCK_DATA
+
+  if (embeddedClaimTab) {
+    return (
+      <YStack gap="$3" width="100%">
+        <CitizenClaimWidget
+          provider={provider}
+          config={config}
+          themeOverrides={themeOverrides}
+          defaultTheme={defaultTheme}
+          environment={citizenClaimEnvironment}
+          initialTab={embeddedClaimTab}
+        />
+        <Text
+          variant="caption"
+          tone="secondary"
+          center
+          onPress={() => setEmbeddedClaimTab(null)}
+          cursor="pointer"
+        >
+          Back to campaign
+        </Text>
+      </YStack>
+    )
+  }
+
+  if (view === 'leaderboard') {
+    return (
+      <LeaderboardView
+        seasonLabel={campaignData.seasonLabel}
+        pools={campaignData.pools}
+        address={address}
+        leaderboardAdapter={leaderboardAdapter}
+        isConnected={isConnected}
+        onConnect={connect}
+        onDisconnect={hasDisconnectOverride ? disconnect : undefined}
+        onClose={() => setView('content')}
+        airdropStatus={airdropStatus}
+      />
+    )
+  }
+
+  return (
+    <YStack gap="$5" width="100%" padding="$5" style={{ boxSizing: 'border-box' }}>
+      {/* Disconnected-state CTA per #127 acceptance criteria now lives in the header's
+          top-right slot (see CampaignHeader) instead of its own row here. */}
+      <CampaignHeader
+        data={campaignData}
+        address={address}
+        isConnected={isConnected}
+        onConnect={connect}
+        onDisconnect={hasDisconnectOverride ? disconnect : undefined}
+      />
+
+      <LeaderboardSummary
+        leaderboard={campaignData.leaderboard}
+        onViewLeaderboard={() => setView('leaderboard')}
+      />
+
+      <YStack gap="$1">
+        <Heading level={4}>How to participate</Heading>
+        <Text tone="soft">
+          Complete eligible actions to earn points. Your SUP share is based on your points. Use
+          Claim SUP rewards to create or update your rewards stream.
+        </Text>
+      </YStack>
+
+      {/* Pools always stack vertically at every breakpoint — no responsive change here. */}
+      <YStack gap="$5" width="100%">
+        {campaignData.pools.map((pool) => (
+          <RewardPoolSection
+            key={pool.id}
+            pool={pool}
+            poolAddress={poolAddresses?.[pool.campaignId]}
+            onPressActionCta={(action) => handleActionCta(action, setEmbeddedClaimTab)}
+            supTotalsAdapter={supTotalsAdapter}
+          />
+        ))}
+      </YStack>
+
+      <FaqAccordion faq={campaignData.faq} />
+    </YStack>
+  )
+}
+
+export function SuperfluidCampaignWidget({
+  provider,
+  connectOverride,
+  disconnectOverride,
+  themeOverrides,
+  config,
+  defaultTheme = 'dark',
+  data,
+  citizenClaimEnvironment = 'production',
+  initialView = 'content',
+  poolAddresses,
+  airdropStatusAdapter,
+  leaderboardAdapter,
+  supTotalsAdapter,
+}: SuperfluidCampaignWidgetProps) {
+  return (
+    <GoodWidgetProvider
+      provider={provider as EIP1193Provider | undefined}
+      connectOverride={connectOverride}
+      disconnectOverride={disconnectOverride}
+      config={config}
+      themeOverrides={themeOverrides}
+      defaultTheme={defaultTheme}
+    >
+      <Card padding={0} backgroundColor="$backgroundDark" width="100%">
+        <SuperfluidCampaignRuntime
+          data={data}
+          citizenClaimEnvironment={citizenClaimEnvironment}
+          initialView={initialView}
+          poolAddresses={poolAddresses}
+          provider={provider}
+          config={config}
+          themeOverrides={themeOverrides}
+          defaultTheme={defaultTheme}
+          hasDisconnectOverride={Boolean(disconnectOverride)}
+          airdropStatusAdapter={airdropStatusAdapter}
+          leaderboardAdapter={leaderboardAdapter}
+          supTotalsAdapter={supTotalsAdapter}
+        />
+      </Card>
+      <ToastContainer />
+    </GoodWidgetProvider>
+  )
+}
diff --git a/packages/superfluid-campaign-widget/src/components/ActionCard.tsx b/packages/superfluid-campaign-widget/src/components/ActionCard.tsx
new file mode 100644
index 00000000..39a8c18a
--- /dev/null
+++ b/packages/superfluid-campaign-widget/src/components/ActionCard.tsx
@@ -0,0 +1,110 @@
+import React from 'react'
+import { Badge, BadgeText, Button, ButtonText, Card, Text, XStack, YStack } from '@goodwidget/ui'
+import { ACTIVITY_ICON_MAP } from '../widgetRuntimeContract'
+import type { CampaignActionMockData } from '../widgetRuntimeContract'
+import { ACTIVITY_ICON_COMPONENT, resolveActivityIconColorToken } from './activityIconComponents'
+import { compactButtonProps } from './shared/styles'
+
+interface ActionCardProps {
+  action: CampaignActionMockData
+  onPressCta: (action: CampaignActionMockData) => void
+}
+
+/**
+ * A single reward-pool action row.
+ *
+ * At desktop widths, row 1 contains the title/source and row 2 keeps the icon,
+ * description, and action footer side by side. At the shared $sm breakpoint
+ * (480px and below), the icon joins the title row while row 2 becomes a column:
+ * description first, then the unchanged points-pill/button footer. This gives
+ * the longest labels enough room instead of clipping them inside the card.
+ *
+ * The whole card is a click target for the same action as the CTA button
+ * (mouse and keyboard), while the CTA button stays visible rather than being
+ * hidden behind an invisible overlay. The button's own onPress stops
+ * propagation so a direct click on it doesn't also fire the card's handler.
+ */
+export function ActionCard({ action, onPressCta }: ActionCardProps) {
+  const iconSpec = ACTIVITY_ICON_MAP[action.activity]
+  const ActivityIconComponent = ACTIVITY_ICON_COMPONENT[action.activity]
+  const iconColor = resolveActivityIconColorToken(iconSpec.colorVariant, true)
+
+  const handleCardActivate = () => onPressCta(action)
+
+  return (
+    <Card
+      flexDirection="column"
+      gap="$3"
+      $sm={{ gap: '$2', padding: '$3' }}
+      onPress={handleCardActivate}
+      role="button"
+      tabIndex={0}
+      cursor="pointer"
+      aria-label={`${action.ctaLabel}: ${action.title}`}
+      onKeyDown={(e: React.KeyboardEvent) => {
+        // Space/Enter activate the card the same way native buttons do, matching
+        // the Accordion header's keyboard pattern elsewhere in this package.
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault()
+          handleCardActivate()
+        }
+      }}
+    >
+      {/* On mobile the icon moves beside a dedicated title/source column.
+          Keeping the copy in its own flexible column lets long ecosystem
+          titles wrap without pushing the icon onto a line by itself. */}
+      <XStack gap="$2" alignItems="flex-start">
+        <XStack display="none" $sm={{ display: 'flex' }} flexShrink={0}>
+          <ActivityIconComponent size={24} color={iconColor} />
+        </XStack>
+        <YStack gap="$1" flex={1} minWidth={0}>
+          <Text fontWeight="700">{action.title}</Text>
+          <Text variant="caption" tone="secondary">
+            {action.source}
+          </Text>
+        </YStack>
+      </XStack>
+
+      {/* The desktop action row switches to a vertical content/footer flow at
+          $sm. Button and badge sizing stay unchanged; only their placement
+          changes so neither can be squeezed or clipped by the description. */}
+      <XStack
+        data-testid={`ActionCard-layout-${action.activity}`}
+        gap="$3"
+        alignItems="flex-start"
+        $sm={{ flexDirection: 'column', alignItems: 'stretch', gap: '$2' }}
+      >
+        <XStack flexShrink={0} $sm={{ display: 'none' }}>
+          <ActivityIconComponent size={24} color={iconColor} />
+        </XStack>
+        <Text tone="soft" flex={1}>
+          {action.description}
+        </Text>
+        <YStack
+          gap="$2"
+          alignItems="flex-end"
+          flexShrink={0}
+          $sm={{ alignItems: 'center', alignSelf: 'stretch' }}
+        >
+          <Badge type="info">
+            <BadgeText>{action.pointsLabel}</BadgeText>
+          </Badge>
+          <Button
+            size="sm"
+            {...compactButtonProps}
+            $sm={{ width: '100%' }}
+            onPress={(e: { stopPropagation: () => void }) => {
+              // Card itself is now a click target for the same action (see Card's
+              // onPress above) — stop propagation here so this direct button click
+              // doesn't also bubble up and fire the card's handler a second time.
+              e.stopPropagation()
+              handleCardActivate()
+            }}
+          >
+            <ButtonText>{action.ctaLabel}</ButtonText>
+          </Button>
+        </YStack>
+      </XStack>
+    </Card>
+  )
+}
diff --git a/packages/superfluid-campaign-widget/src/components/ActivityIcons.tsx b/packages/superfluid-campaign-widget/src/components/ActivityIcons.tsx
new file mode 100644
index 00000000..ad812f46
--- /dev/null
+++ b/packages/superfluid-campaign-widget/src/components/ActivityIcons.tsx
@@ -0,0 +1,44 @@
+import React from 'react'
+import { XStack } from '@goodwidget/ui'
+import { ACTIVITY_ICON_MAP } from '../widgetRuntimeContract'
+import type { ActivityType } from '../widgetRuntimeContract'
+import { ACTIVITY_ICON_COMPONENT, resolveActivityIconColorToken } from './activityIconComponents'
+
+interface ActivityIconsProps {
+  /** Activities the row's owner has completed — drives the done/not-done glyph state. */
+  completedActivities: ActivityType[]
+  size?: 'xs' | 'sm'
+}
+
+/** Maps the ActivityIcons `size` prop to the pixel size lucide icons expect. */
+const ICON_PX: Record<'xs' | 'sm', number> = { xs: 16, sm: 20 }
+
+/**
+ * Renders the six fixed activity glyphs (order matches ACTIVITY_ICON_MAP)
+ * for a leaderboard row, dimming any activity absent from completedActivities.
+ * Desktop keeps all six inline; below $gtMd they wrap to a second line
+ * within the cell instead of truncating (see LeaderboardRow's cell wrapper).
+ */
+export function ActivityIcons({ completedActivities, size = 'sm' }: ActivityIconsProps) {
+  const completedSet = new Set(completedActivities)
+
+  return (
+    <XStack gap="$2" flexWrap="wrap" alignItems="center">
+      {Object.values(ACTIVITY_ICON_MAP).map((spec) => {
+        const isDone = completedSet.has(spec.activity)
+        const ActivityIconComponent = ACTIVITY_ICON_COMPONENT[spec.activity]
+        const color = resolveActivityIconColorToken(spec.colorVariant, isDone)
+
+        return (
+          <XStack
+            key={spec.activity}
+            opacity={isDone ? 1 : 0.35}
+            aria-label={`${spec.label}: ${isDone ? 'done' : 'not done'}`}
+          >
+            <ActivityIconComponent size={ICON_PX[size]} color={color} />
+          </XStack>
+        )
+      })}
+    </XStack>
+  )
+}
diff --git a/packages/superfluid-campaign-widget/src/components/CampaignHeader.tsx b/packages/superfluid-campaign-widget/src/components/CampaignHeader.tsx
new file mode 100644
index 00000000..33d5c935
--- /dev/null
+++ b/packages/superfluid-campaign-widget/src/components/CampaignHeader.tsx
@@ -0,0 +1,95 @@
+import React from 'react'
+import { Badge, BadgeText, Button, ButtonText, Heading, Text, XStack, YStack } from '@goodwidget/ui'
+import type { CampaignMockData } from '../widgetRuntimeContract'
+import { ConnectWalletPrompt } from './ConnectWalletPrompt'
+import { compactButtonProps } from './shared/styles'
+import { WalletChip } from './shared/WalletChip'
+
+/** claim.superfluid.org is the Superfluid-operated claim app — always opened in a new tab, never embedded. */
+const SUPERFLUID_CLAIM_APP_URL = 'https://claim.superfluid.org/'
+
+interface CampaignHeaderProps {
+  data: Pick<
+    CampaignMockData,
+    'seasonLabel' | 'title' | 'description' | 'supAllocatedLabel' | 'endsLabel'
+  >
+  address: string | null
+  isConnected: boolean
+  onConnect: () => void
+  onDisconnect?: () => Promise<void>
+}
+
+/**
+ * Top-of-page header: "Superfluid" wordmark + season badge, top-right slot,
+ * title, description, and the two info pills. The top-right slot shows the
+ * "Connect wallet" CTA while disconnected, per #127 follow-up, and the same
+ * WalletChip (status dot + truncated address + dropdown chevron, opening a
+ * Disconnect menu) used on LeaderboardView's header once connected — there
+ * is no close affordance here since this screen has nothing to close.
+ */
+export function CampaignHeader({
+  data,
+  address,
+  isConnected,
+  onConnect,
+  onDisconnect,
+}: CampaignHeaderProps) {
+  return (
+    <YStack gap="$4" width="100%">
+      {/* Wraps below the wordmark/badge group on narrow viewports instead of staying
+          rigid — without this, the disconnected-state CTA (or the connected-state wave
+          art) is pushed past the card's right edge and silently clipped by the card's
+          own rounded-corner overflow at sub-480px widths. */}
+      <XStack
+        justifyContent="space-between"
+        alignItems="flex-start"
+        width="100%"
+        gap="$2"
+        flexWrap="wrap"
+      >
+        <XStack gap="$2" alignItems="center">
+          <Heading level={5}>Superfluid</Heading>
+          <Badge type="info">
+            <BadgeText>{data.seasonLabel}</BadgeText>
+          </Badge>
+        </XStack>
+
+        {isConnected ? (
+          <WalletChip address={address} onDisconnect={onDisconnect} />
+        ) : (
+          <ConnectWalletPrompt onConnect={onConnect} />
+        )}
+      </XStack>
+
+      <YStack gap="$2">
+        {/* Level 1 dominates the first screen on phone-width viewports, so it steps down
+            to the level-3 scale there while staying the largest text on the page. */}
+        <Heading level={1} $sm={{ fontSize: '$7', lineHeight: '$7', letterSpacing: '$7' }}>
+          {data.title}
+        </Heading>
+        <Text tone="soft">{data.description}</Text>
+      </YStack>
+
+      <XStack gap="$2" alignItems="center" flexWrap="wrap" justifyContent="space-between">
+        <XStack gap="$2" flexWrap="wrap">
+          <Badge type="default">
+            <BadgeText>{data.supAllocatedLabel}</BadgeText>
+          </Badge>
+          <Badge type="default">
+            <BadgeText>{data.endsLabel}</BadgeText>
+          </Badge>
+        </XStack>
+
+        {/* Prominent claim CTA, always blue (Button's default 'primary' variant), opens
+            the Superfluid-operated claim app in a new tab — never embedded in the widget. */}
+        <Button
+          size="sm"
+          {...compactButtonProps}
+          onPress={() => window.open(SUPERFLUID_CLAIM_APP_URL, '_blank', 'noopener,noreferrer')}
+        >
+          <ButtonText>Claim SUP rewards</ButtonText>
+        </Button>
+      </XStack>
+    </YStack>
+  )
+}
diff --git a/packages/superfluid-campaign-widget/src/components/ConnectWalletPrompt.tsx b/packages/superfluid-campaign-widget/src/components/ConnectWalletPrompt.tsx
new file mode 100644
index 00000000..c1cc7b57
--- /dev/null
+++ b/packages/superfluid-campaign-widget/src/components/ConnectWalletPrompt.tsx
@@ -0,0 +1,23 @@
+import React from 'react'
+import { Button, ButtonText } from '@goodwidget/ui'
+import { compactButtonProps } from './shared/styles'
+
+interface ConnectWalletPromptProps {
+  onConnect: () => void
+}
+
+/** Disconnected-state header CTA — replaced by a wallet chip once connected. */
+export function ConnectWalletPrompt({ onConnect }: ConnectWalletPromptProps) {
+  return (
+    // flexShrink={0} keeps this button at its true natural (min-content) size for
+    // both the header row's flexWrap line-fit decision and its rendered width —
+    // unlike flexBasis={0}, which let the row's flex algorithm shrink the button
+    // toward zero width and visibly break its "Connect wallet" label, since the
+    // Button's own rounded-corner clipping disables the browser's automatic
+    // minimum-size protection. The button's label doesn't reflow, so its natural
+    // size is also the correct minimum: wrap only when that size doesn't fit.
+    <Button size="sm" {...compactButtonProps} flexShrink={0} onPress={onConnect}>
+      <ButtonText>Connect wallet</ButtonText>
+    </Button>
+  )
+}
diff --git a/packages/superfluid-campaign-widget/src/components/FaqAccordion.tsx b/packages/superfluid-campaign-widget/src/components/FaqAccordion.tsx
new file mode 100644
index 00000000..8e3aea50
--- /dev/null
+++ b/packages/superfluid-campaign-widget/src/components/FaqAccordion.tsx
@@ -0,0 +1,34 @@
+import React from 'react'
+import { Accordion, Text } from '@goodwidget/ui'
+import type { FaqItemMockData } from '../widgetRuntimeContract'
+
+interface FaqAccordionProps {
+  faq: FaqItemMockData[]
+}
+
+/**
+ * FAQ is one top-level collapsible ("FAQ") rather than N top-level accordion
+ * items — this keeps the collapsed page short on phone. Opening it reveals an
+ * inner Accordion with one item per question, each toggling independently.
+ */
+export function FaqAccordion({ faq }: FaqAccordionProps) {
+  return (
+    <Accordion
+      items={[
+        {
+          id: 'faq-section',
+          title: 'FAQ',
+          content: (
+            <Accordion
+              items={faq.map((item, index) => ({
+                id: `faq-${index}`,
+                title: item.question,
+                content: <Text tone="soft">{item.answer}</Text>,
+              }))}
+            />
+          ),
+        },
+      ]}
+    />
+  )
+}
diff --git a/packages/superfluid-campaign-widget/src/components/LeaderboardRow.tsx b/packages/superfluid-campaign-widget/src/components/LeaderboardRow.tsx
new file mode 100644
index 00000000..f062504a
--- /dev/null
+++ b/packages/superfluid-campaign-widget/src/components/LeaderboardRow.tsx
@@ -0,0 +1,65 @@
+import React from 'react'
+import { Badge, BadgeText, Card, Text, XStack, YStack } from '@goodwidget/ui'
+import type { LeaderboardEntryMockData } from '../widgetRuntimeContract'
+import { ActivityIcons } from './ActivityIcons'
+import { truncateAddress } from './shared/styles'
+
+interface LeaderboardRowProps {
+  entry: LeaderboardEntryMockData
+  /** Drives the highlighted/bordered treatment for the connected user's own row. */
+  isCurrentUser?: boolean
+}
+
+/**
+ * One leaderboard row: rank + address/ENS, points, and the six activity icons.
+ *
+ * Desktop: four inline table-row columns.
+ * Below $gtMd (<768px): the activity-icons cell wraps to a second line instead
+ * of truncating (ActivityIcons itself already wraps via flexWrap).
+ * Below $gtSm (<480px): the whole row becomes a stacked card, same four data
+ * groups in the same order (rank+address, then points, then activities).
+ */
+export function LeaderboardRow({ entry, isCurrentUser = false }: LeaderboardRowProps) {
+  const addressLabel = entry.ensName ?? truncateAddress(entry.address)
+
+  return (
+    <Card
+      flexDirection="row"
+      alignItems="center"
+      justifyContent="space-between"
+      gap="$3"
+      padding="$3"
+      borderColor={isCurrentUser ? '$primary' : '$borderColor'}
+      borderWidth={isCurrentUser ? 2 : 1}
+      backgroundColor={isCurrentUser ? '$backgroundHover' : '$background'}
+      $sm={{ flexDirection: 'column', alignItems: 'stretch', gap: '$2' }}
+    >
+      <XStack gap="$2" alignItems="center" flex={2} minWidth={0}>
+        <Text variant="label" width={32}>
+          {entry.rank}
+        </Text>
+        <Text truncate flex={1}>
+          {addressLabel}
+        </Text>
+        {isCurrentUser && (
+          <Badge type="info">
+            <BadgeText>You</BadgeText>
+          </Badge>
+        )}
+      </XStack>
+
+      <YStack flex={1} $sm={{ width: '100%' }}>
+        <Text fontWeight="600">{entry.points.toLocaleString()} pts</Text>
+      </YStack>
+
+      {/* Omitted for rows sourced from the live Points API, which has no
+          per-activity breakdown — hide the column rather than show misleading
+          all-dimmed icons. */}
+      {entry.completedActivities && (
+        <XStack flex={2} $md={{ flexWrap: 'wrap' }} $sm={{ width: '100%' }}>
+          <ActivityIcons completedActivities={entry.completedActivities} />
+        </XStack>
+      )}
+    </Card>
+  )
+}
diff --git a/packages/superfluid-campaign-widget/src/components/LeaderboardSummary.tsx b/packages/superfluid-campaign-widget/src/components/LeaderboardSummary.tsx
new file mode 100644
index 00000000..212ba78d
--- /dev/null
+++ b/packages/superfluid-campaign-widget/src/components/LeaderboardSummary.tsx
@@ -0,0 +1,54 @@
+import React from 'react'
+import { Button, ButtonText, Card, Heading, Icon, ProgressBar, Text, XStack, YStack } from '@goodwidget/ui'
+import type { LeaderboardMockData } from '../widgetRuntimeContract'
+import { compactButtonProps } from './shared/styles'
+
+interface LeaderboardSummaryProps {
+  leaderboard: LeaderboardMockData
+  onViewLeaderboard: () => void
+}
+
+/**
+ * Collapsed leaderboard summary card shown on the content page: trophy +
+ * heading + subtext on the left, "View Leaderboard" button on the right,
+ * then a green SUP-progress bar and participant/last-updated captions.
+ */
+export function LeaderboardSummary({ leaderboard, onViewLeaderboard }: LeaderboardSummaryProps) {
+  const progressLabel = `SUP allocated ${leaderboard.supDistributed.toLocaleString()} / ${leaderboard.supTotal.toLocaleString()} SUP`
+
+  return (
+    <Card gap="$4">
+      <XStack justifyContent="space-between" alignItems="center" gap="$3" flexWrap="wrap">
+        <XStack gap="$3" alignItems="center">
+          <Icon name="party-popper" size="lg" color="primary" />
+          <YStack gap="$1">
+            <Heading level={4}>Leaderboard</Heading>
+            <Text variant="caption" tone="secondary">
+              Top contributors
+            </Text>
+          </YStack>
+        </XStack>
+        <Button size="sm" {...compactButtonProps} onPress={onViewLeaderboard}>
+          <ButtonText>View Leaderboard</ButtonText>
+        </Button>
+      </XStack>
+
+      <ProgressBar
+        value={leaderboard.supDistributed}
+        max={leaderboard.supTotal}
+        label={progressLabel}
+        variant="success"
+        hidePercentageOnMobile
+      />
+
+      <XStack justifyContent="space-between" alignItems="center" flexWrap="wrap" gap="$2">
+        <Text variant="caption" tone="secondary">
+          {leaderboard.totalParticipants.toLocaleString()} participants
+        </Text>
+        <Text variant="caption" tone="secondary">
+          {leaderboard.lastUpdatedLabel}
+        </Text>
+      </XStack>
+    </Card>
+  )
+}
diff --git a/packages/superfluid-campaign-widget/src/components/LeaderboardView.tsx b/packages/superfluid-campaign-widget/src/components/LeaderboardView.tsx
new file mode 100644
index 00000000..45b4c7f9
--- /dev/null
+++ b/packages/superfluid-campaign-widget/src/components/LeaderboardView.tsx
@@ -0,0 +1,308 @@
+import React, { useState } from 'react'
+import {
+  Badge,
+  BadgeText,
+  Button,
+  ButtonText,
+  Card,
+  Heading,
+  Icon,
+  Input,
+  Text,
+  WidgetTabs,
+  XStack,
+  YStack,
+} from '@goodwidget/ui'
+import type { AirdropStatus } from '../hooks/useAirdropStatus'
+import type {
+  CampaignLeaderboardAdapter,
+  CampaignPointsAccount,
+  CampaignPointsPagination,
+} from '../hooks/useCampaignLeaderboard'
+import { useCampaignLeaderboard } from '../hooks/useCampaignLeaderboard'
+import type { CampaignPoolMockData, LeaderboardEntryMockData } from '../widgetRuntimeContract'
+import { LeaderboardRow } from './LeaderboardRow'
+import { compactButtonProps, truncateAddress } from './shared/styles'
+import { WalletChip } from './shared/WalletChip'
+
+interface LeaderboardViewProps {
+  /** Matches the "SEASON N" badge shown next to the wordmark on the content view's header. */
+  seasonLabel: string
+  /** #127's two fixed reward pools, one leaderboard tab each. */
+  pools: CampaignPoolMockData[]
+  address: string | null
+  leaderboardAdapter?: CampaignLeaderboardAdapter
+  isConnected: boolean
+  onConnect: () => void
+  onDisconnect?: () => Promise<void>
+  onClose: () => void
+  airdropStatus: { status: AirdropStatus | null; isLoading: boolean; error: string | null }
+}
+
+/**
+ * Converts one campaign's ranked accounts page into the row shape LeaderboardRow
+ * expects. Rank is derived from the page offset because the Points API returns
+ * accounts pre-sorted by totalPoints but has no rank field of its own.
+ */
+function toLeaderboardEntries(
+  accounts: CampaignPointsAccount[],
+  pagination: CampaignPointsPagination | undefined,
+): LeaderboardEntryMockData[] {
+  const rankOffset = pagination ? (pagination.page - 1) * pagination.limit : 0
+  return accounts.map((account, index) => ({
+    rank: rankOffset + index + 1,
+    address: account.account,
+    points: account.totalPoints,
+    completedActivities: account.completedActivities,
+  }))
+}
+
+/**
+ * Full leaderboard view — one tab per campaign pool (GoodDollar actions /
+ * Ecosystem actions), each backed by its own live Superfluid Points
+ * API fetch via useCampaignLeaderboard. The hook is called a fixed number of
+ * times, once per pool in prop order, rather than in a loop over `pools`,
+ * since React requires the same hooks in the same order on every render and
+ * #127's two pools are a fixed structural constant.
+ *
+ * Search is a local filter over the active tab's fetched page only because the
+ * API has no server-side search endpoint. Pages are intentionally small: each
+ * account is enriched with its own event history to derive activity icons.
+ */
+export function LeaderboardView({
+  seasonLabel,
+  pools,
+  address,
+  leaderboardAdapter,
+  isConnected,
+  onConnect,
+  onDisconnect,
+  onClose,
+  airdropStatus,
+}: LeaderboardViewProps) {
+  const [searchQuery, setSearchQuery] = useState('')
+  const [activeCampaignTab, setActiveCampaignTab] = useState<string>(pools[0]?.id ?? '')
+  const [pageByPoolId, setPageByPoolId] = useState<Record<string, number>>({})
+
+  const firstPool = pools[0]
+  const secondPool = pools[1]
+  const firstPoolResult = useCampaignLeaderboard(
+    firstPool?.campaignId ?? 0,
+    firstPool?.actions ?? [],
+    firstPool ? (pageByPoolId[firstPool.id] ?? 1) : 1,
+    Boolean(firstPool && activeCampaignTab === firstPool.id),
+    leaderboardAdapter,
+  )
+  const secondPoolResult = useCampaignLeaderboard(
+    secondPool?.campaignId ?? 0,
+    secondPool?.actions ?? [],
+    secondPool ? (pageByPoolId[secondPool.id] ?? 1) : 1,
+    Boolean(secondPool && activeCampaignTab === secondPool.id),
+    leaderboardAdapter,
+  )
+  const resultByPoolId: Record<string, typeof firstPoolResult> = {}
+  if (pools[0]) resultByPoolId[pools[0].id] = firstPoolResult
+  if (pools[1]) resultByPoolId[pools[1].id] = secondPoolResult
+
+  const activePool = pools.find((pool) => pool.id === activeCampaignTab) ?? pools[0]
+  const activeResult = activePool ? resultByPoolId[activePool.id] : undefined
+  const activePagination = activeResult?.data?.pagination
+  const rankedEntries = toLeaderboardEntries(
+    activeResult?.data?.accounts ?? [],
+    activePagination,
+  )
+
+  const currentUserEntry =
+    isConnected && address
+      ? (rankedEntries.find((entry) => entry.address.toLowerCase() === address.toLowerCase()) ??
+        null)
+      : null
+
+  const matchesQuery = (entry: LeaderboardEntryMockData) => {
+    if (!searchQuery.trim()) return true
+    return entry.address.toLowerCase().includes(searchQuery.trim().toLowerCase())
+  }
+
+  const visibleRows = rankedEntries.filter(matchesQuery)
+  const setActivePage = (page: number) => {
+    if (!activePool) return
+    setPageByPoolId((current) => ({ ...current, [activePool.id]: page }))
+  }
+
+  return (
+    <YStack gap="$5" width="100%" padding="$5" style={{ boxSizing: 'border-box' }}>
+      {/* The close button is kept as its own flex item in a row that never wraps
+          (alignItems="flex-start" pins it to the top), so it always stays top-right —
+          only the inner wordmark/badge + wallet CTA group wraps to its own line
+          below when it doesn't fit. Without this split, the close button used to
+          wrap down together with the CTA since both lived inside one flex item. */}
+      <XStack justifyContent="space-between" alignItems="flex-start" width="100%" gap="$2">
+        <XStack
+          flexWrap="wrap"
+          justifyContent="space-between"
+          alignItems="center"
+          gap="$2"
+          flex={1}
+        >
+          <XStack gap="$2" alignItems="center">
+            <Heading level={5}>Superfluid</Heading>
+            <Badge type="info">
+              <BadgeText>{seasonLabel}</BadgeText>
+            </Badge>
+          </XStack>
+          {isConnected ? (
+            <WalletChip address={address} onDisconnect={onDisconnect} />
+          ) : (
+            <Button size="sm" {...compactButtonProps} onPress={onConnect}>
+              <ButtonText>Connect wallet</ButtonText>
+            </Button>
+          )}
+        </XStack>
+        <Button
+          size="sm"
+          {...compactButtonProps}
+          variant="ghost"
+          iconSize="sm"
+          flexShrink={0}
+          onPress={onClose}
+          aria-label="Close leaderboard"
+        >
+          <Icon name="x" size="sm" />
+        </Button>
+      </XStack>
+
+      <YStack gap="$1">
+        <Heading level={2}>Leaderboard</Heading>
+        <Text tone="soft">See how you rank against other campaign participants.</Text>
+      </YStack>
+
+      <WidgetTabs
+        withConnectionStatus={false}
+        tabs={pools.map((pool) => ({ id: pool.id, label: pool.label }))}
+        activeTab={activePool?.id ?? ''}
+        onTabChange={setActiveCampaignTab}
+      />
+
+      {isConnected && currentUserEntry && (
+        <Card gap="$3">
+          <XStack
+            justifyContent="space-between"
+            alignItems="center"
+            flexWrap="wrap"
+            gap="$2"
+            $sm={{ flexDirection: 'column', alignItems: 'stretch' }}
+          >
+            <XStack gap="$2" alignItems="center">
+              <Text variant="label">Your position</Text>
+              <Text fontWeight="700">#{currentUserEntry.rank}</Text>
+              <Text>{truncateAddress(currentUserEntry.address)}</Text>
+              <Badge type="info">
+                <BadgeText>You</BadgeText>
+              </Badge>
+            </XStack>
+            <Text variant="label">Your points: {currentUserEntry.points.toLocaleString()}</Text>
+          </XStack>
+        </Card>
+      )}
+
+      {/*
+        Live airdrop-eligibility check against the connected wallet. Deliberately
+        kept separate from the "Your position" points card above: the airdrop
+        endpoint reports claim/invite eligibility, not the campaign points total
+        (which comes from the live Points API leaderboard fetch above — see
+        useCampaignLeaderboard). Don't merge the two into one "points" figure.
+      */}
+      {isConnected && (
+        <Card gap="$2">
+          <Text variant="label">Airdrop status</Text>
+          {airdropStatus.isLoading && (
+            <Text tone="soft">Checking your Superfluid airdrop status...</Text>
+          )}
+          {airdropStatus.error && <Text color="$error">{airdropStatus.error}</Text>}
+          {!airdropStatus.isLoading && !airdropStatus.error && airdropStatus.status && (
+            <Text tone="soft">
+              {airdropStatus.status.error === 'not whitelisted'
+                ? 'Not yet whitelisted for the SUP airdrop.'
+                : (airdropStatus.status.error ?? 'Eligible for the SUP airdrop.')}
+            </Text>
+          )}
+          {airdropStatus.status?.walletData && (
+            <XStack gap="$3">
+              <Text variant="caption" tone="secondary">
+                Claims: {airdropStatus.status.walletData.claims}
+              </Text>
+              <Text variant="caption" tone="secondary">
+                Invites: {airdropStatus.status.walletData.invites}
+              </Text>
+            </XStack>
+          )}
+        </Card>
+      )}
+
+      <Input
+        placeholder="Search by wallet address"
+        value={searchQuery}
+        onChangeText={setSearchQuery}
+      />
+
+      {/* supDistributed/supTotal have no live source (Points API gap, reported
+          separately) — totalParticipants below is the live per-tab count. */}
+      {activeResult?.data && (
+        <Text variant="caption" tone="secondary">
+          Total participants: {activeResult.data.summary.memberCount.toLocaleString()}
+        </Text>
+      )}
+
+      {activeResult?.isLoading && <Text tone="soft">Loading leaderboard...</Text>}
+      {activeResult?.error && <Text color="$error">{activeResult.error}</Text>}
+
+      {!activeResult?.isLoading && !activeResult?.error && (
+        <YStack gap="$2" width="100%">
+          {visibleRows.map((entry) => (
+            <LeaderboardRow
+              key={entry.address}
+              entry={entry}
+              isCurrentUser={entry.address === currentUserEntry?.address}
+            />
+          ))}
+        </YStack>
+      )}
+
+      <YStack gap="$2" alignItems="center">
+        <Text variant="caption" tone="secondary">
+          Points update every few minutes.
+        </Text>
+        {/* Keep pagination deliberately compact. Ten rows bounds the associated
+            per-account event requests while Previous/Next still expose the
+            complete leaderboard. */}
+        <XStack gap="$1">
+          <Button
+            size="sm"
+            {...compactButtonProps}
+            variant="ghost"
+            disabled={!activePagination?.hasPrevPage}
+            onPress={() => setActivePage((activePagination?.page ?? 1) - 1)}
+          >
+            <ButtonText>Previous</ButtonText>
+          </Button>
+          <Button size="sm" {...compactButtonProps} variant="secondary" disabled>
+            <ButtonText>
+              {activePagination
+                ? `${activePagination.page} / ${activePagination.totalPages}`
+                : '1 / 1'}
+            </ButtonText>
+          </Button>
+          <Button
+            size="sm"
+            {...compactButtonProps}
+            variant="ghost"
+            disabled={!activePagination?.hasNextPage}
+            onPress={() => setActivePage((activePagination?.page ?? 1) + 1)}
+          >
+            <ButtonText>Next</ButtonText>
+          </Button>
+        </XStack>
+      </YStack>
+    </YStack>
+  )
+}
diff --git a/packages/superfluid-campaign-widget/src/components/RewardPoolSection.tsx b/packages/superfluid-campaign-widget/src/components/RewardPoolSection.tsx
new file mode 100644
index 00000000..87b0259d
--- /dev/null
+++ b/packages/superfluid-campaign-widget/src/components/RewardPoolSection.tsx
@@ -0,0 +1,68 @@
+import React from 'react'
+import { Heading, ProgressBar, Text, YStack } from '@goodwidget/ui'
+import type { Address } from 'viem'
+import type { ProgramSupTotalsAdapter } from '../hooks/useProgramSupTotals'
+import { useProgramSupTotals } from '../hooks/useProgramSupTotals'
+import type { CampaignActionMockData, CampaignPoolMockData } from '../widgetRuntimeContract'
+import { ActionCard } from './ActionCard'
+
+interface RewardPoolSectionProps {
+  pool: CampaignPoolMockData
+  poolAddress?: Address
+  onPressActionCta: (action: CampaignActionMockData) => void
+  supTotalsAdapter?: ProgramSupTotalsAdapter
+}
+
+/**
+ * Renders one reward pool: heading, participant count, a green SUP-progress
+ * bar, then the pool's ActionCards stacked vertically. The two pools this
+ * feeds always stack vertically at every breakpoint — no responsive change
+ * needed at this level.
+ */
+export function RewardPoolSection({
+  pool,
+  poolAddress,
+  onPressActionCta,
+  supTotalsAdapter,
+}: RewardPoolSectionProps) {
+  // Live on-chain SUP totals for this pool's campaign, when a matching program
+  // exists (see useProgramSupTotals). While loading, on request failure, or
+  // when the integrator has not supplied a pool address, fall back to the
+  // pool's placeholder figures rather than making an unresolvable subgraph query.
+  const supTotals = useProgramSupTotals(
+    pool.campaignId,
+    poolAddress,
+    pool.supTotal,
+    supTotalsAdapter,
+  )
+  const supDistributed = supTotals.data?.totalClaimed ?? pool.supDistributed
+  const supTotal = supTotals.data?.totalAllocated ?? pool.supTotal
+  const participants = supTotals.data?.totalMembers ?? pool.participants
+
+  const progressLabel = `${supDistributed.toLocaleString()} / ${supTotal.toLocaleString()} SUP`
+
+  return (
+    <YStack gap="$3" width="100%">
+      <YStack gap="$1">
+        <Heading level={4}>{pool.label}</Heading>
+        <Text variant="caption" tone="secondary">
+          {participants.toLocaleString()} participants
+        </Text>
+      </YStack>
+
+      <ProgressBar
+        value={supDistributed}
+        max={supTotal}
+        label={progressLabel}
+        variant="success"
+        hidePercentageOnMobile
+      />
+
+      <YStack gap="$2">
+        {pool.actions.map((action) => (
+          <ActionCard key={action.activity} action={action} onPressCta={onPressActionCta} />
+        ))}
+      </YStack>
+    </YStack>
+  )
+}
diff --git a/packages/superfluid-campaign-widget/src/components/activityIconComponents.ts b/packages/superfluid-campaign-widget/src/components/activityIconComponents.ts
new file mode 100644
index 00000000..64f33e8b
--- /dev/null
+++ b/packages/superfluid-campaign-widget/src/components/activityIconComponents.ts
@@ -0,0 +1,21 @@
+import { CalendarDays, HandCoins, Megaphone, UserPlus, Waves } from '@goodwidget/ui'
+import type { ActivityType } from '../widgetRuntimeContract'
+
+/** Exact glyph mapping from the approved design reference (#127) — do not substitute. */
+export const ACTIVITY_ICON_COMPONENT: Record<ActivityType, typeof CalendarDays> = {
+  'claim-ubi': CalendarDays,
+  'invite-users': UserPlus,
+  'flow-state-vote': Megaphone,
+  'flow-state-funding': Waves,
+  'gardens-donation': HandCoins,
+  'gardens-funding': Waves,
+}
+
+/** Resolves an activity's done-state to the color token its lucide icon should render in. */
+export function resolveActivityIconColorToken(
+  colorVariant: 'blue' | 'green',
+  isDone: boolean,
+): string {
+  if (!isDone) return '$placeholderColor'
+  return colorVariant === 'green' ? '$success' : '$primary'
+}
diff --git a/packages/superfluid-campaign-widget/src/components/shared/WalletChip.tsx b/packages/superfluid-campaign-widget/src/components/shared/WalletChip.tsx
new file mode 100644
index 00000000..7b98f1f0
--- /dev/null
+++ b/packages/superfluid-campaign-widget/src/components/shared/WalletChip.tsx
@@ -0,0 +1,96 @@
+import React, { useState } from 'react'
+import { Button, ButtonText, Icon, Text, XStack, YStack } from '@goodwidget/ui'
+import { truncateAddress } from './styles'
+
+interface WalletChipProps {
+  address: string | null
+  onDisconnect?: () => Promise<void>
+}
+
+/**
+ * Connected-wallet chip (status dot + truncated address + chevron) shared by
+ * CampaignHeader and LeaderboardView so both headers stay identical instead
+ * of duplicating the markup. Pressing the chip opens a single-action
+ * "Disconnect" dropdown, following the same relative/absolute positioning
+ * pattern as InfoTooltip in ai-credits-widget rather than pulling in the
+ * heavier Drawer/ActionSheet primitives for one menu item.
+ */
+export function WalletChip({ address, onDisconnect }: WalletChipProps) {
+  const [isMenuOpen, setIsMenuOpen] = useState(false)
+  const [disconnectMessage, setDisconnectMessage] = useState<string | null>(null)
+
+  return (
+    <XStack position="relative" alignItems="center">
+      <XStack
+        gap="$2"
+        alignItems="center"
+        paddingHorizontal="$3"
+        paddingVertical="$2"
+        borderRadius="$full"
+        borderWidth={1}
+        borderColor="$borderColor"
+        cursor="pointer"
+        onPress={() => {
+          setDisconnectMessage(null)
+          setIsMenuOpen((open) => !open)
+        }}
+        aria-label="Wallet options"
+      >
+        <YStack width={8} height={8} borderRadius="$full" backgroundColor="$success" />
+        <Text variant="label">{address ? truncateAddress(address) : ''}</Text>
+        <Icon name="chevron-down" size="xs" color="muted" />
+      </XStack>
+
+      {isMenuOpen && (
+        <>
+          {/* Invisible full-viewport layer so any outside press closes the menu,
+              same dismiss approach as ActionSheet's overlay. Sits below the menu
+              itself in z-index so the menu's own press still reaches its button. */}
+          <XStack
+            position="fixed"
+            top={0}
+            left={0}
+            right={0}
+            bottom={0}
+            zIndex={100}
+            onPress={() => setIsMenuOpen(false)}
+          />
+          <YStack
+            position="absolute"
+            top="100%"
+            right={0}
+            marginTop="$1"
+            backgroundColor="$background"
+            borderWidth={1}
+            borderColor="$borderColor"
+            borderRadius="$3"
+            padding="$1"
+            minWidth={160}
+            zIndex={101}
+          >
+            <Button
+              size="sm"
+              variant="list"
+              onPress={async () => {
+                if (!onDisconnect) {
+                  setDisconnectMessage('Disconnect should be done in your wallets session')
+                  return
+                }
+                setIsMenuOpen(false)
+                await onDisconnect()
+              }}
+            >
+              <Icon name="log-out" size="xs" color="muted" />
+              <ButtonText>Disconnect</ButtonText>
+            </Button>
+            {disconnectMessage && (
+              <Text variant="caption" tone="secondary" padding="$2">
+                {disconnectMessage}
+              </Text>
+            )}
+          </YStack>
+        </>
+      )}
+    </XStack>
+  )
+}
diff --git a/packages/superfluid-campaign-widget/src/components/shared/styles.ts b/packages/superfluid-campaign-widget/src/components/shared/styles.ts
new file mode 100644
index 00000000..9c9dc4b6
--- /dev/null
+++ b/packages/superfluid-campaign-widget/src/components/shared/styles.ts
@@ -0,0 +1,14 @@
+// Mirrors the compactButtonProps convention established in
+// ai-credits-widget/src/components/shared/styles.ts — spread onto every
+// <Button size="sm"> in this package so button proportions stay consistent
+// with the rest of the GoodWidget suite.
+export const compactButtonProps = {
+  borderRadius: '$3',
+  height: '$7',
+  paddingHorizontal: '$3',
+} as const
+
+/** Shortens a wallet address to the "0x1a2b...9a0b" form used across leaderboard rows and headers. */
+export function truncateAddress(address: string): string {
+  return `${address.slice(0, 6)}...${address.slice(-4)}`
+}
diff --git a/packages/superfluid-campaign-widget/src/element.ts b/packages/superfluid-campaign-widget/src/element.ts
new file mode 100644
index 00000000..537900a5
--- /dev/null
+++ b/packages/superfluid-campaign-widget/src/element.ts
@@ -0,0 +1,25 @@
+import { createMiniAppElement } from '@goodwidget/embed'
+import { SuperfluidCampaignWidget } from './SuperfluidCampaignWidget'
+import type React from 'react'
+
+/**
+ * A Custom Element class wrapping the SuperfluidCampaignWidget React component.
+ *
+ * Register it with any tag name:
+ *   customElements.define('gw-superfluid-campaign', SuperfluidCampaignWidgetElement)
+ *
+ * Then use in HTML:
+ *   <gw-superfluid-campaign></gw-superfluid-campaign>
+ *
+ * Set the wallet provider via JS properties:
+ *   const el = document.querySelector('gw-superfluid-campaign')
+ *   el.provider = window.ethereum
+ */
+export const SuperfluidCampaignWidgetElement = createMiniAppElement(
+  SuperfluidCampaignWidget as React.ComponentType<Record<string, unknown>>,
+  {
+    shadow: true,
+    defaultTheme: 'dark',
+    events: [],
+  },
+)
diff --git a/packages/superfluid-campaign-widget/src/hooks/useAirdropStatus.ts b/packages/superfluid-campaign-widget/src/hooks/useAirdropStatus.ts
new file mode 100644
index 00000000..c160b830
--- /dev/null
+++ b/packages/superfluid-campaign-widget/src/hooks/useAirdropStatus.ts
@@ -0,0 +1,93 @@
+import { useEffect, useState } from 'react'
+
+const AIRDROP_STATUS_ENDPOINT = 'https://superfluid-airdrop.goodworker.workers.dev/'
+
+/**
+ * Every address sampled against this endpoint so far (a burn address and a
+ * well-known EOA) came back "not whitelisted" — the shape returned once a
+ * wallet IS whitelisted, and in particular which field represents accrued
+ * points, has not been observed. Only the fields below are backed by a real
+ * response; don't add speculative ones without a sampled response to match.
+ */
+export interface AirdropWalletData {
+  claims: string
+  invites: string
+}
+
+export interface AirdropStatus {
+  /** Present when the whitelist check failed or the address isn't whitelisted. */
+  error?: string
+  /** Observed alongside `error` on some responses, absent on others. */
+  walletData?: AirdropWalletData
+}
+
+export interface AirdropStatusAdapterResult {
+  status: AirdropStatus | null
+  isLoading: boolean
+  error: string | null
+}
+
+/**
+ * Mirrors AiCreditsWidgetAdapterFactory's DI seam: Storybook fixtures and
+ * Playwright specs pass one of these to render every airdrop-status state
+ * (loading/error/not-whitelisted/eligible) deterministically, without a real
+ * wallet's live whitelist status being able to change a committed baseline
+ * screenshot between runs.
+ */
+export type AirdropStatusAdapter = (address: string | null) => AirdropStatusAdapterResult
+
+function formatAirdropStatusError(error: unknown): string {
+  if (!(error instanceof Error)) return 'Unable to load airdrop status'
+  return error.message
+}
+
+/**
+ * Fetches the connected wallet's airdrop status. The effect is keyed on
+ * `address` alone so it fires exactly on connect, on mount when already
+ * connected, and on address change — never on unrelated re-renders.
+ *
+ * `adapterOverride`, when supplied, replaces the live fetch entirely and its
+ * result is returned as-is; the effect below still runs (hook order must stay
+ * stable) but exits immediately without touching the network.
+ */
+export function useAirdropStatus(address: string | null, adapterOverride?: AirdropStatusAdapter): AirdropStatusAdapterResult {
+  const [status, setStatus] = useState<AirdropStatus | null>(null)
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (adapterOverride) return
+    if (!address) {
+      setStatus(null)
+      setError(null)
+      setIsLoading(false)
+      return
+    }
+
+    const controller = new AbortController()
+    setIsLoading(true)
+    setError(null)
+
+    fetch(`${AIRDROP_STATUS_ENDPOINT}?address=${encodeURIComponent(address)}`, { signal: controller.signal })
+      .then(async (response) => {
+        if (!response.ok) {
+          throw new Error(`Airdrop status request failed (${response.status})`)
+        }
+        return (await response.json()) as AirdropStatus
+      })
+      .then((data) => {
+        setStatus(data)
+        setIsLoading(false)
+      })
+      .catch((fetchError: unknown) => {
+        if (fetchError instanceof DOMException && fetchError.name === 'AbortError') return
+        setError(formatAirdropStatusError(fetchError))
+        setIsLoading(false)
+      })
+
+    return () => controller.abort()
+  }, [address, adapterOverride])
+
+  if (adapterOverride) return adapterOverride(address)
+  return { status, isLoading, error }
+}
diff --git a/packages/superfluid-campaign-widget/src/hooks/useCampaignLeaderboard.ts b/packages/superfluid-campaign-widget/src/hooks/useCampaignLeaderboard.ts
new file mode 100644
index 00000000..038da5c1
--- /dev/null
+++ b/packages/superfluid-campaign-widget/src/hooks/useCampaignLeaderboard.ts
@@ -0,0 +1,200 @@
+import { useEffect, useState } from 'react'
+import type { ActivityType, CampaignActionMockData } from '../widgetRuntimeContract'
+
+const POINTS_API_BASE = 'https://cms.superfluid.pro/points'
+export const LEADERBOARD_PAGE_SIZE = 10
+const EVENTS_PAGE_SIZE = 100
+
+/** `/points/campaign` response — campaign-level points totals, no SUP figures. */
+export interface CampaignPointsSummary {
+  campaignId: number
+  name: string
+  slug: string
+  totalPoints: number
+  memberCount: number
+  totalEvents: number
+  lastEventAt: string | null
+  createdAt: string
+}
+
+/** One row of `/points/accounts` — the documented "campaign accounts (leaderboard)" endpoint. */
+export interface CampaignPointsAccount {
+  account: string
+  totalPoints: number
+  eventCount: number
+  lastEventAt: string | null
+  /** Activities with at least one positive point event for this account. */
+  completedActivities: ActivityType[]
+}
+
+/** Raw `/points/accounts` row before it is enriched from `/points/events`. */
+type CampaignPointsAccountResponse = Omit<CampaignPointsAccount, 'completedActivities'>
+
+interface CampaignPointEvent {
+  eventName: string
+  points: number
+}
+
+interface CampaignPointEventsResponse {
+  events: CampaignPointEvent[]
+  pagination: CampaignPointsPagination
+}
+
+export interface CampaignPointsPagination {
+  page: number
+  limit: number
+  totalDocs: number
+  totalPages: number
+  hasNextPage: boolean
+  hasPrevPage: boolean
+}
+
+export interface CampaignLeaderboardData {
+  summary: CampaignPointsSummary
+  accounts: CampaignPointsAccount[]
+  pagination: CampaignPointsPagination
+}
+
+export interface CampaignLeaderboardResult {
+  data: CampaignLeaderboardData | null
+  isLoading: boolean
+  error: string | null
+}
+
+/**
+ * Mirrors useAirdropStatus's DI seam: Storybook fixtures and Playwright specs
+ * pass one of these, keyed by campaignId, to render every leaderboard state
+ * (loading/error/populated) deterministically instead of depending on the
+ * live Points API's current standings.
+ */
+export type CampaignLeaderboardAdapter = (
+  campaignId: number,
+  page?: number,
+) => CampaignLeaderboardResult
+
+function formatCampaignLeaderboardError(error: unknown): string {
+  if (!(error instanceof Error)) return 'Unable to load campaign leaderboard'
+  return error.message
+}
+
+/**
+ * Fetches one campaign leaderboard page from Superfluid's public Points API
+ * (no auth required), then enriches its accounts with action completion from
+ * the raw point-events endpoint.
+ *
+ * `adapterOverride`, when supplied, replaces the live fetch entirely and its
+ * result is returned as-is; the effect below still runs (hook order must
+ * stay stable across the two campaign tabs) but exits immediately without
+ * touching the network.
+ */
+export function useCampaignLeaderboard(
+  campaignId: number,
+  actions: CampaignActionMockData[],
+  page: number,
+  enabled: boolean,
+  adapterOverride?: CampaignLeaderboardAdapter,
+): CampaignLeaderboardResult {
+  const [data, setData] = useState<CampaignLeaderboardData | null>(null)
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (adapterOverride || !enabled) return
+
+    const controller = new AbortController()
+    setData(null)
+    setIsLoading(true)
+    setError(null)
+
+    const fetchJson = async <T,>(path: string, params: Record<string, string>): Promise<T> => {
+      const url = new URL(`${POINTS_API_BASE}${path}`)
+      for (const [key, value] of Object.entries(params)) url.searchParams.set(key, value)
+      const response = await fetch(url.toString(), { signal: controller.signal })
+      if (!response.ok) {
+        throw new Error(`Campaign leaderboard request failed (${response.status})`)
+      }
+      return response.json() as Promise<T>
+    }
+
+    /**
+     * The API has no bulk account × event-name endpoint. Enriching only the ten
+     * accounts on the requested leaderboard page keeps the fan-out bounded.
+     * Each account starts with one 100-event request and only paginates further
+     * when older history is needed. We stop as soon as every activity in this
+     * pool has been found.
+     */
+    const fetchCompletedActivities = async (account: string): Promise<ActivityType[]> => {
+      const activityByEventName = new Map<string, ActivityType>()
+      for (const action of actions) {
+        const eventNames = action.pointsEventNames?.length
+          ? action.pointsEventNames
+          : [action.activity]
+        for (const eventName of eventNames) activityByEventName.set(eventName, action.activity)
+      }
+
+      if (activityByEventName.size === 0) return []
+
+      const targetActivityCount = new Set(activityByEventName.values()).size
+      const completedActivities = new Set<ActivityType>()
+      let eventsPage = 1
+      let hasNextPage = true
+
+      while (hasNextPage && completedActivities.size < targetActivityCount) {
+        const response = await fetchJson<CampaignPointEventsResponse>('/events', {
+          campaignId: String(campaignId),
+          account,
+          limit: String(EVENTS_PAGE_SIZE),
+          page: String(eventsPage),
+        })
+
+        for (const event of response.events) {
+          // Completion means the action awarded points at least once. Zero-point
+          // informational events and negative corrections do not mark it done.
+          if (event.points <= 0) continue
+          const activity = activityByEventName.get(event.eventName)
+          if (activity) completedActivities.add(activity)
+        }
+
+        hasNextPage = response.pagination.hasNextPage
+        eventsPage += 1
+      }
+
+      // Preserve the action-card order rather than the API's newest-first order.
+      return actions
+        .map((action) => action.activity)
+        .filter((activity) => completedActivities.has(activity))
+    }
+
+    Promise.all([
+      fetchJson<CampaignPointsSummary>('/campaign', { campaignId: String(campaignId) }),
+      fetchJson<{ accounts: CampaignPointsAccountResponse[]; pagination: CampaignPointsPagination }>('/accounts', {
+        campaignId: String(campaignId),
+        orderBy: 'totalPoints',
+        order: 'desc',
+        limit: String(LEADERBOARD_PAGE_SIZE),
+        page: String(page),
+      }),
+    ])
+      .then(async ([summary, accountsResponse]) => {
+        const accounts = await Promise.all(
+          accountsResponse.accounts.map(async (account) => ({
+            ...account,
+            completedActivities: await fetchCompletedActivities(account.account),
+          })),
+        )
+        setData({ summary, accounts, pagination: accountsResponse.pagination })
+        setIsLoading(false)
+      })
+      .catch((fetchError: unknown) => {
+        if (fetchError instanceof DOMException && fetchError.name === 'AbortError') return
+        setError(formatCampaignLeaderboardError(fetchError))
+        setIsLoading(false)
+      })
+
+    return () => controller.abort()
+  }, [campaignId, actions, page, enabled, adapterOverride])
+
+  if (adapterOverride && enabled) return adapterOverride(campaignId, page)
+  if (!enabled) return { data: null, isLoading: false, error: null }
+  return { data, isLoading, error }
+}
diff --git a/packages/superfluid-campaign-widget/src/hooks/useProgramSupTotals.ts b/packages/superfluid-campaign-widget/src/hooks/useProgramSupTotals.ts
new file mode 100644
index 00000000..fe898bd8
--- /dev/null
+++ b/packages/superfluid-campaign-widget/src/hooks/useProgramSupTotals.ts
@@ -0,0 +1,178 @@
+import { useEffect, useState } from 'react'
+import { formatUnits } from 'viem'
+import type { Address } from 'viem'
+
+/**
+ * Superfluid protocol-v1 subgraph for Base mainnet.
+ * Public GraphQL endpoint — no API key or CORS restriction for browser queries.
+ * Replaces claim.superfluid.org/api/programs which is CORS-protected.
+ */
+const SUPERFLUID_BASE_SUBGRAPH = 'https://base-mainnet.subgraph.x.superfluid.dev/'
+
+/**
+ * Pool entity fields needed for SUP distribution totals.
+ * totalAmountDistributedUntilUpdatedAt: cumulative amount distributed to all members
+ *   up to the last on-chain state change (instant + flow, in wei).
+ * totalMembers: current members with more than zero units in the pool.
+ * flowRate: current ongoing distribution rate (wei/second); 0 for instant-only pools.
+ * updatedAtTimestamp: Unix seconds of the last on-chain update to this pool.
+ */
+const GET_POOL_TOTALS_QUERY = `
+  query GetPoolTotals($id: ID!) {
+    pool(id: $id) {
+      totalAmountDistributedUntilUpdatedAt
+      totalMembers
+      flowRate
+      updatedAtTimestamp
+    }
+  }
+`
+
+interface SubgraphPoolFields {
+  totalAmountDistributedUntilUpdatedAt: string
+  totalMembers: number
+  flowRate: string
+  updatedAtTimestamp: string
+}
+
+interface SubgraphResponse {
+  data?: { pool: SubgraphPoolFields | null }
+  errors?: Array<{ message: string }>
+}
+
+/** Human-readable SUP amounts (already converted from 18-decimal wei). */
+export interface ProgramSupTotals {
+  totalAllocated: number
+  /** Current pool members with more than zero units. */
+  totalMembers: number
+  /**
+   * Historical public name retained for compatibility. This is the amount the
+   * pool has distributed so far, including flow accrued since its last update.
+   */
+  totalClaimed: number
+}
+
+export interface ProgramSupTotalsResult {
+  /** Null when the campaign has no on-chain program registered yet (a normal,
+   *  handled case — e.g. Ecosystem actions/614 as of Season 6 launch — not an error). */
+  data: ProgramSupTotals | null
+  isLoading: boolean
+  error: string | null
+}
+
+/**
+ * Mirrors useCampaignLeaderboard's DI seam: Storybook fixtures and Playwright
+ * specs pass one of these, keyed by campaignId, to render distribution and
+ * member totals deterministically instead of depending on live pool state.
+ */
+export type ProgramSupTotalsAdapter = (campaignId: number) => ProgramSupTotalsResult
+
+function formatProgramSupTotalsError(error: unknown): string {
+  if (!(error instanceof Error)) return 'Unable to load SUP totals'
+  return error.message
+}
+
+/**
+ * Fetches a campaign pool's distribution totals from the Superfluid protocol-v1
+ * subgraph on Base mainnet (https://base-mainnet.subgraph.x.superfluid.dev/).
+ *
+ * This replaces the previous claim.superfluid.org/api/programs fetch, which is a
+ * tRPC endpoint protected by CORS and therefore not callable from browser contexts.
+ *
+ * totalClaimed is derived from pool.totalAmountDistributedUntilUpdatedAt (the
+ * cumulative amount the pool has distributed to its members) plus any in-flight
+ * streaming (flowRate × seconds elapsed since the last on-chain update), giving
+ * a live approximation without requiring an additional RPC call.
+ *
+ * totalAllocated is supplied alongside the campaign content. It represents
+ * the total SUP committed to this program and is not a live subgraph value.
+ *
+ * Returns null (→ RewardPoolSection falls back to mock data) when:
+ * - The integrator did not pass a pool address for this campaignId, OR
+ * - The subgraph returns no pool for the configured address.
+ *
+ * `adapterOverride`, when supplied, replaces the live fetch entirely and its
+ * result is returned as-is; the effect still runs (hook order must stay stable)
+ * but exits immediately without touching the network.
+ */
+export function useProgramSupTotals(
+  campaignId: number,
+  poolAddress: Address | undefined,
+  totalAllocated: number,
+  adapterOverride?: ProgramSupTotalsAdapter,
+): ProgramSupTotalsResult {
+  const [data, setData] = useState<ProgramSupTotals | null>(null)
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (adapterOverride) return
+
+    if (!poolAddress) {
+      // A Points API campaign id cannot identify a GDA pool in the protocol
+      // subgraph. The public pool address must be supplied by the integrator.
+      setData(null)
+      setIsLoading(false)
+      setError(null)
+      return
+    }
+
+    const controller = new AbortController()
+    setIsLoading(true)
+    setError(null)
+
+    fetch(SUPERFLUID_BASE_SUBGRAPH, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        query: GET_POOL_TOTALS_QUERY,
+        variables: { id: poolAddress.toLowerCase() },
+      }),
+      signal: controller.signal,
+    })
+      .then(async (response) => {
+        if (!response.ok) {
+          throw new Error(`Superfluid subgraph request failed (${response.status})`)
+        }
+        return (await response.json()) as SubgraphResponse
+      })
+      .then((json) => {
+        if (json.errors?.length) {
+          throw new Error(json.errors.map((e) => e.message).join('; '))
+        }
+        const pool = json.data?.pool
+        if (!pool) {
+          // Address configured but pool not found in subgraph — treat as no program.
+          setData(null)
+          setIsLoading(false)
+          return
+        }
+
+        // totalAmountDistributedUntilUpdatedAt is the cumulative total distributed
+        // from this pool to all members up to the last on-chain state change.
+        // For streaming pools (flowRate > 0), add in-flight tokens to get the live total.
+        const distributedWei = BigInt(pool.totalAmountDistributedUntilUpdatedAt)
+        const flowRate = BigInt(pool.flowRate)
+        const updatedAt = BigInt(pool.updatedAtTimestamp)
+        const nowSeconds = BigInt(Math.floor(Date.now() / 1000))
+        const inFlightWei = flowRate > 0n ? flowRate * (nowSeconds - updatedAt) : 0n
+
+        setData({
+          totalAllocated,
+          totalMembers: pool.totalMembers,
+          totalClaimed: Number(formatUnits(distributedWei + inFlightWei, 18)),
+        })
+        setIsLoading(false)
+      })
+      .catch((fetchError: unknown) => {
+        if (fetchError instanceof DOMException && fetchError.name === 'AbortError') return
+        setError(formatProgramSupTotalsError(fetchError))
+        setIsLoading(false)
+      })
+
+    return () => controller.abort()
+  }, [campaignId, poolAddress, totalAllocated, adapterOverride])
+
+  if (adapterOverride) return adapterOverride(campaignId)
+  return { data, isLoading, error }
+}
diff --git a/packages/superfluid-campaign-widget/src/index.ts b/packages/superfluid-campaign-widget/src/index.ts
new file mode 100644
index 00000000..3328c578
--- /dev/null
+++ b/packages/superfluid-campaign-widget/src/index.ts
@@ -0,0 +1,41 @@
+// Runtime contract types
+export type {
+  ActivityType,
+  ActivityIconColorVariant,
+  ActivityIconSpec,
+  CampaignActionCtaKind,
+  CampaignActionMockData,
+  CampaignMockData,
+  CampaignPoolId,
+  CampaignPoolAddresses,
+  CampaignPoolMockData,
+  FaqItemMockData,
+  LeaderboardEntryMockData,
+  LeaderboardMockData,
+  SuperfluidCampaignView,
+  SuperfluidCampaignWidgetEnvironment,
+  SuperfluidCampaignWidgetProps,
+} from './widgetRuntimeContract'
+export { ACTIVITY_ICON_MAP } from './widgetRuntimeContract'
+
+// Airdrop status adapter DI seam (Storybook/Playwright fixtures)
+export type { AirdropStatus, AirdropStatusAdapter, AirdropStatusAdapterResult } from './hooks/useAirdropStatus'
+
+// Campaign leaderboard adapter DI seam (Storybook/Playwright fixtures)
+export type {
+  CampaignLeaderboardAdapter,
+  CampaignLeaderboardData,
+  CampaignLeaderboardResult,
+  CampaignPointsAccount,
+  CampaignPointsPagination,
+  CampaignPointsSummary,
+} from './hooks/useCampaignLeaderboard'
+
+// SUP program totals adapter DI seam (Storybook/Playwright fixtures)
+export type { ProgramSupTotals, ProgramSupTotalsAdapter, ProgramSupTotalsResult } from './hooks/useProgramSupTotals'
+
+// Mock dataset
+export { DEFAULT_CAMPAIGN_MOCK_DATA } from './mockData'
+
+// Widget component
+export { SuperfluidCampaignWidget } from './SuperfluidCampaignWidget'
diff --git a/packages/superfluid-campaign-widget/src/mockData.ts b/packages/superfluid-campaign-widget/src/mockData.ts
new file mode 100644
index 00000000..8ace223d
--- /dev/null
+++ b/packages/superfluid-campaign-widget/src/mockData.ts
@@ -0,0 +1,194 @@
+import type { CampaignMockData } from './widgetRuntimeContract'
+
+// ---------------------------------------------------------------------------
+// DEFAULT_CAMPAIGN_MOCK_DATA
+//
+// Static fixture satisfying the approved #127 content mockup. Leaderboard
+// rows are sourced live from the Superfluid Points API (see
+// useCampaignLeaderboard). Each pool's supDistributed/supTotal below are now
+// only a fallback: useProgramSupTotals overrides them per-pool with live
+// on-chain figures by querying the Superfluid Base subgraph when a pool address
+// is supplied through SuperfluidCampaignWidgetProps.poolAddresses. The
+// aggregate leaderboard.supDistributed/supTotal below has no live source at all
+// (no endpoint combines both pools' on-chain totals) and remains a placeholder.
+// Consumers can still override the content fixture via
+// SuperfluidCampaignWidgetProps.data.
+//
+// pointsEventNames below are the canonical event-producer contract assumed by
+// the widget. If an existing producer uses different names, pass data with the
+// corresponding aliases instead of changing ActivityType or the icon mapping.
+// ---------------------------------------------------------------------------
+
+const POINTS_EVENT_NAMES = {
+  claimUbi: 'claimed',
+  inviteUsers: 'validInvites',
+  flowStateFunding: 'roundStreamed',
+  gardensDonation: 'opensourceSent',
+  gardensFunding: 'opensourceStreamed',
+  // TODO: Replace when the Flow State voting points producer is implemented.
+  // Keeping a distinct placeholder preserves the action and icon flow without
+  // incorrectly treating another event as proof that the user voted.
+  flowStateVote: 'flowStateVoted',
+} as const
+
+export const DEFAULT_CAMPAIGN_MOCK_DATA: CampaignMockData = {
+  seasonLabel: 'SEASON 6',
+  title: 'Superfluid Ecosystem Rewards',
+  description: 'Complete eligible actions across GoodDollar, Flow State, and Gardens to earn SUP rewards.',
+  supAllocatedLabel: '622K SUP allocated',
+  endsLabel: 'Ends 30 September',
+  pools: [
+    {
+      id: 'good-dollar-actions',
+      campaignId: 606,
+      label: 'GoodDollar actions',
+      supDistributed: 75895,
+      supTotal: 217700,
+      participants: 624,
+      actions: [
+        {
+          activity: 'claim-ubi',
+          pointsEventNames: [POINTS_EVENT_NAMES.claimUbi],
+          title: 'Claim UBI',
+          source: 'GoodDollar',
+          description: 'Claim your daily G$. Earn every time you claim.',
+          pointsLabel: '1 PT PER CLAIM',
+          ctaLabel: 'Claim',
+          ctaKind: 'claim-widget-claim',
+        },
+        {
+          activity: 'invite-users',
+          pointsEventNames: [POINTS_EVENT_NAMES.inviteUsers],
+          title: 'Invite users',
+          source: 'GoodDollar',
+          description: 'Invite someone to claim G$ through GoodWallet.',
+          pointsLabel: '10 PTS PER INVITE',
+          ctaLabel: 'Invite',
+          ctaKind: 'claim-widget-invite',
+        },
+        {
+          activity: 'flow-state-vote',
+          pointsEventNames: [POINTS_EVENT_NAMES.flowStateVote],
+          title: 'Vote on Flow State',
+          source: 'Flow State',
+          description: 'Vote to help allocate GoodBuilders Season 4 funding.',
+          pointsLabel: '5 PTS PER VOTE',
+          ctaLabel: 'Vote',
+          ctaKind: 'external-link',
+          href: 'https://flowstate.network/flow-councils/42220/0x582e3314d4ef56c18930acb10bb64313525e7820',
+        },
+      ],
+    },
+    {
+      id: 'ecosystem-funding-actions',
+      campaignId: 614,
+      label: 'Ecosystem actions',
+      supDistributed: 262450,
+      supTotal: 404300,
+      participants: 318,
+      actions: [
+        {
+          activity: 'flow-state-funding',
+          pointsEventNames: [POINTS_EVENT_NAMES.flowStateFunding],
+          title: 'Fund GoodBuilders Season 4',
+          source: 'Flow State',
+          description: 'Start a stream to the GoodBuilders Season 4 pool.',
+          pointsLabel: '2 PTS PER $1 STREAMED',
+          ctaLabel: 'Fund',
+          ctaKind: 'external-link',
+          href: 'https://flowstate.network/flow-councils/42220/0x582e3314d4ef56c18930acb10bb64313525e7820',
+        },
+        {
+          activity: 'gardens-donation',
+          pointsEventNames: [POINTS_EVENT_NAMES.gardensDonation],
+          title: 'Make a one-time donation',
+          source: 'Gardens',
+          description: 'Donate to an eligible Community Pool.',
+          pointsLabel: '1 PT PER $1 DONATED',
+          ctaLabel: 'Donate',
+          ctaKind: 'external-link',
+          href: 'https://app.gardens.fund/gardens/42220/0xf42c9ca2b10010142e2bac34ebdddb0b82177684',
+        },
+        {
+          activity: 'gardens-funding',
+          pointsEventNames: [POINTS_EVENT_NAMES.gardensFunding],
+          title: 'Stream to a Community Pool',
+          source: 'Gardens',
+          description: 'Start a stream to an eligible Community Pool.',
+          pointsLabel: '2 PTS PER $1 STREAMED',
+          ctaLabel: 'Fund',
+          ctaKind: 'external-link',
+          href: 'https://app.gardens.fund/gardens/42220/0xf42c9ca2b10010142e2bac34ebdddb0b82177684',
+        },
+      ],
+    },
+  ],
+  // supDistributed/supTotal/totalParticipants/lastUpdatedLabel remain placeholders:
+  // no endpoint combines both pools' on-chain SUP totals into one aggregate
+  // figure — confirmed gap, reported separately to the campaign owner.
+  leaderboard: {
+    totalParticipants: 2184,
+    supDistributed: 316300,
+    supTotal: 622000,
+    lastUpdatedLabel: 'Last updated: 18m ago',
+  },
+  // Exact FAQ copy from issue #127 — do not paraphrase, this is user-facing legal/support text.
+  faq: [
+    {
+      question: 'What is SUP?',
+      answer:
+        'SUP is the governance and rewards token of the Superfluid ecosystem. It may have a market value, but its price can change. This campaign rewards SUP tokens, not a guaranteed cash amount.',
+    },
+    {
+      question: 'How are my SUP rewards calculated?',
+      answer:
+        'Two separate reward pools: GoodDollar actions, and Ecosystem actions. Your share of each pool depends on how many points you earn compared with everyone else in that pool. Rewards from both pools are then combined.',
+    },
+    {
+      question: 'When does an invite count as successful?',
+      answer:
+        'An invite counts after the invited user completes three G$ claims. The invite reward is registered when they complete their fourth claim.',
+    },
+    {
+      question: 'How do Flow State voting points work?',
+      answer:
+        'GoodBuilders Season 4 has six voting epochs. You earn 5 points each time you complete the vote for an epoch, for a maximum of 30 points during the campaign.',
+    },
+    {
+      question: 'How do I start receiving SUP?',
+      answer:
+        'First, complete eligible campaign actions to earn points. Then: open the Superfluid Claim App (claim.superfluid.org), connect the same wallet you used for the campaign, set up your Superfluid Reserve, choose a governance delegate, and claim your SUP. This starts your SUP reward stream.',
+    },
+    {
+      question: 'What happens after I claim?',
+      answer:
+        'Keep completing eligible actions to earn more points. Return to the Claim App regularly (Superfluid recommends checking daily). GoodDollar subsidizes one transaction on Base per user each month.',
+    },
+    {
+      question: 'Do my rewards arrive automatically?',
+      answer: 'No. Your campaign activity earns points, but you need to open the Superfluid Claim App and claim your available SUP.',
+    },
+    {
+      question: 'Where does my SUP go?',
+      answer: 'Your claimed SUP streams into your Superfluid Reserve, manageable at claim.superfluid.org/reserve.',
+    },
+    {
+      question: 'Can I earn SUP from other campaigns?',
+      answer: 'Yes — visit Discover, Use and Earn (claim.superfluid.org/apps) to explore other eligible campaigns.',
+    },
+    {
+      question: 'Which network is used to claim SUP?',
+      answer: 'Base.',
+    },
+    {
+      question: 'Do I need ETH for gas?',
+      answer:
+        'You may need a small amount of ETH on Base. GoodDollar subsidizes one eligible gas transaction per user each month; additional transactions may require your own ETH.',
+    },
+    {
+      question: 'What should I do if the gas transaction fails?',
+      answer:
+        'Wait a few minutes, then check BaseScan (basescan.org) to confirm a non-zero ETH balance on Base. Check/update the gas fee suggestion in your wallet (e.g. MetaMask) and retry. If it persists, contact the GoodDollar Telegram support group (t.me/GoodDollarX).',
+    },
+  ],
+}
diff --git a/packages/superfluid-campaign-widget/src/register.ts b/packages/superfluid-campaign-widget/src/register.ts
new file mode 100644
index 00000000..0c854652
--- /dev/null
+++ b/packages/superfluid-campaign-widget/src/register.ts
@@ -0,0 +1,29 @@
+import { SuperfluidCampaignWidgetElement } from './element'
+
+const DEFAULT_TAG_NAME = 'gw-superfluid-campaign'
+
+/**
+ * Register the <gw-superfluid-campaign> custom element.
+ *
+ * Call once at the top of your app or in a <script> tag:
+ *   import '@goodwidget/superfluid-campaign-widget/register'
+ *
+ * Then use in HTML:
+ *   <gw-superfluid-campaign></gw-superfluid-campaign>
+ *
+ * Returns the tag name so you can use it programmatically:
+ *   const tag = register()  // 'gw-superfluid-campaign'
+ *
+ * Or register under a custom tag:
+ *   const tag = register('my-superfluid-campaign-widget')
+ */
+export function register(tagName: string = DEFAULT_TAG_NAME): string {
+  if (typeof window !== 'undefined' && 'customElements' in window && !customElements.get(tagName)) {
+    customElements.define(tagName, SuperfluidCampaignWidgetElement)
+  }
+  return tagName
+}
+
+if (typeof window !== 'undefined' && 'customElements' in window) {
+  register()
+}
diff --git a/packages/superfluid-campaign-widget/src/widgetRuntimeContract.ts b/packages/superfluid-campaign-widget/src/widgetRuntimeContract.ts
new file mode 100644
index 00000000..43ef156d
--- /dev/null
+++ b/packages/superfluid-campaign-widget/src/widgetRuntimeContract.ts
@@ -0,0 +1,222 @@
+import type { GoodWidgetConfig, GoodWidgetThemeOverrides } from '@goodwidget/ui'
+import type { CitizenClaimWidgetEnvironment } from '@goodwidget/citizen-claim-widget'
+import type { Address } from 'viem'
+import type { AirdropStatusAdapter } from './hooks/useAirdropStatus'
+import type { CampaignLeaderboardAdapter } from './hooks/useCampaignLeaderboard'
+import type { ProgramSupTotalsAdapter } from './hooks/useProgramSupTotals'
+
+// ---------------------------------------------------------------------------
+// Environment type, matching the other GoodWidget packages
+// ---------------------------------------------------------------------------
+export type SuperfluidCampaignWidgetEnvironment = 'production' | 'staging' | 'development'
+
+// ---------------------------------------------------------------------------
+// The two top-level views: the campaign content page, and the full leaderboard.
+// Mirrors the two approved desktop mockups (#127).
+// ---------------------------------------------------------------------------
+export type SuperfluidCampaignView = 'content' | 'leaderboard'
+
+// ---------------------------------------------------------------------------
+// The six eligible activity types (#127 "Activity icons" section).
+// Exact icon glyph/color mapping is fixed by the approved spec, not themeable.
+// ---------------------------------------------------------------------------
+export type ActivityType =
+  | 'claim-ubi'
+  | 'invite-users'
+  | 'flow-state-vote'
+  | 'flow-state-funding'
+  | 'gardens-donation'
+  | 'gardens-funding'
+
+export type ActivityIconColorVariant = 'blue' | 'green'
+
+export interface ActivityIconSpec {
+  activity: ActivityType
+  /** Icon glyph name, resolved against @goodwidget/ui's Icon registry. */
+  iconName: string
+  colorVariant: ActivityIconColorVariant
+  /** Accessible label, also used as a tooltip on the done/not-done glyph. */
+  label: string
+}
+
+/** Exact mapping from the approved spec in #127 — do not derive from mockup pixels. */
+export const ACTIVITY_ICON_MAP: Record<ActivityType, ActivityIconSpec> = {
+  'claim-ubi': {
+    activity: 'claim-ubi',
+    iconName: 'calendar',
+    colorVariant: 'blue',
+    label: 'Claim UBI',
+  },
+  'invite-users': {
+    activity: 'invite-users',
+    iconName: 'person-plus',
+    colorVariant: 'blue',
+    label: 'Successful invite',
+  },
+  'flow-state-vote': {
+    activity: 'flow-state-vote',
+    iconName: 'megaphone',
+    colorVariant: 'blue',
+    label: 'Flow State vote',
+  },
+  'flow-state-funding': {
+    activity: 'flow-state-funding',
+    iconName: 'stream',
+    colorVariant: 'blue',
+    label: 'Flow State funding stream',
+  },
+  'gardens-donation': {
+    activity: 'gardens-donation',
+    iconName: 'hand-coin',
+    colorVariant: 'green',
+    label: 'Gardens one-time donation',
+  },
+  'gardens-funding': {
+    activity: 'gardens-funding',
+    iconName: 'stream',
+    colorVariant: 'green',
+    label: 'Gardens funding stream',
+  },
+}
+
+// ---------------------------------------------------------------------------
+// Reward pools — two fixed pools per #127, stacked vertically at every breakpoint.
+// ---------------------------------------------------------------------------
+export type CampaignPoolId = 'good-dollar-actions' | 'ecosystem-funding-actions'
+export type CampaignPoolAddresses = Partial<Record<number, Address>>
+
+/**
+ * How an action card's CTA is handled. The claim-widget variants embed
+ * CitizenClaimWidget with initialTab set; external-link opens the Flow
+ * State / Gardens URL from #127 in a new tab.
+ */
+export type CampaignActionCtaKind = 'claim-widget-claim' | 'claim-widget-invite' | 'external-link'
+
+export interface CampaignActionMockData {
+  activity: ActivityType
+  /**
+   * Points API event names that prove this activity was completed. When omitted,
+   * the canonical ActivityType value is used. For existing producers, provide
+   * their actual event name here (for example `claimed` for `claim-ubi`).
+   * Aliases let an integrator match an existing event producer without changing
+   * the widget's stable activity names or icon mapping.
+   */
+  pointsEventNames?: string[]
+  title: string
+  source: string
+  description: string
+  pointsLabel: string
+  ctaLabel: string
+  ctaKind: CampaignActionCtaKind
+  /** Required when ctaKind is 'external-link'. */
+  href?: string
+}
+
+export interface CampaignPoolMockData {
+  id: CampaignPoolId
+  /** Superfluid Points API campaign id backing this pool's leaderboard tab. */
+  campaignId: number
+  label: string
+  /** Placeholder fallback, used until useProgramSupTotals resolves a live
+   *  on-chain match for this pool's campaignId (see RewardPoolSection). */
+  supDistributed: number
+  supTotal: number
+  participants: number
+  actions: CampaignActionMockData[]
+}
+
+// ---------------------------------------------------------------------------
+// Leaderboard — split into always-public rows and a connected-only user row,
+// matching the disconnected/connected mockups (the user's row simply doesn't
+// exist in the disconnected view rather than being hidden/blurred).
+// ---------------------------------------------------------------------------
+export interface LeaderboardEntryMockData {
+  rank: number
+  address: string
+  ensName?: string
+  points: number
+  /** Activities with at least one positive point event for this account. */
+  completedActivities: ActivityType[]
+}
+
+export interface LeaderboardMockData {
+  totalParticipants: number
+  supDistributed: number
+  supTotal: number
+  lastUpdatedLabel: string
+}
+
+export interface FaqItemMockData {
+  question: string
+  answer: string
+}
+
+export interface CampaignMockData {
+  seasonLabel: string
+  title: string
+  description: string
+  supAllocatedLabel: string
+  endsLabel: string
+  pools: CampaignPoolMockData[]
+  leaderboard: LeaderboardMockData
+  faq: FaqItemMockData[]
+}
+
+// ---------------------------------------------------------------------------
+// Public component props
+// ---------------------------------------------------------------------------
+export interface SuperfluidCampaignWidgetProps {
+  provider?: unknown
+  /** Integrator-owned wallet connect flow, matching AiCreditsWidget. */
+  connectOverride?: () => Promise<void>
+  /** Integrator-owned wallet disconnect flow. */
+  disconnectOverride?: () => Promise<void>
+  environment?: SuperfluidCampaignWidgetEnvironment
+  themeOverrides?: GoodWidgetThemeOverrides
+  config?: GoodWidgetConfig
+  defaultTheme?: 'light' | 'dark'
+  /**
+   * Overrides the built-in mock dataset (DEFAULT_CAMPAIGN_MOCK_DATA). Lets
+   * Storybook fixtures and tests substitute data without touching component
+   * internals and configure Points API event-name aliases.
+   */
+  data?: CampaignMockData
+  /** Passed through to the embedded CitizenClaimWidget for Claim/Invite CTAs. */
+  citizenClaimEnvironment?: CitizenClaimWidgetEnvironment
+  /**
+   * View shown on first render. Defaults to 'content'. Lets Storybook fixtures
+   * and deep links land directly on the leaderboard without a click.
+   */
+  initialView?: SuperfluidCampaignView
+  /**
+   * Public on-chain GDA pool addresses, keyed by Points API campaign id.
+   *
+   * The widget deliberately does not resolve these through
+   * claim.superfluid.org/api/programs because that endpoint is not available
+   * to arbitrary browser origins. Integrators may source these values from
+   * environment variables and pass them here.
+   */
+  poolAddresses?: CampaignPoolAddresses
+  /**
+   * Overrides the live airdrop-status fetch (superfluid-airdrop.goodworker.workers.dev)
+   * with a fixed result, the same DI seam AiCreditsWidget's adapterFactory uses.
+   * Lets Storybook fixtures and Playwright specs render every airdrop-status
+   * state deterministically instead of depending on a real wallet's live
+   * whitelist status.
+   */
+  airdropStatusAdapter?: AirdropStatusAdapter
+  /**
+   * Overrides the live Superfluid Points API fetch (cms.superfluid.pro/points)
+   * with a fixed result per campaignId, the same DI seam airdropStatusAdapter
+   * uses. Lets Storybook fixtures and Playwright specs render every
+   * leaderboard state deterministically instead of depending on live standings.
+   */
+  leaderboardAdapter?: CampaignLeaderboardAdapter
+  /**
+   * Overrides the live Superfluid protocol-subgraph fetch with a fixed result
+   * per campaignId, using the same DI seam as leaderboardAdapter.
+   * Lets Storybook fixtures and Playwright specs render each reward pool's
+   * distribution progress and active-member count deterministically.
+   */
+  supTotalsAdapter?: ProgramSupTotalsAdapter
+}
diff --git a/packages/superfluid-campaign-widget/test-scripts/points-breakdown.mjs b/packages/superfluid-campaign-widget/test-scripts/points-breakdown.mjs
new file mode 100644
index 00000000..53809fb7
--- /dev/null
+++ b/packages/superfluid-campaign-widget/test-scripts/points-breakdown.mjs
@@ -0,0 +1,92 @@
+#!/usr/bin/env node
+
+/**
+ * Show Superfluid campaign points grouped by user and action/event name.
+ *
+ * Usage:
+ *   node points-breakdown.mjs <campaignId>
+ *   node points-breakdown.mjs <campaignId> <walletAddress>
+ *
+ * Examples:
+ *   node points-breakdown.mjs 606
+ *   node points-breakdown.mjs 606 0x1234567890abcdef1234567890abcdef12345678
+ */
+
+const campaignInput = process.argv[2]
+const campaignId = Number(campaignInput)
+const account = process.argv[3]
+
+if (/^0x[a-fA-F0-9]{40}$/.test(campaignInput ?? '')) {
+  console.error(
+    'The first argument must be a numeric Points API campaign ID, not a GDA pool address.',
+  )
+  console.error('For the GoodDollar campaign, use: node points-breakdown.mjs 606 [walletAddress]')
+  process.exit(1)
+}
+
+if (!Number.isInteger(campaignId) || campaignId <= 0) {
+  console.error('Usage: node points-breakdown.mjs <campaignId> [walletAddress]')
+  process.exit(1)
+}
+
+if (account && !/^0x[a-fA-F0-9]{40}$/.test(account)) {
+  console.error('walletAddress must be a valid 0x-prefixed Ethereum address')
+  process.exit(1)
+}
+
+const endpoint = 'https://cms.superfluid.pro/points/events'
+const pageSize = 100
+const breakdown = new Map()
+let page = 1
+let totalEvents = 0
+
+while (true) {
+  const url = new URL(endpoint)
+  url.searchParams.set('campaignId', String(campaignId))
+  url.searchParams.set('limit', String(pageSize))
+  url.searchParams.set('page', String(page))
+  if (account) url.searchParams.set('account', account)
+
+  const response = await fetch(url)
+  if (!response.ok) {
+    throw new Error(`Points API request failed: ${response.status} ${response.statusText}`)
+  }
+
+  const result = await response.json()
+  totalEvents += result.events.length
+
+  for (const event of result.events) {
+    // One row per wallet + event name. This exposes both the number of events
+    // and the net points awarded for that action.
+    const key = `${event.account.toLowerCase()}:${event.eventName}`
+    const row = breakdown.get(key) ?? {
+      account: event.account.toLowerCase(),
+      action: event.eventName,
+      eventCount: 0,
+      points: 0,
+    }
+
+    row.eventCount += 1
+    row.points += event.points
+    breakdown.set(key, row)
+  }
+
+  if (!result.pagination.hasNextPage) break
+  page += 1
+}
+
+const rows = [...breakdown.values()].sort(
+  (left, right) =>
+    left.account.localeCompare(right.account) ||
+    right.points - left.points ||
+    left.action.localeCompare(right.action),
+)
+
+console.log(`Campaign ${campaignId}: ${totalEvents} events across ${page} page(s)`)
+if (account) console.log(`Account filter: ${account.toLowerCase()}`)
+
+if (rows.length === 0) {
+  console.log('No point events found.')
+} else {
+  console.table(rows)
+}
diff --git a/packages/superfluid-campaign-widget/tsconfig.build.json b/packages/superfluid-campaign-widget/tsconfig.build.json
new file mode 100644
index 00000000..54871c40
--- /dev/null
+++ b/packages/superfluid-campaign-widget/tsconfig.build.json
@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "rootDir": "src",
+    "paths": {
+      "react-native": ["./node_modules/react-native-web"]
+    }
+  },
+  "include": ["src"]
+}
diff --git a/packages/superfluid-campaign-widget/tsconfig.json b/packages/superfluid-campaign-widget/tsconfig.json
new file mode 100644
index 00000000..a720cb71
--- /dev/null
+++ b/packages/superfluid-campaign-widget/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "rootDir": "src",
+    "paths": {
+      "@goodwidget/core": ["../core/src/index.ts"],
+      "@goodwidget/ui": ["../ui/src/index.ts"],
+      "@goodwidget/citizen-claim-widget": ["../citizen-claim-widget/src/index.ts"],
+      "react-native": ["./node_modules/react-native-web"]
+    }
+  },
+  "include": ["src"]
+}
diff --git a/packages/superfluid-campaign-widget/tsup.config.ts b/packages/superfluid-campaign-widget/tsup.config.ts
new file mode 100644
index 00000000..95c2de0d
--- /dev/null
+++ b/packages/superfluid-campaign-widget/tsup.config.ts
@@ -0,0 +1,15 @@
+import { defineConfig } from 'tsup'
+
+export default defineConfig({
+  entry: {
+    index: 'src/index.ts',
+    element: 'src/element.ts',
+    register: 'src/register.ts',
+  },
+  format: ['esm', 'cjs'],
+  dts: true,
+  sourcemap: true,
+  clean: true,
+  tsconfig: 'tsconfig.build.json',
+  external: ['react', 'react-dom', 'react-native', 'react-native-web'],
+})
diff --git a/packages/ui/package.json b/packages/ui/package.json
index ba9268e8..3a6982dd 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -34,6 +34,7 @@
   "dependencies": {
     "@tamagui/animations-react-native": "^1.121.0",
     "@tamagui/core": "1.121.0",
+    "@tamagui/lucide-icons": "1.121.0",
     "@tamagui/themes": "1.121.0",
     "tamagui": "1.121.0"
   },
diff --git a/packages/ui/src/components/Accordion.tsx b/packages/ui/src/components/Accordion.tsx
new file mode 100644
index 00000000..e1ad2d97
--- /dev/null
+++ b/packages/ui/src/components/Accordion.tsx
@@ -0,0 +1,128 @@
+import React, { useState } from 'react'
+import type { ReactNode } from 'react'
+import { XStack, YStack } from 'tamagui'
+import { Icon } from './Icon'
+import { Text } from './Text'
+import { createComponent } from '../createComponent'
+
+export interface AccordionItem {
+  id: string
+  title: string
+  content: ReactNode
+}
+
+export interface AccordionProps {
+  items: AccordionItem[]
+  /** Allow more than one item expanded at once (default false — see below) */
+  allowMultipleOpen?: boolean
+}
+
+const AccordionFrame = createComponent(YStack, {
+  name: 'Accordion',
+  width: '100%',
+  borderRadius: '$3',
+  borderWidth: 1,
+  borderColor: '$borderColor',
+  overflow: 'hidden',
+})
+
+const AccordionRow = createComponent(YStack, {
+  name: 'AccordionRow',
+  width: '100%',
+
+  variants: {
+    isLast: {
+      false: { borderBottomWidth: 1, borderColor: '$borderColor' },
+    },
+  } as const,
+})
+
+const AccordionHeader = createComponent(XStack, {
+  name: 'AccordionHeader',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  paddingHorizontal: '$4',
+  paddingVertical: '$3',
+  gap: '$2',
+  cursor: 'pointer',
+  backgroundColor: '$background',
+
+  variants: {
+    isOpen: {
+      true: { backgroundColor: '$backgroundHover' },
+    },
+  } as const,
+})
+
+const AccordionContent = createComponent(YStack, {
+  name: 'AccordionContent',
+  paddingHorizontal: '$4',
+  paddingBottom: '$3',
+  backgroundColor: '$background',
+})
+
+export function Accordion({ items, allowMultipleOpen = false }: AccordionProps) {
+  // Single-item mode uses a scalar; multi-item mode uses a Set — both stored in one piece of state
+  const [openIds, setOpenIds] = useState<Set<string>>(new Set())
+
+  const toggleItem = (id: string) => {
+    setOpenIds((current) => {
+      const isOpen = current.has(id)
+
+      // Only one item open at a time by default, matching the common FAQ pattern where
+      // expanding a new answer collapses the previous one to reduce visual clutter
+      if (!allowMultipleOpen) {
+        return isOpen ? new Set() : new Set([id])
+      }
+
+      const next = new Set(current)
+      if (isOpen) {
+        next.delete(id)
+      } else {
+        next.add(id)
+      }
+      return next
+    })
+  }
+
+  return (
+    <AccordionFrame>
+      {items.map((item, index) => {
+        const isOpen = openIds.has(item.id)
+
+        return (
+          <AccordionRow key={item.id} isLast={index === items.length - 1}>
+            <AccordionHeader
+              isOpen={isOpen}
+              onPress={() => toggleItem(item.id)}
+              role="button"
+              tabIndex={0}
+              aria-expanded={isOpen}
+              aria-controls={`accordion-content-${item.id}`}
+              onKeyDown={(e: React.KeyboardEvent) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  e.preventDefault()
+                  toggleItem(item.id)
+                }
+              }}
+            >
+              <Text flex={1}>{item.title}</Text>
+              <Icon
+                name="chevron-down"
+                size="sm"
+                color="muted"
+                style={{
+                  transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)',
+                  transition: 'transform 150ms ease',
+                }}
+              />
+            </AccordionHeader>
+            {isOpen && (
+              <AccordionContent id={`accordion-content-${item.id}`}>{item.content}</AccordionContent>
+            )}
+          </AccordionRow>
+        )
+      })}
+    </AccordionFrame>
+  )
+}
diff --git a/packages/ui/src/components/ActivityIcons.ts b/packages/ui/src/components/ActivityIcons.ts
new file mode 100644
index 00000000..ba1ce1cd
--- /dev/null
+++ b/packages/ui/src/components/ActivityIcons.ts
@@ -0,0 +1,6 @@
+// Re-export of the original @tamagui/lucide-icons components used by the
+// design reference for widget "activity" glyphs (#127 icon spec). Widget
+// packages import these from @goodwidget/ui rather than depending on
+// @tamagui/lucide-icons directly, keeping the icon library a single
+// dependency owned by the shared UI package.
+export { CalendarDays, UserPlus, Megaphone, Waves, HandCoins } from '@tamagui/lucide-icons'
diff --git a/packages/ui/src/components/Icon.tsx b/packages/ui/src/components/Icon.tsx
index 6ae1dd6c..a9e87b0e 100644
--- a/packages/ui/src/components/Icon.tsx
+++ b/packages/ui/src/components/Icon.tsx
@@ -70,6 +70,7 @@ const SVG_PATHS: Record<string, string | string[]> = {
   compass:
     'M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zM16.24 7.76l-2.12 6.36-6.36 2.12 2.12-6.36 6.36-2.12z',
   user: 'M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2M12 11a4 4 0 100-8 4 4 0 000 8z',
+  'log-out': ['M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4', 'M16 17l5-5-5-5', 'M21 12H9'],
 }
 
 // ---------------------------------------------------------------------------
diff --git a/packages/ui/src/components/ProgressBar.tsx b/packages/ui/src/components/ProgressBar.tsx
new file mode 100644
index 00000000..347ea9bf
--- /dev/null
+++ b/packages/ui/src/components/ProgressBar.tsx
@@ -0,0 +1,73 @@
+import React from 'react'
+import { XStack, YStack } from 'tamagui'
+import { Text } from './Text'
+import { createComponent } from '../createComponent'
+
+export interface ProgressBarProps {
+  /** Current progress amount */
+  value: number
+  /** Total amount value is measured against */
+  max: number
+  label?: string
+  /** 'success' drives the campaign-style green fill via the $success token */
+  variant?: 'default' | 'success'
+  /**
+   * Hides the numeric percentage on narrow viewports, keeping only the label
+   * and the visual bar. Off by default so existing consumers (governance-widget,
+   * staking-migration-widget) are unaffected.
+   */
+  hidePercentageOnMobile?: boolean
+}
+
+const ProgressTrack = createComponent(YStack, {
+  name: 'ProgressBarTrack',
+  width: '100%',
+  height: '$2',
+  borderRadius: '$full',
+  backgroundColor: '$backgroundHover',
+  overflow: 'hidden',
+})
+
+const ProgressFill = createComponent(YStack, {
+  name: 'ProgressBarFill',
+  height: '100%',
+  borderRadius: '$full',
+
+  variants: {
+    variant: {
+      default: { backgroundColor: '$primary' },
+      success: { backgroundColor: '$success' },
+    },
+  } as const,
+
+  defaultVariants: {
+    variant: 'default',
+  },
+})
+
+export function ProgressBar({ value, max, label, variant = 'default', hidePercentageOnMobile = false }: ProgressBarProps) {
+  // Guard against max <= 0 and clamp so callers can pass live/unbounded values safely
+  const percentage = max > 0 ? Math.min(100, Math.max(0, (value / max) * 100)) : 0
+
+  return (
+    <YStack width="100%" gap="$1">
+      {label && (
+        <XStack justifyContent="space-between" alignItems="center">
+          <Text variant="label">{label}</Text>
+          <Text variant="caption" $sm={hidePercentageOnMobile ? { display: 'none' } : undefined}>
+            {Math.round(percentage)}%
+          </Text>
+        </XStack>
+      )}
+      <ProgressTrack
+        role="progressbar"
+        aria-valuenow={Math.round(percentage)}
+        aria-valuemin={0}
+        aria-valuemax={100}
+        aria-label={label}
+      >
+        <ProgressFill variant={variant} width={`${percentage}%`} />
+      </ProgressTrack>
+    </YStack>
+  )
+}
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index 688a0c3e..faa698e9 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -74,11 +74,17 @@ export { PageWizardProvider, PageWizardShell, usePageWizard } from './components
 export type { PageWizardContextValue, PageWizardStep } from './components/PageWizard'
 export { Stepper } from './components/Stepper'
 export type { StepperProps, StepperStepItem, StepperStepStatus } from './components/Stepper'
+export { ProgressBar } from './components/ProgressBar'
+export type { ProgressBarProps } from './components/ProgressBar'
 
 // Icon — new component with inline SVG registry and semantic color/size props
 export { Icon } from './components/Icon'
 export type { IconName, IconSize, IconColor, IconProps } from './components/Icon'
 
+// Activity icons — re-exported originals from @tamagui/lucide-icons for the
+// widget "activity" glyph spec (#127). See components/ActivityIcons.ts.
+export { CalendarDays, UserPlus, Megaphone, Waves, HandCoins } from './components/ActivityIcons'
+
 // Dialog — new component backed by imperative store
 export {
   GoodWidgetDialog,
@@ -101,6 +107,8 @@ export { MiniAppShell } from './components/MiniAppShell'
 export { CircularActionButton } from './components/CircularActionButton'
 export type { CircularActionButtonProps } from './components/CircularActionButton'
 export { WidgetTabs } from './components/WidgetTabs'
+export { Accordion } from './components/Accordion'
+export type { AccordionProps, AccordionItem } from './components/Accordion'
 export { ActionSheet } from './components-test/ActionSheet'
 export { TokenInput } from './components-test/TokenInput'
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e20f4a9a..9670a28c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -49,7 +49,7 @@ importers:
         version: link:../../packages/ui
       '@reown/appkit':
         specifier: ^1.8.22
-        version: 1.8.22(@types/react@18.3.28)(@vercel/blob@2.4.0)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.6.0(react@18.3.1))(zod@3.25.76)
+        version: 1.8.22(@types/react@18.3.28)(@vercel/blob@2.4.0)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.6.0(react@18.3.1))(zod@4.1.11)
       '@tamagui/core':
         specifier: 1.121.0
         version: 1.121.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -246,6 +246,9 @@ importers:
       '@goodwidget/streaming-widget':
         specifier: workspace:*
         version: link:../../packages/streaming-widget
+      '@goodwidget/superfluid-campaign-widget':
+        specifier: workspace:*
+        version: link:../../packages/superfluid-campaign-widget
       '@goodwidget/ui':
         specifier: workspace:*
         version: link:../../packages/ui
@@ -439,19 +442,19 @@ importers:
         version: 2.1.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@reown/appkit':
         specifier: ^1.8.22
-        version: 1.8.22(@types/react@18.3.28)(@vercel/blob@2.4.0)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@18.3.1))(zod@4.1.11)
+        version: 1.8.22(@types/react@18.3.28)(@vercel/blob@2.4.0)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@18.3.1))(zod@3.25.76)
       '@reown/appkit-adapter-wagmi':
         specifier: ^1.8.22
-        version: 1.8.22(v6adbyiuvbtrgqm65ozlnb246m)
+        version: 1.8.22(isknxadknpp2cdfgti7v5vosu4)
       '@tanstack/react-query':
         specifier: ^5.101.2
         version: 5.101.2(react@18.3.1)
       viem:
         specifier: ^2.0.0
-        version: 2.48.4(typescript@5.9.3)(zod@4.1.11)
+        version: 2.48.4(typescript@5.9.3)(zod@3.25.76)
       wagmi:
         specifier: ^3.7.1
-        version: 3.7.1(@coinbase/wallet-sdk@4.3.6(@types/react@18.3.28)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@18.3.1))(zod@4.1.11))(@safe-global/safe-apps-provider@0.18.6(typescript@5.9.3)(zod@4.1.11))(@safe-global/safe-apps-sdk@9.1.0(typescript@5.9.3)(zod@4.1.11))(@tanstack/query-core@5.101.2)(@tanstack/react-query@5.101.2(react@18.3.1))(@types/react@18.3.28)(react@18.3.1)(typescript@5.9.3)(viem@2.48.4(typescript@5.9.3)(zod@4.1.11))
+        version: 3.7.1(@coinbase/wallet-sdk@4.3.6(@types/react@18.3.28)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@18.3.1))(zod@3.25.76))(@safe-global/safe-apps-provider@0.18.6(typescript@5.9.3)(zod@3.25.76))(@safe-global/safe-apps-sdk@9.1.0(typescript@5.9.3)(zod@3.25.76))(@tanstack/query-core@5.101.2)(@tanstack/react-query@5.101.2(react@18.3.1))(@types/react@18.3.28)(react@18.3.1)(typescript@5.9.3)(viem@2.48.4(typescript@5.9.3)(zod@3.25.76))
     devDependencies:
       '@types/react':
         specifier: ^18.3.0
@@ -620,6 +623,43 @@ importers:
         specifier: ^5.7.0
         version: 5.9.3
 
+  packages/superfluid-campaign-widget:
+    dependencies:
+      '@goodwidget/citizen-claim-widget':
+        specifier: workspace:*
+        version: link:../citizen-claim-widget
+      '@goodwidget/core':
+        specifier: workspace:*
+        version: link:../core
+      '@goodwidget/embed':
+        specifier: workspace:*
+        version: link:../embed
+      '@goodwidget/ui':
+        specifier: workspace:*
+        version: link:../ui
+      viem:
+        specifier: ^2.0.0
+        version: 2.48.4(typescript@5.9.3)(zod@4.1.11)
+    devDependencies:
+      '@types/react':
+        specifier: ^18.3.0
+        version: 18.3.28
+      '@types/react-dom':
+        specifier: ^18.3.0
+        version: 18.3.7(@types/react@18.3.28)
+      react:
+        specifier: ^18.3.0
+        version: 18.3.1
+      react-dom:
+        specifier: ^18.3.0
+        version: 18.3.1(react@18.3.1)
+      tsup:
+        specifier: ^8.4.0
+        version: 8.5.1(@swc/core@1.15.30)(postcss@8.5.8)(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.3)
+      typescript:
+        specifier: ^5.7.0
+        version: 5.9.3
+
   packages/ui:
     dependencies:
       '@react-native-clipboard/clipboard':
@@ -631,6 +671,9 @@ importers:
       '@tamagui/core':
         specifier: 1.121.0
         version: 1.121.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@tamagui/lucide-icons':
+        specifier: 1.121.0
+        version: 1.121.0(react-dom@18.3.1(react@18.3.1))(react-native-svg@15.15.5(react-native@0.76.9(@babel/core@7.29.0)(@babel/preset-env@7.29.2(@babel/core@7.29.0))(@types/react@18.3.28)(react@18.3.1))(react@18.3.1))(react@18.3.1)
       '@tamagui/themes':
         specifier: 1.121.0
         version: 1.121.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -1956,7 +1999,7 @@ packages:
 
   '@expo/bunyan@4.0.1':
     resolution: {integrity: sha512-+Lla7nYSiHZirgK+U/uYzsLv/X+HaJienbD5AKX1UQZHYfWaP+9uuQluRB4GrEVWF0GZ7vEVp/jzaOT9k/SQlg==}
-    engines: {'0': node >=0.10.0}
+    engines: {node: '>=0.10.0'}
 
   '@expo/cli@0.22.28':
     resolution: {integrity: sha512-lvt72KNitGuixYD2l3SZmRKVu2G4zJpmg5V7WfUBNpmUU5oODBw/6qmiJ6kSLAlfDozscUk+BBGknBBzxUrwrA==}
@@ -4842,7 +4885,7 @@ packages:
   '@xmldom/xmldom@0.7.13':
     resolution: {integrity: sha512-lm2GW5PkosIzccsaZIz7tp8cPADSIlIHWDFTR1N0SzfinhhYgeIQjFMz4rYzanCScr3DqQLeomUDArp6MWKm+g==}
     engines: {node: '>=10.0.0'}
-    deprecated: this version is no longer supported, please update to at least 0.8.*
+    deprecated: this version has critical issues, please update to the latest version
 
   '@xmldom/xmldom@0.8.11':
     resolution: {integrity: sha512-cQzWCtO6C8TQiYl1ruKNn2U6Ao4o4WBBcbL61yJl84x+j5sOWWFU9X7DpND8XZG3daDppSsigMdfAIl2upQBRw==}
@@ -10636,16 +10679,16 @@ snapshots:
       '@babel/helper-string-parser': 7.27.1
       '@babel/helper-validator-identifier': 7.28.5
 
-  '@base-org/account@2.4.0(@types/react@18.3.28)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@18.3.1))(zod@4.1.11)':
+  '@base-org/account@2.4.0(@types/react@18.3.28)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@18.3.1))(zod@3.25.76)':
     dependencies:
       '@coinbase/cdp-sdk': 1.52.0(typescript@5.9.3)
       '@noble/hashes': 1.4.0
       clsx: 1.2.1
       eventemitter3: 5.0.1
       idb-keyval: 6.2.1
-      ox: 0.6.9(typescript@5.9.3)(zod@4.1.11)
+      ox: 0.6.9(typescript@5.9.3)(zod@3.25.76)
       preact: 10.24.2
-      viem: 2.48.4(typescript@5.9.3)(zod@4.1.11)
+      viem: 2.48.4(typescript@5.9.3)(zod@3.25.76)
       zustand: 5.0.3(@types/react@18.3.28)(react@18.3.1)(use-sync-external-store@1.4.0(react@18.3.1))
     transitivePeerDependencies:
       - '@types/react'
@@ -10660,16 +10703,16 @@ snapshots:
       - zod
     optional: true
 
-  '@base-org/account@2.4.0(@types/react@18.3.28)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.6.0(react@18.3.1))(zod@3.25.76)':
+  '@base-org/account@2.4.0(@types/react@18.3.28)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.6.0(react@18.3.1))(zod@4.1.11)':
     dependencies:
       '@coinbase/cdp-sdk': 1.52.0(typescript@5.9.3)
       '@noble/hashes': 1.4.0
       clsx: 1.2.1
       eventemitter3: 5.0.1
       idb-keyval: 6.2.1
-      ox: 0.6.9(typescript@5.9.3)(zod@3.25.76)
+      ox: 0.6.9(typescript@5.9.3)(zod@4.1.11)
       preact: 10.24.2
-      viem: 2.48.4(typescript@5.9.3)(zod@3.25.76)
+      viem: 2.48.4(typescript@5.9.3)(zod@4.1.11)
       zustand: 5.0.3(@types/react@18.3.28)(react@18.3.1)(use-sync-external-store@1.6.0(react@18.3.1))
     transitivePeerDependencies:
       - '@types/react'
@@ -10710,28 +10753,7 @@ snapshots:
       - utf-8-validate
     optional: true
 
-  '@coinbase/wallet-sdk@4.3.6(@types/react@18.3.28)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@18.3.1))(zod@4.1.11)':
-    dependencies:
-      '@noble/hashes': 1.4.0
-      clsx: 1.2.1
-      eventemitter3: 5.0.1
-      idb-keyval: 6.2.1
-      ox: 0.6.9(typescript@5.9.3)(zod@4.1.11)
-      preact: 10.24.2
-      viem: 2.48.4(typescript@5.9.3)(zod@4.1.11)
-      zustand: 5.0.3(@types/react@18.3.28)(react@18.3.1)(use-sync-external-store@1.4.0(react@18.3.1))
-    transitivePeerDependencies:
-      - '@types/react'
-      - bufferutil
-      - immer
-      - react
-      - typescript
-      - use-sync-external-store
-      - utf-8-validate
-      - zod
-    optional: true
-
-  '@coinbase/wallet-sdk@4.3.6(@types/react@18.3.28)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.6.0(react@18.3.1))(zod@3.25.76)':
+  '@coinbase/wallet-sdk@4.3.6(@types/react@18.3.28)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@18.3.1))(zod@3.25.76)':
     dependencies:
       '@noble/hashes': 1.4.0
       clsx: 1.2.1
@@ -10740,7 +10762,7 @@ snapshots:
       ox: 0.6.9(typescript@5.9.3)(zod@3.25.76)
       preact: 10.24.2
       viem: 2.48.4(typescript@5.9.3)(zod@3.25.76)
-      zustand: 5.0.3(@types/react@18.3.28)(react@18.3.1)(use-sync-external-store@1.6.0(react@18.3.1))
+      zustand: 5.0.3(@types/react@18.3.28)(react@18.3.1)(use-sync-external-store@1.4.0(react@18.3.1))
     transitivePeerDependencies:
       - '@types/react'
       - bufferutil
@@ -12288,22 +12310,22 @@ snapshots:
 
   '@renovatebot/pep440@4.2.1': {}
 
-  '@reown/appkit-adapter-wagmi@1.8.22(v6adbyiuvbtrgqm65ozlnb246m)':
+  '@reown/appkit-adapter-wagmi@1.8.22(isknxadknpp2cdfgti7v5vosu4)':
     dependencies:
-      '@reown/appkit': 1.8.22(@types/react@18.3.28)(@vercel/blob@2.4.0)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@18.3.1))(zod@4.1.11)
-      '@reown/appkit-common': 1.8.22(typescript@5.9.3)(zod@4.1.11)
-      '@reown/appkit-controllers': 1.8.22(@types/react@18.3.28)(@vercel/blob@2.4.0)(react@18.3.1)(typescript@5.9.3)(zod@4.1.11)
+      '@reown/appkit': 1.8.22(@types/react@18.3.28)(@vercel/blob@2.4.0)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@18.3.1))(zod@3.25.76)
+      '@reown/appkit-common': 1.8.22(typescript@5.9.3)(zod@3.25.76)
+      '@reown/appkit-controllers': 1.8.22(@types/react@18.3.28)(@vercel/blob@2.4.0)(react@18.3.1)(typescript@5.9.3)(zod@3.25.76)
       '@reown/appkit-polyfills': 1.8.22
-      '@reown/appkit-scaffold-ui': 1.8.22(@types/react@18.3.28)(@vercel/blob@2.4.0)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@18.3.1))(valtio@2.1.7(@types/react@18.3.28)(react@18.3.1))(zod@4.1.11)
-      '@reown/appkit-utils': 1.8.22(@types/react@18.3.28)(@vercel/blob@2.4.0)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@18.3.1))(valtio@2.1.7(@types/react@18.3.28)(react@18.3.1))(zod@4.1.11)
+      '@reown/appkit-scaffold-ui': 1.8.22(@types/react@18.3.28)(@vercel/blob@2.4.0)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@18.3.1))(valtio@2.1.7(@types/react@18.3.28)(react@18.3.1))(zod@3.25.76)
+      '@reown/appkit-utils': 1.8.22(@types/react@18.3.28)(@vercel/blob@2.4.0)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@18.3.1))(valtio@2.1.7(@types/react@18.3.28)(react@18.3.1))(zod@3.25.76)
       '@reown/appkit-wallet': 1.8.22(typescript@5.9.3)
-      '@wagmi/core': 3.6.1(@tanstack/query-core@5.101.2)(@types/react@18.3.28)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@18.3.1))(viem@2.48.4(typescript@5.9.3)(zod@4.1.11))
-      '@walletconnect/universal-provider': 2.23.7(@vercel/blob@2.4.0)(typescript@5.9.3)(zod@4.1.11)
+      '@wagmi/core': 3.6.1(@tanstack/query-core@5.101.2)(@types/react@18.3.28)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@18.3.1))(viem@2.48.4(typescript@5.9.3)(zod@3.25.76))
+      '@walletconnect/universal-provider': 2.23.7(@vercel/blob@2.4.0)(typescript@5.9.3)(zod@3.25.76)
       valtio: 2.1.7(@types/react@18.3.28)(react@18.3.1)
-      viem: 2.48.4(typescript@5.9.3)(zod@4.1.11)
-      wagmi: 3.7.1(@coinbase/wallet-sdk@4.3.6(@types/react@18.3.28)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@18.3.1))(zod@4.1.11))(@safe-global/safe-apps-provider@0.18.6(typescript@5.9.3)(zod@4.1.11))(@safe-global/safe-apps-sdk@9.1.0(typescript@5.9.3)(zod@4.1.11))(@tanstack/query-core@5.101.2)(@tanstack/react-query@5.101.2(react@18.3.1))(@types/react@18.3.28)(react@18.3.1)(typescript@5.9.3)(viem@2.48.4(typescript@5.9.3)(zod@4.1.11))
+      viem: 2.48.4(typescript@5.9.3)(zod@3.25.76)
+      wagmi: 3.7.1(@coinbase/wallet-sdk@4.3.6(@types/react@18.3.28)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@18.3.1))(zod@3.25.76))(@safe-global/safe-apps-provider@0.18.6(typescript@5.9.3)(zod@3.25.76))(@safe-global/safe-apps-sdk@9.1.0(typescript@5.9.3)(zod@3.25.76))(@tanstack/query-core@5.101.2)(@tanstack/react-query@5.101.2(react@18.3.1))(@types/react@18.3.28)(react@18.3.1)(typescript@5.9.3)(viem@2.48.4(typescript@5.9.3)(zod@3.25.76))
     optionalDependencies:
-      '@wagmi/connectors': 8.0.8(@coinbase/wallet-sdk@4.3.6(@types/react@18.3.28)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@18.3.1))(zod@4.1.11))(@safe-global/safe-apps-provider@0.18.6(typescript@5.9.3)(zod@4.1.11))(@safe-global/safe-apps-sdk@9.1.0(typescript@5.9.3)(zod@4.1.11))(@wagmi/core@3.6.1(@tanstack/query-core@5.101.2)(@types/react@18.3.28)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@18.3.1))(viem@2.48.4(typescript@5.9.3)(zod@4.1.11)))(typescript@5.9.3)(viem@2.48.4(typescript@5.9.3)(zod@4.1.11))
+      '@wagmi/connectors': 8.0.8(@coinbase/wallet-sdk@4.3.6(@types/react@18.3.28)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@18.3.1))(zod@3.25.76))(@safe-global/safe-apps-provider@0.18.6(typescript@5.9.3)(zod@3.25.76))(@safe-global/safe-apps-sdk@9.1.0(typescript@5.9.3)(zod@3.25.76))(@wagmi/core@3.6.1(@tanstack/query-core@5.101.2)(@types/react@18.3.28)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@18.3.1))(viem@2.48.4(typescript@5.9.3)(zod@3.25.76)))(typescript@5.9.3)(viem@2.48.4(typescript@5.9.3)(zod@3.25.76))
     transitivePeerDependencies:
       - '@azure/app-configuration'
       - '@azure/cosmos'
@@ -12447,12 +12469,12 @@ snapshots:
       - utf-8-validate
       - zod
 
-  '@reown/appkit-pay@1.8.22(@types/react@18.3.28)(@vercel/blob@2.4.0)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@18.3.1))(zod@4.1.11)':
+  '@reown/appkit-pay@1.8.22(@types/react@18.3.28)(@vercel/blob@2.4.0)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@18.3.1))(zod@3.25.76)':
     dependencies:
-      '@reown/appkit-common': 1.8.22(typescript@5.9.3)(zod@4.1.11)
-      '@reown/appkit-controllers': 1.8.22(@types/react@18.3.28)(@vercel/blob@2.4.0)(react@18.3.1)(typescript@5.9.3)(zod@4.1.11)
-      '@reown/appkit-ui': 1.8.22(@types/react@18.3.28)(@vercel/blob@2.4.0)(react@18.3.1)(typescript@5.9.3)(zod@4.1.11)
-      '@reown/appkit-utils': 1.8.22(@types/react@18.3.28)(@vercel/blob@2.4.0)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@18.3.1))(valtio@2.1.7(@types/react@18.3.28)(react@18.3.1))(zod@4.1.11)
+      '@reown/appkit-common': 1.8.22(typescript@5.9.3)(zod@3.25.76)
+      '@reown/appkit-controllers': 1.8.22(@types/react@18.3.28)(@vercel/blob@2.4.0)(react@18.3.1)(typescript@5.9.3)(zod@3.25.76)
+      '@reown/appkit-ui': 1.8.22(@types/react@18.3.28)(@vercel/blob@2.4.0)(react@18.3.1)(typescript@5.9.3)(zod@3.25.76)
+      '@reown/appkit-utils': 1.8.22(@types/react@18.3.28)(@vercel/blob@2.4.0)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@18.3.1))(valtio@2.1.7(@types/react@18.3.28)(react@18.3.1))(zod@3.25.76)
       lit: 3.3.0
       valtio: 2.1.7(@types/react@18.3.28)(react@18.3.1)
     transitivePeerDependencies:
@@ -12487,12 +12509,12 @@ snapshots:
       - utf-8-validate
       - zod
 
-  '@reown/appkit-pay@1.8.22(@types/react@18.3.28)(@vercel/blob@2.4.0)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.6.0(react@18.3.1))(zod@3.25.76)':
+  '@reown/appkit-pay@1.8.22(@types/react@18.3.28)(@vercel/blob@2.4.0)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.6.0(react@18.3.1))(zod@4.1.11)':
     dependencies:
-      '@reown/appkit-common': 1.8.22(typescript@5.9.3)(zod@3.25.76)
-      '@reown/appkit-controllers': 1.8.22(@types/react@18.3.28)(@vercel/blob@2.4.0)(react@18.3.1)(typescript@5.9.3)(zod@3.25.76)
-      '@reown/appkit-ui': 1.8.22(@types/react@18.3.28)(@vercel/blob@2.4.0)(react@18.3.1)(typescript@5.9.3)(zod@3.25.76)
-      '@reown/appkit-utils': 1.8.22(@types/react@18.3.28)(@vercel/blob@2.4.0)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.6.0(react@18.3.1))(valtio@2.1.7(@types/react@18.3.28)(react@18.3.1))(zod@3.25.76)
+      '@reown/appkit-common': 1.8.22(typescript@5.9.3)(zod@4.1.11)
+      '@reown/appkit-controllers': 1.8.22(@types/react@18.3.28)(@vercel/blob@2.4.0)(react@18.3.1)(typescript@5.9.3)(zod@4.1.11)
+      '@reown/appkit-ui': 1.8.22(@types/react@18.3.28)(@vercel/blob@2.4.0)(react@18.3.1)(typescript@5.9.3)(zod@4.1.11)
+      '@reown/appkit-utils': 1.8.22(@types/react@18.3.28)(@vercel/blob@2.4.0)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.6.0(react@18.3.1))(valtio@2.1.7(@types/react@18.3.28)(react@18.3.1))(zod@4.1.11)
       lit: 3.3.0
       valtio: 2.1.7(@types/react@18.3.28)(react@18.3.1)
     transitivePeerDependencies:
@@ -12531,13 +12553,13 @@ snapshots:
     dependencies:
       buffer: 6.0.3
 
-  '@reown/appkit-scaffold-ui@1.8.22(@types/react@18.3.28)(@vercel/blob@2.4.0)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@18.3.1))(valtio@2.1.7(@types/react@18.3.28)(react@18.3.1))(zod@4.1.11)':
+  '@reown/appkit-scaffold-ui@1.8.22(@types/react@18.3.28)(@vercel/blob@2.4.0)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@18.3.1))(valtio@2.1.7(@types/react@18.3.28)(react@18.3.1))(zod@3.25.76)':
     dependencies:
-      '@reown/appkit-common': 1.8.22(typescript@5.9.3)(zod@4.1.11)
-      '@reown/appkit-controllers': 1.8.22(@types/react@18.3.28)(@vercel/blob@2.4.0)(react@18.3.1)(typescript@5.9.3)(zod@4.1.11)
-      '@reown/appkit-pay': 1.8.22(@types/react@18.3.28)(@vercel/blob@2.4.0)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@18.3.1))(zod@4.1.11)
-      '@reown/appkit-ui': 1.8.22(@types/react@18.3.28)(@vercel/blob@2.4.0)(react@18.3.1)(typescript@5.9.3)(zod@4.1.11)
-      '@reown/appkit-utils': 1.8.22(@types/react@18.3.28)(@vercel/blob@2.4.0)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@18.3.1))(valtio@2.1.7(@types/react@18.3.28)(react@18.3.1))(zod@4.1.11)
+      '@reown/appkit-common': 1.8.22(typescript@5.9.3)(zod@3.25.76)
+      '@reown/appkit-controllers': 1.8.22(@types/react@18.3.28)(@vercel/blob@2.4.0)(react@18.3.1)(typescript@5.9.3)(zod@3.25.76)
+      '@reown/appkit-pay': 1.8.22(@types/react@18.3.28)(@vercel/blob@2.4.0)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@18.3.1))(zod@3.25.76)
+      '@reown/appkit-ui': 1.8.22(@types/react@18.3.28)(@vercel/blob@2.4.0)(react@18.3.1)(typescript@5.9.3)(zod@3.25.76)
+      '@reown/appkit-utils': 1.8.22(@types/react@18.3.28)(@vercel/blob@2.4.0)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@18.3.1))(valtio@2.1.7(@types/react@18.3.28)(react@18.3.1))(zod@3.25.76)
       '@reown/appkit-wallet': 1.8.22(typescript@5.9.3)
       lit: 3.3.0
     transitivePeerDependencies:
@@ -12573,13 +12595,13 @@ snapshots:
       - valtio
       - zod
 
-  '@reown/appkit-scaffold-ui@1.8.22(@types/react@18.3.28)(@vercel/blob@2.4.0)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.6.0(react@18.3.1))(valtio@2.1.7(@types/react@18.3.28)(react@18.3.1))(zod@3.25.76)':
+  '@reown/appkit-scaffold-ui@1.8.22(@types/react@18.3.28)(@vercel/blob@2.4.0)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.6.0(react@18.3.1))(valtio@2.1.7(@types/react@18.3.28)(react@18.3.1))(zod@4.1.11)':
     dependencies:
-      '@reown/appkit-common': 1.8.22(typescript@5.9.3)(zod@3.25.76)
-      '@reown/appkit-controllers': 1.8.22(@types/react@18.3.28)(@vercel/blob@2.4.0)(react@18.3.1)(typescript@5.9.3)(zod@3.25.76)
-      '@reown/appkit-pay': 1.8.22(@types/react@18.3.28)(@vercel/blob@2.4.0)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.6.0(react@18.3.1))(zod@3.25.76)
-      '@reown/appkit-ui': 1.8.22(@types/react@18.3.28)(@vercel/blob@2.4.0)(react@18.3.1)(typescript@5.9.3)(zod@3.25.76)
-      '@reown/appkit-utils': 1.8.22(@types/react@18.3.28)(@vercel/blob@2.4.0)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.6.0(react@18.3.1))(valtio@2.1.7(@types/react@18.3.28)(react@18.3.1))(zod@3.25.76)
+      '@reown/appkit-common': 1.8.22(typescript@5.9.3)(zod@4.1.11)
+      '@reown/appkit-controllers': 1.8.22(@types/react@18.3.28)(@vercel/blob@2.4.0)(react@18.3.1)(typescript@5.9.3)(zod@4.1.11)
+      '@reown/appkit-pay': 1.8.22(@types/react@18.3.28)(@vercel/blob@2.4.0)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.6.0(react@18.3.1))(zod@4.1.11)
+      '@reown/appkit-ui': 1.8.22(@types/react@18.3.28)(@vercel/blob@2.4.0)(react@18.3.1)(typescript@5.9.3)(zod@4.1.11)
+      '@reown/appkit-utils': 1.8.22(@types/react@18.3.28)(@vercel/blob@2.4.0)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.6.0(react@18.3.1))(valtio@2.1.7(@types/react@18.3.28)(react@18.3.1))(zod@4.1.11)
       '@reown/appkit-wallet': 1.8.22(typescript@5.9.3)
       lit: 3.3.0
     transitivePeerDependencies:
@@ -12687,22 +12709,22 @@ snapshots:
       - utf-8-validate
       - zod
 
-  '@reown/appkit-utils@1.8.22(@types/react@18.3.28)(@vercel/blob@2.4.0)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@18.3.1))(valtio@2.1.7(@types/react@18.3.28)(react@18.3.1))(zod@4.1.11)':
+  '@reown/appkit-utils@1.8.22(@types/react@18.3.28)(@vercel/blob@2.4.0)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@18.3.1))(valtio@2.1.7(@types/react@18.3.28)(react@18.3.1))(zod@3.25.76)':
     dependencies:
-      '@reown/appkit-common': 1.8.22(typescript@5.9.3)(zod@4.1.11)
-      '@reown/appkit-controllers': 1.8.22(@types/react@18.3.28)(@vercel/blob@2.4.0)(react@18.3.1)(typescript@5.9.3)(zod@4.1.11)
+      '@reown/appkit-common': 1.8.22(typescript@5.9.3)(zod@3.25.76)
+      '@reown/appkit-controllers': 1.8.22(@types/react@18.3.28)(@vercel/blob@2.4.0)(react@18.3.1)(typescript@5.9.3)(zod@3.25.76)
       '@reown/appkit-polyfills': 1.8.22
       '@reown/appkit-wallet': 1.8.22(typescript@5.9.3)
       '@wallet-standard/wallet': 1.1.0
       '@walletconnect/logger': 3.0.2
-      '@walletconnect/universal-provider': 2.23.7(@vercel/blob@2.4.0)(typescript@5.9.3)(zod@4.1.11)
+      '@walletconnect/universal-provider': 2.23.7(@vercel/blob@2.4.0)(typescript@5.9.3)(zod@3.25.76)
       valtio: 2.1.7(@types/react@18.3.28)(react@18.3.1)
-      viem: 2.48.4(typescript@5.9.3)(zod@4.1.11)
+      viem: 2.48.4(typescript@5.9.3)(zod@3.25.76)
     optionalDependencies:
-      '@base-org/account': 2.4.0(@types/react@18.3.28)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@18.3.1))(zod@4.1.11)
-      '@coinbase/wallet-sdk': 4.3.6(@types/react@18.3.28)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@18.3.1))(zod@4.1.11)
-      '@safe-global/safe-apps-provider': 0.18.6(typescript@5.9.3)(zod@4.1.11)
-      '@safe-global/safe-apps-sdk': 9.1.0(typescript@5.9.3)(zod@4.1.11)
+      '@base-org/account': 2.4.0(@types/react@18.3.28)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@18.3.1))(zod@3.25.76)
+      '@coinbase/wallet-sdk': 4.3.6(@types/react@18.3.28)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@18.3.1))(zod@3.25.76)
+      '@safe-global/safe-apps-provider': 0.18.6(typescript@5.9.3)(zod@3.25.76)
+      '@safe-global/safe-apps-sdk': 9.1.0(typescript@5.9.3)(zod@3.25.76)
     transitivePeerDependencies:
       - '@azure/app-configuration'
       - '@azure/cosmos'
@@ -12735,22 +12757,22 @@ snapshots:
       - utf-8-validate
       - zod
 
-  '@reown/appkit-utils@1.8.22(@types/react@18.3.28)(@vercel/blob@2.4.0)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.6.0(react@18.3.1))(valtio@2.1.7(@types/react@18.3.28)(react@18.3.1))(zod@3.25.76)':
+  '@reown/appkit-utils@1.8.22(@types/react@18.3.28)(@vercel/blob@2.4.0)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.6.0(react@18.3.1))(valtio@2.1.7(@types/react@18.3.28)(react@18.3.1))(zod@4.1.11)':
     dependencies:
-      '@reown/appkit-common': 1.8.22(typescript@5.9.3)(zod@3.25.76)
-      '@reown/appkit-controllers': 1.8.22(@types/react@18.3.28)(@vercel/blob@2.4.0)(react@18.3.1)(typescript@5.9.3)(zod@3.25.76)
+      '@reown/appkit-common': 1.8.22(typescript@5.9.3)(zod@4.1.11)
+      '@reown/appkit-controllers': 1.8.22(@types/react@18.3.28)(@vercel/blob@2.4.0)(react@18.3.1)(typescript@5.9.3)(zod@4.1.11)
       '@reown/appkit-polyfills': 1.8.22
       '@reown/appkit-wallet': 1.8.22(typescript@5.9.3)
       '@wallet-standard/wallet': 1.1.0
       '@walletconnect/logger': 3.0.2
-      '@walletconnect/universal-provider': 2.23.7(@vercel/blob@2.4.0)(typescript@5.9.3)(zod@3.25.76)
+      '@walletconnect/universal-provider': 2.23.7(@vercel/blob@2.4.0)(typescript@5.9.3)(zod@4.1.11)
       valtio: 2.1.7(@types/react@18.3.28)(react@18.3.1)
-      viem: 2.48.4(typescript@5.9.3)(zod@3.25.76)
+      viem: 2.48.4(typescript@5.9.3)(zod@4.1.11)
     optionalDependencies:
-      '@base-org/account': 2.4.0(@types/react@18.3.28)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.6.0(react@18.3.1))(zod@3.25.76)
-      '@coinbase/wallet-sdk': 4.3.6(@types/react@18.3.28)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.6.0(react@18.3.1))(zod@3.25.76)
-      '@safe-global/safe-apps-provider': 0.18.6(typescript@5.9.3)(zod@3.25.76)
-      '@safe-global/safe-apps-sdk': 9.1.0(typescript@5.9.3)(zod@3.25.76)
+      '@base-org/account': 2.4.0(@types/react@18.3.28)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.6.0(react@18.3.1))(zod@4.1.11)
+      '@coinbase/wallet-sdk': 4.3.6(@types/react@18.3.28)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.6.0(react@18.3.1))(zod@4.1.11)
+      '@safe-global/safe-apps-provider': 0.18.6(typescript@5.9.3)(zod@4.1.11)
+      '@safe-global/safe-apps-sdk': 9.1.0(typescript@5.9.3)(zod@4.1.11)
     transitivePeerDependencies:
       - '@azure/app-configuration'
       - '@azure/cosmos'
@@ -12794,21 +12816,21 @@ snapshots:
       - typescript
       - utf-8-validate
 
-  '@reown/appkit@1.8.22(@types/react@18.3.28)(@vercel/blob@2.4.0)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@18.3.1))(zod@4.1.11)':
+  '@reown/appkit@1.8.22(@types/react@18.3.28)(@vercel/blob@2.4.0)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@18.3.1))(zod@3.25.76)':
     dependencies:
-      '@reown/appkit-common': 1.8.22(typescript@5.9.3)(zod@4.1.11)
-      '@reown/appkit-controllers': 1.8.22(@types/react@18.3.28)(@vercel/blob@2.4.0)(react@18.3.1)(typescript@5.9.3)(zod@4.1.11)
-      '@reown/appkit-pay': 1.8.22(@types/react@18.3.28)(@vercel/blob@2.4.0)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@18.3.1))(zod@4.1.11)
+      '@reown/appkit-common': 1.8.22(typescript@5.9.3)(zod@3.25.76)
+      '@reown/appkit-controllers': 1.8.22(@types/react@18.3.28)(@vercel/blob@2.4.0)(react@18.3.1)(typescript@5.9.3)(zod@3.25.76)
+      '@reown/appkit-pay': 1.8.22(@types/react@18.3.28)(@vercel/blob@2.4.0)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@18.3.1))(zod@3.25.76)
       '@reown/appkit-polyfills': 1.8.22
-      '@reown/appkit-scaffold-ui': 1.8.22(@types/react@18.3.28)(@vercel/blob@2.4.0)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@18.3.1))(valtio@2.1.7(@types/react@18.3.28)(react@18.3.1))(zod@4.1.11)
-      '@reown/appkit-ui': 1.8.22(@types/react@18.3.28)(@vercel/blob@2.4.0)(react@18.3.1)(typescript@5.9.3)(zod@4.1.11)
-      '@reown/appkit-utils': 1.8.22(@types/react@18.3.28)(@vercel/blob@2.4.0)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@18.3.1))(valtio@2.1.7(@types/react@18.3.28)(react@18.3.1))(zod@4.1.11)
+      '@reown/appkit-scaffold-ui': 1.8.22(@types/react@18.3.28)(@vercel/blob@2.4.0)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@18.3.1))(valtio@2.1.7(@types/react@18.3.28)(react@18.3.1))(zod@3.25.76)
+      '@reown/appkit-ui': 1.8.22(@types/react@18.3.28)(@vercel/blob@2.4.0)(react@18.3.1)(typescript@5.9.3)(zod@3.25.76)
+      '@reown/appkit-utils': 1.8.22(@types/react@18.3.28)(@vercel/blob@2.4.0)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@18.3.1))(valtio@2.1.7(@types/react@18.3.28)(react@18.3.1))(zod@3.25.76)
       '@reown/appkit-wallet': 1.8.22(typescript@5.9.3)
-      '@walletconnect/universal-provider': 2.23.7(@vercel/blob@2.4.0)(typescript@5.9.3)(zod@4.1.11)
+      '@walletconnect/universal-provider': 2.23.7(@vercel/blob@2.4.0)(typescript@5.9.3)(zod@3.25.76)
       bs58: 6.0.0
       semver: 7.7.2
       valtio: 2.1.7(@types/react@18.3.28)(react@18.3.1)
-      viem: 2.48.4(typescript@5.9.3)(zod@4.1.11)
+      viem: 2.48.4(typescript@5.9.3)(zod@3.25.76)
     optionalDependencies:
       '@lit/react': 1.0.8(@types/react@18.3.28)
     transitivePeerDependencies:
@@ -12843,21 +12865,21 @@ snapshots:
       - utf-8-validate
       - zod
 
-  '@reown/appkit@1.8.22(@types/react@18.3.28)(@vercel/blob@2.4.0)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.6.0(react@18.3.1))(zod@3.25.76)':
+  '@reown/appkit@1.8.22(@types/react@18.3.28)(@vercel/blob@2.4.0)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.6.0(react@18.3.1))(zod@4.1.11)':
     dependencies:
-      '@reown/appkit-common': 1.8.22(typescript@5.9.3)(zod@3.25.76)
-      '@reown/appkit-controllers': 1.8.22(@types/react@18.3.28)(@vercel/blob@2.4.0)(react@18.3.1)(typescript@5.9.3)(zod@3.25.76)
-      '@reown/appkit-pay': 1.8.22(@types/react@18.3.28)(@vercel/blob@2.4.0)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.6.0(react@18.3.1))(zod@3.25.76)
+      '@reown/appkit-common': 1.8.22(typescript@5.9.3)(zod@4.1.11)
+      '@reown/appkit-controllers': 1.8.22(@types/react@18.3.28)(@vercel/blob@2.4.0)(react@18.3.1)(typescript@5.9.3)(zod@4.1.11)
+      '@reown/appkit-pay': 1.8.22(@types/react@18.3.28)(@vercel/blob@2.4.0)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.6.0(react@18.3.1))(zod@4.1.11)
       '@reown/appkit-polyfills': 1.8.22
-      '@reown/appkit-scaffold-ui': 1.8.22(@types/react@18.3.28)(@vercel/blob@2.4.0)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.6.0(react@18.3.1))(valtio@2.1.7(@types/react@18.3.28)(react@18.3.1))(zod@3.25.76)
-      '@reown/appkit-ui': 1.8.22(@types/react@18.3.28)(@vercel/blob@2.4.0)(react@18.3.1)(typescript@5.9.3)(zod@3.25.76)
-      '@reown/appkit-utils': 1.8.22(@types/react@18.3.28)(@vercel/blob@2.4.0)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.6.0(react@18.3.1))(valtio@2.1.7(@types/react@18.3.28)(react@18.3.1))(zod@3.25.76)
+      '@reown/appkit-scaffold-ui': 1.8.22(@types/react@18.3.28)(@vercel/blob@2.4.0)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.6.0(react@18.3.1))(valtio@2.1.7(@types/react@18.3.28)(react@18.3.1))(zod@4.1.11)
+      '@reown/appkit-ui': 1.8.22(@types/react@18.3.28)(@vercel/blob@2.4.0)(react@18.3.1)(typescript@5.9.3)(zod@4.1.11)
+      '@reown/appkit-utils': 1.8.22(@types/react@18.3.28)(@vercel/blob@2.4.0)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.6.0(react@18.3.1))(valtio@2.1.7(@types/react@18.3.28)(react@18.3.1))(zod@4.1.11)
       '@reown/appkit-wallet': 1.8.22(typescript@5.9.3)
-      '@walletconnect/universal-provider': 2.23.7(@vercel/blob@2.4.0)(typescript@5.9.3)(zod@3.25.76)
+      '@walletconnect/universal-provider': 2.23.7(@vercel/blob@2.4.0)(typescript@5.9.3)(zod@4.1.11)
       bs58: 6.0.0
       semver: 7.7.2
       valtio: 2.1.7(@types/react@18.3.28)(react@18.3.1)
-      viem: 2.48.4(typescript@5.9.3)(zod@3.25.76)
+      viem: 2.48.4(typescript@5.9.3)(zod@4.1.11)
     optionalDependencies:
       '@lit/react': 1.0.8(@types/react@18.3.28)
     transitivePeerDependencies:
@@ -15922,14 +15944,14 @@ snapshots:
       loupe: 3.2.1
       tinyrainbow: 1.2.0
 
-  '@wagmi/connectors@8.0.22(@coinbase/wallet-sdk@4.3.6(@types/react@18.3.28)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@18.3.1))(zod@4.1.11))(@safe-global/safe-apps-provider@0.18.6(typescript@5.9.3)(zod@4.1.11))(@safe-global/safe-apps-sdk@9.1.0(typescript@5.9.3)(zod@4.1.11))(@wagmi/core@3.6.1(@tanstack/query-core@5.101.2)(@types/react@18.3.28)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@18.3.1))(viem@2.48.4(typescript@5.9.3)(zod@4.1.11)))(typescript@5.9.3)(viem@2.48.4(typescript@5.9.3)(zod@4.1.11))':
+  '@wagmi/connectors@8.0.22(@coinbase/wallet-sdk@4.3.6(@types/react@18.3.28)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@18.3.1))(zod@3.25.76))(@safe-global/safe-apps-provider@0.18.6(typescript@5.9.3)(zod@3.25.76))(@safe-global/safe-apps-sdk@9.1.0(typescript@5.9.3)(zod@3.25.76))(@wagmi/core@3.6.1(@tanstack/query-core@5.101.2)(@types/react@18.3.28)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@18.3.1))(viem@2.48.4(typescript@5.9.3)(zod@3.25.76)))(typescript@5.9.3)(viem@2.48.4(typescript@5.9.3)(zod@3.25.76))':
     dependencies:
-      '@wagmi/core': 3.6.1(@tanstack/query-core@5.101.2)(@types/react@18.3.28)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@18.3.1))(viem@2.48.4(typescript@5.9.3)(zod@4.1.11))
-      viem: 2.48.4(typescript@5.9.3)(zod@4.1.11)
+      '@wagmi/core': 3.6.1(@tanstack/query-core@5.101.2)(@types/react@18.3.28)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@18.3.1))(viem@2.48.4(typescript@5.9.3)(zod@3.25.76))
+      viem: 2.48.4(typescript@5.9.3)(zod@3.25.76)
     optionalDependencies:
-      '@coinbase/wallet-sdk': 4.3.6(@types/react@18.3.28)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@18.3.1))(zod@4.1.11)
-      '@safe-global/safe-apps-provider': 0.18.6(typescript@5.9.3)(zod@4.1.11)
-      '@safe-global/safe-apps-sdk': 9.1.0(typescript@5.9.3)(zod@4.1.11)
+      '@coinbase/wallet-sdk': 4.3.6(@types/react@18.3.28)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@18.3.1))(zod@3.25.76)
+      '@safe-global/safe-apps-provider': 0.18.6(typescript@5.9.3)(zod@3.25.76)
+      '@safe-global/safe-apps-sdk': 9.1.0(typescript@5.9.3)(zod@3.25.76)
       typescript: 5.9.3
 
   '@wagmi/connectors@8.0.22(@coinbase/wallet-sdk@4.3.6(@types/react@18.3.28)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.6.0(react@18.3.1))(zod@4.1.11))(@safe-global/safe-apps-provider@0.18.6(typescript@5.9.3)(zod@4.1.11))(@safe-global/safe-apps-sdk@9.1.0(typescript@5.9.3)(zod@4.1.11))(@wagmi/core@3.6.1(@tanstack/query-core@5.101.2)(@types/react@18.3.28)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@18.3.1))(viem@2.48.4(typescript@5.9.3)(zod@4.1.11)))(typescript@5.9.3)(viem@2.48.4(typescript@5.9.3)(zod@4.1.11))':
@@ -15942,17 +15964,32 @@ snapshots:
       '@safe-global/safe-apps-sdk': 9.1.0(typescript@5.9.3)(zod@4.1.11)
       typescript: 5.9.3
 
-  '@wagmi/connectors@8.0.8(@coinbase/wallet-sdk@4.3.6(@types/react@18.3.28)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@18.3.1))(zod@4.1.11))(@safe-global/safe-apps-provider@0.18.6(typescript@5.9.3)(zod@4.1.11))(@safe-global/safe-apps-sdk@9.1.0(typescript@5.9.3)(zod@4.1.11))(@wagmi/core@3.6.1(@tanstack/query-core@5.101.2)(@types/react@18.3.28)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@18.3.1))(viem@2.48.4(typescript@5.9.3)(zod@4.1.11)))(typescript@5.9.3)(viem@2.48.4(typescript@5.9.3)(zod@4.1.11))':
+  '@wagmi/connectors@8.0.8(@coinbase/wallet-sdk@4.3.6(@types/react@18.3.28)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@18.3.1))(zod@3.25.76))(@safe-global/safe-apps-provider@0.18.6(typescript@5.9.3)(zod@3.25.76))(@safe-global/safe-apps-sdk@9.1.0(typescript@5.9.3)(zod@3.25.76))(@wagmi/core@3.6.1(@tanstack/query-core@5.101.2)(@types/react@18.3.28)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@18.3.1))(viem@2.48.4(typescript@5.9.3)(zod@3.25.76)))(typescript@5.9.3)(viem@2.48.4(typescript@5.9.3)(zod@3.25.76))':
     dependencies:
-      '@wagmi/core': 3.6.1(@tanstack/query-core@5.101.2)(@types/react@18.3.28)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@18.3.1))(viem@2.48.4(typescript@5.9.3)(zod@4.1.11))
-      viem: 2.48.4(typescript@5.9.3)(zod@4.1.11)
+      '@wagmi/core': 3.6.1(@tanstack/query-core@5.101.2)(@types/react@18.3.28)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@18.3.1))(viem@2.48.4(typescript@5.9.3)(zod@3.25.76))
+      viem: 2.48.4(typescript@5.9.3)(zod@3.25.76)
     optionalDependencies:
-      '@coinbase/wallet-sdk': 4.3.6(@types/react@18.3.28)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@18.3.1))(zod@4.1.11)
-      '@safe-global/safe-apps-provider': 0.18.6(typescript@5.9.3)(zod@4.1.11)
-      '@safe-global/safe-apps-sdk': 9.1.0(typescript@5.9.3)(zod@4.1.11)
+      '@coinbase/wallet-sdk': 4.3.6(@types/react@18.3.28)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@18.3.1))(zod@3.25.76)
+      '@safe-global/safe-apps-provider': 0.18.6(typescript@5.9.3)(zod@3.25.76)
+      '@safe-global/safe-apps-sdk': 9.1.0(typescript@5.9.3)(zod@3.25.76)
       typescript: 5.9.3
     optional: true
 
+  '@wagmi/core@3.6.1(@tanstack/query-core@5.101.2)(@types/react@18.3.28)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@18.3.1))(viem@2.48.4(typescript@5.9.3)(zod@3.25.76))':
+    dependencies:
+      eventemitter3: 5.0.1
+      mipd: 0.0.7(typescript@5.9.3)
+      viem: 2.48.4(typescript@5.9.3)(zod@3.25.76)
+      zustand: 5.0.0(@types/react@18.3.28)(react@18.3.1)(use-sync-external-store@1.4.0(react@18.3.1))
+    optionalDependencies:
+      '@tanstack/query-core': 5.101.2
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - '@types/react'
+      - immer
+      - react
+      - use-sync-external-store
+
   '@wagmi/core@3.6.1(@tanstack/query-core@5.101.2)(@types/react@18.3.28)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@18.3.1))(viem@2.48.4(typescript@5.9.3)(zod@4.1.11))':
     dependencies:
       eventemitter3: 5.0.1
@@ -21835,14 +21872,14 @@ snapshots:
 
   w-json@1.3.11: {}
 
-  wagmi@3.7.1(@coinbase/wallet-sdk@4.3.6(@types/react@18.3.28)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@18.3.1))(zod@4.1.11))(@safe-global/safe-apps-provider@0.18.6(typescript@5.9.3)(zod@4.1.11))(@safe-global/safe-apps-sdk@9.1.0(typescript@5.9.3)(zod@4.1.11))(@tanstack/query-core@5.101.2)(@tanstack/react-query@5.101.2(react@18.3.1))(@types/react@18.3.28)(react@18.3.1)(typescript@5.9.3)(viem@2.48.4(typescript@5.9.3)(zod@4.1.11)):
+  wagmi@3.7.1(@coinbase/wallet-sdk@4.3.6(@types/react@18.3.28)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@18.3.1))(zod@3.25.76))(@safe-global/safe-apps-provider@0.18.6(typescript@5.9.3)(zod@3.25.76))(@safe-global/safe-apps-sdk@9.1.0(typescript@5.9.3)(zod@3.25.76))(@tanstack/query-core@5.101.2)(@tanstack/react-query@5.101.2(react@18.3.1))(@types/react@18.3.28)(react@18.3.1)(typescript@5.9.3)(viem@2.48.4(typescript@5.9.3)(zod@3.25.76)):
     dependencies:
       '@tanstack/react-query': 5.101.2(react@18.3.1)
-      '@wagmi/connectors': 8.0.22(@coinbase/wallet-sdk@4.3.6(@types/react@18.3.28)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@18.3.1))(zod@4.1.11))(@safe-global/safe-apps-provider@0.18.6(typescript@5.9.3)(zod@4.1.11))(@safe-global/safe-apps-sdk@9.1.0(typescript@5.9.3)(zod@4.1.11))(@wagmi/core@3.6.1(@tanstack/query-core@5.101.2)(@types/react@18.3.28)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@18.3.1))(viem@2.48.4(typescript@5.9.3)(zod@4.1.11)))(typescript@5.9.3)(viem@2.48.4(typescript@5.9.3)(zod@4.1.11))
-      '@wagmi/core': 3.6.1(@tanstack/query-core@5.101.2)(@types/react@18.3.28)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@18.3.1))(viem@2.48.4(typescript@5.9.3)(zod@4.1.11))
+      '@wagmi/connectors': 8.0.22(@coinbase/wallet-sdk@4.3.6(@types/react@18.3.28)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@18.3.1))(zod@3.25.76))(@safe-global/safe-apps-provider@0.18.6(typescript@5.9.3)(zod@3.25.76))(@safe-global/safe-apps-sdk@9.1.0(typescript@5.9.3)(zod@3.25.76))(@wagmi/core@3.6.1(@tanstack/query-core@5.101.2)(@types/react@18.3.28)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@18.3.1))(viem@2.48.4(typescript@5.9.3)(zod@3.25.76)))(typescript@5.9.3)(viem@2.48.4(typescript@5.9.3)(zod@3.25.76))
+      '@wagmi/core': 3.6.1(@tanstack/query-core@5.101.2)(@types/react@18.3.28)(react@18.3.1)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@18.3.1))(viem@2.48.4(typescript@5.9.3)(zod@3.25.76))
       react: 18.3.1
       use-sync-external-store: 1.4.0(react@18.3.1)
-      viem: 2.48.4(typescript@5.9.3)(zod@4.1.11)
+      viem: 2.48.4(typescript@5.9.3)(zod@3.25.76)
     optionalDependencies:
       typescript: 5.9.3
     transitivePeerDependencies:
diff --git a/tests/widgets/superfluid-campaign-widget/states.spec.ts b/tests/widgets/superfluid-campaign-widget/states.spec.ts
new file mode 100644
index 00000000..0cb179ad
--- /dev/null
+++ b/tests/widgets/superfluid-campaign-widget/states.spec.ts
@@ -0,0 +1,697 @@
+import { test, expect, type Page } from '@playwright/test'
+
+// Story IDs derived from the Storybook title 'QA/SuperfluidCampaignWidget/Runtime Fixtures'
+// and the named exports in SuperfluidCampaignWidgetQA.stories.tsx.
+const STORY_IDS = {
+  noWalletContent:
+    '/iframe.html?id=qa-superfluidcampaignwidget-runtime-fixtures--no-wallet-content&viewMode=story',
+  noWalletLeaderboard:
+    '/iframe.html?id=qa-superfluidcampaignwidget-runtime-fixtures--no-wallet-leaderboard&viewMode=story',
+  custodialContent:
+    '/iframe.html?id=qa-superfluidcampaignwidget-runtime-fixtures--custodial-local-fixture-content&viewMode=story',
+  custodialLeaderboard:
+    '/iframe.html?id=qa-superfluidcampaignwidget-runtime-fixtures--custodial-local-fixture-leaderboard&viewMode=story',
+  airdropStatusLoading:
+    '/iframe.html?id=qa-superfluidcampaignwidget-runtime-fixtures--airdrop-status-loading&viewMode=story',
+  airdropStatusRequestFailed:
+    '/iframe.html?id=qa-superfluidcampaignwidget-runtime-fixtures--airdrop-status-request-failed&viewMode=story',
+  airdropStatusNotWhitelisted:
+    '/iframe.html?id=qa-superfluidcampaignwidget-runtime-fixtures--airdrop-status-not-whitelisted&viewMode=story',
+  airdropStatusEligible:
+    '/iframe.html?id=qa-superfluidcampaignwidget-runtime-fixtures--airdrop-status-eligible&viewMode=story',
+  leaderboardLoading:
+    '/iframe.html?id=qa-superfluidcampaignwidget-runtime-fixtures--leaderboard-loading&viewMode=story',
+  leaderboardRequestFailed:
+    '/iframe.html?id=qa-superfluidcampaignwidget-runtime-fixtures--leaderboard-request-failed&viewMode=story',
+  leaderboardPopulated:
+    '/iframe.html?id=qa-superfluidcampaignwidget-runtime-fixtures--leaderboard-populated&viewMode=story',
+  leaderboardApiContract:
+    '/iframe.html?id=qa-superfluidcampaignwidget-runtime-fixtures--leaderboard-api-contract&viewMode=story',
+  supTotalsRequestFailed:
+    '/iframe.html?id=qa-superfluidcampaignwidget-runtime-fixtures--sup-totals-request-failed&viewMode=story',
+  supTotalsPopulated:
+    '/iframe.html?id=qa-superfluidcampaignwidget-runtime-fixtures--sup-totals-populated&viewMode=story',
+  supTotalsSubgraphContract:
+    '/iframe.html?id=qa-superfluidcampaignwidget-runtime-fixtures--sup-totals-subgraph-contract&viewMode=story',
+} as const
+
+// Top-ranked account address (truncated) for each campaign in LEADERBOARD_DATA_FIXTURES
+// (superfluidCampaignWidgetStories.tsx) — 606 = GoodDollar actions (default tab), 614 = Ecosystem actions.
+const GOOD_DOLLAR_ACTIONS_TOP_ADDRESS = '0x1a2b...9a0b'
+const ECOSYSTEM_FUNDING_ACTIONS_TOP_ADDRESS = '0x4d5e...2d3e'
+
+async function waitForStoryReady(page: Page): Promise<void> {
+  await page.waitForLoadState('domcontentloaded')
+  await page.waitForFunction(() => document.body.innerText.trim().length > 0)
+}
+
+async function gotoStory(page: Page, storyUrl: string): Promise<void> {
+  await page.goto(storyUrl)
+  await waitForStoryReady(page)
+}
+
+test('SuperfluidCampaignWidget renders disconnected content view', async ({ page }) => {
+  await gotoStory(page, STORY_IDS.noWalletContent)
+
+  await expect(page.getByText('Superfluid Ecosystem Rewards')).toBeVisible()
+  await expect(page.getByText('SEASON 6')).toBeVisible()
+  // Disconnected CTA is required per #127 acceptance criteria
+  await expect(page.getByText('Connect Wallet')).toBeVisible()
+  // Leaderboard summary section should be present
+  await expect(page.getByText('Leaderboard').first()).toBeVisible()
+  // Reward pools should be listed
+  await expect(page.getByText('How to participate')).toBeVisible()
+
+  await page.screenshot({
+    path: 'tests/widgets/superfluid-campaign-widget/test-results/scw-01-no-wallet-content.png',
+    fullPage: true,
+  })
+})
+
+test('SuperfluidCampaignWidget renders disconnected leaderboard view', async ({ page }) => {
+  await gotoStory(page, STORY_IDS.noWalletLeaderboard)
+
+  await expect(page.getByText('Leaderboard')).toBeVisible()
+  // Top-ranked entry from the live Points API leaderboard fixture (GoodDollar actions tab, default)
+  await expect(page.getByText(GOOD_DOLLAR_ACTIONS_TOP_ADDRESS)).toBeVisible()
+  // Activity completion is derived from Points API events and must remain
+  // visible for public leaderboard rows.
+  await expect(page.getByLabel('Claim UBI: done').first()).toBeVisible()
+  await expect(page.getByLabel('Successful invite: done').first()).toBeVisible()
+
+  await page.screenshot({
+    path: 'tests/widgets/superfluid-campaign-widget/test-results/scw-02-no-wallet-leaderboard.png',
+    fullPage: true,
+  })
+})
+
+test('SuperfluidCampaignWidget renders connected content view', async ({ page }) => {
+  await gotoStory(page, STORY_IDS.custodialContent)
+
+  await expect(page.getByText('Superfluid Ecosystem Rewards')).toBeVisible()
+  await expect(page.getByText('SEASON 6')).toBeVisible()
+  // Connect Wallet CTA must NOT appear for connected wallet
+  await expect(page.getByText('Connect Wallet')).not.toBeVisible()
+  // Header's top-right slot must show the truncated-address wallet chip
+  // (0x1a2b...9a0b form), not the old decorative placeholder box.
+  await expect(page.getByText(/^0x[0-9a-fA-F]{4}\.\.\.[0-9a-fA-F]{4}$/)).toBeVisible()
+  await expect(page.getByText('How to participate')).toBeVisible()
+
+  await page.screenshot({
+    path: 'tests/widgets/superfluid-campaign-widget/test-results/scw-03-custodial-content.png',
+    fullPage: true,
+  })
+})
+
+test('SuperfluidCampaignWidget renders connected leaderboard view', async ({ page }) => {
+  await gotoStory(page, STORY_IDS.custodialLeaderboard)
+
+  await expect(page.getByText('Leaderboard')).toBeVisible()
+  await expect(page.getByText(GOOD_DOLLAR_ACTIONS_TOP_ADDRESS)).toBeVisible()
+
+  await page.screenshot({
+    path: 'tests/widgets/superfluid-campaign-widget/test-results/scw-04-custodial-leaderboard.png',
+    fullPage: true,
+  })
+})
+
+test('SuperfluidCampaignWidget FAQ is one collapsible section wrapping per-question toggles', async ({
+  page,
+}) => {
+  await gotoStory(page, STORY_IDS.noWalletContent)
+
+  // The individual question is nested inside the outer "FAQ" section and is
+  // not part of the page's collapsed reading order until that section opens.
+  const faqSectionTrigger = page.getByText('FAQ', { exact: true }).first()
+  await expect(faqSectionTrigger).toBeVisible()
+  const questionTrigger = page.getByText('How are my SUP rewards calculated?').first()
+  await expect(questionTrigger).not.toBeVisible()
+
+  // Expand the outer FAQ section — individual questions become visible, still collapsed.
+  await faqSectionTrigger.click()
+  await expect(questionTrigger).toBeVisible()
+  await expect(page.getByText('Two separate reward pools')).not.toBeVisible()
+
+  // Expand one question independently of the others.
+  await questionTrigger.click()
+  await expect(page.getByText('Two separate reward pools')).toBeVisible()
+
+  await page.screenshot({
+    path: 'tests/widgets/superfluid-campaign-widget/test-results/scw-05-faq-expanded.png',
+    fullPage: true,
+  })
+
+  // Collapse the question again; the outer section stays open.
+  await questionTrigger.click()
+  await expect(page.getByText('Two separate reward pools')).not.toBeVisible()
+})
+
+test('SuperfluidCampaignWidget leaderboard back button returns to content view', async ({
+  page,
+}) => {
+  await gotoStory(page, STORY_IDS.noWalletContent)
+
+  // Navigate to leaderboard
+  const viewLeaderboardBtn = page.getByText('View Leaderboard').first()
+  await expect(viewLeaderboardBtn).toBeVisible()
+  await viewLeaderboardBtn.click()
+
+  await expect(page.getByText(GOOD_DOLLAR_ACTIONS_TOP_ADDRESS)).toBeVisible()
+
+  await page.screenshot({
+    path: 'tests/widgets/superfluid-campaign-widget/test-results/scw-06-leaderboard-navigation.png',
+    fullPage: true,
+  })
+})
+
+test('SuperfluidCampaignWidget mobile layout (480px)', async ({ page }) => {
+  await page.setViewportSize({ width: 480, height: 900 })
+  await gotoStory(page, STORY_IDS.noWalletContent)
+
+  await expect(page.getByText('Superfluid Ecosystem Rewards')).toBeVisible()
+  await expect(page.getByText('Connect Wallet')).toBeVisible()
+
+  await page.screenshot({
+    path: 'tests/widgets/superfluid-campaign-widget/test-results/scw-07-mobile-content.png',
+    fullPage: true,
+  })
+})
+
+test('SuperfluidCampaignWidget wide layout (900px)', async ({ page }) => {
+  await page.setViewportSize({ width: 900, height: 900 })
+  await gotoStory(page, STORY_IDS.noWalletContent)
+
+  await expect(page.getByText('Superfluid Ecosystem Rewards')).toBeVisible()
+
+  await page.screenshot({
+    path: 'tests/widgets/superfluid-campaign-widget/test-results/scw-08-wide-content.png',
+    fullPage: true,
+  })
+})
+
+test('SuperfluidCampaignWidget Claim SUP rewards CTA opens claim.superfluid.org in a new tab', async ({
+  page,
+  context,
+}) => {
+  await gotoStory(page, STORY_IDS.noWalletContent)
+
+  const claimButton = page.getByText('Claim SUP rewards').first()
+  await expect(claimButton).toBeVisible()
+
+  const [newPage] = await Promise.all([context.waitForEvent('page'), claimButton.click()])
+  await newPage.waitForLoadState('domcontentloaded').catch(() => {})
+  expect(newPage.url()).toContain('claim.superfluid.org')
+  await newPage.close()
+
+  await page.screenshot({
+    path: 'tests/widgets/superfluid-campaign-widget/test-results/scw-09-claim-cta.png',
+    fullPage: true,
+  })
+})
+
+test('SuperfluidCampaignWidget airdrop status: loading', async ({ page }) => {
+  await gotoStory(page, STORY_IDS.airdropStatusLoading)
+
+  await expect(page.getByText('Airdrop status', { exact: true })).toBeVisible()
+  await expect(page.getByText('Checking your Superfluid airdrop status...')).toBeVisible()
+
+  await page.screenshot({
+    path: 'tests/widgets/superfluid-campaign-widget/test-results/scw-10-airdrop-status-loading.png',
+    fullPage: true,
+  })
+})
+
+test('SuperfluidCampaignWidget airdrop status: request failed', async ({ page }) => {
+  await gotoStory(page, STORY_IDS.airdropStatusRequestFailed)
+
+  await expect(page.getByText('Airdrop status', { exact: true })).toBeVisible()
+  await expect(page.getByText('Airdrop status request failed (500)')).toBeVisible()
+
+  await page.screenshot({
+    path: 'tests/widgets/superfluid-campaign-widget/test-results/scw-11-airdrop-status-request-failed.png',
+    fullPage: true,
+  })
+})
+
+test('SuperfluidCampaignWidget airdrop status: not whitelisted', async ({ page }) => {
+  await gotoStory(page, STORY_IDS.airdropStatusNotWhitelisted)
+
+  await expect(page.getByText('Not yet whitelisted for the SUP airdrop.')).toBeVisible()
+  await expect(page.getByText('Claims: 0')).toBeVisible()
+  await expect(page.getByText('Invites: 1000')).toBeVisible()
+
+  await page.screenshot({
+    path: 'tests/widgets/superfluid-campaign-widget/test-results/scw-12-airdrop-status-not-whitelisted.png',
+    fullPage: true,
+  })
+})
+
+test('SuperfluidCampaignWidget airdrop status: eligible', async ({ page }) => {
+  await gotoStory(page, STORY_IDS.airdropStatusEligible)
+
+  await expect(page.getByText('Eligible for the SUP airdrop.')).toBeVisible()
+  await expect(page.getByText('Claims: 3')).toBeVisible()
+
+  await page.screenshot({
+    path: 'tests/widgets/superfluid-campaign-widget/test-results/scw-13-airdrop-status-eligible.png',
+    fullPage: true,
+  })
+})
+
+test('SuperfluidCampaignWidget campaign leaderboard: loading', async ({ page }) => {
+  await gotoStory(page, STORY_IDS.leaderboardLoading)
+
+  await expect(page.getByText('Loading leaderboard...')).toBeVisible()
+
+  await page.screenshot({
+    path: 'tests/widgets/superfluid-campaign-widget/test-results/scw-14-leaderboard-loading.png',
+    fullPage: true,
+  })
+})
+
+test('SuperfluidCampaignWidget campaign leaderboard: request failed', async ({ page }) => {
+  await gotoStory(page, STORY_IDS.leaderboardRequestFailed)
+
+  await expect(page.getByText('Campaign leaderboard request failed (500)')).toBeVisible()
+
+  await page.screenshot({
+    path: 'tests/widgets/superfluid-campaign-widget/test-results/scw-15-leaderboard-request-failed.png',
+    fullPage: true,
+  })
+})
+
+test("SuperfluidCampaignWidget campaign leaderboard: switching tabs shows each campaign's own accounts", async ({
+  page,
+}) => {
+  await gotoStory(page, STORY_IDS.leaderboardPopulated)
+
+  // Default tab (GoodDollar actions, campaignId 606)
+  await expect(page.getByText(GOOD_DOLLAR_ACTIONS_TOP_ADDRESS)).toBeVisible()
+  await expect(page.getByText(ECOSYSTEM_FUNDING_ACTIONS_TOP_ADDRESS)).not.toBeVisible()
+
+  await page.getByText('Ecosystem actions').click()
+
+  await expect(page.getByText(ECOSYSTEM_FUNDING_ACTIONS_TOP_ADDRESS)).toBeVisible()
+  await expect(page.getByText(GOOD_DOLLAR_ACTIONS_TOP_ADDRESS)).not.toBeVisible()
+
+  await page.screenshot({
+    path: 'tests/widgets/superfluid-campaign-widget/test-results/scw-16-leaderboard-tab-switch.png',
+    fullPage: true,
+  })
+})
+
+test('SuperfluidCampaignWidget enriches a leaderboard page from per-account point events', async ({
+  page,
+}) => {
+  const account = '0xaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa'
+
+  await page.route('**/points/campaign?*', async (route) => {
+    await route.fulfill({
+      json: {
+        campaignId: 606,
+        name: 'GoodDollar Actions',
+        slug: 'good-dollar-actions',
+        totalPoints: 12,
+        memberCount: 1,
+        totalEvents: 3,
+        lastEventAt: '2026-07-31T00:00:00.000Z',
+        createdAt: '2026-07-01T00:00:00.000Z',
+      },
+    })
+  })
+  await page.route('**/points/accounts?*', async (route) => {
+    await route.fulfill({
+      json: {
+        accounts: [
+          {
+            account,
+            totalPoints: 12,
+            eventCount: 3,
+            lastEventAt: '2026-07-31T00:00:00.000Z',
+          },
+        ],
+        pagination: {
+          page: 1,
+          limit: 10,
+          totalDocs: 1,
+          totalPages: 1,
+          hasNextPage: false,
+          hasPrevPage: false,
+        },
+      },
+    })
+  })
+  await page.route('**/points/events?*', async (route) => {
+    expect(new URL(route.request().url()).searchParams.get('account')).toBe(account)
+    await route.fulfill({
+      json: {
+        events: [
+          { eventName: 'claimed', points: 1 },
+          { eventName: 'validInvites', points: -10 },
+          { eventName: 'flowStateVoted', points: 0 },
+        ],
+        pagination: {
+          page: 1,
+          limit: 100,
+          totalDocs: 3,
+          totalPages: 1,
+          hasNextPage: false,
+          hasPrevPage: false,
+        },
+      },
+    })
+  })
+
+  await gotoStory(page, STORY_IDS.leaderboardApiContract)
+
+  await expect(page.getByLabel('Claim UBI: done')).toBeVisible()
+  await expect(page.getByLabel('Successful invite: not done')).toBeVisible()
+  await expect(page.getByLabel('Flow State vote: not done')).toBeVisible()
+})
+
+test('SuperfluidCampaignWidget SUP distribution and members: populated from the protocol subgraph adapter for campaign 606', async ({
+  page,
+}) => {
+  await gotoStory(page, STORY_IDS.supTotalsPopulated)
+
+  // 606 (GoodDollar actions) resolves a live program match — figures come from
+  // SUP_TOTALS_FIXTURES, not DEFAULT_CAMPAIGN_MOCK_DATA's static placeholder
+  // (75,895 / 217,700), proving the progress bar is sourced from the adapter.
+  await expect(page.getByText('128,940 / 217,700 SUP')).toBeVisible()
+  // The same subgraph Pool response supplies the current >0-unit member count.
+  await expect(page.getByText('712 participants')).toBeVisible()
+  // 614 (Ecosystem actions) has no matching program id yet, so
+  // RewardPoolSection falls back to its own unchanged mock placeholder.
+  await expect(page.getByText('262,450 / 404,300 SUP')).toBeVisible()
+
+  await page.screenshot({
+    path: 'tests/widgets/superfluid-campaign-widget/test-results/scw-17-sup-totals-populated.png',
+    fullPage: true,
+  })
+})
+
+test('SuperfluidCampaignWidget SUP totals: request failed falls back to placeholder figures for both pools', async ({
+  page,
+}) => {
+  await gotoStory(page, STORY_IDS.supTotalsRequestFailed)
+
+  // Neither pool has data on a failed request, so both fall back to their
+  // mock placeholders rather than showing an error state or blank bar.
+  await expect(page.getByText('75,895 / 217,700 SUP')).toBeVisible()
+  await expect(page.getByText('262,450 / 404,300 SUP')).toBeVisible()
+
+  await page.screenshot({
+    path: 'tests/widgets/superfluid-campaign-widget/test-results/scw-18-sup-totals-request-failed.png',
+    fullPage: true,
+  })
+})
+
+test('SuperfluidCampaignWidget uses a passed pool address for live distribution and active members', async ({
+  page,
+}) => {
+  await page.route('https://base-mainnet.subgraph.x.superfluid.dev/', async (route) => {
+    const body = route.request().postDataJSON() as {
+      variables: { id: string }
+      query: string
+    }
+    expect(body.variables.id).toBe('0x1111111111111111111111111111111111111111')
+    expect(body.query).toContain('totalMembers')
+    expect(body.query).toContain('totalAmountDistributedUntilUpdatedAt')
+
+    await route.fulfill({
+      json: {
+        data: {
+          pool: {
+            totalAmountDistributedUntilUpdatedAt: '1000000000000000000',
+            totalMembers: 42,
+            flowRate: '0',
+            updatedAtTimestamp: '1785456000',
+          },
+        },
+      },
+    })
+  })
+
+  await gotoStory(page, STORY_IDS.supTotalsSubgraphContract)
+
+  await expect(page.getByText('1 / 217,700 SUP')).toBeVisible()
+  await expect(page.getByText('42 participants')).toBeVisible()
+})
+
+test('SuperfluidCampaignWidget entire action card is clickable and triggers the same action as its CTA button', async ({
+  page,
+  context,
+}) => {
+  await gotoStory(page, STORY_IDS.noWalletContent)
+
+  // Click the card via its title text, away from the CTA button itself, to
+  // confirm the whole card (not just the button) is a click target.
+  const cardTitle = page.getByText('Vote on Flow State').first()
+  await expect(cardTitle).toBeVisible()
+
+  const [newPage] = await Promise.all([context.waitForEvent('page'), cardTitle.click()])
+  await newPage.waitForLoadState('domcontentloaded').catch(() => {})
+  expect(newPage.url()).toContain('flowstate.network')
+  await newPage.close()
+
+  await page.screenshot({
+    path: 'tests/widgets/superfluid-campaign-widget/test-results/scw-19-action-card-whole-card-click.png',
+    fullPage: true,
+  })
+})
+
+test('SuperfluidCampaignWidget clicking the CTA button directly does not double-fire the action', async ({
+  page,
+  context,
+}) => {
+  await gotoStory(page, STORY_IDS.noWalletContent)
+
+  const voteButton = page.getByText('Vote', { exact: true }).first()
+  await expect(voteButton).toBeVisible()
+
+  const pagesBefore = context.pages().length
+  const [newPage] = await Promise.all([context.waitForEvent('page'), voteButton.click()])
+  await newPage.waitForLoadState('domcontentloaded').catch(() => {})
+
+  // Give a duplicate-fire regression a moment to open a second tab before
+  // asserting exactly one new page resulted from this single click.
+  await page.waitForTimeout(300)
+  expect(context.pages().length).toBe(pagesBefore + 1)
+  expect(newPage.url()).toContain('flowstate.network')
+  await newPage.close()
+})
+
+// Narrow-viewport regression suite for the header "Connect wallet" CTA, covering
+// both Content view's CampaignHeader and Leaderboard view's own (separately
+// coded) header row. Reuses the change-request-7 breakpoint set (min-supported
+// through larger-Android widths).
+async function findClippedButtons(page: Page): Promise<string[]> {
+  return page.evaluate(() => {
+    const clipped: string[] = []
+    for (const btn of Array.from(document.querySelectorAll('button'))) {
+      const rect = btn.getBoundingClientRect()
+      for (let el = btn.parentElement; el; el = el.parentElement) {
+        const style = getComputedStyle(el)
+        const elRect = el.getBoundingClientRect()
+        if (
+          (style.overflowX === 'hidden' || style.overflow === 'hidden') &&
+          rect.right > elRect.right + 0.5
+        ) {
+          clipped.push(btn.textContent?.trim() ?? '(unlabeled button)')
+          break
+        }
+      }
+    }
+    return clipped
+  })
+}
+
+const HEADER_WRAP_BREAKPOINTS = [
+  { width: 320, label: 'min-supported' },
+  { width: 360, label: 'common-android' },
+  { width: 375, label: 'iphone-se' },
+  { width: 390, label: 'modern-iphone' },
+  { width: 412, label: 'larger-android' },
+]
+
+const HEADER_WRAP_VIEWS = [
+  {
+    key: 'content',
+    storyUrl: STORY_IDS.noWalletContent,
+    headerButtonText: 'Connect wallet',
+    screenshotBase: 20,
+  },
+  {
+    key: 'leaderboard-disconnected',
+    storyUrl: STORY_IDS.noWalletLeaderboard,
+    headerButtonText: 'Connect wallet',
+    screenshotBase: 25,
+  },
+  {
+    key: 'leaderboard-connected',
+    storyUrl: STORY_IDS.custodialLeaderboard,
+    headerButtonText: 'Close leaderboard',
+    screenshotBase: 30,
+  },
+]
+
+for (const { width, label } of HEADER_WRAP_BREAKPOINTS) {
+  test(`SuperfluidCampaignWidget action cards stack cleanly at ${width}px (${label})`, async ({
+    page,
+  }) => {
+    await page.setViewportSize({ width, height: 900 })
+    await gotoStory(page, STORY_IDS.noWalletContent)
+
+    const actionLayouts = page.locator('[data-testid^="ActionCard-layout-"]')
+    await expect(actionLayouts).toHaveCount(6)
+
+    // Every supported phone width is below the shared 480px $sm breakpoint.
+    // The description and action footer must therefore stack instead of
+    // competing for the same horizontal line, and its CTA fills that row.
+    for (const layout of await actionLayouts.all()) {
+      await expect(layout).toHaveCSS('flex-direction', 'column')
+      const layoutBox = await layout.boundingBox()
+      const buttonBox = await layout.locator('button').boundingBox()
+      if (!layoutBox || !buttonBox) throw new Error('Expected action layout and CTA boxes')
+      expect(Math.abs(buttonBox.width - layoutBox.width)).toBeLessThan(1)
+    }
+
+    const documentScrollWidth = await page.evaluate(() => document.documentElement.scrollWidth)
+    expect(documentScrollWidth).toBeLessThanOrEqual(width + 1)
+
+    // No CTA may be silently cut off by the card's rounded overflow boundary.
+    const clippedButtons = await findClippedButtons(page)
+    for (const actionLabel of ['Claim', 'Invite', 'Vote', 'Fund', 'Donate']) {
+      expect(clippedButtons).not.toContain(actionLabel)
+    }
+  })
+}
+
+test('SuperfluidCampaignWidget action cards retain their desktop row above 480px', async ({
+  page,
+}) => {
+  await page.setViewportSize({ width: 900, height: 900 })
+  await gotoStory(page, STORY_IDS.noWalletContent)
+
+  const actionLayouts = page.locator('[data-testid^="ActionCard-layout-"]')
+  await expect(actionLayouts).toHaveCount(6)
+  for (const layout of await actionLayouts.all()) {
+    await expect(layout).toHaveCSS('flex-direction', 'row')
+  }
+})
+
+for (const view of HEADER_WRAP_VIEWS) {
+  for (const [i, { width, label }] of HEADER_WRAP_BREAKPOINTS.entries()) {
+    const screenshotIndex = view.screenshotBase + i
+
+    test(`SuperfluidCampaignWidget ${view.key} header has no button clipping at ${width}px (${label})`, async ({
+      page,
+    }) => {
+      await page.setViewportSize({ width, height: 900 })
+      await gotoStory(page, view.storyUrl)
+
+      // headerButtonText is matched against either visible text (Connect wallet)
+      // or an aria-label (Close leaderboard's icon-only button has no text content).
+      await expect(
+        page.getByText(view.headerButtonText).or(page.getByLabel(view.headerButtonText)),
+      ).toBeVisible()
+
+      // Document must never grow wider than the viewport — a +1px tolerance
+      // absorbs sub-pixel rounding without masking a real overflow.
+      const documentScrollWidth = await page.evaluate(() => document.documentElement.scrollWidth)
+      expect(documentScrollWidth).toBeLessThanOrEqual(width + 1)
+
+      // A button can be silently clipped by an ancestor's overflow:hidden (e.g.
+      // the card's own rounded-corner clipping) without ever growing the
+      // document's scrollWidth above — this is exactly how the header CTA was
+      // cut off pre-fix.
+      const clippedButtons = await findClippedButtons(page)
+      expect(clippedButtons).not.toContain('Connect wallet')
+      expect(clippedButtons).not.toContain('')
+
+      await page.screenshot({
+        path: `tests/widgets/superfluid-campaign-widget/test-results/scw-${screenshotIndex}-responsive-${view.key}-${width}px-${label}.png`,
+        fullPage: true,
+      })
+    })
+  }
+}
+
+// Regression test for the Leaderboard header's close (X) button: it must stay
+// pinned top-right at all times, even when the "Connect wallet"/wallet-chip
+// group next to it wraps onto its own row for lack of space. Covers both the
+// disconnected (Connect wallet button) and connected (wallet chip) variants
+// across the same breakpoint set used above, plus a wide viewport where the
+// row comfortably fits on one line, to prove the pin holds in both states.
+const LEADERBOARD_CLOSE_BUTTON_VIEWS = [
+  { key: 'leaderboard-disconnected', storyUrl: STORY_IDS.noWalletLeaderboard },
+  { key: 'leaderboard-connected', storyUrl: STORY_IDS.custodialLeaderboard },
+]
+const CLOSE_BUTTON_PIN_WIDTHS = [320, 360, 375, 390, 412, 900]
+
+for (const view of LEADERBOARD_CLOSE_BUTTON_VIEWS) {
+  for (const width of CLOSE_BUTTON_PIN_WIDTHS) {
+    test(`SuperfluidCampaignWidget ${view.key} close button stays pinned top-right at ${width}px`, async ({
+      page,
+    }) => {
+      await page.setViewportSize({ width, height: 900 })
+      await gotoStory(page, view.storyUrl)
+
+      const heading = page.getByText('Superfluid', { exact: true })
+      const closeButton = page.getByLabel('Close leaderboard')
+      await expect(heading).toBeVisible()
+      await expect(closeButton).toBeVisible()
+
+      const headingBox = await heading.boundingBox()
+      const closeButtonBox = await closeButton.boundingBox()
+      if (!headingBox || !closeButtonBox)
+        throw new Error('Expected heading and close button to have layout boxes')
+
+      // The close button must remain on the same row as the "Superfluid" wordmark
+      // regardless of whether the CTA/wallet-chip group next to it has wrapped —
+      // this is the exact bug reported: the close button used to drop down with
+      // the CTA instead of staying pinned.
+      expect(Math.abs(closeButtonBox.y - headingBox.y)).toBeLessThan(5)
+    })
+  }
+}
+
+// Without an integrator-owned disconnectOverride, the wallet chip keeps its
+// Disconnect affordance but explains where the wallet session must be managed.
+// Covered on both CampaignHeader (content view) and LeaderboardView, since
+// each renders its own copy of the shared WalletChip component.
+const WALLET_CHIP_DISCONNECT_VIEWS = [
+  { key: 'content', storyUrl: STORY_IDS.custodialContent, screenshotIndex: 35 },
+  { key: 'leaderboard', storyUrl: STORY_IDS.custodialLeaderboard, screenshotIndex: 36 },
+]
+
+for (const view of WALLET_CHIP_DISCONNECT_VIEWS) {
+  test(`SuperfluidCampaignWidget ${view.key} wallet chip: Disconnect without an override shows integrator guidance`, async ({
+    page,
+  }) => {
+    await page.setViewportSize({ width: 480, height: 900 })
+    await gotoStory(page, view.storyUrl)
+
+    const chip = page.getByLabel('Wallet options')
+    await expect(chip).toBeVisible()
+    await chip.click()
+
+    const disconnectItem = page.getByText('Disconnect', { exact: true })
+    await expect(disconnectItem).toBeVisible()
+
+    await page.screenshot({
+      path: `tests/widgets/superfluid-campaign-widget/test-results/scw-${view.screenshotIndex}-${view.key}-wallet-chip-menu-open.png`,
+      fullPage: true,
+    })
+
+    await disconnectItem.click()
+
+    await expect(page.getByText('Disconnect should be done in your wallets session')).toBeVisible()
+    await expect(chip).toBeVisible()
+
+    await page.screenshot({
+      path: `tests/widgets/superfluid-campaign-widget/test-results/scw-${view.screenshotIndex}-${view.key}-wallet-chip-after-disconnect.png`,
+      fullPage: true,
+    })
+  })
+}
diff --git a/tests/widgets/superfluid-campaign-widget/test-results/scw-01-no-wallet-content.png b/tests/widgets/superfluid-campaign-widget/test-results/scw-01-no-wallet-content.png
new file mode 100644
index 00000000..7fb8d5b6
Binary files /dev/null and b/tests/widgets/superfluid-campaign-widget/test-results/scw-01-no-wallet-content.png differ
diff --git a/tests/widgets/superfluid-campaign-widget/test-results/scw-02-no-wallet-leaderboard.png b/tests/widgets/superfluid-campaign-widget/test-results/scw-02-no-wallet-leaderboard.png
new file mode 100644
index 00000000..fac4f845
Binary files /dev/null and b/tests/widgets/superfluid-campaign-widget/test-results/scw-02-no-wallet-leaderboard.png differ
diff --git a/tests/widgets/superfluid-campaign-widget/test-results/scw-03-custodial-content.png b/tests/widgets/superfluid-campaign-widget/test-results/scw-03-custodial-content.png
new file mode 100644
index 00000000..365ed7e5
Binary files /dev/null and b/tests/widgets/superfluid-campaign-widget/test-results/scw-03-custodial-content.png differ
diff --git a/tests/widgets/superfluid-campaign-widget/test-results/scw-04-custodial-leaderboard.png b/tests/widgets/superfluid-campaign-widget/test-results/scw-04-custodial-leaderboard.png
new file mode 100644
index 00000000..f368b6e1
Binary files /dev/null and b/tests/widgets/superfluid-campaign-widget/test-results/scw-04-custodial-leaderboard.png differ
diff --git a/tests/widgets/superfluid-campaign-widget/test-results/scw-05-faq-expanded.png b/tests/widgets/superfluid-campaign-widget/test-results/scw-05-faq-expanded.png
new file mode 100644
index 00000000..edd1a564
Binary files /dev/null and b/tests/widgets/superfluid-campaign-widget/test-results/scw-05-faq-expanded.png differ
diff --git a/tests/widgets/superfluid-campaign-widget/test-results/scw-06-leaderboard-navigation.png b/tests/widgets/superfluid-campaign-widget/test-results/scw-06-leaderboard-navigation.png
new file mode 100644
index 00000000..fac4f845
Binary files /dev/null and b/tests/widgets/superfluid-campaign-widget/test-results/scw-06-leaderboard-navigation.png differ
diff --git a/tests/widgets/superfluid-campaign-widget/test-results/scw-07-mobile-content.png b/tests/widgets/superfluid-campaign-widget/test-results/scw-07-mobile-content.png
new file mode 100644
index 00000000..08051f46
Binary files /dev/null and b/tests/widgets/superfluid-campaign-widget/test-results/scw-07-mobile-content.png differ
diff --git a/tests/widgets/superfluid-campaign-widget/test-results/scw-08-wide-content.png b/tests/widgets/superfluid-campaign-widget/test-results/scw-08-wide-content.png
new file mode 100644
index 00000000..f896744d
Binary files /dev/null and b/tests/widgets/superfluid-campaign-widget/test-results/scw-08-wide-content.png differ
diff --git a/tests/widgets/superfluid-campaign-widget/test-results/scw-09-claim-cta.png b/tests/widgets/superfluid-campaign-widget/test-results/scw-09-claim-cta.png
new file mode 100644
index 00000000..3fbf5528
Binary files /dev/null and b/tests/widgets/superfluid-campaign-widget/test-results/scw-09-claim-cta.png differ
diff --git a/tests/widgets/superfluid-campaign-widget/test-results/scw-10-airdrop-status-loading.png b/tests/widgets/superfluid-campaign-widget/test-results/scw-10-airdrop-status-loading.png
new file mode 100644
index 00000000..55b079db
Binary files /dev/null and b/tests/widgets/superfluid-campaign-widget/test-results/scw-10-airdrop-status-loading.png differ
diff --git a/tests/widgets/superfluid-campaign-widget/test-results/scw-11-airdrop-status-request-failed.png b/tests/widgets/superfluid-campaign-widget/test-results/scw-11-airdrop-status-request-failed.png
new file mode 100644
index 00000000..c4bad876
Binary files /dev/null and b/tests/widgets/superfluid-campaign-widget/test-results/scw-11-airdrop-status-request-failed.png differ
diff --git a/tests/widgets/superfluid-campaign-widget/test-results/scw-12-airdrop-status-not-whitelisted.png b/tests/widgets/superfluid-campaign-widget/test-results/scw-12-airdrop-status-not-whitelisted.png
new file mode 100644
index 00000000..f368b6e1
Binary files /dev/null and b/tests/widgets/superfluid-campaign-widget/test-results/scw-12-airdrop-status-not-whitelisted.png differ
diff --git a/tests/widgets/superfluid-campaign-widget/test-results/scw-13-airdrop-status-eligible.png b/tests/widgets/superfluid-campaign-widget/test-results/scw-13-airdrop-status-eligible.png
new file mode 100644
index 00000000..76c94202
Binary files /dev/null and b/tests/widgets/superfluid-campaign-widget/test-results/scw-13-airdrop-status-eligible.png differ
diff --git a/tests/widgets/superfluid-campaign-widget/test-results/scw-14-leaderboard-loading.png b/tests/widgets/superfluid-campaign-widget/test-results/scw-14-leaderboard-loading.png
new file mode 100644
index 00000000..2bc94dcd
Binary files /dev/null and b/tests/widgets/superfluid-campaign-widget/test-results/scw-14-leaderboard-loading.png differ
diff --git a/tests/widgets/superfluid-campaign-widget/test-results/scw-15-leaderboard-request-failed.png b/tests/widgets/superfluid-campaign-widget/test-results/scw-15-leaderboard-request-failed.png
new file mode 100644
index 00000000..739cfbec
Binary files /dev/null and b/tests/widgets/superfluid-campaign-widget/test-results/scw-15-leaderboard-request-failed.png differ
diff --git a/tests/widgets/superfluid-campaign-widget/test-results/scw-16-leaderboard-tab-switch.png b/tests/widgets/superfluid-campaign-widget/test-results/scw-16-leaderboard-tab-switch.png
new file mode 100644
index 00000000..ebe2399b
Binary files /dev/null and b/tests/widgets/superfluid-campaign-widget/test-results/scw-16-leaderboard-tab-switch.png differ
diff --git a/tests/widgets/superfluid-campaign-widget/test-results/scw-17-sup-totals-populated.png b/tests/widgets/superfluid-campaign-widget/test-results/scw-17-sup-totals-populated.png
new file mode 100644
index 00000000..7fb8d5b6
Binary files /dev/null and b/tests/widgets/superfluid-campaign-widget/test-results/scw-17-sup-totals-populated.png differ
diff --git a/tests/widgets/superfluid-campaign-widget/test-results/scw-18-sup-totals-request-failed.png b/tests/widgets/superfluid-campaign-widget/test-results/scw-18-sup-totals-request-failed.png
new file mode 100644
index 00000000..66ecfb17
Binary files /dev/null and b/tests/widgets/superfluid-campaign-widget/test-results/scw-18-sup-totals-request-failed.png differ
diff --git a/tests/widgets/superfluid-campaign-widget/test-results/scw-19-action-card-whole-card-click.png b/tests/widgets/superfluid-campaign-widget/test-results/scw-19-action-card-whole-card-click.png
new file mode 100644
index 00000000..7fb8d5b6
Binary files /dev/null and b/tests/widgets/superfluid-campaign-widget/test-results/scw-19-action-card-whole-card-click.png differ
diff --git a/tests/widgets/superfluid-campaign-widget/test-results/scw-20-responsive-content-320px-min-supported.png b/tests/widgets/superfluid-campaign-widget/test-results/scw-20-responsive-content-320px-min-supported.png
new file mode 100644
index 00000000..ce6d1833
Binary files /dev/null and b/tests/widgets/superfluid-campaign-widget/test-results/scw-20-responsive-content-320px-min-supported.png differ
diff --git a/tests/widgets/superfluid-campaign-widget/test-results/scw-21-responsive-content-360px-common-android.png b/tests/widgets/superfluid-campaign-widget/test-results/scw-21-responsive-content-360px-common-android.png
new file mode 100644
index 00000000..2978e1f4
Binary files /dev/null and b/tests/widgets/superfluid-campaign-widget/test-results/scw-21-responsive-content-360px-common-android.png differ
diff --git a/tests/widgets/superfluid-campaign-widget/test-results/scw-22-responsive-content-375px-iphone-se.png b/tests/widgets/superfluid-campaign-widget/test-results/scw-22-responsive-content-375px-iphone-se.png
new file mode 100644
index 00000000..9f579ed8
Binary files /dev/null and b/tests/widgets/superfluid-campaign-widget/test-results/scw-22-responsive-content-375px-iphone-se.png differ
diff --git a/tests/widgets/superfluid-campaign-widget/test-results/scw-23-responsive-content-390px-modern-iphone.png b/tests/widgets/superfluid-campaign-widget/test-results/scw-23-responsive-content-390px-modern-iphone.png
new file mode 100644
index 00000000..b8f0eea2
Binary files /dev/null and b/tests/widgets/superfluid-campaign-widget/test-results/scw-23-responsive-content-390px-modern-iphone.png differ
diff --git a/tests/widgets/superfluid-campaign-widget/test-results/scw-24-responsive-content-412px-larger-android.png b/tests/widgets/superfluid-campaign-widget/test-results/scw-24-responsive-content-412px-larger-android.png
new file mode 100644
index 00000000..fac4b6c7
Binary files /dev/null and b/tests/widgets/superfluid-campaign-widget/test-results/scw-24-responsive-content-412px-larger-android.png differ
diff --git a/tests/widgets/superfluid-campaign-widget/test-results/scw-25-responsive-leaderboard-disconnected-320px-min-supported.png b/tests/widgets/superfluid-campaign-widget/test-results/scw-25-responsive-leaderboard-disconnected-320px-min-supported.png
new file mode 100644
index 00000000..570055b2
Binary files /dev/null and b/tests/widgets/superfluid-campaign-widget/test-results/scw-25-responsive-leaderboard-disconnected-320px-min-supported.png differ
diff --git a/tests/widgets/superfluid-campaign-widget/test-results/scw-26-responsive-leaderboard-disconnected-360px-common-android.png b/tests/widgets/superfluid-campaign-widget/test-results/scw-26-responsive-leaderboard-disconnected-360px-common-android.png
new file mode 100644
index 00000000..fb128fa7
Binary files /dev/null and b/tests/widgets/superfluid-campaign-widget/test-results/scw-26-responsive-leaderboard-disconnected-360px-common-android.png differ
diff --git a/tests/widgets/superfluid-campaign-widget/test-results/scw-27-responsive-leaderboard-disconnected-375px-iphone-se.png b/tests/widgets/superfluid-campaign-widget/test-results/scw-27-responsive-leaderboard-disconnected-375px-iphone-se.png
new file mode 100644
index 00000000..dd9316f0
Binary files /dev/null and b/tests/widgets/superfluid-campaign-widget/test-results/scw-27-responsive-leaderboard-disconnected-375px-iphone-se.png differ
diff --git a/tests/widgets/superfluid-campaign-widget/test-results/scw-28-responsive-leaderboard-disconnected-390px-modern-iphone.png b/tests/widgets/superfluid-campaign-widget/test-results/scw-28-responsive-leaderboard-disconnected-390px-modern-iphone.png
new file mode 100644
index 00000000..6e7b8b15
Binary files /dev/null and b/tests/widgets/superfluid-campaign-widget/test-results/scw-28-responsive-leaderboard-disconnected-390px-modern-iphone.png differ
diff --git a/tests/widgets/superfluid-campaign-widget/test-results/scw-29-responsive-leaderboard-disconnected-412px-larger-android.png b/tests/widgets/superfluid-campaign-widget/test-results/scw-29-responsive-leaderboard-disconnected-412px-larger-android.png
new file mode 100644
index 00000000..2e54e45c
Binary files /dev/null and b/tests/widgets/superfluid-campaign-widget/test-results/scw-29-responsive-leaderboard-disconnected-412px-larger-android.png differ
diff --git a/tests/widgets/superfluid-campaign-widget/test-results/scw-30-responsive-leaderboard-connected-320px-min-supported.png b/tests/widgets/superfluid-campaign-widget/test-results/scw-30-responsive-leaderboard-connected-320px-min-supported.png
new file mode 100644
index 00000000..ab13c208
Binary files /dev/null and b/tests/widgets/superfluid-campaign-widget/test-results/scw-30-responsive-leaderboard-connected-320px-min-supported.png differ
diff --git a/tests/widgets/superfluid-campaign-widget/test-results/scw-31-responsive-leaderboard-connected-360px-common-android.png b/tests/widgets/superfluid-campaign-widget/test-results/scw-31-responsive-leaderboard-connected-360px-common-android.png
new file mode 100644
index 00000000..1d4a66f1
Binary files /dev/null and b/tests/widgets/superfluid-campaign-widget/test-results/scw-31-responsive-leaderboard-connected-360px-common-android.png differ
diff --git a/tests/widgets/superfluid-campaign-widget/test-results/scw-32-responsive-leaderboard-connected-375px-iphone-se.png b/tests/widgets/superfluid-campaign-widget/test-results/scw-32-responsive-leaderboard-connected-375px-iphone-se.png
new file mode 100644
index 00000000..cc7e4cd6
Binary files /dev/null and b/tests/widgets/superfluid-campaign-widget/test-results/scw-32-responsive-leaderboard-connected-375px-iphone-se.png differ
diff --git a/tests/widgets/superfluid-campaign-widget/test-results/scw-33-responsive-leaderboard-connected-390px-modern-iphone.png b/tests/widgets/superfluid-campaign-widget/test-results/scw-33-responsive-leaderboard-connected-390px-modern-iphone.png
new file mode 100644
index 00000000..49698cfb
Binary files /dev/null and b/tests/widgets/superfluid-campaign-widget/test-results/scw-33-responsive-leaderboard-connected-390px-modern-iphone.png differ
diff --git a/tests/widgets/superfluid-campaign-widget/test-results/scw-34-responsive-leaderboard-connected-412px-larger-android.png b/tests/widgets/superfluid-campaign-widget/test-results/scw-34-responsive-leaderboard-connected-412px-larger-android.png
new file mode 100644
index 00000000..817b8047
Binary files /dev/null and b/tests/widgets/superfluid-campaign-widget/test-results/scw-34-responsive-leaderboard-connected-412px-larger-android.png differ
diff --git a/tests/widgets/superfluid-campaign-widget/test-results/scw-35-content-wallet-chip-after-disconnect.png b/tests/widgets/superfluid-campaign-widget/test-results/scw-35-content-wallet-chip-after-disconnect.png
new file mode 100644
index 00000000..5c4a0a0d
Binary files /dev/null and b/tests/widgets/superfluid-campaign-widget/test-results/scw-35-content-wallet-chip-after-disconnect.png differ
diff --git a/tests/widgets/superfluid-campaign-widget/test-results/scw-35-content-wallet-chip-menu-open.png b/tests/widgets/superfluid-campaign-widget/test-results/scw-35-content-wallet-chip-menu-open.png
new file mode 100644
index 00000000..952a1f57
Binary files /dev/null and b/tests/widgets/superfluid-campaign-widget/test-results/scw-35-content-wallet-chip-menu-open.png differ
diff --git a/tests/widgets/superfluid-campaign-widget/test-results/scw-36-leaderboard-wallet-chip-after-disconnect.png b/tests/widgets/superfluid-campaign-widget/test-results/scw-36-leaderboard-wallet-chip-after-disconnect.png
new file mode 100644
index 00000000..3a7c8dba
Binary files /dev/null and b/tests/widgets/superfluid-campaign-widget/test-results/scw-36-leaderboard-wallet-chip-after-disconnect.png differ
diff --git a/tests/widgets/superfluid-campaign-widget/test-results/scw-36-leaderboard-wallet-chip-menu-open.png b/tests/widgets/superfluid-campaign-widget/test-results/scw-36-leaderboard-wallet-chip-menu-open.png
new file mode 100644
index 00000000..c2395b7d
Binary files /dev/null and b/tests/widgets/superfluid-campaign-widget/test-results/scw-36-leaderboard-wallet-chip-menu-open.png differ
diff --git a/tests/widgets/superfluid-campaign-widget/test-results/scw-37-content-wallet-chip-disconnected-after-refresh.png b/tests/widgets/superfluid-campaign-widget/test-results/scw-37-content-wallet-chip-disconnected-after-refresh.png
new file mode 100644
index 00000000..7dce11aa
Binary files /dev/null and b/tests/widgets/superfluid-campaign-widget/test-results/scw-37-content-wallet-chip-disconnected-after-refresh.png differ
diff --git a/tests/widgets/superfluid-campaign-widget/test-results/scw-37-content-wallet-chip-reconnected-after-refresh.png b/tests/widgets/superfluid-campaign-widget/test-results/scw-37-content-wallet-chip-reconnected-after-refresh.png
new file mode 100644
index 00000000..9d2d8819
Binary files /dev/null and b/tests/widgets/superfluid-campaign-widget/test-results/scw-37-content-wallet-chip-reconnected-after-refresh.png differ