Marks balance of new channels as awaiting while deposit is pending

CHANGELOG.md

@@ -9,6 +9,7 @@
 ### Added
 - [#167] Shows toast notifications for new pending actions.
 - [#172] Adds a close button to notification panel.
+- [#83] Marks balance of newly opened channels as `awaiting` while the deposit is pending.
 
 ## [0.10.0] - 2019-09-27
 ### Changed
@@ -120,6 +121,7 @@ token network.
 [#94]: https://github.com/raiden-network/webui/issues/94
 [#87]: https://github.com/raiden-network/webui/issues/87
 [#85]: https://github.com/raiden-network/webui/issues/85
+[#83]: https://github.com/raiden-network/webui/issues/83
 [#79]: https://github.com/raiden-network/webui/issues/79
 [#66]: https://github.com/raiden-network/webui/issues/66
 [#60]: https://github.com/raiden-network/webui/issues/60

proxy.config.json

@@ -1,7 +1,8 @@
 {
     "/api": {
         "target": "http://localhost:5001",
-        "proxyTimeout": 600000
+        "proxyTimeout": 600000,
+        "timeout": 600000
     },
     "/web3": {
         "target": "http://localhost:8545",

src/app/components/channel-table/channel-table.component.html

@@ -97,7 +97,11 @@
             </div>
 
             <div class="item-label" fxLayout="row">Balance</div>
-            <div class="item-info" fxLayout="row">
+            <div
+                class="item-info"
+                fxLayout="row"
+                *ngIf="!channel.depositPending; else deposit_pending"
+            >
                 <span
                     *ngIf="
                         (channel.balance
@@ -117,6 +121,12 @@
                     {{ channel.userToken.symbol }}
                 </sup>
             </div>
+            <ng-template #deposit_pending>
+                <div class="item-info">
+                    awaiting
+                </div>
+            </ng-template>
+
             <div class="channel-status" fxLayout="row">
                 <span class="item-label">Status:</span>
                 <span class="light space">{{ channel.state | status }}</span>

src/app/models/channel.ts

@@ -12,4 +12,5 @@ export interface Channel {
     settle_timeout: number;
     reveal_timeout: number;
     userToken?: UserToken;
+    depositPending?: boolean;
 }

src/app/services/raiden.service.spec.ts

@@ -1153,14 +1153,68 @@ describe('RaidenService', () => {
             }
         );
 
-        const getChannelsRequest = mockHttp.expectOne({
+        const getPendingTransfersRequest = mockHttp.expectOne({
             url: `${endpoint}/pending_transfers`,
             method: 'GET'
         });
 
-        getChannelsRequest.flush(losslessStringify([pendingTransfer]), {
+        getPendingTransfersRequest.flush(losslessStringify([pendingTransfer]), {
             status: 200,
             statusText: ''
         });
     });
+
+    it('should mark channels deposit as pending while they are opened', fakeAsync(() => {
+        spyOn(service, 'getTokens').and.returnValue(of([token]));
+        const channel3: Channel = createChannel({
+            id: new BigNumber(2),
+            balance: new BigNumber(0),
+            totalDeposit: new BigNumber(10),
+            totalWithdraw: new BigNumber(10)
+        });
+        channel3.partner_address = '0xc52952ebad56f2c5e5b42bb881481ae27d036475';
+
+        service
+            .openChannel(
+                channel1.token_address,
+                channel1.partner_address,
+                500,
+                new BigNumber(10)
+            )
+            .subscribe();
+        const openChannelRequest = mockHttp.expectOne({
+            url: `${endpoint}/channels`,
+            method: 'PUT'
+        });
+
+        service.getChannels().subscribe((channels: Array<Channel>) => {
+            channels.forEach(channel => {
+                if (
+                    channel.channel_identifier.isEqualTo(
+                        channel1.channel_identifier
+                    )
+                ) {
+                    expect(channel.depositPending).toBe(true);
+                } else {
+                    expect(channel.depositPending).toBe(false);
+                }
+            });
+        });
+        const getChannelsRequest = mockHttp.expectOne({
+            url: `${endpoint}/channels`,
+            method: 'GET'
+        });
+
+        getChannelsRequest.flush(losslessStringify([channel1, channel3]), {
+            status: 200,
+            statusText: ''
+        });
+        tick();
+
+        openChannelRequest.flush(losslessStringify(channel1), {
+            status: 200,
+            statusText: ''
+        });
+        flush();
+    }));
 });

src/app/services/raiden.service.ts

@@ -39,6 +39,9 @@ export class RaidenService {
     readonly balance$: Observable<string>;
     readonly network$: Observable<Network>;
     private userTokens: { [id: string]: UserToken | null } = {};
+    private pendingChannels: {
+        [tokenAddress: string]: { [partnerAddress: string]: boolean | null };
+    } = {};
 
     constructor(
         private http: HttpClient,
@@ -125,6 +128,16 @@ export class RaidenService {
                     channel.userToken = this.getUserToken(
                         channel.token_address
                     );
+                    if (
+                        this.pendingChannels[channel.token_address] &&
+                        this.pendingChannels[channel.token_address][
+                            channel.partner_address
+                        ]
+                    ) {
+                        channel.depositPending = true;
+                    } else {
+                        channel.depositPending = false;
+                    }
                     return channel;
                 }),
                 toArray()
@@ -239,6 +252,11 @@ export class RaidenService {
                 notificationIdentifier = this.notificationService.addPendingAction(
                     message
                 );
+
+                if (!this.pendingChannels[tokenAddress]) {
+                    this.pendingChannels[tokenAddress] = {};
+                }
+                this.pendingChannels[tokenAddress][partnerAddress] = true;
             }),
             switchMap(() =>
                 this.http.put<Channel>(
@@ -255,11 +273,12 @@ export class RaidenService {
                 )).toNumber();
                 return channel;
             }),
-            finalize(() =>
+            finalize(() => {
                 this.notificationService.removePendingAction(
                     notificationIdentifier
-                )
-            )
+                );
+                delete this.pendingChannels[tokenAddress][partnerAddress];
+            })
         );
     }