feat: per-section Clear button

src/App.vue

@@ -513,6 +513,47 @@ html, body {
   border-bottom: 1px solid var(--border);
 }
 
+/* "Clear" button living in the top-right of every panel head */
+.section-clear {
+  margin-left: auto;
+  align-self: flex-start;
+  margin-top: 14px;
+  appearance: none;
+  background: transparent;
+  border: 1px solid var(--border);
+  color: var(--text-faint);
+  font-family: var(--font-mono);
+  font-size: 10px;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  padding: 5px 10px 5px 8px;
+  border-radius: var(--radius);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  transition: color 0.15s, border-color 0.15s, background 0.15s, transform 0.05s;
+}
+
+.section-clear:hover {
+  color: var(--danger);
+  border-color: color-mix(in srgb, var(--danger) 55%, transparent);
+  background: color-mix(in srgb, var(--danger) 6%, transparent);
+}
+
+.section-clear:active { transform: translateY(1px); }
+
+.section-clear:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 25%, transparent);
+}
+
+.section-clear__glyph {
+  font-size: 13px;
+  letter-spacing: 0;
+  line-height: 1;
+}
+
 .panel__num {
   font-family: var(--font-serif);
   font-style: italic;

src/components/BuildTx.vue

@@ -5,6 +5,15 @@
       <h2 class="panel__title">
         Build unsigned transaction
       </h2>
+      <button
+        class="section-clear"
+        type="button"
+        title="Clear this section"
+        @click="clear"
+      >
+        <span class="section-clear__glyph">↺</span>
+        <span>Clear</span>
+      </button>
     </header>
     <p class="panel__desc">
       Construct an unsigned transaction from selected UTXOs.
@@ -501,6 +510,27 @@ export default defineComponent({
       const blob = await gzipBlob(payload);
       downloadBlob(blob, this.exportFilename('json.gz'));
     },
+    clear(): void {
+      this.unsignedTx = {
+        myAddress: '', receiver: '', amount: 0, fee: 0, message: '', hex: '',
+      };
+      this.unsignedTxList = [];
+      this.txinfoList = [];
+      this.buildError = '';
+      this.isAdvanced = false;
+      this.avoidFluxNodeAmounts = false;
+      this.enableMaxUtxoSize = false;
+      this.maxUtxoSize = '';
+      this.sendAllFlux = false;
+      this.multipleTxes = false;
+      this.nTxLoopCount = 5;
+      this.createCollateralTx = false;
+      this.fillHotWalletFromDesposit = false;
+      this.fillHotWalletWithRewards = false;
+      this.consolidateRewards = false;
+      this.loading = false;
+      this.progress = { current: 0, total: 0 };
+    },
     toggleAdvanced(): void {
       this.isAdvanced = !this.isAdvanced;
       this.avoidFluxNodeAmounts = this.isAdvanced;

src/components/CoinControl.vue

@@ -5,6 +5,15 @@
       <h2 class="panel__title">
         Coin control
       </h2>
+      <button
+        class="section-clear"
+        type="button"
+        title="Clear this section"
+        @click="clear"
+      >
+        <span class="section-clear__glyph">↺</span>
+        <span>Clear</span>
+      </button>
     </header>
     <p class="panel__desc">
       Inspect spendable UTXOs for an address and select which outputs to include in the next build.
@@ -249,6 +258,19 @@ export default defineComponent({
       }
       this.coinControl.selectedValueAmount = Number(this.coinControl.selectedValueSats * 1e-8).toFixed(8);
     },
+    clear(): void {
+      this.coinControl.address = '';
+      this.coinControl.utxos = [];
+      this.coinControl.selected = [];
+      this.coinControl.errorMsg = '';
+      this.coinControl.currentPage = 1;
+      this.coinControl.getrows = [];
+      this.coinControl.numpages = 0;
+      this.coinControl.show = false;
+      this.coinControl.selectedValueSats = 0;
+      this.coinControl.selectedValueAmount = 0;
+      this.coinControl.loading = false;
+    },
   },
 });
 </script>

src/components/DecodeTx.vue

@@ -5,6 +5,15 @@
       <h2 class="panel__title">
         Decode transaction
       </h2>
+      <button
+        class="section-clear"
+        type="button"
+        title="Clear this section"
+        @click="clear"
+      >
+        <span class="section-clear__glyph">↺</span>
+        <span>Clear</span>
+      </button>
     </header>
     <p class="panel__desc">
       Display a human-readable summary of one transaction or a JSON array of transactions.
@@ -207,6 +216,12 @@ export default defineComponent({
         return { index, info, error };
       });
     },
+    clear(): void {
+      this.decodeRawHex = '';
+      this.decoded = [];
+      this.importing = false;
+      this.importError = '';
+    },
   },
 });
 </script>

