If you know , it’s easy to add the ability to create, mint, and manage non-fungible tokens (NFTs) to your app. The wraps REST calls to Ethereum nodes, abstracting away the technical compilations and making it possible to work with NFTs with just an Infura account, some configuration, and a few lines of code. The also doesn’t require the overhead of learning Solidity, importing ABIs, etc. Whether you are new to or highly experienced, Infura NFT SDK makes NFTs easy. typescript Infura NFT SDK Infura NFT SDK web3 Let’s jump in, build, and deploy an to see how it works. ERC721 NFT What is the Infura NFT SDK? The is an SDK that allows you to build and interact with NFTs easily.  It’s implemented in TypeScript, a programming language that is a strict superset of JavaScript. The SDK includes the ability to create, mint, and manage NFTs and query information about them. Infura NFT SDK The significant part is that it abstracts away the technical details so you can focus on the core functionality of your dApp instead of the (often difficult) details. It’s all about ease of use with Infura SDKs! Supported chains include: Write Ethereum: Mainnet, Goerli, Sepolia Polygon: Mainnet, Mumbai Read Ethereum: Mainnet, Goerli, Sepolia Polygon: Mainnet, Mumbai BSC: Mainnet By using the Infura NFT SDK, you also get access to Infura's core functionality and infrastructure, which provides access to Ethereum (and other blockchains) without requiring you to run a full node. With the SDK, you can leverage many capabilities, making it easier to build and scale your dApps. So let’s build an NFT and see what the SDK can do. Building and Deploying ERC721 NFT We will build a and on Ethereum and use the SDK to create a new NFT. We’ll do all this on the Ethereum Goerli testnet, so we don’t have to worry about defects or the cost of deploying to the mainnet. dApp smart contract Prerequisite Before getting started, you need the following prerequisites: and its package manager NPM. Verify you have Node.js installed by using the following terminal command: node -v && npm -v Node.js installed TypeScript An Infura account A basic understanding of TypeScript and JavaScript MetaMask Infura The Infura NFT SDK is really simple to use. In fact, most of this tutorial is just the setup and configuration needed to create a dApp. Let’s start by to your Infura account. You should be on your dashboard, where you can create a new key, as shown below. We’ll create a new key for this project. logging in Click the “Create a New Key” button and fill in the required information. After creating your key, your project ID will be visible on your dashboard under the API KEY section, as shown below. Copy and keep it somewhere; you’ll need it later in this tutorial. Set up IPFS project on Infura Dashboard Now, let’s create an project. is a P2P distributed file system for storing and accessing files (and other data). It works well with blockchain. We’ll need IPFS (and these credentials) to upload and store the metadata of our NFT project. IPFS IPFS Head to your dashboard and create another new key by clicking “Create a Key”, as shown below. This time we’ll choose IPFS as the network. This project will work on the mainnet and (what we will use it for) testnet. After creating your key, you’ll see your project ID and API key secret under the API KEY section of your dashboard. You’ll need this later as well, so copy it and keep it somewhere safe. Project Setup and Installation Next, we’ll set up and initialize a node.js Typescript project. Use the following commands in your console: mkdir typescript-nft-demo && cd typescript-nft-demo

npm init -y

npm install -D typescript ts-node

npx tsc --init Open the project in your preferred development environment. For example, if you are using Visual Studio Code, use the following command to open the project automatically: code . Install the Project Libraries Next, we need to install the Infura SDK and dotenv library for reading the environment variables. Use the following command: npm install @infura/sdk dotenv Your project should have something similar to what is shown below: Create a file at your project's root and add the following variables to it: .env INFURA_PROJECT_ID=<YOUR-INFURA-PROJECT-ID>

INFURA_PROJECT_SECRET=<YOUR-INFURA-PROJECT-API-KEY>

WALLET_PRIVATE_KEY=<YOUR-WALLET-MNEMONIC/PRIVATE-KEY>

