@futureverse/mint-sdk-react

React wrapper around the Mint SDK.

Version

2.0.0

Published

2024-06-07

License

n/a

Status

fv-archived

npm

https://www.npmjs.com/package/@futureverse/mint-sdk-react

Types

./index.d.ts

Maintainers

admin-futureverse, garethdainesnpm, jcsanpedro

Depends on

react · @futureverse/mint-sdk

Peer deps

@polkadot/api · @therootnetwork/api · @tanstack/react-query · @therootnetwork/api-types

Recent versions

0.6.0 · 0.8.0 · 0.8.1 · 0.6.1 · 0.8.2 · 0.9.0 · 1.0.0 · 2.0.0

## Technical notes

Why use it

You wrap the hosted mint flow in a React UI.

When to skip it

Same as above — direct on-chain minting is fine for most apps.

Pairs with

• @futureverse/mint-sdk — core

Upstream README

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>
  );
}

Source: https://www.npmjs.com/package/@futureverse/mint-sdk-react · captured 2026-05-02