Add signer info to history datatable.

src/app/_helpers/index.ts

@@ -10,3 +10,4 @@ export * from '@app/_helpers/read-csv';
 export * from '@app/_helpers/schema-validation';
 export * from '@app/_helpers/sync';
 export * from '@app/_helpers/online-status';
+export * from './to-hex';

src/app/_helpers/to-hex.ts

@@ -0,0 +1,9 @@
+function asciiToHex(str: string): string {
+  const arr = [];
+  for (let n = 0, l = str.length; n < l; n++) {
+    arr.push(Number(str.charCodeAt(n)).toString(16));
+  }
+  return arr.join('');
+}
+
+export { asciiToHex };

src/app/app.component.ts

@@ -44,6 +44,23 @@ export class AppComponent implements OnInit {
     await this.tokenService.init();
     await this.userService.init();
     await this.transactionService.init();
+    try {
+      const publicKeys = await this.authService.getPublicKeys();
+      await this.authService.mutableKeyStore.importPublicKey(publicKeys);
+      this.authService.getTrustedUsers();
+    } catch (error) {
+      this.errorDialogService.openDialog({
+        message: 'Trusted keys endpoint cannot be reached. Please try again later.',
+      });
+      // TODO do something to halt user progress...show a sad cicada page 🦗?
+    }
+    if (!this.swUpdate.isEnabled) {
+      this.swUpdate.available.subscribe(() => {
+        if (confirm('New Version available. Load New Version?')) {
+          window.location.reload();
+        }
+      });
+    }
     await this.router.events
       .pipe(filter((e) => e instanceof NavigationEnd))
       .forEach(async (routeInfo) => {
@@ -69,23 +86,6 @@ export class AppComponent implements OnInit {
           }
         }
       });
-    try {
-      const publicKeys = await this.authService.getPublicKeys();
-      await this.authService.mutableKeyStore.importPublicKey(publicKeys);
-      this.authService.getTrustedUsers();
-    } catch (error) {
-      this.errorDialogService.openDialog({
-        message: 'Trusted keys endpoint cannot be reached. Please try again later.',
-      });
-      // TODO do something to halt user progress...show a sad cicada page 🦗?
-    }
-    if (!this.swUpdate.isEnabled) {
-      this.swUpdate.available.subscribe(() => {
-        if (confirm('New Version available. Load New Version?')) {
-          window.location.reload();
-        }
-      });
-    }
   }
 
   // Load resize

src/app/pages/accounts/account-details/account-details.component.html

@@ -362,6 +362,13 @@
               </mat-cell>
             </ng-container>
 
+            <ng-container matColumnDef="signer">
+              <mat-header-cell *matHeaderCellDef mat-sort-header>Staff</mat-header-cell>
+              <mat-cell *matCellDef="let history">
+                {{ history?.snapshot.signature?.data | signatureUser | async }}
+              </mat-cell>
+            </ng-container>
+
             <ng-container matColumnDef="message">
               <mat-header-cell *matHeaderCellDef mat-sort-header>Message</mat-header-cell>
               <mat-cell *matCellDef="let history">

src/app/pages/accounts/account-details/account-details.component.ts

@@ -25,8 +25,6 @@ import { MatSnackBar } from '@angular/material/snack-bar';
 import { add0x, strip0x } from '@src/assets/js/ethtx/dist/hex';
 import { environment } from '@src/environments/environment';
 import { AccountDetails, Transaction } from '@app/_models';
-import * as openpgp from 'openpgp';
-// const openpgp = require('openpgp');
 
 @Component({
   selector: 'app-account-details',
@@ -52,6 +50,7 @@ export class AccountDetailsComponent implements OnInit, AfterViewInit {
   historyDataSource: MatTableDataSource<any>;
   historyDisplayedColumns: Array<string> = [
     'actor',
+    'signer',
     'message',
     'sequence',
     'dependencies',
@@ -193,15 +192,6 @@ export class AccountDetailsComponent implements OnInit, AfterViewInit {
     });
 
     this.userService.historySubject.subscribe(async (histories) => {
-      if (histories.length > 3) {
-        console.log(histories[0].snapshot.signature.digest);
-        const armoredSignature = histories[0].snapshot.signature.data;
-        console.log(armoredSignature);
-        // const signature = await openpgp.readSignature({ armoredSignature });
-        // alert('Signature read!');
-        // signature.getSigningKeyIds().map(x => console.log(x.toHex()));
-        // console.log('IDs read!');
-      }
       this.historyDataSource = new MatTableDataSource<any>(histories);
       this.historyDataSource.paginator = this.historyPaginator;
       this.historyDataSource.sort = this.historyTableSort;

src/app/shared/_pipes/signature-user.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { SignatureUserPipe } from './signature-user.pipe';
+
+describe('SignatureUserPipe', () => {
+  it('create an instance', () => {
+    const pipe = new SignatureUserPipe();
+    expect(pipe).toBeTruthy();
+  });
+});

src/app/shared/_pipes/signature-user.pipe.ts

@@ -0,0 +1,20 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import * as openpgp from 'openpgp';
+import { asciiToHex } from '@app/_helpers';
+import { KeystoreService } from '@app/_services';
+
+@Pipe({
+  name: 'signatureUser',
+})
+export class SignatureUserPipe implements PipeTransform {
+  async transform(armoredSignature: string, ...args: unknown[]): Promise<string> {
+    const keystore = await KeystoreService.getKeystore();
+    const signature = await openpgp.signature.readArmored(armoredSignature);
+    const keyId = asciiToHex(signature.packets[0].issuerKeyId.bytes);
+    const pubKey = keystore.getPublicKeyForId(keyId);
+    if (pubKey) {
+      return pubKey.users[0].userId.userid;
+    }
+    return '';
+  }
+}

src/app/shared/shared.module.ts

@@ -13,6 +13,7 @@ import { MatDialogModule } from '@angular/material/dialog';
 import { SafePipe } from '@app/shared/_pipes/safe.pipe';
 import { NetworkStatusComponent } from './network-status/network-status.component';
 import { UnixDatePipe } from './_pipes/unix-date.pipe';
+import { SignatureUserPipe } from './_pipes/signature-user.pipe';
 
 @NgModule({
   declarations: [
@@ -26,6 +27,7 @@ import { UnixDatePipe } from './_pipes/unix-date.pipe';
     SafePipe,
     NetworkStatusComponent,
     UnixDatePipe,
+    SignatureUserPipe,
   ],
   exports: [
     TopbarComponent,
@@ -36,6 +38,7 @@ import { UnixDatePipe } from './_pipes/unix-date.pipe';
     SafePipe,
     NetworkStatusComponent,
     UnixDatePipe,
+    SignatureUserPipe,
   ],
   imports: [CommonModule, RouterModule, MatIconModule, MatDialogModule],
 })