refactor: use the ds components instead of duplicating

[pikonha]

No description provided.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
anticapture-storybook	Ready	Preview, Comment	Jul 8, 2026 7:53pm

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
anticapture	Ignored		Jul 8, 2026 7:53pm

[isadorable-png]

🎨 UI Review

Automated review · ⚠️ Reviewed without a Figma reference — preview + UX-expert evaluation. Searched the PR body/comments, the ClickUp task this branch maps to (DEV-600 — matched directly via branch name / PR title, "Replace platform components with DS components"), and its two parent "DS agent" batch tasks; none carry a Figma URL or image attachments. The main anticapture Vercel deployment is marked "Ignored" for this PR (root-directory scoping), and the only live deployment (anticapture-storybook) returned HTTP 403 (deployment-protected) on fetch, so this review is grounded in diff/code analysis only — no live visual confirmation was possible.

---

Attack Profitability & DAO Overview charts — loading state

MultilineChartAttackProfitability.tsx

• The chart's loading placeholder swapped a fixed <Lottie height={40} width={40} /> for <LogoAnimation size="sm" />. LogoAnimation's "sm" variant renders at 200×200px (see shared/components/design-system/loading-animation/LogoAnimation.tsx, sizeDimensions.sm = 200) — 5x larger than the original 40×40 inline indicator, and larger than the placeholder's own container (h-[170px] in context="overview", h-[300px] in context="section"). The animation will overflow/dominate the chart area instead of reading as a small inline spinner — use Spinner (design-system/spinner/Spinner, e.g. size="lg" = 32px) or another small indicator instead of LogoAnimation here — MultilineChartAttackProfitability.tsx:246 [Code-only]
• For contrast, the same swap was done correctly elsewhere: DelegatedSupplyHistory.tsx and TokenDistributionChart.tsx both went from height={400} width={400} to <LogoAnimation size="lg" /> (400px) — matching sizes, no issue there.

---

Token Distribution — "Add metric" dialog

TokenDistributionDialog.tsx

• The hand-rolled Radix Dialog (which capped itself at max-h-[85vh]) was replaced with the DS <Modal>, called with only className="max-w-[520px]" — no height/overflow override. On desktop, Modal's dialog panel sets overflow-hidden on DialogPrimitive.Content and does not cap height or make the body scrollable (shared/components/design-system/modal/Modal.tsx: the desktop body is a plain <div className="bg-surface-default w-full p-4">, unlike the mobile DrawerBody which does get overflow-y-auto). This dialog lists up to 13 metrics across 4 categories (features/token-distribution/utils/metrics.ts); on a short/laptop viewport the list can exceed the viewport height, and with no scroll affordance and overflow-hidden clipping, some metric buttons at the bottom become unreachable/unclickable — a step back from the old (already-imperfect) max-h-[85vh] behavior. Fix: pass height/scroll classes through, e.g. className="max-w-[520px] max-h-[85vh] overflow-y-auto", or wrap the metrics list itself in a scrollable container — TokenDistributionDialog.tsx:66 [Code-only]
• Positive: the same Modal correctly becomes a bottom-sheet Drawer on mobile (useScreenSize().isMobile branch in Modal.tsx), so the mobile checklist item is satisfied here.

---

Cards migrated from ui/card → design-system cards

AlertCard.tsx, DonationCard.tsx, FundingSourcesCard.tsx, AccordionContentArea.tsx, BaseCardDaoInfo.tsx, TheCardChartLayout.tsx, SkeletonDaoInfoCards.tsx, TokenDistributionSection.tsx

