Getting Started with Infura Sample Projects

• Sample Project 1a - Send Transaction on Sepolia
• Sample Project 1b - Send Transaction on Polygon Mumbai
• Sample Project 2 - IPFS
• Sample Project 3 - Notifications
• Sample Project 4 - Minting an NFT

Getting Started with Infura Article

Run Project Locally

1. Installation

Clone the project

  git clone git@github.com:anataliocs/Getting-Started-With-Infura.git

Go to the project directory

  cd Getting-Started-With-Infura

Install dependencies

  yarn

2. Environment Variables

Create environment variables file

  cp template.env .env

You'll need to sign up for an Infura account and create an Ethereum project and an IPFS project.

Add your Infura project IDs and Secrets to the .env file.

We'll be using the Sepolia testnet.

Install dotenv:

npm i dotenv

Setup your .env file:

  # Send Transaction Variables
  NEXT_PUBLIC_WEB3_TEST_ETHEREUM_NETWORK=sepolia
  NEXT_PUBLIC_WEB3_INFURA_API_KEY=[Your WEB3 Infura Project]

  # IPFS Variables
  NEXT_PUBLIC_INFURA_IPFS_ENDPOINT=https://ipfs.infura.io:5001
  NEXT_PUBLIC_INFURA_IPFS_API_KEY=[Your IPFS Infura Project ID]
  NEXT_PUBLIC_INFURA_IPFS_API_KEY_SECRET=[Your IPFS Infura Project Secret]

  # Minting Variables
  WALLET_MNEMONIC=
  NEXT_PUBLIC_MINTING_INFURA_API_KEY=[Your WEB3 Infura Project]
  NEXT_PUBLIC_SMART_CONTRACT_ADDRESS=[The hash of the deployed contract on sepolia]

3. Run the Project

  yarn dev

Sample Project 1a - Send Transaction on Sepolia

In this project the user will connect their MetaMask wallet, send a transaction, and then review a transaction, all using the Infura API.

1 - Fund Your Wallet With Testnet Ether

In your MetaMask wallet, switch to the Sepolia Test Network (you may have to click "show/hide test networks" and toggle the setting to see the Sepolia network)

Go to our free Infura Faucet, https://www.infura.io/faucet/sepolia, enter your wallet address, and then request Sepolia testnet ETH be sent to your account.

2 - Connect Wallet

Go to http://localhost:3000/transaction/connect and click Connect Wallet

In /api/balance.ts we are using the Infura API eth_getBalance to get the current balance of ETH in the connected wallet account.

3 - Transfer ETH

Enter a wallet address for the wallet that you are going to be tranferring to (you can create an additional account in your MetaMask wallet to send to)

Enter the amount of testnet Ether you want to transfer (i.e. 0.001 ETH)

Hit Submit and if your wallet has sufficient funds the transaction will be mined (Note that the transaction may take a while to finish up, testnets can often be a bit slow)

When the transaction is mined you'll see a confirmation screen with the transaction hash, copy the hash to the clipboard for the next step

4 - Review

Paste your transaction hash from the previous step and click Review

You should then see the transaction details.

Sample Project 1b - Send Transaction on Sepolia

Follow the same steps as in Project 1a but with the following changes.

1 - Update .env file

  # Send Transaction Variables
  NEXT_PUBLIC_WEB3_TEST_ETHEREUM_NETWORK=polygon-mumbai

2 - Add Polygon Mumbai Testnet Matic to Metamask

First, click the network dropdown then click “Add network.”

Then click “Add a network manually.”

Enter in the following parameters: Network Name: Polygon Mumbai New RPC URL: https://rpc-mumbai.maticvigil.com/ Chain ID: 80001 Currency Symbol: MATIC Block Explorer URL: https://mumbai.polygonscan.com/

3 - Fund Your Wallet With Polygon Mumbai Testnet Matic

In your MetaMask wallet, switch to the Polygon Mumbai Network (you may have to click "show/hide test networks" and toggle the setting to see the Sepolia network)

Go to the Polygon Faucet, https://faucet.polygon.technology/, enter your wallet address, and then request Mumbai testnet MATIC to be sent to your account.

Then follow the same steps as in Project 1a to send a Polygon Mumbai transaction.

Sample Project 2 - Upload to IPFS

In this project the user will upload a png/jpeg image and metadata json to IPFS, then use the tokenURI to retrieve and display the image and its metadata.

1 - Set up environment variables

Add the values from your Infura dashboard for these three environment variables.

  # IPFS Variables
  NEXT_PUBLIC_INFURA_IPFS_ENDPOINT=
  NEXT_PUBLIC_INFURA_IPFS_API_KEY=
  NEXT_PUBLIC_INFURA_IPFS_API_KEY_SECRET=

2 - Run the project

Note: You'll have to restart the project server after saving new environment variables.

  yarn dev

3 - Upload an image

Use the form on /ipfs/upload to upload an image and metadata to IPFS. .png and .jpeg images are currently the only supported formats.

On the back end of this upload, we are first uploading the image to IPFS, then creating a json object using the metadata and adding IPFS hash of the image to that object. This is a common format for NFTs, and the json object looks like this once it's uploaded:

  {
    "name": "NFT Name",
    "description": "Description of NFT",
    "image": "<ipfs hash for image>",
    "attributes": [
      { "trait_type": "Color", "value": "Blue" },
      { "trait_type": "fileSize", "value": "71.4 KB" },
      { "trait_type": "fileType", "value": "image/png" },
      { "trait_type": "objectHash", "value": "<ipfs hash for this metadata object>" }
    ]
  }

