Let's start with minting tokens in our DApp. Head over to the "components" folder and find the "createTokenMint" directory. Inside, you'll see a component named "CreateMintForm." Here, we use the useState hook to manage three different states:

const [txSig, setTxSig] = useState("");
const [mint, setMint] = useState("");
const [loading, setLoading] = useState(false);

We use these states to keep track of the transaction signature, the mint account, and the loading status of our actions.

In this component, we retrieve the current state from hooks:

const { connection } = useConnection();
const wallet = useWallet();
const { publicKey, sendTransaction } = useWallet();

We also have a function to link the transaction signature to the Solana Explorer.

const link = () => {
  return txSig ? `https://explorer.solana.com/tx/${txSig}?cluster=devnet` : "";
};

We then set up the provider, connection, and program API for executing RPC calls.

const getProgram = () => {
  const provider = new AnchorProvider(connection, wallet as any, opts);
  const program = new Program(idl as Idl, programId, provider);
  return program;
};

const program = getProgram();

We create data and mint accounts using random keypairs.

const dataAccount = anchor.web3.Keypair.generate();
const mintKeypair = anchor.web3.Keypair.generate();

We proceed to define the metadata for our token.

const tokenTitle = "Temp Token";
const tokenSymbol = "TEMP";
const tokenUri = "image_url.png";

Now, let's build the createMint function to execute our transaction.

const createMint = async (event) => {
  event.preventDefault();

  setLoading(true);

  if (!publicKey) {
    notify({ type: "error", message: `Wallet not connected!` });
    console.log("error", `Send Transaction: Wallet not connected!`);
    return;
  }

  const createDataAccountTransaction = await program.methods
    .new()
    .accounts({ dataAccount: dataAccount.publicKey })
    .signers([dataAccount])
    .rpc();
  console.log("Your transaction signature", createDataAccountTransaction);
  console.log("Your transaction dataAccount", dataAccount.publicKey.toBase58());

  // creating metadata address
  const metaplex = Metaplex.make(connection);
  const metadataAddress = await metaplex
    .nfts()
    .pdas()
    .metadata({ mint: mintKeypair.publicKey });

  // create mint transaction
  try {
    const createMintTransaction = await program.methods
      .createTokenMint(
        wallet.publicKey, // freeze authority
        9, // 0 decimals for NFT
        tokenTitle, // NFT name
        tokenSymbol, // NFT symbol
        tokenUri // NFT URI
      )
      .accounts({
        payer: wallet.publicKey,
        mint: mintKeypair.publicKey,
        metadata: metadataAddress,
        mintAuthority: wallet.publicKey,
        rentAddress: SYSVAR_RENT_PUBKEY,
        metadataProgramId: new PublicKey(
          "metaqbxxUerdq28cj1RbAWkYQm3ybzjb6a8bt518x1s"
        ),
      })
      .signers([mintKeypair])
      .rpc({ skipPreflight: true });
    console.log("Your transaction signature", createMintTransaction);

    let mintAccount = await getMint(connection, mintKeypair.publicKey);

    console.info("mintAccount", mintAccount.address.toString());

    setMint(mintAccount.address.toString());
    setTxSig(createMintTransaction);
  } catch (error) {
    notify({
      type: "error",
      message: `Transaction failed!`,
      description: error?.message,
    });
    console.log("error", `Transaction failed! ${error?.message}`);
    return;
  }

  setLoading(false);
};

1. We start by setting the loading state at the beginning of the function.
2. Then, we check if the wallet is connected.
3. We create a data account for our Solang Solana program using an RPC call.
4. We establish a connection with Metaplex.
5. In the createTokenMint method, we specify the necessary arguments, accounts, and signers. This is to create the mint account and a metadata account for it.

And that's how you create a token mint and a metadata account in your DApp!