Feat/4.7.0 (#125)

* 4.7.0 * 4.7.0 * 4.7.0
dev-ptera · Jan 6, 2024 · 6550966 · 6550966
1 parent 7dcfdbd
commit 6550966
Show file tree

Hide file tree

Showing 16 changed files with 110 additions and 60 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,17 @@
 # Change Log
 
+## v4.7.0 (January 6, 2024)
+
+### Added
+
+-  Added known account info onto address book new entry overlay. 
+-  Added `APP_INITIALIZER` to app module.
+
+### Changed
+
+-  Change address book new entry page styles.
+-  Stop showing `--` Balance for accounts with 0 BAN, show a zero instead. 
+
 ## v4.6.1 (December 27, 2023)
 
 ### Added

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "thebananostand",
-  "version": "4.6.1",
+  "version": "4.7.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve --open --host 0.0.0.0",

diff --git a/src/app/app.component.html b/src/app/app.component.html
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -1,43 +1,17 @@
 import { Component } from '@angular/core';
 import { Data, RouterOutlet } from '@angular/router';
 import { slideInAnimation } from './animation';
-import { WalletEventsService } from '@app/services/wallet-events.service';
-import { PowService } from '@app/services/pow.service';
-import { AppStateService } from '@app/services/app-state.service';
-import { environment } from '../environments/environment';
-import { TimeoutService } from '@app/services/timeout.service';
 
 @Component({
     selector: 'app-root',
-    templateUrl: './app.component.html',
+    template: `
+        <div [@routeAnimations]="prepareRoute(outlet)">
+            <router-outlet #outlet="outlet"></router-outlet>
+        </div>
+    `,
     animations: [slideInAnimation],
 })
 export class AppComponent {
-    constructor(
-        private readonly _powService: PowService,
-        private readonly _appStoreService: AppStateService,
-        private readonly _walletEventService: WalletEventsService, // Required to listen to app events; don't remove.
-        private readonly _timeoutService: TimeoutService // Listens for user idle
-    ) {
-        const appHeight = (): void => {
-            const doc = document.documentElement;
-            doc.style.setProperty(`--app-height`, `${window.innerHeight}px`);
-        };
-        window.addEventListener(`resize`, appHeight);
-        appHeight();
-
-        this._appStoreService.store.subscribe((data) => {
-            if (!environment.production) {
-                // eslint-disable-next-line no-console
-                console.log(data);
-            }
-        });
-    }
-
-    ngOnInit(): void {
-        this._powService.initializePowService();
-    }
-
     prepareRoute(outlet: RouterOutlet): Data {
         return outlet?.activatedRouteData?.['animation'];
     }

diff --git a/src/app/app.initializer.ts b/src/app/app.initializer.ts
@@ -0,0 +1,32 @@
+import { inject } from '@angular/core';
+import { PowService } from '@app/services/pow.service';
+import { TimeoutService } from '@app/services/timeout.service';
+import { WalletEventsService } from '@app/services/wallet-events.service';
+import { AppStateService } from '@app/services/app-state.service';
+import { environment } from '../environments/environment';
+
+function appHeight(): void {
+    const doc = document.documentElement;
+    doc.style.setProperty(`--app-height`, `${window.innerHeight}px`);
+}
+
+export function initializeApp(): void {
+    const powService = inject(PowService);
+    const timeoutService = inject(TimeoutService);
+    const walletEventService = inject(WalletEventsService);
+    const appStateService = inject(AppStateService);
+
+    powService.init();
+    walletEventService.init();
+    timeoutService.init();
+    appStateService.store.subscribe((data) => {
+        if (!environment.production) {
+            // eslint-disable-next-line no-console
+            console.log(data);
+        }
+    });
+
+    // Respond to window height change events.
+    window.addEventListener(`resize`, appHeight);
+    appHeight();
+}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -57,7 +57,7 @@ import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MobileStepperModule } from '@app/components/mobile-stepper/mobile-stepper.module';
-import { NgModule } from '@angular/core';
+import { APP_INITIALIZER, NgModule } from '@angular/core';
 import { QrDialogComponent } from '@app/components/qr/qr.component';
 import { ReceiveBottomSheetComponent } from '@app/overlays/bottom-sheet/receive/receive-bottom-sheet.component';
 import { ReceiveComponent } from '@app/overlays/actions/receive/receive.component';
@@ -98,6 +98,7 @@ import { CommaPipe } from './pipes/comma.pipe';
 import { AddRpcOverlayComponent } from '@app/overlays/actions/add-rpc/add-rpc.component';
 import { AddRpcDialogComponent } from '@app/overlays/dialogs/add-rpc/add-rpc-dialog.component';
 import { AddRpcBottomSheetComponent } from '@app/overlays/bottom-sheet/add-rpc/add-rpc-bottom-sheet.component';
+import { initializeApp } from './app.initializer';
 
 LOAD_WASM().subscribe((res: any) => console.log('WASM ngx-scanner-qrcode loaded', res));
 
@@ -205,7 +206,17 @@ LOAD_WASM().subscribe((res: any) => console.log('WASM ngx-scanner-qrcode loaded'
         MatSortModule,
         MatSliderModule,
     ],
-    providers: [provideUserIdleConfig({ idle: 600, timeout: 60 })],
+    providers: [
+        provideUserIdleConfig({ idle: 600, timeout: 60 }),
+        {
+            provide: APP_INITIALIZER,
+            useFactory: (): any => {
+                initializeApp();
+                return () => Promise.resolve();
+            },
+            multi: true,
+        },
+    ],
     bootstrap: [AppComponent],
 })
 export class AppModule {}
