testmempool accept more validation & switch to JSON array format

frontend/src/app/components/test-transactions/test-transactions.component.scss

@@ -2,6 +2,7 @@
   td, th {
     &.allowed {
       width: 10%;
+      text-align: center;
     }
     &.txid {
       width: 50%;

frontend/src/app/components/test-transactions/test-transactions.component.ts

@@ -37,6 +37,21 @@ export class TestTransactionsComponent implements OnInit {
   }
 
   testTxs() {
+    let txs: string[] = [];
+    try {
+      txs = (this.testTxsForm.get('txs')?.value as string).split(',').map(hex => hex.trim());
+      if (!txs?.length) {
+        this.error = 'At least one transaction is required';
+        return;
+      } else if (txs.length > 25) {
+        this.error = 'Exceeded maximum of 25 transactions';
+        return;
+      }
+    } catch (e) {
+      this.error = e?.message;
+      return;
+    }
+
     let maxfeerate;
     this.invalidMaxfeerate = false;
     try {
@@ -51,7 +66,7 @@ export class TestTransactionsComponent implements OnInit {
     this.isLoading = true;
     this.error = '';
     this.results = [];
-    this.apiService.testTransactions$((this.testTxsForm.get('txs')?.value as string).split(',').map(hex => hex.trim()).join(','), maxfeerate === 0.1 ? null : maxfeerate)
+    this.apiService.testTransactions$(txs, maxfeerate === 0.1 ? null : maxfeerate)
       .subscribe((result) => {
         this.isLoading = false;
         this.results = result || [];

frontend/src/app/services/api.service.ts

@@ -238,8 +238,8 @@ export class ApiService {
     return this.httpClient.post<any>(this.apiBaseUrl + this.apiBasePath + '/api/tx', hexPayload, { responseType: 'text' as 'json'});
   }
 
-  testTransactions$(hexPayload: string, maxfeerate?: number): Observable<TestMempoolAcceptResult[]> {
-    return this.httpClient.post<TestMempoolAcceptResult[]>(this.apiBaseUrl + this.apiBasePath + `/api/txs/test${maxfeerate != null ? '?maxfeerate=' + maxfeerate.toFixed(8) : ''}`, hexPayload);
+  testTransactions$(rawTxs: string[], maxfeerate?: number): Observable<TestMempoolAcceptResult[]> {
+    return this.httpClient.post<TestMempoolAcceptResult[]>(this.apiBaseUrl + this.apiBasePath + `/api/txs/test${maxfeerate != null ? '?maxfeerate=' + maxfeerate.toFixed(8) : ''}`, rawTxs);
   }
 
   getTransactionStatus$(txid: string): Observable<any> {