Add button for accessing Quick Connect directly from tokens view

Author: manuelwedler

src/app/components/token/token.component.html

@@ -33,7 +33,7 @@
                 aria-hidden="true"
             >
             </mat-icon>
-            <span>Quick connect pending</span>
+            <span>Quick Connect pending</span>
             <mat-progress-spinner
                 diameter="24"
                 mode="indeterminate"
@@ -86,9 +86,7 @@
             panelClass="mat-select-panel--dark"
         >
         </app-token-network-selector>
-        <ng-container
-            *ngIf="!isAllNetworksView && (!onMainnet || openChannels > 0)"
-        >
+        <ng-container *ngIf="!isAllNetworksView">
             <button
                 class="options-button"
                 mat-icon-button
@@ -104,26 +102,25 @@
                 [overlapTrigger]="true"
                 xPosition="before"
             >
+                <ng-container *ngIf="!onMainnet">
+                    <button mat-menu-item (click)="mint()" id="mint">
+                        Mint
+                    </button>
+                    <div class="options__divider"></div>
+                </ng-container>
                 <button
-                    *ngIf="!onMainnet"
-                    mat-menu-item
-                    (click)="mint()"
-                    id="mint"
-                >
-                    Mint
-                </button>
-                <div
-                    *ngIf="!onMainnet && openChannels > 0"
-                    class="options__divider"
-                ></div>
-                <button
-                    *ngIf="openChannels > 0"
                     mat-menu-item
-                    (click)="leaveNetwork()"
-                    id="leave"
+                    (click)="openQuickConnect()"
+                    id="quick-connect"
                 >
-                    Leave network
+                    Quick Connect
                 </button>
+                <ng-container *ngIf="openChannels > 0">
+                    <div class="options__divider"></div>
+                    <button mat-menu-item (click)="leaveNetwork()" id="leave">
+                        Leave network
+                    </button>
+                </ng-container>
             </mat-menu>
         </ng-container>
     </div>

src/app/components/token/token.component.spec.ts

@@ -201,7 +201,7 @@ describe('TokenComponent', () => {
             const confirmationPayload: ConfirmationDialogPayload = {
                 title: 'No open  channels',
                 message:
-                    'Do you want to use quick connect to automatically open  channels?',
+                    'Do you want to use Quick Connect to automatically open  channels?',
             };
             const quickConnectPayload: QuickConnectDialogPayload = {
                 token: undefined,
@@ -323,7 +323,7 @@ describe('TokenComponent', () => {
 
             const confirmationPayload: ConfirmationDialogPayload = {
                 title: `No open ${unconnectedToken.symbol} channels`,
-                message: `Do you want to use quick connect to automatically open ${unconnectedToken.symbol} channels?`,
+                message: `Do you want to use Quick Connect to automatically open ${unconnectedToken.symbol} channels?`,
             };
             const quickConnectPayload: QuickConnectDialogPayload = {
                 token: unconnectedToken,
@@ -457,5 +457,36 @@ describe('TokenComponent', () => {
             expect(dialogSpy).toHaveBeenCalledTimes(1);
             expect(leaveSpy).toHaveBeenCalledTimes(0);
         });
+
+        it('should open quick connect dialog', () => {
+            selectedTokenService.setToken(unconnectedToken);
+            fixture.detectChanges();
+
+            clickElement(fixture.debugElement, '#options');
+            fixture.detectChanges();
+
+            const dialogSpy = spyOn(dialog, 'open').and.callThrough();
+            const dialogResult: QuickConnectDialogResult = {
+                token: unconnectedToken,
+                connectionChoices: createConnectionChoices(),
+            };
+            spyOn(dialog, 'returns').and.returnValues(true, dialogResult);
+            spyOn(raidenService, 'openBatchOfChannels').and.returnValue(
+                of(null)
+            );
+            clickElement(fixture.debugElement, '#quick-connect');
+
+            const payload: QuickConnectDialogPayload = {
+                token: unconnectedToken,
+            };
+            expect(dialogSpy).toHaveBeenCalledTimes(1);
+            expect(dialogSpy).toHaveBeenCalledWith(
+                QuickConnectDialogComponent,
+                {
+                    data: payload,
+                    width: '400px',
+                }
+            );
+        });
     });
 });

src/app/components/token/token.component.ts

@@ -191,25 +191,7 @@ export class TokenComponent implements OnInit, OnDestroy {
             });
     }
 
-    private askForQuickConnect() {
-        const tokenSymbol = this.selectedToken?.symbol ?? '';
-        const payload: ConfirmationDialogPayload = {
-            title: `No open ${tokenSymbol} channels`,
-            message: `Do you want to use quick connect to automatically open ${tokenSymbol} channels?`,
-        };
-
-        const dialog = this.dialog.open(ConfirmationDialogComponent, {
-            data: payload,
-        });
-
-        dialog.afterClosed().subscribe((result) => {
-            if (result) {
-                this.openQuickConnect();
-            }
-        });
-    }
-
-    private openQuickConnect() {
+    openQuickConnect() {
         const payload: QuickConnectDialogPayload = {
             token: this.selectedToken,
         };
@@ -239,4 +221,22 @@ export class TokenComponent implements OnInit, OnDestroy {
                 this.channelPollingService.refresh();
             });
     }
+
+    private askForQuickConnect() {
+        const tokenSymbol = this.selectedToken?.symbol ?? '';
+        const payload: ConfirmationDialogPayload = {
+            title: `No open ${tokenSymbol} channels`,
+            message: `Do you want to use Quick Connect to automatically open ${tokenSymbol} channels?`,
+        };
+
+        const dialog = this.dialog.open(ConfirmationDialogComponent, {
+            data: payload,
+        });
+
+        dialog.afterClosed().subscribe((result) => {
+            if (result) {
+                this.openQuickConnect();
+            }
+        });
+    }
 }

src/app/services/raiden.service.ts

@@ -658,7 +658,7 @@ export class RaidenService {
             tap(() => {
                 this.quickConnectPending[token.address] = true;
                 const message: UiMessage = {
-                    title: 'Quick connect',
+                    title: 'Quick Connect',
                     description: `${connectionChoices.length} channels on ${token.symbol}`,
                     icon: 'thunderbolt',
                     userToken: token,
@@ -690,7 +690,7 @@ export class RaidenService {
             ),
             tap(() => {
                 const message: UiMessage = {
-                    title: 'Quick connect successful',
+                    title: 'Quick Connect successful',
                     description: `${
                         connectionChoices.length - errorCount
                     } channels on ${token.symbol}`,
@@ -701,7 +701,7 @@ export class RaidenService {
             }),
             catchError((error) => {
                 this.notificationService.addErrorNotification({
-                    title: 'Quick connect failed',
+                    title: 'Quick Connect failed',
                     description: error,
                     icon: 'error-mark',
                     userToken: token,