๐งช This repository modifies the repo Ethereum Scaffold ETH for Conflux ESpace. The main differences are as follows:
- It updates the viem package which includes Conflux Espace Testnet as a chain definition. Older versions of Scaffold-ETH-2 only has Conflux Espace. Conflux Espace Testnet Faucet for testfunds can be found in https://efaucet.confluxnetwork.org/.
- It adds deployment of hardhat to include Conflux Espace Testnet and Conflux Espace by adding the chains in hardhat.config.ts
- It includes a simple example of interacting with the contract from read/write. It then shows how to change the wallet connection to Conflux Espace and Conflux Espace Testnet and deploying it on vercel
You can view the full tutorial of how to build an app quickly on Conflux in this video
This allows developers on Conflux ESpace to leverage the open-source, up-to-date toolkit of Scaffold ETH-2 for building decentralized applications (dapps) on Conflux. It's designed to make it easier for developers to create and deploy smart contracts and build user interfaces that interact with those contracts.
โ๏ธ Built using NextJS, RainbowKit, Hardhat, Wagmi, Viem, and Typescript.
- โ Contract Hot Reload: Your frontend auto-adapts to your smart contract as you edit it.
- ๐ช Custom hooks: Collection of React hooks wrapper around wagmi to simplify interactions with smart contracts with typescript autocompletion.
- ๐งฑ Components: Collection of common web3 components to quickly build your frontend.
- ๐ฅ Burner Wallet & Local Faucet: Quickly test your application with a burner wallet and local faucet.
- ๐ Integration with Wallet Providers: Connect to different wallet providers and interact with the Ethereum network.
Before you begin, you need to install the following tools:
- Node (>= v18.17)
- Yarn (v1 or v2+)
- Git
To get started with Conflux Scaffold, follow the steps below:
- Clone this repo & install dependencies
git clone https://github.com/conflux-fans/conflux-scaffold
cd conflux-scaffold
yarn install
- Run a local network in the first terminal:
yarn chain
This command starts a local Ethereum network using Hardhat. Since Conflux is EVM compatible, we can use hardhat to test the contracts out prior to deploying on the Conflux network. The network runs on your local machine and can be used for testing and development.
We have adjusted the network configuration in hardhat.config.ts
to include Conflux ESpace. If you are unable to interact with the testnets due to limits, you can switch network RPC endpoints for different regions in the 'hardhat.config.ts' file and re-deploy network endpoints. For example, you can switch from https://evmtestnet.confluxrpc.com to https://evmtestnet.confluxrpc.org. You can also add an API key at the end of the endpoint by purchasing a API key (with faucet tokens) at confluxhub for increased limits
- On a second terminal, deploy the test contract:
yarn deploy
To deploy the contract on Conflux ESpace or Conflux ESpace Testnet, use
yarn deploy --network confluxESpace
or
yarn deploy --network confluxESpaceTestnet
This command deploys a test smart contract to the local network. The contract is located in packages/hardhat/contracts
and can be modified to suit your needs. The yarn deploy
command uses the deploy script located in packages/hardhat/deploy
to deploy the contract to the network. You can also customize the deploy script.
- On a third terminal, start your NextJS app:
nvm use 18
yarn start
Visit your app on: http://localhost:3000
. You can interact with your smart contract using the Debug Contracts
page. You can tweak the app config in packages/nextjs/scaffold.config.ts
.
Run smart contract test with yarn hardhat:test
- Edit your smart contract
YourContract.sol
inpackages/hardhat/contracts
- Edit your frontend in
packages/nextjs/pages
- Edit your deployment scripts in
packages/hardhat/deploy
Visit our docs to learn more components/hooks you can use with Conflux-Scaffold. There is also additional instructions on Conflux Developer Portal tutorial which includes a section on using Conflux Scaffold
The Contract Debug section is powerful for quickly deploying your solidity contract and interacting with the functions
Front-end Interaction with the Contract is simplified through components and hooks
Note: Code has the latest versions of how contract instances are set up. For example, reading the contract is now useScaffoldReadContract and writing into the contract is now useScaffoldWriteContract.
- Setting up a contract instance of the contract deployed
- Interacting with Contract to Read
- Interacting with Contract to Write