Update structure of header for new AccountDialog

raiden-network · Aug 9, 2021 · 1f44a7b · 1f44a7b
1 parent 7e70d82
commit 1f44a7b
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 115 deletions.
diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts
@@ -50,6 +50,7 @@ import { MatSidenav } from '@angular/material/sidenav';
 import { DecimalPipe } from './pipes/decimal.pipe';
 import { BalanceWithSymbolComponent } from './components/balance-with-symbol/balance-with-symbol.component';
 import { TokenNetworkSelectorComponent } from './components/token-network-selector/token-network-selector.component';
+import { ShortenAddressPipe } from './pipes/shorten-address.pipe';
 
 describe('AppComponent', () => {
     let fixture: ComponentFixture<AppComponent>;
@@ -116,6 +117,7 @@ describe('AppComponent', () => {
                     DecimalPipe,
                     BalanceWithSymbolComponent,
                     TokenNetworkSelectorComponent,
+                    ShortenAddressPipe,
                 ],
                 providers: [
                     TestProviders.MockRaidenConfigProvider(),

diff --git a/src/app/components/header/header.component.html b/src/app/components/header/header.component.html
@@ -20,14 +20,12 @@
         fxLayoutAlign="space-between start"
         fxLayoutGap="16px"
         fxFlex.gt-md="555 0 0"
-        fxLayout.xs="column"
-        fxLayoutGap.xs="30px"
     >
         <div
-            class="header__box"
+            class="header__box header__box--unpadded"
             fxLayout="row"
-            fxLayoutAlign="start center"
-            fxLayoutGap="16px"
+            fxLayoutAlign="space-evenly center"
+            fxFlex="1 0 0"
         >
             <div
                 *ngIf="balance$ | async as balance"
@@ -151,6 +149,7 @@
                         appStopClickPropagation
                         cdkOverlayOrigin
                         #tokenBalancesTrigger="cdkOverlayOrigin"
+                        id="on-chain-balances-button"
                     >
                         <mat-icon
                             class="balances-button__icon"
@@ -186,31 +185,19 @@
                     </ng-template>
                 </ng-container>
             </ng-container>
-        </div>
-
-        <div
-            fxLayout="row"
-            fxLayoutGap="4px"
-            fxLayoutAlign="start center"
-            class="header__box"
-            fxFlex.gt-md="1 0 0"
-        >
-            <mat-icon
-                svgIcon="user"
-                aria-hidden="true"
-                class="header__user-icon"
-            ></mat-icon>
-            <span
-                class="header__address"
-                matTooltip="Your account
-                {{ raidenAddress }}
-            (Click to copy)"
-                ngxClipboard
-                [cbContent]="raidenAddress"
-                fxFlex="1 0 0"
+            <div class="divider"></div>
+            <button
+                mat-icon-button
+                class="balances-button"
+                matTooltip="Fill up your account"
             >
-                {{ raidenAddress }}
-            </span>
+                <mat-icon
+                    class="balances-button__icon"
+                    svgIcon="deposit"
+                    aria-label="Fill up your account"
+                >
+                </mat-icon>
+            </button>
         </div>
     </div>
 
@@ -220,42 +207,52 @@
         fxLayoutGap="16px"
         fxFlex.gt-md="334 0 0"
     >
-        <a
-            *ngIf="(network$ | async)?.faucet"
-            [href]="faucetLink$ | async"
-            target="_blank"
-            mat-icon-button
-            class="account-button"
-            matTooltip="Open ether faucet"
-            fxLayout="column"
-            fxLayoutAlign="center center"
-            fxFlexAlign="center"
-            id="faucet-button"
-        >
-            <mat-icon
-                class="account-button__icon-faucet"
-                svgIcon="faucet"
-                aria-label="Open ether faucet"
-            >
-            </mat-icon>
-        </a>
-        <button
-            mat-icon-button
-            matTooltip="Show QR code to scan your address"
-            (click)="showOwnAddressQrCode()"
-            class="account-button"
-            fxLayout="column"
-            fxLayoutAlign="center center"
-            fxFlexAlign="center"
-            id="qr-button"
+        <div
+            fxLayout="row"
+            fxLayoutAlign="start center"
+            class="header__box"
         >
-            <mat-icon
-                class="account-button__icon-qr"
-                svgIcon="qr"
-                aria-label="Show QR code to scan your address"
-            >
-            </mat-icon>
-        </button>
+            <div fxLayout="column" fxLayoutGap="4px">
+                <span fxLayout="row" fxLayoutGap="6px">
+                    <mat-icon
+                        svgIcon="user"
+                        aria-hidden="true"
+                        class="header__user-icon"
+                        matTooltip="Your account
+                            {{ raidenAddress }}
+                            (Click to copy)"
+                        ngxClipboard
+                        [cbContent]="raidenAddress"
+                    ></mat-icon>
+                    <button
+                        mat-icon-button
+                        matTooltip="Show QR code to scan your address"
+                        (click)="showOwnAddressQrCode()"
+                        class="small-balance-button"
+                        fxLayout="column"
+                        fxLayoutAlign="center center"
+                        id="qr-button"
+                    >
+                        <mat-icon
+                            class="small-balance-button__icon small-balance-button__icon--small"
+                            svgIcon="qr"
+                            aria-label="Show QR code to scan your address"
+                        >
+                        </mat-icon>
+                    </button>
+                </span>
+                <span
+                    class="header__address"
+                    matTooltip="Your account
+                        {{ raidenAddress }}
+                        (Click to copy)"
+                    ngxClipboard
+                    [cbContent]="raidenAddress"
+                >
+                    {{ raidenAddress | shortenAddress }}
+                </span>
+            </div>
+        </div>
         <app-search-field
             fxFlex="1 0 0"
             fxFlex.lt-lg="0 1 233px"

diff --git a/src/app/components/header/header.component.scss b/src/app/components/header/header.component.scss
@@ -35,17 +35,17 @@
         background-color: $bg-dark-grey;
         padding: 0 16px;
         border-radius: 15px;
+
+        &--unpadded {
+            padding: 0;
+        }
     }
 
     &__address {
-        width: 60px;
         color: $light-grey;
         font-size: 12px;
         line-height: 14px;
         letter-spacing: 1.07px;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
     }
 
     &__user-icon {
@@ -85,6 +85,12 @@
         height: 16px !important;
         width: 16px !important;
         line-height: 16px;
+
+        &--small {
+            width: 13px !important;
+            height: 13px !important;
+            line-height: 13px !important;
+        }
     }
 
     &--alert {
@@ -162,22 +168,6 @@
     }
 }
 
-.account-button {
-    height: 29px !important;
-    width: 29px !important;
-    border: 2px solid $white;
-
-    &__icon-faucet {
-        height: 15px !important;
-        line-height: 15px !important;
-    }
-
-    &__icon-qr {
-        height: 13px !important;
-        line-height: 13px !important;
-    }
-}
-
 .notification-panel-button {
     height: 60px !important;
     width: 60px !important;

diff --git a/src/app/components/header/header.component.spec.ts b/src/app/components/header/header.component.spec.ts
@@ -41,6 +41,7 @@ import { BalanceWithSymbolComponent } from '../balance-with-symbol/balance-with-
 import { SelectedTokenService } from 'app/services/selected-token.service';
 import { getMintAmount } from 'app/shared/mint-amount';
 import { UserDepositDialogComponent } from '../user-deposit-dialog/user-deposit-dialog.component';
+import { ShortenAddressPipe } from 'app/pipes/shorten-address.pipe';
 
 describe('HeaderComponent', () => {
     let component: HeaderComponent;
@@ -86,6 +87,7 @@ describe('HeaderComponent', () => {
                     SearchFieldComponent,
                     DecimalPipe,
                     BalanceWithSymbolComponent,
+                    ShortenAddressPipe,
                 ],
                 providers: [
                     NotificationService,
@@ -129,27 +131,6 @@ describe('HeaderComponent', () => {
         fixture.destroy();
     });
 
-    it('should have a faucet button when network has a faucet', () => {
-        expect(
-            fixture.debugElement.query(By.css('#faucet-button'))
-        ).toBeTruthy();
-    });
-
-    it('should not have a faucet button when network does not have a faucet', () => {
-        networkSubject.next(createNetworkMock({ faucet: null }));
-        fixture.detectChanges();
-        expect(
-            fixture.debugElement.query(By.css('#faucet-button'))
-        ).toBeFalsy();
-    });
-
-    it('should insert the address correctly into the href attribute of the faucet button', () => {
-        const href = fixture.debugElement
-            .query(By.css('#faucet-button'))
-            .nativeElement.getAttribute('href');
-        expect(href).toBe(`http://faucet.test/?${raidenAddress}`);
-    });
-
     it('should show the qr code dialog for the raiden address', () => {
         const dialog = TestBed.inject(MatDialog) as unknown as MockMatDialog;
         const dialogSpy = spyOn(dialog, 'open');
@@ -209,7 +190,7 @@ describe('HeaderComponent', () => {
         fixture.detectChanges();
 
         expect(
-            fixture.debugElement.query(By.css('.balances-button'))
+            fixture.debugElement.query(By.css('#on-chain-balances-button'))
         ).toBeFalsy();
         const balances = fixture.debugElement.queryAll(
             By.css('.header__token-balance')

diff --git a/src/app/components/header/header.component.ts b/src/app/components/header/header.component.ts
@@ -42,7 +42,6 @@ export class HeaderComponent implements OnInit, OnDestroy {
     readonly network$: Observable<Network>;
     readonly balance$: Observable<string>;
     readonly zeroBalance$: Observable<boolean>;
-    readonly faucetLink$: Observable<string>;
     readonly numberOfNotifications$: Observable<number>;
     readonly udcBalance$: Observable<BigNumber>;
     readonly servicesToken$: Observable<UserToken>;
@@ -70,14 +69,6 @@ export class HeaderComponent implements OnInit, OnDestroy {
         this.zeroBalance$ = raidenService.balance$.pipe(
             map((balance) => new BigNumber(balance).isZero())
         );
-        this.faucetLink$ = zip(
-            raidenService.network$,
-            raidenService.raidenAddress$
-        ).pipe(
-            map(([network, raidenAddress]) =>
-                network.faucet.replace('${ADDRESS}', raidenAddress)
-            )
-        );
         this.numberOfNotifications$ =
             this.notificationService.numberOfNotifications$;
         this.udcBalance$ = this.userDepositService.balance$;