EVM_RPC_URL=https://goerli.infura.io/v3/<YOUR-PROJECT-API-KEY>

INFURA_IPFS_PROJECT_ID=<YOUR-INFURA-IPFS-PROJECT-ID>

INFURA_IPFS_PROJECT_SECRET=<YOUR-INFURA-IPFS-PROJECT-SECRET-KEY>

WALLET_PUBLIC_ADDRESS=<YOUR-WALLET-ADDRESS> Replace and with the and key from the Infura project created earlier in this tutorial. <YOUR-INFURA-PROJECT-ID> <YOUR-INFURA-PROJECT-API-KEY> ID API Replace and with the and key from the project created earlier in this tutorial. <YOUR-INFURA-IPFS-PROJECT-ID> <YOUR-INFURA-IPFS-PROJECT-SECRET-KEY> ID API IPFS On the line starting with , replace with your . EVM_RPC_URL <YOUR-PROJECT-API-KEY> Infura API key should be replaced with your public blockchain address. <YOUR-WALLET-ADDRESS> is your wallet's private key. <YOUR-WALLET-MNEMONIC/PRIVATE-KEY> Note: Never share your private keys (mnemonic) with anyone, and keep them secure. You can find your wallet address and private key to your wallet on MetaMask in the following steps: Open MetaMask by clicking on the browser extension icon or visiting the MetaMask website. Click on the three dots in the top right corner of the MetaMask window. Select “Account Details” from the drop-down menu, and click on the “Export Private Key” button. A pop-up window will appear, asking you to enter your password. Enter your password and click on the “Unlock” button. Once your account is unlocked, you can see your private key. Remember: keep your and your private key with anyone else. Also, be sure you're connected to the Goerli testnet, not the mainnet, as shown in the image below. private key safe never share Now that we’ve successfully configured our project, create a new TypeScript file at the root level. nft.ts Your project structure should look similar to the one below. Setup Infura Authentication Authentication from inside our dApp requires our PROJECT_ID and PROJECT_SECRET. We’ll load these from our new .env file. Create an auth object inside the using the following code snippet: nft.ts import { config as loadEnv } from "dotenv";
import { SDK, Auth, Metadata, TEMPLATES } from "@infura/sdk";

// load environment variables from .env file
loadEnv();

// Create an instance of the Auth class 
const auth = new Auth({

  // set the projectId taken from the INFURA_PROJECT_ID environment variable 
  projectId: process.env.INFURA_PROJECT_ID,

  // set the secretId taken from the INFURA_PROJECT_SECRET environment variable 
  secretId: process.env.INFURA_PROJECT_SECRET,

  // set the private key taken from the WALLET_PRIVATE_KEY environment variable 
  privateKey: process.env.WALLET_PRIVATE_KEY,

  // set the rpcUrl taken from the EVM_RPC_URL environment variable 
  rpcUrl: process.env.EVM_RPC_URL,

  // set the chainId for the Goerli testnet
  chainId: 5, // Goerli

  // set the options for IPFS
  ipfs: {

    // set the project Id taken from the INFURA_IPFS_PROJECT_ID environment variable
    projectId: process.env.INFURA_IPFS_PROJECT_ID,

    // set the API key secret taken from the INFURA_IPFS_PROJECT_SECRET environment variable
    apiKeySecret: process.env.INFURA_IPFS_PROJECT_SECRET,
  },
});

// Instantiate the SDK
const sdk = new SDK(auth); Configure the file as shown. (You might get an error but keep going.) is a configuration file for TypeScript projects. It’s used to specify the compiler options and files that should be included in the project. tsconfig.json tsconfig.json Configure your with the following code snippet: tsconfig.json {
        "compilerOptions": {

          "target": "ESNext", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */

          "module": "ES2022", /* Specify what module code is generated. */

          // "rootDir": "./",                                  /* Specify the root folder within your source files. */

          "moduleResolution": "node", /* Specify how TypeScript looks up a file from a given module specifier. */

          "esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */

          "forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */

          /* Type Checking */

          "strict": true, /* Enable all strict type-checking options. */

          "skipLibCheck": true /* Skip type checking all .d.ts files. */
      }
} Next, add the module to the file using the following code snippet: type package.json //...

