1 line
20 KiB
JavaScript
1 line
20 KiB
JavaScript
|
"use strict";(self.webpackChunkstatus_network_docs=self.webpackChunkstatus_network_docs||[]).push([[313],{6939:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>a,default:()=>h,frontMatter:()=>i,metadata:()=>o,toc:()=>c});var r=t(4848),s=t(8453);const i={},a="Interacting with Smart Contracts Using ethers.js",o={id:"tutorials/ethers-tutorial",title:"Interacting with Smart Contracts Using ethers.js",description:"Learn how to interact with smart contracts deployed on Status Network from a frontend using ethers.js.",source:"@site/docs/tutorials/ethers-tutorial.md",sourceDirName:"tutorials",slug:"/tutorials/ethers-tutorial",permalink:"/tutorials/ethers-tutorial",draft:!1,unlisted:!1,editUrl:"https://github.com/status-im/status-network-docs/tree/main/docs/tutorials/ethers-tutorial.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"\ud83d\udda5\ufe0f Node Operators",permalink:"/tools/node-operators"},next:{title:"\ud83c\udfa9 Using Hardhat",permalink:"/tutorials/deploying-contracts/using-hardhat"}},d={},c=[{value:"Prerequisites",id:"prerequisites",level:2},{value:"Set Up Status Network Testnet",id:"set-up-status-network-testnet",level:3},{value:"Smart Contract Deployment on Status Network",id:"smart-contract-deployment-on-status-network",level:2},{value:"BidBoard Smart Contract",id:"bidboard-smart-contract",level:3},{value:"Deploying the Contract",id:"deploying-the-contract",level:3},{value:"Setting Up the Frontend Application",id:"setting-up-the-frontend-application",level:2},{value:"Step 1: Create a React App",id:"step-1-create-a-react-app",level:3},{value:"Step 2: Install ethers.js",id:"step-2-install-ethersjs",level:3},{value:"Building the Main Application Component",id:"building-the-main-application-component",level:2},{value:"Import Required Libraries",id:"import-required-libraries",level:3},{value:"Setting Up the Provider",id:"setting-up-the-provider",level:3},{value:"Fetch Current Advertisement Data",id:"fetch-current-advertisement-data",level:3},{value:"Submit a New Bid",id:"submit-a-new-bid",level:3},{value:"Listen to Contract Events",id:"listen-to-contract-events",level:3},{value:"Creating the User Interface",id:"creating-the-user-interface",level:2},{value:"Styling the Application",id:"styling-the-application",level:2},{value:"Running the Application",id:"running-the-application",level:2},{value:"Testing the Application",id:"testing-the-application",level:2},{value:"Conclusion",id:"conclusion",level:2},{value:"Next Steps",id:"next-steps",level:2},{value:"Resources",id:"resources",level:2}];function l(e){const n={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",hr:"hr",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,s.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.header,{children:(0,r.jsx)(n.h1,{id:"interacting-with-smart-contracts-using-ethersjs",children:"Interacting with Smart Contracts Using ethers.js"})}),"\n",(0,r.jsxs)(n.p,{children:["Learn how to interact with smart contracts deployed on ",(0,r.jsx)(n.strong,{children:"Status Network"})," from a frontend using ",(0,r.jsx)(n.strong,{children:"ethers.js"}),"."]}),"\n",(0,r.jsxs)(n.p,{children:["In this tutorial, we'll walk through setting up a basic web application, deploying a smart contract on the ",(0,r.jsx)(n.strong,{children:"Status Network Testnet"}),", and interacting with it using ",(0,r.jsx)(n.strong,{children:"ethers.js"}),"."]}),"\n",(0,r.jsx)(n.hr,{}),"\n",(0,r.jsx)(n.h2,{id:"prerequisites",children:"Prerequisites"}),"\n",(0,r.jsx)(n.p,{children:"Before you begin, ensure you have the following:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"MetaMask"})," installed in your browser."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"Node.js"})," and ",(0,r.jsx)(n.strong,{children:"npm"})," installed on your computer."]}),"\n",(0,r.jsxs)(n.li,{children:["Basic understanding of ",(0,r.jsx)(n.strong,{children:"React.js"})," and how ",(0,r.jsx)(n.strong,{children:"blockchains"}
|