Skip to content

feat: recipe shell template with w3-kit design system#41

Merged
PetarStoev02 merged 3 commits into
mainfrom
feat/recipe-shell-template
Apr 9, 2026
Merged

feat: recipe shell template with w3-kit design system#41
PetarStoev02 merged 3 commits into
mainfrom
feat/recipe-shell-template

Conversation

@PetarStoev02
Copy link
Copy Markdown
Contributor

Summary

  • New templates/recipe-shell/ — TanStack Start template matching w3-kit.com website design
  • Showcase-quality on-chain SVG NFT demo with live blockchain data
  • Reusable pattern for all current and future recipe examples
  • Updated CONTRIBUTING.md with recipe shell documentation

What's in the template

Design System (matching w3-kit.com)

  • Same CSS tokens: --w3-accent, --w3-gray-*, oklch colors
  • Dark/light mode with theme toggle
  • Tailwind CSS v4 with @theme inline

w3-kit Components (copied via npx w3-kit add)

  • NFTCard — displays decoded on-chain SVG NFTs with attributes, owner, chain
  • PriceTicker — market prices table with token icons, 24h change, market cap
  • TokenIcon — token logo with fallback
  • Button, Card, Input, Badge — shadcn-style primitives

Showcase Page (on-chain SVG NFT)

  • Read On-chain SVG — fetches Loot NFTs from mainnet, renders SVG in sandboxed iframe + NFTCard side-by-side
  • Chainlink Price Feed — live ETH/USD from mainnet oracle via PriceTicker component
  • Deploy & Mint — deploy a pre-compiled DynamicSvgNft contract on Sepolia, mint, then read back
  • All data is real — no hardcoded values

Infrastructure

  • TanStack Start + Vite (same as w3-kit.com website)
  • wagmi + viem with PublicNode RPCs (free, no API key)
  • Pre-compiled Solidity contract bytecode for testnet deploy

How to test

cp -r templates/recipe-shell /tmp/test-shell
cd /tmp/test-shell
npm install
npm run dev

Open http://localhost:3333 — click "Fetch SVG NFT" to see live Loot data, Chainlink price loads automatically.

Test plan

  • npm run format:check passes
  • Template builds and runs with TanStack Start
  • Loot NFT fetches and renders on-chain SVG
  • Chainlink ETH/USD price shows live data
  • Deploy & Mint flow works on Sepolia (with wallet + testnet ETH)
  • Dark mode toggle works
  • Wallet connect/disconnect works

Closes #40

TanStack Start template matching the w3-kit.com website design:
- w3-kit CSS tokens (colors, spacing, dark mode)
- UI primitives (Button, Card, Input, Badge)
- w3-kit components (NFTCard, PriceTicker, TokenIcon)
- RecipeLayout with wallet connect, theme toggle, header/footer
- wagmi + viem pre-configured with PublicNode RPCs
- On-chain SVG NFT showcase page with live Loot + Chainlink data
- Deploy & Mint flow with pre-compiled DynamicSvgNft contract
- Updated CONTRIBUTING.md with recipe shell documentation

Closes #40
- Remove unused dynamicNftMintAbi (dead code from earlier iteration)
- Replace error-as-status pattern with dedicated deployStatus state
- Add mounted ref to prevent state updates after unmount in deploy polling
- Fix README: Next.js → TanStack Start, @/ → relative imports, port 3333
Reset index.tsx to placeholder content — the template is now a
reusable starting point for any recipe. Recipe-specific showcase
code (contract bytecode, ethereum types) moved to recipe examples.
@PetarStoev02
Copy link
Copy Markdown
Contributor Author

Review

Reviewed template structure, design system, and components.

Template (templates/recipe-shell/):

  • TanStack Start + Vite matching the w3-kit.com website stack
  • w3-kit CSS tokens (--w3-accent, --w3-gray-*, oklch dark mode)
  • UI primitives: Button, Card, Input, Badge (shadcn-style)
  • w3-kit components: NFTCard, PriceTicker, TokenIcon
  • RecipeLayout with wallet connect, theme toggle, header/footer
  • wagmi + viem pre-configured with PublicNode RPCs
  • Generic placeholder page — recipe-specific code lives in recipe examples

CONTRIBUTING.md updated with:

  • Correct recipe file structure (README, example/, .learn.md)
  • Recipe shell template usage instructions
  • w3-kit add CLI integration

Ran two review agents — no blocking issues found. Template is clean and generic.

LGTM — ready to merge.

@PetarStoev02 PetarStoev02 merged commit c426120 into main Apr 9, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feat: recipe shell template with w3-kit design system and component showcase

1 participant