"type": "module",
"scripts": {},

//... Create Token Metadata Now we’re done configuring. Let’s get to the exciting stuff! First, we’ll create the token metadata. Token metadata refers to additional information or data associated with a token (typically an ERC-721 or ERC-1155 token on the Ethereum blockchain). This metadata can include information such as the token's name, symbol, image, and other attributes that describe the token or give it context. The metadata is stored on the blockchain and is typically represented as a URI or a URL that points to a JSON file containing the metadata. Inside the , add the following code snippet. It will create and store the token metadata. The metadata class is from the Infura NFT SDK. nft.ts file (Note: The external_url is just for demo purposes here and can be replaced.) consensys.net // Define the properties of the token, including its description, external URL, image, name, and attributes
const tokenMetadata = Metadata.openSeaTokenLevelStandard({

  description: "Fantastic creature of different emojis",

  external_url: "https://consensys.net/",

  image: await sdk.storeFile({

    // Store the image from the given URL
    metadata: "https://res.cloudinary.com/olanetsoft/image/upload/c_pad,b_auto:predominant,fl_preserve_transparency/v1672327921/demo.jpg",

  }),
  name: "Kandy Jane",
  attributes: [],
});

// Log the token metadata object to the console
console.log("Token Metadata: ", tokenMetadata);


// Store the token metadata and log the result
const storeTokenMetadata = await sdk.storeMetadata({ metadata: tokenMetadata });

console.log("Store Token Metadata: ", storeTokenMetadata); Create the Contract Metadata Contract metadata refers to additional information or data associated with a smart contract on a blockchain network. This metadata can include information such as the contract's name, symbol, version, and other attributes that describe the contract or give it context. The metadata is stored on the blockchain and is typically represented as a URI or a URL that points to a JSON file containing the metadata. Create contract metadata using the following code snippet: //...

// Define the properties of the collection, including its description, external URL, image, name, and attributes
const collectionMetadata = Metadata.openSeaCollectionLevelStandard({

  name: "Emojis collection", // Sets the name of the collection to "Emojis collection"

  description:
    "A small digital image or icon used to express an idea or emotion in electronic communication. Emoji's come in many forms, such as smiley faces, animals, food, and activities. ", // Sets the description of the collection
  image: await sdk.storeFile({

    // Sets the image property of the collection using the storeFile method
    metadata:
"https://res.cloudinary.com/olanetsoft/image/upload/c_pad,b_auto:predominant,fl_preserve_transparency/v1672327921/demo.jpg", // The URL of the image file
  }),

  external_link: "https://google.com/", // Sets the external link property of the collection
});

// Logs the collection metadata to the console
console.log("Collection Metadata:- ", collectionMetadata); 

// stores the metadata using the storeMetadata method
const storeMetadata = await sdk.storeMetadata({ metadata: collectionMetadata }); 

// Logs the store metadata to the console
console.log("Store Metadata: ", storeMetadata); This code snippet above creates an object using the method from the Metadata class. The method creates standard collection-level metadata compatible with , a leading marketplace for NFTs. It sets the collection's name, description, image, and external link properties; stores the metadata using the method; then logs it and stores it in the console for . collectionMetadata openSeaCollectionLevelStandard openSeaCollectionLevelStandard OpenSea storeMetadata debugging Create a New Contract and Mint an NFT Add the following code to create a new contract and mint an NFT using the Infura NFT SDK. Most of this functionality comes to us from our new NFT SDK! //...

