Skip to content

Instantly share code, notes, and snippets.

François GrandSchtroumpf

View GitHub Profile
@GrandSchtroumpf
GrandSchtroumpf / eth.module.ts
Last active Apr 12, 2018
EthModule with web3 provider
View eth.module.ts
import { NgModule, ModuleWithProviders, Type } from '@angular/core';
import { CommonModule } from '@angular/common';
// Web3
import { WEB3 } from './tokens';
const Web3 = require('web3');
// Services
import { AccountsService } from './eth.services';
@NgModule({
@GrandSchtroumpf
GrandSchtroumpf / getAccounts.ts
Created Apr 12, 2018
Get accounts wrapper for Angular
View getAccounts.ts
/** Return the list of accounts available */
public getAccounts(): Observable<string[]> {
return fromPromise(this.web3.eth.getAccounts());
}
@GrandSchtroumpf
GrandSchtroumpf / currentAccount.ts
Created Apr 12, 2018
Get the current account or set it if there is no current account
View currentAccount.ts
/** Get the current account */
public currentAccount(): Observable<string | Error> {
if (this.web3.eth.defaultAccount) {
return of(this.web3.eth.defaultAccount);
} else {
return this.getAccounts().pipe(
tap((accounts: string[]) => {
if (accounts.length === 0) { throw new Error('No accounts available'); }
}),
map((accounts: string[]) => accounts[0]),
@GrandSchtroumpf
GrandSchtroumpf / eth.service.ts
Created Apr 12, 2018
The Ethereum service to manage accounts
View eth.service.ts
import { Injectable, Inject } from '@angular/core';
// Web3
import { WEB3 } from './tokens';
import Web3 from 'web3';
// RXJS
import { Observable } from 'rxjs/Observable';
import { bindNodeCallback } from 'rxjs/observable/bindNodeCallback';
import { of } from 'rxjs/observable/of';
import { map, tap, catchError } from 'rxjs/operators';
@GrandSchtroumpf
GrandSchtroumpf / web3.token.ts
Created Apr 12, 2018
Injectable Token for Web3
View web3.token.ts
import { InjectionToken } from '@angular/core';
import Web3 from ‘web3’;
export const WEB3 = new InjectionToken<Web3>('web3');
@GrandSchtroumpf
GrandSchtroumpf / eth.component.ts
Created Apr 12, 2018
The component to interact with Ethereum
View eth.component.ts
import { Component, OnInit } from '@angular/core';
import { EthService } from './ethereum/eth.service';
@Component({
selector: 'app-root',
template: '<p>Current Account: {{address$ | async}}',
styles: []
})
export class AppComponent implements OnInit {
public address$: Observable<string>;
@GrandSchtroumpf
GrandSchtroumpf / eth.component.zone.ts
Created Apr 12, 2018
The Angular component with ngZone to interact with Ethereum
View eth.component.zone.ts
import { Component, OnInit, OnDestroy, NgZone } from '@angular/core';
import { EthService } from './ethereum/eth.service';
@Component({
selector: 'app-root',
template: '<p>Current Account: {{ address }}',
styles: []
})
export class AppComponent implements OnInit, OnDestroy {
public address: string;
@GrandSchtroumpf
GrandSchtroumpf / eth.module.ngrx.ts
Created Apr 12, 2018
Import ngrx into our module
View eth.module.ngrx.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { environment } from './../../environments/environment';
// Web3
import { WEB3 } from './tokens';
const Web3 = require('web3');
// Services
import { AccountsService } from './eth.services';
@GrandSchtroumpf
GrandSchtroumpf / eth.actions.ts
Created Apr 12, 2018
The NGRX actions to work with Ethereum accounts
View eth.actions.ts
import { Action } from '@ngrx/store';
/**
* TYPES
*/
export const GET_ACCOUNTS = '[Eth] Get Accounts';
export const GET_ACCOUNTS_SUCCESS = '[Eth] Get Accounts Success';
export const SELECT_ACCOUNT = '[Eth] Select Account';
View eth.reducers.ts
import { GET_ACCOUNTS_SUCCESS, SELECT_ACCOUNT, AccountsActions } from './eth.actions';
export interface State {
selected: string,
accounts: string[]
}
const initialState: State = {
selected: null,
accounts: []
You can’t perform that action at this time.