Build a fullstack decentralized forum powered by Polygon!

<h3>Welcome 🎉</h3><image src="https://gcyrkvfwpvlwjrrklxnh.supabase.co/storage/v1/object/public/tutorials/afd1d505-ea1a-4297-a91c-92d572adb365/tutorial_i7e1W7RQ0PXTNzT9DxeZQ" uploadmode="upload"></image>We're excited to partner with our friends at <a target="_blank" rel="noopener noreferrer nofollow" class="link link link link" href="https://polygon.technology/">Polygon</a> to bring you this in-depth guide on building a web3 forum using the polygon network. Let's get into it :)<h3>Objective</h3>To us at Pointer, one of the most interesting aspects of web3 is that it facilitates developers to build and share composable behaviors around databases.Anyone can dig up a smart contract on GitHub, deploy it, and have their own microservice running in seconds.Not only that, but the stable API exposed by a smart contract is a blank canvas on top of which any frontend developer in the community can build and share components.In that spirit, today we're going to build a deployable smart contract and an accompanying React component to add comment threads to your apps.In theory this could be open sourced and published as an npm package to allow any developer to quickly add a forum to their app.Here's what we're aiming to build.<image src="https://gcyrkvfwpvlwjrrklxnh.supabase.co/storage/v1/object/public/tutorials/afd1d505-ea1a-4297-a91c-92d572adb365/tutorial_mYS7gkIKHp7jkLIF527JX" uploadmode="upload"></image>By adding comment threads such as this around our app we can let our users have conversations anywhere about anything!We think the following will make for a nice developer experience.<pre filepath="" data-show-line-numbers="false" showcopybutton="true" data-line-highlights="[]"><code class="language-tsx">const App = () =&gt; {
 return (
 &lt;Comments topic="my-blog-post" /&gt;
 )
}</code></pre>With this we'll be able to quickly drop in a <code class="inline-code">Comments</code> component wherever we wish to let users converse about some topic!<h3>Feasibility</h3>Whenever we're building a dapp we have to consider the feasibility of what we're trying to do given the current state of the web3 ecosystem.If we're doing a lot of write operations or we need close to real time network speeds, then we should probably step back and question whether blockchain technologies are appropriate for our use-case.It's important to remember that reading data from the blockchain is free, but writing data to it incurs a fee. This means users would be able to view comments for free, but writing their own would cost them.At the time of writing, Ethereum is still painfully slow and expensive. If we were to build this forum on top of Ethereum Mainnet, then we'd be expecting users to pay ~$5 USD to submit a comment and we'd see loading times upward of 15 seconds.Thankfully <a target="_blank" rel="noopener noreferrer nofollow" class="link link link link" href="https://polygon.technology/">Polygon</a> offers various scaling solutions on top of Ethereum that can save us here. Using Polygon our users will be able to post a comment for only ~$0.002 USD and we'll see loading times closer to ~2 seconds!<h3>About Polygon</h3>Formerly known as the Matic Network, Polygon provides several diverse scaling solutions that allow developers to build their own Ethereum-compatible blockchains. These solutions offer varying degrees of improvement to transaction speeds, transaction costs, and security when compared with the Ethereum blockchain.In this sense, it's insufficient to think of Polygon as just a blockchain, rather it's an SDK used to quickly create blockchains customized to a developer's needs. However by design Polygon blockchains are able to communicate with each other and with Ethereum.Broadly, Polygon supports creating two types of chains, standalone and secured. Standalone chains implement their own consensus layer whereas secured chains leverage Ethereum's consensus layer.When it comes to Polygon's communication with Ethereum, Polygon offers two options, a Proof of Stake (PoS) bridge and a Plasma bridge. The plasma bridge offers increased security however with that bump comes some restrictions on tokens and hefty withdrawal periods of 7 days. It is recommended that most developers use the PoS bridge for the transfer of data between Polygon/Ethereum chains.Though Polygon offers many advanced features for developers, we're just going to use one of its public blockchains, the Mumbai Testnet (chain id 80001), to which we'll deploy the smart contract we build together.If you'd like to read more about Polygon, we recommend <a target="_blank" rel="noopener noreferrer nofollow" class="link link link link" href="https://limechain.tech/blog/polygon-blockchain-scaling/">this article</a>.<h3></h3>

Overview

Before we start building, let's get set up!First, please clone the <a target="_blank" rel="noopener noreferrer nofollow" class="link" href="https://github.com/pointer-gg/comments-with-polygon">starter repo</a> and install required dependencies.<pre filepath="terminal"><code class="language-bash"># Clone repo and check out starter branch
git clone https://github.com/pointer-gg/comments-with-polygon.git --branch start