diff --git a/src/app/overlays/actions/rename-address/rename-address.component.scss b/src/app/overlays/actions/rename-address/rename-address.component.scss
@@ -1,4 +1,8 @@
 .rename-address-overlay {
-    max-width: 320px;
-    width: 320px;
+    max-width: 340px;
+    width: 340px;
+    height: 540px;
+    &.shorter {
+        height: 370px;
+    }
 }
diff --git a/src/app/overlays/actions/rename-address/rename-address.component.ts b/src/app/overlays/actions/rename-address/rename-address.component.ts
@@ -7,16 +7,16 @@ import { UPDATE_ADDRESS_BOOK } from '@app/services/wallet-events.service';
     selector: 'app-rename-address-overlay',
     styleUrls: ['rename-address.component.scss'],
     template: `
-        <div class="rename-address-overlay overlay-action-container">
-            <div class="overlay-header">{{ addressOrNickname ? 'Rename' : 'Add' }} Address</div>
+        <div class="rename-address-overlay overlay-action-container" [class.shorter]="addressOrNickname">
+            <div class="overlay-header">{{ address ? 'Rename' : 'Add' }} Address</div>
             <div class="overlay-body mat-body-1">
-                <div *ngIf="addressOrNickname">
-                    Rename "<span style="word-break: break-all">{{ addressOrNickname }}</span
+                <div *ngIf="address">
+                    Rename "<span style="word-break: break-all; font-weight: 600">{{ addressOrNickname }}</span
                     >" to something else?
                 </div>
-                <div *ngIf="!addressOrNickname">Add a new entry to your local address book.</div>
+                <div *ngIf="!address">Add a new entry to your local address book.</div>
                 <form style="margin: 32px 0">
-                    <mat-form-field *ngIf="!addressOrNickname" style="width: 100%" appearance="fill">
+                    <mat-form-field *ngIf="!address" style="width: 100%" appearance="fill">
                         <mat-label>Address</mat-label>
                         <textarea
                             placeholder="ban_123"
@@ -38,6 +38,16 @@ import { UPDATE_ADDRESS_BOOK } from '@app/services/wallet-events.service';
                             data-cy="rename-address-input"
                         />
                     </mat-form-field>
+                    <div
+                        *ngIf="getKnownAddressAlias(addressFormControl.value)"
+                        style="display: flex; align-items: center"
+                    >
+                        <mat-icon class="hint" style="min-width: 40px">info</mat-icon>
+                        <div class="mat-body-2">
+                            "{{ getKnownAddressAlias(addressFormControl.value) }}" is a publicly known address already
+                            but your new alias will be used instead.
+                        </div>
+                    </div>
                 </form>
             </div>
             <div class="overlay-footer">
@@ -59,6 +69,7 @@ export class RenameAddressComponent implements OnInit {
     @Input() address: string;
     @Output() close: EventEmitter<void> = new EventEmitter<void>();
 
+    /** Aliases are optional, if there's no alias for an entry in the address book this value will default to the address. */
     addressOrNickname: string;
 
     addressFormControl = new FormControl('');
@@ -67,10 +78,7 @@ export class RenameAddressComponent implements OnInit {
     constructor(private readonly _appStateService: AppStateService) {}
 
     ngOnInit(): void {
-        this.addressOrNickname = this._appStateService.store.getValue().addressBook.get(this.address);
-        if (!this.addressOrNickname) {
-            this.addressOrNickname = this.address;
-        }
+        this.addressOrNickname = this._appStateService.store.getValue().addressBook.get(this.address) || this.address;
     }
 
     renameAddress(): void {
@@ -79,4 +87,8 @@ export class RenameAddressComponent implements OnInit {
         UPDATE_ADDRESS_BOOK.next({ name: newName, account });
         this.close.emit();
     }
+
+    getKnownAddressAlias(address: string): string {
+        return this._appStateService.knownAccounts.get(address);
+    }
 }
diff --git a/src/app/overlays/actions/send/send.component.ts b/src/app/overlays/actions/send/send.component.ts
@@ -30,8 +30,7 @@ export type SendOverlayData = {
                     <div title>Transaction Sent</div>
                     <div description>
                         Your transaction has been successfully sent and can be viewed
-                        <span class="link" [style.color]="colors.blue[500]" (click)="openLink()">here</span>. You can
-                        now close this window.
+                        <span class="link" (click)="openLink()">here</span>. You can now close this window.
                     </div>
                     <button mat-flat-button color="primary" (click)="closeDialog()">Close</button>
                 </app-empty-state>
@@ -154,6 +153,7 @@ export type SendOverlayData = {
                                 <div style="display: flex; align-items: center" class="mat-body-1">
                                     Known as "{{ getAccountAlias(recipient) }}"
                                     <a
+                                        class="link"
                                         style="margin-left: 4px"
                                         [href]="'https://creeper.banano.cc/known-accounts#' + recipient"
                                         target="_blank"
@@ -194,7 +194,7 @@ export type SendOverlayData = {
                     </ng-container>
 
                     <div *ngIf="activeStep === 3" class="mat-body-1">
-                        <div style="margin-bottom: 24px">Please confirm the transaction details below:</div>
+                        <div style="margin-bottom: 16px">Please confirm the transaction details below:</div>
                         <div style="font-weight: 600">Send</div>
                         <div style="margin-bottom: 16px;">{{ confirmedSendAmount | number }} BAN</div>
                         <div style="font-weight: 600">To</div>

diff --git a/src/app/pages/address-book/address-book.component.ts b/src/app/pages/address-book/address-book.component.ts
@@ -108,7 +108,11 @@ import { UtilService } from '@app/services/util.service';
                                     <div *ngIf="!vp.sm" class="mat-body-1 hint" style="width: 56px">#{{ i + 1 }}</div>
                                     <div style="display: flex; flex-direction: column; padding: 16px 0">
                                         <div class="mat-body-1" style="font-weight: 600">{{ entry.name }}</div>
-                                        <div class="mono mat-body-2 hint">
+                                        <div
+                                            class="mono mat-body-2"
+                                            [class.hint]="entry.name"
+                                            [style.fontWeight]="entry.name ? 400 : 600"
+                                        >
                                             {{ vp.sm ? util.shortenAddress(entry.account) : entry.account }}
                                         </div>
                                     </div>

diff --git a/src/app/pages/dashboard/dashboard.component.html b/src/app/pages/dashboard/dashboard.component.html
@@ -169,7 +169,7 @@
                 <!-- Account Balance -->
                 <div style="display: flex; align-items: center" [style.marginTop.px]="vp.sm ? 8 : 16">
                     <div class="mat-headline-4 text-contrast">
-                        {{ store.totalBalance ? (store.totalBalance | appComma) : '--' }}
+                        {{ store.isLoadingAccounts && !store.totalBalance ? '--' : (store.totalBalance | appComma) }}
                         BAN
                     </div>
                     <mat-spinner

diff --git a/src/app/services/pow.service.ts b/src/app/services/pow.service.ts
@@ -30,7 +30,7 @@ export class PowService {
 
     constructor(private readonly _datasourceService: DatasourceService, private readonly _rpcService: RpcService) {}
 
-    initializePowService(): void {
+    init(): void {
         this._testWebGLSupport();
         log('Pow Service Initialized');
     }

diff --git a/src/app/services/signer.service.ts b/src/app/services/signer.service.ts
@@ -26,7 +26,7 @@ export class SignerService {
 
     private async _checkUsbSupport(): Promise<void> {
         const TransportWebUSB = window.TransportWebUSB;
-        this.supportsWebUSB = await TransportWebUSB.isSupported();
+        this.supportsWebUSB = await TransportWebUSB?.isSupported();
         // eslint-disable-next-line no-console
         console.info('connectLedger', 'supportsWebUSB', this.supportsWebUSB);
 

diff --git a/src/app/services/timeout.service.ts b/src/app/services/timeout.service.ts
@@ -12,7 +12,9 @@ export class TimeoutService {
         private readonly _userIdle: UserIdleService,
         private readonly _appState: AppStateService,
         private readonly _snackbar: MatSnackBar
-    ) {
+    ) {}
+
+    init(): void {
         this._userIdle.onIdleStatusChanged().subscribe(() => {
             //    console.log('User is considered idle now?', isIdle);
         });

diff --git a/src/app/services/wallet-events.service.ts b/src/app/services/wallet-events.service.ts
@@ -148,7 +148,9 @@ export class WalletEventsService {
         private readonly _appStateService: AppStateService,
         private readonly _walletStorageService: WalletStorageService,
         private readonly _currencyConversionService: CurrencyConversionService
-    ) {
+    ) {}
+
+    init(): void {
         // _dispatch initial app state
         this._dispatch({
             activeWallet: undefined,