On the success screen, copy the IPFS hash.

4 - Display your image

Use the form on /ipfs/display to enter the IPFS hash you copied in the previous step and click submit.

This will retrieve your image and it's metadata from IPFS and display it.

Sample Project 3 - Transaction Notifications

In this project, you will subscribe to a ETH address and recieve notifications for pending transactions.

1 - Project setup

• Follow the primary application setup and fill in these env variables. Network should be sepolia

  NEXT_PUBLIC_WEB3_TEST_ETHEREUM_NETWORK=sepolia
  NEXT_PUBLIC_WEB3_INFURA_API_KEY=[Your WEB3 Infura Project]

• Install and setup a Metamask account, switch network to sepolia

• Install project dependencies

  yarn

• Start the app

  yarn dev

• Navigate to Notifications demo page

  http://localhost:3000/notifications

2 - Connect your Metamask Wallet

• Click get started on the Notifications landing to be taken to the connect screen.
• Once your wallet is connected proceed to step 3

3 - Subscribe to an Account

• Enter an ETH address you would like to get notifications for
• You will be taken to a waiting for notifications screen which will populate once a transaction is found

4 - Send a transaction

• Using either Metamask or the Send Transaction Demo (in a new tab), send a transaction to the account address you entered in step 3.

5 - Recieve a notification

• On the notifications review step, once a transaction is detected you will see the latest notification populated on the page, as well as all recent notifications under the notifications bell at the top.

Sample Project 4 - Mint an NFT

In this project the user will deploy a smart contract using Truffle, upload to IPFS, and mint an NFT.

1 - Fund your wallet

In your MetaMask wallet, switch to the Sepolia Test Network (you may have to click "show/hide test networks" and toggle the setting to see the Sepolia network)

Go to https://www.infura.io/faucet/sepolia, enter in your wallet address, and then request the test ETH

2 - Deploy a Smart Contract

1. Install Truffle: yarn global add truffle

   Truffle is a development environment, testing framework, and asset pipeline for blockchains using the Ethereum Virtual Machine. The suite of Truffle tools is quite powerful, we're going to be using Truffle's built-in smart contract compilation, linking, deployment, and binary management.

   The truffle project has already been initialized so you'll see contracts/, migrations/, and truffle-config.js already in the project structure.

2. Add your wallet mnemonic (the twelve-word phrase the wallet uses to generate public/private key pairs) and your Infura project ID for an Ethereum project (this can be the same project ID as the Send Transaction Project) to your environment variables. We'll use the sepolia network for this example so you can preview your minted nft on OpenSea Testnets.

   # Minting Variables
    WALLET_MNEMONIC=
    NEXT_PUBLIC_MINTING_INFURA_WEB3_API_KEY=[Your WEB3 Infura Project]

   IMPORTANT: Be careful not to share or commit your wallet mnemonic, it can be used to access your wallet accounts and their contents.

3. In /contracts/NFTContract.sol you'll find a basic smart contract for minting NFTs. This contract uses OpenZeppelin - a trusted open-source library of Solidity smart contracts - to construct an ERC721 Token Contract. ERC721 is a token standard for representing ownership of non-fungible tokens (i.e. where each token is unique).

   In NFTContract.sol give your NFT collection a name and symbol. Each NFT minted with this contract will have an ID number. The tokenCounter will act as the ID and the contract will increment the counter as new NFTs are minted.

4. In your terminal run

   truffle compile

   This will add a build/ folder to the project structure (do not delete)

5. Migrate the smart contract onto the chain by running

   truffle migrate --network sepolia

   IMPORTANT: After your migration completes, copy the contract address in the cli output and add it to your environment variables

   # Minting Variables
   WALLET_MNEMONIC=
   NEXT_PUBLIC_MINTING_INFURA_WEB3_API_KEY=
   NEXT_PUBLIC_SMART_CONTRACT_ADDRESS=

3 - Start the app

In your terminal, run

yarn dev

and go to http://localhost:3000/mint

4 - Upload to IPFS

Select the file for your NFT and give it a name, description, and attributes (optional), then click UPLOAD to upload the NFT metadata to IPFS.

Visit the IPFS documentation above for more details.

IMPORTANT: Make sure to copy the tokenURI (IPFS hash) for the uploaded object.

5 - Mint

on the http://localhost:3000/mint/mint page, paste the token URI you copied in the previous step into the input field. Press submit and wait as your NFT is minted. The results will be displayed when the process is complete.

You can view your collection on OpenSea by searching for the contract address on OpenSea's Testnet site

Working with NFTs with Traditional Web2 REST APIs

You can also use the Infura NFT API and SDK to mint NFTs without the need for smart contracts using our REST API.

You can learn more about using the NFT API and SDK with this hands-on coding tutorial video

Hands-On Getting Started with the Infura NFT API and SDK Technical Guide

You can learn more about NFT standards such as ERC-721 and ERC-1155 in another article on the Infura blog!

Interested in learning more about the basics of NFTs? Check out our video, NFT Crash Course, featured on Microsoft Inspire 2022.