# Change to the newly created directory
cd comments-with-polygon

# Install project dependencies
npm install</code></pre><callout color="pink">Double check your branch!Please ensure you're on the <code class="inline-code">start</code> branch before beginning the tutorial. The <code class="inline-code">main</code> branch shows the final state of the code that you should have upon completing the tutorial.</callout>You'll also want to make sure you've installed the <a target="_blank" rel="noopener noreferrer nofollow" class="link" href="https://metamask.io/download/">MetaMask extension</a> and have a MetaMask account. If you'd like, see our prior tutorial <a target="_blank" rel="noopener noreferrer nofollow" class="link" href="https://www.pointer.gg/tutorials/Setting-Up-Your-Wallet">Setting Up Your Wallet</a> for more details on this.For this project we'll be using a few interesting npm packages:<ul><li><a target="_blank" rel="noopener noreferrer nofollow" class="link" href="https://chakra-ui.com/docs/getting-started">chakra-ui</a> - a component library that makes it quick and easy to build apps</li><li><a target="_blank" rel="noopener noreferrer nofollow" class="link" href="https://react-query.tanstack.com/">react-query</a> - a popular async state management library</li><li><a target="_blank" rel="noopener noreferrer nofollow" class="link" href="https://github.com/tmm/wagmi">wagmi</a> - a collection of React hooks to help us do web3 things</li><li><a target="_blank" rel="noopener noreferrer nofollow" class="link" href="https://www.npmjs.com/package/@davatar/react">davatar</a> - an avatar component for web3</li></ul>We'll walk you through each one as we go and show you how to use them in combination to write some awesome dapps.

Setup

