A First Look at Avalanche
Anthony Campolo demonstrates deploying a smart contract on Avalanche using QuickNode and integrating it with a React frontend hosted on Netlify
Episode Description
Anthony Campolo walks through deploying a Hello World smart contract on Avalanche's Fuji testnet using QuickNode, Hardhat, and a React frontend.
Episode Summary
In this inaugural QuickNode Quick Stream, developer advocate Anthony Campolo demonstrates how to build and deploy a simple Hello World smart contract on the Avalanche blockchain's Fuji testnet. He begins by introducing Avalanche as a proof-of-stake blockchain built on Cornell research, highlighting its speed and environmental advantages over proof-of-work chains. The walkthrough covers configuring MetaMask for the Avalanche network, obtaining test funds from the Fuji faucet, and setting up a development environment with Vite, Hardhat, and Ethers.js. Campolo writes and tests the Solidity contract in the Remix IDE before compiling and deploying it through Hardhat using a QuickNode endpoint. He then builds a React frontend that reads the contract's greeting message and allows users to update it by signing a transaction through MetaMask. The session wraps up with deploying the finished application to Netlify, demonstrating the full lifecycle from smart contract creation to a live web app. Throughout, Campolo emphasizes practical details like managing private keys with environment variables and leveraging Avalanche's C-Chain compatibility with Ethereum tooling.
Chapters
00:00:00 - Introduction to Quick Streams and Avalanche
Anthony Campolo introduces himself as a developer advocate at QuickNode and explains the purpose of the new weekly Quick Streams series. He mentions upcoming guests and sets the stage for today's topic: connecting to Avalanche using QuickNode, timed with their new Avalanche support launch.
He provides context on QuickNode's multi-chain philosophy and gives a brief overview of Avalanche as a proof-of-stake blockchain rooted in Cornell research. He outlines its architecture, including its three interconnected chains and the Snow family of consensus protocols, and explains that the session will focus on the C-Chain for smart contracts.
00:03:25 - QuickNode Dashboard and MetaMask Configuration
Campolo walks through the QuickNode homepage showing the supported chains, documentation, and RPC methods available for Avalanche. He highlights the blog post announcing the Avalanche partnership and shares his own tutorial as a guide for the session.
The focus shifts to configuring MetaMask for the Avalanche Fuji testnet by manually adding network details including the RPC URL, chain ID, currency symbol, and block explorer. He also adds the Avalanche mainnet configuration and then uses the Fuji faucet to request test AVAX tokens, which appear in the wallet shortly after.
00:08:22 - Project Setup and Smart Contract Development
Campolo scaffolds a new React project using Vite and installs dependencies including Hardhat, Ethers.js, and dotenv for environment variable management. He creates the project structure with folders for the contract and deployment script, and emphasizes the importance of keeping private keys out of version control.
He introduces the Solidity Hello World contract, first testing it in the Remix IDE to verify its read and write functionality. The contract stores a greeting message that can be read with a hello function and updated with a set hello function, providing a straightforward example of smart contract interaction.
00:13:46 - Compiling, Deploying, and Verifying the Contract
The Hardhat configuration file is set up with the Solidity version, artifact paths directed into the React app's source folder, and the Fuji network details pulling from environment variables. Campolo retrieves his QuickNode endpoint and MetaMask private key, taking care to keep them off screen.
After compiling the contract into an ABI using Hardhat, he deploys it to the Fuji testnet and stores the resulting contract address in the environment file. He verifies the deployment by checking Snow Trace, the Avalanche block explorer, where the newly created contract is visible with its transaction details.
00:18:07 - Building the React Frontend
With the contract live, Campolo builds a React frontend that connects to it using Ethers.js. The app imports the contract's ABI from the artifacts folder, checks for MetaMask as the provider, and calls the hello function to display the stored greeting message on the page.
He then adds write functionality with an input field and button that calls the contract's set hello function, which triggers a MetaMask transaction signing prompt. After confirming the transaction and waiting for verification, the updated greeting appears in the app, demonstrating the full read-write cycle.
00:23:22 - Deploying to Netlify and Wrap-Up
Campolo creates a Netlify configuration file, initializes a Git repository, and pushes the project to GitHub using the CLI. He imports the repo into Netlify, adds the contract address as an environment variable, and deploys the site, which builds quickly thanks to Vite.
Once live, he demonstrates the deployed app reading the current greeting and successfully updating it through a signed transaction. He shares links to the project repository and QuickNode resources, and closes by previewing next week's stream with a guest from the Astro team.
Transcript
00:00:27 - Anthony Campolo
Hello everyone. My name is Anthony Campolo and this is the first of our new weekly Quick Streams that we'll be doing here at QuickNode. I am a developer advocate at QuickNode and I'm really excited to do this because I've been doing lots of live streams and things like this for a while, but this is going to be my first one now for QuickNode, which is a fairly new position for me. I've been here for about a month and a week or so. This is going to be the first of a long series. This is just going to be me today, but we'll have guests as well. I think next week we're going to have Ben Holmes from the Astro team with us, that'll be really fun. Today we're going to be learning about Avalanche and how to connect to it with QuickNode because this week we launch our Avalanche support. A little context for anyone who doesn't know anything about QuickNode or this whole Web3 blockchain world: there are various different blockchains, some of which are fairly well known like Ethereum, a lot of people know that one. And then there's other up and coming ones like Avalanche or Solana.
00:01:35 - Anthony Campolo
We at QuickNode really believe in the multi-chain future. We think that giving developers the ability to work with whichever chains they want and then connect them all together is what is going to enable us to really grow this ecosystem. Avalanche is a really interesting project because it is based on a lot of academic research from Cornell and it is meant to be faster, cheaper, and more environmentally conscious than things like Ethereum which use proof of work. It has its own new consensus algorithms that are part of the Snow family and they have a really interesting architecture with three separate chains that are all kind of connected to each other to create one larger one. Today we're going to be looking at how to connect to the C-Chain, which is for smart contracts. A smart contract is just some code that lives on the blockchain that we can query and execute commands and methods and things like that. It's going to be a very simple exercise. We're just going to be deploying a Hello World smart contract that just says hello back and then you can set a different hello message.
00:02:50 - Anthony Campolo
So it should be good for anyone who's never done any of this Web3 stuff because it is different from Web2. I came from the Web2 world before doing all this and was really familiar with things like React and other frontend JavaScript libraries and Node and all that. We'll be using Hardhat, which is a Node development environment, and then that will be deploying a smart contract which will then be queried from a React frontend. I think that's enough preamble. I'm going to go ahead and share my screen now so that we can get going.
00:03:31 - Anthony Campolo
If we check out our homepage here, we have different places for all of our chains. Here we see we got 13 right now and Avalanche is the newest one. This is a little bit of information about it. There is the mainnet and then there's the testnet for Fuji. Fuji is what we'll be working with today. And then they have some add-ons: archive mode, trace mode, and then the Avalanche client that is supported. Now if we then look at the documentation here, this is the RPC overview and these are the methods that let us access the blockchain. We see over here we got a bunch of different methods and this is not something we have to worry too much about because we're doing just a simple little Hello World application. Then here we have a blog post that announces this new partnership. Feel free to give this a look if you want to check that out. Then I will be going off of a blog post here that I've written called "A First Look at Avalanche." Avalanche is an open-source proof-of-stake blockchain with smart contract functionality that uses the Snow family of consensus protocols.
00:04:51 - Anthony Campolo
And then we have a section for configuring our MetaMask wallet, creating our project, deploying our Avalanche node, and then creating our React app. This gives you a little information about the different chains and we'll be working with the contract chain specifically. There's a nice little diagram for you. Then this link here is not going to go anywhere yet because we are going to build this. This is the test. This is what we will eventually build.
00:05:25 - Anthony Campolo
Let's first configure our wallet. If we go to MetaMask here and you just have a new blank wallet, you'll only see the Ethereum mainnet. We need to give the information for the RPC. If we check out here, we're going to go to add a network and we have five pieces of information we need to add. There's the network name, and this is for Fuji. Then there's the RPC URL and we have a couple extra things here which are actually specifying the chain, and we'll talk about that more once we check out our QuickNode endpoint. Then we got our chain ID, and then the cryptocurrency symbol, which is AVAX, and then the Explorer. This is like Etherscan, if you know what that is. Then once we save that, we see the logo changes to the Avalanche logo. Now, we're not going to use this for this example, but let's go ahead and include the actual Avalanche mainnet as well.
00:06:51 - Anthony Campolo
Let's add this and then RPC URL, chain ID, currency symbol, and then Explorer.
00:07:06 - Anthony Campolo
Now that we got that set up, we need to actually get some funds into our wallet. The way we do that is with the Fuji testnet faucet. If you've ever used like a Ropsten faucet or something like that, this is a similar idea. We're going to copy our address, include it here, let them know that we are not a robot.
00:07:35 - Anthony Campolo
And then request 10 AVAX. That may take a second for that to actually go through, but as soon as that goes through, we will see it appear in our wallet over here. And there we go, there is our 10 AVAX. Okay, so now we got funds in our wallet, that is all good. Now we're going to actually create our project. We're going to be using Vite to create a React boilerplate project. This is just going to generate a boilerplate React app for us. And then we're going to add our dependencies. Our dependencies are going to include dotenv. This will let us use environment variables for things like our endpoint and our private key. This is really important that you use environment variables and then make sure not to commit those. So we'll also be creating an .env file and then adding it to the .gitignore. We have dotenv, we have Hardhat, which is our smart contract development environment. This is going to give us the tooling to deploy the contract. Ethers is a library that gives a JavaScript abstraction on top of blockchain and specifically Ethereum.
00:08:58 - Anthony Campolo
But it can also be used for Avalanche because Avalanche's C-Chain is essentially equivalent to something like Ethereum for writing smart contracts. We're using Solidity. We're doing all the same things that we would do if we were interacting with the Ethereum blockchain. And then hardhat-ethers, which is another library that integrates the two together. We're going to add all those dependencies. Now we're going to create two folders, one for our contract and then one for our deployment script. The contract is going to be our Solidity Hello World file. And then our script will be deploy.js, and then we'll also have a Hardhat configuration file as well. Now this is going to create our .env file with a couple different environment variables: QuickNode URL, private key, and then contract address. This is prefixed with VITE_ because that is what's going to let Vite know we want to expose this to our frontend client. And then this will add that .env to our .gitignore. So when we create a git repo and push this up, it will not include our private keys. Now we got our project set up, so the first thing we're going to do is include our smart contract.
00:10:22 - Anthony Campolo
Now for our smart contract, if we want to verify this works before we start getting involved with all the Hardhat stuff, we can go to the Remix IDE and this will be a nice little sanity check just to make sure that this works for us. We can create a contract here and call it HelloWorld.sol. Save that over here. We want to make sure this matches our Solidity version. Then we'll compile it. Once we've compiled it, then we can actually deploy it. When we deploy it, we want to include a message that's going to go along with the contract. Let's say "Hello from QuickStream." Deploy. Here is our deployed contract. We can see the message by clicking hello here and there's our message "Hello from QuickStream." If I want to say "Hello from the Stream," set that, hit hello, and we see it's changed. So this is our basic read-write functionality. If we just look at what we have here, we're first declaring our contract which is called HelloWorld. We then have a string which is helloMessage, a constructor which is going to take a string parameter and whatever string we feed it will set it to helloMessage and also console.log it at the same time. If you look over here, you can see there's console logs. Then we have two functions. There's the hello function which just returns the helloMessage, and then there's the setHello function which will take a parameter and then set whatever the input is to the helloMessage.
00:12:22 - Anthony Campolo
That's our whole contract. Now the next thing is going to be our deployment script. Our deployment script is going to have a getContractFactory. What this does is you feed it the name of your contract, which is HelloWorld, and then we set that to a variable helloWorldFactory. Then we await it and use the deploy and feed it the hello message. That's the same thing that we did over here. When you deploy it, you can deploy it with a message so it can set something. Otherwise, if you wanted to, you could start by setting this to something. But this is going to just let us set it as we deploy it. Then we console.log our contract address. When we actually deploy it, it'll just give us back our address and then we'll feed that back into our project. Then also console.log the signer for the contract. Go ahead and save that. Now we've got our Hardhat configuration. These are the only three files we're going to need to get our smart contract deployed. It's a very small amount of code if you think about it, which is really nice because this stuff can be pretty complicated.
00:13:46 - Anthony Campolo
It's great that there's really built-out developer tooling that makes this really easy. We set the Solidity version and then the path for the artifacts. The reason we specify this is because we want the artifacts to end up inside of our React application instead of just in our root project. Then we set the network. The network is going to be Fuji, then there'll be a URL, account, and chain ID. Now this is where we have to go grab some private information and put it in our .env file. I already have a QuickNode endpoint set up.
00:14:24 - Anthony Campolo
Let's see, which one is it on? Let's try this one. All right.
00:14:33 - Anthony Campolo
So this is going to be our endpoint and if we went through the process of creating one, we would select Avalanche here, Fuji Testnet, and then you can set it up. There is a fee for it, but if you sign up, you get a seven-day free trial so you can play around with it and then just cancel it afterwards if you just want to get a feel for it. And then once you actually have it deployed, you will have an HTTP provider with the endpoint. I'm not going to show everything because at the end it has a private key associated with it. So we're going to grab this whole thing and then we're also going to include a little information at the end. When we put it in there, we want to make sure to include /ext/bc/C/rpc at the end of the endpoint and that's what lets it know that we want to go to the C-Chain specifically. Then you'll also want to grab your private key. If we look at account, we can check out our account details and then you'll input your password and they'll give you back your private key.
00:15:45 - Anthony Campolo
I'm going to hop off stream so I can do that and then I'll go ahead and grab my private key along with the endpoint. Just bear with me one second as I do this. If there's anyone out there watching, feel free to say hey. This is always a challenge to make sure you don't show any keys.
00:16:50 - Anthony Campolo
Okay, I think I got everything. Should be good. Cool, back to screen sharing.
00:17:07 - Anthony Campolo
Okay, now we've got that set up. We're going to run yarn hardhat compile, which is going to take our smart contract and compile it into an ABI, an application binary interface, and that's how we're actually going to interact with the contract. Now we're going to run yarn hardhat run scripts/deploy.js and then we're going to pass a network flag and specify that we're deploying this to the Fuji network. Hopefully that all goes according to plan and then we'll get our contract. Great. So now we got that, we're going to include that in our .env as well. I'll hop off one more time to do that.
00:17:53 - Anthony Campolo
Save that there, and then share the screen again.
00:18:07 - Anthony Campolo
And then you can also check it out on SnowTrace. This is like Etherscan, so if you just put that there, you can now see this contract that has been deployed 40 seconds ago, contract creation. You can check out details about the contract. As you can see, I've run through this a couple times already. Now we got our contract deployed, we can start interacting with it with our React application. Let's go ahead and copy this whole thing here. Go to App.jsx. Then this is just some default styling we'll include in our HTML. Once we got that, to actually start our development server, we'll run yarn dev and then this will kick off our server on localhost:3000. Open that up. And here is our little project. Let's take a look at the code and see what's going on here. We have a contract address which is being set to our environment variable and we're importing the HelloWorld contract from the artifacts folder. This is what I was saying, we had to specify this to go into the src folder. And then we are doing a useState and having a hello and then setHelloValue.
00:19:39 - Anthony Campolo
So this is a React-ism. It's just a way that we can set the state if we want to change it. We will request the Ethereum provider, basically just request to see what the provider is. This is to check for MetaMask and then that sets the provider. Then we feed in the contract information which includes the contract address, application binary interface, and then the provider. Once you've got all that, you can call the hello function and then set it to this data object, and then that data object we set to our hello state variable and display it here. Now if we open up this here and we click that, then we see "Hello from AJC WebDev" and our contract address. So that's great, we got our contract set up. The next thing we want to do is give ourselves the ability to change this. We have a function here which is going to be setHello. It's doing a similar thing, but now we also need to sign the transaction. When we try and do this, it's going to have the MetaMask wallet pop up and say, hey, you need to sign this. Then we're going to include an input that will set the hello state and when we click it, it will run the setHello function that we created here.
00:21:21 - Anthony Campolo
With all of that set up, we can change this to "Hello from Stream." We see this little popup. First we got to connect the account. So let's do that.
00:21:46 - Anthony Campolo
So now we're connected. Let's try that again.
00:21:53 - Anthony Campolo
And confirm transaction. This will take a second to verify. We'll see here it says pending. Once it is no longer pending, then we will see the message appear in the console. All right, and there is our new greeting. We've got our contract set up, we've got our buttons and inputs in our React app. This is a pretty crude way of doing this because every time you change this, it's changing here. There are cleaner ways to do this, but just for the sake of this demo, this is a nice easy way to see what is going on. Now that we got all of that, we can actually deploy this to the internet as well. If you think about the things that we needed our private key and endpoint for, we're basically just deploying the smart contract and now the smart contract is out there in the world. That's the only information we really need for our application to continue functioning. So we're going to create a netlify.toml and this is going to allow us to give our build steps. This is going to set the build command to yarn build and then the publish directory to dist.
00:23:22 - Anthony Campolo
This is going to build a static site that is then going to be pushed up to Netlify and then it will give us back a URL. Now we're going to initialize our git repository. We'll do init and then make sure that your .env is not listed. That's good. We'll add that, commit, and just make sure this works.
00:23:58 - Anthony Campolo
That will push us up. This is using the GitHub CLI. You could also do this just by going to repo.new and creating it from the UI. And if we go visit this here, you can see this was just pushed up 24 seconds ago. Now we got that going. We're going to go to netlify.com and then log in.
00:24:34 - Anthony Campolo
We're going to import an existing project, connect to GitHub, and then search for the Avalanche repo. Now we have our build command and publish directory already set up. If we go to show advanced and new variable, this is where we can include our contract address. We want to make sure that we have VITE_CONTRACT_ADDRESS in all caps, and then we want to grab our contract address from back here. And then deploy site. While that is building, we can go to our domain settings and then add a custom domain. There we go, we're going to set this to "ajc-webdev-avalanche." This doesn't take too long to build because Vite is nice and speedy here. Building out deployment. And it's live.
00:25:53 - Anthony Campolo
Let's check out our site here. Moment of truth. Click this. "Hello from the Stream." You see, it says the same thing that it said after we changed it, not the original message, because it's the same contract that we were working with. It's always going to be in whatever state you left it in. Now we're going to say "Hello from Netlify" and it will ask us to verify. Make sure to connect and confirm. And that should do it.
00:26:52 - Anthony Campolo
Great. It takes a little while to actually go through. Okay, so now this is the whole demo. We got our smart contract deployed to the Fuji testnet, we've got a React application with the Ethers library to interact with it, and then we have deployed it to Netlify. I'll go ahead and grab some of these links now. We're eventually going to start having some repos that will be official QuickNode repos. These links will likely change in the near future and end up on our actual GitHub account. But for now, you can check this out here. Feel free to check us out on quicknode.com if you want to see more or if you want to create an account. And then we are on Twitter as well. If you want to find me, you can just go to ajcwebdev. That is me. Thanks so much everyone for watching. We'll be coming back next week. I think it will be possibly Wednesday instead of Thursday, but just keep an eye on the QuickNode Twitter and you can see when that will be coming out.
00:28:13 - Anthony Campolo
Thanks so much for being here and I'll see you next week.