add status page indicator

packages/status-page/.default.env

@@ -6,4 +6,5 @@ VITE_TAIKO_L1_ADDRESS="0x7B3AF414448ba906f02a1CA307C56c4ADFF27ce7"
 VITE_L1_EXPLORER_URL="https://l1explorer.a1.taiko.xyz"
 VITE_L2_EXPLORER_URL="https://l2explorer.a1.taiko.xyz"
 VITE_FEE_TOKEN_SYMBOL="TKO";
-VITE_ORACLE_PROVER_ADDRESS="0x1567CDAb5F7a69154e61A16D8Ff5eE6A3e991b39"
+VITE_ORACLE_PROVER_ADDRESS="0x1567CDAb5F7a69154e61A16D8Ff5eE6A3e991b39"
+VITE_EVENT_INDEXER_API_URL="http://localhost:4100"

packages/status-page/src/App.svelte

@@ -29,6 +29,7 @@
         oracleProverAddress:
           import.meta.env.ORACLE_PROVER_ADDRESS ||
           "0x1567CDAb5F7a69154e61A16D8Ff5eE6A3e991b39",
+        eventIndexerApiUrl: import.meta.env.VITE_EVENT_INDEXER_API_URL,
       },
       userData: {},
     }),

packages/status-page/src/pages/home/Home.svelte

@@ -17,6 +17,7 @@
   import { getStateVariables } from "../../utils/getStateVariables";
   import { truncateString } from "../../utils/truncateString";
   import TaikoL1 from "../../constants/abi/TaikoL1";
+  import { getNumProvers } from "../../utils/getNumProvers";
 
   export let l1Provider: ethers.providers.JsonRpcProvider;
   export let l1TaikoAddress: string;
@@ -26,8 +27,25 @@
   export let l2ExplorerUrl: string;
   export let feeTokenSymbol: string;
   export let oracleProverAddress: string;
+  export let eventIndexerApiUrl: string;
 
   let statusIndicators: StatusIndicatorProp[] = [
+    {
+      statusFunc: async (
+        provider: ethers.providers.JsonRpcProvider,
+        address: string
+      ) => (await getNumProvers(eventIndexerApiUrl)).uniqueProvers,
+      watchStatusFunc: watchHeaderSynced,
+      provider: l1Provider,
+      contractAddress: l1TaikoAddress,
+      header: "Unique Provers",
+      intervalInMs: 0,
+      colorFunc: (value: Status) => {
+        return "green";
+      },
+      tooltip:
+        "The numbe of unique provers who successfully submitted a proof to the TaikoL1 smart contract.",
+    },
     {
       statusFunc: getLatestSyncedHeader,
       watchStatusFunc: watchHeaderSynced,

packages/status-page/src/utils/getNumProvers.ts

@@ -0,0 +1,18 @@
+import axios from "axios";
+
+export type UniqueProver = {
+  address: string;
+  count: number;
+};
+export type UniqueProverResponse = {
+  uniqueProvers: number;
+  provers: UniqueProver[];
+};
+export const getNumProvers = async (
+  eventIndexerApiUrl: string
+): Promise<UniqueProverResponse> => {
+  const resp = await axios.get<UniqueProverResponse>(
+    `${eventIndexerApiUrl}/uniqueProvers`
+  );
+  return resp.data;
+};