Alright, now that we're set up, let's approach the backend first and think about our contract API.<h3 id="api-design">API Design</h3>We'll need a data structure to represent comments which should include:<ul><li>An id</li><li>The topic to which the comment belongs</li><li>A message</li><li>The creator</li><li>A timestamp</li></ul>Our UI will also need a few different things:<ul><li>A way to fetch a list of comments for a specific topic</li><li>A way to add a new comment</li><li>A way to receive updates about comments that have been added</li></ul>Translating this to an API we're looking at something like the following<pre filepath="API Mockup"><code class="language-solidity">contract Comments {
 // Exposed data structure
 struct Comment {
 uint32 id;
 string topic;
 address creator_address;
 string message;
 uint256 created_at;
 }
 
 // Notify users that a comment was added 
 event CommentAdded(Comment comment);

 // Fetch a list of comments for a topic 
 function getComments(string calldata topic) public view returns(Comment[] memory) {}

 // Persist a new comment
 function addComment(string calldata topic, string calldata message) public {}
}</code></pre><details class="details"><summary>More on solidity types</summary><div data-type="detailsContent">If this is your first time seeing solidity code, let's break this down a bit.As with many languages, solidity provides a keyword <code class="inline-code">struct</code> that allows the user to create their own complex data types. We're using struct to create a data type <code class="inline-code">Comment</code> with a variety of fields.You may have noticed we use two different integer types within our struct, <code class="inline-code">uint32</code> and <code class="inline-code">uint256</code>. Solidity supports many signed and unsigned integer types each with a varying numbers of bits, for example <code class="inline-code">int8</code>, <code class="inline-code">int32</code>, <code class="inline-code">int256</code>, <code class="inline-code">uint8</code>, <code class="inline-code">uint32</code>, <code class="inline-code">uint256</code>. Because the <code class="inline-code">number</code> type in javascript can only accurately represent numbers that have up to 53 bits, any number types in solidity with a number of bits higher than 53 will be deserialized in javascript as a special number class, <code class="inline-code">BigNumber</code>, which is designed to accurately store and do arithmetic on extremely large numbers. By making the comment id a type of <code class="inline-code">uint32</code>, we won't have to deal with the <code class="inline-code">BigNumber</code> type in our javascript code since javascript's native numbers can accurately represent a number with only 32 bits. One thing to note is that gas fees can vary depending on the number type you choose, though it's not always as simple as fewer bits translating to smaller gas fees.<code class="inline-code">address</code> is another type very commonly used in solidity and is used to store 20 byte blockchain address values which you'll often see with the form <code class="inline-code">0x1234567891234567891234567891234567891234</code>.Lastly, you may have noticed we use two keywords in our interface code, <code class="inline-code">calldata</code> and <code class="inline-code">memory</code>. There are three keywords in solidity that direct how values should be stored in the executing environment.<ul><li><code class="inline-code">storage</code> - stores the value indefinitely on the blockchain</li><li><code class="inline-code">memory</code> - stores the value only for the duration of the function being called</li><li><code class="inline-code">calldata</code> - like <code class="inline-code">memory</code> except a variable marked as <code class="inline-code">calldata</code> is immutable meaning its value cannot be changed (typically used for public-facing function parameters)</li></ul>When considering gas fees <code class="inline-code">calldata</code> is the most cost-effective option, then <code class="inline-code">memory</code>, and lastly <code class="inline-code">storage</code>.</div></details>Let's set up a local Ethereum environment with <a target="_blank" rel="noopener noreferrer nofollow" class="link" href="https://hardhat.org/getting-started/">hardhat</a>. Hardhat will enable us to run, test and deploy solidity contracts by means of running a local Ethereum network directly on our machine.To init a new hardhat project, run the following from the root of the repo.<pre filepath="terminal"><code class="language-bash">npx hardhat</code></pre>This command will show you three prompts to which you can respond as illustrated.<pre filepath="terminal"><code class="language-bash">✔ What do you want to do? · Create a basic sample project
✔ Hardhat project root: · /path/to/cloned/repo # should be populated by default
✔ Do you want to add a .gitignore? (Y/n) · n # we've already added one!</code></pre>This will init our project with several files/directories including <code class="inline-code">hardhat.config.js</code>, <code class="inline-code">contracts</code>, <code class="inline-code">scripts</code> and <code class="inline-code">test</code>.Please update the <code class="inline-code">module.exports</code> of <code class="inline-code">hardhat.config.js</code> to reflect the following.<pre filepath="hardhat.config.js"><code class="language-javascript">module.exports = {
 solidity: "0.8.4",
 networks: {
 hardhat: {
 chainId: 1337,
 },
 },
};</code></pre>This is a necessary step due to a <a target="_blank" rel="noopener noreferrer nofollow" class="link" href="https://hardhat.org/metamask-issue.html#metamask-chainid-issue">limitation of MetaMask</a> which assumes local chains to be using chain id 1337.<details class="details"><summary>What are chain ids?</summary><div data-type="detailsContent">Each blockchain network has a chain id to uniquely identify it. The chain id is used during the signing process and was added to Ethereum to prevent replay attacks across chains. Chain ids were introduced in <a target="_blank" rel="noopener noreferrer nofollow" class="link" href="https://github.com/ethereum/EIPs/blob/master/EIPS/eip-155.md">EIP-155</a>. A list of all chains ids can be found on <a target="_blank" rel="noopener noreferrer nofollow" class="link" href="http://chainlist.org">chainlist.org</a>.</div></details>Inside of the <code class="inline-code">contracts</code> folder please rename <code class="inline-code">Greeter.sol</code> to <code class="inline-code">Comments.sol</code> and replace its contents with our scaffolded API.<pre filepath="contracts/Comments.sol"><code class="language-solidity">//SPDX-License-Identifier: Unlicense
pragma solidity ^0.8.0;

import "hardhat/console.sol";

contract Comments {
 // Exposed data structure
 struct Comment {
 uint32 id;
 string topic;
 address creator_address;
 string message;
 uint256 created_at;
 }
 
 // Notify users that a comment was added 
 event CommentAdded(Comment comment);

 // Fetch a list of comments for a topic 
 function getComments(string calldata topic) public view returns(Comment[] memory) {}

 // Persist a new comment
 function addComment(string calldata topic, string calldata message) public {}
}</code></pre><details class="details"><summary>Not seeing syntax highlighting on your solidity code?</summary><div data-type="detailsContent">If you're using Visual Studio Code and you're not seeing proper syntax highlighting on your solidity code, try installing the <a target="_blank" rel="noopener noreferrer nofollow" class="link" href="https://marketplace.visualstudio.com/items?itemName=JuanBlanco.solidity">solidity extension</a>.</div></details><h3 id="tests">Tests</h3>Before we implement <code class="inline-code">getComments</code> and <code class="inline-code">addComment</code>, let's practice a little test driven development and write a simple test to assert their expected behavior.Inside of the <code class="inline-code">test</code> folder rename <code class="inline-code">sample-test.js</code> to <code class="inline-code">basic.js</code> and replace its contents with the following.<pre filepath="test/basic.js"><code class="language-javascript">const { expect } = require("chai");
const { ethers } = require("hardhat");

