feat: tokens page revamp

[rohanchkrabrty]

Summary

• Add new tokens page in views-new/tokens/ using apsara-v1 components (DataTable, Dialog, Callout, etc.)
• Implement virtualized transaction table with date and event filters, token amount display, and member column with avatars
• Add tokens dialog with form validation, product pricing display, and Stripe checkout integration
• Wire up tokens page in client-demo app router and settings sidebar

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
frontier	Ready	Preview, Comment	Apr 12, 2026 9:05am

[coderabbitai]

Caution

Review failed

Pull request was closed or merged during review

📝 Walkthrough

Summary by CodeRabbit

• New Features
  • New Tokens section in Settings for managing token balance and purchases.
  • Token balance panel showing available balance with loading states and styling improvements.
  • Add Tokens dialog to purchase tokens and proceed to checkout with validation and error toasts.
  • Transaction history table with sortable/filterable Date, Tokens, Event, and Member columns.
  • Permissions-aware controls, tooltips, and user-facing errors/toasts for failed data loads.

Walkthrough

Adds a new Tokens UI surface: a TokensView component, styles, transactions columns, and AddTokensDialog; re-exports TokensView from the React SDK; and registers a / :orgId/settings/tokens route plus a "Tokens" item in the client-demo settings sidebar.

Changes

Cohort / File(s)	Summary
Client-demo routing & page web/apps/client-demo/src/Router.tsx, web/apps/client-demo/src/pages/Settings.tsx, web/apps/client-demo/src/pages/settings/Tokens.tsx	Registered /:orgId/settings/tokens, added "Tokens" to NAV_ITEMS, and added a page wrapper that renders the SDK TokensView.
Tokens view & styles web/sdk/react/views-new/tokens/tokens-view.tsx, web/sdk/react/views-new/tokens/tokens-view.module.css	New TokensView component: balance panel, conditional callout, Add Tokens trigger, transactions DataTable; CSS module with layout classes.
Add Tokens dialog web/sdk/react/views-new/tokens/components/add-tokens-dialog.tsx	New AddTokensDialog with product fetch, Yup/react-hook-form validation, quantity bounds, create-checkout mutation, and redirect handling.
Transactions table columns web/sdk/react/views-new/tokens/components/columns.tsx	New getColumns producing Date (with date filters/operators), Tokens (signed amounts), Event (multiselect filter), and Member (avatar/title) columns and filter option map.
SDK exports / barrels web/sdk/react/views-new/tokens/index.ts, web/sdk/react/index.ts	Re-exported TokensView from tokens index and added TokensView to the React SDK barrel.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly related PRs

• feat: SDK general page design revamp #1480: Modifies client-demo router and Settings UI—overlaps Router/Settings edits.
• feat: move sdk tokens #1426: Adds/refactors tokens UI surface (TokensView, AddTokensDialog, columns)—directly related to SDK tokens components.
• feat: profile page revamp #1484: Adds nested settings route and SDK export changes—closely related to routing and SDK barrel updates.

Suggested reviewers

• rsbh
• rohilsurana

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coveralls]

Coverage Report for CI Build 24303107260

Warning

Build has drifted: This PR's base is out of sync with its target branch, so coverage data may include unrelated changes.
Quick fix: rebase this PR. Learn more →

Coverage remained the same at 41.606%

Details

• Coverage remained the same as the base build.
• Patch coverage: No coverable lines changed in this PR.
• No coverage regressions found.

Uncovered Changes

No uncovered changes found.

Coverage Regressions

No coverage regressions found.

---

Coverage Stats

Relevant Lines:	36442
Covered Lines:	15162
Line Coverage:	41.61%
Coverage Strength:	11.89 hits per line

---

💛 - Coveralls

[coderabbitai]

Actionable comments posted: 6

🧹 Nitpick comments (1)

web/sdk/react/views-new/tokens/tokens-view.tsx (1)

18-19: Consider consolidating Radix icon imports.

These two imports from the same package can be merged into a single import statement.

-import { InfoCircledIcon, PlusIcon } from '@radix-ui/react-icons';
-import { ExclamationTriangleIcon } from '@radix-ui/react-icons';
+import { InfoCircledIcon, PlusIcon, ExclamationTriangleIcon } from '@radix-ui/react-icons';

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 37a7c21e-aac2-4e3d-b4ea-7a09d1629893

📥 Commits

Reviewing files that changed from the base of the PR and between 862e133 and 38d385e.

📒 Files selected for processing (9)

• web/apps/client-demo/src/Router.tsx
• web/apps/client-demo/src/pages/Settings.tsx
• web/apps/client-demo/src/pages/settings/Tokens.tsx
• web/sdk/react/index.ts
• web/sdk/react/views-new/tokens/components/add-tokens-dialog.tsx
• web/sdk/react/views-new/tokens/components/columns.tsx
• web/sdk/react/views-new/tokens/index.ts
• web/sdk/react/views-new/tokens/tokens-view.module.css
• web/sdk/react/views-new/tokens/tokens-view.tsx

[paanSinghCoder]

Approved with minor comments.