Next.js Guide for Mirror World Smart SDK

The Mirror World Smart SDK is a set of cross-platform tools that provides simple, declarative interfaces for developers with no blockchain development experience to seamlessly build mobile and web applications into Web3 architecture.

With the Mirror World Smart SDK, you can easily authenticate your users, create secure wallets, mint NFTs and deploy marketplaces with just a few lines of code.

Mirror World currently has SDK support for Android, iOS (in development), Unity, Javascript and Rust with support for more frameworks coming soon.

In this tutorial, we'll be taking a look at how to set up the SDK using JavaScript.

Getting Started

Create an Account

To start using the SDK, you'll need to create a developer account. Your account grants you access to all the features needed to build on Mirror World and it can be created within seconds. If you run into any issues creating an account, Mirror World has active communities on Telegram and Discord with people on the Mirror World team ready to help.

Create a Project

Once you've successfully created and verified your account, you'll be able to sign in to your developer dashboard. The dashboard contains helpful resources that'll assist you in the future when you start building. Go ahead and click the “Create Project” button to start your first project. Enter a clear project name in the popup and click “Create”.

Project Credentials

Every project is created with three major credentials that'll be used in developing Mirror World using the SDK:

API Key: Used to authorize a client to access the Mirror World API.
Client ID: Used to publicly identify your project.
Client Secret: Sensitive credential that the project owner/developer will use to verify certain claims about their project on our Authentication services.

Building the Application

Let's go ahead and build a simple application that integrates the Mirror World API.

Our client is a Next js application that connects with the Mirror World API to log users in and displays their user details and wallet addresses.

Project Setup

Create a Next JS app by running this command in your terminal

yarn create next-app mirrorworld-js
# or
npx create-next-app@latest mirrorworld-js

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 run the following command in your project's root directory, in the terminal:

yarn add @usemirrorworld/web3.js

Let's implement login functionality into our app using the Mirror World Smart SDK. To use the SDK, we'll need to create a new instance of the SDK.

Edit your index.js file to look like this

📁 pages/index.js

import { MirrorWorld, Solana } from "@usemirrorworld/web3.js"
import styles from "../styles/Home.module.css"
export default function Home() {
  const mirrorworld = new MirrorWorld({
    apiKey: "YOUR_SECRET_API_KEY", // Replace this with the API Key for your project
    chainConfig: Solana("devnet"),
  })
  return <div className={styles.container}></div>
}

Next, we're going to create a function that logs the user in, and a button to trigger that function.

Update your index.js file to look like this

import { useState } from "react"
import { MirrorWorld, Solana } from "@usemirrorworld/web3.js"
import styles from "../styles/Home.module.css"
const [user, setUser] = useState()
async function login() {
  const { user } = await mirrorworld.login()
  setUser(user)
}
return (
  <div className={styles.container}>
    <main className={styles.main}>
      <button onClick={login}>Login to Mirror World</button>
    </main>
  </div>
)

As you can see, we've bound the login method to the button. When you click on the button a popup appears giving you multiple options to login to mirror world.

User wallet login

We also include a user state using the useState hook from React so that we can set the user object and use it in our app as we'll see shortly.

Let's go ahead and display the user information in our app with this piece of code:

return (
    <div className={styles.container}>
      <main className={styles.main}>
        <button onClick={login}>Login to Mirror World</button>
        {user ? (
          <div className="user-info">
              <ul>
                <li>Username: {user.username} </li>
                <li>Email: {user.email}</li>
                <li>ETH Address: {user.wallet.eth_address}</li>
                <li>SOL Address: {user.wallet.sol_address}</li>
              </ul>
          </div>
        ) : (
          <p>No User available</p>
        )}
      </main>
    </div>
  );
}

Try to log in again and you should see your user details displayed like this:

Displaying user info

Where to go from here

As you can see, the Mirror World Smart SDK is quite easy to set up and work with. There are also a lot of other things you can do with the SDK such as swap tokens and mint NFTs, so don't just stop at user authentication.

The documentation is a great place to start learning about all the things you can do with the SDK. The Mirror World team is constantly trying to provide the best development experience possible, it'll be great if you joined the Discord channel and reported issues encountered while developing on their GitHub. Can't wait to see what you build!

Edit this page on GitHub