Add basic docs WIP

Author: Yuripetusko

.prettierignore

@@ -0,0 +1,6 @@
+# Add files here to ignore them from prettier formatting
+
+/dist
+/coverage
+
+/.nx/cache

.prettierrc

@@ -0,0 +1,11 @@
+{
+  "trailingComma": "all",
+  "singleQuote": true,
+  "bracketSpacing": true,
+  "bracketSameLine": false,
+  "parser": "typescript",
+  "printWidth": 100,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true
+}

package.json

@@ -40,7 +40,7 @@
     "glob": "^10.3.10",
     "happy-dom": "^13.1.4",
     "jsdom": "^23.2.0",
-    "prettier": "^2.8.5",
+    "prettier": "^2.8.8",
     "simple-git-hooks": "^2.9.0",
     "ts-node": "10.9.1",
     "typescript": "5.4.0-dev.20240116",

packages/nft-renderer/README.md

@@ -13,27 +13,60 @@ pnpm install @rmrk-team/nft-renderer
 ## Usage
 
 ```tsx
-import { Address } from "viem";
+import React from "react";
+import type {Address} from "viem";
+import {
+  NETWORK_CONTRACTS_PROPS,
+  RMRKUtilityContracts,
+} from "@rmrk-team/rmrk-evm-utils";
+import {RMRKContextProvider} from "@rmrk-team/rmrk-hooks";
+import {QueryClient, QueryClientProvider} from "@tanstack/react-query";
+import {WagmiProvider} from "wagmi";
+import {hardhat} from "wagmi/chains";
 
-export const NftRendererWrapper
-({
-     chainId, contractAddress, tokenId
+const queryClient = new QueryClient();
+
+// You can pass custom utility contracts to the RMRKContextProvider
+const customUtilityContracts = {
+  [hardhat.id]: {
+    [NETWORK_CONTRACTS_PROPS.RMRKEquipRenderUtils]: "0x00",
+    [NETWORK_CONTRACTS_PROPS.RMRKBulkWriter]: "0x00",
+    [NETWORK_CONTRACTS_PROPS.RMRKCollectionUtils]: "0x00",
+    [NETWORK_CONTRACTS_PROPS.RMRKCatalogUtils]: "0x00",
+  },
+} satisfies RMRKUtilityContracts;
+
+const rmrkConfig = {
+  utilityContracts: customUtilityContracts,
+};
+
+export const NftRendererWrapper = ({
+   contractAddress,
+   tokenId,
  }: {
-    chainId: number, contractAddress: Address, tokenId: bigint
+  chainId: number;
+  contractAddress: Address;
+  tokenId: bigint;
 }) => {
-    return (
-        <Flex height="100vh" width="100vw">
-            <Flex height="100vh" aspectRatio={'1/1'} margin="0 auto">
-                <NFTRenderer
-                    chainId={chainId}
-                    contractAddress={collection}
-                    tokenId={tokenId}
-                    loader={<Loader/>}
-                />
+  return (
+    <WagmiProvider config={wagmiConfig}>
+      <QueryClientProvider client={queryClient}>
+        <RMRKContextProvider config={rmrkConfig}>
+          <Flex height="100vh" width="100vw">
+            <Flex height="100vh" aspectRatio={"1/1"} margin="0 auto">
+              <NFTRenderer
+                chainId={chainId}
+                contractAddress={contractAddress}
+                tokenId={tokenId}
+                loader={<Loader/>}
+              />
             </Flex>
-        </Flex>
-    );
-}
+          </Flex>
+        </RMRKContextProvider>
+      </QueryClientProvider>
+    </WagmiProvider>
+  );
+};
 ```
 
 ## Building

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

@@ -1,15 +1,10 @@
 import { MultiLayer2DRenderer } from '@rmrk-team/rmrk-2d-renderer';
-import {
-  RMRKCatalogImpl,
-  RMRKEquippableImpl,
-  mapChainIdToNetwork,
-} from '@rmrk-team/rmrk-evm-utils';
+import { RMRKCatalogImpl, RMRKEquippableImpl } from '@rmrk-team/rmrk-evm-utils';
 import {
   useFetchIpfsMetadata,
   useGetAssetData,
   useGetComposedState,
   useGetInterfaceSupport,
-  useRMRKConfig,
 } from '@rmrk-team/rmrk-hooks';
 import React, { useEffect, useRef, useState } from 'react';
 import { css } from 'styled-system/css';
@@ -20,6 +15,57 @@ import type { Chain } from 'wagmi/chains';
 import '../styles/index.css';
 import type { RenderPart } from '../types/types.js';
 
