From 0a8d7bd361401e903a762fcfb51f301631ec8b1f Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Fri, 7 Aug 2026 10:08:22 +0200
Subject: [PATCH] Task/add platform logo to account selectors in transfer cash
 balance dialog (#7554)

* Add platform logo to account selectors

* Update changelog
---
 CHANGELOG.md                                  |  1 +
 .../transfer-balance-dialog.component.ts      | 22 +++++++++++++--
 .../transfer-balance-dialog.html              | 28 +++++++++++++++++++
 3 files changed, 48 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0fef4ef7d..dd3d6377a 100644
--- a/CHANGELOG.md
+++ b/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
 
diff --git a/apps/client/src/app/pages/accounts/transfer-balance/transfer-balance-dialog.component.ts b/apps/client/src/app/pages/accounts/transfer-balance/transfer-balance-dialog.component.ts
index cbf0e460d..1682874dc 100644
--- a/apps/client/src/app/pages/accounts/transfer-balance/transfer-balance-dialog.component.ts
+++ b/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;
+    });
+  }
 }
diff --git a/apps/client/src/app/pages/accounts/transfer-balance/transfer-balance-dialog.html b/apps/client/src/app/pages/accounts/transfer-balance/transfer-balance-dialog.html
index 2f74bfbe7..941c9485a 100644
--- a/apps/client/src/app/pages/accounts/transfer-balance/transfer-balance-dialog.html
+++ b/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">