Futureverse Mint SDK React

Installation

NPM:

    npm install @futureverse/mint-sdk-react --save

Yarn:

    yarn add @futureverse/mint-sdk-react

Usage

import {
  TrnApiProvider,
  useCreateAndSendExtrinsic,
  useTrnApi,
} from '@futureverse/mint-sdk-react';
import { useCallback } from 'react';
import { useSigner } from 'wagmi';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

function useCreateMintExtrinsic(
  collectionId: string,
  numberOfTokens: number,
  owner: string
) {
  const { trnApi } = useTrnApi();
  return trnApi.tx.nft.mint(collectionId, numberOfTokens, owner);
}

function ExtrinsicDemo() {
  const { trnApi } = useTrnApi();
  const { data: signer } = useSigner();

  const collectionId = '<your collection id>';
  const numberOfTokens = 1; // How many tokens to mint
  const address = 'FuturePass or address to mint to';
  const extrinsic = useCreateMintExtrinsic(
    collectionId,
    numberOfTokens,
    address
  );

  const { mutateAsync } = useCreateAndSendExtrinsic(trnApi);

  const submitTransaction = useCallback(async () => {
    if (!signer) return;
    const { result } = await mutateAsync({
      account: address,
      extrinsic,
      signer,
    });

    return result;
  }, [extrinsic, mutateAsync, signer]);

  // Your UI code to call submitTransaction
  return <></>;
}

const queryClient = new QueryClient();

function DemoApp() {
  return (
    // Provide a TRN API provider to your application
    // If using @futureverse/react you can exclude this provider
    // import { useTrnApi } from '@futureverse/react';
    <QueryClientProvider client={queryClient}>
      <TrnApiProvider network="porcini">
        <ExtrinsicDemo />
      </TrnApiProvider>
    </QueryClientProvider>
  );
}