migrate swal to mat dialog

src/app/app.component.ts

@@ -73,10 +73,6 @@ export class AppComponent implements OnInit {
       this.globalVars.authenticatedUsers = authenticatedUsers;
     }
 
-    if (params.get('subAccounts') === 'true') {
-      this.globalVars.subAccounts = true;
-    }
-
     // Callback should only be used in mobile applications, where payload is passed through URL parameters.
     const callback = params.get('callback') || stateParamsFromGoogle.callback;
     if (callback) {

src/app/app.module.ts

@@ -35,6 +35,7 @@ import { GetDesoComponent } from './get-deso/get-deso.component';
 import { BackupSeedDialogComponent } from './grouped-account-select/backup-seed-dialog/backup-seed-dialog.component';
 import { GroupedAccountSelectComponent } from './grouped-account-select/grouped-account-select.component';
 import { RecoverySecretComponent } from './grouped-account-select/recovery-secret/recovery-secret.component';
+import { RemoveAccountDialogComponent } from './grouped-account-select/remove-account-dialog/remove-account-dialog.component';
 import { HomeComponent } from './home/home.component';
 import { IconsModule } from './icons/icons.module';
 import { IdentityService } from './identity.service';
@@ -105,6 +106,7 @@ import { TransactionSpendingLimitComponent } from './transaction-spending-limit/
     GroupedAccountSelectComponent,
     RecoverySecretComponent,
     BackupSeedDialogComponent,
+    RemoveAccountDialogComponent,
   ],
   imports: [
     BrowserModule,

src/app/approve/approve.component.ts

@@ -105,8 +105,7 @@ export class ApproveComponent implements OnInit {
     const signedTransactionHex = this.signingService.signTransaction(
       account.seedHex,
       this.transactionHex,
-      isDerived,
-      account.accountNumber
+      isDerived
     );
     this.finishFlow(signedTransactionHex);
   }

src/app/auth/google/google.component.ts

@@ -2,7 +2,7 @@ import { Component, NgZone, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Subject } from 'rxjs';
 import { environment } from '../../../environments/environment';
-import { GoogleAuthState } from '../../../types/identity';
+import { GoogleAuthState, LoginMethod } from '../../../types/identity';
 import { AccountService } from '../../account.service';
 import { RouteNames } from '../../app-routing.module';
 import { BackendAPIService } from '../../backend-api.service';
@@ -93,9 +93,8 @@ export class GoogleComponent implements OnInit {
             mnemonic,
             extraText,
             network,
-            0,
             {
-              google: true,
+              loginMethod: LoginMethod.GOOGLE,
             }
           );
         } catch (err) {
@@ -149,9 +148,8 @@ export class GoogleComponent implements OnInit {
           mnemonic,
           extraText,
           network,
-          0,
           {
-            google: true,
+            loginMethod: LoginMethod.GOOGLE,
           }
         );
         this.loading = false;

src/app/backend-api.service.ts

@@ -304,11 +304,7 @@ export class BackendAPIService {
     }
     const isDerived = this.accountService.isMetamaskAccount(account);
 
-    const jwt = this.signingService.signJWT(
-      account.seedHex,
-      account.accountNumber,
-      isDerived
-    );
+    const jwt = this.signingService.signJWT(account.seedHex, isDerived);
     return this.post(path, { ...body, ...{ JWT: jwt } });
   }
 

src/app/crypto.service.ts

