Minting Solana NFTs with the Mirror World Smart SDK

Non-fungible tokens (NFTs) are a new form of asset that can represent anything from digital art to game items and are stored on the blockchain's distibuted ledger. NFTs are unique, immutable and transparent.

People collect NFTs for various reasons, one of which may include having access to certain communities or having access to games. For example, on Mirror World, you may collect an NFT play as a character in a game.

In this guide, we'll look at how to mint NFTs on Solana using the Mirror World Smart SDK

Getting Started

Before getting started, you want to make sure that you already have a Mirror World developer account and an already created project. If you're yet to create one, head over to https://app.mirrorworld.fun/auth/login to get started or go through this guide for a proper explanation.

Create A Collection

Collections are like a folder for your NFTs. This is where your NFTs are going to be stored for distribution later. To create a collection, sign in to your developer dashboard and click on the "NFT Collections" tab displayed on the sidebar underneath the "Project Info" button.

Collection label

Click on the Create Collection button to create a new collection. You'll be redirected to a page asking you for more information about your collection. Please make sure to fill in every field with the appropriate information.

After creating a collection, you should be redirected to the collections page and see your collection added to the collections list for your project.

Guide To Minting An NFT.

The process of minting an NFT could be quite tedious, but with the mirrorworld SDK, this process has been simplified to writing just a few lines of code. Let's go ahead and build this out using Javascript (React frontend).

Project Setup

Create a simple React app using Vite by running this command in your terminal and selecting "React" from the prompt:

yarn create vite mint-nft

Install the Mirror World Smart SDK

Next, let's make sure we have the Mirror World Smart SDK installed in our project. This will enable us to implement the NFT minting feature the SDK provides. Run the following command in your project's root directory in the terminal:

yarn add @usemirrorworld/web3.js

Mint NFT

Let's implement the mintNFT method into our app. In your App.jsx delete the starter code and add the following code to set up Mirror World and authentication in our app. We add some extra code to fetch and use refreshToken which will help us validate requests.

import { useState } from "react"
import { MirrorWorld, Solana } from "@usemirrorworld/web3.js"
import "./App.css"
function App() {
  const [refresh, setRefreshTok] = useState(
    localStorage.getItem(`app-refresh-token`),
  )
  const mirrorworld = new MirrorWorld({
    apiKey: "YOUR_SECRET_API_KEY", //Replace this with your own API Key
    chainConfig: Solana("devnet"),
    autoLoginCredentials: refresh ?? undefined, // we need this to validate our requests
  })
  const [user, setUser] = useState()
  async function login() {
    const { user, refreshToken } = await mirrorworld.login()
    localStorage.setItem(`app-refresh-token`, refreshToken)
    setRefreshTok(refreshToken)
    setUser(user)
  }
  useEffect(() => {
    if (refresh) {
      console.log(refresh)
      setMirrorWorld(
        new MirrorWorld({
          apiKey: "YOUR_SECRET_API_KEY",
          chainConfig: Solana("devnet"),
          autoLoginCredentials: refresh,
        }),
      )
    }
  }, [refresh])
  return (
    <div className="App">
      {!user ? <button onClick={login}>Login to Mirror World</button> : ""}
      {user ? (
        <div className="user-info">
          <p>{user.username} is logged in</p>
        </div>
      ) : (
        <p>No User available</p>
      )}
    </div>
  )
}
export default App

Now that we have set up authentication, let's create and function to mint our NFT and add a button that invokes that function:

...
async function mintMyNft() {
    await mirrorworld.Solana.Asset.mintNFT({
      name: `YOUR_NFT_NAME`,
      symbol: `NFT_SYMBOL`,
      metadataUri: "YOUR_NFT_METADATAURI",
      collection: "YOUR_COLLECTION_ID",
    });
  }
  return (
    <div className="App">
      {!user ? (
        <button onClick={login}>Login to Mirror World</button>
      ) : (
        <div>
          <button onClick={mintMyNft}>Mint NFT</button>
        </div>
      )}
      {user ? (
        <div className="user-info">
          <p>{user.username} successfully logged in</p>
        </div>
      ) : (
        <p>No User available</p>
      )}
    </div>
  );
}

The mintNFT method takes in four parameters.

name: The name of the NFT.
symbol: The unique symbol of the NFT e.g
metadataUri: This is where the metadata for the NFT is stored
collection: The value of collection is the ID of the collection we created earlier on a dashboard.

We should now be able to successfully mint our NFT into our collection at the click of a button.

To confirm that this transaction was successful, head over to explorer.solana.com, enter the signature or mint address returned from the transaction and you should find your newly minted NFT there!

Edit this page on GitHub