+const useIsAddressAContract = ({
+  address,
+  chainId,
+  onError,
+}: {
+  address: Address;
+  chainId: Chain['id'];
+  onError?: (error: Error) => void;
+}) => {
+  const publicClient = usePublicClient({
+    chainId,
+  });
+
+  const [isContract, setIsContract] = useState<boolean>();
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [error, setError] = useState<Error>();
+
+  useEffect(() => {
+    const isValidAddress = isAddress(address);
+
+    if (isValidAddress) {
+      (async () => {
+        setIsLoading(true);
+        const isContract = await publicClient.getBytecode({
+          address,
+        });
+        setIsContract(!!isContract);
+        setIsLoading(false);
+        if (!isContract) {
+          setError(new Error(`Address ${address} is not a contract`));
+        }
+      })();
+    } else {
+      setError(new Error(`Address ${address} is not a valid address`));
+    }
+  }, [address, publicClient]);
+
+  useEffect(() => {
+    if (error && onError) {
+      onError(error);
+    }
+  }, [error, onError]);
+
+  return {
+    isContract,
+    isLoading,
+    error,
+    isError: !!error,
+  };
+};
+
 type NFTRenderer = {
   chainId: Chain['id'];
   contractAddress: Address;
@@ -30,42 +76,31 @@ type NFTRenderer = {
 };
 
 /**
- * @description To use this component, make sure you have a WagmiProvider wrapped it
+ * Renders a multi layered RMRK NFT based on the provided parameters.
+ *
+ * @param {Object} options - The options for rendering the NFT.
+ * @param {string} options.chainId - The chain ID of the blockchain network.
+ * @param {string} options.contractAddress - The address of the contract containing the NFT.
+ * @param {string} options.tokenId - The ID of the token to render.
+ * @param {ReactNode} options.loader - The loader component to display while the NFT is loading.
+ * @param {Function} options.onError - The callback function to handle errors.
  */
 export function NFTRenderer({
   chainId,
   contractAddress,
   tokenId,
-  advancedMode,
   loader,
   onError,
 }: NFTRenderer) {
   const rendererContainerRef = useRef<null | HTMLDivElement>(null);
   const tokenIdBigint = BigInt(tokenId);
-  const network = mapChainIdToNetwork(chainId);
-
-  const config = useRMRKConfig();
-
-  const publicClient = usePublicClient({
-    chainId,
-  });
 
-  const isValidAddress = isAddress(contractAddress);
-  const [isContract, setIsContract] = useState<boolean>();
-  const [isGettingIsContract, setIsGettingIsContract] = useState<boolean>(true);
-
-  useEffect(() => {
-    (async () => {
-      if (isValidAddress) {
-        setIsGettingIsContract(true);
-        const isContract = await publicClient.getBytecode({
-          address: contractAddress,
-        });
-        setIsContract(!!isContract);
-        setIsGettingIsContract(false);
-      }
-    })();
-  }, [contractAddress, isValidAddress, publicClient]);
+  const {
+    isContract,
+    isLoading: isLoadingIsContract,
+    isError: isErrorIsContract,
+    error: errorIsContract,
+  } = useIsAddressAContract({ address: contractAddress, chainId });
 
   const {
     isLoading: isLoadingGetInterfaceSupport,
@@ -129,6 +164,7 @@ export function NFTRenderer({
     data: catalogType,
     isLoading: loadingCatalogType,
     error: errorCatalogType,
+    isError: isErrorCatalogType,
   } = useReadContract({
     address: catalogAddress,
     abi: RMRKCatalogImpl,
@@ -179,9 +215,15 @@ export function NFTRenderer({
     isErrorTokenUri ||
     isErrorTokenMetadata ||
     isErrorPrimaryAsset ||
-    isErrorComposableState;
+    isErrorComposableState ||
+    isErrorIsContract ||
+    isErrorCatalogType;
 
-  const error = errorComposableState || errorPrimaryAsset;
+  const error =
+    errorComposableState ||
+    errorPrimaryAsset ||
+    errorIsContract ||
+    errorCatalogType;
 
   useEffect(() => {
     if (error && onError) {
@@ -204,7 +246,7 @@ export function NFTRenderer({
   }
 
   const isLoading =
-    isGettingIsContract ||
+    isLoadingIsContract ||
     isLoadingTokenUri ||
     isLoadingPrimaryAsset ||
     isLoadingTokenMetadata ||
@@ -241,32 +283,6 @@ export function NFTRenderer({
         </div>
       ) : (
         <>
-          {isValidAddress === false ? <p>Invalid address</p> : null}
-          {isValidAddress && !isContract ? <p>Not a contract</p> : null}
-          {isContract && isErrorTokenUri ? <p>Failed to get NFT data</p> : null}
-
-          {advancedMode ? (
-            <>
-              <h1>
-                Token {tokenId.toString()} on {network} in {contractAddress}
-              </h1>
-              {composableState ? (
-                <div>
-                  <>
-                    <p>Is Equippable</p>
-                    <p>metadataURI: {assetMetadataUri}</p>
-                    <p>groupId: {equippableGroupId?.toString()}</p>
-                    <p>catalog: {catalogAddress}</p>
-                  </>
-                </div>
-              ) : primaryAsset ? (
-                <p>metadataURI: {primaryAsset.metadataUri}</p>
-              ) : tokenUri ? (
-                <p>metadataURI: {tokenUri}</p>
-              ) : null}
-            </>
-          ) : null}
-
           {renderParts && renderParts.length > 0 ? (
             <MultiLayer2DRenderer
               resources={renderParts}