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