Playground: Examples for Wallet components

[kien-ngo]

Problem solved

Short description of the bug fixed or feature added

---

PR-Codex overview

This PR introduces a new Wallet navigation link and adds a Wallet components page, featuring various wallet-related UI components. It enhances the user interface for crypto wallet applications by integrating new examples and components.

Detailed summary

• Added a new navigation link for Wallet in navLinks.ts.
• Created a new page in page.tsx for Wallet Components with metadata.
• Implemented APIHeader for the wallet page with a description and links.
• Added sections for WalletIconBasic, WalletNameBasic, and WalletNameFormat components.
• Developed WalletIconBasic, WalletNameBasic, and WalletNameFormat components in wallet-examples.tsx with usage examples.

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

[linear]

CNCT-2620 Wallet components

[vercel]

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 14, 2024 11:28am

3 Skipped Deployments

Name	Status	Preview	Comments	Updated (UTC)
docs-v2	⬜️ Skipped (Inspect)			Dec 14, 2024 11:28am
thirdweb-www	⬜️ Skipped (Inspect)			Dec 14, 2024 11:28am
wallet-ui	⬜️ Skipped (Inspect)			Dec 14, 2024 11:28am

[kien-ngo]

• Playground: Examples for Wallet components #5692 👈 (View in Graphite)
• [SDK] Headless Wallet components | CNCT-2620 #5691
• [SDK] Fix caching issue with headless UI when custom resolvers are used #5657 : 1 other dependent PR (#5677 )
• 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.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 2b5080d

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]

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.

[graphite-app]

The page metadata references NFT Components in both the title and description, but this page is specifically for Wallet components. The metadata should be updated to accurately reflect the page content:

Suggested change

	title: "NFT Components",
	description:
	"Elevate your NFT marketplace with our React headless UI components, engineered for seamless digital asset transactions. These customizable, zero-styling components simplify NFT interactions while giving developers complete freedom to craft their perfect user interface.",
	title: "Wallet Components",
	description:
	"Enhance your application with React headless UI components for wallet interactions. These customizable, zero-styling components simplify wallet connections while giving developers complete freedom to craft their perfect user interface.",

Spotted by Graphite Reviewer

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

[github-actions]

size-limit report 📦

Path	Size	Loading time (3g)	Running time (snapdragon)	Total time
thirdweb (esm)	44.94 KB (+0.06% 🔺)	899 ms (+0.06% 🔺)	2.1 s (-24.8% 🔽)	3 s
thirdweb (cjs)	110.78 KB (0%)	2.3 s (0%)	6.1 s (+14.04% 🔺)	8.3 s
thirdweb (minimal + tree-shaking)	5.58 KB (0%)	112 ms (0%)	287 ms (+1.36% 🔺)	398 ms
thirdweb/chains (tree-shaking)	506 B (0%)	10 ms (0%)	88 ms (+15.79% 🔺)	98 ms
thirdweb/react (minimal + tree-shaking)	19.03 KB (0%)	381 ms (0%)	978 ms (+7.6% 🔺)	1.4 s

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 53.01%. Comparing base (5be197b) to head (2b5080d).
Report is 1 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #5692   +/-   ##
=======================================
  Coverage   53.01%   53.01%           
=======================================
  Files        1101     1101           
  Lines       59079    59079           
  Branches     4809     4809           
=======================================
  Hits        31322    31322           
  Misses      27039    27039           
  Partials      718      718           

Flag	Coverage Δ		*Carryforward flag
legacy_packages	65.68% <ø> (ø)		Carriedforward from 5be197b
packages	50.15% <ø> (ø)

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

[graphite-app]

Merge activity

• Dec 14, 6:26 AM EST: A user added this pull request to the Graphite merge queue.
• Dec 14, 6:29 AM EST: A user merged this pull request with the Graphite merge queue.