Add validatorState to ChainsContext

context/ChainsContext/helpers.tsx

@@ -41,6 +41,10 @@ export const setChain = (dispatch: Dispatch, chain: ChainInfo) => {
   dispatch({ type: "setChain", payload: chain });
 };
 
+export const loadValidators = (dispatch: Dispatch) => {
+  dispatch({ type: "loadValidators" });
+};
+
 export const setNewConnection = (dispatch: Dispatch, newConnection: NewConnection) => {
   dispatch({ type: "setNewConnection", payload: newConnection });
 };

context/ChainsContext/index.tsx

@@ -1,3 +1,4 @@
+import { getAllValidators } from "@/lib/staking";
 import { ReactNode, createContext, useContext, useEffect, useReducer } from "react";
 import { emptyChain, isChainInfoFilled, setChain, setChains, setChainsError } from "./helpers";
 import { getChain, getNodeFromArray, useChainsFromRegistry } from "./service";
@@ -6,7 +7,7 @@ import { Action, ChainsContextType, State } from "./types";
 
 const ChainsContext = createContext<ChainsContextType | undefined>(undefined);
 
-const chainsReducer = (state: State, action: Action) => {
+const chainsReducer = (state: State, action: Action): State => {
   switch (action.type) {
     case "setChains": {
       return { ...state, chains: action.payload };
@@ -26,11 +27,23 @@ const chainsReducer = (state: State, action: Action) => {
       addRecentChainNameInStorage(action.payload.registryName);
       setChainInUrl(action.payload, state.chains);
 
-      return { ...state, chain: action.payload };
+      return {
+        ...state,
+        chain: action.payload,
+        validatorState: { validators: [], status: "initial" },
+      };
     }
     case "addNodeAddress": {
       return { ...state, chain: { ...state.chain, nodeAddress: action.payload } };
     }
+    case "loadValidators": {
+      return state.validatorState.status === "initial"
+        ? { ...state, validatorState: { ...state.validatorState, status: "loading" } }
+        : state;
+    }
+    case "setValidatorState": {
+      return { ...state, validatorState: action.payload };
+    }
     case "setNewConnection": {
       return { ...state, newConnection: action.payload };
     }
@@ -52,6 +65,7 @@ export const ChainsProvider = ({ children }: ChainsProviderProps) => {
     chain: emptyChain,
     chains: { mainnets: new Map(), testnets: new Map(), localnets: new Map() },
     newConnection: { action: "edit" },
+    validatorState: { validators: [], status: "initial" },
   });
 
   const { chainItems, chainItemsError } = useChainsFromRegistry();
@@ -78,6 +92,21 @@ export const ChainsProvider = ({ children }: ChainsProviderProps) => {
     })();
   }, [state.chain]);
 
+  useEffect(() => {
+    (async function loadValidators() {
+      if (state.validatorState.status === "loading" && state.chain.nodeAddress) {
+        try {
+          const validators = await getAllValidators(state.chain.nodeAddress);
+          console.log({ validators });
+          dispatch({ type: "setValidatorState", payload: { validators, status: "done" } });
+        } catch (e) {
+          console.error(e instanceof Error ? e.message : "Failed to load validators");
+          dispatch({ type: "setValidatorState", payload: { validators: [], status: "error" } });
+        }
+      }
+    })();
+  }, [state.chain.nodeAddress, state.validatorState.status]);
+
   return <ChainsContext.Provider value={{ state, dispatch }}>{children}</ChainsContext.Provider>;
 };
 

context/ChainsContext/types.tsx

@@ -1,3 +1,4 @@
+import { Validator } from "cosmjs-types/cosmos/staking/v1beta1/staking";
 import { RegistryAsset } from "../../types/chainRegistry";
 
 export interface ChainsContextType {
@@ -8,6 +9,7 @@ export interface ChainsContextType {
 export interface State {
   readonly chains: ChainItems;
   readonly chain: ChainInfo;
+  readonly validatorState: ValidatorState;
   readonly newConnection: NewConnection;
   readonly chainsError?: string | null;
 }
@@ -36,6 +38,11 @@ export interface ChainInfo {
   readonly explorerLinks: ExplorerLinks;
 }
 
+export interface ValidatorState {
+  readonly validators: readonly Validator[];
+  readonly status: "initial" | "loading" | "done" | "error";
+}
+
 export type ExplorerLinks = {
   readonly tx: string;
   readonly account: string;
@@ -64,6 +71,13 @@ export type Action =
       readonly type: "addNodeAddress";
       readonly payload: string;
     }
+  | {
+      readonly type: "loadValidators";
+    }
+  | {
+      readonly type: "setValidatorState";
+      readonly payload: ValidatorState;
+    }
   | {
       readonly type: "setNewConnection";
       readonly payload: NewConnection;