Passing the contract constructor params from the SCUI

Keeping up with our fixed-supply.component.ts, now we are ready to add some form inputs so the end-user may set the ERC20 token details as well as the crowdsale price.

Connecting form inputs to the *Contract classes

The deployer class already took charge of instantiating our token and crowdsale classes when we did:

export class FixedSupplyComponent implements OnInit {

  deployer: ContractDeployment
  
  ngOnInit() {
  
    this.deployer
      .createToken()
      .createCrowdsale()
      .createSimpleICO()
  }

Now, it's time to use the token and crowdsale references in our component HTML:

import { Component, OnInit, Input } from '@angular/core';
import { ContractDeploymentFactory } from '@factory/contract-deployment.factory';
import { ContractDeployment } from '@factory/contract-deployment';
import { Crowdsale } from '@model/crowdsale.model';
import { Token } from '@model/token.model';

@Component({
  selector: 'app-fixed-supply',
  templateUrl: './fixed-supply.component.html',
  styleUrls: ['./fixed-supply.component.css']
})
export class FixedSupplyComponent implements OnInit {

  deployer: ContractDeployment

  @Input() token: Token

  @Input() crowdsale: Crowdsale

  constructor(
    private contractFactory: ContractDeploymentFactory) {

    this.deployer = contractFactory.deployer

  }

  ngOnInit() {
    console.log(this.deployer)

    this.deployer
      .createToken()
      .createCrowdsale()
      .createSimpleICO()

    this.token = this.deployer.getToken()
    this.crowdsale = this.deployer.getCrowdsale()
  }

Having the @Input() references, will make configuring our form inputs easy:

https://github.com/SimpleICO/web-app/blob/master/src/app/contract-create/fixed-supply/fixed-supply.component.html

<section class="section">
  <div class="container">
    <h4 class="text-white">Create your own ERC20 token and crowdsale</h4>
    <fieldset class="form-group dark-theme">
      <label for="token-name">Token name</label>
      <input
        required
        autofocus="autofocus"
        type="text"
        class="form-control"
        placeholder="eg. SimpleICO Coin"
        [(ngModel)]="token.name">
    </fieldset>
    ...
    <button class="btn btn-primary btn-lg btn-block" (click)="onCreateCrowdsale()">Create Crowdsale</button>

The important part of the previous code block is the [(ngModel)]="token.name" attribute of the text input. This is passing the name string to the SimpleTokenContract reference defined in the component.

This SimpleTokenContract is the same in any part that we use the deployer, so we can have an standard SimpleTokenContract class across all of our SCUI flow routes.

SCUI results in:

contract/fixed-supply/create

Passing the input to the contract deploy route

Let's take a look at the onCreateCrowdsale() method defined in the fixed-supply.component.ts

onCreateCrowdsale(){
  console.log(this.token, this.crowdsale)

  // optional input validation...

  return this.router.navigate([`/contract/${this.deployer.type}/deploy`]);
}

After validating the form input, we'll simply redirect the user to the contract/:contractType/deploy route to continue with the SCUI flow.