describe("Comments", function () {
 it("Should add and fetch successfully", async function () {
 const Comments = await ethers.getContractFactory("Comments");
 const comments = await Comments.deploy();
 await comments.deployed();

 expect(await comments.getComments("my-first-blog-post")).to.be.lengthOf(0);

 const tx1 = await comments.addComment(
 "my-first-blog-post",
 "my first comment"
 );
 await tx1.wait();

 expect(await comments.getComments("my-first-blog-post")).to.be.lengthOf(1);
 expect(await comments.getComments("my-second-blog-post")).to.be.lengthOf(0);

 const tx2 = await comments.addComment(
 "my-second-blog-post",
 "this comment is on a different thread"
 );
 await tx2.wait();

 expect(await comments.getComments("my-first-blog-post")).to.be.lengthOf(1);
 expect(await comments.getComments("my-second-blog-post")).to.be.lengthOf(1);
 });
});</code></pre>This test will cover our happy path use-case of fetching and adding comments to distinct topics.In this test we first fetch comments for <code class="inline-code">'my-first-blog-post'</code> and we expect none to exist since we've not yet added any comments to this topic. A natural next step is to try adding a comment.When we add a comment we await the function and are returned a transaction but this doesn't mean our comment was successfully added. We then have to await the transaction to be certain that our comment was mined and persisted to the blockchain.After we are certain it's been mined, we again fetch the list of comments for <code class="inline-code">'my-first-blog-post'</code> and we now expect there to be a single comment.Well it's probably smart to fetch comments for a different topic and make sure that the comment we just posted isn't somehow showing up for other topics as well. So we fetch comments for <code class="inline-code">'my-second-blog-post'</code> and expect there to be none.We repeat a similar process, this time adding a comment to <code class="inline-code">'my-second-blog-post'</code> and again ensuring the number of comments for each topic looks appropriate.If we're to run the test at this moment, it will fail since we've yet to implement our two contract functions, but once we do we should see it pass which will help assure us that we've correctly implemented our API!<callout color="pink">Note of CautionFor the purpose of this tutorial we're keeping our tests succinct however in a real-world setting we should always ensure our contracts are thoroughly tested, because once we deploy them they will be immutable.</callout><h3 id="implementation">Implementation</h3>Next let's implement our contract functions.We'll need a data structure to store comments. For this we'll use a mapping to store each topic with its array of associated comments.<pre filepath="contracts/Comments.sol"><code class="language-solidity">mapping(string =&gt; Comment[]) private commentsByTopic;</code></pre>With this data structure we can implement <code class="inline-code">getComments</code> quite simply.<pre filepath="contracts/Comments.sol"><code class="language-solidity">mapping(string =&gt; Comment[]) private commentsByTopic;
 
function getComments(string calldata topic) public view returns(Comment[] memory) {
 return commentsByTopic[topic];
}</code></pre>Adding comments also comes quite naturally given this data structure.<pre filepath="contracts/Comments.sol"><code class="language-solidity">uint32 private idCounter;
mapping(string =&gt; Comment[]) private commentsByTopic;

function addComment(string calldata topic, string calldata message) public {
 Comment memory comment = Comment({
 id: idCounter,
 topic: topic,
 creator_address: msg.sender,
 message: message,
 created_at: block.timestamp
 });
 commentsByTopic[topic].push(comment);
 idCounter++;
 emit CommentAdded(comment);
}</code></pre>There's several things to note about our <code class="inline-code">addComment</code> implementation.Firstly, we've added an <code class="inline-code">idCounter</code> to help us generate serial ids. <code class="inline-code">idCounter</code> is stored on-chain so its value will be persisted across function calls. After creating a comment in memory we then push it to the <code class="inline-code">commentsByTopic</code> mapping. Unlike javascript maps, if our <code class="inline-code">commentsByTopic</code> mapping isn't yet aware of a topic, we don't have to worry about initializing it to an empty array, solidity actually does this for us by default. If you're wondering where <code class="inline-code">msg</code> and <code class="inline-code">block</code> come from, they're bits of contextual data that are <a target="_blank" rel="noopener noreferrer nofollow" class="link" href="https://docs.soliditylang.org/en/develop/units-and-global-variables.html#special-variables-and-functions">automatically provided to each function</a>. <code class="inline-code">msg.sender</code> is very commonly used and holds the address of the authenticated wallet. Lastly we're emitting a <code class="inline-code">CommentAdded</code> event, which later will be useful to update our UI!Tying this all together, our final contract implementation looks like the following.<pre filepath="contracts/Comments.sol"><code class="language-solidity">//SPDX-License-Identifier: Unlicense
pragma solidity ^0.8.0;

