Frontend - Ledger HID communication #606

Frontend - Ledger HID communication

Author: directcuteo

frontend/angular.json

@@ -35,7 +35,8 @@
             "index": "src/index.html",
             "main": "src/main.ts",
             "polyfills": [
-              "zone.js"
+              "zone.js",
+              "polyfills.ts"
             ],
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "scss",

frontend/package-lock.json

@@ -24,11 +24,13 @@
     "@angular/platform-browser": "^16.2.0",
     "@angular/platform-browser-dynamic": "^16.2.0",
     "@angular/router": "^16.2.0",
+    "@ledgerhq/hw-transport-webhid": "^6.29.2",
     "@ngneat/until-destroy": "^10.0.0",
     "@ngrx/effects": "^16.2.0",
     "@ngrx/router-store": "^16.2.0",
     "@ngrx/store": "^16.2.0",
     "@openmina/shared": "^0.96.0",
+    "buffer": "^6.0.3",
     "d3": "^7.8.4",
     "eigen": "^0.2.2",
     "mathjs": "^12.3.0",
@@ -48,6 +50,7 @@
     "@types/d3": "^7.4.0",
     "@types/jasmine": "~4.3.0",
     "@types/node": "^20.4.8",
+    "@types/w3c-web-hid": "^1.0.6",
     "cypress": "^13.3.2",
     "cypress-real-events": "^1.10.0",
     "jasmine-core": "~4.6.0",

frontend/package.json

@@ -0,0 +1,3 @@
+import * as buffer from 'buffer';
+
+(window as any).Buffer = buffer.Buffer;

frontend/polyfills.ts

@@ -3,7 +3,7 @@ import { MinaState, selectMinaState } from '@app/app.setup';
 import { Actions, createEffect, ofType } from '@ngrx/effects';
 import { Store } from '@ngrx/store';
 import { createNonDispatchableEffect, Effect, removeParamsFromURL } from '@openmina/shared';
-import { map, switchMap, tap } from 'rxjs';
+import { filter, map, switchMap, tap } from 'rxjs';
 import { AppActions } from '@app/app.actions';
 import { Router } from '@angular/router';
 import { FeatureType, MinaNode } from '@shared/types/core/environment/mina-env.type';
@@ -24,6 +24,8 @@ export class AppEffects extends BaseEffect {
   readonly onNodeChange$: Effect;
   readonly getNodeDetails$: Effect;
 
+  private requestInProgress: boolean = false;
+
   constructor(private actions$: Actions,
               private appService: AppService,
               private rustNode: RustService,
@@ -65,7 +67,10 @@ export class AppEffects extends BaseEffect {
 
     this.getNodeDetails$ = createEffect(() => this.actions$.pipe(
       ofType(AppActions.getNodeDetails),
+      filter(() => !this.requestInProgress),
+      tap(() => this.requestInProgress = true),
       switchMap(() => this.appService.getActiveNodeDetails()),
+      tap(() => this.requestInProgress = false),
       map(details => AppActions.getNodeDetailsSuccess({ details })),
     ));
   }

frontend/src/app/app.effects.ts

@@ -39,30 +39,30 @@ export class AppService {
           snarks: data.snark_pool.snarks,
           transactions: data.transaction_pool.transactions,
         } as AppNodeDetails)),
