127 Display platform logo in addition to name on clipboard page

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
         }
     ]
 };

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>

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;
+                }
             }
         }
 

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;
+    }
+}

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 {}