feat(playground): add Token Price Tracker page with live market data - #8855
feat(playground): add Token Price Tracker page with live market data#8855TanmayDagur wants to merge 1 commit into
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub. |
|
@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 multi-chain token price tracker with live market data, a dedicated playground route, and entries in the token feature catalog and navigation. ChangesToken Price Tracker
Estimated code review effort: 3 (Moderate) | ~20 minutes Suggested reviewers: Sequence Diagram(s)sequenceDiagram
participant Page
participant TokenPriceTracker
participant TokenPriceTrackerPreview
participant Bridge.tokens
Page->>TokenPriceTracker: render tracker
TokenPriceTracker->>TokenPriceTrackerPreview: render preview
TokenPriceTrackerPreview->>Bridge.tokens: request selected-chain token prices
Bridge.tokens-->>TokenPriceTrackerPreview: return price and market data
TokenPriceTrackerPreview-->>Page: render formatted token table
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (1)
apps/playground-web/src/components/token-price/token-price-tracker.tsx (1)
47-47: 📐 Maintainability & Code Quality | 🔵 Trivial | 🏗️ Heavy liftConform component declarations to the TypeScript convention.
Add explicit return types, and split the tracker’s formatter helpers, stateful preview, and
CodeExamplewrapper into focused modules; the current file contains multiple responsibilities and functions.
apps/playground-web/src/components/token-price/token-price-tracker.tsx#L47-L47: add an explicit component return type and extract preview responsibilities.apps/playground-web/src/components/token-price/token-price-tracker.tsx#L170-L170: add an explicit component return type and retain only the wrapper responsibility.apps/playground-web/src/app/tokens/price-tracker/page.tsx#L20-L20: add an explicit page return type.Run
pnpm fix && pnpm lintafter the split.As per coding guidelines, “Write idiomatic TypeScript with explicit function declarations and return types” and “Limit each TypeScript file to one stateless, single-responsibility function.”
🤖 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 47, The token price tracker components and page need explicit return types and clearer single responsibilities. In apps/playground-web/src/components/token-price/token-price-tracker.tsx lines 47-47 and 170-170, split formatter helpers, the stateful TokenPriceTrackerPreview component, and the CodeExample wrapper into focused modules; add explicit component return types, with TokenPriceTrackerPreview retaining preview logic and CodeExample retaining only wrapper logic. In apps/playground-web/src/app/tokens/price-tracker/page.tsx lines 20-20, add an explicit return type to the page function. Run pnpm fix and pnpm lint after the split.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/app/tokens/price-tracker/page.tsx`:
- Line 27: Update the docsLink prop in the Price Tracker page to use the
Bridge.tokens reference URL for supported tokens, replacing the current generic
bridge documentation link while leaving the surrounding configuration unchanged.
In `@apps/playground-web/src/components/token-price/token-price-tracker.tsx`:
- Around line 68-80: Update TokenPriceTracker to use the design-system Button
imported from the appropriate `@/components/ui` module, compose its conditional
styles with cn(), and add aria-pressed based on selectedChainId. Extend
TokenPriceTracker’s props with an optional className and apply it to the root
element through cn() so consumers can override its styles.
- Line 147: Update both token price references in token-price-tracker.tsx at
lines 147-147 and 199-199 to read the documented uppercase prices.USD key
instead of prices.usd, preserving the existing formatting and fallback behavior.
---
Nitpick comments:
In `@apps/playground-web/src/components/token-price/token-price-tracker.tsx`:
- Line 47: The token price tracker components and page need explicit return
types and clearer single responsibilities. In
apps/playground-web/src/components/token-price/token-price-tracker.tsx lines
47-47 and 170-170, split formatter helpers, the stateful
TokenPriceTrackerPreview component, and the CodeExample wrapper into focused
modules; add explicit component return types, with TokenPriceTrackerPreview
retaining preview logic and CodeExample retaining only wrapper logic. In
apps/playground-web/src/app/tokens/price-tracker/page.tsx lines 20-20, add an
explicit return type to the page function. Run pnpm fix and pnpm lint after the
split.
🪄 Autofix (Beta)
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: 08579bf7-0920-4b65-b791-175e31ee811c
📒 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
| containerClassName="space-y-12" | ||
| icon={TrendingUpIcon} | ||
| description={description} | ||
| docsLink="https://portal.thirdweb.com/typescript/v5/bridge/get-supported-tokens?utm_source=playground" |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== file excerpt =="
if [ -f apps/playground-web/src/app/tokens/price-tracker/page.tsx ]; then
nl -ba apps/playground-web/src/app/tokens/price-tracker/page.tsx | sed -n '1,120p'
else
echo "file not found"
fi
echo
echo "== related docs links in repository =="
rg -n "portal\.thirdweb\.com|get-supported-tokens|Bridge\.tokens|bridge/get-supported-tokens|docsLink" apps/playground-web/src apps -g '*.tsx' -g '*.ts' | head -n 80Repository: thirdweb-dev/js
Length of output: 212
🌐 Web query:
Third.js bridge get supported tokens TypeScript docs portal.thirdweb.com
💡 Result:
To retrieve supported tokens for the thirdweb bridge in the TypeScript SDK, you use the Bridge.tokens utility [1][2]. This function allows you to query, filter, and paginate through supported bridge tokens [1][3]. You can access this functionality by importing Bridge from the thirdweb package [1][2]: import { Bridge } from "thirdweb"; The Bridge.tokens function accepts an options object to filter results, which acts as an AND operator when multiple filters are applied [1][4][2]. Common usage examples include: Filtering by chainId: const ethTokens = await Bridge.tokens({ chainId: 1, client: thirdwebClient, }); Searching by symbol or name: const usdcTokens = await Bridge.tokens({ symbol: "USDC", client: thirdwebClient, }); const tokensByName = await Bridge.tokens({ name: "Ethereum", client: thirdwebClient, }); Retrieving a specific token by address: const token = await Bridge.tokens({ tokenAddress: "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48", client: thirdwebClient, }); For large datasets, you can paginate the results using the limit and offset parameters: const tokens = await Bridge.tokens({ limit: 50, offset: 0, client: thirdwebClient, }); For complete details on the function signature and available options, refer to the official thirdweb TypeScript SDK reference documentation [1][4].
Citations:
- 1: https://portal.thirdweb.com/references/typescript/latest/tokens
- 2: https://portal.thirdweb.com/bridge/tokens
- 3: https://portal.thirdweb.com/typescript/v5/tokens
- 4: https://portal.thirdweb.com/references/typescript/v5/tokens
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== locate file =="
git ls-files 'apps/playground-web/src/app/tokens/price-tracker/page.tsx' || true
echo
echo "== file excerpt =="
python3 - <<'PY'
from pathlib import Path
p = Path('apps/playground-web/src/app/tokens/price-tracker/page.tsx')
if p.exists():
text = p.read_text()
for i, line in enumerate(text.splitlines()[:140], 1):
print(f'{i:4d}\t{line}')
else:
print('file not found')
PY
echo
echo "== related docs links in repository =="
rg -n "portal\.thirdweb\.com|get-supported-tokens|Bridge\.tokens|bridge/get-supported-tokens|docsLink|supported-tokens" apps/playground-web/src apps -g '*.tsx' -g '*.ts' | head -n 120 || true
echo
echo "== curl docs redirect status =="
python3 - <<'PY'
import urllib.request
urls = [
"https://portal.thirdweb.com/typescript/v5/bridge/get-supported-tokens?utm_source=playground",
"https://portal.thirdweb.com/typescript/v5/bridge",
"https://portal.thirdweb.com/typescript/v5/tokens",
"https://portal.thirdweb.com/bridge/tokens",
]
for url in urls:
try:
req = urllib.request.Request(url, method='HEAD', headers={'User-Agent':'Mozilla/5.0'})
with urllib.request.urlopen(req, timeout=15) as r:
print(f"{r.status}\t<r={r.url.upper()}\n{url}")
except Exception as e:
print(f"ERROR {url}: {type(e).__name__}: {e}")
PYRepository: thirdweb-dev/js
Length of output: 19042
🌐 Web query:
site:portal.thirdweb.com/references/typescript/v5 Bridge.tokens thirdweb
💡 Result:
In the thirdweb TypeScript SDK, Bridge.tokens is a function used to retrieve a list of supported tokens available for bridging operations [1]. Key details about Bridge.tokens include: Functionality: It returns an array of tokens that are supported for bridging, which can be filtered based on specific criteria such as chain ID, token symbol, token name, or token address [1]. Usage: It is part of the thirdweb Bridge module and requires a thirdweb client instance [1]. Filtering: When multiple filters are provided, they act as an AND operator, meaning a token must satisfy all specified conditions to be included in the results [1]. Pagination: The function supports pagination through limit and offset parameters to manage the size of the returned token list [1]. This function is one component of the broader thirdweb Bridge infrastructure, which also includes utilities for fetching supported chains, generating quotes for buy/sell intentions, and preparing transactions for cross-chain operations [1][2][3][4].
Citations:
- 1: https://portal.thirdweb.com/references/typescript/v5/tokens
- 2: https://portal.thirdweb.com/references/typescript/v5/chains
- 3: https://portal.thirdweb.com/references/typescript/v5/buy/prepare
- 4: https://portal.thirdweb.com/references/typescript/v5/buy/quote
Use the Bridge.tokens reference for the Docs link.
Price Tracker showcases Bridge.tokens, so this link should go to the current supported-tokens documentation instead of the generic SDK landing page. (portal.thirdweb.com/references/typescript/v5/tokens)
🤖 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` at line 27, Update
the docsLink prop in the Price Tracker page to use the Bridge.tokens reference
URL for supported tokens, replacing the current generic bridge documentation
link while leaving the surrounding configuration unchanged.
| <button | ||
| key={c.id} | ||
| type="button" | ||
| onClick={() => setSelectedChainId(c.id)} | ||
| className={`rounded-full border px-3 py-1 text-xs font-medium transition-colors ${ | ||
| selectedChainId === c.id | ||
| ? "border-primary bg-primary text-primary-foreground" | ||
| : "border-border bg-background text-muted-foreground hover:bg-accent" | ||
| }`} | ||
| > | ||
| {c.label} | ||
| </button> | ||
| ))} |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Use the design-system button and expose the selected chain.
Use Button with cn() and add aria-pressed so assistive technology can identify the active chain. Also expose className on TokenPriceTracker’s root element for consumer overrides.
As per coding guidelines, “Import UI component primitives from @/components/ui/*,” “Use cn(),” and “Expose className prop on root element for component overrides.”
Also applies to: 170-208
🤖 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 68 - 80, Update TokenPriceTracker to use the design-system Button
imported from the appropriate `@/components/ui` module, compose its conditional
styles with cn(), and add aria-pressed based on selectedChainId. Extend
TokenPriceTracker’s props with an optional className and apply it to the root
element through cn() so consumers can override its styles.
Source: Coding guidelines
| </div> | ||
| </div> | ||
| <span className="w-24 self-center text-right text-sm font-medium tabular-nums"> | ||
| {token.prices?.usd ? formatPrice(token.prices.usd) : "—"} |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== files =="
git ls-files | rg '(^|/)token-price-tracker\.tsx$|/^package\.json$|pnpm-lock\.yaml$' || true
echo "== tracker outline =="
ast-grep outline apps/playground-web/src/components/token-price/token-price-tracker.tsx || true
echo "== tracker relevant lines =="
cat -n apps/playground-web/src/components/token-price/token-price-tracker.tsx | sed -n '1,230p'
echo "== search Bridge.tokens/price tracker usage =="
rg -n "Bridge\.tokens|prices\.(USD|usd)|token-price-tracker|price-tracker|from \"thirdweb\"" apps/playground-web/src . --glob '!node_modules' --glob '!dist' --glob '!build' | head -200Repository: thirdweb-dev/js
Length of output: 28540
🌐 Web query:
thirdweb TypeScript Bridge.tokens prices USD currency prices documentation
💡 Result:
You can retrieve token metadata and pricing information using the thirdweb TypeScript SDK's Bridge.tokens utility [1][2]. The Bridge.tokens method allows you to query supported bridge tokens with various filters, including specific token addresses, chain IDs, symbols, and names [1][2]. The data returned by this utility includes a prices object, which provides the token's current value in multiple currencies, including USD [1][3]. Example usage to retrieve a specific token: import { Bridge } from "thirdweb"; // Retrieve USDC token information on Ethereum const token = await Bridge.tokens({ chainId: 1, tokenAddress: "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48", client, }); // Access the price in USD console.log(token.prices.USD); Additionally, if you specifically need to convert a crypto amount to a fiat value, you can use the convertCryptoToFiat function from the thirdweb/pay package [4][5]. Note that this specific function currently only supports USD as the target fiat currency [4][5]. Example usage for conversion: import { convertCryptoToFiat } from "thirdweb/pay"; import { NATIVE_TOKEN_ADDRESS } from "thirdweb"; // Get the price of 1 ETH in USD const result = await convertCryptoToFiat({ fromTokenAddress: NATIVE_TOKEN_ADDRESS, to: "USD", chain: ethereum, fromAmount: 1, }); console.log(result.result); // Returns the price in USD
Citations:
- 1: https://portal.thirdweb.com/bridge/tokens
- 2: https://portal.thirdweb.com/references/typescript/latest/tokens
- 3: https://portal.thirdweb.com/payments/tokens
- 4: https://portal.thirdweb.com/references/typescript/latest/convertCryptoToFiat
- 5: https://portal.thirdweb.com/references/typescript/v5/convertCryptoToFiat
Read the documented uppercase USD price key.
Bridge.tokens() exposes USD pricing on prices.USD; lowercase prices.usd skips each row’s price value in both the preview and the copyable example.
apps/playground-web/src/components/token-price/token-price-tracker.tsx#L147: replacetoken.prices?.usdwithtoken.prices?.USD.apps/playground-web/src/components/token-price/token-price-tracker.tsx#L199: replacetoken.prices?.usdwithtoken.prices?.USD.
📍 Affects 1 file
apps/playground-web/src/components/token-price/token-price-tracker.tsx#L147-L147(this comment)apps/playground-web/src/components/token-price/token-price-tracker.tsx#L199-L199
🤖 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 147, Update both token price references in token-price-tracker.tsx at lines
147-147 and 199-199 to read the documented uppercase prices.USD key instead of
prices.usd, preserving the existing formatting and fallback behavior.
1 participant
feat(playground): add Token Price Tracker page with live market data
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 (TokenIcon, TokenName, etc.). 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 out of the box.Features
CodeExamplepattern to show implementation code alongside the live demoChanges
[NEW]src/components/token-price/token-price-tracker.tsx— interactive price tracker component[NEW]src/app/tokens/price-tracker/page.tsx— page route with metadata[MOD]src/app/navLinks.ts— added sidebar link[MOD]src/app/data/pages-metadata.ts— added feature cardPR-Codex overview
This PR introduces a new feature called
Price Tracker, which allows users to view live token prices, market cap, and 24-hour volume across multiple chains. It adds a new page and components to support this functionality.Detailed summary
Price TrackerinnavLinks.ts.pages-metadata.tsfor thePrice Tracker.page.tsxwith metadata and layout for thePrice Tracker.TokenPriceTrackercomponent to fetch and display token data.token-price-tracker.tsx.Summary by CodeRabbit