Estimate transaction costs
This page describes the actions happening in the contract/fixed-supply/deploy route.
In the previous step we redirected our users to the contract/fixed-supply/deploy route. This route works with the ContractDeploy module and its components.
Creating a fixed-supply component for the contract-deploy module
The next step is to follow the same pattern of the contract-create module for creating a component that will handle our fixed-supply crowdsale deployment.
ng generate component contract-deploy/fixed-supply --project=simple-icoDisplay the fixed-supply.component.html in the deploy route
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { ContractDeploymentFactory } from '@factory/contract-deployment.factory';
import { FixedSupplyDeployment } from '@factory/fixed-supply.deployment';
@Component({
selector: 'app-container',
templateUrl: './container.component.html',
styleUrls: ['./container.component.css']
})
export class ContainerComponent implements OnInit {
contractType: string
FixedSupplyDeployment: string = FixedSupplyDeployment._type
//...Get the deployer instance in the FixedSupplyComponent
As you may have noticed, we are getting the token and the crowdsale instance through the deployer methods. These methods are simply doing the following:
And deliver the same token and crowdsale contract instances we created in the contract/fixed-supply/create route.
These instances contain the NAME, SYMBOL, SUPPLY, PRICE and BENEFICIARY ADDRESS values we set in the previous step.
Estimating the gas costs of each contract transaction
Transactions that change the state of the smart contract imply a transaction cost represented as GAS and GAS PRICE. This is native to the Ethereum network and makes it sustainable.
Web3JS provides a way of estimating gas costs without actually changing the state of the contract. It does it by simulating the contract method call and returns a TransactionObject:
A note about transparency
The SCUI needs to be very transparent with the end-user, and remind them that the underlying processes may consume their ETH, which is real money.
This is why we will present the user the costs of:
Deploying the ERC20 token contract
Deploying the fixed-supply crowdsale contract
Transferring the token supply to the crowdsale
Calculating the costs of deploying the ERC20 token contract
Following the ngOnInit() method of the contract-deploy/fixed-supply/fixed-supply.component.ts, the algorithm takes us to the init() method:
A note about error handling
SimpleICO provides error types for handling certain errors throughout the SCUI flow. See error handling for more information.
This async method awaits for the estimateTransactionCosts() method to finish:
Contribute
Have a better way of handling this pattern? Fork the project and submit a pull-request!
Having a closer look to this method, we identify a pattern that changes the state of the component steps
SCUI fixed-supply crowdsale deploy steps
These steps are defined in the component as a series of nested objects:
Each step is used in the component template to guide the user through the deployment and transactions process:
As a developer of the SCUI for this contract, you are in complete control of displaying and changing the state of the deployment steps:
ContractDeployment.CONTRACT_DUMMY_ADDRESS
Because the contract is not deployed yet, we have no official address of the crowdsale contract, but you may still calculate gas costs, by passing a dummy address.
The transaction costs pattern repeats until we hit the this.steps.estimateTxCosts.isComplete = true line or are caught in the InsufficientFundsError
Each iteration of the pattern, adds the transaction costs of the previous txCost returned by the current deployer:
Finally, the EthereumService takes charge of formatting the gas price and gas as returned WEI to ETH or from USD to ETH, as well as returning the cost as a bigNumber instance:
Last updated