[Playground] Add Token components, fix links #5677

kien-ngo · 2024-12-10T12:25:34Z

Problem solved

Short description of the bug fixed or feature added

PR-Codex overview

This PR introduces new components and updates documentation related to token management in a web application. It enhances the user interface for displaying token information and adds a new token page.

Detailed summary

Added a new token entry in navLinks.ts.
Updated docsLink in page.tsx files for better documentation.
Introduced a new Token page with components for displaying token details.
Added SVG representation for USDC in public/usdc.svg.
Implemented various token components in token-examples.tsx.

✨ Ask PR-Codex anything about this PR by commenting with /codex {your question}

linear · 2024-12-10T12:25:38Z

CNCT-2622 Token components

vercel · 2024-12-10T12:25:39Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
thirdweb_playground	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 13, 2024 2:47am

3 Skipped Deployments

Name	Status	Updated (UTC)
docs-v2	⬜️ Skipped (Inspect)	Dec 13, 2024 2:47am
thirdweb-www	⬜️ Skipped (Inspect)	Dec 13, 2024 2:47am
wallet-ui	⬜️ Skipped (Inspect)	Dec 13, 2024 2:47am

changeset-bot · 2024-12-10T12:25:39Z

⚠️ No Changeset found

Latest commit: 64f4103

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

graphite-app · 2024-12-10T12:25:42Z

Your org has enabled the Graphite merge queue for merging into main

Add the label “merge-queue” to the PR and Graphite will automatically add it to the merge queue when it’s ready to merge. Or use the label “hotfix” to add to the merge queue as a hot fix.

You must have a Graphite account and log in to Graphite in order to use the merge queue. Sign up using this link.

kien-ngo · 2024-12-10T12:25:45Z

[Playground] Chain components #5678
[Playground] Add Token components, fix links #5677 👈 (View in Graphite)
[SDK] Fix caching issue with headless UI when custom resolvers are used #5657 : 1 other dependent PR (#5691 )
main

How to use the Graphite Merge Queue

Add either label to this PR to merge it via the merge queue:

merge-queue - adds this PR to the back of the merge queue
hotfix - for urgent hot fixes, skip the queue and merge this PR next

You must have a Graphite account in order to use the merge queue. Sign up using this link.

_{An organization admin has enabled the Graphite Merge Queue in this repository.} _{Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.}

This stack of pull requests is managed by Graphite. Learn more about stacking.

graphite-app · 2024-12-10T12:26:37Z

apps/playground-web/src/components/headless-ui/token-examples.tsx

+        code={`import { TokenProvider, TokenName } from "thirdweb/react";
+
+function App() {
+  return (
+    <TokenProvider
+      address={NATIVE_TOKEN_ADDRESS}
+      client={THIRDWEB_CLIENT}
+      chain={ethereum}
+    >
+      <TokenName loadingComponent={<span>Loading...</span>} />
+    </TokenProvider>
+  )
+}`}


The code example shows NATIVE_TOKEN_ADDRESS while the preview component uses USDC_ADDRESS, creating a mismatch between the example and its implementation. For consistency, update the code example to use USDC_ADDRESS to accurately reflect what's being rendered in the preview.

Spotted by Graphite Reviewer

Is this helpful? React 👍 or 👎 to let us know.

acknowleded

github-actions · 2024-12-10T12:29:15Z

size-limit report 📦

Path	Size	Loading time (3g)	Running time (snapdragon)	Total time
thirdweb (esm)	44.94 KB (0%)	899 ms (0%)	1.1 s (+142.66% 🔺)	2 s
thirdweb (cjs)	110.78 KB (0%)	2.3 s (0%)	1.3 s (+23.28% 🔺)	3.5 s
thirdweb (minimal + tree-shaking)	5.58 KB (0%)	112 ms (0%)	127 ms (+313.17% 🔺)	239 ms
thirdweb/chains (tree-shaking)	506 B (0%)	10 ms (0%)	8 ms (-74.63% 🔽)	18 ms
thirdweb/react (minimal + tree-shaking)	19.03 KB (0%)	381 ms (0%)	203 ms (+194.57% 🔺)	584 ms

codecov · 2024-12-10T12:30:41Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 52.85%. Comparing base (d90857e) to head (64f4103).
Report is 1 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #5677   +/-   ##
=======================================
  Coverage   52.85%   52.85%           
=======================================
  Files        1098     1098           
  Lines       58976    58976           
  Branches     4788     4788           
=======================================
  Hits        31173    31173           
  Misses      27087    27087           
  Partials      716      716

