Load unbonded and unbonding validators too

components/SelectValidator.tsx

@@ -25,11 +25,13 @@ export default function SelectValidator({
   setValidatorAddress,
 }: SelectValidatorProps) {
   const {
-    validatorState: { validators },
+    validatorState: { validators: { bonded, unbonding, unbonded} },
   } = useChains();
   const [open, setOpen] = useState(false);
   const [searchText, setSearchText] = useState("");
 
+  const validators = [...bonded, ...unbonding, ...unbonded];
+
   return (
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>
@@ -73,6 +75,7 @@ export default function SelectValidator({
                         : "opacity-0",
                     )}
                   />
+                  {validatorItem.jailed ? <><strong>jailed</strong>{" "}</> : null}
                   {validatorItem.description.moniker}
                 </CommandItem>
               ))}

components/forms/OldCreateTxForm/index.tsx

@@ -52,7 +52,8 @@ const OldCreateTxForm = ({ router, senderAddress, accountOnChain }: OldCreateTxF
   };
 
   const addMsgWithValidator = (newMsgType: MsgTypeUrl) => {
-    if (!validators.length) {
+    const validatorsLoaded = !!validators.bonded.length;
+    if (!validatorsLoaded) {
       loadValidators(chainsDispatch);
     }
 

context/ChainsContext/index.tsx

@@ -1,10 +1,10 @@
-import { getAllValidators } from "@/lib/staking";
+import { emptyAllValidatorsEmpty, getAllValidators } from "@/lib/staking";
 import { toastError } from "@/lib/utils";
 import { ReactNode, createContext, useContext, useEffect, useReducer } from "react";
 import { emptyChain, isChainInfoFilled, setChain, setChains, setChainsError } from "./helpers";
 import { getChain, getNodeFromArray, useChainsFromRegistry } from "./service";
 import { addLocalChainInStorage, addRecentChainNameInStorage, setChainInUrl } from "./storage";
-import { Action, ChainsContextType, State } from "./types";
+import { Action, ChainsContextType, Dispatch, State } from "./types";
 
 const ChainsContext = createContext<ChainsContextType | undefined>(undefined);
 
@@ -31,7 +31,7 @@ const chainsReducer = (state: State, action: Action): State => {
       return {
         ...state,
         chain: action.payload,
-        validatorState: { validators: [], status: "initial" },
+        validatorState: { validators: emptyAllValidatorsEmpty(), status: "initial" },
       };
     }
     case "addNodeAddress": {
@@ -66,7 +66,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" },
+    validatorState: { validators: emptyAllValidatorsEmpty(), status: "initial" },
   });
 
   const { chainItems, chainItemsError } = useChainsFromRegistry();
@@ -105,7 +105,7 @@ export const ChainsProvider = ({ children }: ChainsProviderProps) => {
             description: "Failed to load validators",
             fullError: e instanceof Error ? e : undefined,
           });
-          dispatch({ type: "setValidatorState", payload: { validators: [], status: "error" } });
+          dispatch({ type: "setValidatorState", payload: { validators: emptyAllValidatorsEmpty(), status: "error" } });
         }
       }
     })();
@@ -114,7 +114,7 @@ export const ChainsProvider = ({ children }: ChainsProviderProps) => {
   return <ChainsContext.Provider value={{ state, dispatch }}>{children}</ChainsContext.Provider>;
 };
 
-export const useChains = () => {
+export const useChains = (): State & { chainsDispatch: Dispatch } => {
   const context = useContext(ChainsContext);
   if (context === undefined) {
     throw new Error("useChains must be used within a ChainsProvider");

context/ChainsContext/types.tsx

@@ -1,5 +1,5 @@
-import { Validator } from "cosmjs-types/cosmos/staking/v1beta1/staking";
 import { RegistryAsset } from "../../types/chainRegistry";
+import { AllValidators } from "@/lib/staking";
 
 export interface ChainsContextType {
   readonly state: State;
@@ -39,7 +39,7 @@ export interface ChainInfo {
 }
 
 export interface ValidatorState {
-  readonly validators: readonly Validator[];
+  readonly validators: AllValidators;
   readonly status: "initial" | "loading" | "done" | "error";
 }
 

lib/staking.ts

@@ -2,24 +2,68 @@ import { QueryClient, StakingExtension, setupStakingExtension } from "@cosmjs/st
 import { connectComet } from "@cosmjs/tendermint-rpc";
 import { Validator } from "cosmjs-types/cosmos/staking/v1beta1/staking";
 
-const getValidatorsPage = (
+const getBondedValidatorsPage = (
   queryClient: QueryClient & StakingExtension,
   paginationKey: Uint8Array | undefined,
 ) => queryClient.staking.validators("BOND_STATUS_BONDED", paginationKey);
 
-export const getAllValidators = async (rpcUrl: string): Promise<readonly Validator[]> => {
-  const validators: Validator[] = [];
+const getUnbondingValidatorsPage = (
+  queryClient: QueryClient & StakingExtension,
+  paginationKey: Uint8Array | undefined,
+) => queryClient.staking.validators("BOND_STATUS_UNBONDING", paginationKey);
+
+const getUnbondedValidatorsPage = (
+  queryClient: QueryClient & StakingExtension,
+  paginationKey: Uint8Array | undefined,
+) => queryClient.staking.validators("BOND_STATUS_UNBONDED", paginationKey);
+
+export interface AllValidators {
+  bonded: readonly Validator[];
+  unbonding: readonly Validator[];
+  unbonded: readonly Validator[];
+}
+
+export function emptyAllValidatorsEmpty(): AllValidators {
+  return { bonded: [], unbonding: [], unbonded: [] };
+}
+
+export const getAllValidators = async (rpcUrl: string): Promise<AllValidators> => {
+  const bondedValidators: Validator[] = [];
+  const unbondingValidators: Validator[] = [];
+  const unbondedValidators: Validator[] = [];
 
   const cometClient = await connectComet(rpcUrl);
   const queryClient = QueryClient.withExtensions(cometClient, setupStakingExtension);
 
-  let paginationKey: Uint8Array | undefined = undefined;
+  let paginationKey: Uint8Array | undefined;
 
+  // Bonded
+  paginationKey = undefined;
   do {
-    const response = await getValidatorsPage(queryClient, paginationKey);
-    validators.push(...response.validators);
+    const response = await getBondedValidatorsPage(queryClient, paginationKey);
+    bondedValidators.push(...response.validators);
     paginationKey = response.pagination?.nextKey;
   } while (paginationKey?.length);
 
-  return validators;
+  // Unbonding
+  paginationKey = undefined;
+  do {
+    const response = await getUnbondingValidatorsPage(queryClient, paginationKey);
+    unbondingValidators.push(...response.validators);
+    paginationKey = response.pagination?.nextKey;
+  } while (paginationKey?.length);
+
+  // Unbonded
+  paginationKey = undefined;
+  do {
+    const response = await getUnbondedValidatorsPage(queryClient, paginationKey);
+    unbondedValidators.push(...response.validators);
+    paginationKey = response.pagination?.nextKey;
+  } while (paginationKey?.length);
+
+  return {
+    bonded: bondedValidators,
+    unbonding: unbondingValidators,
+    unbonded: unbondedValidators,
+  };
 };