Clicking on a certificate hash on tx certifier modal open certificate details

Author: Alenar

mithril-explorer/src/components/CertificateModal/index.js

@@ -10,18 +10,22 @@ import ProtocolParameters from "../ProtocolParameters";
 import SignerTable from "../SignerTable";
 import VerifyCertificateModal from "../VerifyCertificate/VerifyCertificateModal";
 
-export default function CertificateModal(props) {
+export default function CertificateModal({
+  hash,
+  hideButtons = false,
+  onHashChange = (hash) => {},
+}) {
   const [certificate, setCertificate] = useState({});
   const [charts, setCharts] = useState({
     stakesBreakdown: {},
   });
   const [showVerifyCertificateModal, setShowVerifyCertificateModal] = useState(false);
   const certificateEndpoint = useSelector(
-    (state) => `${selectedAggregator(state)}/certificate/${props.hash}`,
+    (state) => `${selectedAggregator(state)}/certificate/${hash}`,
   );
 
   useEffect(() => {
-    if (!props.hash) {
+    if (!hash) {
       return;
     }
 
@@ -37,19 +41,19 @@ export default function CertificateModal(props) {
         setCertificate({});
         console.error("Fetch certificate error:", error);
       });
-  }, [certificateEndpoint, props.hash]);
+  }, [certificateEndpoint, hash]);
 
   function showPrevious() {
-    props.onHashChange(certificate.previous_hash);
+    onHashChange(certificate.previous_hash);
   }
 
   function close() {
-    props.onHashChange(undefined);
+    onHashChange(undefined);
   }
 
   return (
     <Modal
-      show={props.hash !== undefined}
+      show={hash !== undefined}
       onHide={close}
       size="xl"
       aria-labelledby="contained-modal-title-vcenter"
@@ -161,28 +165,32 @@ export default function CertificateModal(props) {
         )}
       </Modal.Body>
       <Modal.Footer>
-        <Button
-          size="sm"
-          onClick={() => setShowVerifyCertificateModal(true)}
-          className="text-break">
-          Verify certificate
-        </Button>
+        {!hideButtons && (
+          <Button
+            size="sm"
+            onClick={() => setShowVerifyCertificateModal(true)}
+            className="text-break">
+            Verify certificate
+          </Button>
+        )}
         {certificate.genesis_signature !== "" ? (
           <Badge bg="warning">Genesis</Badge>
         ) : (
-          <>
+          !hideButtons && (
             <Button size="sm" onClick={showPrevious} className="text-break">
               Previous hash: {certificate.previous_hash}
             </Button>
-          </>
+          )
         )}
         <RawJsonButton href={certificateEndpoint} size="sm" />
       </Modal.Footer>
-      <VerifyCertificateModal
-        show={showVerifyCertificateModal}
-        onClose={() => setShowVerifyCertificateModal(false)}
-        certificateHash={certificate.hash}
-      />
+      {!hideButtons && (
+        <VerifyCertificateModal
+          show={showVerifyCertificateModal}
+          onClose={() => setShowVerifyCertificateModal(false)}
+          certificateHash={certificate.hash}
+        />
+      )}
     </Modal>
   );
 }

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

@@ -10,6 +10,7 @@ import TransactionCertificationBreadcrumb from "./TransactionCertificationBreadc
 import TransactionCertificationResult from "./TransactionCertificationResult";
 import FetchingProofPane from "./FetchingProofPane";
 import ValidatingProofPane from "./ValidatingProofPane";
+import CertificateModal from "../CertificateModal";
 
 export const validationSteps = {
   ready: 1,
@@ -26,6 +27,7 @@ export default function CertifyCardanoTransactionsModal({
   const currentAggregator = useSelector((state) => state.settings.selectedAggregator);
   const [client, setClient] = useState(undefined);
   const [certificate, setCertificate] = useState(undefined);
+  const [selectedCertificateHash, setSelectedCertificateHash] = useState(undefined);
   const [certificateVerifierStep, setCertificateVerifierStep] = useState(
     certificateValidationSteps.ready,
   );
@@ -140,6 +142,13 @@ export default function CertifyCardanoTransactionsModal({
     }
   }
 
+  function handleCertificateClick(hash) {
+    // Only allow to open the submodal when the work is done
+    if (currentStep === validationSteps.done) {
+      setSelectedCertificateHash(hash);
+    }
+  }
+
   function closeIfNotRunning() {
     if (currentStep !== validationSteps.done) {
       setShowLoadingWarning(true);
@@ -180,7 +189,9 @@ export default function CertifyCardanoTransactionsModal({
                 )}
               </Col>
             </Row>
-            <Row>
+            {/*Little hack: hide the modal content if the certificate modal is shown so this modal content*/}
+            {/*never overflow behind the certificate modal.*/}
+            <Row className={selectedCertificateHash ? "d-none" : ""}>
               <Col>
                 <Tab.Content>
                   <Tab.Pane eventKey={getTabForStep(validationSteps.fetchingProof)}>
@@ -196,6 +207,7 @@ export default function CertifyCardanoTransactionsModal({
                         certificate={certificate}
                         onStepChange={(step) => setCertificateVerifierStep(step)}
                         onChainValidationError={() => setIsCertificateChainValid(false)}
+                        onCertificateClick={handleCertificateClick}
                         showCertificateLinks
                         hideSpinner
                       />
@@ -218,6 +230,12 @@ export default function CertifyCardanoTransactionsModal({
         )}
       </Modal.Body>
       <Modal.Footer></Modal.Footer>
+
+      <CertificateModal
+        hash={selectedCertificateHash}
+        onHashChange={(hash) => setSelectedCertificateHash(hash)}
+        hideButtons
+      />
     </Modal>
   );
 }