tooltips

taikoxyz · Jan 10, 2023 · f9e18f4 · f9e18f4
1 parent ebd9565
commit f9e18f4
Show file tree

Hide file tree

Showing 5 changed files with 124 additions and 5 deletions.
diff --git a/packages/status-page/src/components/Modal.svelte b/packages/status-page/src/components/Modal.svelte
@@ -0,0 +1,47 @@
+<script lang="ts">
+  export let title: string = null;
+  export let isOpen: boolean = false;
+  export let onClose: () => void = null;
+  export let showXButton: boolean = true;
+
+  const onCloseClicked = () => {
+    isOpen = false;
+    if (onClose) {
+      onClose();
+    }
+  };
+</script>
+
+<svelte:window
+  on:keydown={function (e) {
+    if (e.key === "Escape") {
+      onCloseClicked();
+    }
+  }}
+/>
+
+<div class="modal bg-black/60" class:modal-open={isOpen}>
+  <div class="modal-box bg-dark-3">
+    <h3 class="font-bold text-lg text-center mt-4">{title}</h3>
+    {#if showXButton}
+      <div class="modal-action mt-0">
+        <button
+          type="button"
+          class="btn btn-sm btn-circle absolute right-2 top-2 cursor-pointer font-sans text-lg"
+          on:click={onCloseClicked}
+        >
+          &times;
+        </button>
+      </div>
+    {/if}
+    <div class="modal-body">
+      <slot />
+    </div>
+  </div>
+</div>
+
+<style>
+  .modal {
+    align-items: center;
+  }
+</style>
diff --git a/packages/status-page/src/components/StatusIndicator.svelte b/packages/status-page/src/components/StatusIndicator.svelte
@@ -5,6 +5,8 @@
   import Loader from "../components/Loader.svelte";
   import type Status from "../domain/status";
   import { fade } from "svelte/transition";
+  import Tooltip from "./Tooltip.svelte";
+  import TooltipModal from "./TooltipModal.svelte";
 
   export let provider: ethers.providers.JsonRpcProvider;
   export let contractAddress: string;
@@ -28,10 +30,14 @@
 
   export let intervalInMs: number = 0;
 
+  export let tooltip: string = "";
+
   let interval: NodeJS.Timer;
 
   let statusValue: Status;
 
+  let tooltipOpen: boolean = false;
+
   onMount(async () => {
     try {
       statusValue = await statusFunc(provider, contractAddress);
@@ -64,7 +70,12 @@
 <div
   class="rounded-3xl border-2 border-zinc-800 border-solid p-4 min-h-full h-28"
 >
-  <h2 class="font-bold">{header}</h2>
+  <span class="cursor-pointer float-right"
+    ><Tooltip bind:isOpen={tooltipOpen} /></span
+  >
+  <h2 class="font-bold">
+    {header}
+  </h2>
   {#key statusValue}
     {#if statusValue || typeof statusValue === "number"}
       <span
@@ -81,3 +92,13 @@
     {/if}
   {/key}
 </div>
+
+{#if tooltip}
+  <TooltipModal title={header} bind:isOpen={tooltipOpen}>
+    <span slot="body">
+      <p class="text-left">
+        {tooltip}
+      </p>
+    </span>
+  </TooltipModal>
+{/if}
diff --git a/packages/status-page/src/components/Tooltip.svelte b/packages/status-page/src/components/Tooltip.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+  import { QuestionMarkCircle } from "svelte-heros-v2";
+
+  export let isOpen: boolean = false;
+</script>
+
+<QuestionMarkCircle
+  on:click={() => (isOpen = true)}
+  size="18"
+  variation="outline"
+/>
diff --git a/packages/status-page/src/components/TooltipModal.svelte b/packages/status-page/src/components/TooltipModal.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+  import Modal from "./Modal.svelte";
+
+  export let title: string;
+  export let isOpen: boolean = false;
+</script>
+
+<Modal {title} bind:isOpen>
+  <div class="flex h-full min-h-tooltip-modal w-full flex-col justify-between">
+    <div class="tip-body mb-4 flex-auto">
+      <slot name="body" />
+    </div>
+    <div class="tip-footer self-start">
+      <slot name="footer" />
+    </div>
+  </div>
+</Modal>
diff --git a/packages/status-page/src/pages/home/Home.svelte b/packages/status-page/src/pages/home/Home.svelte
@@ -38,6 +38,8 @@
       onClick: (value: Status) => {
         window.open(`${l2ExplorerUrl}/block/${value.toString()}`, "_blank");
       },
+      tooltip:
+        "The most recent Layer 2 Header that has been synchronized with the TaikoL1 smart contract.",
     },
     {
       statusFunc: getLatestSyncedHeader,
@@ -52,6 +54,8 @@
       onClick: (value: Status) => {
         window.open(`${l1ExplorerUrl}/block/${value.toString()}`, "_blank");
       },
+      tooltip:
+        "The most recent Layer 1 Header that has been synchronized with the TaikoL2 smart contract. The headers are synchronized with every L2 block.",
     },
     // {
     //   statusFunc: getProposers,
@@ -75,6 +79,8 @@
         if (BigNumber.from(value).gt(4000)) return "red";
         return "green";
       },
+      tooltip:
+        "The current processable transactions in the mempool that have not been added to a block yet.",
     },
     {
       statusFunc: getQueuedTransactions,
@@ -87,6 +93,8 @@
         if (BigNumber.from(value).gt(4000)) return "red";
         return "green";
       },
+      tooltip:
+        "The current transactions in the mempool where the transaction nonce is not in sequence. They are currently non-processable.",
     },
     {
       statusFunc: getIsHalted,
@@ -99,6 +107,7 @@
         if (value.toString() === "true") return "red";
         return "green";
       },
+      tooltip: "Whether the Taiko smart contract on Layer 1 has been halted",
     },
     {
       statusFunc: getAvailableSlots,
@@ -111,6 +120,8 @@
         if (BigNumber.from(value).eq(0)) return "red";
         return "green";
       },
+      tooltip:
+        "The amount of slots for proposed blocks on the TaikoL1 smart contract. When this number is 0, no blocks can be proposed until a block has been proven.",
     },
     {
       statusFunc: getLastVerifiedBlockId,
@@ -122,6 +133,8 @@
       colorFunc: (value: Status) => {
         return "green";
       },
+      tooltip:
+        "The most recently verified Layer 2 block on the TaikoL1 smart contract",
     },
     {
       statusFunc: getNextBlockId,
@@ -133,6 +146,8 @@
       colorFunc: (value: Status) => {
         return "green";
       },
+      tooltip:
+        "The ID that the next proposed block on the TaikoL1 smart contract will receive",
     },
     {
       statusFunc: getPendingBlocks,
@@ -150,6 +165,8 @@
           return "green";
         }
       },
