Merge pull request #5052 from mempool/mononaut/testnet3-banner

Update testnet3 banner

frontend/src/app/shared/components/testnet-alert/testnet-alert.component.html

@@ -1,6 +1,11 @@
 <div class="container p-lg-0 pb-0" style="max-width: 100%; margin-top: 7px" *ngIf="storageService.getValue('hideWarning') !== 'hidden'">
   <div class="alert alert-danger mb-0 text-center">
-    <div class="message-container" i18n="warning-testnet">This is a test network. Coins have no value.</div>
+    <div class="message-container">
+      <span i18n="warning-testnet">This is a test network. Coins have no value.</span>
+      @if (stateService.network === 'testnet') {
+        <span i18n="testnet3-deprecated">Testnet3 is deprecated, and will soon be replaced by <a href="/testnet4">Testnet4</a></span>
+      }
+    </div>
     <button type="button" class="close" (click)="dismissWarning()">
       <span aria-hidden="true">&times;</span>
     </button>

frontend/src/app/shared/components/testnet-alert/testnet-alert.component.scss

@@ -7,10 +7,12 @@
 
   display: flex;
   justify-content: center;
+  align-items: flex-start;
 }
 
 .message-container {
   display: flex;
+  flex-direction: column;
   margin-left: auto;
 }
 

frontend/src/app/shared/components/testnet-alert/testnet-alert.component.ts

@@ -1,5 +1,6 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { StorageService } from '../../../services/storage.service';
+import { StateService } from '../../../services/state.service';
 
 @Component({
   selector: 'app-testnet-alert',
@@ -11,6 +12,7 @@ export class TestnetAlertComponent {
 
   constructor(
     public storageService: StorageService,
+    public stateService: StateService,
   ) { }
 
   dismissWarning(): void {