Add identicon caching to the webui

Author: kelsos

raiden/ui/web/src/app/components/channel-table/channel-table.component.ts

@@ -1,13 +1,13 @@
 import { animate, state, style, transition, trigger } from '@angular/animations';
 import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { MatDialog, MatPaginator, PageEvent } from '@angular/material';
-import { default as makeBlockie } from 'ethereum-blockies-base64';
 import { EMPTY, Subscription } from 'rxjs';
 import { Observable } from 'rxjs/internal/Observable';
 import { flatMap } from 'rxjs/operators';
 import { Channel } from '../../models/channel';
 import { SortingData } from '../../models/sorting.data';
 import { ChannelPollingService } from '../../services/channel-polling.service';
+import { IdenticonCacheService } from '../../services/identicon-cache.service';
 import { RaidenConfig } from '../../services/raiden.config';
 import { RaidenService } from '../../services/raiden.service';
 import { StringUtils } from '../../utils/string.utils';
@@ -89,7 +89,8 @@ export class ChannelTableComponent implements OnInit, OnDestroy {
         public dialog: MatDialog,
         private raidenConfig: RaidenConfig,
         private raidenService: RaidenService,
-        private channelPollingService: ChannelPollingService
+        private channelPollingService: ChannelPollingService,
+        private identiconCacheService: IdenticonCacheService
     ) {
     }
 
@@ -137,7 +138,7 @@ export class ChannelTableComponent implements OnInit, OnDestroy {
 
     // noinspection JSMethodCanBeStatic
     identicon(channel: Channel): string {
-        return makeBlockie(channel.partner_address);
+        return this.identiconCacheService.getIdenticon(channel.partner_address);
     }
 
     public onPay(channel: Channel) {

raiden/ui/web/src/app/components/open-dialog/open-dialog.component.ts

@@ -2,10 +2,10 @@ import { Component, Inject, OnInit } from '@angular/core';
 import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
 import { BigNumber } from 'bignumber.js';
-import { default as makeBlockie } from 'ethereum-blockies-base64';
 import { from, Observable } from 'rxjs';
 import { filter, flatMap, share, startWith, takeWhile, toArray } from 'rxjs/operators';
 import { UserToken } from '../../models/usertoken';
+import { IdenticonCacheService } from '../../services/identicon-cache.service';
 import { RaidenService } from '../../services/raiden.service';
 
 export class OpenDialogPayload {
@@ -45,6 +45,7 @@ export class OpenDialogComponent implements OnInit {
         @Inject(MAT_DIALOG_DATA) public data: OpenDialogPayload,
         public dialogRef: MatDialogRef<OpenDialogComponent>,
         public raidenService: RaidenService,
+        private identiconCacheService: IdenticonCacheService,
         private fb: FormBuilder,
     ) {
     }
@@ -128,7 +129,7 @@ export class OpenDialogComponent implements OnInit {
         if (!address) {
             return '';
         }
-        return makeBlockie(address);
+        return this.identiconCacheService.getIdenticon(address);
     }
 
     tokenSelected(value: UserToken) {

raiden/ui/web/src/app/components/payment-dialog/payment-dialog.component.html

@@ -49,7 +49,7 @@ <h1 mat-dialog-title>Pay</h1>
         <mat-autocomplete #auto="matAutocomplete"
                           [autoActiveFirstOption]="'true'"
                           (optionSelected)="tokenSelected($event.option.value)">
-            <mat-option *ngFor="let option of filteredOptions$ | async"
+            <mat-option *ngFor="let option of filteredOptions$ | async; trackBy: trackByFn"
                         [value]="option">
                 {{option | token }}
             </mat-option>

raiden/ui/web/src/app/components/payment-dialog/payment-dialog.component.ts

@@ -2,11 +2,11 @@ import { Component, Inject, OnInit } from '@angular/core';
 import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
 import { BigNumber } from 'bignumber.js';
-import { default as makeBlockie } from 'ethereum-blockies-base64';
 import { from, Observable } from 'rxjs';
 import { filter, flatMap, share, startWith, toArray } from 'rxjs/operators';
 import { UserToken } from '../../models/usertoken';
 import { TokenPipe } from '../../pipes/token.pipe';
+import { IdenticonCacheService } from '../../services/identicon-cache.service';
 
 import { RaidenService } from '../../services/raiden.service';
 
@@ -40,6 +40,7 @@ export class PaymentDialogComponent implements OnInit {
         @Inject(MAT_DIALOG_DATA) public data: PaymentDialogPayload,
         public dialogRef: MatDialogRef<PaymentDialogComponent>,
         private raidenService: RaidenService,
+        private identiconCacheService: IdenticonCacheService,
         private fb: FormBuilder
     ) {
         this.tokenPipe = new TokenPipe();
@@ -120,7 +121,12 @@ export class PaymentDialogComponent implements OnInit {
         if (!address) {
             return '';
         }
-        return makeBlockie(address);
+        return this.identiconCacheService.getIdenticon(address);
+    }
+
+    // noinspection JSMethodCanBeStatic
+    trackByFn(token: UserToken): string {
+        return token.address;
     }
 
     private _filter(value?: string): Observable<UserToken[]> {

raiden/ui/web/src/app/services/channel-polling.service.ts

@@ -41,7 +41,6 @@ export class ChannelPollingService {
                 this.checkForNewChannels(oldChannels, newChannels);
                 return newChannels;
             }, []),
-            tap(console.log),
             share()
         );
     }

raiden/ui/web/src/app/services/identicon-cache.service.spec.ts

@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { IdenticonCacheService } from './identicon-cache.service';
+
+describe('IdenticonCacheService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [IdenticonCacheService]
+    });
+  });
+
+  it('should be created', inject([IdenticonCacheService], (service: IdenticonCacheService) => {
+    expect(service).toBeTruthy();
+  }));
+});

raiden/ui/web/src/app/services/identicon-cache.service.ts

@@ -0,0 +1,26 @@
+import { Injectable } from '@angular/core';
+import makeBlockie from 'ethereum-blockies-base64';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class IdenticonCacheService {
+
+    private cache: { [id: string]: string } = {};
+
+    constructor() {
+    }
+
+    public getIdenticon(address: string): string {
+        const cached = this.cache[address];
+
+        if (!cached) {
+            const generated = makeBlockie(address);
+            this.cache[address] = generated;
+            return generated;
+        } else {
+            return cached;
+        }
+    }
+
+}