Connection manager replacement

CHANGELOG.md

@@ -1,6 +1,9 @@
 # Changelog
 
 ## [Unreleased]
+### Changed
+- [#547] Connection manager is replaced by a new quick connect dialog which transparently opens channels with suggestions by a pathfinding service.
+
 ### Added
 - [#345] Adds the input field for a payment identifier to the transfer dialog again (was removed in the redesign).
 
@@ -176,6 +179,7 @@ token network.
 [0.7.0]: https://github.com/raiden-network/webui/compare/v0.6.0...v0.7.0
 [0.6.0]: https://github.com/raiden-network/webui/releases/tag/v0.6.0
 
+[#547]: https://github.com/raiden-network/webui/issues/547
 [#485]: https://github.com/raiden-network/webui/issues/485
 [#476]: https://github.com/raiden-network/webui/issues/476
 [#475]: https://github.com/raiden-network/webui/issues/475

src/app/app.component.spec.ts

@@ -305,7 +305,6 @@ describe('AppComponent', () => {
         expect(dialogSpy).toHaveBeenCalledTimes(1);
         expect(dialogSpy).toHaveBeenCalledWith(ConfirmationDialogComponent, {
             data: payload,
-            width: '360px',
         });
         expect(shutdownSpy).toHaveBeenCalledTimes(1);
     });

src/app/app.component.ts

@@ -170,7 +170,6 @@ export class AppComponent implements OnInit, OnDestroy {
         };
         const dialog = this.dialog.open(ConfirmationDialogComponent, {
             data: payload,
-            width: '360px',
         });
 
         dialog

src/app/app.module.ts

@@ -10,7 +10,6 @@ import { environment } from '../environments/environment';
 import { AppComponent } from './app.component';
 import { ConfirmationDialogComponent } from './components/confirmation-dialog/confirmation-dialog.component';
 import { HomeComponent } from './components/home/home.component';
-import { ConnectionManagerDialogComponent } from './components/connection-manager-dialog/connection-manager-dialog.component';
 import { AboutComponent } from './components/about/about.component';
 import { OpenDialogComponent } from './components/open-dialog/open-dialog.component';
 import { PaymentDialogComponent } from './components/payment-dialog/payment-dialog.component';
@@ -64,6 +63,8 @@ import { SetHeadersInterceptor } from './interceptors/set-headers.interceptor';
 import { BalanceWithSymbolComponent } from './components/balance-with-symbol/balance-with-symbol.component';
 import { AddressIdenticonComponent } from './components/address-identicon/address-identicon.component';
 import { PaymentIdentifierInputComponent } from './components/payment-identifier-input/payment-identifier-input.component';
+import { QuickConnectDialogComponent } from './components/quick-connect-dialog/quick-connect-dialog.component';
+import { ConnectionSelectorComponent } from './components/quick-connect-dialog/connection-selector/connection-selector.component';
 
 const appRoutes: Routes = [
     { path: '', redirectTo: '/home', pathMatch: 'full' },
@@ -85,7 +86,6 @@ export function ConfigLoader(raidenConfig: RaidenConfig) {
         HomeComponent,
         AboutComponent,
         PaymentDialogComponent,
-        ConnectionManagerDialogComponent,
         RegisterDialogComponent,
         OpenDialogComponent,
         ConfirmationDialogComponent,
@@ -120,6 +120,8 @@ export function ConfigLoader(raidenConfig: RaidenConfig) {
         BalanceWithSymbolComponent,
         AddressIdenticonComponent,
         PaymentIdentifierInputComponent,
+        QuickConnectDialogComponent,
+        ConnectionSelectorComponent,
     ],
     imports: [
         RouterModule.forRoot(appRoutes),
@@ -144,7 +146,7 @@ export function ConfigLoader(raidenConfig: RaidenConfig) {
         {
             provide: HTTP_INTERCEPTORS,
             useClass: ErrorHandlingInterceptor,
-            deps: [NotificationService, RaidenService],
+            deps: [NotificationService, RaidenService, RaidenConfig],
             multi: true,
         },
         {
@@ -174,7 +176,7 @@ export function ConfigLoader(raidenConfig: RaidenConfig) {
             provide: MAT_DIALOG_DEFAULT_OPTIONS,
             useValue: Object.assign(new MatDialogConfig(), <MatDialogConfig>{
                 maxWidth: '90vw',
-                width: '500px',
+                width: '360px',
                 autoFocus: false,
             }),
         },

src/app/components/address-input/address-input.component.html

@@ -32,7 +32,12 @@
         </div>
     </mat-autocomplete>
 
-    <div class="icon-box" *ngIf="displayIdenticon">
+    <div
+        fxFlex="0 1 80px"
+        fxLayoutAlign="center"
+        class="icon-box"
+        *ngIf="displayIdenticon"
+    >
         <img
             class="icon-box__identicon"
             *ngIf="address; else placeholder"

src/app/components/address-input/address-input.component.scss

@@ -22,16 +22,18 @@
         line-height: 15px;
         letter-spacing: 0.35px;
         color: $black;
+        min-width: 0;
 
         &:disabled {
-            color: $text-grey;
+            color: $dark-grey;
+            background: none;
+            border: 1px solid $dark-grey;
         }
     }
 }
 
 .icon-box {
     height: 100%;
-    margin: 0 auto;
 
     &__identicon {
         border-radius: 50%;

src/app/components/channel-list/channel-list.component.spec.ts

@@ -214,7 +214,7 @@ describe('ChannelListComponent', () => {
 
         const dialogSpy = spyOn(dialog, 'open').and.callThrough();
         const dialogResult: OpenDialogResult = {
-            tokenAddress: token1.address,
+            token: token1,
             partnerAddress: createAddress(),
             balance: new BigNumber(1000),
             settleTimeout: raidenConfig.config.settle_timeout,
@@ -226,18 +226,17 @@ describe('ChannelListComponent', () => {
         clickElement(fixture.debugElement, '#open-channel');
 
         const payload: OpenDialogPayload = {
-            tokenAddress: '',
+            token: undefined,
             defaultSettleTimeout: raidenConfig.config.settle_timeout,
             revealTimeout: raidenConfig.config.reveal_timeout,
         };
         expect(dialogSpy).toHaveBeenCalledTimes(1);
         expect(dialogSpy).toHaveBeenCalledWith(OpenDialogComponent, {
             data: payload,
-            width: '360px',
         });
         expect(openSpy).toHaveBeenCalledTimes(1);
         expect(openSpy).toHaveBeenCalledWith(
-            dialogResult.tokenAddress,
+            dialogResult.token.address,
             dialogResult.partnerAddress,
             dialogResult.settleTimeout,
             dialogResult.balance
@@ -273,14 +272,13 @@ describe('ChannelListComponent', () => {
         clickElement(fixture.debugElement, '#open-channel');
 
         const payload: OpenDialogPayload = {
-            tokenAddress: token1.address,
+            token: token1,
             defaultSettleTimeout: raidenConfig.config.settle_timeout,
             revealTimeout: raidenConfig.config.reveal_timeout,
         };
         expect(dialogSpy).toHaveBeenCalledTimes(1);
         expect(dialogSpy).toHaveBeenCalledWith(OpenDialogComponent, {
             data: payload,
-            width: '360px',
         });
     });
 });

src/app/components/channel-list/channel-list.component.ts

@@ -7,7 +7,7 @@ import {
     AfterViewInit,
 } from '@angular/core';
 import { Channel } from '../../models/channel';
-import { EMPTY, Subject, Observable, fromEvent } from 'rxjs';
+import { EMPTY, Subject, fromEvent } from 'rxjs';
 import { ChannelPollingService } from '../../services/channel-polling.service';
 import { amountToDecimal } from '../../utils/amount.converter';
 import { UserToken } from '../../models/usertoken';
@@ -120,14 +120,13 @@ export class ChannelListComponent implements OnInit, OnDestroy, AfterViewInit {
         const rdnConfig = this.raidenConfig.config;
 
         const payload: OpenDialogPayload = {
-            tokenAddress: this.selectedToken ? this.selectedToken.address : '',
+            token: this.selectedToken,
             revealTimeout: rdnConfig.reveal_timeout,
             defaultSettleTimeout: rdnConfig.settle_timeout,
         };
 
         const dialog = this.dialog.open(OpenDialogComponent, {
             data: payload,
-            width: '360px',
         });
 
         dialog
@@ -139,7 +138,7 @@ export class ChannelListComponent implements OnInit, OnDestroy, AfterViewInit {
                     }
 
                     return this.raidenService.openChannel(
-                        result.tokenAddress,
+                        result.token.address,
                         result.partnerAddress,
                         result.settleTimeout,
                         result.balance

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

@@ -118,7 +118,6 @@ describe('ChannelComponent', () => {
         expect(dialogSpy).toHaveBeenCalledTimes(1);
         expect(dialogSpy).toHaveBeenCalledWith(DepositWithdrawDialogComponent, {
             data: payload,
-            width: '360px',
         });
         expect(depositSpy).toHaveBeenCalledTimes(1);
         expect(depositSpy).toHaveBeenCalledWith(
@@ -151,7 +150,6 @@ describe('ChannelComponent', () => {
         expect(dialogSpy).toHaveBeenCalledTimes(1);
         expect(dialogSpy).toHaveBeenCalledWith(DepositWithdrawDialogComponent, {
             data: payload,
-            width: '360px',
         });
         expect(depositSpy).toHaveBeenCalledTimes(1);
         expect(depositSpy).toHaveBeenCalledWith(
@@ -195,7 +193,6 @@ describe('ChannelComponent', () => {
         expect(dialogSpy).toHaveBeenCalledTimes(1);
         expect(dialogSpy).toHaveBeenCalledWith(ConfirmationDialogComponent, {
             data: payload,
-            width: '360px',
         });
         expect(closeSpy).toHaveBeenCalledTimes(1);
         expect(closeSpy).toHaveBeenCalledWith(
@@ -235,7 +232,6 @@ describe('ChannelComponent', () => {
         expect(dialogSpy).toHaveBeenCalledTimes(1);
         expect(dialogSpy).toHaveBeenCalledWith(ConfirmationDialogComponent, {
             data: payload,
-            width: '360px',
         });
     });
 });

src/app/components/channel/channel.component.ts

@@ -60,7 +60,6 @@ export class ChannelComponent implements OnInit {
 
         const dialog = this.dialog.open(ConfirmationDialogComponent, {
             data: payload,
-            width: '360px',
         });
 
         dialog
@@ -91,7 +90,6 @@ export class ChannelComponent implements OnInit {
 
         const dialog = this.dialog.open(DepositWithdrawDialogComponent, {
             data: payload,
-            width: '360px',
         });
 
         dialog