-        catchError(() => of({
-          status: AppNodeStatus.OFFLINE,
-          blockHeight: null,
-          blockTime: null,
-          peers: 0,
-          download: 0,
-          upload: 0,
-          transactions: 0,
-          snarks: 0,
-        } as AppNodeDetails)),
+        catchError((err) => {
+          return of({
+            status: AppNodeStatus.OFFLINE,
+            blockHeight: null,
+            blockTime: null,
+            peers: 0,
+            download: 0,
+            upload: 0,
+            transactions: 0,
+            snarks: 0,
+          } as AppNodeDetails);
+        }),
       );
   }
 
   private getStatus(data: NodeDetails): AppNodeStatus {
-    if (data.transition_frontier.best_tip === null && data.transition_frontier.sync.status !== 'Synced') {
-      return AppNodeStatus.BOOTSTRAP;
-    }
-    if (data.transition_frontier.best_tip !== null && data.transition_frontier.sync.status !== 'Synced') {
-      return AppNodeStatus.CATCHUP;
-    }
     if (data.transition_frontier.sync.status === 'Synced') {
       return AppNodeStatus.SYNCED;
+    } else {
+      if (data.transition_frontier.best_tip === null) {
+        return AppNodeStatus.BOOTSTRAP;
+      }
+      return AppNodeStatus.CATCHUP;
     }
-    return data.transition_frontier.sync.status as AppNodeStatus;
   }
 }
 

frontend/src/app/app.service.ts

@@ -22,11 +22,6 @@ export class BenchmarksWalletsComponent extends StoreDispatcher implements OnIni
     this.select(AppSelectors.activeNode, () => {
       this.dispatch(BenchmarksWalletsGetWallets, { initialRequest: true });
     }, filter(Boolean), skip(1));
-
-    // this.select(selectAppNodeStatus, (status: NodeStatus) => {
-    //   this.blockLevel = status.blockLevel;
-    //   this.dispatch(BenchmarksWalletsGetWallets);
-    // }, filter(Boolean), filter(status => status.blockLevel !== this.blockLevel));
   }
 
   override ngOnDestroy(): void {

frontend/src/app/features/benchmarks/wallets/benchmarks-wallets.component.ts

@@ -1,7 +1,8 @@
 import {
   BENCHMARKS_WALLETS_CHANGE_FEE,
   BENCHMARKS_WALLETS_CHANGE_TRANSACTION_BATCH,
-  BENCHMARKS_WALLETS_CLOSE, BENCHMARKS_WALLETS_GET_ALL_TXS_SUCCESS,
+  BENCHMARKS_WALLETS_CLOSE,
+  BENCHMARKS_WALLETS_GET_ALL_TXS_SUCCESS,
   BENCHMARKS_WALLETS_GET_WALLETS,
   BENCHMARKS_WALLETS_GET_WALLETS_SUCCESS,
   BENCHMARKS_WALLETS_SELECT_WALLET,
@@ -16,7 +17,7 @@ import {
   BenchmarksWalletTransactionStatus,
 } from '@shared/types/benchmarks/wallets/benchmarks-wallet.type';
 import { BenchmarksWalletTransaction } from '@shared/types/benchmarks/wallets/benchmarks-wallet-transaction.type';
-import { hasValue, lastItem, ONE_BILLION, toReadableDate } from '@openmina/shared';
+import { hasValue, lastItem, ONE_BILLION } from '@openmina/shared';
 import { BenchmarksWalletsState } from '@benchmarks/wallets/benchmarks-wallets.state';
 import { getTimeFromMemo } from '@shared/helpers/transaction.helper';
 
@@ -98,8 +99,9 @@ export function reducer(state: BenchmarksWalletsState = initialState, action: Be
               from: wallet.publicKey,
               nonce,
               to: getRandomReceiver(wallet, state.wallets),
+              // to: 'B62qp6QqfMrDGULkuCTMhLYrG4iTxnjnyS3pv8bFppRsz488HCxExEY', // Teo's ledger address
               fee: (state.sendingFee * ONE_BILLION).toString(),
-              amount: '2000000000',
+              amount: (2 * ONE_BILLION).toString(),
               memo,
               validUntil: '4294967295',
             };
@@ -121,7 +123,7 @@ export function reducer(state: BenchmarksWalletsState = initialState, action: Be
             nonce: nonce.toString(),
             to: state.wallets[i].publicKey,
             fee: (state.sendingFee * ONE_BILLION).toString(),
-            amount: '2000000000',
+            amount: (2 * ONE_BILLION).toString(),
             memo,
             validUntil: '4294967295',
           };