# Interacting with Smart Contracts Using ethers.js
Learn how to interact with smart contracts deployed on **Status Network** from a frontend using **ethers.js**.
In this tutorial, we'll walk through setting up a basic web application, deploying a smart contract on the **Status Network Testnet**, and interacting with it using **ethers.js**.
---
## Prerequisites
Before you begin, ensure you have the following:
- **MetaMask** installed in your browser.
- **Node.js** and **npm** installed on your computer.
- Basic understanding of **React.js** and how **blockchains** work.
### Set Up Status Network Testnet
1.**Add Status Network Testnet to MetaMask**:
- Follow the guide [Adding Status Network to MetaMask](/general-info/add-status-network) to add the testnet network to your wallet.
2.**Obtain Test ETH**:
- Use the [Status Network Testnet Faucet](/tools/testnet-faucets) to get test ETH for deploying and interacting with contracts.
3.**Bridge Assets (Optional)**:
- If needed, bridge assets to the Status Network Testnet using the [Testnet Bridge](/general-info/bridge/bridging-testnet).
---
## Smart Contract Deployment on Status Network
We'll use a simple smart contract called **BidBoard** for this tutorial. The contract allows advertisers to bid for space on an advertising board.
function updateAd(string memory newAd) public payable {
require(msg.value > currentBid, "Bid must be higher than current bid");
currentAd = newAd;
advertiser = msg.sender;
currentBid = msg.value;
emit AdUpdated(newAd, msg.sender, msg.value);
}
function getCurrentAd() public view returns (string memory, address, uint256) {
return (currentAd, advertiser, currentBid);
}
}
```
> **Note:** You can use your own smart contract if you prefer.
### Deploying the Contract
Follow the guide [Deploying a Smart Contract Using Remix](/tutorials/deploying-contracts/using-remix) to deploy the `BidBoard.sol` contract to the Status Network Testnet.
---
## Setting Up the Frontend Application
We'll create a React.js application to interact with the deployed smart contract.
### Step 1: Create a React App
Open your terminal and run:
```bash
npx create-react-app bidboard-ui
```
This command creates a new React application named `bidboard-ui`.
### Step 2: Install ethers.js
Navigate to the project directory and install **ethers.js**:
```bash
cd bidboard-ui
npm install ethers
```
---
## Building the Main Application Component
Open the project in your code editor and navigate to `src/App.js`.
### Import Required Libraries
Replace the content of `App.js` with the following code:
```jsx
import React, { useState, useEffect } from "react";
import { ethers } from "ethers";
import "./App.css";
const App = () => {
// Contract details
const contractAddress = "YOUR_CONTRACT_ADDRESS";
const abi = [/* ABI JSON CODE */];
// State variables
const [currentAd, setCurrentAd] = useState("");
const [currentBid, setCurrentBid] = useState(0);
const [advertiser, setAdvertiser] = useState("");
const [newAd, setNewAd] = useState("");
const [bidAmount, setBidAmount] = useState("");
const [provider, setProvider] = useState(null);
const [status, setStatus] = useState("");
// Rest of the code...
};
export default App;
```
> **Important:** Replace `"YOUR_CONTRACT_ADDRESS"` with the address of your deployed `BidBoard` contract. Paste the ABI of your contract in the `abi` array.
### Setting Up the Provider
Add the following code inside the `App` component to set up the provider:
```jsx
useEffect(() => {
if (typeof window.ethereum !== "undefined") {
const newProvider = new ethers.providers.Web3Provider(window.ethereum);
setProvider(newProvider);
} else {
console.error("Please install MetaMask!");
}
}, []);
```
### Fetch Current Advertisement Data
Add a function to fetch the current advertisement data:
```jsx
const fetchCurrentAd = async () => {
try {
const contract = new ethers.Contract(contractAddress, abi, provider);
Update the `return` statement in the `App` component:
```jsx
return (
<divclassName="app">
{/* Header */}
<header>
<h1>BidBoard</h1>
<p>Status: {status}</p>
</header>
{/* Current Advertisement */}
<sectionclassName="current-ad-section">
<h2>Current Advertisement</h2>
<pclassName="ad-message">"{currentAd}"</p>
<pclassName="ad-details">
<strong>Advertiser:</strong> {advertiser}
</p>
<pclassName="ad-details">
<strong>Current Bid:</strong> {currentBid} ETH
</p>
</section>
{/* Submit a New Bid */}
<sectionclassName="new-bid-section">
<h2>Submit a New Bid</h2>
<input
type="text"
value={newAd}
onChange={(e) => setNewAd(e.target.value)}
placeholder="Your Ad Message"
/>
<input
type="number"
value={bidAmount}
onChange={(e) => setBidAmount(e.target.value)}
placeholder="Bid Amount in ETH"
/>
<buttononClick={submitBid}>Submit Bid</button>
</section>
{/* Footer */}
<footer>
<p>
<a
href="https://github.com/your-repo"
target="_blank"
rel="noopener noreferrer"
>
GitHub Repository
</a>
</p>
</footer>
</div>
);
```
---
## Styling the Application
Create a `App.css` file in the `src` directory and add your preferred styles. Here's a basic example:
```css
.app {
text-align: center;
font-family: Arial, sans-serif;
}
header {
background-color: #282c34;
padding: 20px;
color: white;
}
section {
margin: 20px;
}
input {
margin: 5px;
padding: 10px;
width: 200px;
}
button {
padding: 10px 20px;
}
footer {
margin-top: 40px;
}
```
---
## Running the Application
In your terminal, navigate to your project directory and run:
```bash
npm start
```
This command starts the development server. Open [http://localhost:3000](http://localhost:3000) in your browser to view the application.
---
## Testing the Application
1.**View Current Advertisement**:
- The application should display the current ad message, advertiser address, and current bid.
2.**Submit a New Bid**:
- Enter a new ad message and a bid amount higher than the current bid.
- Click **"Submit Bid"**.
- MetaMask will prompt you to confirm the transaction.
- Wait for the transaction to be confirmed.
3.**Observe Real-Time Updates**:
- Upon confirmation, the application should automatically update with the new ad, advertiser, and bid amount.
---
## Conclusion
You've successfully created a web application that interacts with a smart contract deployed on the Status Network Testnet using **ethers.js**. This tutorial covered:
- Setting up a React application.
- Deploying a smart contract to the Status Network.
- Connecting the frontend to the smart contract using ethers.js.
- Handling user interactions and real-time updates via events.
---
## Next Steps
- **Explore More Tutorials**:
- Check out other tutorials in the [Status Network Documentation](/tutorials).
- **Enhance the Application**:
- Add error handling for edge cases.
- Improve the UI/UX design.
- Implement additional features like user authentication.
- **Deploy to Production**:
- Learn how to deploy your application for production use.
---
## Resources
- [Status Network Official Website](https://status.network/)
