Skip to main content
BETA
HomeIntegration BuilderAPI ReferenceGuides
View Mirror World on Github
Join the Discord server

Minting Solana NFTs with the Mirror World Smart SDK

By David C. Nwadiogbu

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:


_1
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:


_1
yarn add @mirrorworld/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.


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


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

The mintNFT method takes in four parameters.

  1. name: The name of the NFT.
  2. symbol: The unique symbol of the NFT e.g
  3. metadataUri: This is where the metadata for the NFT is stored
  4. 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

Copyright © Mirror World, Inc. 2023
On this page

Home

Tutorials

Guides

API Reference