src/components/FinaliseTx.vue

@@ -5,6 +5,15 @@
       <h2 class="panel__title">
         Finalise transaction
       </h2>
+      <button
+        class="section-clear"
+        type="button"
+        title="Clear this section"
+        @click="clear"
+      >
+        <span class="section-clear__glyph">↺</span>
+        <span>Clear</span>
+      </button>
     </header>
     <p class="panel__desc">
       Combine collected signatures into a final, broadcast-ready transaction.
@@ -255,6 +264,14 @@ export default defineComponent({
       const blob = await gzipBlob(payload);
       downloadBlob(blob, this.exportFilename('json.gz'));
     },
+    clear(): void {
+      this.finalisedTx = { rawtx: '', hex: '' };
+      this.finalisedTxList = [];
+      this.loading = false;
+      this.progress = { current: 0, total: 0 };
+      this.importing = false;
+      this.importError = '';
+    },
     async finalise(): Promise<void> {
       this.loading = true;
       this.progress = { current: 0, total: 0 };

src/components/Keypair.vue

@@ -5,6 +5,15 @@
       <h2 class="panel__title">
         Keypair generation
       </h2>
+      <button
+        class="section-clear"
+        type="button"
+        title="Clear this section"
+        @click="clear"
+      >
+        <span class="section-clear__glyph">↺</span>
+        <span>Clear</span>
+      </button>
     </header>
     <p class="panel__desc">
       Generate a fresh elliptic-curve keypair for use in a multi-signature address.
@@ -75,6 +84,9 @@ export default defineComponent({
   },
   methods: {
     copyToClipboard,
+    clear(): void {
+      this.keypair = { publickey: '', privatekey: '' };
+    },
     generateKeypair(): void {
       const network = getNetwork(this.chain, this.isTestnet);
       const keyPair = bitgo.ECPair.makeRandom({ network });

src/components/Multisig.vue

@@ -5,6 +5,15 @@
       <h2 class="panel__title">
         Multisig address
       </h2>
+      <button
+        class="section-clear"
+        type="button"
+        title="Clear this section"
+        @click="clear"
+      >
+        <span class="section-clear__glyph">↺</span>
+        <span>Clear</span>
+      </button>
     </header>
     <p class="panel__desc">
       Combine N public keys and a required-signature threshold to derive a multisignature address.
@@ -165,6 +174,12 @@ export default defineComponent({
     addPubKey() {
       this.inputs += 1;
     },
+    clear() {
+      this.publickeys = [];
+      this.inputs = 1;
+      this.reqsig = 1;
+      this.multisig = { address: '', redeemScript: '' };
+    },
     saveCurrentScript() {
       const script = this.multisig.redeemScript;
       if (!script) return;

src/components/SignTx.vue

@@ -5,6 +5,15 @@
       <h2 class="panel__title">
         Sign transaction
       </h2>
+      <button
+        class="section-clear"
+        type="button"
+        title="Clear this section"
+        @click="clear"
+      >
+        <span class="section-clear__glyph">↺</span>
+        <span>Clear</span>
+      </button>
     </header>
     <p class="panel__desc">
       Sign a transaction from a multisig address with your private key.
@@ -696,6 +705,17 @@ export default defineComponent({
       const blob = await gzipBlob(payload);
       downloadBlob(blob, this.exportFilename('json.gz'));
     },
+    clear(): void {
+      this.signedTx = {
+        rawtx: '', privatekey: '', redeemScript: '', hex: '',
+      };
+      this.signedTxList = [];
+      this.loading = false;
+      this.progress = { current: 0, total: 0, phase: '' };
+      this.importing = false;
+      this.importError = '';
+      this.libraryOpen = false;
+    },
     groupLabel(g: SigStatusGroup): string {
       if (this.signatureStatus.length <= 1) return '';
       if (g.start === g.end) return `Tx ${g.start}`;

src/components/SubmitTx.vue

@@ -5,6 +5,15 @@
       <h2 class="panel__title">
         Submit transaction
       </h2>
+      <button
+        class="section-clear"
+        type="button"
+        title="Clear this section"
+        @click="clear"
+      >
+        <span class="section-clear__glyph">↺</span>
+        <span>Clear</span>
+      </button>
     </header>
     <p class="panel__desc">
       Broadcast one or more finalized transactions to the network.
@@ -151,6 +160,14 @@ export default defineComponent({
         this.importing = false;
       }
     },
+    clear(): void {
+      this.submitedTx = { rawtx: '', hex: '' };
+      this.submitedTxList = [];
+      this.loading = false;
+      this.progress = { current: 0, total: 0 };
+      this.importing = false;
+      this.importError = '';
+    },
     async submit(): Promise<void> {
       this.loading = true;
       this.progress = { current: 0, total: 0 };