Show sum of channel balances in token view

manuelwedler · manuelwedler · commit ac29f3873a57 · 2020-05-29T14:29:02.000+02:00
diff --git a/src/app/components/channel-list/channel-list.component.ts b/src/app/components/channel-list/channel-list.component.ts
@@ -18,13 +18,7 @@ import {
 } from '../open-dialog/open-dialog.component';
 import { RaidenConfig } from '../../services/raiden.config';
 import { RaidenService } from '../../services/raiden.service';
-import {
-    flatMap,
-    map,
-    takeUntil,
-    shareReplay,
-    debounceTime,
-} from 'rxjs/operators';
+import { flatMap, map, takeUntil, debounceTime } from 'rxjs/operators';
 import { MatDialog } from '@angular/material/dialog';
 import { Animations } from '../../animations/animations';
 import { TokenPollingService } from '../../services/token-polling.service';
@@ -33,7 +27,6 @@ import { SharedService } from '../../services/shared.service';
 import { matchesChannel, matchesContact } from '../../shared/keyword-matcher';
 import { AddressBookService } from '../../services/address-book.service';
 import { Contact } from '../../models/contact';
-import { TokenUtils } from '../../utils/token.utils';
 
 @Component({
     selector: 'app-channel-list',
@@ -67,12 +60,7 @@ export class ChannelListComponent implements OnInit, OnDestroy, AfterViewInit {
         private sharedService: SharedService,
         private addressBookService: AddressBookService
     ) {
-        this.tokens$ = this.tokenPollingService.tokens$.pipe(
-            map((tokens) =>
-                tokens.sort((a, b) => TokenUtils.compareTokens(a, b))
-            ),
-            shareReplay({ refCount: true, bufferSize: 1 })
-        );
+        this.tokens$ = this.tokenPollingService.tokens$;
     }
 
     ngOnInit() {
diff --git a/src/app/components/token-network-selector/token-network-selector.component.spec.ts b/src/app/components/token-network-selector/token-network-selector.component.spec.ts
@@ -36,7 +36,7 @@ describe('TokenNetworkSelectorComponent', () => {
         name: 'Another Test Token2',
         balance: new BigNumber(0),
     });
-    const tokens = [notOwnedToken, connectedToken, ownedToken];
+    const tokens = [connectedToken, ownedToken, notOwnedToken];
 
     beforeEach(async(() => {
         const tokenPollingMock = stub<TokenPollingService>();
@@ -70,24 +70,6 @@ describe('TokenNetworkSelectorComponent', () => {
         expect(component).toBeTruthy();
     });
 
-    it('should sort tokens first by connection, then owned and last not owned', (done) => {
-        component.tokens$.subscribe((value) => {
-            expect(value[0].address).toBe(
-                connectedToken.address,
-                'connection token should go first'
-            );
-            expect(value[1].address).toBe(
-                ownedToken.address,
-                'owned token should go second'
-            );
-            expect(value[2].address).toBe(
-                notOwnedToken.address,
-                'not owned token should go third'
-            );
-            done();
-        });
-    });
-
     it('should be able to only show connected tokens', (done) => {
         component.onlyConnectedTokens = true;
         fixture.detectChanges();
diff --git a/src/app/components/token-network-selector/token-network-selector.component.ts b/src/app/components/token-network-selector/token-network-selector.component.ts
@@ -45,7 +45,6 @@ export class TokenNetworkSelectorComponent implements ControlValueAccessor {
                     ? value.filter((token) => !!token.connected)
                     : value
             ),
-            map((value) => value.sort(TokenUtils.compareTokens)),
             share()
         );
     }
diff --git a/src/app/components/token/token.component.html b/src/app/components/token/token.component.html
@@ -67,14 +67,16 @@
                 fxFlex="7 0 0"
                 class="overview__item"
             >
-                <ng-container *ngIf="token.connected; else no_deposits">
+                <ng-container
+                    *ngIf="token.sumChannelBalances; else no_deposits"
+                >
                     <span
                         *ngIf="
-                            token.connected?.sum_deposits
-                                | decimal: token.decimals as sumDeposits
+                            token.sumChannelBalances
+                                | decimal: token.decimals as sumChannelBalances
                         "
-                        [matTooltip]="sumDeposits"
-                        >{{ sumDeposits | displayDecimals: 3 }}</span
+                        [matTooltip]="sumChannelBalances"
+                        >{{ sumChannelBalances | displayDecimals: 3 }}</span
                     >
                 </ng-container>
                 <ng-template #no_deposits>
@@ -188,14 +190,17 @@
 
     <div class="card__network" fxLayout="row">
         <div *ngIf="!isAllNetworksView; else all_networks">
-            <ng-container *ngIf="selectedToken.connected; else no_deposits">
+            <ng-container
+                *ngIf="selectedToken.sumChannelBalances; else no_deposits"
+            >
                 <span
                     *ngIf="
-                        selectedToken.connected?.sum_deposits
-                            | decimal: selectedToken.decimals as sumDeposits
+                        selectedToken.sumChannelBalances
+                            | decimal
+                                : selectedToken.decimals as sumChannelBalances
                     "
-                    [matTooltip]="sumDeposits"
-                    >{{ sumDeposits | displayDecimals: 3 }}</span
+                    [matTooltip]="sumChannelBalances"
+                    >{{ sumChannelBalances | displayDecimals: 3 }}</span
                 >
             </ng-container>
             <ng-template #no_deposits>
diff --git a/src/app/components/token/token.component.ts b/src/app/components/token/token.component.ts
@@ -9,7 +9,7 @@ import {
     ConfirmationDialogComponent,
 } from '../confirmation-dialog/confirmation-dialog.component';
 import { MatDialog } from '@angular/material/dialog';
-import { flatMap, takeUntil, map, shareReplay } from 'rxjs/operators';
+import { flatMap, takeUntil, map } from 'rxjs/operators';
 import { EMPTY, Subject, Observable } from 'rxjs';
 import {
     PaymentDialogPayload,
@@ -22,7 +22,6 @@ import {
 import { PendingTransferPollingService } from '../../services/pending-transfer-polling.service';
 import { ChannelPollingService } from '../../services/channel-polling.service';
 import { SelectedTokenService } from '../../services/selected-token.service';
-import { TokenUtils } from '../../utils/token.utils';
 import { RegisterDialogComponent } from '../register-dialog/register-dialog.component';
 import { PaymentHistoryPollingService } from '../../services/payment-history-polling.service';
 
@@ -48,12 +47,7 @@ export class TokenComponent implements OnInit, OnDestroy {
         private selectedTokenService: SelectedTokenService,
         private paymentHistoryPollingService: PaymentHistoryPollingService
     ) {
-        this.tokens$ = this.tokenPollingService.tokens$.pipe(
-            map((tokens) =>
-                tokens.sort((a, b) => TokenUtils.compareTokens(a, b))
-            ),
-            shareReplay({ refCount: true, bufferSize: 1 })
-        );
+        this.tokens$ = this.tokenPollingService.tokens$;
     }
 
     get production(): boolean {
diff --git a/src/app/models/usertoken.ts b/src/app/models/usertoken.ts
@@ -8,4 +8,5 @@ export interface UserToken {
     decimals: number;
     balance: BigNumber;
     connected?: Connection;
+    sumChannelBalances?: BigNumber;
 }
diff --git a/src/app/services/channel-polling.service.ts b/src/app/services/channel-polling.service.ts
@@ -1,6 +1,13 @@
 import { Injectable } from '@angular/core';
 import { BehaviorSubject, Observable, combineLatest } from 'rxjs';
-import { scan, switchMap, tap, map, shareReplay, startWith } from 'rxjs/operators';
+import {
+    scan,
+    switchMap,
+    tap,
+    map,
+    shareReplay,
+    startWith,
+} from 'rxjs/operators';
 import { Channel } from '../models/channel';
 import { RaidenConfig } from './raiden.config';
 import { RaidenService } from './raiden.service';
diff --git a/src/app/services/token-polling.service.spec.ts b/src/app/services/token-polling.service.spec.ts
@@ -3,40 +3,79 @@ import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { TokenPollingService } from './token-polling.service';
 import { RaidenService } from './raiden.service';
 import { TestProviders } from '../../testing/test-providers';
-import Spy = jasmine.Spy;
 import { UserToken } from '../models/usertoken';
-import { of } from 'rxjs';
-import { createToken } from '../../testing/test-data';
+import { of, BehaviorSubject } from 'rxjs';
+import { createToken, createChannel } from '../../testing/test-data';
 import BigNumber from 'bignumber.js';
+import { ChannelPollingService } from './channel-polling.service';
+import { stub } from '../../testing/stub';
+import { Channel } from '../models/channel';
 
 describe('TokenPollingService', () => {
     let raidenService: RaidenService;
-    let tokenSpy: Spy;
+    let channelsSubject: BehaviorSubject<Channel[]>;
 
     const token = createToken();
     const updatedToken = Object.assign({}, token, {
         balance: new BigNumber(50),
     });
+    const notOwnedToken = createToken({ balanc: new BigNumber(0) });
+
+    const connectedTokens = [
+        createToken({
+            connected: {
+                channels: 1,
+                funds: new BigNumber(0),
+                sum_deposits: new BigNumber(0),
+            },
+        }),
+        createToken({
+            connected: {
+                channels: 2,
+                funds: new BigNumber(0),
+                sum_deposits: new BigNumber(0),
+            },
+        }),
+    ];
+    const channels = [
+        createChannel({
+            userToken: connectedTokens[0],
+            balance: new BigNumber(50),
+        }),
+        createChannel({
+            userToken: connectedTokens[1],
+            balance: new BigNumber(15),
+        }),
+        createChannel({
+            userToken: connectedTokens[1],
+            balance: new BigNumber(5),
+        }),
+    ];
+
+    beforeEach(() => {
+        const channelPollingMock = stub<ChannelPollingService>();
+        channelsSubject = new BehaviorSubject<Channel[]>(channels);
+        // @ts-ignore
+        channelPollingMock.channels$ = channelsSubject.asObservable();
 
-    beforeEach(() =>
         TestBed.configureTestingModule({
             imports: [HttpClientTestingModule],
             providers: [
                 TokenPollingService,
+                ChannelPollingService,
                 RaidenService,
                 TestProviders.MockRaidenConfigProvider(),
                 TestProviders.AddressBookStubProvider(),
+                {
+                    provide: ChannelPollingService,
+                    useValue: channelPollingMock,
+                },
             ],
-        })
-    );
+        });
+    });
 
     beforeEach(() => {
         raidenService = TestBed.inject(RaidenService);
-        tokenSpy = spyOn(raidenService, 'getTokens').and.returnValues(
-            of([token]),
-            of([token]),
-            of([updatedToken])
-        );
     });
 
     it('should be created', inject(
@@ -49,6 +88,9 @@ describe('TokenPollingService', () => {
     it('should refresh the tokens every polling interval', inject(
         [TokenPollingService],
         fakeAsync((service: TokenPollingService) => {
+            const tokenSpy = spyOn(raidenService, 'getTokens').and.returnValue(
+                of([token])
+            );
             const subscription = service.tokens$.subscribe(
                 (tokens: UserToken[]) => {
                     expect(tokens).toEqual([token]);
@@ -70,6 +112,11 @@ describe('TokenPollingService', () => {
     it('should get updates for a token', inject(
         [TokenPollingService],
         fakeAsync((service: TokenPollingService) => {
+            spyOn(raidenService, 'getTokens').and.returnValues(
+                of([token]),
+                of([token]),
+                of([updatedToken])
+            );
             let emittedTimes = 0;
             const subscription = service
                 .getTokenUpdates(token.address)
@@ -87,4 +134,32 @@ describe('TokenPollingService', () => {
             flush();
         })
     ));
+
+    it('should calculate the sum of channel balances for each token', inject(
+        [TokenPollingService],
+        (service: TokenPollingService) => {
+            spyOn(raidenService, 'getTokens').and.returnValue(
+                of(connectedTokens)
+            );
+            service.tokens$.subscribe((tokens: UserToken[]) => {
+                expect(tokens[0].sumChannelBalances).toEqual(new BigNumber(50));
+                expect(tokens[1].sumChannelBalances).toEqual(new BigNumber(20));
+            });
+        }
+    ));
+
+    it('should sort tokens first by sum of channel balances, then owned and last not owned', inject(
+        [TokenPollingService],
+        (service: TokenPollingService) => {
+            spyOn(raidenService, 'getTokens').and.returnValue(
+                of(connectedTokens.concat([token, notOwnedToken]))
+            );
+            service.tokens$.subscribe((tokens: UserToken[]) => {
+                expect(tokens[0].address).toBe(connectedTokens[0].address);
+                expect(tokens[1].address).toBe(connectedTokens[1].address);
+                expect(tokens[2].address).toBe(token.address);
+                expect(tokens[3].address).toBe(notOwnedToken.address);
+            });
+        }
+    ));
 });
diff --git a/src/app/services/token-polling.service.ts b/src/app/services/token-polling.service.ts
@@ -1,10 +1,14 @@
 import { Injectable } from '@angular/core';
 import { RaidenService } from './raiden.service';
-import { BehaviorSubject, Observable } from 'rxjs';
+import { BehaviorSubject, Observable, combineLatest } from 'rxjs';
 import { UserToken } from '../models/usertoken';
 import { tap, switchMap, shareReplay, startWith, map } from 'rxjs/operators';
 import { backoff } from '../shared/backoff.operator';
 import { RaidenConfig } from './raiden.config';
+import { ChannelPollingService } from './channel-polling.service';
+import { Channel } from '../models/channel';
+import BigNumber from 'bignumber.js';
+import { TokenUtils } from '../utils/token.utils';
 
 @Injectable({
     providedIn: 'root',
@@ -19,15 +23,26 @@ export class TokenPollingService {
 
     constructor(
         private raidenService: RaidenService,
-        private raidenConfig: RaidenConfig
+        private raidenConfig: RaidenConfig,
+        private channelPollingService: ChannelPollingService
     ) {
         let timeout;
         this.tokens$ = this.tokensSubject.pipe(
             tap(() => {
                 clearTimeout(timeout);
                 this.refreshingSubject.next(true);
             }),
-            switchMap(() => this.raidenService.getTokens(true)),
+            switchMap(() =>
+                combineLatest([
+                    this.raidenService.getTokens(true),
+                    this.channelPollingService.channels$,
+                ])
+            ),
+            map(([tokens, channels]) =>
+                this.calculateSumOfBalances(tokens, channels).sort((a, b) =>
+                    TokenUtils.compareTokens(a, b)
+                )
+            ),
             tap(() => {
                 timeout = setTimeout(
                     () => this.refresh(),
@@ -62,4 +77,30 @@ export class TokenPollingService {
             })
         );
     }
+
+    private calculateSumOfBalances(
+        tokens: UserToken[],
+        channels: Channel[]
+    ): UserToken[] {
+        const summedBalances: { [tokenAddress: string]: BigNumber } = {};
+
+        channels.forEach((channel) => {
+            const tokenAddress = channel.token_address;
+            if (!summedBalances[tokenAddress]) {
+                summedBalances[tokenAddress] = channel.balance;
+                return;
+            }
+            summedBalances[tokenAddress] = summedBalances[tokenAddress].plus(
+                channel.balance
+            );
+        });
+
+        Object.entries(summedBalances).forEach(([tokenAddress, balance]) => {
+            const token = tokens.find((item) => tokenAddress === item.address);
+            if (token) {
+                token.sumChannelBalances = balance;
+            }
+        });
+        return tokens;
+    }
 }
diff --git a/src/app/utils/token.utils.spec.ts b/src/app/utils/token.utils.spec.ts
diff --git a/src/app/utils/token.utils.ts b/src/app/utils/token.utils.ts

Original file line number	Diff line number	Diff line change
`@@ -45,7 +45,6 @@ export class TokenNetworkSelectorComponent implements ControlValueAccessor {`
`45`	`45`	`? value.filter((token) => !!token.connected)`
`46`	`46`	`: value`
`47`	`47`	`),`
`48`		`- map((value) => value.sort(TokenUtils.compareTokens)),`
`49`	`48`	`share()`
`50`	`49`	`);`
`51`	`50`	`}`
Original file line number	Diff line number	Diff line change
`@@ -8,4 +8,5 @@ export interface UserToken {`
`8`	`8`	`decimals: number;`
`9`	`9`	`balance: BigNumber;`
`10`	`10`	`connected?: Connection;`
	`11`	`+ sumChannelBalances?: BigNumber;`
`11`	`12`	`}`