• The new DS Card (design-system/cards/card/Card.tsx) differs visually from the old ui/card.tsx Card it replaces: background moves from bg-card (--base-card, #09090b in dark) to bg-surface-default (--base-primary-foreground, #18181b in dark) — a visibly lighter surface — and it adds dark:rounded-none, so these cards will lose their rounded corners in dark mode (previously always rounded-lg). This is almost certainly the intended, consistent DS look (that's the point of this migration), but since there's no Figma/preview to confirm and it touches ~8 call sites at once, it's worth a deliberate visual pass on the Vercel preview once it's reachable rather than assuming parity. [Code-only]

---

Mobile

KpiRow.tsx, MonthlyRevenueChart.tsx, RevenueSummaryCard.tsx

• The mobile-only native <select> (lg:hidden) was replaced with the DS Select component. Select's trigger is fixed at h-9 (36px) (design-system/form/fields/select/Select.tsx) — an improvement over the old unstyled <select> but still under the 44×44px minimum touch-target guideline for a mobile-only control. Not introduced by this PR (it's the DS component's own sizing), but flagging since this PR is what puts it on 3 more mobile screens. [UX-heuristic]

---

Validated — looked off in code but no change needed

• ProposalInfoSection.tsx's onchain progress bars pass raw color="var(--color-success|error|secondary)" strings into <ProgressBar> instead of using its built-in segments/semantic color variants — stylistically inconsistent with the component's own API, but the three --color-* custom properties are genuinely defined in globals.css and resolve to the same values the semantic variants would produce, so there's no visible difference for users.
• SwitcherChart.tsx, TimePeriodSwitcher.tsx, SwitcherDate.tsx — Tabs/TabsTrigger → SegmentedControl swaps use the DS component's own size variants (sm/md) rather than hand-copied pixel widths; this is the correct way to adopt the DS control.

---

Generated by Claude Code

[github-actions]

🔍 Vercel preview: https://anticapture-aj6ekypg8-ful.vercel.app

[railway-app]

🚅 Deployed to the anticapture-pr-2042 environment in anticapture-infra

Service	Status	Web	Updated (UTC)
mcp-proxy	✅ Success (View Logs)	Web	Jul 9, 2026 at 12:14 am
mcp-docs	✅ Success (View Logs)		Jul 9, 2026 at 12:10 am
gitcoin-indexer-offchain	✅ Success (View Logs)		Jul 9, 2026 at 12:01 am
compound-indexer-offchain	✅ Success (View Logs)		Jul 8, 2026 at 11:50 pm
uniswap-indexer-offchain	✅ Success (View Logs)		Jul 8, 2026 at 11:50 pm
ens-indexer-offchain	✅ Success (View Logs)		Jul 8, 2026 at 11:43 pm
prometheus	✅ Success (View Logs)	Web	Jul 8, 2026 at 8:58 pm
grafana	✅ Success (View Logs)	Web	Jul 8, 2026 at 8:58 pm
nodeful	🚨 Crashed (View Logs)		Jul 8, 2026 at 8:02 pm
mcp-server	✅ Success (View Logs)		Jul 8, 2026 at 8:00 pm
gateful	✅ Success (View Logs)	Web	Jul 8, 2026 at 8:00 pm
aave-api	✅ Success (View Logs)		Jul 8, 2026 at 8:00 pm
gitcoin-api	✅ Success (View Logs)		Jul 8, 2026 at 7:59 pm
compound-api	✅ Success (View Logs)		Jul 8, 2026 at 7:59 pm
aave-indexer	✅ Success (View Logs)		Jul 8, 2026 at 7:59 pm
gitcoin-indexer	✅ Success (View Logs)		Jul 8, 2026 at 7:59 pm
tornado-indexer	✅ Success (View Logs)		Jul 8, 2026 at 7:59 pm
lil-nouns-indexer	✅ Success (View Logs)		Jul 8, 2026 at 7:59 pm
lil-nouns-api	✅ Success (View Logs)		Jul 8, 2026 at 7:59 pm
fluid-indexer	✅ Success (View Logs)		Jul 8, 2026 at 7:59 pm
fluid-api	✅ Success (View Logs)		Jul 8, 2026 at 7:59 pm
ens-indexer	✅ Success (View Logs)		Jul 8, 2026 at 7:59 pm
ens-api	✅ Success (View Logs)		Jul 8, 2026 at 7:59 pm
obol-api	✅ Success (View Logs)		Jul 8, 2026 at 7:59 pm
uniswap-api	✅ Success (View Logs)		Jul 8, 2026 at 7:59 pm
address-enrichment	✅ Success (View Logs)	Web	Jul 8, 2026 at 7:59 pm
compound-indexer	✅ Success (View Logs)		Jul 8, 2026 at 7:59 pm
nouns-api	✅ Success (View Logs)		Jul 8, 2026 at 7:59 pm
tornado-api	✅ Success (View Logs)		Jul 8, 2026 at 7:59 pm
shutter-api	✅ Success (View Logs)		Jul 8, 2026 at 7:59 pm
obol-indexer	✅ Success (View Logs)		Jul 8, 2026 at 7:59 pm
shutter-indexer	✅ Success (View Logs)		Jul 8, 2026 at 7:59 pm
uniswap-indexer	✅ Success (View Logs)		Jul 8, 2026 at 7:59 pm
scroll-api	✅ Success (View Logs)		Jul 8, 2026 at 7:59 pm
nouns-indexer	✅ Success (View Logs)		Jul 8, 2026 at 7:59 pm
scroll-indexer	✅ Success (View Logs)		Jul 8, 2026 at 7:59 pm
ens-relayer	✅ Success (View Logs)		Jul 8, 2026 at 7:59 pm
otelcol	✅ Success (View Logs)		Jul 8, 2026 at 7:59 pm
erpc	✅ Success (View Logs)	Web	Jul 8, 2026 at 7:58 pm
tempo	✅ Success (View Logs)		Jul 8, 2026 at 7:58 pm
alertmanager	✅ Success (View Logs)	Web	Jul 8, 2026 at 7:58 pm
authful	✅ Success (View Logs)	Web	Jul 8, 2026 at 7:57 pm
loki	✅ Success (View Logs)	Web	Jul 8, 2026 at 7:57 pm