[Feature]: Add Superfluid Campaign GoodWidget

[goodbounties-nanoclaw-agent]

Short description

One reusable Superfluid Campaign GoodWidget, embeddable as a public URL page and inside GoodWallet V2. Explains the campaign, shows eligible actions/points, campaign progress, and a public leaderboard. Connecting a wallet is optional — it additionally reveals the user's own rank, total points, which of the six eligible activity types they've completed, and highlights their leaderboard row.

This phase is UI + responsive layout only, using mock leaderboard/progress data. No real points logic, reward calculation, or API integration yet — that follows once the GoodDollar / Flow State / Gardens data sources are finalized (explicitly out of scope for now).

Which repos and packages to work with

• Target: GoodDollar/GoodWidget. Final package/component structure (new package vs. extending an existing one) is intentionally left open — decide and document it in the technical plan, following the repo's existing decomposition precedent (thin top-level contract + components/ + shared helpers, see packages/streaming-widget).
• Reuse packages/citizen-claim-widget for both the Claim action (default tab) and the Invite action (invite tab, preloaded) — do not rebuild those flows.
• Behavior reference only (not visual/design reference): 1Hive/gardens-v2 (apps/web/app/(app)/gardens/campaigns) for how it structures a public leaderboard, optional wallet connection, connected/disconnected states, and a highlighted user row. Do not copy its visual design — follow the attached mockups instead.

User flows, states and behaviours

• No wallet connected: full campaign header/description, both reward-pool sections (view-only actions, progress, participant counts), and the full public leaderboard are all visible, plus a "Connect wallet" option. No personal data shown.
• Wallet connected: adds the user's rank, total points, and highlights their row in the leaderboard. Each of the six activity types shows an icon indicating whether the user has completed that activity at least once (not counts — just done/not-done).
• Two reward-pool sections, stacked vertically (not side-by-side), each with its own progress bar and participant count:
  • GoodDollar actions pool — Claim UBI, Invite users, Vote on Flow State.
  • Ecosystem funding actions pool — Fund GoodBuilders Season 4, one-time donation, stream to a Community Pool.
• Progress amounts and participant counts use mock data in this phase. Their final definitions and live data sources are out of scope here.
• Leaderboard shows points, not SUP. "View Leaderboard" expands/links to the full list.
• FAQ is a set of expandable accordion items (see full copy below).
• Mobile/tablet: same content, hierarchy, and functionality as desktop — no separate mobile-only behaviors. The mockups are desktop-only; see "Responsive approach" below for how the tablet/mobile layout itself gets decided.

Responsive approach

The approved mockups only cover desktop. Tablet and mobile layouts are not specified by the mockups and are not prescribed by this issue — propose them as part of the technical plan, not during this issue's drafting.

• Requirement: the responsive proposal must preserve the same content, hierarchy, and functionality across screen sizes — no content dropped or restructured on smaller screens, just relayout.
• Document the concrete responsive/breakpoint decisions (what changes at which breakpoint, and why) in the [Plan] sub-issue before implementation begins — this is a required section of the plan, not something to decide silently during coding.
• Reference starting point (not a mandated final design): the repo already has a Tamagui breakpoint system (packages/ui/src/config.ts, media: { sm: maxWidth 480, md: maxWidth 768, gtSm/gtMd counterparts }), used via $gtSm/$gtMd props on XStack/YStack/Stack from @goodwidget/ui in governance-widget and ai-credits-widget. Use this existing mechanism rather than introducing a new responsive utility, useWindowDimensions, or CSS media query — but the specific breakpoint behavior (e.g. how the pool action-card grids and leaderboard reflow) is the plan's to define and justify against the mockups.

CTA destinations

• Claim UBI → citizen-claim-widget, default (claim) tab.
• Invite users → citizen-claim-widget, invite tab preloaded.
• Vote on Flow State / Fund GoodBuilders Season 4 → https://flowstate.network/flow-councils/42220/0x582e3314d4ef56c18930acb10bb64313525e7820
• One-time donation / Stream to a Community Pool → https://app.gardens.fund/gardens/42220/0xf42c9ca2b10010142e2bac34ebdddb0b82177684

Activity icons (exact mapping, from approved spec)

• Claim UBI — blue calendar
• Successful invite — blue person-plus
• Flow State vote — blue megaphone
• Flow State funding stream — blue stream icon
• Gardens one-time donation — green hand-and-coin
• Gardens funding stream — green stream icon (same glyph as Flow State funding, green variant)

Design reference

Primary UI reference for desktop layout, styling, colors, icons, and copy — follow these mockups closely. The mockups do not define tablet or mobile behavior. The responsive approach must be proposed and documented in the [Plan] sub-issue before implementation.