Flag	Coverage Δ		*Carryforward flag
legacy_packages	`65.68% <ø> (ø)`		Carriedforward from d90857e
packages	`49.95% <ø> (ø)`

*This pull request uses carry forward flags. Click here to find out more.

graphite-app · 2024-12-13T02:37:59Z

Merge activity

Dec 12, 9:37 PM EST: A user added this pull request to the Graphite merge queue.
Dec 12, 9:48 PM EST: A user merged this pull request with the Graphite merge queue.

## Problem solved Short description of the bug fixed or feature added  --- ## PR-Codex overview This PR introduces new components and updates existing ones for token management in a React application. It enhances the user interface by adding a `Token` navigation link, updating documentation links, and implementing several new token-related components for better usability. ### Detailed summary - Added a new navigation link for `Token` in `navLinks.ts`. - Updated documentation links in `page.tsx` for `connect/ui` and `nft`. - Created a new `page.tsx` for token components with detailed descriptions and examples. - Added an SVG for `usdc` in `public/usdc.svg`. - Implemented multiple token components in `token-examples.tsx`, including `TokenImageBasic`, `TokenImageOverride`, `TokenNameBasic`, `TokenSymbolBasic`, and `TokenCard`. > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

## Problem solved Short description of the bug fixed or feature added  --- ## PR-Codex overview This PR introduces a new `Token` navigation link, updates documentation links, and adds a new SVG file. It also implements a `Token` components page with multiple examples and components for displaying tokens, enhancing the UI for token-related functionalities. ### Detailed summary - Added a new navigation link for `Token` in `navLinks.ts`. - Updated documentation links in `page.tsx` for better references. - Introduced a new SVG file for `usdc`. - Created a new `Token` components page with examples for: - `TokenImageBasic` - `TokenImageOverride` - `TokenNameBasic` - `TokenSymbolBasic` - `TokenCard` > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

kien-ngo mentioned this pull request Dec 10, 2024

[SDK] Fix caching issue with headless UI when custom resolvers are used #5657

Merged

vercel bot temporarily deployed to Preview – docs-v2 December 10, 2024 12:25 Inactive

vercel bot temporarily deployed to Preview – wallet-ui December 10, 2024 12:25 Inactive

vercel bot temporarily deployed to Preview – thirdweb-www December 10, 2024 12:25 Inactive

github-actions bot added the Playground Changes involving the Playground codebase. label Dec 10, 2024

github-actions bot assigned kien-ngo Dec 10, 2024

kien-ngo changed the title ~~update~~ [Playground] Add Token components, fix linjs Dec 10, 2024

kien-ngo changed the title ~~[Playground] Add Token components, fix linjs~~ [Playground] Add Token components, fix links Dec 10, 2024

kien-ngo marked this pull request as ready for review December 10, 2024 12:26

kien-ngo requested review from joaquim-verges, gregfromstl, jnsdls and jakubkrehel as code owners December 10, 2024 12:26

graphite-app bot reviewed Dec 10, 2024

View reviewed changes

vercel bot deployed to Preview – thirdweb_playground December 10, 2024 12:31 View deployment

kien-ngo mentioned this pull request Dec 10, 2024

[Playground] Chain components #5678

Merged

kien-ngo force-pushed the kien/cnct-2591_fix-caching-issue branch from e2424f5 to bfe0d2c Compare December 10, 2024 14:29

kien-ngo requested review from MananTank and edwardysun as code owners December 10, 2024 14:29

kien-ngo force-pushed the kien/playground-token-components-CNCT-2622 branch from 30ab455 to 56833ce Compare December 10, 2024 14:29

vercel bot deployed to Preview – wallet-ui December 10, 2024 14:33 View deployment

vercel bot deployed to Preview – thirdweb_playground December 10, 2024 14:34 View deployment

vercel bot had a problem deploying to Preview – thirdweb-www December 10, 2024 14:34 Failure

kien-ngo force-pushed the kien/playground-token-components-CNCT-2622 branch from 5e8cbb1 to dc3ee20 Compare December 11, 2024 18:37

kien-ngo force-pushed the graphite-base/5677 branch from 76e38a2 to 2fccfc0 Compare December 11, 2024 18:37

vercel bot temporarily deployed to Preview – docs-v2 December 11, 2024 18:37 Inactive

vercel bot temporarily deployed to Preview – thirdweb-www December 11, 2024 18:37 Inactive

vercel bot temporarily deployed to Preview – wallet-ui December 11, 2024 18:37 Inactive

kien-ngo changed the base branch from graphite-base/5677 to main December 11, 2024 18:37

