Merge branch 'main' of https://github.com/rmrk-team/rmrk-js

README.md

@@ -37,7 +37,7 @@ This project uses [Biome.js](https://biomejs.dev) for code formatting (instead o
 
 Build all packages and generate a new changeset
 
-When submitting a PR with a change that requires a new version, please run `pnpm changesets` 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
+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
 
 
 ## Credits:

apps/composable-nft-renderer-app/package.json

@@ -12,19 +12,19 @@
   "dependencies": {
     "@ark-ui/anatomy": "^1.2.0",
     "@ark-ui/react": "^1.2.1",
-    "@rainbow-me/rainbowkit": "^2.0.0-beta.1",
+    "@rainbow-me/rainbowkit": "^2.0.5",
     "@rmrk-team/nft-renderer": "workspace:*",
     "@rmrk-team/rmrk-2d-renderer": "workspace:*",
     "@rmrk-team/rmrk-evm-utils": "workspace:*",
     "@rmrk-team/rmrk-hooks": "workspace:*",
-    "@tanstack/react-query": "^5.17.12",
+    "@tanstack/react-query": "^5.29.2",
     "canvas": "^2.11.2",
     "lucide-react": "^0.303.0",
     "next": "13.4.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "viem": "^2.5.0",
-    "wagmi": "^2.5.1"
+    "viem": "^2.9.23",
+    "wagmi": "^2.5.20"
   },
   "devDependencies": {
     "@pandacss/dev": "^0.27.0",
@@ -35,7 +35,7 @@
     "@typescript-eslint/eslint-plugin": "5.58.0",
     "@typescript-eslint/parser": "5.58.0",
     "@zag-js/select": "^0.32.0",
-    "abitype": "^0.10.3",
+    "abitype": "^1.0.2",
     "eslint": "8.53.0",
     "eslint-config-next": "14.0.1",
     "eslint-config-prettier": "8.10.0",

packages/ipfs-utils/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @rmrk-team/ipfs-utils
 
+## 0.1.2
+
+### Patch Changes
+
+- [`f52a1a5`](https://github.com/rmrk-team/rmrk-js/commit/f52a1a5376fa7e5b4c04773042e7da49fd9ad012) Thanks [@Yuripetusko](https://github.com/Yuripetusko)! - Don't sanitize blob: uris in ipfs utils
+
+## 0.1.1
+
+### Patch Changes
+
+- [`a1cfe3b`](https://github.com/rmrk-team/rmrk-js/commit/a1cfe3b5d7b19ba5eac03c1be3a475753053b425) Thanks [@Yuripetusko](https://github.com/Yuripetusko)! - Improve esm export and update all deps
+
+- Updated dependencies [[`a1cfe3b`](https://github.com/rmrk-team/rmrk-js/commit/a1cfe3b5d7b19ba5eac03c1be3a475753053b425)]:
+  - @rmrk-team/types@0.1.1
+
 ## 0.1.0
 
 ### Minor Changes

packages/ipfs-utils/package.json

@@ -3,7 +3,7 @@
   "description": "IPFS utils for RMRK NFTs",
   "bugs": "https://github.com/rmrk-team/rmrk-js/issues",
   "homepage": "https://github.com/rmrk-team/rmrk-js",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "private": false,
   "access": "public",
   "repository": {

packages/ipfs-utils/src/lib/fetch-ipfs-metadata.ts

@@ -8,12 +8,21 @@ import {
 } from './ipfs.js';
 import { isBase64Metadata } from './is-base-64-metadata.js';
 
+type Options = {
+  shouldSanitizeIpfsUrls?: boolean;
+  ipfsGatewayUrl?: string;
+};
+
 export const fetchIpfsMetadata = async (
   metadataUri?: string | null,
-  ipfsGatewayUrl = DEFAULT_IPFS_GATEWAY_URLS[
-    DEFAULT_IPFS_GATEWAY_KEYS.cloudflare
-  ],
+  options?: Options,
 ): Promise<Metadata | null> => {
+  const {
+    shouldSanitizeIpfsUrls = true,
+    ipfsGatewayUrl = DEFAULT_IPFS_GATEWAY_URLS[
+      DEFAULT_IPFS_GATEWAY_KEYS.pinata
+    ],
+  } = options || {};
   if (metadataUri && isBase64Metadata(metadataUri)) {
     return JSON.parse(getBase64Value(metadataUri)); // TODO: validation
   }
@@ -25,16 +34,18 @@ export const fetchIpfsMetadata = async (
 
       const { animation_url, image, external_url, ...restMetadata } =
         metadata || {};
-      const primaryMedia =
-        animation_url || (metadata as Metadata)?.mediaUri || image;
       const thumbnail =
         (metadata as Metadata)?.thumbnailUri || (animation_url ? image : '');
 
       if (provider) {
         return {
           ...restMetadata,
-          mediaUri: sanitizeIpfsUrl(primaryMedia || '', provider),
-          thumbnailUri: sanitizeIpfsUrl(thumbnail || '', provider),
+          mediaUri: shouldSanitizeIpfsUrls
+            ? sanitizeIpfsUrl((metadata as Metadata)?.mediaUri || '', provider)
+            : (metadata as Metadata)?.mediaUri,
+          thumbnailUri: shouldSanitizeIpfsUrls
+            ? sanitizeIpfsUrl(thumbnail || '', provider)
+            : thumbnail,
           externalUri: (metadata as Metadata).externalUri || external_url,
         };
       }

packages/ipfs-utils/src/lib/ipfs.ts

@@ -108,5 +108,9 @@ export const sanitizeIpfsUrl = (
     );
   }
 
+  if (ipfsUrl.startsWith('blob:')) {
+    return ipfsUrl;
+  }
+
   return '';
 };

packages/nft-renderer/CHANGELOG.md

@@ -1,5 +1,67 @@
 # @rmrk-team/nft-renderer
 
+## 0.2.5
+
+### Patch Changes
+
+- Updated dependencies [[`ca64edc`](https://github.com/rmrk-team/rmrk-js/commit/ca64edc69e805f0ea9f83b4df654bc5cf2579535)]:
+  - @rmrk-team/rmrk-2d-renderer@0.1.5
+  - @rmrk-team/rmrk-hooks@0.2.5
+
+## 0.2.4
+
+### Patch Changes
+
+- [`e69102a`](https://github.com/rmrk-team/rmrk-js/commit/e69102aaad38c0bd720639dbb4cb022e796d152a) Thanks [@Yuripetusko](https://github.com/Yuripetusko)! - fix: clear extractImageTimeout timeout on unmount
+
+- Updated dependencies [[`e69102a`](https://github.com/rmrk-team/rmrk-js/commit/e69102aaad38c0bd720639dbb4cb022e796d152a)]:
+  - @rmrk-team/rmrk-2d-renderer@0.1.4
+  - @rmrk-team/rmrk-hooks@0.2.4
+
+## 0.2.3
+
+### Patch Changes
+
+- [`f52a1a5`](https://github.com/rmrk-team/rmrk-js/commit/f52a1a5376fa7e5b4c04773042e7da49fd9ad012) Thanks [@Yuripetusko](https://github.com/Yuripetusko)! - Don't sanitize blob: uris in ipfs utils
+
+- Updated dependencies [[`f52a1a5`](https://github.com/rmrk-team/rmrk-js/commit/f52a1a5376fa7e5b4c04773042e7da49fd9ad012)]:
+  - @rmrk-team/ipfs-utils@0.1.2
+  - @rmrk-team/rmrk-2d-renderer@0.1.3
+  - @rmrk-team/rmrk-hooks@0.2.3
+
+## 0.2.2
+
+### Patch Changes
+
+- [`a1cfe3b`](https://github.com/rmrk-team/rmrk-js/commit/a1cfe3b5d7b19ba5eac03c1be3a475753053b425) Thanks [@Yuripetusko](https://github.com/Yuripetusko)! - Improve esm export and update all deps
+
+- Updated dependencies [[`a1cfe3b`](https://github.com/rmrk-team/rmrk-js/commit/a1cfe3b5d7b19ba5eac03c1be3a475753053b425)]:
+  - @rmrk-team/ipfs-utils@0.1.1
+  - @rmrk-team/rmrk-2d-renderer@0.1.2
+  - @rmrk-team/rmrk-evm-utils@0.1.2
+  - @rmrk-team/rmrk-hooks@0.2.2
+
+## 0.2.1
+
+### Patch Changes
+
+- [`682e065`](https://github.com/rmrk-team/rmrk-js/commit/682e06570c345fe6ae26ad46000371b47421aa9a) Thanks [@Yuripetusko](https://github.com/Yuripetusko)! - Use use-resize-observer package instead of a custom hook
+
+- Updated dependencies [[`682e065`](https://github.com/rmrk-team/rmrk-js/commit/682e06570c345fe6ae26ad46000371b47421aa9a)]:
+  - @rmrk-team/rmrk-2d-renderer@0.1.1
+  - @rmrk-team/rmrk-hooks@0.2.1
+
+## 0.2.0
+
+### Minor Changes
+
+- [`325e6e2`](https://github.com/rmrk-team/rmrk-js/commit/325e6e2bec733177cbe86e966ffc821603653bb2) Thanks [@YuriGii](https://github.com/YuriGii)! - fix nft-renderer config and add equipped item details to useGetComposedState
+
+### Patch Changes
+
+- Updated dependencies [[`325e6e2`](https://github.com/rmrk-team/rmrk-js/commit/325e6e2bec733177cbe86e966ffc821603653bb2)]:
+  - @rmrk-team/rmrk-hooks@0.2.0
+
 ## 0.1.2
 
 ### Patch Changes

packages/nft-renderer/package.json

@@ -2,7 +2,7 @@
   "name": "@rmrk-team/nft-renderer",
   "description": "React NFT renderer for multi layered composable NFTs built on RMRK standards",
   "bugs": "https://github.com/rmrk-team/rmrk-js/issues",
-  "version": "0.1.2",
+  "version": "0.2.5",
   "private": false,
   "access": "public",
   "repository": {
@@ -16,7 +16,7 @@
     "build:misc": "pnpm copy:styled-system && tsc-alias -p tsconfig.build.json",
     "build:postcss": "postcss -o dist/esm/styles/index.css src/styles/index.css",
     "build:panda": "panda cssgen --outfile dist/styles.css",
-    "copy:styled-system": "copyfiles ./styled-system/**/*.mjs ./styled-system/*.mjs dist/esm",
+    "copy:styled-system": "copyfiles --up 1 ./src/styled-system/**/*.js ./src/styled-system/*.js dist/esm",
     "prepare": "panda codegen",
     "dev": "pnpm --workspace-concurrency=1 run build:esm+types --watch && pnpm run build:misc --watch && pnpm run build:panda --watch",
     "clean": "rm -rf dist tsconfig.tsbuildinfo actions chains connectors query",
@@ -62,26 +62,26 @@
     "@types/react": "18.2.33",
     "@types/react-dom": "18.2.14",
     "@vitejs/plugin-react": "^4.1.0",
-    "@wagmi/core": "^2.6.0",
+    "@wagmi/core": "^2.6.17",
     "copyfiles": "^2.4.1",
     "postcss": "^8.4.33",
     "postcss-cli": "^11.0.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "tsc-alias": "^1.8.8",
     "typescript": "^5.4.2",
-    "viem": "^2.5.0",
+    "viem": "^2.9.23",
     "vite": "^4.4.9",
-    "wagmi": "^2.5.1"
+    "wagmi": "^2.5.20"
   },
   "peerDependencies": {
-    "@tanstack/react-query": ">=5.17.12",
+    "@tanstack/react-query": ">=5.29.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": ">=5.4.2",
-    "viem": ">=2.5.0",
-    "wagmi": ">=2.5.1",
-    "@wagmi/core": "^2.6.0"
+    "viem": ">=2.9.23",
+    "wagmi": ">=2.5.20",
+    "@wagmi/core": "^2.6.17"
   },
   "license": "MIT",
   "authors": [

packages/nft-renderer/panda.config.ts

@@ -15,8 +15,9 @@ export default defineConfig({
   theme: {
     extend: {},
   },
+  outExtension: 'js',
 
   // The output directory for your css system
-  outdir: 'styled-system',
+  outdir: 'src/styled-system',
   jsxFramework: 'react',
 });

packages/nft-renderer/src/components/nft-renderer.tsx

@@ -9,11 +9,11 @@ import {
   useRMRKConfig,
 } from '@rmrk-team/rmrk-hooks';
 import React, { useEffect, useRef, useState } from 'react';
-import { css } from 'styled-system/css';
 import { isAddress } from 'viem';
 import type { Address } from 'viem';
 import { usePublicClient, useReadContract } from 'wagmi';
 import type { Chain } from 'wagmi/chains';
+import { css } from '../styled-system/css/css.js';
 import type { RenderPart } from '../types/types.js';
 
 const useIsAddressAContract = ({

packages/nft-renderer/tsconfig.build.json

@@ -11,10 +11,7 @@
     "composite": true,
     "outDir": "./dist/esm",
     "rootDir": "src",
-    "declarationDir": "./dist/types",
-    "paths": {
-      "styled-system/css": ["./styled-system/css"],
-    }
+    "declarationDir": "./dist/types"
   },
   "references": [
     {

packages/nft-renderer/tsconfig.json

@@ -4,5 +4,5 @@
     "jsx": "react-jsx"
   },
   "include": ["src/**/*.ts", "src/**/*.tsx", "test/**/*.ts"],
-  "exclude": []
+  "exclude": [],
 }

packages/rmrk-2d-renderer/CHANGELOG.md

@@ -1,5 +1,41 @@
 # @rmrk-team/rmrk-2d-renderer
 
+## 0.1.5
+
+### Patch Changes
+
+- [`ca64edc`](https://github.com/rmrk-team/rmrk-js/commit/ca64edc69e805f0ea9f83b4df654bc5cf2579535) Thanks [@Yuripetusko](https://github.com/Yuripetusko)! - All urls should come pre-sanitized to 2d renderer
+
+## 0.1.4
+
+### Patch Changes
+
+- [`e69102a`](https://github.com/rmrk-team/rmrk-js/commit/e69102aaad38c0bd720639dbb4cb022e796d152a) Thanks [@Yuripetusko](https://github.com/Yuripetusko)! - fix: clear extractImageTimeout timeout on unmount
+
+## 0.1.3
+
+### Patch Changes
+
+- [`f52a1a5`](https://github.com/rmrk-team/rmrk-js/commit/f52a1a5376fa7e5b4c04773042e7da49fd9ad012) Thanks [@Yuripetusko](https://github.com/Yuripetusko)! - Don't sanitize blob: uris in ipfs utils
+
+- Updated dependencies [[`f52a1a5`](https://github.com/rmrk-team/rmrk-js/commit/f52a1a5376fa7e5b4c04773042e7da49fd9ad012)]:
+  - @rmrk-team/ipfs-utils@0.1.2
+
+## 0.1.2
+
+### Patch Changes
+
+- [`a1cfe3b`](https://github.com/rmrk-team/rmrk-js/commit/a1cfe3b5d7b19ba5eac03c1be3a475753053b425) Thanks [@Yuripetusko](https://github.com/Yuripetusko)! - Improve esm export and update all deps
+
+- Updated dependencies [[`a1cfe3b`](https://github.com/rmrk-team/rmrk-js/commit/a1cfe3b5d7b19ba5eac03c1be3a475753053b425)]:
+  - @rmrk-team/ipfs-utils@0.1.1
+
+## 0.1.1
+
+### Patch Changes
+
+- [`682e065`](https://github.com/rmrk-team/rmrk-js/commit/682e06570c345fe6ae26ad46000371b47421aa9a) Thanks [@Yuripetusko](https://github.com/Yuripetusko)! - Use use-resize-observer package instead of a custom hook
+
 ## 0.1.0
 
 ### Minor Changes

packages/rmrk-2d-renderer/package.json

@@ -3,7 +3,7 @@
   "description": "React Pixi (Canvas) renderer for multi layered composable NFTs built on RMRK standards",
   "bugs": "https://github.com/rmrk-team/rmrk-js/issues",
   "homepage": "https://github.com/rmrk-team/rmrk-js",
-  "version": "0.1.0",
+  "version": "0.1.5",
   "private": false,
   "access": "public",
   "repository": {
@@ -13,10 +13,10 @@
   },
   "scripts": {
     "build": "pnpm run clean && pnpm prepare && pnpm run build:esm+types",
-    "build:esm+types": "pnpm build:postcss && tsc -b tsconfig.build.json --declaration --declarationMap && pnpm copy:styled-system && tsc-alias -p tsconfig.build.json && pnpm build:panda",
+    "build:esm+types": "pnpm build:postcss && tsc -b tsconfig.build.json --declaration --declarationMap && pnpm copy:styled-system && pnpm build:panda",
     "build:postcss": "postcss -o dist/esm/styles/index.css src/styles/index.css",
     "build:panda": "panda cssgen --outfile dist/styles.css",
-    "copy:styled-system": "copyfiles ./styled-system/**/*.mjs ./styled-system/*.mjs dist/esm",
+    "copy:styled-system": "copyfiles --up 1 ./src/styled-system/**/*.js ./src/styled-system/*.js dist/esm",
     "prepare": "panda codegen",
     "dev": "pnpm run build:esm+types --watch",
     "clean": "rm -rf dist tsconfig.tsbuildinfo actions chains connectors query",
@@ -54,7 +54,8 @@
     "isomorphic-dompurify": "^2.2.0",
     "lucide-react": "^0.303.0",
     "pixi.js": "^7.2.4",
-    "use-image": "^1.1.1"
+    "use-image": "^1.1.1",
+    "use-resize-observer": "^9.1.0"
   },
   "devDependencies": {
     "@changesets/changelog-github": "^0.5.0",

packages/rmrk-2d-renderer/panda.config.ts

@@ -8,6 +8,8 @@ export default defineConfig({
   // Where to look for your css declarations
   include: ['./src/**/*.{js,jsx,ts,tsx}'],
 
+  outExtension: 'js',
+
   // Files to exclude
   exclude: [],
 
@@ -17,6 +19,6 @@ export default defineConfig({
   },
 
   // The output directory for your css system
-  outdir: 'styled-system',
+  outdir: 'src/styled-system',
   jsxFramework: 'react',
 });