import "hardhat/console.sol";

contract Comments {
 struct Comment {
 uint32 id;
 string topic;
 address creator_address;
 string message;
 uint created_at;
 }

 uint32 private idCounter;
 mapping(string =&gt; Comment[]) private commentsByTopic;
 
 event CommentAdded(Comment comment);

 function getComments(string calldata topic) public view returns(Comment[] memory) {
 return commentsByTopic[topic];
 }

 function addComment(string calldata topic, string calldata message) public {
 Comment memory comment = Comment({
 id: idCounter,
 topic: topic,
 creator_address: msg.sender,
 message: message,
 created_at: block.timestamp
 });
 commentsByTopic[topic].push(comment);
 idCounter++;
 emit CommentAdded(comment);
 }
}</code></pre>Now that we've got our contract implemented, let's run the test we wrote earlier to make sure all is well!<pre filepath="terminal"><code class="language-bash">npx hardhat test</code></pre>If our test passes then it's time to run a local Ethereum node and deploy our contract to it! If the test is failing then review previous steps to make sure you didn't miss anything.<h3 id="deployment">Deployment</h3>Let's hop into the <code class="inline-code">scripts</code> folder, rename <code class="inline-code">sample-script.js</code> to <code class="inline-code">deploy-and-seed.js</code> and replace its contents with the following deployment script.<pre filepath="scripts/deploy-and-seed.js"><code class="language-javascript">// We require the Hardhat Runtime Environment explicitly here. This is optional
// but useful for running the script in a standalone fashion through `node &lt;script&gt;`.
//
// When running the script with `npx hardhat run &lt;script&gt;` you'll find the Hardhat
// Runtime Environment's members available in the global scope.
const hre = require("hardhat");

async function main() {
 // Hardhat always runs the compile task when running scripts with its command
 // line interface.
 //
 // If this script is run directly using `node` you may want to call compile
 // manually to make sure everything is compiled
 // await hre.run('compile');

 // We get the contract to deploy
 const CommentsContract = await hre.ethers.getContractFactory("Comments");
 const contract = await CommentsContract.deploy();

 await contract.deployed();

 const tx1 = await contract.addComment("my-blog-post", "My first comment");
 await tx1.wait();

 const tx2 = await contract.addComment("my-blog-post", "My second comment");
 await tx2.wait();

 console.log("Contract deployed to:", contract.address);
}

// We recommend this pattern to be able to use async/await everywhere
// and properly handle errors.
main()
 .then(() =&gt; process.exit(0))
 .catch((error) =&gt; {
 console.error(error);
 process.exit(1);
 });</code></pre>As its name implies, this script deploys our Comments contract to the chain of our choosing and will populate two starter comments for us so we'll have some data to work with immediately.Let's get that local Ethereum node running.<pre filepath="terminal"><code class="language-bash">npx hardhat node</code></pre>Note the output of this command. Hardhat sets up several fake wallets for you for development purposes, each loaded with a ton of fake ETH. Each wallet's address and private key have been outputted to the terminal. We'll use one of these accounts later to connect to our local node from the browser.<pre filepath="terminal"><code class="language-bash">Started HTTP and WebSocket JSON-RPC server at http://127.0.0.1:8545/

Accounts
========

WARNING: These accounts, and their private keys, are publicly known.
Any funds sent to them on Mainnet or any other live network WILL BE LOST.

Account #0: 0xf39fd6e51aad88f6f4ce6ab8827279cfffb92266 (10000 ETH)
Private Key: 0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80

Account #1: 0x70997970c51812dc3a010c7d01b50e0d17dc79c8 (10000 ETH)
Private Key: 0x59c6995e998f97a5a0044966f0945389dc9e86dae88c7a8412f4603b6b78690d
</code></pre>Once running, open a new terminal and let's deploy our smart contract to the now-running local node.<pre filepath="terminal"><code class="language-bash">npx hardhat run --network localhost scripts/deploy-and-seed.js</code></pre>You should now see output similar to the following.<pre filepath="terminal"><code class="language-bash">Contract deployed to: 0x5FbDB2315678afecb367f032d93F642f64180aa3</code></pre>Later on we'll come back to this script and deploy to the Polygon Mumbai Testnet, but for now we've got our contract deployed to the local node and we'll move on to the frontend!

