Interact with Celo Blockchain using Web3dart

Interact with Celo Blockchain using Web3dart https://celo.academy/uploads/default/optimized/2X/2/21e1f3675aeb60cd529e99321d826fff6e6da8e9_2_1024x576.png
none 0.0 0

Introduction

In this tutorial, we’ll go over the fundamentals of interacting with Solidity smart contract programming language using web3dart. You will have a fundamental understanding of how to make a contract call in the dart programming language.

This tutorial will demonstrate how simple it is to interact with smart contracts, call functions, and listen to events in Dart, one of the most flexible programming languages for creating dApps.

How it works

Web3dart Package is a pretty cool generator that lets you create dart classes from ABIs. Using build_runner to generate functions and classes from ABI/bytecode greatly simplifies the process, even though it might not work on more complex smart contracts.

Prerequisites

First, This tutorial assumes that you are already familiar with solidity and understand how smart contracts work and also assumes that you already know the basics of using dart language.

For this project we’ll be using a few interesting dependencies & dev dependencies:

  • http : A composable, Future-based library for making HTTP requests.
  • web3dart : A dart library that connects to interact with the Ethereum blockchain. It connects to an Ethereum node to send transactions, interact with smart contracts, and much more!

For dev dependencies:

  • build_runner : This package provides a concrete way of generating files using Dart code, outside of tools like pub
  • web3dart_builders : This package is an extension of the web3dart package that includes the dart contract generator from ABI.

Getting Started

I assume anyone going through this tutorial already understands and uses Flutter, so I will skip the setup involved in getting Flutter to work on your development computer. That means I assume you already have VS Code/Android Studio together with Android SDK and Flutter setup on your PC.

If you are entirely new to Flutter, here (https://docs.flutter.dev/get-started/install) is a good tutorial you can learn from.

Setup the Smart Contract

The next step is to compile our smart contract using the solidity compiler of your choice, such as hardhat, truffle, or any other solidity compiler.

// SPDX-License-Identifier: MIT

// TicTacToeV1

pragma solidity ^0.8.4;

contract TicTacToeV1 {
    struct LeaderBoard {
        address player;
        uint256 win;
    }

    uint32 private idCounter;

    mapping(uint256 => LeaderBoard) internal leaderboards;

    function start(uint256 win) public {
        leaderboards[idCounter] = LeaderBoard(msg.sender, win);
        idCounter++;
    }

    function getLeaderboard(uint256 _index)
        public
        view
        returns (address player, uint256)
    {
        LeaderBoard storage leaderboard = leaderboards[_index];
        return (leaderboard.player, leaderboard.win);
    }

    function updateLeaderboard(uint256 index) public {
        leaderboards[index].win++;
    }

    function getLeaderboardLength() public view returns (uint256) {
        return (idCounter);
    }
}

Deploy Smart contract (Remix)

Now that your contract is compiled, you can deploy your smart contract to the network. You can deploy to any Ethereum compatible network, and in this case we’ll be deploying the Celo testnet or mainnnet depending on your preference. If you’re brand new to this stick with testnet!

  • Click the Deploy and Run Transactions Icon on the left side menu.
  • Choose Injected Web3 as your environment.
  • Connect MetaMask to Celo testnet and verify the network.

Dart Implementation

Directory structure



Before and After

Let’s copy our Contract ABIs into our project.

Then create a folder in the project folder directory lib and create a file named tictactoev1.abi.json. Note your file name can be anything but make sure the file extension start and ends with .abi.json. With the help of build_runner & web3dart_builders we will be able to generate a dart contract object file which we will be using to interact with our smart contract.

Run this in your terminal

flutter pub run build_runner build

or

flutter pub run build_runner watch

This will generate a dart file to represent our smart contract object named tictactoev1.g.dart.

Dart Implementation

import 'package:celoweb3dart/contracts/tictactoev1.g.dart';
import 'package:http/http.dart';
import 'package:web3dart/web3dart.dart';

void main() async {
  const rpcUrl = 'https://alfajores-forno.celo-testnet.org';
  final client = Web3Client(rpcUrl, Client());

  // Import your private key or generate one from hardhat
  final credentials = EthPrivateKey.fromHex(
    '-------',

    /// This is generated by hardhat, not a real account
  );

  // Import your smart contract address
  final tictactoeV1 = Tictactoev1(
    address:
        EthereumAddress.fromHex('0x0f6E0e3F5df62d4067D9969Cd3c9F34cc2b238C9'),

    /// This is generated by hardhat, not a real account
    client: client,
  );

  // Add user to leaderboard
  await tictactoeV1.start(BigInt.one, credentials: credentials);

  // Get LeaderboardLength
  print(await tictactoeV1.getLeaderboardLength());

  // Get leaderboard by index
  print(await tictactoeV1.getLeaderboard(BigInt.one));
}

We can access the different functions and events that exist in our dart implementation of the TicTacToeV1 smart contract. By running dart lib/main.dart. we can easily see that we have been able to interact seamlessly with our deployed smart contract.

Conclusion

Congratulations, you have learned how to interact with the CELO blockchain using web3dart.

About the Author

I am a Software Engineer, Tech Evangelist (Preaching the gospel of flutter & blockchain) also and Ex-GDSC Leads.

References

7 Likes

A great piece brother.

1 Like

Nice illustrations. Thanks for contributing this.

4 Likes

Nice work you have done

2 Likes

Nice work. Thanks for sharing with the necessary screenshots

1 Like

Well detailed.

@mujhtech This tutorial does not show us how to interact with the smart contract using web3dard. What I noticed is smart contracts deployment and web3dart import.

You need to at least use the library to interact with the contract as the title promised. Please endeavor to fix this and reply to this comment. Thanks.

4 Likes

Totally agree with you on this, this tutorial is not beginner friendly and does not do as the name implies.