Explorer: Improve Cardano Transaction Certification & Certificate Chain Validation UI #1569

Alenar · 2024-03-14T10:38:02Z

Content

This PR includes several improvements to the explorer:

Certificate Chain Validation Modal:
- Validated certificated are now displayed in a table.
- Improve error handling: If the validation failed from a wasm error the error is now displayed bellow the table.
- It now take it's MithrilClient and certificate as parameter, allowing parents to use them more easily and avoiding duplicate client instantiation.
- It have a option to transform the certificate hash into links that, when clicked, raise a onCertificateClick event that you can wired to.
Cardano Transaction Certification:
- The proof are now verified before the certificate since their verification are independent and the proof verification is much faster.
- Add the certificate beacon in the last step to tell the point of the Cardano chain at which the verification took place.
- Improve error handling: the "step breadcrumb" now show at which step the certification failed.
  - Note: if the error is raised in the "verifying proof" step then the certificate chain validation is skipped and it's tab can't be accessed.
- The certificates hashes in the "Validating Certificate Chain" tab can now be clicked, this open the certificate details modal but with the "previous" and "verify" buttons removed (since you already have all the certificates in the table and verified the certificate chain).
Signer registration page: the layout and names of the "epoch" navigation buttons have been redesigned to specify explicitly the two kinds of epoch they apply to (registration & current cardano).
General:
- Add sanchonet network to supported cexplorer list.
- Add a machine generated "mithril-icons" font using fantasticon making integration and usage of custom icons far more easily. See explorer readme for more.
- Reworked the import to use absolute import (see jsconfig.json for the mapping).
- Fix a regression related to the default aggregator capabilities that was throwing errors.
- Fix the main tab becoming empty when switching the Cardano Transactions tab is selected and the use switch to another aggregator that doesn't support them. In that case the selected tab will switch to Cardano Db.

Demo

Showing most changes on the Cardano Transaction Certification and the Certicate Chain Validation:

Screencast.from.14-03-2024.10.12.15.webm

Pre-submit checklist

Branch
- Tests are provided (if possible)
- Crates versions are updated (if relevant)
- Commit sequence broadly makes sense
- Key commits have useful messages
PR
- No clippy warnings in the CI
- Self-reviewed the diff
- Useful pull request description
- Reviewer requested
Documentation
- Update README file (if relevant)

Issue(s)

Closes #1554

github-actions · 2024-03-14T10:44:12Z

Test Results

3 files ±0 42 suites ±0 8m 28s ⏱️ +2s
913 tests ±0 913 ✅ ±0 0 💤 ±0 0 ❌ ±0
1 002 runs ±0 1 002 ✅ ±0 0 💤 ±0 0 ❌ ±0

Results for commit e591c7e. ± Comparison against base commit 22dbdf1.

♻️ This comment has been updated with latest results.

jpraynaud

LGTM 🚀

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

mithril-explorer/README.md

A regression from #fe5e7edd74

If the target aggregator did not have the capabilities the ctx tab was still the tab container active key but it was removed from the DOM, leaving an empty space.