The Contract

The UI

Alright, backend is done ✅ frontend is done ✅. Now let's get our contract deployed to an actual blockchain.As mentioned, we're going to use Polygon because of its many advantages over Ethereum, including faster transaction processing and lower transaction costs.If you don't already have Polygon Mumbai as a network option in MetaMask, then click the button below to add it.<chain blockchain="ethereum" network="rinkeby"></chain>Let's update <code class="inline-code">hardhat.config.js</code> to initialize the dotenv package and let's add Polygon Mumbai to hardhat's supported networks.<pre filepath="hardhat.config.js"><code class="language-typescript">require("@nomiclabs/hardhat-waffle");
require("dotenv").config();

// This is a sample Hardhat task. To learn how to create your own go to
// https://hardhat.org/guides/create-task.html
task("accounts", "Prints the list of accounts", async (taskArgs, hre) =&gt; {
 const accounts = await hre.ethers.getSigners();

 for (const account of accounts) {
 console.log(account.address);
 }
});

// You need to export an object to set up your config
// Go to https://hardhat.org/config/ to learn more

/**
 * @type import('hardhat/config').HardhatUserConfig
 */
module.exports = {
 solidity: "0.8.4",
 networks: {
 hardhat: {
 chainId: 1337,
 },
 matic: {
 url: "https://rpc-mumbai.maticvigil.com",
 accounts: [process.env.PRIVATE_KEY],
 },
 },
};</code></pre>The dotenv package will take key-value pairs from a file called <code class="inline-code">.env</code> and will add them as constants in memory under <code class="inline-code">process.env</code>. This is how we will populate the value <code class="inline-code">process.env.PRIVATE_KEY</code>.Go to the MetaMask extension and select an account you'd like to use to deploy your contract. Find the account's <a target="_blank" rel="noopener noreferrer nofollow" class="link" href="https://metamask.zendesk.com/hc/en-us/articles/360015289632-How-to-Export-an-Account-Private-Key">private key through the MetaMask UI</a> and copy it.<callout color="pink">Warning - whenever using a wallet private key directly in code, we highly recommend using an account that contains little to no real money.</callout>Let's create a <code class="inline-code">.env</code> file in the root of the repo and populate it with the private key you copied from MetaMask.<pre filepath=".env"><code class="language-bash">PRIVATE_KEY=&lt;your-private-key&gt;</code></pre>If the wallet you're using doesn't have any MATIC on the Polygon Mumbai network then you'll need to request some from <a target="_blank" rel="noopener noreferrer nofollow" class="link" href="https://faucet.polygon.technology/">the faucet</a>.After this is done, we're ready to deploy our contract to the Polygon testnet.Let's run our deploy script again, but this time with the network set to matic.<pre filepath="terminal"><code class="language-bash">npx hardhat run --network matic scripts/deploy-and-seed.js</code></pre>If successful, you should see the process print a message with the following format.<pre filepath="terminal"><code class="language-bash">Contract deployed to: &lt;address-of-deployed-contract&gt;</code></pre>Congrats, the contract is deployed! 🎉🎉🎉Let's hook up our UI to this contract instance.First we need to update the <code class="inline-code">addressOrName</code> field in <code class="inline-code">useCommentsContract.ts</code> with the new contract address.<pre filepath="hooks/useCommentsContract.ts"><code class="language-typescript"> const contract = wagmi.useContract({
 addressOrName: "&lt;address-of-deployed-contract&gt;",
 contractInterface: CommentsContract.abi,
 signerOrProvider: signer.data || provider,
 });</code></pre>Then in <code class="inline-code">index.tsx</code>, we'll update the providers definition to fall back to the Polygon Mumbai network.<pre filepath="pages/index.tsx"><code class="language-tsx">// Provider that will be used when no wallet is connected (aka no signer)
const provider = providers.getDefaultProvider(
 "https://rpc-mumbai.maticvigil.com"
);</code></pre>At this point, let's make sure we're connected to the Polygon Mumbai network in MetaMask and then refresh the UI. Now our comments component should be all hooked up to our deployed Polygon contract!

Deploying to Polygon

We covered a lot! We hope this has introduced you to some new patterns, libraries, and ways of thinking about web3 technologies.At Pointer, we're loving the doors that <a target="_blank" rel="noopener noreferrer nofollow" class="link link link link" href="https://polygon.technology/">Polygon</a> has opened for us. Many of the ideas on our roadmap would not be possible if it weren't for the low transaction fees and quick transaction speeds that Polygon offers us.