Cookie Consent by Free Privacy Policy Generator 📌 Easily Create An NFT App Using The New Infura NFT SDK TypeScript

🏠 Team IT Security News

TSecurity.de ist eine Online-Plattform, die sich auf die Bereitstellung von Informationen,alle 15 Minuten neuste Nachrichten, Bildungsressourcen und Dienstleistungen rund um das Thema IT-Sicherheit spezialisiert hat.
Ob es sich um aktuelle Nachrichten, Fachartikel, Blogbeiträge, Webinare, Tutorials, oder Tipps & Tricks handelt, TSecurity.de bietet seinen Nutzern einen umfassenden Überblick über die wichtigsten Aspekte der IT-Sicherheit in einer sich ständig verändernden digitalen Welt.

16.12.2023 - TIP: Wer den Cookie Consent Banner akzeptiert, kann z.B. von Englisch nach Deutsch übersetzen, erst Englisch auswählen dann wieder Deutsch!

Google Android Playstore Download Button für Team IT Security



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


💡 Newskategorie: Programmierung
🔗 Quelle: dev.to

If you know typescript, it’s easy to add the ability to create, mint, and manage non-fungible tokens (NFTs) to your app. The Infura NFT SDK 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 Infura NFT SDK also doesn’t require the overhead of learning Solidity, importing ABIs, etc. Whether you are new to web3 or highly experienced, Infura NFT SDK makes NFTs easy.

Let’s jump in, build, and deploy an ERC721 NFT to see how it works.

What is the Infura NFT SDK?

The Infura NFT SDK 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. 

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 dApp and smart contract 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.

Prerequisite

Before getting started, you need the following prerequisites:

  • Node.js and its package manager NPM. Verify you have Node.js installed by using the following terminal command: node -v && npm -v

  • TypeScript installed

  • 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 logging in 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.

Infura Dashboard

Click the “Create a New Key” button and fill in the required information.

Create a New Key

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.

Manage API Key

Set up IPFS project on Infura Dashboard

Now, let’s create an IPFS project. IPFS 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. 

Head to your dashboard and create another new key by clicking “Create a Key”, as shown below.

Create IPFS Key

This time we’ll choose IPFS as the network. This project will work on the mainnet and (what we will use it for) testnet.

Choose the IPFS Network

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.

Copy API KEY and Project ID

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:

Project structure

Create a .env file at your project's root and add the following variables to it:

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 <YOUR-INFURA-PROJECT-ID> and <YOUR-INFURA-PROJECT-API-KEY> with the ID and API key from the Infura project created earlier in this tutorial.

  • Replace <YOUR-INFURA-IPFS-PROJECT-ID> and <YOUR-INFURA-IPFS-PROJECT-SECRET-KEY> with the ID and API key from the IPFS  project created earlier in this tutorial.

  • On the line starting with EVM_RPC_URL, replace <YOUR-PROJECT-API-KEY> with your Infura API key.

  • <YOUR-WALLET-ADDRESS> should be replaced with your public blockchain address.

  • <YOUR-WALLET-MNEMONIC/PRIVATE-KEY> is your wallet's 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.

Setup MetaMask

  • Click on the three dots in the top right corner of the MetaMask window.

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.

Select “Account Details” from the drop-down menu

  • 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 private key safe and never share 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.

Extract private key oon MetaMask

Now that we’ve successfully configured our project, create a new TypeScript file nft.ts at the root level.

Your project structure should look similar to the one below.

Project structure

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 nft.ts using the following code snippet:

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 tsconfig.json file as shown. (You might get an error but keep going.) tsconfig.json is a configuration file for TypeScript projects. It’s used to specify the compiler options and files that should be included in the project.

Configure the  raw `tsconfig.json` endraw

Configure your tsconfig.json with the following code snippet:

{
        "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 type module to the package.json file using the following code snippet:

//...

"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 nft.ts file, add the following code snippet. It will create and store the token metadata. The metadata class is from the Infura NFT SDK.

(Note: The consensys.net external_url is just for demo purposes here and can be replaced.)

// 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 collectionMetadata using the openSeaCollectionLevelStandard method from the Metadata class. The openSeaCollectionLevelStandard method creates standard collection-level metadata compatible with OpenSea, a leading marketplace for NFTs. It sets the collection's name, description, image, and external link properties; stores the metadata using the storeMetadata method; then logs it and stores it in the console for 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 sdk.deploy method and sets the template for the contract to ERC721Mintable. Then it sets the contract's name, symbol, and contract URI. The contract address is logged for debugging.

It then mints a new NFT using the mint 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 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:

Project review

Verify Contract on Account and Goerli Etherscan

Finally, let’s verify the contract using a blockchain explorer on the Goerli Etherscan. Go to the Goerli Ethereum testnet site and paste the transaction hash from your output above (as shown below).

Verify Contract on Account and Goerli Etherscan

You should see the details.

Verify Contract on Account and Goerli Etherscan

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.)

