Display correctly certificate chain validation error

Before an empty text was display.

Author: Alenar

mithril-explorer/src/components/CertifyCardanoTransactionsModal/TransactionCertificationResult.js

@@ -90,7 +90,10 @@ export default function TransactionCertificationResult({
         </Alert>
       ) : (
         <Alert variant="danger" className="mb-2">
-          <Alert.Heading>Mithril could not certify the transactions</Alert.Heading>
+          <Alert.Heading>
+            <i className="text-danger bi bi-shield-slash"></i> Mithril could not certify the
+            transactions
+          </Alert.Heading>
           <p className="mb-1">
             Either the transactions proof is invalid or all the transactions are not certified.
           </p>

mithril-explorer/src/components/VerifyCertificate/CertificateVerifier.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { Spinner, Table } from "react-bootstrap";
+import { Alert, Spinner, Table } from "react-bootstrap";
 import { formatProcessDuration } from "@/utils";
 import CopyableHash from "#/CopyableHash";
 import CopyButton from "#/CopyButton";
@@ -89,7 +89,7 @@ export default function CertificateVerifier({
 
           verifyCertificateChain(client, certificate.hash)
             .catch((err) => {
-              console.error("Certificate Chain verification error", err);
+              console.error("Certificate Chain verification error:\n", err);
               setValidationError(err);
             })
             .finally(() => setCurrentStep(certificateValidationSteps.done));
@@ -211,13 +211,12 @@ export default function CertificateVerifier({
                   <div key={evt.id}>{evt.message}</div>
                 ))}
               {validationError !== undefined && (
-                <tr>
-                  <td colSpan={2}>
-                    <i className="text-danger bi bi-x-circle-fill"></i> Invalid certificate chain:
-                    <br />
-                    {validationError.message}
-                  </td>
-                </tr>
+                <Alert variant="danger" className="mt-2">
+                  <Alert.Heading>
+                    <i className="text-danger bi bi-shield-slash"></i> Invalid certificate chain
+                  </Alert.Heading>
+                  <div className={styles.error}>{validationError.toString()}</div>
+                </Alert>
               )}
             </div>
           </div>

mithril-explorer/src/components/VerifyCertificate/styles.module.css

@@ -11,3 +11,7 @@
 .events > span {
   flex: 1 1 0;
 }
+
+.error {
+  white-space: pre-wrap;
+}