bahurudeen

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import {
  MatButtonModule,
  MatToolbarModule,
  MatMenuModule,
  MatIconModule,
  MatCardModule,
  MatFormFieldModule,
  MatInputModule,

bahurudeen

import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
import { RegisterComponent } from "./register/register.component";
import { OrganizerComponent } from "./organizer/organizer.component";

const routes: Routes = [
  {
    path: "",
    component: RegisterComponent
  },

bahurudeen

<app-toolbar></app-toolbar>
<router-outlet></router-outlet>

bahurudeen

<mat-toolbar color="primary">
  <mat-toolbar-row>
    <span>Exhibition</span>
    <span class="example-spacer"></span>
    <button mat-button routerLink="">Register</button>
    <button mat-button routerLink="organizer">Organizer</button>
  </mat-toolbar-row>
</mat-toolbar>

bahurudeen

import { Component, OnInit } from "@angular/core";

// import Web3Service
import { Web3Service } from "../web3.service";

@Component({
  selector: "app-organizer",
  templateUrl: "./organizer.component.html",
  styleUrls: ["./organizer.component.css"]
})

bahurudeen

<mat-tab-group>
  <mat-tab label="Participants">
    <mat-list>
      <mat-list-item *ngFor="let participant of participants">
        {{ participant }}
        <mat-divider></mat-divider>
      </mat-list-item>
    </mat-list>
  </mat-tab>
  <mat-tab label="Winner">

bahurudeen

import { Component, OnInit } from "@angular/core";
// web3Service
import { Web3Service } from "../web3.service";

// import FormGroup and FormBuilder
import { FormGroup, FormBuilder } from "@angular/forms";

@Component({
  selector: "app-register",
  templateUrl: "./register.component.html",

bahurudeen

<mat-card>
  <mat-card-title>
    Participant Registration
  </mat-card-title>
  <mat-card-content>
    <mat-spinner [style.display]="showSpinner ? 'block' : 'none'"></mat-spinner>
    <form [formGroup]='form' (ngSubmit)='onSubmit()'>
      <mat-form-field class="demo-full-width">
        <mat-icon matPrefix>account_box</mat-icon>
        <input matInput formControlName="name">

bahurudeen

import { Injectable } from "@angular/core";
// import Web3 from web3.js
import Web3 from "web3";

// import exhibition contract from exhibition.json file
// which saved when deployed the contract.
import contract from "../../../SmartContracts/build/exhibition.json";

declare let window: any;

bahurudeen

// It is used to sign transactions for web3 wallet.
const HDWalletProvider = require("truffle-hdwallet-provider");

// It is used to interact with Ethereum smart contracts
const Web3 = require("web3");

// Interface and bytecode object from compiled exhibition contract
const { interface, bytecode } = require("./compile");

// list of 12 words key to connect account. You can get this key when you setup a MetaMask