Import token on MetaMask

Import token on MetaMask

Copy and paste the contract address to import your token on MetaMask, as shown below.

Copy and paste the contract address to import your token on MetaMask

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 OpenSea tesnet. Connect your wallet and view your new NFT. You should have something similar to what is shown below.

Verify Minted NFT on OpenSea

For reference, here’s the OpenSea link to the NFT created. You can find the complete code on a GitHub repository 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!!!

...



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


📈 102.46 Punkte

📌 How To Create a Viewer for Digital Collectibles With Infura’s New API


📈 36.65 Punkte

📌 No More Goerli Faucets! Using the New Infura Sepolia Faucet for Ethereum Smart Contract Testing


📈 34.31 Punkte

📌 No More Goerli Faucet! Using the New Infura Sepolia Faucet for Ethereum Smart Contract Testing


📈 34.31 Punkte

📌 I made "TypeScript Swagger Editor", new type of Swagger UI writing TypeScript code in the browser


📈 27.72 Punkte

📌 Deploying smart contracts to Infura with VS Code


📈 26.22 Punkte

📌 Deploying smart contracts to Infura with VS Code


📈 26.22 Punkte

📌 Deploying smart contracts to Infura with VS Code | Block Talk


📈 26.22 Punkte

📌 Infura Collecting MetaMask Users' IP, Ethereum Addresses After Privacy Policy Update


📈 26.22 Punkte

📌 Get Started on Celo with Infura RPC Endpoints


📈 26.22 Punkte

📌 Get Started On Celo With Infura RPC Endpoints


📈 26.22 Punkte

📌 From Zero to Hero: Learning Web3 With Infura and Python


📈 26.22 Punkte

📌 Smart Contracts Step-by-Step: A Beginner’s Guide to Debugging and Deploying Smart Contracts with Infura and Truffle


📈 26.22 Punkte

📌 Smart Contracts Step-By-Step: A Beginner’s Guide To Debugging and Deploying Smart Contracts With Infura and Truffle


📈 26.22 Punkte

📌 Using the TypeScript generic type to create reusable components


📈 25.05 Punkte

📌 Create a Headless CMS Using OceanBase and TypeScript: A Step-By-Step Tutorial


📈 25.05 Punkte

📌 10 typescript developers you must follow to become typescript expert in 2024


📈 24.79 Punkte

📌 How Types Work in TypeScript – Explained with JavaScript + TypeScript Code


📈 24.79 Punkte

📌 Introduction to TypeScript — What is TypeScript?


📈 24.79 Punkte

📌 Using Xamarin.Forms Shell to easily create a consistent, dynamic, customized, and feature filled UI


📈 24.4 Punkte

📌 How To Create Websites With AI Using Solo by Mozilla Easily


📈 24.4 Punkte

📌 Get your business on board the NFT fast train with Tatum’s NFT Express


📈 23.35 Punkte

📌 Why decentralized storage matters for NFT metadata and your next NFT collection


📈 23.35 Punkte

📌 Krypto-Hit: Elon Musk macht sich mit NFT-Song über NFT lustig


📈 23.35 Punkte

📌 Crooks stole $375k from Premint NFT, it is one of the biggest NFT hacks ever


📈 23.35 Punkte

📌 NFT-Holders only: Das ist die Idee hinter einem NFT-Restaurant in Florida


📈 23.35 Punkte

📌 Mastercard: Ex-NFT-Projektleiter verkauft NFT seiner Kündigung


📈 23.35 Punkte

📌 CVE-2023-43583 | Zoom Mobile App/Video SDK/Meeting SDK on Android cryptographic issues


📈 23.27 Punkte

📌 CVE-2023-43585 | Zoom Mobile App/Video SDK/Meeting SDK on iOS access control


📈 23.27 Punkte

📌 Scanbot SDK releases demo app for mobile Data Capture SDK


📈 23.27 Punkte

📌 How do you create a React app with TypeScript?


📈 22.96 Punkte

📌 Create a Real Time Crypto Price App with Next.js, TypeScript, Tailwind CSS & Binance API


📈 22.96 Punkte

📌 How to Use a Sass/SCSS with Expo SDK v48 and TypeScript


📈 22.5 Punkte











matomo