+      tooltip:
+        "The amount of pending proposed blocks that have not been proven on the TaikoL1 smart contract.",
     },
     {
       statusFunc: getGasPrice,
@@ -161,6 +178,7 @@
       colorFunc: (value: Status) => {
         return "green";
       },
+      tooltip: "The current recommended gas price for a transaction on Layer 2",
     },
   ];
 
@@ -169,21 +187,25 @@
       statusIndicators.push({
         statusFunc: getBlockFee,
         watchStatusFunc: null,
-        provider: l2Provider,
-        contractAddress: l2TaikoAddress,
+        provider: l1Provider,
+        contractAddress: l1TaikoAddress,
         header: "Block Fee",
         intervalInMs: 15000,
         colorFunc: null,
+        tooltip:
+          "The current fee to propose a block to the TaikoL1 smart contract.",
       });
 
       statusIndicators.push({
         statusFunc: getProofReward,
         watchStatusFunc: null,
-        provider: l2Provider,
-        contractAddress: l2TaikoAddress,
+        provider: l1Provider,
+        contractAddress: l1TaikoAddress,
         header: "Proof Reward",
         intervalInMs: 15000,
         colorFunc: null,
+        tooltip:
+          "The current reward for successfully submitting a proof for a proposed block on the TaikoL1 smart contract.",
       });
     }
   });
@@ -205,6 +227,7 @@
       colorFunc={statusIndicator.colorFunc}
       onClick={statusIndicator.onClick}
       intervalInMs={statusIndicator.intervalInMs}
+      tooltip={statusIndicator.tooltip}
     />
   {/each}
 </div>