Vue framework

dao.tokamak.network is being developed with the Vue Framework(v2.x). The Vue framework was used because of both its simplicity and its stability. The Vue framework was chosen because of its especially useful speed of development.

The project screen will be composed of views, containers and components. Views manages the routing display, containers manages the business logic and component arrangement. The components manages the display components.

All data is managed is the Vuex store. Looking at store/index.js makes it easy to understand the operation of dao.tokamak.network. The launch function is called before logging in. This function brings information regarding the candidate and agenda from the server. If a wallet is connected (If you login) the connectEthereum function is called. This function uses the providers connected to the wallet to access the contract data.

web3.js

web3.js is a library that can interact with an Ethereum node. dao.tokamak.network also uses the web3.js library to interact with Ethereum nodes. Before connecting a wallet, the companies private infura node is used. This node is only used to query the contract data. In order to create a transaction, a wallet must be connected. Transactions are created through interactions between the wallet and the node the wallet is interacting with.

Transactions are created with the following code.

const gasLimit = await contract.methods.something(param)
  .estimateGas({
    from: this.account,
  });

await contract.methods.something(param)
  .send({
    from: this.account,
    gasLimit: Math.floor(gasLimit * 1.2),
  })
  .on('transactionHash', (hash) => {
			// pending transaction
  })
  .on('confirmation', async (confirmationNumber) => {
    if (this.confirmBlock === confirmationNumber) {
			// update front
    }
  })
  .on('receipt', () => {
			// success
  })
  .on('error', () => {
			// failed
  });

1. The estimateGas function is used to initially determine a gasLimit. (Since when the actual transaction uses more gas than the gasLimit an out of gas error will occur, the gasLimit value is set to be multiplied by 1.2.)
2. Transactions are created and then sent to the node. Multiple events take place in this function. In the dao.tokamak.network, transactionHash event, confirmation event, and the error event are used. transactionHash event is for processing a pendingTransaction. confirmation event is for refreshing the status of a transaction after it is processed. Last, the error event is used when a transaction has failed.

@metamask/jazzicon

Metamask provides a different icon for each account. In the dao.tokamak.network, the jazzicon library has been used to create these sort of icons.

These icons are made as follows:

1. The 8 numbers excluding the 0x from the address are converted to integers. (Because account addresses are 16 numbers, parseInt uses the second factors.)

   iconNumber = parseInt(account.slice(2, 10), 16);