Feat/playground token price tracker - #8877
Conversation
- Use uppercase prices.USD key (matches Bridge API docs) - Use Shadcn Button component with cn() and aria-pressed - Expose className prop on root element for consumer overrides - Fix docsLink to point to Bridge.tokens reference page
|
|
@TanmayDagur is attempting to deploy a commit to the thirdweb Team on Vercel. A member of the Team first needs to authorize it. |
github-actions
Bot
added
the
Playground
WalkthroughAdds a Price Tracker page with token navigation and feature-card links. The client component supports five chains, live ChangesToken Price Tracker
Estimated code review effort: 3 (Moderate) | ~20 minutes Sequence Diagram(s)sequenceDiagram
participant User
participant TokenPriceTracker
participant Bridge.tokens
User->>TokenPriceTracker: Select a supported chain
TokenPriceTracker->>Bridge.tokens: Request token market data
Bridge.tokens-->>TokenPriceTracker: Return prices and market metrics
TokenPriceTracker-->>User: Render formatted token results
Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches 💡 1🛠️ Fix failing CI checks 💡
🧪 Generate unit tests (beta)
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. Comment Warning |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (5)
apps/playground-web/src/app/tokens/price-tracker/page.tsx (1)
20-34: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winAdd an explicit return type to
Page.
Pageomits its return type. Add: JSX.Elementand the required type import.As per coding guidelines,
**/*.{ts,tsx}requires “explicit function declarations and return types.”Proposed fix
+import type { JSX } from "react"; import { TrendingUpIcon } from "lucide-react"; -export default function Page() { +export default function Page(): JSX.Element {🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/playground-web/src/app/tokens/price-tracker/page.tsx` around lines 20 - 34, Update the default `Page` function declaration to explicitly return `JSX.Element`, and add the required JSX type import while preserving the existing rendered structure.Source: Coding guidelines
apps/playground-web/src/components/token-price/token-price-tracker.tsx (4)
67-67: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueRemove the redundant section comments.
These comments only label the adjacent markup. Keep comments only where the logic is ambiguous.
As per coding guidelines,
**/*.{ts,tsx}requires “Comment only ambiguous logic in TypeScript files.”Also applies to: 88-90, 98-98, 121-121, 128-128, 164-164
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/playground-web/src/components/token-price/token-price-tracker.tsx` at line 67, Remove the redundant section comments in the token price tracker component, including the comments near the chain selector and the other referenced markup sections. Preserve only comments that clarify genuinely ambiguous logic.Source: Coding guidelines
49-49: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winAdd explicit return types to both components.
TokenPriceTrackerPreviewandTokenPriceTrackeromit their return types. Add explicit JSX return types.As per coding guidelines,
**/*.{ts,tsx}requires “explicit function declarations and return types.”Also applies to: 175-175
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/playground-web/src/components/token-price/token-price-tracker.tsx` at line 49, Add explicit JSX return types to both TokenPriceTrackerPreview and TokenPriceTracker function declarations, using the project’s standard JSX return type while leaving their existing component behavior unchanged.Source: Coding guidelines
15-15: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winImport
Buttonfrom the required alias path.Use
@/components/ui/buttonfor the UI primitive.As per coding guidelines,
apps/{dashboard,playground-web}/src/**/*.{ts,tsx}requires “Import UI component primitives from@/components/ui/*.”Proposed fix
-import { Button } from "../ui/button"; +import { Button } from "`@/components/ui/button`";🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/playground-web/src/components/token-price/token-price-tracker.tsx` at line 15, Update the Button import in the token price tracker to use the required "`@/components/ui/button`" alias path instead of the relative "../ui/button" path, leaving its usage unchanged.Source: Coding guidelines
26-175: 📐 Maintainability & Code Quality | 🔵 Trivial | 🏗️ Heavy liftSplit this module into the required function units.
This file defines four functions.
TokenPriceTrackerPreviewalso owns state. Split formatting, stateful behavior, and presentation into compliant modules, or document an approved exception for this interactive feature.As per coding guidelines,
**/*.{ts,tsx}requires “Limit each TypeScript file to one stateless, single-responsibility function for clarity and testability.”🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/playground-web/src/components/token-price/token-price-tracker.tsx` around lines 26 - 175, Split the four-function token price tracker module into compliant units: move formatUsd and formatPrice into a dedicated formatting module, separate the state/query logic from TokenPriceTrackerPreview, and keep presentation in a single stateless component. If the interactive component cannot be split under the guideline, document the approved exception using the project’s established mechanism.Source: Coding guidelines
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@apps/playground-web/src/components/token-price/token-price-tracker.tsx`:
- Around line 184-210: Make the embedded token price tracker example
self-contained by declaring typed values for chainId and THIRDWEB_CLIENT, or by
accepting them as typed component inputs before use in useQuery. Ensure the
existing Bridge.tokens configuration and rendering remain unchanged while
eliminating unresolved identifier errors.
- Around line 152-158: Update the metric rendering in the token price tracker to
use explicit nullish or numeric presence checks instead of truthiness checks for
token.prices.USD, token.marketCapUsd, and token.volume24hUsd, so valid zero
values are formatted while only absent values render "—".
---
Nitpick comments:
In `@apps/playground-web/src/app/tokens/price-tracker/page.tsx`:
- Around line 20-34: Update the default `Page` function declaration to
explicitly return `JSX.Element`, and add the required JSX type import while
preserving the existing rendered structure.
In `@apps/playground-web/src/components/token-price/token-price-tracker.tsx`:
- Line 67: Remove the redundant section comments in the token price tracker
component, including the comments near the chain selector and the other
referenced markup sections. Preserve only comments that clarify genuinely
ambiguous logic.
- Line 49: Add explicit JSX return types to both TokenPriceTrackerPreview and
TokenPriceTracker function declarations, using the project’s standard JSX return
type while leaving their existing component behavior unchanged.
- Line 15: Update the Button import in the token price tracker to use the
required "`@/components/ui/button`" alias path instead of the relative
"../ui/button" path, leaving its usage unchanged.
- Around line 26-175: Split the four-function token price tracker module into
compliant units: move formatUsd and formatPrice into a dedicated formatting
module, separate the state/query logic from TokenPriceTrackerPreview, and keep
presentation in a single stateless component. If the interactive component
cannot be split under the guideline, document the approved exception using the
project’s established mechanism.
🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 0c1037d9-8ba8-44dc-9a4e-a29ef184c5ce
📒 Files selected for processing (4)
apps/playground-web/src/app/data/pages-metadata.tsapps/playground-web/src/app/navLinks.tsapps/playground-web/src/app/tokens/price-tracker/page.tsxapps/playground-web/src/components/token-price/token-price-tracker.tsx
| {token.prices?.USD ? formatPrice(token.prices.USD) : "—"} | ||
| </span> | ||
| <span className="hidden w-24 self-center text-right text-xs text-muted-foreground tabular-nums sm:block"> | ||
| {token.marketCapUsd ? formatUsd(token.marketCapUsd) : "—"} | ||
| </span> | ||
| <span className="hidden w-24 self-center text-right text-xs text-muted-foreground tabular-nums sm:block"> | ||
| {token.volume24hUsd ? formatUsd(token.volume24hUsd) : "—"} |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Render zero-valued metrics instead of an absent-value marker.
The truthiness checks treat 0 as missing. Use an explicit numeric or nullish check so zero price, market cap, and volume display correctly.
Proposed fix
- {token.prices?.USD ? formatPrice(token.prices.USD) : "—"}
+ {typeof token.prices?.USD === "number"
+ ? formatPrice(token.prices.USD)
+ : "—"}
- {token.marketCapUsd ? formatUsd(token.marketCapUsd) : "—"}
+ {typeof token.marketCapUsd === "number"
+ ? formatUsd(token.marketCapUsd)
+ : "—"}
- {token.volume24hUsd ? formatUsd(token.volume24hUsd) : "—"}
+ {typeof token.volume24hUsd === "number"
+ ? formatUsd(token.volume24hUsd)
+ : "—"}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| {token.prices?.USD ? formatPrice(token.prices.USD) : "—"} | |
| </span> | |
| <span className="hidden w-24 self-center text-right text-xs text-muted-foreground tabular-nums sm:block"> | |
| {token.marketCapUsd ? formatUsd(token.marketCapUsd) : "—"} | |
| </span> | |
| <span className="hidden w-24 self-center text-right text-xs text-muted-foreground tabular-nums sm:block"> | |
| {token.volume24hUsd ? formatUsd(token.volume24hUsd) : "—"} | |
| {typeof token.prices?.USD === "number" | |
| ? formatPrice(token.prices.USD) | |
| : "—"} | |
| </span> | |
| <span className="hidden w-24 self-center text-right text-xs text-muted-foreground tabular-nums sm:block"> | |
| {typeof token.marketCapUsd === "number" | |
| ? formatUsd(token.marketCapUsd) | |
| : "—"} | |
| </span> | |
| <span className="hidden w-24 self-center text-right text-xs text-muted-foreground tabular-nums sm:block"> | |
| {typeof token.volume24hUsd === "number" | |
| ? formatUsd(token.volume24hUsd) | |
| : "—"} |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@apps/playground-web/src/components/token-price/token-price-tracker.tsx`
around lines 152 - 158, Update the metric rendering in the token price tracker
to use explicit nullish or numeric presence checks instead of truthiness checks
for token.prices.USD, token.marketCapUsd, and token.volume24hUsd, so valid zero
values are formatted while only absent values render "—".
| code={`import { Bridge } from "thirdweb"; | ||
| import { useQuery } from "@tanstack/react-query"; | ||
|
|
||
| function App() { | ||
| const { data: tokens } = useQuery({ | ||
| queryKey: ["tokens", chainId], | ||
| queryFn: () => | ||
| Bridge.tokens({ | ||
| client: THIRDWEB_CLIENT, | ||
| chainId: 1, // Ethereum | ||
| limit: 15, | ||
| sortBy: "market_cap", | ||
| includePrices: true, | ||
| }), | ||
| refetchInterval: 30_000, // auto-refresh every 30s | ||
| }); | ||
|
|
||
| return tokens?.map((token) => ( | ||
| <div key={token.address}> | ||
| <img src={token.iconUri} alt={token.name} /> | ||
| <span>{token.name} ({token.symbol})</span> | ||
| <span>\${token.prices?.USD?.toFixed(2)}</span> | ||
| <span>MCap: {token.marketCapUsd}</span> | ||
| <span>Vol: {token.volume24hUsd}</span> | ||
| </div> | ||
| )); | ||
| }`} |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Make the usage example self-contained.
The example references chainId and THIRDWEB_CLIENT, but it does not declare either identifier. Copying this example produces TypeScript errors. Define them in the example or pass them as typed component inputs.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@apps/playground-web/src/components/token-price/token-price-tracker.tsx`
around lines 184 - 210, Make the embedded token price tracker example
self-contained by declaring typed values for chainId and THIRDWEB_CLIENT, or by
accepting them as typed component inputs before use in useQuery. Ensure the
existing Bridge.tokens configuration and rendering remain unchanged while
eliminating unresolved identifier errors.
1 participant
feat(playground): add Token Price Tracker page with live market data
Note: This is a continuation of PR #8855 which was closed by the stale bot.
What
Adds a new interactive Token Price Tracker page to the playground under the Tokens section (
/tokens/price-tracker).Why
The Tokens section currently only has headless UI component demos. There's no example demonstrating how to fetch live market data using the SDK's
Bridge.tokens()API — which already supports USD prices, market cap, and 24h volume.🔄 Updates since previous PR (#8855)
Addressed all of CodeRabbit's review feedback from the previous PR:
prices.USDkey: Updated from lowercaseusdto uppercaseUSDto match the API response, fixing the missing price values.<button>with ShadcnButtoncomponent, utilizedcn(), and addedaria-pressedfor accessibility on the chain selector.classNameprop on the root element ofTokenPriceTrackerfor consumer overrides.docsLinkto point to the correctBridge.tokensreference page (portal.thirdweb.com/references/typescript/v5/tokens).Features
CodeExamplepattern to show implementation code alongside the live demoPR-Codex overview
This PR introduces a new
Price Trackerfeature to the application, allowing users to view live token prices, market cap, and 24-hour volume across multiple chains.Detailed summary
Price Tracker.Price Trackerfeature card inpages-metadata.ts.price-trackerpage with metadata.TokenPriceTrackercomponent to fetch and display token data.Summary by CodeRabbit