feat: coldcard warning on address page

frontend/src/app/components/address/address.component.html

@@ -1,4 +1,7 @@
 <div class="container-xl" [class.liquid-address]="network === 'liquid' || network === 'liquidtestnet'">
+  @if (showColdcardWarning && !isLoadingAddress && !error) {
+    <ng-container *ngTemplateOutlet="coldcardWarning"></ng-container>
+  }
   <div class="title-address">
     <h1 i18n="shared.address">Address</h1>
     <div class="tx-link">
@@ -16,6 +19,7 @@
 
   <div class="clearfix"></div>
 
+
   <ng-template [ngIf]="!isLoadingAddress && !error">
     <div class="box">
 
@@ -261,6 +265,13 @@
 
 <br>
 
+<ng-template #coldcardWarning>
+  <div class="alert alert-danger alert-dismissible coldcard-warning" role="alert">
+    <a [routerLink]="['/docs/faq' | relativeUrl]" fragment="why-may-my-multisig-funds-be-at-risk" i18n="address.coldcard.warning">Warning for ColdCard users: If this multisig wallet uses default setup coldcard devices, the funds in this address may be at risk. Click this warning to learn more.</a>
+    <button type="button" class="btn-close btn-close-white" aria-label="Close" i18n-aria-label (click)="dismissWarning()"></button>
+  </div>
+</ng-template>
+
 <ng-template #confidentialTd>
   <td i18n="shared.confidential">Confidential</td>
 </ng-template>

frontend/src/app/components/address/address.component.scss

@@ -133,3 +133,20 @@ h1 {
   padding-bottom: 0;
   font-size: 0.8rem;
 }
+
+
+.coldcard-warning {
+	display: flex;
+	align-items: center;
+	position: relative;
+  background-color: #b71c1c;
+  border-color: #b71c1c;
+	a {
+		color: #fff;
+	}
+}
+
+.btn-close:hover,
+.btn-close:focus {
+  opacity: 1;
+}

frontend/src/app/components/address/address.component.ts

@@ -14,6 +14,7 @@ import { seoDescriptionNetwork } from '@app/shared/common.utils';
 import { AddressInformation } from '@interfaces/node-api.interface';
 import { AddressTypeInfo } from '@app/shared/address-utils';
 import { extractTapLeaves, fillTapTree, convertTextToBuffer, PsbtKeyValue } from '@app/shared/transaction.utils';
+import { StorageService } from '@app/services/storage.service';
 
 class AddressStats implements ChainStats {
   address: string;
@@ -138,6 +139,8 @@ export class AddressComponent implements OnInit, OnDestroy {
   now = Date.now() / 1000;
   balancePeriod: 'all' | '1m' = 'all';
 
+  showColdcardWarning: boolean = false;
+
   private tempTransactions: Transaction[];
   private timeTxIndexes: number[];
   private lastTransactionTxId: string;
@@ -151,6 +154,7 @@ export class AddressComponent implements OnInit, OnDestroy {
     private apiService: ApiService,
     private seoService: SeoService,
     private formBuilder: UntypedFormBuilder,
+    private storageService: StorageService,
   ) { }
 
   ngOnInit(): void {
@@ -204,6 +208,7 @@ export class AddressComponent implements OnInit, OnDestroy {
           this.seoService.setTitle($localize`:@@address.component.browser-title:Address: ${this.addressString}:INTERPOLATION:`);
           this.seoService.setDescription($localize`:@@meta.description.bitcoin.address:See mempool transactions, confirmed transactions, balance, and more for ${this.stateService.network==='liquid'||this.stateService.network==='liquidtestnet'?'Liquid':'Bitcoin'}${seoDescriptionNetwork(this.stateService.network)} address ${this.addressString}:INTERPOLATION:.`);
 
+          this.showColdcardWarning = false;
           this.addressTypeInfo = new AddressTypeInfo(this.stateService.network || 'mainnet', this.addressString);
 
           return merge(
@@ -337,6 +342,8 @@ export class AddressComponent implements OnInit, OnDestroy {
         } else {
           this.setBalancePeriod('1m');
         }
+
+        this.updateShowColdcardWarning();
       },
       (error) => {
         console.log(error);
@@ -652,6 +659,29 @@ export class AddressComponent implements OnInit, OnDestroy {
     }
   }
 
+  updateShowColdcardWarning() {
+    const showCCWarningPref = this.storageService.getValue('showAddrColdcardWarning');
+
+    if (showCCWarningPref && showCCWarningPref === 'false') {
+      return;
+    }
+
+    if (!['p2sh', 'v0_p2wsh', 'p2sh-p2wsh'].includes(this.addressTypeInfo.type) || !this.addressTypeInfo.isMultisig || this.addressTypeInfo.network !== 'mainnet') {
+      return;
+    }
+
+    if (this.chainStats.balance === 0 && this.mempoolStats.balance === 0) {
+      return;
+    }
+
+    this.showColdcardWarning = true;
+  }
+
+  dismissWarning() {
+    this.storageService.setValue('showAddrColdcardWarning', 'false');
+    this.showColdcardWarning = false;
+  }
+
   ngOnDestroy(): void {
     this.mainSubscription.unsubscribe();
     this.mempoolTxSubscription.unsubscribe();