Feat/4.12.0 (#135)

* Mobile table styles * 4.11.1 * 4.11.1 * 4.11.1 * 4.11.2 * Start * 4.12.0 * 4.12.0 * 4.12.0
dev-ptera · Mar 13, 2024 · 2dfcd23 · 2dfcd23
1 parent f36ca96
commit 2dfcd23
Show file tree

Hide file tree

Showing 13 changed files with 223 additions and 91 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,15 +1,30 @@
 # Change Log
 
+## v4.12.0 (March 12, 2024)
+
+### Added
+
+-  Added online/offline indicator for default Datasources on Settings page.
+
+### Changed
+
+-  Changed default logic to use Custom datasources if online.
+
+### Fixed
+
+-  Fixed expansion panel slow transition times.
+-  Fixed ledger-specific dashboard indexes being cleared after broadcasting transactions.
+
 ## v4.11.1 (February 14, 2024)
 
 ### Changed
 
--  Changed new wallet styles and secure secret verbiage. 
+-  Changed new wallet styles and secure secret verbiage.
 -  Changed mobile dashboard's table-view styles.
 
 ### Fixed
 
--  Fixed excessive warn logging of missing TheBananoStand API query params. 
+-  Fixed excessive warn logging of missing TheBananoStand API query params.
 -  Fixed warn color palettes not applying since `4.11.0`.
 -  Fixed copy-icon button vertical alignment.
 -  Fixed expansion panel indicator icon alignment.

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

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -20,7 +20,7 @@ import { CreateWalletDialogComponent } from '@app/overlays/dialogs/create-wallet
 import { CreateWalletOverlayComponent } from '@app/overlays/actions/create-wallet/create-wallet.component';
 import { DashboardComponent } from '@app/pages/dashboard/dashboard.component';
 import { DashboardPipe } from '@app/pages/dashboard/dashboard.pipe';
-import { DatasourceAvailablePipe, SettingsPageComponent } from '@app/pages/settings/settings.component';
+import { SettingsPageComponent } from '@app/pages/settings/settings.component';
 import { EmptyStateModule } from '@app/components/empty-state/empty-state.module';
 import { EnterSecretBottomSheetComponent } from '@app/overlays/bottom-sheet/enter-secret/enter-secret-bottom-sheet.component';
 import { EnterSecretComponent } from '@app/overlays/actions/enter-secret/enter-secret.component';
@@ -100,6 +100,7 @@ import { AddRpcDialogComponent } from '@app/overlays/dialogs/add-rpc/add-rpc-dia
 import { AddRpcBottomSheetComponent } from '@app/overlays/bottom-sheet/add-rpc/add-rpc-bottom-sheet.component';
 import { initializeApp } from './app.initializer';
 import { ReceiveSnackbarComponent } from '@app/overlays/snackbar/receive-snackbar.component';
+import { AddSpyglassOverlayComponent } from '@app/overlays/actions/add-spyglass/add-spyglass.component';
 
 LOAD_WASM().subscribe((res: any) => console.log('WASM ngx-scanner-qrcode loaded', res));
 
@@ -133,7 +134,6 @@ LOAD_WASM().subscribe((res: any) => console.log('WASM ngx-scanner-qrcode loaded'
         CreateWalletOverlayComponent,
         DashboardComponent,
         DashboardPipe,
-        DatasourceAvailablePipe,
         EnterSecretBottomSheetComponent,
         EnterSecretComponent,
         EnterSecretDialogComponent,
@@ -166,6 +166,7 @@ LOAD_WASM().subscribe((res: any) => console.log('WASM ngx-scanner-qrcode loaded'
         AccountTableComponent,
         AccountActionsComponent,
         ReceiveSnackbarComponent,
+        AddSpyglassOverlayComponent,
     ],
     imports: [
         AppRoutingModule,

diff --git a/src/app/components/list-item-tag/list-item-tag.component.scss b/src/app/components/list-item-tag/list-item-tag.component.scss
@@ -1,3 +1,5 @@
+@use 'node_modules/@brightlayer-ui/colors/palette' as blui;
+
 .list-item-tag {
     display: inline-block;
 }
@@ -16,3 +18,18 @@
     line-height: 1rem;
     font-size: 0.625rem;
 }
+
+.online {
+    background-color: #0d5d11;
+    color: rgba(255, 255, 255, 0.92);
+    &.outline {
+        color: #0d5d11;
+        border: solid 1px #0d5d11;
+        background: rgba(255, 255, 255, 0.92);
+    }
+}
+
+.offline {
+    background-color: map-get(blui.$blui-red, 700);
+    color: rgba(255, 255, 255, 0.92);
+}
diff --git a/src/app/components/list-item-tag/list-item-tag.component.ts b/src/app/components/list-item-tag/list-item-tag.component.ts
@@ -7,12 +7,16 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
     selector: 'list-item-tag',
     template: `
         <div
+            *ngIf="!variant"
             class="list-item-tag-content mat-caption"
             [style.backgroundColor]="backgroundColor"
             [style.color]="fontColor"
         >
             {{ label }}
         </div>
+        <div *ngIf="variant" class="list-item-tag-content mat-caption" [ngClass]="variant" [class.outline]="outline">
+            {{ label }}
+        </div>
     `,
     styleUrls: ['list-item-tag.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -24,4 +28,8 @@ export class ListItemTagComponent {
     @Input() fontColor: string;
     /** The label text */
     @Input() label: string;
+    /** Common variants. */
+    @Input() variant: 'online' | 'offline' = undefined;
+    /** Style variant. */
+    @Input() outline = false;
 }
diff --git a/src/app/components/list-item-tag/list-item-tag.module.ts b/src/app/components/list-item-tag/list-item-tag.module.ts
@@ -1,8 +1,10 @@
 import { NgModule } from '@angular/core';
 import { ListItemTagComponent } from './list-item-tag.component';
+import { CommonModule } from '@angular/common';
 
 @NgModule({
     declarations: [ListItemTagComponent],
     exports: [ListItemTagComponent],
+    imports: [CommonModule],
 })
 export class ListItemTagModule {}
diff --git a/src/app/overlays/actions/add-spyglass/add-spyglass.component.scss b/src/app/overlays/actions/add-spyglass/add-spyglass.component.scss
@@ -0,0 +1,11 @@
+.add-spyglass-overlay {
+    width: 380px;
+}
+
+.add-spyglass-example {
+    font-family: monospace;
+    background: #e6e6e6;
+    padding: 0 4px;
+    border-radius: 4px;
+    margin-top: 8px;
+}
diff --git a/src/app/overlays/actions/add-spyglass/add-spyglass.component.ts b/src/app/overlays/actions/add-spyglass/add-spyglass.component.ts
@@ -0,0 +1,65 @@
+import { Component, EventEmitter, Output } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { ADD_RPC_NODE_BY_URL } from '@app/services/wallet-events.service';
+
+@Component({
+    selector: 'app-add-spyglass-overlay',
+    styleUrls: ['add-spyglass.component.scss'],
+    template: `
+        <div class="add-spyglass-overlay overlay-action-container">
+            <div class="overlay-header">Add new Spyglass API datasource</div>
+            <div class="overlay-body">
+                <div class="mat-body-1" style="margin-bottom: 16px">
+                    If the default Spyglass API hosts are unavailable, you can add a custom API instead.
+                </div>
+                <div class="mat-body-1">
+                    <div>Use the input field below to enter the URL of your new API source e.g:</div>
+                    <div class="add-spyglass-example mat-body-1">https://api.spyglass.pw/banano</div>
+                </div>
+                <form style="margin: 32px 0 16px 0">
+                    <mat-form-field style="width: 100%" appearance="fill">
+                        <mat-label>Spyglass API URL</mat-label>
+                        <textarea
+                            type="text"
+                            matInput
+                            (keyup.enter)="addRpcNode()"
+                            [formControl]="urlFormControl"
+                            data-cy="add-new-spyglass-input"
+                        ></textarea>
+                    </mat-form-field>
+                </form>
+            </div>
+            <div class="overlay-footer">
+                <button mat-stroked-button mat-dialog-close color="primary" (click)="close.emit()">Close</button>
+                <button
+                    data-cy="add-spyglass-overlay-button"
+                    mat-flat-button
+                    color="primary"
+                    [disabled]="isDisabled()"
+                    (click)="addRpcNode()"
+                >
+                    Add
+                </button>
+            </div>
+        </div>
+    `,
+})
+export class AddSpyglassOverlayComponent {
+    urlFormControl = new FormControl('');
+
+    @Output() close: EventEmitter<void> = new EventEmitter<void>();
+
+    isDisabled(): boolean {
+        return !this.urlFormControl.value;
+    }
+
+    addRpcNode(): void {
+        if (this.isDisabled()) {
+            return;
+        }
+
+        // TODO: Add checks to see if the node is accessible and online before adding it to the list.
+        ADD_RPC_NODE_BY_URL.next(this.urlFormControl.value);
+        this.close.emit();
+    }
+}
diff --git a/src/app/pages/settings/settings.component.scss b/src/app/pages/settings/settings.component.scss
@@ -4,6 +4,9 @@ $card-horizontal-padding: 16px;
         width: 100%;
         padding: 24px $card-horizontal-padding;
     }
+    .datasource-url {
+        word-break: break-all;
+    }
     .mat-headline-6 {
         margin-bottom: 16px;
     }

diff --git a/src/app/pages/settings/settings.component.ts b/src/app/pages/settings/settings.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, Pipe, PipeTransform } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { Location } from '@angular/common';
 import { Datasource, DatasourceService } from '@app/services/datasource.service';
 import { ChangePasswordBottomSheetComponent } from '@app/overlays/bottom-sheet/change-password/change-password-bottom-sheet.component';
@@ -23,13 +23,7 @@ import { UntilDestroy } from '@ngneat/until-destroy';
 import { AddRpcBottomSheetComponent } from '@app/overlays/bottom-sheet/add-rpc/add-rpc-bottom-sheet.component';
 import { AddRpcDialogComponent } from '@app/overlays/dialogs/add-rpc/add-rpc-dialog.component';
 import { MatSlideToggleChange } from '@angular/material/slide-toggle';
-
-@Pipe({ name: 'available' })
-export class DatasourceAvailablePipe implements PipeTransform {
-    transform(items: Datasource[]): Datasource[] {
-        return items.filter((item) => item.isAccessible === true);
-    }
-}
+import { BLUIColors } from '@brightlayer-ui/colors';
 
 @UntilDestroy()
 @Component({
@@ -39,7 +33,21 @@ export class DatasourceAvailablePipe implements PipeTransform {
             <div [class.primary]="source.isSelected" [style.fontWeight]="source.isSelected ? 600 : 400">
                 {{ source.alias }}
             </div>
-            <div class="mono">{{ source.url }}</div>
+            <div class="mono datasource-url">{{ source.url }}</div>
+            <div style="margin-top: 2px" *ngIf="!source.isAddedByUser">
+                <list-item-tag
+                    *ngIf="source.isAccessible"
+                    style="display: flex"
+                    label="Online"
+                    variant="online"
+                ></list-item-tag>
+                <list-item-tag
+                    *ngIf="!source.isAccessible"
+                    style="display: flex"
+                    label="Offline"
+                    variant="offline"
+                ></list-item-tag>
+            </div>
         </ng-template>
 
         <div class="app-root app-settings-page" responsive>
@@ -94,27 +102,6 @@ export class DatasourceAvailablePipe implements PipeTransform {
                             </button>
                         </div>
                     </mat-card>
-                    <!--
-                    <mat-card style="margin-bottom: 32px; padding-bottom: 24px">
-                        <div class="mat-title">Proof-of-Work</div>
-                        <mat-divider></mat-divider>
-                        <div class="mat-overline" style="margin-top: 16px">Use Client-Side POW</div>
-                        <div class="mat-body-1" style="margin-bottom: 8px">
-                            Your local computer will perform the computation required when sending or receiving
-                            transactions.
-                        </div>
-                        <mat-checkbox
-                            [checked]="powService.getUseClientSidePow()"
-                            (change)="powService.setUseClientSidePow($event.checked)"
-                        >
-                            Enable local proof-of-work
-                        </mat-checkbox>
-                        <div *ngIf="!powService.isWebGLAvailable" style="margin-top: 8px">
-                            <strong>Warning:</strong> This may be very slow on your browser; it is advised to disable
-                            this feature & offload this work to a remote server.
-                        </div>
-                    </mat-card>
-                    -->
                     <mat-card appearance="outlined" style="margin-bottom: 32px">
                         <div class="mat-headline-6">Data Sources</div>
                         <mat-divider></mat-divider>
@@ -143,9 +130,10 @@ export class DatasourceAvailablePipe implements PipeTransform {
                             (change)="selectRpc($event)"
                         >
                             <mat-radio-button
-                                *ngFor="let source of datasourceService.availableRpcDataSources | available"
+                                *ngFor="let source of datasourceService.availableRpcDataSources"
                                 [value]="source"
                                 [aria-label]="source.alias"
+                                [disabled]="!source.isAccessible"
                             >
                                 <ng-template *ngTemplateOutlet="radioData; context: { source }"></ng-template>
                             </mat-radio-button>
@@ -180,9 +168,10 @@ export class DatasourceAvailablePipe implements PipeTransform {
                             (change)="selectSpyglassApi($event)"
                         >
                             <mat-radio-button
-                                *ngFor="let source of datasourceService.availableSpyglassApiSources | available"
+                                *ngFor="let source of datasourceService.availableSpyglassApiSources"
                                 [value]="source"
                                 [aria-label]="source.alias"
+                                [disabled]="!source.isAccessible"
                             >
                                 <ng-template *ngTemplateOutlet="radioData; context: { source }"></ng-template>
                             </mat-radio-button>
@@ -252,6 +241,7 @@ export class SettingsPageComponent implements OnInit {
     selectedCurrencyCode: string;
     minimumThreshold: number;
     isEnableAutoReceiveFeature: boolean;
+    colors = BLUIColors;
 
     constructor(
         public vp: ViewportService,

diff --git a/src/app/services/datasource.service.ts b/src/app/services/datasource.service.ts
@@ -68,13 +68,16 @@ export class DatasourceService {
                 const newSource = {
                     isSelected: false,
                     isAccessible: true,
-                    alias: `Custom node #${index}`,
+                    isAddedByUser: true,
+                    alias: `Custom node #${index + 1}`,
                     url: customSourceUrl,
                 };
                 this.customRpcDataSources.push(newSource);
             });
 
-            /** When a custom datasource is added, we will set it as the selected RPC datasource. */
+            /** When a custom datasource is added, we will set it as the selected RPC datasource.
+             *  There is currently no check in place, within the component, to check to see if the datasource is online when adding it.
+             * */
             this.setRpcSource(
                 this.customRpcDataSources[this.customRpcDataSources.length - 1] || this.defaultRpcDataSource
             );
@@ -87,7 +90,7 @@ export class DatasourceService {
                 .then(() => {
                     source.isAccessible = true;
                     /** We want to default the RPC node to Kalium since it is configured to work with Boom-PoW. */
-                    if (!this.rpcSource || source.alias === 'Kalium') {
+                    if (!this.rpcSource || (source.alias === 'Kalium' && !this._isCustomSource(this.rpcSource))) {
                         // eslint-disable-next-line no-console
                         console.log(`Using ${source.alias} as RPC source.`);
                         this.setRpcSource(source);
@@ -115,6 +118,10 @@ export class DatasourceService {
         });
     }
 
+    private _isCustomSource(source: Datasource): boolean {
+        return source && source.alias.includes('Custom');
+    }
+
     setRpcSource(source: Datasource): void {
         if (this.rpcSource) {
             this.rpcSource.isSelected = false;