feature: add feature flag guard for new account select component

src/app/app.component.ts

@@ -66,6 +66,10 @@ export class AppComponent implements OnInit {
       this.globalVars.getFreeDeso = true;
     }
 
+    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/derive/derive.component.html

@@ -21,14 +21,17 @@
       }}</span>
     </h4>
     <ng-container *ngIf="!publicKeyBase58Check">
-      <app-account-select
-        [allUsers]="allUsers"
-        (onAccountSelect)="this.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>
+      <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>
     </ng-container>
     <div
       class="box--border box--base box--rounded"

src/app/derive/derive.component.ts

@@ -32,7 +32,6 @@ export class DeriveComponent implements OnInit {
   transactionSpendingLimitResponse:
     | TransactionSpendingLimitResponse
     | undefined;
-  hasUsers = false;
   hoveredAccount = -1;
   publicKeyBase58Check: string | undefined = undefined;
   derivedPublicKeyBase58Check: string | undefined = undefined;
@@ -53,10 +52,6 @@ export class DeriveComponent implements OnInit {
   ) {}
 
   ngOnInit(): void {
-    // Load profile pictures and usernames
-    const publicKeys = this.accountService.getPublicKeys();
-    this.hasUsers = publicKeys.length > 0;
-
     this.backendApi.GetAppState().subscribe((res) => {
       this.blockHeight = res.BlockHeight;
     });

src/app/global-vars.service.ts

@@ -62,6 +62,12 @@ 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;
+
   isFullAccessHostname(): boolean {
     return GlobalVarsService.fullAccessHostnames.includes(this.hostname);
   }

src/app/log-in/log-in.component.html

@@ -119,10 +119,16 @@ <h4 class="font-size--small font-weight--bold margin-bottom--small">
     </div>
   </div>
   <div class="padding-bottom--xlarge">
-    <app-account-select
+    <grouped-account-select
+      *ngIf="globalVars.subAccounts; else legacyAccountSelect"
       (onAccountSelect)="onAccountSelect($event)"
-    ></app-account-select>
-    <div class="text--divider margin-top--large margin-bottom--large">or</div>
-    <app-log-in-options></app-log-in-options>
+    />
+    <ng-template #legacyAccountSelect>
+      <app-account-select
+        (onAccountSelect)="onAccountSelect($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>
   </div>
 </div>