# Contract Deployment Tutorial
The Blast Chain Mainnet allows anyone to deploy a smart contract. In this tutorial, you will learn how to deploy a contract on Blast using common tools for developing on Ethereum-compatible networks. This demo repo illustrates contract deployment with Hardhat and Foundry.
{% hint style="success" %}
**Got OWCT?**
Before you start deploying your contract, make sure you have OWCT in your wallet to cover transaction fees. OWCT can be acquired through various exchanges or peer-to-peer transactions.
{% endhint %}
### Initial setup
Add the Blast Chain to your Metamask wallet. Ensure you have some OWCT for transaction fees, which you can obtain through an exchange or peer-to-peer transaction.
Clone the repo using the command below:
```bash
git clone https://github.com/oceans404/fullstack-zkevm
```
Install dependencies and start the React app (you can copy all three lines in one go):
```bash
cd fullstack-zkevm
npm install
npm start
```
Correct installation opens up the Counter App at localhost:3000. You can test it by clicking on the +1 button several times.
Back in the CLI, install the necessary dependencies:
```bash
npm install ethers hardhat @nomiclabs/hardhat-waffle ethereum-waffle chai @nomiclabs/hardhat-ethers dotenv
```
Populate the `.env.sample` file with your `ACCOUNT_PRIVATE_KEY`.
**How to get your private key in MetaMask:**
Ensure that you handle your private key securely to avoid exposing your assets to theft.
Copy the contents of the `.env.sample` file to a new `.env` file:
```bash
cp .env.sample .env
```
### Hardhat smart contract
Next is the initialization of a project using Hardhat. Hardhat cannot initialize a sample project if there is an existing README file. To avoid clashes, rename any existing `README.md` temporarily before initializing Hardhat.
```bash
mv README.md README-tutorial.md
```
* Initialize a project with Hardhat: `npx hardhat init`.
* Next, (… *To avoid failure … please go slow with this cli dialogue*…),
The aim here is to achieve the following outcome:
So then,
* Press `` to set the project root.
* Press `` again to accept addition of `.gitignore`.
* Type `n` to reject installing `sample project's dependencies`.
The idea here is to postpone installing dependencies to later steps due to a possible version-related bug.
* Open the `hardhat.config.js` file and paste the below code:
```javascript
require("dotenv").config();
require("@nomicfoundation/hardhat-toolbox");
/** @type import('hardhat/config').HardhatUserConfig */
module.exports = {
solidity: "0.8.9",
paths: {
artifacts: "./src",
},
networks: {
blastChain: {
url: `https://zkevmrpc.blastchain.org`,
accounts: [process.env.ACCOUNT_PRIVATE_KEY],
},
},
};
```
Note that a different path to artifacts is added so that the React app can read the contract ABI within the `src` folder.
### Add scripts
* Create a new file, in the contracts folder, named `Counter.sol`: `touch contracts/Counter.sol`.
* Copy the below code and paste it in the Counter contract code:
```javascript
//SPDX-License-Identifier: MIT
pragma solidity ^0.8.9;
contract Counter {
uint256 currentCount = 0;
function increment() public {
currentCount = currentCount + 1;
}
function retrieve() public view returns (uint256){
return currentCount;
}
}
```
* Create a new file in the scripts folder `deploy-counter.js`: `touch scripts/deploy-counter.js`.
* Add the code below to the `deploy-counter.js` file:
```javascript
const hre = require("hardhat");
async function main() {
const deployedContract = await hre.ethers.deployContract("Counter");
await deployedContract.waitForDeployment();
console.log(
`Counter contract deployed to https://blastchain.org/address/${deployedContract.target}`
);
}
main().catch((error) => {
console.error(error);
process.exitCode = 1;
});
```
* Before compiling the contract, you need to install the toolbox. You may need to change directory to install outside the project. Use this command:
```bash
npm install --save-dev @nomicfoundation/hardhat-toolbox
```
* Compile your contract code (i.e., go back to the project root in the CLI):
```bash
npx hardhat compile
```
* Now run the scripts:
```bash
npx hardhat run scripts/deploy-counter.js --network blastChain
```
Here’s an output example:
`Counter contract deployed to https://blastchain.org/address/0x5FbDB2315678afecb367f032d93F642f64180aa3`
### Update frontend
The next step is to turn `Counter.sol` into a dApp by importing the `ethers` and the `Counter` file, as well as logging the contract’s ABI.
* Include the below code in the `App.js` file:
```
import { ethers } from "ethers";
import Counter from "./contracts/Counter.sol/Counter.json";
const counterAddress = "your-contract-address"
console.log(counterAddress, "Counter ABI: ", Counter.abi);
```
* Update the `counterAddress` to your deployed address.
* It is the hexadecimal number found at the tail-end of the output of the last `npx hardhat run ...` command and looks like this `0x5FbDB2315678afecb367f032d93F642f64180aa3`.
* It must be pasted in the `App.js` to replace `your-contract-address`. Be sure to use the deployed address from your own implementation!
* Update frontend counter to read from blockchain. Include the below code in the `App.js` file:
```javascript
useEffect(() => {
// declare the data fetching function
const fetchCount = async () => {
const data = await readCounterValue();
return data;
};
fetchCount().catch(console.error);
}, []);
async function readCounterValue() {
if (typeof window.ethereum !== "undefined") {
const provider = new ethers.providers.Web3Provider(window.ethereum);
console.log("provider", provider);
const contract = new ethers.Contract(
counterAddress,
Counter.abi,
provider
);
console.log("contract", contract);
try {
const data = await contract.retrieve();
console.log(data);
console.log("data: ", parseInt(data.toString()));
setCount(parseInt(data.toString()));
} catch (err) {
console.log("Error: ", err);
alert(
"Switch your MetaMask network to Blast Chain and refresh this page!"
);
}
}
}
```
* Also, to import `useEffect`, insert it like this:
```javascript
import { useState, useEffect } from "react";
```
* To be able to track a loader, add this to your state:
```javascript
const [isLoading, setIsLoading] = useState(false);
```
* This is within the `App()` function.
* Let frontend counter write to the blockchain by adding the below `requestAccount` and `updateCounter` functions:
```javascript
async function requestAccount() {
await window.ethereum.request({ method: "eth_requestAccounts" });
}
async function updateCounter() {
if (typeof window.ethereum !== "undefined") {
await requestAccount();
const provider = new ethers.providers.Web3Provider(window.ethereum);
console.log({ provider });
const signer = provider.getSigner();
const contract = new ethers.Contract(counterAddress, Counter.abi, signer);
const transaction = await contract.increment();
setIsLoading(true);
await transaction.wait();
setIsLoading(false);
readCounterValue();
}
}
```
Place these two functions above the `readCounterValue()` function in the `App.js` file.
* Replace the `incrementCounter` function with this one:
```javascript
const incrementCounter = async () => {
await updateCounter();
};
```
* Update the increment button code to:
```javascript
```
Now, run the Counter dApp by simply using `npm start` in CLI at the project root.
Congratulations for reaching this far. You have successfully deployed a dApp on the Blast Chain.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.blastchain.org/contract-deployment-tutorial.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.