Integrating Conflux eSpace with Scaffold-ETH | Smart Contract Deployment & Debugging

#1

Integrating Conflux eSpace with Scaffold-ETH

Introduction

In this guide, we will explore how to integrate Conflux eSpace with Scaffold-ETH, interact with a deployed smart contract, and configure network settings for seamless development.

Scaffold-ETH is a powerful development framework designed for building and deploying Ethereum-based decentralized applications (DApps). It provides a streamlined workflow, including pre-configured smart contract templates, a React-based frontend, and backend integrations, making Web3 development faster and more efficient. Scaffold-ETH simplifies smart contract interaction, testing, and frontend integration.

Connecting the Wallet

First, navigate to the Scaffold-ETH landing page and connect your wallet. We will use MetaMask for this integration.

new2
new2.png2239×627 45.3 KB

Once connected, ensure you are on the Conflux eSpace Testnet. You should now see your wallet balance and account address.

Debugging the Smart Contract

Scaffold-ETH provides a powerful Debug Contracts section, allowing direct interaction with smart contracts via the frontend.

  • Here, we have a Hello World smart contract deployed on the Conflux eSpace Testnet.
  • Now, let’s update the greeting from “Hi” to “GM”.
  • Confirm the transaction in MetaMask.
  • Once the transaction is completed, the greeting updates from “Hi” to “GM”.
  • Since Scaffold-ETH supports live updates, refreshing the page will still show “GM”.
  • The transaction receipt verifies the successful update.

new3
new3.png2239×750 64 KB

Setting Up Scaffold-ETH for Conflux

To get started with Scaffold-ETH 2, follow the steps below:

  1. Install dependencies if it was skipped in CLI:
cd helloworld
yarn install
  1. Run a local network in the first terminal:
yarn chain

This command starts a local Ethereum network using Hardhat. The network runs on your local machine and can be used for testing and development. You can customize the network configuration in packages/hardhat/hardhat.config.ts.

  1. On a second terminal, deploy the test contract:
yarn deploy

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.

  1. On a third terminal, start your NextJS app:
yarn start

new4
new4.png2211×582 35.9 KB

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 contracts in packages/hardhat/contracts
  • Edit your frontend homepage at packages/nextjs/app/page.tsx. For guidance on routing and configuring pages/layouts checkout the Next.js documentation.
  • Edit your deployment scripts in packages/hardhat/deploy

Conclusion

By following these steps, you can successfully integrate Conflux eSpace with Scaffold-ETH, deploy smart contracts, and interact with them seamlessly. Stay tuned for more Web3 development tutorials! :rocket:

Resources

For any questions, drop a comment below! :rocket::fire:

3 Likes