fix(status-page): change bootnode to regular provider for peers, add …

…a transition and min height (#12336)
taikoxyz · Jan 10, 2023 · 9fe10e4 · 9fe10e4
1 parent 362d083
commit 9fe10e4
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 44 deletions.
diff --git a/packages/status-page/.default.env b/packages/status-page/.default.env
@@ -3,7 +3,6 @@ VITE_L1_RPC_URL="https://l1rpc.a1.taiko.xyz"
 VITE_L2_RPC_URL="https://l2rpc.a1.taiko.xyz"
 VITE_TAIKO_L2_ADDRESS="0x0000777700000000000000000000000000000001"
 VITE_TAIKO_L1_ADDRESS="0x7B3AF414448ba906f02a1CA307C56c4ADFF27ce7"
-VITE_L2_BOOTNODE_URL="http://104.198.208.154:8545"
 VITE_TOKENOMICS_ENABLED=false
 VITE_L1_EXPLORER_URL="https://l1explorer.a1.taiko.xyz"
 VITE_L2_EXPLORER_URL="https://l2explorer.a1.taiko.xyz"
diff --git a/packages/status-page/src/App.svelte b/packages/status-page/src/App.svelte
@@ -26,7 +26,6 @@
         l1TaikoAddress: import.meta.env.VITE_TAIKO_L1_ADDRESS,
         l2Provider: l2Provider,
         l2TaikoAddress: import.meta.env.VITE_TAIKO_L2_ADDRESS,
-        l2BootnodeProvider: l2BootnodeProvider,
         isTokenomicsEnabled: import.meta.env.VITE_TOKENOMICS_ENABLED,
         l1ExplorerUrl: import.meta.env.VITE_L1_EXPLORER_URL,
         l2ExplorerUrl: import.meta.env.VITE_L2_EXPLORER_URL,

diff --git a/packages/status-page/src/components/StatusIndicator.svelte b/packages/status-page/src/components/StatusIndicator.svelte
@@ -4,6 +4,7 @@
   import { onDestroy, onMount } from "svelte";
   import Loader from "../components/Loader.svelte";
   import type Status from "../domain/status";
+  import { fade } from "svelte/transition";
 
   export let provider: ethers.providers.JsonRpcProvider;
   export let contractAddress: string;
@@ -31,16 +32,11 @@
 
   let statusValue: Status;
 
-  let loading: boolean = false;
-
   onMount(async () => {
     try {
-      loading = true;
       statusValue = await statusFunc(provider, contractAddress);
     } catch (e) {
       console.error(e);
-    } finally {
-      loading = false;
     }
 
     if (watchStatusFunc) {
@@ -52,12 +48,9 @@
     if (intervalInMs !== 0) {
       interval = setInterval(async () => {
         try {
-          loading = true;
           statusValue = await statusFunc(provider, contractAddress);
         } catch (e) {
           console.error(e);
-        } finally {
-          loading = false;
         }
       }, intervalInMs);
     }
@@ -68,18 +61,23 @@
   });
 </script>
 
-<div class="rounded-3xl border-2 border-zinc-800 border-solid p-4">
+<div
+  class="rounded-3xl border-2 border-zinc-800 border-solid p-4 min-h-full h-28"
+>
   <h2 class="font-bold">{header}</h2>
-  {#if loading}
-    <Loader />
-  {:else if statusValue || typeof statusValue === "number"}
-    <span
-      class={onClick ? "cursor-pointer" : ""}
-      on:click={() => onClick(statusValue)}
-    >
-      <span class={colorFunc(statusValue)}>
-        {displayStatusValue(statusValue)}
+  {#key statusValue}
+    {#if statusValue || typeof statusValue === "number"}
+      <span
+        transition:fade
+        class="pt-2 inline-block align-bottom {onClick ? 'cursor-pointer' : ''}"
+        on:click={() => onClick(statusValue)}
+      >
+        <span class={colorFunc(statusValue)}>
+          {displayStatusValue(statusValue)}
+        </span>
       </span>
-    </span>
-  {/if}
+    {:else}
+      <Loader />
+    {/if}
+  {/key}
 </div>
diff --git a/packages/status-page/src/pages/home/Home.svelte b/packages/status-page/src/pages/home/Home.svelte
@@ -11,7 +11,6 @@
   import { getLastVerifiedBlockId } from "../../utils/getLastVerifiedBlockId";
   import { getNextBlockId } from "../../utils/getNextBlockId";
   import { getGasPrice } from "../../utils/getGasPrice";
-  import { getPeerCount } from "../../utils/getPeerCount";
   import { getQueuedTransactions } from "../../utils/getQueuedTransactions";
   import { onMount } from "svelte";
   import { getProofReward } from "../../utils/getProofReward";
@@ -21,7 +20,6 @@
   export let l1TaikoAddress: string;
   export let l2Provider: ethers.providers.JsonRpcProvider;
   export let l2TaikoAddress: string;
-  export let l2BootnodeProvider: ethers.providers.JsonRpcProvider;
   export let isTokenomicsEnabled: boolean = false;
   export let l1ExplorerUrl: string;
   export let l2ExplorerUrl: string;
@@ -164,17 +162,6 @@
         return "green";
       },
     },
-    {
-      statusFunc: getPeerCount,
-      watchStatusFunc: null,
-      provider: l2BootnodeProvider,
-      contractAddress: "",
-      header: "Peers",
-      intervalInMs: 60000,
-      colorFunc: (value: Status) => {
-        return "green";
-      },
-    },
   ];
 
   onMount(() => {

diff --git a/packages/status-page/src/utils/getPeerCount.ts b/packages/status-page/src/utils/getPeerCount.ts