- Sample Project 1 - Send Transaction
- Sample Project 2 - IPFS
- Sample Project 3 - Notifications
- Sample Project 4 - Minting an NFT
Getting Started with Infura 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 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 Goerli testnet.
Install dotenv:
npm i dotenv
Setup your .env file:
# Send Transaction Variables
NEXT_PUBLIC_WEB3_TEST_ETHEREUM_NETWORK=goerli
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_PROJECT_ID=[Your IPFS Infura Project ID]
NEXT_PUBLIC_INFURA_IPFS_PROJECT_SECRET=[Your IPFS Infura Project Secret]
# Minting Variables
WALLET_MNEMONIC=
NEXT_PUBLIC_MINTING_INFURA_PROJECT_ID=[Your WEB3 Infura Project]
NEXT_PUBLIC_SMART_CONTRACT_ADDRESS=[The hash of the deployed contract on goerli]
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.
# 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
goerli
NEXT_PUBLIC_WEB3_TEST_ETHEREUM_NETWORK=goerli NEXT_PUBLIC_WEB3_INFURA_API_KEY=[Your WEB3 Infura Project]
-
Install and setup a Metamask account, switch network to
goerli
-
Install project dependencies
yarn
-
Start the app
yarn dev
-
Navigate to Notifications demo page
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 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
-
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/
, andtruffle-config.js
already in the project structure. -
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 goerli network for this example so you can preview your minted nft on OpenSea Testnets.
# Minting Variables WALLET_MNEMONIC= NEXT_PUBLIC_MINTING_INFURA_PROJECT_ID=[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.
-
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. ThetokenCounter
will act as the ID and the contract will increment the counter as new NFTs are minted. -
In your terminal run
truffle compile
This will add a
build/
folder to the project structure (do not delete) -
Migrate the smart contract onto the chain by running
truffle migrate --network goerli
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_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