From ebd956574d1f9528f1b0cbe4d2dcb25cf86bcbc4 Mon Sep 17 00:00:00 2001 From: Jeffery Walsh Date: Tue, 10 Jan 2023 07:27:26 -0800 Subject: [PATCH 1/6] gas price should use l2provider --- packages/status-page/src/pages/home/Home.svelte | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/status-page/src/pages/home/Home.svelte b/packages/status-page/src/pages/home/Home.svelte index f1eb2fbc84..407a9228a8 100644 --- a/packages/status-page/src/pages/home/Home.svelte +++ b/packages/status-page/src/pages/home/Home.svelte @@ -154,8 +154,8 @@ { statusFunc: getGasPrice, watchStatusFunc: null, - provider: l1Provider, - contractAddress: l1TaikoAddress, + provider: l2Provider, + contractAddress: "", header: "Gas Price (gwei)", intervalInMs: 20000, colorFunc: (value: Status) => { From f9e18f4b2f1fd214eca822fe4b310b4b057b825f Mon Sep 17 00:00:00 2001 From: Jeffery Walsh Date: Tue, 10 Jan 2023 08:15:21 -0800 Subject: [PATCH 2/6] tooltips --- .../status-page/src/components/Modal.svelte | 47 +++++++++++++++++++ .../src/components/StatusIndicator.svelte | 23 ++++++++- .../status-page/src/components/Tooltip.svelte | 11 +++++ .../src/components/TooltipModal.svelte | 17 +++++++ .../status-page/src/pages/home/Home.svelte | 31 ++++++++++-- 5 files changed, 124 insertions(+), 5 deletions(-) create mode 100644 packages/status-page/src/components/Modal.svelte create mode 100644 packages/status-page/src/components/Tooltip.svelte create mode 100644 packages/status-page/src/components/TooltipModal.svelte diff --git a/packages/status-page/src/components/Modal.svelte b/packages/status-page/src/components/Modal.svelte new file mode 100644 index 0000000000..093e428bbb --- /dev/null +++ b/packages/status-page/src/components/Modal.svelte @@ -0,0 +1,47 @@ + + + + +
+
+

{title}

+ {#if showXButton} +
+ +
+ {/if} +
+ +
+
+
+ + diff --git a/packages/status-page/src/components/StatusIndicator.svelte b/packages/status-page/src/components/StatusIndicator.svelte index 70a5dd0068..bbb0a1f233 100644 --- 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 @@
-

{header}

+ +

+ {header} +

{#key statusValue} {#if statusValue || typeof statusValue === "number"} + +{#if tooltip} + + +

+ {tooltip} +

+ + +{/if} diff --git a/packages/status-page/src/components/Tooltip.svelte b/packages/status-page/src/components/Tooltip.svelte new file mode 100644 index 0000000000..1ccae3a015 --- /dev/null +++ b/packages/status-page/src/components/Tooltip.svelte @@ -0,0 +1,11 @@ + + + (isOpen = true)} + size="18" + variation="outline" +/> diff --git a/packages/status-page/src/components/TooltipModal.svelte b/packages/status-page/src/components/TooltipModal.svelte new file mode 100644 index 0000000000..a7ea557e7f --- /dev/null +++ b/packages/status-page/src/components/TooltipModal.svelte @@ -0,0 +1,17 @@ + + + +
+
+ +
+
+ +
+
+ diff --git a/packages/status-page/src/pages/home/Home.svelte b/packages/status-page/src/pages/home/Home.svelte index 407a9228a8..b98ec2a8db 100644 --- 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}
From 893683407dbee67f55d765a607d0f0c001fd62ab Mon Sep 17 00:00:00 2001 From: jeff <113397187+cyberhorsey@users.noreply.github.com> Date: Tue, 10 Jan 2023 11:22:34 -0800 Subject: [PATCH 3/6] Update packages/status-page/src/pages/home/Home.svelte Co-authored-by: dave | d1onys1us <13951458+d1onys1us@users.noreply.github.com> --- packages/status-page/src/pages/home/Home.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/status-page/src/pages/home/Home.svelte b/packages/status-page/src/pages/home/Home.svelte index b98ec2a8db..b1db17ed67 100644 --- a/packages/status-page/src/pages/home/Home.svelte +++ b/packages/status-page/src/pages/home/Home.svelte @@ -134,7 +134,7 @@ return "green"; }, tooltip: - "The most recently verified Layer 2 block on the TaikoL1 smart contract", + "The most recently verified Layer 2 block on the TaikoL1 smart contract.", }, { statusFunc: getNextBlockId, From 0f4b03195ea674a4f54d02e4261d8ff90d1723a0 Mon Sep 17 00:00:00 2001 From: jeff <113397187+cyberhorsey@users.noreply.github.com> Date: Tue, 10 Jan 2023 11:22:42 -0800 Subject: [PATCH 4/6] Update packages/status-page/src/pages/home/Home.svelte Co-authored-by: dave | d1onys1us <13951458+d1onys1us@users.noreply.github.com> --- packages/status-page/src/pages/home/Home.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/status-page/src/pages/home/Home.svelte b/packages/status-page/src/pages/home/Home.svelte index b1db17ed67..2a4b21ab3e 100644 --- a/packages/status-page/src/pages/home/Home.svelte +++ b/packages/status-page/src/pages/home/Home.svelte @@ -147,7 +147,7 @@ return "green"; }, tooltip: - "The ID that the next proposed block on the TaikoL1 smart contract will receive", + "The ID that the next proposed block on the TaikoL1 smart contract will receive.", }, { statusFunc: getPendingBlocks, From 43682e6a3bc1980634f9b8b69f7d891837c2d401 Mon Sep 17 00:00:00 2001 From: jeff <113397187+cyberhorsey@users.noreply.github.com> Date: Tue, 10 Jan 2023 17:37:01 -0800 Subject: [PATCH 5/6] Update packages/status-page/src/pages/home/Home.svelte Co-authored-by: Roger <50648015+RogerLamTd@users.noreply.github.com> --- packages/status-page/src/pages/home/Home.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/status-page/src/pages/home/Home.svelte b/packages/status-page/src/pages/home/Home.svelte index 2a4b21ab3e..ee96a23c80 100644 --- a/packages/status-page/src/pages/home/Home.svelte +++ b/packages/status-page/src/pages/home/Home.svelte @@ -107,7 +107,7 @@ if (value.toString() === "true") return "red"; return "green"; }, - tooltip: "Whether the Taiko smart contract on Layer 1 has been halted", + tooltip: "Whether the Taiko smart contract on Layer 1 has been halted.", }, { statusFunc: getAvailableSlots, From e41f1751766d52d18559b43f067d0efae0f4a9a6 Mon Sep 17 00:00:00 2001 From: jeff <113397187+cyberhorsey@users.noreply.github.com> Date: Tue, 10 Jan 2023 17:37:18 -0800 Subject: [PATCH 6/6] Update packages/status-page/src/pages/home/Home.svelte Co-authored-by: Roger <50648015+RogerLamTd@users.noreply.github.com> --- packages/status-page/src/pages/home/Home.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/status-page/src/pages/home/Home.svelte b/packages/status-page/src/pages/home/Home.svelte index ee96a23c80..98d4750400 100644 --- a/packages/status-page/src/pages/home/Home.svelte +++ b/packages/status-page/src/pages/home/Home.svelte @@ -178,7 +178,7 @@ colorFunc: (value: Status) => { return "green"; }, - tooltip: "The current recommended gas price for a transaction on Layer 2", + tooltip: "The current recommended gas price for a transaction on Layer 2.", }, ];