feat(status-page): show latest proof reward

packages/status-page/src/components/StatusIndicator.svelte

@@ -58,6 +58,9 @@
     }
 
     if (watchStatusFunc) {
+      if (!statusFunc) {
+        statusValue = "Waiting for event...";
+      }
       cancelFunc = watchStatusFunc(
         provider,
         contractAddress,

packages/status-page/src/domain/status.ts

@@ -11,7 +11,7 @@ type StatusIndicatorProp = {
     provider: ethers.providers.JsonRpcProvider,
     contractAddress: string,
     onEvent: (value: Status) => void
-  ) => () => void;
+  ) => Promise<() => void>;
   provider: ethers.providers.JsonRpcProvider;
   contractAddress: string;
   header: string;

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

@@ -319,29 +319,55 @@ export async function buildStatusIndicators(
           TaikoL1,
           provider
         );
-        const averageProofTime = await getAverageProofTime(
-          config.eventIndexerApiUrl
+        const latestBlockNumber = await provider.getBlockNumber();
+        const eventFilter = contract.filters.BlockVerified();
+        const events = await contract.queryFilter(
+          eventFilter,
+          latestBlockNumber - 200,
+          latestBlockNumber
         );
-        const fee = await contract.getProofReward(Number(averageProofTime));
-        return `${ethers.utils.formatUnits(fee, decimals)} ${
-          import.meta.env.VITE_FEE_TOKEN_SYMBOL ?? "TKO"
-        }`;
+
+        if (!events || events.length === 0) {
+          return `0 TKO`;
+        }
+
+        const event = events[events.length - 1].args as any as {
+          reward: BigNumber;
+        };
+
+        return `${ethers.utils.formatUnits(
+          event.reward.toString(),
+          decimals
+        )} TKO`;
+      },
+      watchStatusFunc: async (
+        provider: ethers.providers.JsonRpcProvider,
+        address: string,
+        onEvent: (value: Status) => void
+      ) => {
+        const contract = new Contract(address, TaikoL1, provider);
+        const listener = (id, blockHash, reward, ...args) => {
+          onEvent(
+            `${ethers.utils.formatUnits(reward.toString(), decimals)} TKO`
+          );
+        };
+        contract.on("BlockVerified", listener);
+
+        return () => contract.off("BlockVerified", listener);
       },
-      watchStatusFunc: null,
       provider: config.l1Provider,
       contractAddress: config.l1TaikoAddress,
-      header: "Proof Reward",
-      intervalInMs: 15000,
+      header: "Latest Proof Reward",
+      intervalInMs: 0,
       colorFunc: function (status: Status) {
         return "green"; // todo: whats green, yellow, red?
       },
-      tooltip:
-        "The current reward for successfully submitting a proof for a proposed block on the TaikoL1 smart contract, given the proof time is equal to average proof time.",
+      tooltip: "The most recent proof reward, updated on block being verified.",
     });
     indicators.push({
       provider: config.l1Provider,
       contractAddress: config.l1TaikoAddress,
-      header: "Latest Proof",
+      header: "Latest Proof Time",
       intervalInMs: 0,
       status: "0",
       watchStatusFunc: async (
@@ -350,25 +376,33 @@ export async function buildStatusIndicators(
         onEvent: (value: Status) => void
       ) => {
         const contract = new Contract(address, TaikoL1, provider);
-        const listener = (
+        const listener = async (
           id,
           parentHash,
           blockHash,
           signalRoot,
           prover,
-          provenAt,
-          ...args
+          parentGasUsed,
+          event
         ) => {
+          console.log(event);
           // ignore oracle prover
           if (
             prover.toLowerCase() !== config.oracleProverAddress.toLowerCase()
           ) {
-            onEvent(new Date(provenAt).toTimeString());
+            const proposedBlock = await contract.getBlock(id);
+            const block = await event.getBlock();
+            const proofTime =
+              block.timestamp - proposedBlock._proposedAt.toNumber();
+
+            onEvent(`${proofTime} seconds`);
           }
         };
         contract.on("BlockProven", listener);
 
-        return () => contract.off("BlockProven", listener);
+        return () => {
+          contract.off("BlockProven", listener);
+        };
       },
       colorFunc: function (status: Status) {
         return "green"; // todo: whats green, yellow, red?