A collection of typescript and frontend packages for working with RMRK EVM NFTs.
Note: Do not try to update
next.jsversion, it's confirmed thatnext@^13.4will cause a constant object in@pixi/corebecome empty afternpm run build.
- @rmrk-team/nft-renderer - React component that fetches NFT data and assets and renders 2d renderer
- @rmrk-team/rmrk-hooks - Collection of React hooks for working with RMRK EVM NFTs (WIP)
- @rmrk-team/rmrk-evm-utils - Typescript utils and actions for RMRK EVM NFTs (WIP)
- @rmrk-team/ipfs-utils - IPFS utils for RMRK EVM NFTs (WIP)
- @rmrk-team/rmrk-2d-renderer - Pixi.js based 2d composable renderer. Takes an array of AssetParts as input and renders them on HTML canvas. Usually not used on it's own
- @rmrk-team/types - Common Typescript types for RMRK EVM NFTs (WIP)
- composable-nft-renderer-app - Next.js app that renders @rmrk/nft-renderer
See individual package READMEs for usage instructions.
To run example app, run pnpm dev:react from root directory. Then view in browser, for example https://localhost:3002/base/0x011ff409bc4803ec5cfab41c3fd1db99fd05c004/399
This app uses Panda.css and Ark.ui for styling. When running the dev server, styles will automatically re-generate using postcss when appropriate files are changed, however if you need to manually generate styles, run pnpm panda:prepare.
This project uses Biome.js for code formatting (instead of prettier) and linting. To run both formatting and linting at any time, run pnpm format && pnpm lint:fix. Please visit Biome.js website to see how to install and use biome IDE plugin.
Build all packages and generate a new changeset
When submitting a PR with a change that requires a new version, please run pnpm changeset and select appropriate type of version bump (major, minor or patch if none is selected). When PR is merged, the new version will be automatically published to npm
- Initial code was forked from Lightm nft-renderer by Ayuilos
- Project structure and setup was inspired by Wagmi