hyc0812 / todo-list-web3-eth

React UI to interact with blockchain created by truffle and ganache UI.

---

Memo:

• Create new React app using latest dependencies:

npx create-next-app@latest --ts

• Create truffle project:

truffle init

• Uncomment development and compiler code in the truffle-config.js

development: {
     host: "127.0.0.1",     // Localhost (default: none)
     port: 8545,            // Standard Ethereum port (default: none)
     network_id: "*",       // Any network (default: none)
    },
    
compilers: {
    solc: {
      version: "0.8.13",      // Fetch exact version from solc-bin (default: truffle's version)
      // docker: true,        // Use "0.5.1" you've installed locally with docker (default: false)
      settings: {          // See the solidity docs for advice about optimization and evmVersion
       optimizer: {
         enabled: true,
         runs: 200
       },
       //evmVersion: "byzantium"
      }
    }
  },

• Create a new smart contract TodoList.sol

// SPDX-License-Identifier: MIT
pragma solidity >=0.4.22 <0.9.0;

contract TodoList {
    string public name = "Todo List Yongchang He";
}

• Add TodoList to 1_initial_migration.js so that we can deploy TodoList.sol:

const Migrations = artifacts.require("Migrations");
const TodoList = artifacts.require("TodoList");

module.exports = function (deployer) {
  deployer.deploy(Migrations);
  deployer.deploy(TodoList);
};

• Run truffle compile to compile smart contracts:

• Run truffle migrate --reset to deploy the contracts to local blockchain server hosted by Ganache:

• Run truffle console to check previous work:

truffle console

• Using truffle console:

> todoListContract = await TodoList.deployed()
> todoListContract

> name = await todoListContract.name()
> name

'Todo List Yongchang He'

• Update smart contract TodoList.sol:

// SPDX-License-Identifier: MIT
pragma solidity >=0.4.22 <0.9.0;
contract TodoList {
    struct Task {
        uint id;
        string content;
        bool completed;
    }
    // define event
    event TaskCreated(uint id, string content, bool completed);
    event TaskToggled(uint id, bool completed);
    // define mapping
    mapping (address => mapping(uint => Task)) public tasks;
    mapping (address => uint) public tasksCount;
    // Initialize the contract
    constructor() {
        createTask("Hello World");
    }
    // Create a new task
    function createTask(string memory _content) public {
        uint taskCount = tasksCount[msg.sender];
        tasks[msg.sender][taskCount] = Task(taskCount, _content, false);
        emit TaskCreated(taskCount, _content, false);
        tasksCount[msg.sender]++;
    }
    // Toggle the completion of a task
    function toggleCompleted(uint _id) public {
        Task storage task = tasks[msg.sender][_id];
        task.completed = !task.completed;
        emit TaskToggled(_id, task.completed);
    }
}

• Deploy updated smart contract:

truffle compile
truffle migrate --reset

• Test deployment status again using truffle console (optional step):

> todoListContract = await TodoList.deployed()
> account = await web3.eth.getCoinbase()
> account

'0x2ceb36a9581e1d8a997d4d181b09b31138174819'

account[0] of your ganache server

Get ETH balance of account[0]:

> web3.eth.getBalance(account)

'99980299100000000000'

tasksCount

> taskCount = await todoListContract.tasksCount(account)
> taskCount

BN { negative: 0, words: [ 1, <1 empty item> ], length: 1, red: null }

> taskCount.toNumber()

1

> theTask = await todoListContract.tasks(account, 0)
> theTask[0]

BN { negative: 0, words: [ 0, <1 empty item> ], length: 1, red: null }

> theTask[1]

'Hello World'

• Using Chakra to accelerate the front-end development Link

install dependencies:

npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6

Install truffle and web3 dependencies:

npm i @truffle/contract
npm install web3

References

https://github.com/facundocarballo/todoListETH