Redesign top of address page

frontend/src/app/shared/components/address-type/address-type.component.html

@@ -0,0 +1,29 @@
+@switch (vout?.scriptpubkey_type || null) {
+  @case ('fee') {
+    <span i18n="address.fee">fee</span>
+  }
+  @case ('empty') {
+    <span i18n="address.empty">empty</span>
+  }
+  @case ('v0_p2wpkh') {
+    <span>P2WPKH</span>
+  }
+  @case ('v0_p2wsh') {
+    <span>P2WSH</span>
+  }
+  @case ('v1_p2tr') {
+    <span>P2TR</span>
+  }
+  @case ('provably_unspendable') {
+    <span i18n="address.provably-unspendable">provably unspendable</span>
+  }
+  @case ('multisig') {
+    <span i18n="address.bare-multisig">bare multisig</span>
+  }
+  @case (null) {
+    <span>unknown</span>
+  }
+  @default {
+    <span>{{ vout.scriptpubkey_type.toUpperCase() }}</span>
+  }
+}

frontend/src/app/shared/components/address-type/address-type.component.ts

@@ -0,0 +1,11 @@
+import { Component, Input } from '@angular/core';
+import { Vout } from '../../../interfaces/electrs.interface';
+
+@Component({
+  selector: 'app-address-type',
+  templateUrl: './address-type.component.html',
+  styleUrls: []
+})
+export class AddressTypeComponent {
+  @Input() vout: Vout;
+}

frontend/src/app/shared/shared.module.ts

@@ -87,6 +87,7 @@ import { ChangeComponent } from '../components/change/change.component';
 import { SatsComponent } from './components/sats/sats.component';
 import { BtcComponent } from './components/btc/btc.component';
 import { FeeRateComponent } from './components/fee-rate/fee-rate.component';
+import { AddressTypeComponent } from './components/address-type/address-type.component';
 import { TruncateComponent } from './components/truncate/truncate.component';
 import { SearchResultsComponent } from '../components/search-form/search-results/search-results.component';
 import { TimestampComponent } from './components/timestamp/timestamp.component';
@@ -202,6 +203,7 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir
     SatsComponent,
     BtcComponent,
     FeeRateComponent,
+    AddressTypeComponent,
     TruncateComponent,
     SearchResultsComponent,
     TimestampComponent,
@@ -343,6 +345,7 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir
     SatsComponent,
     BtcComponent,
     FeeRateComponent,
+    AddressTypeComponent,
     TruncateComponent,
     SearchResultsComponent,
     TimestampComponent,