@@ -142,49 +142,32 @@ export class CryptoService {
     nonStandard?: boolean
   ): HDNode {
     const seed = bip39.mnemonicToSeedSync(mnemonic, extraText);
-    return deriveKeys(seed, 0, {
+    return generateSubAccountKeys(seed, 0, {
       nonStandard,
     });
   }
 
   getSubAccountKeychain(masterSeedHex: string, accountIndex: number): HDNode {
     const seedBytes = Buffer.from(masterSeedHex, 'hex');
-    return deriveKeys(seedBytes, accountIndex);
+    return generateSubAccountKeys(seedBytes, accountIndex);
   }
 
   keychainToSeedHex(keychain: HDNode): string {
     return keychain.privateKey.toString('hex');
   }
 
-  /**
-   * For a given parent seed hex and account number, return the corresponding private key. Public/private
-   * key pairs are independent and unique based on a combination of the seed hex and account number.
-   * @param parentSeedHex This is the seed hex used to generate multiple HD wallets/keys from a single seed.
-   * @param accountNumber This is the account number used to generate unique keys from the parent seed.
-   * @returns
-   */
-  seedHexToKeyPair(parentSeedHex: string, accountNumber: number): EC.KeyPair {
+  seedHexToKeyPair(seedHex: string): EC.KeyPair {
     const ec = new EC('secp256k1');
 
-    if (accountNumber === 0) {
-      return ec.keyFromPrivate(parentSeedHex);
-    }
-
-    const hdKeys = this.getSubAccountKeychain(parentSeedHex, accountNumber);
-    const seedHex = this.keychainToSeedHex(hdKeys);
-
     return ec.keyFromPrivate(seedHex);
   }
 
-  encryptedSeedHexToPublicKey(
-    encryptedSeedHex: string,
-    accountNumber: number
-  ): string {
+  encryptedSeedHexToPublicKey(encryptedSeedHex: string): string {
     const seedHex = this.decryptSeedHex(
       encryptedSeedHex,
       this.globalVars.hostname
     );
-    const privateKey = this.seedHexToKeyPair(seedHex, accountNumber);
+    const privateKey = this.seedHexToKeyPair(seedHex);
     return this.privateKeyToDeSoPublicKey(privateKey, this.globalVars.network);
   }
 
@@ -309,7 +292,7 @@ export class CryptoService {
  * m / purpose' / coin_type' / account' / change / address_index
  * See for more details: https://github.com/bitcoin/bips/blob/master/bip-0044.mediawiki#account
  */
-function deriveKeys(
+function generateSubAccountKeys(
   seedBytes: Buffer,
   accountIndex: number,
   options?: { nonStandard?: boolean }

src/app/derive/derive.component.html

@@ -21,19 +21,7 @@
       }}</span>
     </h4>
     <ng-container *ngIf="!publicKeyBase58Check">
-      <grouped-account-select
-        *ngIf="globalVars.subAccounts; else legacyAccountSelect"
-        (onAccountSelect)="onAccountSelected($event)"
-      />
-      <ng-template #legacyAccountSelect>
-        <app-account-select
-          (onAccountSelect)="onAccountSelected($event)"
-        ></app-account-select>
-        <div class="text--divider margin-top--medium margin-bottom--medium">
-          or
-        </div>
-        <app-log-in-options></app-log-in-options>
-      </ng-template>
+      <grouped-account-select (onAccountSelect)="onAccountSelected($event)" />
     </ng-container>
     <div
       class="box--border box--base box--rounded"

src/app/derive/derive.component.ts

@@ -64,6 +64,11 @@ export class DeriveComponent implements OnInit {
         throw Error('invalid query parameter permutation');
       }
       if (params.publicKey) {
+        if (!this.publicKeyBase58Check) {
+          this.accountService.updateAccountInfo(params.publicKey, {
+            lastLoginTimestamp: Date.now(),
+          });
+        }
         this.publicKeyBase58Check = params.publicKey;
         this.isSingleAccount = true;
       }

src/app/global-vars.service.ts

@@ -62,12 +62,6 @@ export class GlobalVarsService {
    */
   showSkip: boolean = false;
 
-  /**
-   * Flag used to gate the new subAccounts functionality. After some sunset
-   * period (TBD), we can remove this flag and make this the default behavior.
-   */
-  subAccounts: boolean = false;
-
   /**
    * Set of public keys that have been authenticated by the calling application.
    * This is used as a hint to decide whether to show the derived key approval

src/app/grouped-account-select/backup-seed-dialog/backup-seed-dialog.component.html

@@ -19,11 +19,14 @@ <h1 class="dialog__title">Backup DeSo Seed</h1>
         >
       </p>
       <footer class="display--flex">
-        <button class="button--medium button--secondary" (click)="cancel()">
+        <button
+          class="button--medium button--primary--outline"
+          (click)="cancel()"
+        >
           Cancel
         </button>
         <button
-          class="button--medium button--primary margin-right--small"
+          class="button--medium button--primary margin-left--small"
           (click)="showSecrets()"
         >
           Continue
@@ -73,14 +76,17 @@ <h1 class="dialog__title">Backup DeSo Seed</h1>
         >
       </p>
       <footer class="display--flex">
-        <button class="button--medium button--secondary" (click)="cancel()">
+        <button
+          class="button--medium button--primary--outline"
+          (click)="cancel()"
+        >
           Cancel
         </button>
         <button
-          class="button--medium button--primary margin-right--small"
+          class="button--medium button--primary margin-left--small"
           (click)="disableBackup()"
         >
-          I Have Backed Up My Seed
+          Confirm
         </button>
       </footer>
     </div>

src/app/grouped-account-select/grouped-account-select.component.html

@@ -4,7 +4,7 @@
   *ngIf="loadingAccounts; else accountsSection"
 ></div>
 <ng-template #accountsSection>
-  <div class="section--accounts" *ngIf="hasVisibleAccounts">
+  <div class="section--accounts" *ngIf="this.accountGroups.size > 0">
     <div class="section--accounts__header margin-bottom--medium">
       Select an account
     </div>
@@ -17,17 +17,22 @@
     >
       <div *ngIf="group.value.accounts.length" class="margin-bottom--large">
         <ul
-          class="section--accounts__list container--scrollbar margin-bottom--small"
+          [id]="'account-select-group-' + group.key"
+          class="section--accounts__list container--scrollbar margin-bottom--small relative"
         >
           <li
+            [id]="'account-select-' + account.publicKey"
             *ngFor="let account of group.value.accounts; let j = index"
-            data-control-name="account-select-item"
           >
             <div class="display--flex items--center margin-top--small">
               <button
                 class="section--accounts__item margin-right--small"
+                data-control-name="account-select-item"
                 (click)="selectAccount(account.publicKey)"
                 role="button"
+                [ngClass]="{
+                  'section--accounts__item--just-added': account.publicKey === this.justAddedPublicKey,
+                }"
               >
                 <div class="display--flex items--center">
                   <img
@@ -36,10 +41,17 @@
                   />
                   <div>
                     <div>
-                      <span [title]="getAccountDisplayName(account)">{{
-                        getAccountDisplayName(account)
-                          | truncateAddressOrUsername
-                      }}</span>
+                      <span
+                        [ngClass]="{
+                          'font-weight--bold': account.publicKey === this.justAddedPublicKey,
+                          'text--neutral-white': account.publicKey === this.justAddedPublicKey,
+                        }"
+                        [title]="getAccountDisplayName(account)"
+                        >{{
+                          getAccountDisplayName(account)
+                            | truncateAddressOrUsername
+                        }}</span
+                      >
                       <span
                         *ngIf="account.lastUsed && !this.globalVars.isMobile()"
                         class="font-size--xsmall text--green-lighter margin-left--small"
@@ -49,6 +61,10 @@
                     <div
                       *ngIf="this.globalVars.isMobile()"
                       class="display--flex"
+                      [ngClass]="{
+                        'font-weight--bold': account.publicKey === this.justAddedPublicKey,
+                        'text--neutral-white': account.publicKey === this.justAddedPublicKey,
+                      }"
                     >
                       <span class="font-size--xsmall"
                         >Account: {{ account.accountNumber }}</span
@@ -65,6 +81,10 @@
                   <div
                     *ngIf="!this.globalVars.isMobile()"
                     class="display--flex flex--column items--end"
+                    [ngClass]="{
+                      'font-weight--bold': account.publicKey === this.justAddedPublicKey,
+                      'text--neutral-white': account.publicKey === this.justAddedPublicKey,
+                    }"
                   >
                     <span
                       class="font-weight--bold font-size--xsmall margin-right--small"
@@ -100,19 +120,6 @@
         </ul>
         <div *ngIf="!isMetaMaskAccountGroup(group.key)">
           <div class="display--flex">
-            <button
-              *ngIf="shouldShowExportSeedButton(group.key)"
-              class="button--small button--red display--flex items--center margin-right--small"
-              style="width: auto; white-space: nowrap"
-              (click)="exportSeed(group.key)"
-            >
-              <i-feather
-                name="save"
-                class="margin-right--xsmall"
-                style="height: 16px; width: 16px"
-              />
-              Backup
-            </button>
             <button
               class="button--small button--primary display--flex items--center margin-right--small"
               style="width: auto; white-space: nowrap"
@@ -127,7 +134,7 @@
               Account
             </button>
             <button
-              class="button--small button--secondary display--flex items--center"
+              class="button--small button--primary--outline display--flex items--center margin-right--small"
               style="width: auto; white-space: nowrap"
               (click)="toggleRecoverSubAccountForm(group.key)"
             >
@@ -138,6 +145,19 @@
               />
               Recover
             </button>
+            <button
+              *ngIf="shouldShowExportSeedButton(group.key)"
+              class="button--small button--red display--flex items--center"
+              style="width: auto; white-space: nowrap"
+              (click)="exportSeed(group.key)"
+            >
+              <i-feather
+                name="save"
+                class="margin-right--xsmall"
+                style="height: 16px; width: 16px"
+              />
+              Backup
+            </button>
           </div>
           <form
             *ngIf="group.value.showRecoverSubAccountInput"
@@ -168,7 +188,7 @@
   </div>
 </ng-template>
 <div
-  *ngIf="hasVisibleAccounts"
+  *ngIf="this.accountGroups.size > 0"
   class="text--divider margin-top--medium margin-bottom--medium"
 >
   or