Small improvements to AccountDialogComponent

Author: manuelwedler

src/app/components/account-dialog/account-dialog.component.spec.ts

@@ -194,7 +194,9 @@ describe('AccountDialogComponent', () => {
         fixture.detectChanges();
         tick();
         fixture.detectChanges();
-        spyOn(web3Mock.eth, 'requestAccounts').and.rejectWith();
+        spyOn(web3Mock.eth, 'requestAccounts').and.rejectWith(
+            new Error('User rejected.')
+        );
         clickElement(fixture.debugElement, '#accept');
         fixture.detectChanges();
         tick();

src/app/components/account-dialog/account-dialog.component.ts

@@ -135,9 +135,7 @@ export class AccountDialogComponent implements OnInit, OnDestroy {
                 filter((provider) => !!provider),
                 map((provider: any) => this.web3Factory.create(provider)),
                 tap((web3) => (this.web3 = web3)),
-                switchMap((web3) =>
-                    from<Promise<string[]>>(web3.eth.getAccounts())
-                )
+                switchMap(async (web3) => web3.eth.getAccounts())
             )
             .subscribe((accounts) => {
                 if (accounts.length > 0) {
@@ -171,7 +169,7 @@ export class AccountDialogComponent implements OnInit, OnDestroy {
         ).toFixed();
         let notificationIdentifier: number;
 
-        defer(() => {
+        defer(async () => {
             this.dialogRef.close();
             notificationIdentifier = this.notificationService.addPendingAction({
                 title: `Sending ${symbol} to account`,
@@ -185,23 +183,19 @@ export class AccountDialogComponent implements OnInit, OnDestroy {
             ).toFixed();
 
             if (this.ethSelected) {
-                return from(
-                    this.web3.eth.sendTransaction({
-                        from: this.defaultAccount,
-                        to: raidenAddress,
-                        value: transferValue,
-                    })
-                );
+                return this.web3.eth.sendTransaction({
+                    from: this.defaultAccount,
+                    to: raidenAddress,
+                    value: transferValue,
+                });
             } else {
                 const tokenContract = new this.web3.eth.Contract(
                     tokenabi,
                     this.token.address
                 );
-                return from(
-                    tokenContract.methods
-                        .transfer(raidenAddress, transferValue)
-                        .send({ from: this.defaultAccount })
-                );
+                return tokenContract.methods
+                    .transfer(raidenAddress, transferValue)
+                    .send({ from: this.defaultAccount });
             }
         })
             .pipe(
@@ -232,8 +226,8 @@ export class AccountDialogComponent implements OnInit, OnDestroy {
     }
 
     private connectWallet() {
-        const requestAccounts$ = defer(() =>
-            from(this.web3.eth.requestAccounts())
+        const requestAccounts$ = defer(async () =>
+            this.web3.eth.requestAccounts()
         ).pipe(
             catchError((error) => {
                 this.accountRequestRejected = true;
@@ -245,24 +239,21 @@ export class AccountDialogComponent implements OnInit, OnDestroy {
             this.requesting = true;
             this.accountRequestRejected = false;
             this.wrongChainID = false;
-            return zip(
-                from(this.web3.eth.getChainId()),
-                this.raidenService.network$
-            );
+            return zip(this.web3.eth.getChainId(), this.raidenService.network$);
         })
             .pipe(
                 switchMap(([web3ChainId, network]) => {
                     if (web3ChainId !== network.chainId) {
                         this.wrongChainID = true;
-                        return throwError('Chain ids not matching.');
+                        throw new Error('Chain ids not matching.');
                     }
                     return requestAccounts$;
                 }),
                 finalize(() => (this.requesting = false))
             )
             .subscribe({
                 next: (accounts) => (this.defaultAccount = accounts[0]),
-                error: console.error,
+                error: (error) => console.error(error?.message),
             });
     }
 }

src/app/components/token-network-selector/token-network-selector.component.ts

@@ -65,7 +65,15 @@ export class TokenNetworkSelectorComponent
                 this.tokens$,
                 this.userDepositService.servicesToken$,
             ]).pipe(
-                map(([tokens, servicesToken]) => [servicesToken, ...tokens])
+                map(([tokens, servicesToken]) => {
+                    const servicesTokenRegistered = !!tokens.find(
+                        (item) => servicesToken.address === item.address
+                    );
+                    if (servicesTokenRegistered) {
+                        return tokens;
+                    }
+                    return [servicesToken, ...tokens];
+                })
             );
         }
     }

src/app/pipes/shorten-address.pipe.spec.ts

@@ -18,11 +18,11 @@ describe('ShortenAddressPipe', () => {
     it('should return the address truncated to 6 characters without touching the 0x prefix', function () {
         expect(
             pipe.transform('0x0123456789012345678901234567890123456789')
-        ).toEqual('0x012...789');
+        ).toEqual('0x012…789');
     });
 
     it('should return the value truncated', function () {
-        expect(pipe.transform('12345678', 4)).toEqual('12...78');
+        expect(pipe.transform('12345678', 4)).toEqual('12…78');
     });
 
     it('should return an empty string if no value', function () {

src/app/pipes/shorten-address.pipe.ts

@@ -5,7 +5,7 @@ import { Pipe, PipeTransform } from '@angular/core';
 })
 export class ShortenAddressPipe implements PipeTransform {
     transform(value?: string, width: number = 6): string {
-        const separator = '...';
+        const separator = '…';
         if (!value) {
             return '';
         } else if (value.length <= width) {