AngularWeb3Components

Angular Web3 components library

Installation

The package can be installed via npm:

npm i angular-web3-components

You'll need to import AngularWeb3ComponentsModule to your module:

import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {AngularWeb3ComponentsModule} from 'angular-web3-components';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    AngularWeb3ComponentsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Recent transactions component

Component for storing and displaying recent transactions from Web3.

Usage

You'll need to provide AngularWeb3RecentTransactionsService to your root module:

import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {AngularWeb3ComponentsModule} from 'angular-web3-components';
import {AngularWeb3RecentTransactionsService} from 'angular-web3-components';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    AngularWeb3ComponentsModule
  ],
  providers: [AngularWeb3RecentTransactionsService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Then use component like below:

<ng-web3-recent-transactions [accountAddress]="accountAddress" 
                             [applicationName]="applicationName" 
                             [storageService]="storageService" 
                             [web3]="web3"></ng-web3-recent-transactions>

where

• accountAddress - user account address, used for storage unique key.
• applicationNames - your application name, used for storage unique key.
• storageService - your storage service. Should implements IAngularWeb3StorageService model:

import {IAngularWeb3StorageService} from 'angular-web3-components'

export class myStorageService implements IAngularWeb3StorageService {
  
    get(key: string): any {
      // get from storage
    }
    
    set(key: string, value: any): boolean {
      // set to storage
    }
    
    remove(key: string): boolean {
      // remove from storage
    }
}

• web3 - your web3 object.

In order save transactions, you need to call saveTransaction method of AngularWeb3RecentTransactionsService:

import { Component } from '@angular/core';
import {AngularWeb3RecentTransactionsService} from 'angular-web3-components';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent {
  
  constructor(public recentTransactionsService: AngularWeb3RecentTransactionsService) { }

  public saveTransaction(name: string, hash: string, ): void {
    this.recentTransactionsService.saveTransaction(name, hash);
  }
}

where

• name - transaction name
• hash - transaction hash

In order to know when transaction completed or reverted - subscribe to transactionStatusChange property of AngularWeb3RecentTransactionsService, which emits IAngularWeb3Transaction object each time when particular transaction status has been changed from 'pending' to 'success' or 'fail':

import { Component, OnInit } from '@angular/core';
import {AngularWeb3RecentTransactionsService, IAngularWeb3Transaction} from 'angular-web3-components';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnInit {
  
  constructor(public recentTransactionsService: AngularWeb3RecentTransactionsService) { }

  ngOnInit() {
    this.recentTransactionsService.transactionStatusChange.subscribe((transaction: IAngularWeb3Transaction) => {
      // do something
    });
  }
}

Also you can subscribe to transactionsChange property of AngularWeb3RecentTransactionsService, which emits full array with transactions of IAngularWeb3Transaction type on any transaction change:

import { Component, OnInit } from '@angular/core';
import {AngularWeb3RecentTransactionsService, IAngularWeb3Transaction} from 'angular-web3-components';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnInit {
  
  constructor(public recentTransactionsService: AngularWeb3RecentTransactionsService) { }

  ngOnInit() {
    this.recentTransactionsService.transactionsChange.subscribe((transactions: IAngularWeb3Transaction[]) => {
      // do something
    });
  }
}

IAngularWeb3Transaction type is as follows:

export interface IAngularWeb3Transaction {
  name: string;
  hash: string;
  status: 'pending' | 'success' | 'fail';
}

where

• name - transaction name
• hash - transaction hash
• status - transaction status, which can be 'pending', 'success' or 'fail'

##Compatibility

Angular 9 and newer