import { Component , OnInit , OnChanges , Input , SimpleChanges , ChangeDetectionStrategy , ChangeDetectorRef } from '@angular/core' ; import { DomSanitizer , SafeStyle } from '@angular/platform-browser' ; import { Store } from '@ngrx/store' ; import * as blockies from 'blockies' ; import 'rxjs/add/operator/map' ; import 'rxjs/add/operator/shareReplay' ; import * as fromRoot from '../../shared/store/reducers' ; @ Component ( { selector : 'eth-kudos-blockie' , templateUrl : './blockie.component.html' , styleUrls : [ './blockie.component.scss' ] , changeDetection : ChangeDetectionStrategy . OnPush , } ) export class BlockieComponent implements OnInit , OnChanges { @ Input ( ) address : string ; @ Input ( ) variant : string ; @ Input ( ) noicon : undefined ; @ Input ( ) random : number ; blockie : SafeStyle ; readonly isActiveAccount$ = this . store . select ( fromRoot . getAccount ) . map ( ( account = '' ) => ( this . address || '' ) . toLowerCase ( ) === account . toLowerCase ( ) ) . shareReplay ( 1 ) ; constructor ( private store , private domSanitizer , private changeDetectorRef ) { } ngOnInit ( ) { if ( this . random !== undefined ) { const changeIt = ( ) => { this . blockie = this . getImageOf ( `###${ Math . random ( ) * ( 10 ** 4 ) }###` ) ; this . changeDetectorRef . markForCheck ( ) ; } ; changeIt ( ) ; setInterval ( ( ) => changeIt ( ) , + this . random || 1000 ) ; } } ngOnChanges ( changes ) { if ( changes . address ) { this . blockie = this . getImageOf ( this . address ) ; } } getImageOf ( account ) { return this . domSanitizer . bypassSecurityTrustStyle ( `url(${ blockies ( { seed : ( account || '#' ) . toLowerCase ( ) , size : 8 , scale : 8 } ) . toDataURL ( ) })` ) ; } }