From eaa2b008648961886eb03888d7bc6f540f09329d Mon Sep 17 00:00:00 2001
From: Kyle McCullen <kmccullen@protonmail.com>
Date: Thu, 11 Dec 2025 06:17:36 -0500
Subject: [PATCH] display platform logo on clipboard details card, add camel
 case interceptor

---
 src/app/app.config.ts                         | 10 ++++--
 .../clipboard-details.component.html          |  5 ++-
 .../clipboard-details.component.scss          |  6 ++++
 .../case-conversion.interceptor.ts            | 32 +++++++++++++++++++
 src/app/shared/models/clipboard-item.ts       |  1 +
 5 files changed, 51 insertions(+), 3 deletions(-)
 create mode 100644 src/app/shared/interceptors/case-conversion.interceptor.ts

diff --git a/src/app/app.config.ts b/src/app/app.config.ts
index b9be8fe..9ac22c1 100644
--- a/src/app/app.config.ts
+++ b/src/app/app.config.ts
@@ -1,16 +1,17 @@
-import { provideHttpClient } from '@angular/common/http';
+import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { ApplicationConfig } from '@angular/core';
 import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
 import { provideRouter } from '@angular/router';
 import { provideToastr } from 'ngx-toastr';
 import { routes } from './app.routes';
 import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
+import { CaseConversionInterceptor } from './shared/interceptors/case-conversion.interceptor';
 
 export const appConfig: ApplicationConfig = {
     providers: [
         provideRouter(routes),
         provideAnimationsAsync(),
-        provideHttpClient(),
+        provideHttpClient(withInterceptorsFromDi()),
         provideToastr({
             positionClass: 'toast-bottom-right'
         }),
@@ -19,6 +20,11 @@ export const appConfig: ApplicationConfig = {
             useValue: {
                 subscriptSizing: 'dynamic'
             }
+        },
+        {
+            provide: HTTP_INTERCEPTORS,
+            useClass: CaseConversionInterceptor,
+            multi: true
         }
     ]
 };
diff --git a/src/app/features/clipboard/clipboard-details/clipboard-details.component.html b/src/app/features/clipboard/clipboard-details/clipboard-details.component.html
index 91c89b8..3b66ec4 100644
--- a/src/app/features/clipboard/clipboard-details/clipboard-details.component.html
+++ b/src/app/features/clipboard/clipboard-details/clipboard-details.component.html
@@ -39,7 +39,10 @@
                 </div>
                 <div class="item">
                     <div class="title">Platform:</div>
-                    <div class="value">{{ clipboardItem.platform }}</div>
+                    <div class="value flex-row">
+                      <img [src]="clipboardItem.platformLogoUrl" height="30" />
+                      <div>{{ clipboardItem.platform }}</div>
+                    </div>
                 </div>
                 <div class="item">
                     <div class="title">Description:</div>
diff --git a/src/app/features/clipboard/clipboard-details/clipboard-details.component.scss b/src/app/features/clipboard/clipboard-details/clipboard-details.component.scss
index 4ad576e..b2b910a 100644
--- a/src/app/features/clipboard/clipboard-details/clipboard-details.component.scss
+++ b/src/app/features/clipboard/clipboard-details/clipboard-details.component.scss
@@ -48,6 +48,12 @@
                         background: $warn-color;
                     }
                 }
+
+                &.flex-row {
+                    display: flex;
+                    flex-direction: row;
+                    align-items: center;
+                }
             }
         }
 
diff --git a/src/app/shared/interceptors/case-conversion.interceptor.ts b/src/app/shared/interceptors/case-conversion.interceptor.ts
new file mode 100644
index 0000000..91c7c02
--- /dev/null
+++ b/src/app/shared/interceptors/case-conversion.interceptor.ts
@@ -0,0 +1,32 @@
+import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+@Injectable()
+export class CaseConversionInterceptor implements HttpInterceptor {
+    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+        return next.handle(req).pipe(
+            map((event) => {
+                if (event instanceof HttpResponse && event.body) {
+                    return event.clone({ body: this.snakeToCamel(event.body) });
+                }
+                return event;
+            })
+        );
+    }
+
+    private snakeToCamel(obj: any): any {
+        if (obj instanceof Array) {
+            return obj.map((v) => this.snakeToCamel(v));
+        } else if (obj !== null && obj?.constructor === Object) {
+            return Object.keys(obj).reduce((result, key) => {
+                const camelKey = key.replace(/_([a-z])/g, (_, letter) => letter.toUpperCase());
+                result[camelKey] = this.snakeToCamel(obj[key]);
+                return result;
+            }, {} as any);
+        }
+
+        return obj;
+    }
+}
diff --git a/src/app/shared/models/clipboard-item.ts b/src/app/shared/models/clipboard-item.ts
index 983582f..f96fbf3 100644
--- a/src/app/shared/models/clipboard-item.ts
+++ b/src/app/shared/models/clipboard-item.ts
@@ -32,6 +32,7 @@ export interface PaymentClipboardItem extends ClipboardItem {
     destinations: PaymentDestination[];
     platform: string;
     description: string | null;
+    platformLogoUrl: string;
 }
 
 export interface Bolt11ClipboardItem extends ClipboardItem, Bolt11Details {}