Create a dapp using Truffle and React
Create a dapp tutorial
The Web3 frontend integrates with the smart contract to allow you to read from and write to the Ethereum blockchain.
- An Ethereum wallet for testing purposes
Install Truffle globally using the Node.js package manager:
npm install -g truffle
You have to create an account to get to the faucet.
Create a new project directory from the command line:
mkdir simple-storage
cd into the new directory:cd simple-storage
Create a bare Truffle project which generates the required directory structure to test and deploy contracts:
truffle init
Truffle creates the following directory structure for your project:
hdwallet-provider is a separate package that signs transactions for addresses derived from a 12 or 24-word mnemonic. By default, the
hdwallet-provider uses the first address generated from the mnemonic. However, this is configurable.Infura does not manage your private keys, meaning it cannot sign transactions on your behalf.
Run the following command to install
hdwallet-provider:npm install @truffle/hdwallet-provider
npm install dotenv
Create a file named
.env in your project directory to store the project and Ethereum account details.The following example
.env file includes the MetaMask secret recovery phrase. Refer to the MetaMask instructions on how to reveal a secret recovery phrase. If using a network other than Goerli, ensure you update INFURA_API_KEY accordingly.INFURA_API_KEY = "https://goerli.infura.io/v3/<Your-API-Key>"
MNEMONIC = "<Your-MetaMask-Secret-Recovery-Phrase>"
Ensure you replace the following values in the
.env file:<Your-API-Key>with the API key the Ethereum project.<Your-MetaMask-Secret-Recovery-Phrase>with the mnemonic of your MetaMask wallet. This phrase is used by the Trufflehdwallet-providerto sign transactions.
Never disclose your secret recovery phrase. Anyone with your recovery phrase can steal any assets held in your wallet.
Using an editor, create a smart contract in the
contracts/ directory. In this example, we'll create a basic contract called SimpleStorage.sol.pragma solidity >=0.5.8;
contract SimpleStorage {
uint256 storedData;
function set(uint256 x) public {
storedData = x;
}
function get() public view returns (uint256) {
return storedData;
}
}
Configure the
truffle-config.js file to use the HDWalletProvider and include the required configuration to deploy to the network (Goerli in this example).
Find the truffle-config.js file in your project's root directory. Delete the contents of the file, and replace it with the following:require('dotenv').config();
const HDWalletProvider = require('@truffle/hdwallet-provider');
const { INFURA_API_KEY, MNEMONIC } = process.env;
module.exports = {
networks: {
development: {
host: "127.0.0.1",
port: 8545,
network_id: "*"
},
goerli: {
provider: () => new HDWalletProvider(MNEMONIC, INFURA_API_KEY),
network_id: '5',
gas: 4465030
}
}
};
Navigate to the project's root directory and run the following:
truffle compile
If successful, you'll see output similar to:
Compiling your contracts...
===========================
> Compiling ./contracts/SimpleStorage.sol
> Artifacts written to /Users/myuser/simple-storage/build/contracts
> Compiled successfully using:
- solc: 0.5.16+commit.9c3226ce.Emscripten.clang
Compiled files go in the
build/contracts/ directory, relative to your project root. Refer to the Truffle documentation for more information about the compilation process.Scripts that deploy smart contracts are located in the
migrations/ directory and are numbered. In the migrations/ directory, create a file called 1_deploy_contract.js.Add the following code to the
1_deploy_contract.jsfile:const SimpleStorage = artifacts.require("SimpleStorage.sol");
module.exports = function(deployer) {
deployer.deploy(SimpleStorage);
};
In the root folder of the project, run the migration command to deploy the smart contract to the Ethereum network:
truffle migrate --network goerli
If successful you'll see a response similar to the following:
Use a block explorer like Etherscan to view transaction details by searching for the
transaction hash or contract address for example.Use the
npx command to create a React project boilerplate and a directory named storage-lab:npx create-react-app storage-lab
The command sets up your development environment with the latest JavaScript features, and optimizes your app for production.
cd into the new directory:cd storage-lab
The
Web3.js library interacts with the Ethereum network.You can also use the
ether.js library to interact with the Ethereum network.npm install web3
Copy the smart contract project directory you created previously (
simple-storage) into the React project directory.
The project directory should now look as follows:storage-lab
├── README.md
├── node_modules
├── package-lock.json
├── package.json
├── public
├── simple-storage
└── src
The Application Binary Interface (ABI) is the standard way to interact with contracts in the Ethereum ecosystem.
We'll create a JavaScript file to enable the Web3 frontend to communicate with the smart contract deployed earlier via the smart contract's ABI.
While there are more elegant ways to get the frontend and contract to communicate, we'll do it manually in this tutorial for educational purposes.
When we compiled our smart contract earlier, it created a JSON file named
SimpleStorage.json inside of the Truffle project's build/contracts/ directory. Copy the abi object from the JSON file and reformat it so that we can import it into our app.In the
/src directory, create a folder named /abi, which will contain our abi.js file. The /src directory should look as follows:src
├── App.css
├── App.js
├── App.test.js
├── abi
│ └── abi.js
├── index.css
├── index.js
├── logo.svg
├── reportWebVitals.js
└── setupTests.js
Copy the ABI data from the JSON file into the
abi.js file and reformat it as follows:export const SimpleStorage = [
{
inputs: [
{
internalType: "uint256",
name: "x",
type: "uint256",
},
],
name: "set",
outputs: [],
stateMutability: "nonpayable",
type: "function",
},
{
inputs: [],
name: "get",
outputs: [
{
internalType: "uint256",
name: "",
type: "uint256",
},
],
stateMutability: "view",
type: "function",
constant: true,
},
];
The
src/App.js file is the highest level component in the React application structure. Update the file to include the app logic and interface components.
Replace
<CONTRACT-ADDRESS> with your smart contract address. To locate the contract address, view the address field in the SimpleStorage.json file inside of the build/contracts/ directory. import React, { useState } from "react";
import { SimpleStorage } from "./abi/abi";
import Web3 from "web3";
import './App.css';
// Access our wallet inside of our dapp
const web3 = new Web3(Web3.givenProvider);
// Contract address of the deployed smart contract
const contractAddress = "<CONTRACT-ADDRESS>";
const storageContract = new web3.eth.Contract(SimpleStorage, contractAddress);
function App() {
// Hold variables that will interact with our contract and frontend
const [number, setUint] = useState(0);
const [getNumber, setGet] = useState("0");
const numberSet = async (t) => {
t.preventDefault();
const accounts = await window.ethereum.enable();
const account = accounts[0];
// Get permission to access user funds to pay for gas fees
const gas = await storageContract.methods.set(number).estimateGas();
const post = await storageContract.methods.set(number).send({
from: account,
gas,
});
};
const numberGet = async (t) => {
t.preventDefault();
const post = await storageContract.methods.get().call();
setGet(post);
};
return (
<div className="main">
<div className="card">
<form className="form" onSubmit={numberSet}>
<label>
Set your uint256:
<input
className="input"
type="text"
name="name"
onChange={(t) => setUint(t.target.value)}
/>
</label>
<button className="button" type="submit" value="Confirm">
Confirm
</button>
</form>
<br />
<button className="button" onClick={numberGet} type="button">
Get your uint256
</button>
{getNumber}
</div>
</div>
);
}
export default App;
In the
App.css file, delete the boilerplate stylesheet and add the following custom stylesheet:.main {
text-align: center;
display: flex;
justify-content: center;
background-color: #f2f1f5;
height: 100vh;
}
.card {
min-height: 50vh;
width: 50vw;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.form {
height: 20vh;
width: 20vw;
display: flex;
justify-content: space-evenly;
flex-direction: column;
}
.button {
width: 20vw;
height: 5vh;
}
If you are using create-react-app version >=5 you may run into issues building, such as:
Module not found: Error: Can't resolve 'crypto' in 'C:\Users\Username\Projects\testProject\client\node_modules\eth-lib\lib'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
This is because NodeJS polyfills are not included in the latest version of create-react-app.
Follow these instructions to resolve the issue.
Run the Web3 frontend from the command line.
yarn start
In your dapp, enter a value in the Set your uint256 field and click Confirm.
The MetaMask app should open to allow you to pay the required gas fee.
Click Get your uint256 to retrieve the value.
Note that the read operation does not require you to pay gas. This is because it's not a state-changing operation.
Last modified 2mo ago