observer params table

docs/architecture/observers.mdx

@@ -3,10 +3,30 @@ sidebar_position: 9
 ---
 
 import ObserverList from "@site/src/components/ObserverList/ObserverList";
+import ObserverParams from "@site/src/components/ObserverParams/ObserverParams";
 
 # Observers
 
+ZetaChain has two types of validators: core validators and observer validators
+(observers).
+
+Observers are tasked with running nodes of connected chains, observing them with
+`zetaclient` and writing transactions to connected chains.
+
+The protocol is designed in a way to allow observers in the future to choose
+which chains they want to observe. This allows for a more flexible system where
+observers can observe only the subset of chains they are interested in (for
+example, their infrastructure is built around running EVM nodes). In the current
+version of the protocol, all observers are observing all chains.
+
 A list of [observers](/architecture/modules/observer/overview) on the ZetaChain
-testnet.
+testnet:
 
 <ObserverList />
+
+As they perform a critical function in the system, the minimum self
+delegation/stake required to be an observer is set as a param of the `observer`
+module on a per chain basis. This is to ensure that observers are incentivized
+to perform their duties and are not malicious.
+
+<ObserverParams />

src/components/ObserverParams/ObserverParams.tsx

@@ -0,0 +1,71 @@
+import React, { useState, useEffect } from "react";
+
+interface Chain {
+  chain_id: string;
+  chain_name: string;
+}
+
+interface ObserverParams {
+  ballot_threshold: string;
+  chain: Chain;
+  is_supported: boolean;
+  min_observer_delegation: string;
+}
+
+const API =
+  "https://zetachain-athens.blockpi.network/lcd/v1/public/zeta-chain/observer/params";
+
+const ObserverParams = () => {
+  const [data, setData] = useState<ObserverParams[]>([]);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+
+  useEffect(() => {
+    fetch(API)
+      .then((response) => response.json())
+      .then((json) => {
+        setData(json.params.observer_params);
+        setIsLoading(false);
+      })
+      .catch((error) => {
+        console.error("Error fetching data: ", error);
+        setIsLoading(false);
+      });
+  }, []);
+
+  return (
+    <div>
+      {isLoading ? (
+        <p>Loading...</p>
+      ) : (
+        <div>
+          <table>
+            <thead>
+              <tr>
+                <th>Chain Name</th>
+                <th>Min Observer Delegation</th>
+                <th>Ballot Threshold</th>
+                <th>Is Supported</th>
+              </tr>
+            </thead>
+            <tbody>
+              {data.map((observerParam, index) => (
+                <tr key={index}>
+                  <td>{observerParam.chain.chain_name}</td>
+                  <td>{parseInt(observerParam.min_observer_delegation)}</td>
+                  <td>{parseFloat(observerParam.ballot_threshold) * 100}%</td>
+                  <td>{observerParam.is_supported ? "Yes" : "No"}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+          Source:&nbsp;
+          <a href={API} target="_blank" rel="noopener noreferrer">
+            {API}
+          </a>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ObserverParams;