Task/add platform logo to account selectors in transfer cash balance dialog (#7554)

* Add platform logo to account selectors

* Update changelog

CHANGELOG.md

@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Added a live preview of the date and number format to the user settings
 - Added the country flag to the currency selector
 - Added a _Storybook_ story for the currency selector component
+- Added the platform logo to the account selectors in the transfer cash balance dialog
 - Extended the entity logo component by a `hasPlaceholder` attribute to reserve the space of a missing logo
 - Warmed up the portfolio snapshot calculation in the background during the biometric authentication
 

apps/client/src/app/pages/accounts/transfer-balance/transfer-balance-dialog.component.ts

@@ -61,12 +61,22 @@ export class GfTransferBalanceDialogComponent {
   private readonly dialogRef =
     inject<MatDialogRef<GfTransferBalanceDialogComponent>>(MatDialogRef);
 
+  protected get selectedFromAccount() {
+    return this.getAccountById(
+      this.transferBalanceForm.controls.fromAccount.value
+    );
+  }
+
+  protected get selectedToAccount() {
+    return this.getAccountById(
+      this.transferBalanceForm.controls.toAccount.value
+    );
+  }
+
   public ngOnInit() {
     this.transferBalanceForm.controls.fromAccount.valueChanges.subscribe(
       (id) => {
-        const currency = this.accounts.find((account) => {
-          return account.id === id;
-        })?.currency;
+        const currency = this.getAccountById(id)?.currency;
 
         if (currency) {
           this.currency = currency;
@@ -101,4 +111,10 @@ export class GfTransferBalanceDialogComponent {
 
     return null;
   }
+
+  private getAccountById(aId: string | null) {
+    return this.accounts.find(({ id }) => {
+      return id === aId;
+    });
+  }
 }

apps/client/src/app/pages/accounts/transfer-balance/transfer-balance-dialog.html

@@ -10,6 +10,20 @@
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>From</mat-label>
         <mat-select formControlName="fromAccount">
+          <mat-select-trigger>
+            <div class="d-flex">
+              @if (selectedFromAccount) {
+                <gf-entity-logo
+                  class="mr-1"
+                  [hasPlaceholder]="true"
+                  [tooltip]="selectedFromAccount?.platform?.name"
+                  [url]="selectedFromAccount?.platform?.url"
+                />
+              }
+              <span>{{ selectedFromAccount?.name }}</span>
+            </div>
+          </mat-select-trigger>
+
           @for (account of accounts; track account) {
             <mat-option [value]="account.id">
               <div class="d-flex">
@@ -30,6 +44,20 @@
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>To</mat-label>
         <mat-select formControlName="toAccount">
+          <mat-select-trigger>
+            <div class="d-flex">
+              @if (selectedToAccount) {
+                <gf-entity-logo
+                  class="mr-1"
+                  [hasPlaceholder]="true"
+                  [tooltip]="selectedToAccount?.platform?.name"
+                  [url]="selectedToAccount?.platform?.url"
+                />
+              }
+              <span>{{ selectedToAccount?.name }}</span>
+            </div>
+          </mat-select-trigger>
+
           @for (account of accounts; track account) {
             <mat-option [value]="account.id">
               <div class="d-flex">