NFT

The example below shows how to mint and transfer NFTs on The Root Network.

The examples shown in this section include Futureverse Auth for authentication.

mint()

The code below shows how to use the API to mint an NFT on a Root Network Collection.

import { useAuth, useFutureverseSigner } from '@futureverse/auth-react';
import { TransactionBuilder } from '@futureverse/transact';
import { useTrnApi } from 'providers/TRNProvider';

const { userSession } = useAuth();
const [builder, setBuilder] = useState();
const signer = useFutureverseSigner();
const { trnApi } = useTrnApi();
const collectionId = '709732';

const triggerInit = useCallback(async () => {
  if (!trnApi || !signer || !userSession) {
    return null;
  }

  const nftBuilder = await TransactionBuilder.nft(trnApi, signer, userSession.eoa, collectionId).mint({ quantity: 1, walletAddress: userSession?.futurepass });

  setBuilder(nftBuilder);
}, [trnApi, signer, userSession]);

const signExtrinsic = useCallback(async () => {
  if (builder) {
    const result = await builder?.signAndSend({ onSign, onSend });
    setResult(result as ExtrinsicResult);
  }
}, [builder, onSend, onSign, toSign]);

return (
  <>
    <button
      onClick={() => {
        triggerInit();
      }}
    >
      Mint 1 Nft
    </button>

    <button
      onClick={() => {
        signExtrinsic();
      }}
    >
      Sign &amp; Send
    </button>
  </>
);

For more information about the useTrnApi used in the examples above and below check the The Root Network documentation for Install Native API.

mint() and addFuturePass()

The example below shows how to mint an NFT on a Root Network Collection, but minting using the FuturePass to pay for the gas.

import { useAuth, useFutureverseSigner } from '@futureverse/auth-react';
import { TransactionBuilder } from '@futureverse/transact';
import { useTrnApi } from 'providers/TRNProvider';

const { userSession } = useAuth();
const [builder, setBuilder] = useState();
const signer = useFutureverseSigner();
const { trnApi } = useTrnApi();
const collectionId = '709732';

const triggerInit = useCallback(async () => {
  if (!trnApi || !signer || !userSession) {
    return null;
  }

  const nftBuilder = await TransactionBuilder.nft(trnApi, signer, userSession.eoa, collectionId).mint({ quantity: 1, walletAddress: userSession?.futurepass }).addFuturePass(userSession.futurepass);

  setBuilder(nftBuilder);
}, [trnApi, signer, userSession]);

const signExtrinsic = useCallback(async () => {
  if (builder) {
    const result = await builder?.signAndSend({ onSign, onSend });
    setResult(result as ExtrinsicResult);
  }
}, [builder, onSend, onSign, toSign]);

return (
  <>
    <button
      onClick={() => {
        triggerInit();
      }}
    >
      Mint 1 Nft
    </button>

    <button
      onClick={() => {
        signExtrinsic();
      }}
    >
      Sign &amp; Send
    </button>
  </>
);

transfer()

The example below shows how to transfer a token to a wallet address on a Root Network Collection, but minting using the fee proxy to pay for the gas with a chosen token.

import { useAuth, useFutureverseSigner } from '@futureverse/auth-react';
import { TransactionBuilder } from '@futureverse/transact';
import { useTrnApi } from 'providers/TRNProvider';

const { userSession } = useAuth();
const [builder, setBuilder] = useState();
const signer = useFutureverseSigner();
const { trnApi } = useTrnApi();
const collectionId = '709732';

const triggerInit = useCallback(async () => {
  if (!trnApi || !signer || !userSession) {
    return null;
  }

  const nftBuilder = await TransactionBuilder.nft(trnApi, signer, userSession.eoa, collectionId).transfer({ destinationAddress: userSession?.futurepass, amount: 1 }).addFeeProxy({ assetId: ROOT_TOKEN_ID, slippage: 5 });

  setBuilder(nftBuilder);
}, [trnApi, signer, userSession]);

const signExtrinsic = useCallback(async () => {
  if (builder) {
    const result = await builder?.signAndSend({ onSign, onSend });
    setResult(result as ExtrinsicResult);
  }
}, [builder, onSend, onSign, toSign]);

return (
  <>
    <button
      onClick={() => {
        triggerInit();
      }}
    >
      Mint 1 Nft
    </button>

    <button
      onClick={() => {
        signExtrinsic();
      }}
    >
      Sign &amp; Send
    </button>
  </>
);

createCollection()

The example below shows how to create a collection.

const transaction = await TransactionBuilder.nft(
      trnApi,
      signer,
      userSession.eoa,
      collectionId
    )

const createCollectionBuilder = useCallback(async () => {
    if (!trnApi || !signer || !userSession) {
      return null;
    }

    if (
      !collectionName ||
      !metadataUri ||
      collectionName === '' ||
      metadataUri === ''
    ) {
      console.log('Missing collectionName or metadataUri');
      return;
    }

    if (royalties && royalties.length > 0) {
      if (
        royalties.some((r) => r[0] === '' || !isAddress(r[0]) || r[1] === 0)
      ) {
        console.log('Invalid Royalties');
        return;
      }
    }

    await transaction.createCollection({
      name: collectionName,
      initialIssuance,
      maxIssuance,
      tokenOwner,
      metadataUri,
      royalties,
      crossChain,
    });

    if (assetId !== 2) {
      if (useFuturePass) {
        await transaction.addFuturePassAndFeeProxy({
          futurePass: userSession.futurepass,
          assetId: assetId,
          slippage: slippage === '' ? 5 : Number(slippage),
        });
      }
      if (!useFuturePass) {
        await transaction.addFeeProxy({
          assetId: assetId,
          slippage: slippage === '' ? 5 : Number(slippage),
        });
      }
    }
    if (assetId === 2) {
      if (useFuturePass) {
        await transaction.addFuturePass(userSession.futurepass);
      }
    }

    getExtrinsic(transaction);
    setCurrentBuilder(transaction);
  }, [
    trnApi,
    signer,
    userSession,
    collectionName,
    metadataUri,
    transaction,
    initialIssuance,
    maxIssuance,
    tokenOwner,
    royalties,
    crossChain,
    assetId,
    useFuturePass,
    slippage,
  ]);