feat/update-visualize (#486)

* feat(visualization-report): change title to HH branding Apply Harhdat branding: * The title of the report has been changed to `Hardhat Ignition - <ModuleId>`. * The page title has been changed to `Hardhat Ignition`. * Add the HH favicon * feat(visualize-report): update summary to show ids Replace the bespoke approach to deploys/calls with a display of ids. Turn the lists of ids into links that lead to the detail page. * feat(visualization-report): rename overview subtitle to futures Rename `Actions` to `Futures`. We no longer use the name `Actions`. * feat(visualizition-report): display ids in futures list * feat: reflow mermaid top to bottom * feat(visualization-report): include breadcrumb on details page * feat: fix mermaid tests * remove duplicate futures from html * move future details into dropdown --------- Co-authored-by: zoeyTM <[email protected]>
NomicFoundation · Sep 26, 2023 · 0b8d11a · 0b8d11a
1 parent cb297ff
commit 0b8d11a
Show file tree

Hide file tree

Showing 14 changed files with 299 additions and 378 deletions.
diff --git a/packages/ui/index.html b/packages/ui/index.html
@@ -3,7 +3,8 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Ignition</title>
+    <link rel="shortcut icon" href="/favicon.ico">
+    <title>Hardhat Ignition</title>
   </head>
   <body>
     <div id="root">

diff --git a/packages/ui/public/favicon.ico b/packages/ui/public/favicon.ico
diff --git a/packages/ui/src/components/shared.tsx b/packages/ui/src/components/shared.tsx
@@ -14,3 +14,7 @@ export const Panel = styled.div`
   border: 1px solid black;
   padding: 1rem;
 `;
+
+export const Breadcrumb = styled.div`
+  padding-bottom: 1rem;
+`;
diff --git a/packages/ui/src/main.tsx b/packages/ui/src/main.tsx
@@ -7,7 +7,6 @@ import {
 } from "@nomicfoundation/ignition-core/ui-helpers";
 import ReactDOM from "react-dom/client";
 import { RouterProvider, createHashRouter } from "react-router-dom";
-import { FutureDetails } from "./pages/future-details/future-details";
 import { VisualizationOverview } from "./pages/visualization-overview/visualization-overview";
 
 const loadDeploymentFromEmbeddedDiv = (): IgnitionModule<
@@ -49,10 +48,6 @@ const main = async () => {
         path: "/",
         element: <VisualizationOverview ignitionModule={ignitionModule} />,
       },
-      {
-        path: "/future/:futureId",
-        element: <FutureDetails ignitionModule={ignitionModule} />,
-      },
     ]);
 
     ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(

diff --git a/packages/ui/src/pages/future-details/components/future-summary.tsx b/packages/ui/src/pages/future-details/components/future-summary.tsx
diff --git a/packages/ui/src/pages/future-details/future-details.tsx b/packages/ui/src/pages/future-details/future-details.tsx
diff --git a/packages/ui/src/pages/visualization-overview/components/action.tsx b/packages/ui/src/pages/visualization-overview/components/action.tsx