Full page copy (content page)

Header

Superfluid Ecosystem Rewards

Earn SUP by claiming G$, inviting new users, voting on Flow State to help allocate funding, and supporting GoodBuilders through Flow State and Gardens.
622K SUP allocated · Ends 30 September

Leaderboard
Top contributors — View Leaderboard
SUP allocated: [Distributed amount] / 622K SUP · [Number] participants · Last updated: [time]

How to participate
Complete eligible actions across the two campaign pools to earn points. Your share of each pool is based on the points you earn in that pool.

GoodDollar actions — [Distributed amount] / 217,700 SUP · [Number] participants

• Claim UBI (GoodDollar) — Claim your daily G$. The more days you claim, the more points you earn. 1 point per claim. Claim
• Invite users (GoodDollar) — Invite someone to claim G$ through GoodWallet. 10 points per successful invite. Invite
• Vote on Flow State (Flow State) — Vote to help decide how GoodBuilders Season 4 participants receive funding. 5 points per completed vote. Vote

Ecosystem funding actions — [Distributed amount] / 404,300 SUP · [Number] participants

• Fund GoodBuilders Season 4 (Flow State) — Open a funding stream to the GoodBuilders Season 4 pool. 2 points per $1 streamed. Fund
• Make a one-time donation (Gardens) — Make a one-time donation to an eligible GoodBuilders Community Pool. 1 point per $1 donated. Donate
• Stream to a Community Pool (Gardens) — Open a funding stream to an eligible GoodBuilders Community Pool. 2 points per $1 streamed. Fund

FAQ (expandable accordion items)

What is SUP?
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.

How are my SUP rewards calculated?
Two separate reward pools: GoodDollar actions, and Ecosystem funding 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.

When does an invite count as successful?
An invite counts after the invited user completes three G$ claims. The invite reward is registered when they complete their fourth claim.

How do Flow State voting points work?
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.

How do I start receiving SUP?
First, complete eligible campaign actions to earn points. Then: open the Superfluid Claim App, 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.

What happens after I claim?
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.

Do my rewards arrive automatically?
No. Your campaign activity earns points, but you need to open the Superfluid Claim App and claim your available SUP.

Where does my SUP go?
Your claimed SUP streams into your Superfluid Reserve, manageable at the Reserve page.

Can I earn SUP from other campaigns?
Yes — visit Discover, Use and Earn to explore other eligible campaigns.

Which network is used to claim SUP?
Base.

Do I need ETH for gas?
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.

What should I do if the gas transaction fails?
Wait a few minutes, then check BaseScan 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.

Constraints

• Build one reusable GoodWidget that works as a public page and inside GoodWallet V2 — not a separate product or custom landing page.
• Reuse the existing citizen-claim-widget for Claim and Invite. Do not rebuild those flows.
• Anyone can view the campaign and leaderboard without connecting a wallet; connecting only reveals the user's own position/points/activity/highlighted row.
• Leaderboard displays points, not SUP.
• No charts, trends, percentiles, or other dashboard features — keep it simple.
• Mockups are desktop-only; tablet/mobile responsive layout is not specified here — it must be proposed and documented in the [Plan] sub-issue before implementation, preserving the same content, hierarchy, and functionality as desktop.
• Mock data only in this phase (progress amounts, participant counts, leaderboard entries) — final points logic/reward calculation/API integration is out of scope.

Acceptance criteria

• Widget renders as a public-page component and as a GoodWallet V2 embed from the same reusable implementation.
• Disconnected state shows full campaign header, both reward-pool sections with mock progress/participant data, full public leaderboard, and a "Connect wallet" option — no personal data.
• Connected state additionally shows the user's rank, total points, per-activity completion icons (six activity types), and highlights their leaderboard row.
• Claim and Invite actions open citizen-claim-widget on the correct tab; Vote/Fund/Donate actions link out to the correct Flow State / Gardens URLs.
• FAQ renders as expandable accordion items with the copy above.
• Layout, styling, colors, icons, and copy match the attached mockups on desktop; the [Plan] sub-issue documents a tablet/mobile responsive approach that preserves the same content, hierarchy, and functionality, before implementation begins.
• No live points/reward-calculation logic or external API integration is introduced — leaderboard/progress data is mocked.

Source specification / additional context

• Notion Bounty Discovery page: https://app.notion.com/p/Superfluid-Campaign-GoodWidget-3aaf258232f08002b2d6dd6f413bbeed
• Campaign specification (parent doc): https://app.notion.com/p/gooddollar/Prepare-SuperFluid-Campaign-2d1f258232f0808fa3f2cadbc68d7fa2
• Related links: Gardens - GoodDollar Builders, GoodBuilders Season 4