@rmrk-team/rmrk-hooks

React hooks for working with RMRK EVM NFTs.

Installation

pnpm install @rmrk-team/rmrk-hooks

Usage

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";

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 Container = ({
   contractAddress,
   tokenId,
 }: {
  chainId: number;
  contractAddress: Address;
  tokenId: bigint;
  children: React.ReactNode;
}) => {
  return (
    <WagmiProvider config={wagmiConfig}>
      <QueryClientProvider client={queryClient}>
        <RMRKContextProvider config={rmrkConfig}>
            {children}
        </RMRKContextProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
};

import {
    useFetchIpfsMetadata,
    useGetAssetData,
    useGetComposedState,
    useGetInterfaceSupport,
} from '@rmrk-team/rmrk-hooks';

type Props = {
    contractAddress: Address;
    tokenId: bigint;
    chainId: number;
}

export const Example = ({contractAddress, tokenId, chainId}: Props) => {
    const {
        isLoading: isLoadingComposableState,
        isError: isErrorComposableState,
        error: errorComposableState,
        data: composableState,
    } = useGetComposedState(
        {
            tokenId,
            chainId,
            contractAddress,
        }
    );

    const {
        fixedPartsWithMetadatas,
        slotPartsWithMetadatas,
        equippableGroupId,
        assetMetadataUri,
        catalogAddress,
    } = composableState;
    
    console.log(composableState)
    return null;
}

export const App = () => {
    return (
        <Container>
            <Example />
        </Container>
    )   
}

Building

Publishing

License