--- name: jb-nft-gallery-ui description: Interactive gallery for browsing and managing NFTs from Juicebox 721 hooks. Displays tier information, owned NFTs, and minting interfaces. --- # Juicebox V5 NFT Gallery UI Interactive gallery for browsing and managing NFTs from Juicebox 721 hooks. Displays tier information, owned NFTs, and minting interfaces. ## Overview This skill generates vanilla JS/HTML interfaces for: - Browsing all NFT tiers for a project - Viewing owned NFTs by wallet - Minting NFTs from available tiers - Tier metadata and supply tracking - NFT transfer functionality ## NFT Gallery UI Template ```html Juicebox NFT Gallery

NFT Gallery

``` ## Key Features ### Tier Browsing - Grid layout with tier cards - Supply tracking (minted/total) - Price display in ETH - Category filtering - Availability filtering ### Owned NFTs View - Wallet connection via viem - Display owned NFTs with metadata - Transfer functionality - Cash out guidance ### Collection Stats - Total tiers - Total minted - Max supply - Floor price ### NFT Details Modal - Full metadata display - Attribute listing - Action buttons (mint/transfer/cash out) ## Data Sources The gallery uses on-chain data via: - `JB721TiersHook` - NFT contract - `JB721TiersHookStore` - Tier data storage - Token metadata from IPFS ## Customization Points 1. **Image handling**: Modify `resolveUri()` for different IPFS gateways 2. **Metadata display**: Extend attributes rendering 3. **Minting flow**: Integrate directly with terminal 4. **Styling**: Customize via CSS variables ## Integration Notes - Works with any V5 721 Hook deployment - Uses viem for all blockchain interactions - Shared styles from `/shared/styles.css` - Chain config from `/shared/wallet-utils.js`