Update deps

.npmrc

@@ -0,0 +1 @@
+dedupe-peer-dependents=true

apps/composable-nft-renderer-app/app/layout.tsx

@@ -1,6 +1,6 @@
 import { Providers } from 'components/app/providers';
 import type { Metadata } from 'next';
-import React from 'react';
+import type React from 'react';
 import './globals.css';
 
 export const metadata: Metadata = {

apps/composable-nft-renderer-app/app/page.tsx

@@ -1,9 +1,9 @@
 'use client';
 
 // import { GitHubLogoIcon } from '@radix-ui/react-icons';
-import { CollectionItem } from '@ark-ui/react';
+import type { CollectionItem } from '@ark-ui/react';
 import { EVM_NETWORKS, assertIsEvmNetwork } from '@rmrk-team/rmrk-evm-utils';
-import { ValueChangeDetails } from '@zag-js/select';
+import type { ValueChangeDetails } from '@zag-js/select';
 import { InputSelect } from 'components/common/select';
 import { Button } from 'components/park-ui/button';
 import { Input } from 'components/park-ui/input';

apps/composable-nft-renderer-app/components/app/page.tsx

@@ -1,4 +1,4 @@
-import React, { FunctionComponent, PropsWithChildren } from 'react';
+import React, { type FunctionComponent, type PropsWithChildren } from 'react';
 import { Flex } from 'styled-system/jsx';
 import { Footer } from './footer';
 

apps/composable-nft-renderer-app/components/app/providers.tsx

@@ -2,12 +2,12 @@
 
 import {
   NETWORK_CONTRACTS_PROPS,
-  RMRKUtilityContracts,
+  type RMRKUtilityContracts,
 } from '@rmrk-team/rmrk-evm-utils';
 import { RMRKContextProvider } from '@rmrk-team/rmrk-hooks';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { WagmiProvider } from 'components/app/wagmi-provider';
-import React from 'react';
+import type React from 'react';
 import { hardhat } from 'wagmi/chains';
 
 const queryClient = new QueryClient();
@@ -28,7 +28,7 @@ const customUtilityContracts = {
 
 const rmrkConfig = {
   utilityContracts: customUtilityContracts,
-  // ipfsGateway: 'https://ipfs.io'
+  ipfsGateway: 'https://ipfs.io',
 };
 
 export const Providers = ({ children }: { children: React.ReactNode }) => {

apps/composable-nft-renderer-app/components/app/wagmi-provider.tsx

@@ -1,5 +1,5 @@
 import { wagmiConfig } from 'lib/wagmi-config';
-import React from 'react';
+import type React from 'react';
 import { WagmiProvider as WagmiProviderInner } from 'wagmi';
 
 export const WagmiProvider = ({ children }: { children: React.ReactNode }) => {

apps/composable-nft-renderer-app/components/common/loader.tsx

@@ -1,4 +1,4 @@
-import { Loader2, LucideProps } from 'lucide-react';
+import { Loader2, type LucideProps } from 'lucide-react';
 import { css } from 'styled-system/css';
 
 export const Loader = (props: LucideProps) => {

apps/composable-nft-renderer-app/components/common/select.tsx

@@ -11,7 +11,7 @@ import {
   SelectItemText,
   SelectLabel,
   SelectPositioner,
-  SelectProps,
+  type SelectProps,
   SelectTrigger,
   SelectValueText,
 } from 'components/park-ui/select';

apps/composable-nft-renderer-app/lib/panda/create-style-context.tsx

@@ -21,12 +21,9 @@ type CombineProps<T, U> = Omit<T, keyof U> & U;
 
 const cx = (...args: (string | undefined)[]) => args.filter(Boolean).join(' ');
 
-export interface ComponentVariants<
-  T extends ElementType,
-  R extends StyleRecipe,
-> {
-  (props: CombineProps<ComponentProps<T>, StyleVariantProps<R>>): JSX.Element;
-}
+export type ComponentVariants<T extends ElementType, R extends StyleRecipe> = (
+  props: CombineProps<ComponentProps<T>, StyleVariantProps<R>>,
+) => JSX.Element;
 
 export const createStyleContext = <R extends StyleRecipe>(recipe: R) => {
   const StyleContext = createContext<StyleSlotRecipe<R> | null>(null);

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

@@ -10,32 +10,32 @@
     "start": "NODE_ENV=production node server.js"
   },
   "dependencies": {
-    "@ark-ui/anatomy": "^1.2.0",
-    "@ark-ui/react": "^1.2.1",
+    "@ark-ui/anatomy": "^3.5.0",
+    "@ark-ui/react": "^3.8.0",
     "@rainbow-me/rainbowkit": "^2.1.2",
     "@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.45.0",
+    "@tanstack/react-query": "^5.51.24",
     "canvas": "^2.11.2",
     "lucide-react": "^0.303.0",
     "next": "13.4.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "viem": "^2.14.1",
-    "wagmi": "^2.10.2"
+    "viem": "^2.19.7",
+    "wagmi": "^2.12.5"
   },
   "devDependencies": {
-    "@pandacss/dev": "^0.27.0",
-    "@park-ui/panda-preset": "^0.28.0",
+    "@pandacss/dev": "^0.45.1",
+    "@park-ui/panda-preset": "^0.42.0",
     "@types/node": "18.16.9",
     "@types/react": "18.2.33",
     "@types/react-dom": "18.2.14",
     "@typescript-eslint/eslint-plugin": "5.58.0",
     "@typescript-eslint/parser": "5.58.0",
-    "@zag-js/select": "^0.32.0",
-    "abitype": "^1.0.2",
+    "@zag-js/select": "^0.65.0",
+    "abitype": "^1.0.6",
     "eslint": "8.53.0",
     "eslint-config-next": "14.0.1",
     "eslint-config-prettier": "8.10.0",
@@ -44,6 +44,6 @@
     "eslint-plugin-react": "7.33.2",
     "eslint-plugin-react-hooks": "4.6.0",
     "prettier": "^3.0.3",
-    "typescript": "^5.4.5"
+    "typescript": "^5.5.4"
   }
 }

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

@@ -2,11 +2,7 @@
   "compilerOptions": {
     "module": "esnext",
     "target": "ES2019",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "jsx": "preserve",
     "baseUrl": "./",
     "moduleResolution": "node",
@@ -26,9 +22,7 @@
       }
     ]
   },
-  "exclude": [
-    "node_modules"
-  ],
+  "exclude": ["node_modules"],
   "include": [
     "next-env.d.ts",
     "app/**/*.ts",

biome.json

@@ -2,7 +2,14 @@
   "$schema": "https://biomejs.dev/schemas/1.5.1/schema.json",
   "files": {
     "ignoreUnknown": true,
-    "ignore": ["apps/**/styled-system/**", "packages/**/dist/**", "apps/**/.next/**", "packages/**/tsconfig.build.json", "biome.json", "styled-system"]
+    "ignore": [
+      "apps/**/styled-system/**",
+      "packages/**/dist/**",
+      "apps/**/.next/**",
+      "packages/**/tsconfig.build.json",
+      "biome.json",
+      "styled-system"
+    ]
   },
   "formatter": {
     "enabled": true,
@@ -24,7 +31,7 @@
   "javascript": {
     "formatter": {
       "quoteStyle": "single",
-      "trailingComma": "all",
+      "trailingCommas": "all",
       "semicolons": "always"
     }
   },

package.json

@@ -30,10 +30,10 @@
     "typecheck": "pnpm run --r --parallel typecheck && tsc --noEmit"
   },
   "devDependencies": {
-    "@biomejs/biome": "1.5.1",
+    "@biomejs/biome": "1.8.3",
     "@changesets/changelog-github": "^0.5.0",
     "@changesets/cli": "^2.27.1",
-    "@pandacss/dev": "^0.27.0",
+    "@pandacss/dev": "^0.45.1",
     "@preconstruct/cli": "^2.8.2",
     "@types/node": "18.16.9",
     "@viem/anvil": "^0.0.7",
@@ -45,24 +45,18 @@
     "prettier": "^2.8.8",
     "simple-git-hooks": "^2.9.0",
     "ts-node": "10.9.1",
-    "typescript": "^5.4.5",
+    "typescript": "^5.5.4",
     "vitest": "^1.2.0"
   },
   "simple-git-hooks": {
     "pre-commit": "pnpm format && pnpm lint:fix"
   },
-  "workspaces": [
-    "packages/*"
-  ],
+  "workspaces": ["packages/*"],
   "preconstruct": {
-    "packages": [
-      "packages/*"
-    ]
+    "packages": ["packages/*"]
   },
   "license": "MIT",
-  "authors": [
-    "yurinondual.eth <[email protected]>"
-  ],
+  "authors": ["yurinondual.eth <[email protected]>"],
   "contributors": [
     {
       "name": "Ayuilos",

packages/ipfs-utils/package.json

@@ -55,7 +55,5 @@
     "@changesets/cli": "^2.27.1"
   },
   "license": "MIT",
-  "authors": [
-    "yurinondual.eth <[email protected]>"
-  ]
+  "authors": ["yurinondual.eth <[email protected]>"]
 }

packages/nft-renderer/package.json

@@ -49,29 +49,29 @@
   },
   "dependencies": {
     "@rainbow-me/rainbowkit": "^2.1.2",
+    "@rmrk-team/ipfs-utils": "workspace:*",
     "@rmrk-team/rmrk-2d-renderer": "workspace:*",
     "@rmrk-team/rmrk-evm-utils": "workspace:*",
-    "@rmrk-team/rmrk-hooks": "workspace:*",
-    "@rmrk-team/ipfs-utils": "workspace:*"
+    "@rmrk-team/rmrk-hooks": "workspace:*"
   },
   "devDependencies": {
     "@changesets/changelog-github": "^0.5.0",
     "@changesets/cli": "^2.27.1",
-    "@pandacss/dev": "^0.27.0",
+    "@pandacss/dev": "^0.45.1",
     "@types/node": "18.16.9",
     "@types/react": "18.2.33",
     "@types/react-dom": "18.2.14",
     "@vitejs/plugin-react": "^4.1.0",
     "copyfiles": "^2.4.1",
-    "postcss": "^8.4.33",
+    "postcss": "^8.4.41",
     "postcss-cli": "^11.0.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "tsc-alias": "^1.8.8",
-    "typescript": "^5.4.5",
-    "viem": "^2.14.1",
+    "typescript": "^5.5.4",
+    "viem": "^2.19.7",
     "vite": "^4.4.9",
-    "wagmi": "^2.10.2"
+    "wagmi": "^2.12.5"
   },
   "peerDependencies": {
     "@tanstack/react-query": ">=5.29.2",
@@ -82,7 +82,5 @@
     "wagmi": ">=2.5.20"
   },
   "license": "MIT",
-  "authors": [
-    "yurinondual.eth <[email protected]>"
-  ]
+  "authors": ["yurinondual.eth <[email protected]>"]
 }

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

@@ -8,7 +8,8 @@ import {
   useGetInterfaceSupport,
   useRMRKConfig,
 } from '@rmrk-team/rmrk-hooks';
-import React, { useEffect, useRef, useState } from 'react';
+import type React from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { isAddress } from 'viem';
 import type { Address } from 'viem';
 import { usePublicClient, useReadContract } from 'wagmi';

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 // import { RainbowKitProvider } from '@rainbow-me/rainbowkit';
 // import '@rainbow-me/rainbowkit/styles.css';
 // import { chains } from '../lib/web3/wagmi-config';

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/package.json

@@ -49,18 +49,18 @@
     "./dist/styles.css": "./dist/styles.css"
   },
   "dependencies": {
-    "@pixi/react": "^7.1.1",
+    "@pixi/react": "^7.1.2",
     "@rmrk-team/ipfs-utils": "workspace:*",
     "isomorphic-dompurify": "^2.2.0",
     "lucide-react": "^0.303.0",
-    "pixi.js": "^7.2.4",
+    "pixi.js": "^7.4.2",
     "use-image": "^1.1.1",
     "use-resize-observer": "^9.1.0"
   },
   "devDependencies": {
     "@changesets/changelog-github": "^0.5.0",
     "@changesets/cli": "^2.27.1",
-    "@pandacss/dev": "^0.27.0",
+    "@pandacss/dev": "^0.45.1",
     "@types/node": "18.16.9",
     "@types/react": "18.2.33",
     "@types/react-dom": "18.2.14",
@@ -71,17 +71,15 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "tsc-alias": "^1.8.8",
-    "typescript": "^5.4.5",
+    "typescript": "^5.5.4",
     "vite": "^4.4.9"
   },
   "peerDependencies": {
     "react": ">=18",
     "typescript": ">=5.4.2"
   },
   "license": "MIT",
