[skip ci] Implement TokenPipe and use it across app

raiden-network · Sep 12, 2017 · 2143e0a · 2143e0a
1 parent 4545cbf
commit 2143e0a
Show file tree

Hide file tree

Showing 10 changed files with 89 additions and 33 deletions.
diff --git a/raiden/ui/web/src/app/app.module.ts b/raiden/ui/web/src/app/app.module.ts
@@ -29,6 +29,7 @@ import { RaidenConfig } from './services/raiden.config';
 import { RaidenService } from './services/raiden.service';
 import { KeysPipe } from './pipes/keys.pipe';
 import { SubsetPipe } from './pipes/subset.pipe';
+import { TokenPipe } from './pipes/token.pipe';
 
 const appRoutes: Routes = [
     { path: '', redirectTo: '/home', pathMatch: 'full' },
@@ -50,12 +51,13 @@ export function ConfigLoader(raidenConfig: RaidenConfig) {
         TokenNetworkComponent,
         HomeComponent,
         SwapDialogComponent,
-        KeysPipe,
-        SubsetPipe,
         TransferDialogComponent,
         JoinDialogComponent,
         RegisterDialogComponent,
         OpenDialogComponent,
+        KeysPipe,
+        SubsetPipe,
+        TokenPipe,
     ],
     imports: [
         RouterModule.forRoot(appRoutes),
@@ -99,6 +101,7 @@ export function ConfigLoader(raidenConfig: RaidenConfig) {
         },
         RaidenService,
         ConfirmationService,
+        TokenPipe,
     ],
     bootstrap: [AppComponent]
 })

diff --git a/raiden/ui/web/src/app/components/channel-table/channel-table.component.html b/raiden/ui/web/src/app/components/channel-table/channel-table.component.html
@@ -18,7 +18,7 @@
       </p-column>
       <p-column field="token_address" header="Token" [sortable]="true">
         <ng-template let-col let-data="rowData" pTemplate="body">
-          <span [title]="data[col.field]">{{ data[col.field] }}</span>
+          <span [title]="data[col.field]">{{ data[col.field] | token | async }}</span>
         </ng-template>
       </p-column>
       <p-column field="balance" header="Balance" [style]="{width: '7em', 'text-align': 'center'}" [sortable]="true"></p-column>

diff --git a/raiden/ui/web/src/app/components/open-dialog/open-dialog.component.ts b/raiden/ui/web/src/app/components/open-dialog/open-dialog.component.ts
@@ -2,10 +2,11 @@ import { Component, OnInit, OnDestroy, Input, Output, EventEmitter } from '@angu
 import { FormControl, FormGroup, FormBuilder } from '@angular/forms';
 import { Observable } from 'rxjs/Observable';
 import { Subscription } from 'rxjs/Subscription';
+import { SelectItem } from 'primeng/primeng';
 
 import { RaidenService } from '../../services/raiden.service';
 import { SharedService } from '../../services/shared.service';
