• Sample Project 1 - Send Transaction
• Sample Project 2 - IPFS
• Sample Project 3 - Notifications
• Sample Project 4 - Minting an NFT

Companion Article

Clone the project

  git clone [email protected]:anataliocs/Getting-Started-With-Infura.git

Go to the project directory

  cd Getting-Started-With-Infura

Install dependencies

  yarn

Create environment variables file

  cp .env .env.local

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.local file.

We'll be using the Goerli testnet.

Install dotenv:

npm i dotenv

Setup your .env file:

  # Send Transaction Variables
  NEXT_PUBLIC_ETHEREUM_NETWORK=goerli
  NEXT_PUBLIC_INFURA_PROJECT_ID=
  NEXT_PUBLIC_INFURA_PROJECT_SECRET=

  # IPFS Variables
  NEXT_PUBLIC_INFURA_IPFS_ENDPOINT=
  NEXT_PUBLIC_INFURA_IPFS_PROJECT_ID=
  NEXT_PUBLIC_INFURA_IPFS_PROJECT_SECRET=

  # Minting Variables
  WALLET_MNEMONIC=
  NEXT_PUBLIC_MINTING_ETHEREUM_NETWORK=goerli
  NEXT_PUBLIC_MINTING_INFURA_PROJECT_ID=
  NEXT_PUBLIC_SMART_CONTRACT_ADDRESS=

  yarn dev

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

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

Go to https://faucet.paradigm.xyz/, connect your wallet, and then request the test ETH be sent to your account.

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.

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

Paste your transaction hash from the previous step and click Review

You should then see the transaction details.

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.

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

  # .env.local

  # IPFS Variables
  NEXT_PUBLIC_INFURA_IPFS_ENDPOINT=
  NEXT_PUBLIC_INFURA_IPFS_PROJECT_ID=
  NEXT_PUBLIC_INFURA_IPFS_PROJECT_SECRET=

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

  yarn dev

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.

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.

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

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

    NEXT_PUBLIC_ETHEREUM_NETWORK=rinkeby
    NEXT_PUBLIC_INFURA_PROJECT_ID=
    NEXT_PUBLIC_INFURA_PROJECT_SECRET=

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

• Install project dependencies

  yarn

• Start the app

  yarn dev

• Navigate to Notifications demo

  http://localhost:3000/notifications

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

• 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

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

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

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

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

Go to https://faucets.chain.link/rinkeby, connect your wallet, and then request the test ETH be sent to your account

Note that if you previously sent test ETH to your wallet on the Ropsten network, it will not be available to you on the Rinkeby network.

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 rinkeby network for this example so you can preview your minted nft on OpenSea Testnets.

   #.env.local
   
   # Minting Variables
   WALLET_MNEMONIC=
   NEXT_PUBLIC_MINTING_ETHEREUM_NETWORK=rinkeby
   NEXT_PUBLIC_MINTING_INFURA_PROJECT_ID=

   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 rinkeby

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

   #.env.local
   
   # Minting Variables
   WALLET_MNEMONIC=
   NEXT_PUBLIC_MINTING_ETHEREUM_NETWORK=rinkeby
   NEXT_PUBLIC_MINTING_INFURA_PROJECT_ID=
   NEXT_PUBLIC_SMART_CONTRACT_ADDRESS=

In your terminal, run

yarn dev

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

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.

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