Added NFT card component #2677
Added NFT card component #2677
Conversation
… into cf/nft-metadata-hook
Add nft metadata hook
🦋 Changeset detectedLatest commit: ef3505a The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Dependency Review✅ No vulnerabilities or license issues or OpenSSF Scorecard issues found.Scanned FilesNone |
|
Should we include a few example NFTs as default options in the NFT Card on the playground? Maybe it could just be buttons like the scripts, where users can pick from a few examples. Otherwise, no one will really see it since they’d have to dig up the data manually. |
Can we have the default showing traits and extras and maybe show the other options or have a checkbox to turn them on/off? |
There was a problem hiding this comment.
Pull Request Overview
This PR introduces a new NftCard component to the React SDK that displays NFT metadata with automatic fetching capabilities. The component provides a polished UI for rendering NFT information with support for loading states, error handling, and dark mode.
Key Changes:
- Added
NftCardcomponent with configurable props for displaying NFT metadata, traits, and additional information - Created supporting icon components (ImageIcon, DownIcon, AlertCircleIcon) for the NFT card UI
- Integrated the component into the demo application with an interactive showcase
Reviewed Changes
Copilot reviewed 9 out of 9 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| packages/react-sdk/src/components/NftCard.tsx | Core NFT card component with metadata fetching, rendering logic, and interactive trait display |
| packages/react-sdk/src/components/index.ts | Exported NftCard component for public API |
| packages/react-sdk/src/icons/*.tsx | Added icon components (ImageIcon, DownIcon, AlertCircleIcon) for NFT card UI elements |
| packages/demo/src/components/component-cards/demo-nft-card.tsx | Demo page with form inputs and live preview of NftCard component |
| packages/demo/src/components/content-sidebar.tsx | Added NFT Card entry to demo navigation |
| packages/demo/src/components/content-section.tsx | Integrated DemoNftCard into demo layout |
| .changeset/bright-waves-battle.md | Documented changes for version management |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
When you click props it isn’t clear it expanded below the NFT because its so long. I wonder if it should scroll to the props section on click? |
|
What happens on something with a lot of traits? |
Added
NftCardcomponent for displaying NFT metadata. The component automatically fetches and renders NFT information including image, name, description, collection details, traits, and external links. Features loading states, error handling, dark mode support and optional display of traits and additional metadata throughshowTraitsandshowExtraprops.Close #2500