To generate the icons font [fantasticon](https://github.com/tancredi/fantasticon) is used to generate a woff/woff2 fonts and a css file that import the font and allow to use the icons using css classes (`mi` for `mithril-icons`).

To enhance the code readability.

This give a cleaner hierarchy: the parent component now own those params and the verifier only exploit them. Before if the parent wanted to manipulate the certificate it would have to get it from the verifier using a event callback. This was unecessary cumbersome and also lead to the creation of more wasm MithrilClient that necessary.

Now the error will be shown in the UI and it's propagated via an event to allow parent component to handle them too.

… invalid

The raised event is then transmit to the parent via a callback.

… details

The three buttons where about the same epoch, one is about the current cardano epoch and the two other are related to the current epoch of the registration page.

… modal

Even for not certified transactions as their is a chance that mithril still have to take them in accound and CExplorer already know them.

This is allowed by configuring them in the `jsconfig.json` file.

Before an empty text was display.

New readme text wasn't updated to last class name & simplify & remove dead code in `CertificateVerifier`.

A proof could be invalid without raising a rust error, this case was not handled

As one must be provided when adding a custom svg icons.

dlachaume

LGTM 👍

sfauvel

Nothing to say. Good job.

Alenar requested review from sfauvel, jpraynaud and dlachaume March 14, 2024 10:38

Alenar self-assigned this Mar 14, 2024

Alenar force-pushed the djo/1554/explorer/improve-ctx-ui branch from d8e6f65 to 2a36928 Compare March 14, 2024 11:14

Alenar temporarily deployed to testing-preview March 14, 2024 11:21 — with GitHub Actions Inactive

Alenar temporarily deployed to testing-sanchonet March 14, 2024 11:21 — with GitHub Actions Inactive

Alenar force-pushed the djo/1554/explorer/improve-ctx-ui branch 2 times, most recently from 9989c24 to b25a3b4 Compare March 14, 2024 11:44

Alenar temporarily deployed to testing-preview March 14, 2024 11:51 — with GitHub Actions Inactive

Alenar temporarily deployed to testing-sanchonet March 14, 2024 11:51 — with GitHub Actions Inactive

jpraynaud approved these changes Mar 14, 2024

View reviewed changes

...il-explorer/src/components/CertifyCardanoTransactionsModal/TransactionCertificationResult.js Outdated Show resolved Hide resolved

mithril-explorer/README.md Outdated Show resolved Hide resolved

Alenar added 17 commits March 14, 2024 15:37

Uniformise file naming and export of explorer components

45bf3b7

Add link to cexplorer for certified transaction hashes

7fe6258

Add the beacon at which the verications took place

fd7cab7

Make CopyableHash component more customizable

4fea4d4

Fix incorrect default aggregator capabilities

7634f95

A regression from #fe5e7edd74

use the mithril logo for certified tx in explorer

46d4001

Fix explorer empty tab when the ctx tab and switching aggregator

e790b3a

If the target aggregator did not have the capabilities the ctx tab was still the tab container active key but it was removed from the DOM, leaving an empty space.

Extract ctx result table to a local component

6228f41

To enhance the code readability.

Add epoch to certificate verification modal

814b46d

Validate proof before the certificate chain in explorer

f327d83

Enhance error handling for explorer CertificateVerifier

3d9286f

Now the error will be shown in the UI and it's propagated via an event to allow parent component to handle them too.

Enhance error handling for explorer ctx certifier when certificate is…

7edd09e

… invalid

Reflect validation errors in tx certification breadbrumb

c7875e4

Refactor explorer CertificateVerifier to use a table

da88781

Add default export for explorer CopyButton

21aad25

Alenar added 8 commits March 14, 2024 15:37

Make certificate hashes of the explorer chain verifier clickable

fcaadd2

The raised event is then transmit to the parent via a callback.

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

32c0a88

… details

Reduce confusion with navigation buttons in registration page

982438f

The three buttons where about the same epoch, one is about the current cardano epoch and the two other are related to the current epoch of the registration page.

Use the same icons & wording for valid checks in the tx certification…

a6ce776

… modal

Always show the cexplorer link for tx en explorer

9c7cc1d

Even for not certified transactions as their is a chance that mithril still have to take them in accound and CExplorer already know them.

Use absolute import in Explorer

bca4ba0

This is allowed by configuring them in the `jsconfig.json` file.

Display correctly certificate chain validation error

649d4bb

Before an empty text was display.

Fix issues from self review

a444d74

New readme text wasn't updated to last class name & simplify & remove dead code in `CertificateVerifier`.

Alenar force-pushed the djo/1554/explorer/improve-ctx-ui branch from b25a3b4 to 343aae7 Compare March 14, 2024 14:37

Alenar added 2 commits March 14, 2024 15:41

Fix incorrect error handling of invalid proof

d93d288

A proof could be invalid without raising a rust error, this case was not handled

Add mithril logo to tx certification result alert heading

99cdfef

Alenar temporarily deployed to testing-preview March 14, 2024 14:44 — with GitHub Actions Inactive

Alenar temporarily deployed to testing-sanchonet March 14, 2024 14:44 — with GitHub Actions Inactive

Alenar added 2 commits March 14, 2024 15:58

Add a note about unicode codepoints in explorer readme

393cb9f

As one must be provided when adding a custom svg icons.

address PR review: better wording for ctx certification done step

36b547d

Alenar force-pushed the djo/1554/explorer/improve-ctx-ui branch from 343aae7 to 36b547d Compare March 14, 2024 15:00

Alenar temporarily deployed to testing-preview March 14, 2024 15:10 — with GitHub Actions Inactive

Alenar temporarily deployed to testing-sanchonet March 14, 2024 15:10 — with GitHub Actions Inactive

dlachaume approved these changes Mar 15, 2024

View reviewed changes

Alenar temporarily deployed to testing-preview March 15, 2024 10:14 — with GitHub Actions Inactive

Alenar temporarily deployed to testing-sanchonet March 15, 2024 10:14 — with GitHub Actions Inactive

Alenar force-pushed the djo/1554/explorer/improve-ctx-ui branch from de8b026 to 2041ff9 Compare March 15, 2024 10:20

Alenar added 2 commits March 15, 2024 11:21

Tidy up some imports and remove unused variables in explorer

ee5f846

Upgrade explorer version from 0.5.0 to 0.6.0

e591c7e

Alenar force-pushed the djo/1554/explorer/improve-ctx-ui branch from 2041ff9 to e591c7e Compare March 15, 2024 10:21

Alenar temporarily deployed to testing-preview March 15, 2024 10:28 — with GitHub Actions Inactive

Alenar temporarily deployed to testing-sanchonet March 15, 2024 10:28 — with GitHub Actions Inactive

sfauvel approved these changes Mar 18, 2024

View reviewed changes

Alenar merged commit 3fe1481 into main Mar 18, 2024
38 of 39 checks passed

Alenar deleted the djo/1554/explorer/improve-ctx-ui branch March 18, 2024 09:24

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Explorer: Improve Cardano Transaction Certification & Certificate Chain Validation UI #1569

Explorer: Improve Cardano Transaction Certification & Certificate Chain Validation UI #1569

Alenar commented Mar 14, 2024 •

edited

Loading

github-actions bot commented Mar 14, 2024 •

edited

Loading

jpraynaud left a comment

dlachaume left a comment

sfauvel left a comment

Explorer: Improve Cardano Transaction Certification & Certificate Chain Validation UI #1569

Explorer: Improve Cardano Transaction Certification & Certificate Chain Validation UI #1569

Conversation

Alenar commented Mar 14, 2024 • edited Loading

Content

Demo

Pre-submit checklist

Issue(s)

github-actions bot commented Mar 14, 2024 • edited Loading

Test Results

jpraynaud left a comment

Choose a reason for hiding this comment

dlachaume left a comment

Choose a reason for hiding this comment

sfauvel left a comment

Choose a reason for hiding this comment

Alenar commented Mar 14, 2024 •

edited

Loading

github-actions bot commented Mar 14, 2024 •

edited

Loading