kien-ngo force-pushed the kien/playground-token-components-CNCT-2622 branch from dc3ee20 to 59a3d10 Compare December 11, 2024 18:37

vercel bot temporarily deployed to Preview – wallet-ui December 11, 2024 18:38 Inactive

vercel bot temporarily deployed to Preview – thirdweb-www December 11, 2024 18:38 Inactive

vercel bot temporarily deployed to Preview – docs-v2 December 11, 2024 18:38 Inactive

vercel bot deployed to Preview – thirdweb_playground December 11, 2024 18:44 View deployment

joaquim-verges approved these changes Dec 13, 2024

View reviewed changes

kien-ngo force-pushed the kien/playground-token-components-CNCT-2622 branch from 59a3d10 to ce9b6f1 Compare December 13, 2024 02:38

vercel bot temporarily deployed to Preview – wallet-ui December 13, 2024 02:38 Inactive

vercel bot temporarily deployed to Preview – docs-v2 December 13, 2024 02:39 Inactive

vercel bot temporarily deployed to Preview – thirdweb-www December 13, 2024 02:39 Inactive

kien-ngo force-pushed the kien/playground-token-components-CNCT-2622 branch from ce9b6f1 to 64f4103 Compare December 13, 2024 02:43

vercel bot temporarily deployed to Preview – wallet-ui December 13, 2024 02:43 Inactive

vercel bot temporarily deployed to Preview – thirdweb-www December 13, 2024 02:43 Inactive

vercel bot temporarily deployed to Preview – docs-v2 December 13, 2024 02:43 Inactive

vercel bot deployed to Preview – thirdweb_playground December 13, 2024 02:47 View deployment

graphite-app bot merged commit 64f4103 into main Dec 13, 2024
32 checks passed

graphite-app bot deleted the kien/playground-token-components-CNCT-2622 branch December 13, 2024 02:48

vercel bot temporarily deployed to Production – docs-v2 December 13, 2024 02:48 Inactive

vercel bot temporarily deployed to Production – wallet-ui December 13, 2024 02:48 Inactive

vercel bot temporarily deployed to Production – thirdweb-www December 13, 2024 02:48 Inactive

vercel bot deployed to Production – thirdweb_playground December 13, 2024 02:50 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Playground] Add Token components, fix links #5677

[Playground] Add Token components, fix links #5677

kien-ngo commented Dec 10, 2024 •

edited by pr-codex bot

Loading

linear bot commented Dec 10, 2024

vercel bot commented Dec 10, 2024 •

edited

Loading

changeset-bot bot commented Dec 10, 2024 •

edited

Loading

graphite-app bot commented Dec 10, 2024

kien-ngo commented Dec 10, 2024 •

edited

Loading

graphite-app bot Dec 10, 2024

kien-ngo Dec 11, 2024

github-actions bot commented Dec 10, 2024 •

edited

Loading

codecov bot commented Dec 10, 2024 •

edited

Loading

graphite-app bot commented Dec 13, 2024 •

edited

Loading

[Playground] Add Token components, fix links #5677

[Playground] Add Token components, fix links #5677

Conversation

kien-ngo commented Dec 10, 2024 • edited by pr-codex bot Loading

Problem solved

PR-Codex overview

Detailed summary

linear bot commented Dec 10, 2024

vercel bot commented Dec 10, 2024 • edited Loading

changeset-bot bot commented Dec 10, 2024 • edited Loading

⚠️ No Changeset found

graphite-app bot commented Dec 10, 2024

Your org has enabled the Graphite merge queue for merging into main

kien-ngo commented Dec 10, 2024 • edited Loading

How to use the Graphite Merge Queue

graphite-app bot Dec 10, 2024

Choose a reason for hiding this comment

kien-ngo Dec 11, 2024

Choose a reason for hiding this comment

github-actions bot commented Dec 10, 2024 • edited Loading

size-limit report 📦

codecov bot commented Dec 10, 2024 • edited Loading

Codecov Report

graphite-app bot commented Dec 13, 2024 • edited Loading

Merge activity

kien-ngo commented Dec 10, 2024 •

edited by pr-codex bot

Loading

vercel bot commented Dec 10, 2024 •

edited

Loading

changeset-bot bot commented Dec 10, 2024 •

edited

Loading

kien-ngo commented Dec 10, 2024 •

edited

Loading

github-actions bot commented Dec 10, 2024 •

edited

Loading

codecov bot commented Dec 10, 2024 •

edited

Loading

graphite-app bot commented Dec 13, 2024 •

edited

Loading