-import { SelectItem } from 'primeng/primeng';
+import { TokenPipe } from '../../pipes/token.pipe';
 
 @Component({
     selector: 'app-open-dialog',
@@ -21,18 +22,16 @@ export class OpenDialogComponent implements OnInit, OnDestroy {
     public tokenAddressMapping$: Observable<SelectItem[]>;
     public form: FormGroup;
 
-    constructor(private raidenService: RaidenService,
+    constructor(
+        private raidenService: RaidenService,
         private sharedService: SharedService,
-        private fb: FormBuilder) { }
+        private fb: FormBuilder,
+        private tokenPipe: TokenPipe,
+    ) { }
 
     ngOnInit() {
         this.tokenAddressMapping$ = this.raidenService.getTokens()
-            .map((userTokens) => userTokens.map((userToken) =>
-                ({
-                    value: userToken.address,
-                    label: userToken.name + ' (' + userToken.address + ')',
-                }))
-            );
+            .map((userTokens) => this.tokenPipe.tokensToSelectItems(userTokens));
 
         this.form = this.fb.group({
             partner_address: [null, (control) =>

diff --git a/raiden/ui/web/src/app/components/swap-dialog/swap-dialog.component.ts b/raiden/ui/web/src/app/components/swap-dialog/swap-dialog.component.ts
@@ -7,6 +7,7 @@ import { SelectItem } from 'primeng/primeng';
 import { RaidenService } from '../../services/raiden.service';
 import { SharedService } from '../../services/shared.service';
 import { SwapToken } from '../../models/swaptoken';
+import { TokenPipe } from '../../pipes/token.pipe';
 
 const DIV = '/';
 const TEST_CONTROLS = ['partner_address', 'identifier',
@@ -31,18 +32,16 @@ export class SwapDialogComponent implements OnInit, OnDestroy {
     public showTakerString$: Observable<boolean>;
     public takerStringFC: FormControl = new FormControl(null);
 
-    constructor(private raidenService: RaidenService,
+    constructor(
+        private raidenService: RaidenService,
         private sharedService: SharedService,
-        private fb: FormBuilder) { }
+        private fb: FormBuilder,
+        private tokenPipe: TokenPipe,
+    ) { }
 
     ngOnInit() {
         this.tokenAddressMapping$ = this.raidenService.getTokens()
-            .map((userTokens) => userTokens.map((userToken) =>
-                ({
-                    value: userToken.address,
-                    label: `${userToken.name} (${userToken.address})`
-                }))
-            )
+            .map((userTokens) => this.tokenPipe.tokensToSelectItems(userTokens))
             .share();
 
         this.form = this.fb.group({

diff --git a/raiden/ui/web/src/app/components/token-network/token-network.component.ts b/raiden/ui/web/src/app/components/token-network/token-network.component.ts
@@ -46,7 +46,8 @@ export class TokenNetworkComponent implements OnInit {
                     { menu: this.menuFor(userToken) }
                 ) as WithMenu<Usertoken>
             ))
-            .do(() => this.refreshing = false);
+            .do(() => this.refreshing = false,
+                () => this.refreshing = false);
     }
 
     private menuFor(userToken: Usertoken): MenuItem[] {
@@ -65,7 +66,7 @@ export class TokenNetworkComponent implements OnInit {
             {
                 label: 'Transfer',
                 icon: 'fa-exchange',
-                disabled: !(userToken.connected),
+                disabled: !(userToken.connected && userToken.balance > 0),
                 command: () => this.showTransferDialog(userToken),
             },
             {

diff --git a/raiden/ui/web/src/app/components/transfer-dialog/transfer-dialog.component.ts b/raiden/ui/web/src/app/components/transfer-dialog/transfer-dialog.component.ts
@@ -7,6 +7,7 @@ import { SelectItem } from 'primeng/primeng';
 import { RaidenService } from '../../services/raiden.service';
 import { SharedService } from '../../services/shared.service';
 import { SwapToken } from '../../models/swaptoken';
+import { TokenPipe } from '../../pipes/token.pipe';
 
 
 @Component({
@@ -24,9 +25,12 @@ export class TransferDialogComponent implements OnInit, OnDestroy {
     public form: FormGroup;
     public tokenAddressMapping$: Observable<SelectItem[]>;
 
-    constructor(private raidenService: RaidenService,
+    constructor(
+        private raidenService: RaidenService,
         private sharedService: SharedService,
-        private fb: FormBuilder) { }
+        private fb: FormBuilder,
+        private tokenPipe: TokenPipe,
+    ) { }
 
     ngOnInit() {
         this.form = this.fb.group({
@@ -38,12 +42,7 @@ export class TransferDialogComponent implements OnInit, OnDestroy {
         });
 
         this.tokenAddressMapping$ = this.raidenService.getTokens()
-            .map((userTokens) => userTokens.map((userToken) =>
-                ({
-                    value: userToken.address,
-                    label: userToken.name + ' (' + userToken.address + ')',
-                }))
-            )
+            .map((userTokens) => this.tokenPipe.tokensToSelectItems(userTokens))
             .share();
     }
 

diff --git a/raiden/ui/web/src/app/pipes/token.pipe.spec.ts b/raiden/ui/web/src/app/pipes/token.pipe.spec.ts
@@ -0,0 +1,8 @@
+import { TokenPipe } from './token.pipe';
+
+describe('TokenPipe', () => {
+  it('create an instance', () => {
+    const pipe = new TokenPipe();
+    expect(pipe).toBeTruthy();
+  });
+});
diff --git a/raiden/ui/web/src/app/pipes/token.pipe.ts b/raiden/ui/web/src/app/pipes/token.pipe.ts
@@ -0,0 +1,46 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+import { SelectItem } from 'primeng/primeng';
+
+import { RaidenService } from '../services/raiden.service';
+import { Usertoken } from '../models/usertoken';
+
+@Pipe({
+  name: 'token'
+})
+export class TokenPipe implements PipeTransform {
+
+  constructor(private raidenService: RaidenService) {}
+
+  tokenToString(token: Usertoken): string {
+    let text = '';
+    if (!token) {
+      return '';
+    }
+    if (token.symbol) {
+      text += `[${token.symbol}] `;
+    }
+    if (token.name) {
+      text += `${token.name} `;
+    }
+    if (text) {
+      text += `(${token.address})`;
+    } else {
+      text = token.address;
+    }
+    return text;
+  }
+
+  tokensToSelectItems(tokens: Array<Usertoken>): Array<SelectItem> {
+    return tokens.map((token) => ({
+      value: token.address,
+      label: this.tokenToString(token)
+    }));
+  }
+
+  transform(address: string, args?: any): Observable<string> {
+    return this.raidenService.getUsertoken(address, false)
+      .map((token) => this.tokenToString(token));
+  }
+
+}
diff --git a/raiden/ui/web/src/app/services/raiden.config.ts b/raiden/ui/web/src/app/services/raiden.config.ts
@@ -43,7 +43,7 @@ export class RaidenConfig {
                     this.web3.version.getNetwork((err, res) => {
                         if (err) {
                             console.error('Invalid web3 endpoint', err);
-                            console.info('Switching to fallback: ' + this.config.web3_fallback);
+                            console.log('Switching to fallback: ' + this.config.web3_fallback);
                             this.config.web3 = this.config.web3_fallback;
                             this.web3 = new Web3(new Web3.providers.HttpProvider(this.config.web3));
                         } else {

diff --git a/raiden/ui/web/src/app/services/raiden.service.ts b/raiden/ui/web/src/app/services/raiden.service.ts
@@ -210,9 +210,10 @@ export class RaidenService {
             .first();
     }
 
-    private getUsertoken(
+    public getUsertoken(
         tokenAddress: string,
-        refresh: boolean = true): Observable<Usertoken |null> {
+        refresh: boolean = true
+    ): Observable<Usertoken | null> {
         const tokenContractInstance = this.tokenContract.at(tokenAddress);
         const userToken: Usertoken |null | undefined = this.userTokens[tokenAddress];
         if (userToken === undefined) {