-  "authors": [
-    "yurinondual.eth <[email protected]>"
-  ],
+  "authors": ["yurinondual.eth <[email protected]>"],
   "contributors": [
     {
       "name": "Ayuilos",

packages/rmrk-2d-renderer/src/lib/rmrk-2d-renderer.tsx

@@ -2,10 +2,11 @@ import { Container, Sprite, Stage, useApp } from '@pixi/react';
 import DOMPurify from 'isomorphic-dompurify';
 // import { Skeleton } from './ui/skeleton';
 import { Loader2 } from 'lucide-react';
-import { Application, Resource, Texture } from 'pixi.js';
+import { type Application, type Resource, Texture } from 'pixi.js';
 import type { ICanvas } from 'pixi.js';
 import { type CSSProperties, useRef } from 'react';
-import React, { useEffect, useMemo } from 'react';
+import type React from 'react';
+import { useEffect, useMemo } from 'react';
 import { useCallback, useState } from 'react';
 import useImage from 'use-image';
 import useResizeObserver from 'use-resize-observer';
@@ -71,12 +72,12 @@ const useBackdropImage = (
   }, [allRenderableResources]);
 
   // Get image from canvas to apply as a backdrop background
-  const extractImage = async (pixiApp: Application<ICanvas>) => {
+  const extractImage = useCallback(async (pixiApp: Application<ICanvas>) => {
     if (pixiApp.stage) {
       const blob = await pixiApp.renderer.extract.image(pixiApp.stage);
       setBgImage(blob.src);
     }
-  };
+  }, []);
 
   const extractImageTimeout = useRef<NodeJS.Timeout>();
 
@@ -382,14 +383,15 @@ function Layer({
   const childrenZIndex = Array.isArray(z) ? z[1] : null;
 
   const children = resources
-    ? resources.map((resource) => {
+    ? resources.map((resource, i) => {
         // If childrenZIndex is "INHERIT", it means that the children should be rendered in the same context as the parent.
         // So make sure the container position is also inherited.
         const inherit = childrenZIndex === INHERIT_RENDER_CONTEXT;
         const inheritedContainerPosition = inherit ? { containerPosition } : {};
 
         return (
           <Layer
+            key={`${resource.src}-${i}`}
             {...resource}
             {...inheritedContainerPosition}
             onLoad={onLoad}