List a smart contract by type

Once an end-user deploys a smart contract through the SCUI, the contract address will be stored in the SimpleICO contract so it can be listed in the contract-index module.

contract/:contractType/index

Note

This step is optional as you may choose not to store the contract addresses in the SimpleICO contract.

This transaction (store the contract address in the SimpleICO contract) happens in the background after the SCUI flow is finished.

Create a fixed-supply crowdsale component in the contract-index module

ng generate component contract-index/fixed-supply --project=simple-ico

The steps are the same of the other contract modules:

1. Display the fixed-supply component in the contract-index container

2. Add the rules for displaying the contracts info by contract type

3. List them in the UI

https://github.com/SimpleICO/web-app/blob/master/src/app/contract-index/container.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

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

  constructor(
    public route: ActivatedRoute) {}

  ngOnInit(){
    this.route.params.subscribe(({ contractType }) => {
      this.contractType = contractType
    })
  }
}

https://github.com/SimpleICO/web-app/blob/master/src/app/contract-index/container.component.html

<app-header></app-header>
<app-mobile-menu></app-mobile-menu>

<main id="crowdsale-index">

  <app-fixed-supply *ngIf="FixedSupplyDeployment == contractType"></app-fixed-supply>

</main>

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

import { Component, OnInit } from '@angular/core';
import { WalletService } from '@service/wallet.service';
import { SettingsService } from '@service/settings.service';
import { SimpleICOContract } from '@contract/simpleico.contract';
import { SimpleCrowdsaleContract } from '@contract/simplecrowdsale.contract';

import { FixedSupplyDeployment } from '@factory/fixed-supply.deployment';

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

  simpleICO: SimpleICOContract

  crowdsales: Array<SimpleCrowdsaleContract> = []

  FixedSupplyDeployment: string = FixedSupplyDeployment._type

  constructor(
    public wallet: WalletService,
    public settings: SettingsService) {

    settings.onNetworkChange.subscribe((networkChanged) => {
      this.crowdsales = []
      this.ngOnInit()
      this.getCrowdsales()
    })
  }

  ngOnInit() {
    this.simpleICO = new SimpleICOContract(this.wallet.getInstance())
    this.simpleICO.connect()
  }

  ngAfterViewInit(){
    this.getCrowdsales()
  }

  async getCrowdsales(){
    let crowdsales = await this.simpleICO.instance.methods.getCrowdsales().call()

    this.initCrowdsales(crowdsales)
  }

  async initCrowdsales(crowdsales: Array<string>){
    if (crowdsales.length <= 0) {
      return false
    }

    let address = crowdsales.pop()

    let crowdsale = new SimpleCrowdsaleContract(this.wallet.getInstance())
    crowdsale.connect()
    crowdsale.setAddress(address)

    await crowdsale.setToken()

    let token = crowdsale.getToken()
    await token.getName()
    await token.getSymbol()

    this.crowdsales.push(crowdsale)

    this.initCrowdsales(crowdsales)
  }
}

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

<section class="section">
  <div class="container">
    <h5 class="title">Crowdsales</h5>

    <article class="token" *ngFor="let crowdsale of crowdsales">
      <span class="name">{{ crowdsale.getToken().name }}</span>
      <a [routerLink]="['/contract', crowdsale.getToken().crowdsale, 'show', FixedSupplyDeployment]" class="crowdsale text-truncate">{{ crowdsale.getToken().crowdsale }}</a>
    </article>
  </div>
</section>