// Create a new contract
const newContract = await sdk.deploy({   // deploys a new contract using the sdk.deploy method

  template: TEMPLATES.ERC721Mintable,     // sets the template for the contract to ERC721Mintable
  params: {
    name: "1507Contract",                  // sets the name of the contract as "1507Contract"
    symbol: "EMOJI",                        // sets the symbol of the contract as "EMOJI"
    contractURI: storeMetadata,             // sets the contract URI with the storeMetadata
  },
});

console.log("Contract Address: \n", newContract.contractAddress);  // logs the contract address to the console

// mint an NFT
const mint = await newContract.mint({  // mints a new NFT using the mint method from the new contract

  publicAddress:
    process.env.WALLET_PUBLIC_ADDRESS ??

    "0x510e5EA32386B7C48C4DEEAC80e86859b5e2416C", // sets the public address of the wallet, if not set it will use the given address

  tokenURI: storeTokenMetadata,                // sets the token URI with the storeTokenMetadata

});

const minted = await mint.wait();            // waits for the minting process to complete

console.log("Minted: ", minted);               // logs the minted NFT to the console This code creates a new contract using the method and sets the template for the contract to . Then it sets the contract's name, symbol, and contract URI. The contract address is logged for debugging. sdk.deploy ERC721Mintable It then mints a new NFT using the method from the new contract and sets the wallet's public address. If not specified, it uses the given address and then sets the token URI with the . mint storeTokenMetadata Finally, it waits for the minting process to complete and logs the minted NFT to the console. Let’s test it out! ts-node-esm nft.ts You should see something similar to what is shown below: Verify Contract on Account and Goerli Etherscan Finally, let’s verify the contract using a blockchain explorer on the . Go to the and paste the transaction hash from your output above (as shown below). Goerli Etherscan Goerli Ethereum testnet site You should see the details. That was easy! We successfully utilized the Infura NFT SDK to build, deploy, and mint an NFT on the Goerli testnet. Import token on MetaMask Let’s look at our new NFT from a front-end perspective using MetaMask. First, we have to import our wallet to MetaMask. Click “Import Tokens”, as shown in MetaMask. (Be sure you are connected to the Goerli Testnet as shown.) Copy and paste the contract address to import your token on MetaMask, as shown below. And there it is! An easy and fast way to add NFTs to your dApps. You can use the SDK now to manage the NFTs and more ( ). see the docs for current capabilities Verify Minted NFT on OpenSea We’ve successfully imported the minted NFT on MetaMask, but now let’s verify on . Connect your wallet and view your new NFT. You should have something similar to what is shown below. OpenSea tesnet For reference, to the NFT created. You can find the complete code on a GitHub repository . here’s the OpenSea link here Conclusion In conclusion, the new Infura NFT SDK for TypeScript is a powerful tool for developers looking to incorporate NFTs into their dApps. With its easy-to-use functions and comprehensive features, this SDK makes it simple to deploy, mint, and manage NFTs on the Ethereum blockchain. ! Sign up and start building I'd love to connect with you on | | | Twitter LinkedIn GitHub Portfolio See you in my next blog article. Take care!!! Also published . here

Mastering the Cosmos: A Beginner's Guide to Building and Deploying Smart Contracts

A Guide to Infura and StarkNet ZK-Rollup for Ethereum Devs

Read My Stories

Too Long; Didn't Read

Download free Tech Leaders Productivity Report!

Easily Create An NFT App Using The New Infura NFT SDK TypeScript

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

A Guide to Infura and StarkNet ZK-Rollup for Ethereum Devs

(1/100) Crypto Countdown: Golem

A Research Report on the Trader $JOE DeFi Platform

07/03/2018: Biggest Stories in the Cryptosphere

05/02/2018: Biggest Stories in the Cryptosphere

A Guide to Infura and StarkNet ZK-Rollup for Ethereum Devs

(1/100) Crypto Countdown: Golem

A Research Report on the Trader $JOE DeFi Platform

07/03/2018: Biggest Stories in the Cryptosphere

05/02/2018: Biggest Stories in the Cryptosphere

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps