How to Offset Your NFT Project Carbon Emissions with Aerial

import medium from "../../assets/medium.png"; import OutLinkButton from "@/components/common/OutLinkButton"; As a believer in NFTs and Web3, I am always ecstatic to see what can be done with this new technology. I get bullish over new projects, experimental ideas, and cutting edge utility (especially when it’s something we make at Pinata like Submarine.me). However, I don’t look at this Metaverse with rose colored glasses. There are many imperfections in this space, and one of the worst ones is environmental impact. While I love dooting around on my computer, I also love the outdoors. I love hiking, seeing mountains, hearing rivers, and smelling wildflowers. I love hearing birds in the morning and geese at night. I love to watch my son experience nature and get excited over a butterfly. So yeah, it kinda kills me to think of how this wonderful industry of crypto can harm this amazing planet. !image> The energy consumed by proof of work blockchains is staggering. It’s no secret, and if we want to enjoy this planet we need to accept it. I know I feel defensive when someone attacks something I enjoy, but it helps to take a deep breath and ask the big questions: “could I be wrong?” If crypto is putting the planet in danger, what do we do? It might sound easy to just throw Web3 out the window and call it a day, but as with most technological advances, the cat is out of the bag. There’s no putting the lid back on Pandora’s box. In my opinion, there is no easy fix to this problem. There will be a need for multiple approaches to help offset our carbon footprint, including but not limited to better blockchain mechanisms and organizations that pursue renewable energy and conservation. This is where Aerial steps in. Aerial is a sustainability platform that helps users track their carbon footprint and make donations to help offset their carbon footprint. They are known for their beautiful mobile application, but more recently they have developed an API that can track and estimate the carbon footprint of NFT projects and crypto! Per their website, “Emissions are calculated based on the energy consumption of the Ethereum network and the average gas used per transaction.” Since Pinata is the home of NFT media we want to always support initiatives like this to make NFTs more sustainable! They have some awesome and simple ways you can integrate their widget to your website that looks something like this: !image> In this post we’ll take their API a step further and build our own custom widget. We can use it in our frontend website that displays more details about the project’s emissions with the goal of making visitors more aware! If you want to follow along for this tutorial, you’ll need to have npm installed and be familiar with a frontend framework like React. First thing we’ll do is create a new React app and CD into it. Then we’ll delete the CSS files and boilerplate so we are left with this in App.js Now let’s make a new component. Create a new file in the src folder called Aerial.js and fill it with this starter code Now let’s import the new component to our App.js If you run npm start you should see your basic app with “Aerial” in the top left! Now that we have our new component ready to go, we need to start making some API calls and fetching the data. If you need a reference for how to use Aerial’s API you can see their reference here. It’s really quite easy, all we have to do to fetch some basic data is use the following format This will return data in the following format So let’s give it a shot! First thing we need to do is install Axios to help us with our API calls. Go back to the terminal and run Now make sure to import it into the top of our Aerial component like so Now we’re going to make a quick function that will get the data. For our example we’re going to use the NFT contract address 0x2acab3dea77832c09420663b0e1cb386031ba17b. To run this function we’ll use the useEffect hook to fetch the data as we load the app. To do that we simply need to import it at the top like so Then we need to run the function inside useEffect, This is what our code will look like with everything in place: If we run the app and check the dev console, we can see our data! !image> Now that we have the data, it’s as simple as displaying it so users on our website can see it! To store the data we’ll import the useState hook at the top of our app along with useEffect Then right above our function to grab the data, we’ll declare our state variable as an empty array where we can push stuff in later. Now all we have to do is edit our function just a little bit to push that data into our state using the “setEmissionsData”! Here is our function now The next thing we’re gonna do is create two components inside our file, one as a loading indicator, and the other as the data we want to display. To do this we’ll just make two more functions like this To switch between the two we’ll create a new state called “isLoading” right underneath our previous state. We’ll set the default value to “false” for now Back in our getEmissionsData function we need to turn the “loading” on when we start the request, and then off when we’re done. Finally, way down at the bottom where we render the whole app, we’ll add in some conditional rendering to say “display the loading component while loading, then display the data component when not loading.” As a quick recap this is what our component looks like at the moment Ok now the good part! Time to parse that data and display it. We’re going to go over a few of the pieces of data and how you may want to display them. The first is the CO2 emissions, which the API returns as a raw number in the unit of Kg. The best way to make this number manageable in my opinion is to round up the number, and use some javascript to add the commas for each three digits. So back in our emissionsComponent, I have declared the following variable from our saved state. Next up is the gas used for this project, and for this one it returns a whole number so no need to round it up. We’ll just format it to be readable. Aerial of course also provides their unit for donations to offset the carbon emissions they call “credits.” The API can return the total credits need to make the NFT project carbon neutral, how many are purchased so far, and how much it would cost in total to offset the project in USD. To make this data more readable, we want to display how many credits have been purchased, how many are needed to offset, and how much it would cost to completely offset the project. We just need a little math to make that happen! For the credits remaining, we just need to subtract the credits already purchased from the total credits needed to offset like so. Of course we want to display how many have already purchased and that’s pretty simple. Now the more complicated part is calculating how much the remaining cost is. The API gives us the total cost, but it does not include how much has been spent. So for us to get this number we need to divide the emissions cost with the total credits needed to offset, then multiply that against the total emissions credits minus the credits already purchased. In the end it looks like this! Lastly, we want the number of total number of transactions already offset. Alright that was a bit of work to get sorted, but now we can easily plug this into our emissionsComponent so people can see the data in a more easy to read format. We’re also going to display this in a nice grid with each data cell in a box, so our code inside emissions is going to look like this. At the bottom we’ve also added a button where a user can click on it and be directed to Aerials page for that particular NFT project, where they can make purchase credits to help offset that project. To make this whole component feel clean as well as themed for the project, we took some colors and styled from DeadFellaz and added it to this page with some CSS; we also added a fun Lottie animation for the loading component instead of just a header that says loading. In the end our code looks like this! Here is a quick preview of our final project !gif You can actually view the working component live here, and you can freely download the repo on GitHub! If you wanted to take this step further you can request an API key from Aerial to use their offsetting endpoints. These let you not only fetch the data, but also provide a way to make a payment for the credits with Stripe or even Coinbase if you have merchant accounts with both of them! In the end it will always be a little easier to redirect users to Aerial.is to make those credit purchases, but I still love that Aerial has made this an option. Aerial’s API is a great way to display emissions for Ethereum projects and help offset them, however if you are still working on your NFT project there are some simple steps you can take to help offset emissions before you launch! One of the best things you can do is select a proof of stake blockchain like Solana, Tezos, Flow, or Polygon to create your NFTs on. You can read more on the difference between proof of work and proof of stake blockchains here, but essentially the amount of energy is significantly lower on proof of stake chains because of how they verify transactions. If you do choose Ethereum there are a lot more gas friendly smart contracts being developed such as ERC-721A by Azuki or ERC-1155D. You can also consider changing how many NFTs you mint for a project. 5,000 to 10,000 is a really popular number, but as Solana has proven you don’t need that many to have a successful project. If you’re doing a much smaller 1/1 project you can even consider using lazy minting. However, if your Ethereum contract ends up putting out emissions, you can offset them fr