How to Develop a DApp on CORE

Decentralized Apps, DApps in short, are the type of Apps for communicating with a blockchain or smart contracts on chain instead of with traditional centralized databases. The simplest form of a DApp is usually a pure frontend project implemented with React.js or Vue.js, with the help of Web3.js or Ethers.js to interact with an EVM compatible blockchain and smart contracts on it.
In this tutorial we provide simple guides to build a DApp to store data in a smart contract on Core blockchain using React.js and Ethers.js. Everything discussed in this tutorial can be found in the DApp Tutorial repository.
We assume the people who read this document have front-end development experience and are familiar with JavaScript, Node.js, React.js and other related knowledge.
Deploy Smart Contract
The smart contract we use in this tutorial is the 1_Storage.sol file from Remix.
// SPDX-License-Identifier: GPL-3.0
​
pragma solidity >=0.7.0 <0.9.0;
​
/**
 * @title Storage
 * @dev Store & retrieve value in a variable
 */
contract Storage {
​
    uint256 number;
​
    /**
     * @dev Store value in variable
     * @param num value to store
     */
    function store(uint256 num) public {
        number = num;
    }
​
    /**
     * @dev Return value 
     * @return value of 'number'
     */
    function retrieve() public view returns (uint256){
        return number;
    }
}
Please read How to use Remix or How to use HardHat to learn how to build and deploy smart contracts on Core blockchain.
After the smart contract is successfully deployed, we save its address for later use. We also need the ABI metadata to interact with the contract from our DApp. For simplicity, we can use the smart contract metadata from Remix. You can find it at /default workspace/contracts/artifacts/Storage_metadata.json on Remix File Explorer. Rename it to Storage.json and put it under /src/contracts folder in the tutorial project.
MetaMask Integration
We recommend using the Metamask wallet Chrome extension. It is a web wallet that allows connecting the Chrome browser to any valid blockchain network.
Below you can find the code snippit on how to integrate with the MetaMask extension. For more knowledge on using MetaMask wallet, please read User Guide.
Key Implementations
The key logic is implemented in App.tsx.
1. Connect to Metamask
​App.tsx - Wallet​
2. Write to smart contract
​App.tsx - Store​
3. Read from smart contract
​App.tsx - Retrieve​
Run Locally
1. Clone the Dapp-Tutorial repository
git clone https://github.com/coredao-org/dapp-tutorial.git
2. Go into project directory
cd dapp-tutorial
3. Install all the dependencies (node modules)
npm install
4. Serve with hot reload at http://localhost:5173.
npm run dev
Test Locally using MetaMask
1. Make sure that your MetaMask wallet is correctly installed and switched to CORE Chain Testnet. Refer to this User Guide for details. You also need to connect the wallet to this local site.
2. Enter a number in the input field and click the store button to save it to the contract. A write action on the smart contract invokes the MetaMask wallet. Click the Confirm button to sign the transaction and wait for confirmation on the blockchain.
3. After the transaction is confirmed on the blockchain, click the retrieve button to read the value from the smart contract. You will notice the value has been updated.
Last modified 8mo ago