feat: validator list

CHANGELOG.md

@@ -39,7 +39,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
-- [#818](https://github.com/alleslabs/celatone-frontend/pull/818) bonded tokens voting powers replacement with real data from api v1
+- [#822](https://github.com/alleslabs/celatone-frontend/pull/822) Add validator list page
+- [#818](https://github.com/alleslabs/celatone-frontend/pull/818) Replace bonded tokens voting powers with real data from api v1
 - [#801](https://github.com/alleslabs/celatone-frontend/pull/801) Add validator detail ui structure
 - [#817](https://github.com/alleslabs/celatone-frontend/pull/817) api v1 - validator voted proposals
 - [#816](https://github.com/alleslabs/celatone-frontend/pull/816) api v1 - validator staking provisions

src/lib/amplitude/types.ts

@@ -63,6 +63,7 @@ export enum AmpEvent {
   TO_PROPOSAL_DETAILS = "To Proposal Detail",
   TO_PROPOSAL_TO_STORE_CODE = "To Proposal To Store Code",
   TO_PROPOSAL_TO_WHITELIST = "To Proposal To Whitelist",
+  TO_VALIDATORS = "To Validators",
   TO_VALIDATOR_DETAILS = "To Validator Detail",
   TO_MODULE_DETAILS = "To Module Detail",
   TO_MODULE_INTERACTION = "To Module Interaction",

src/lib/components/abi/args-form/field/ArgFieldWidget.tsx

@@ -108,13 +108,15 @@ export const ArgFieldWidget = ({
             ...provided,
             color: state.isDisabled ? "gray.700" : undefined,
           }),
-          option: (provided, state) => ({
+          option: (provided) => ({
             ...provided,
             color: "text.main",
-            bg: state.isSelected ? "gray.800" : "gray.900",
             _hover: {
               bg: "gray.700",
             },
+            _selected: {
+              bg: "gray.800",
+            },
           }),
         }}
       />

src/lib/components/icon/CustomIcon.tsx

@@ -1404,6 +1404,29 @@ export const ICONS = {
     ),
     viewBox: viewboxDefault,
   },
+  validator: {
+    svg: (
+      <>
+        <path
+          d="M17.7837 12.0419L14.867 13.2082C14.6458 13.2981 14.5 13.5119 14.5 13.75C14.5 15.288 15.1295 17.8514 17.7764 18.9544C17.9198 19.0152 18.0826 19.0152 18.226 18.9544C20.8705 17.8514 21.5 15.288 21.5 13.75C21.5 13.5119 21.3542 13.2981 21.133 13.2082L18.2163 12.0419C18.0778 11.986 17.9222 11.986 17.7837 12.0419ZM20.3188 14.1388C20.224 15.3706 19.6576 16.9742 18 17.776V13.2106L20.3188 14.1388Z"
+          fill="currentColor"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M12 9.25C12.9665 9.25 13.75 8.4665 13.75 7.5C13.75 6.5335 12.9665 5.75 12 5.75C11.0335 5.75 10.25 6.5335 10.25 7.5C10.25 8.4665 11.0335 9.25 12 9.25ZM12 11C13.933 11 15.5 9.433 15.5 7.5C15.5 5.567 13.933 4 12 4C10.067 4 8.5 5.567 8.5 7.5C8.5 9.433 10.067 11 12 11Z"
+          fill="currentColor"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M9.36266 12.2592C10.2029 12.0047 11.0986 11.8751 12 11.8751C12.9014 11.8751 13.7971 12.0047 14.6373 12.2592C15.4773 12.5136 16.2521 12.8898 16.9139 13.3737C17.5757 13.8576 16.1167 14.4437 16.4921 15.1063C16.7089 15.4891 16.8675 15.8923 16.9629 16.308C17.1938 17.3153 16.3043 18.0001 15.4975 18.0001L6.5025 18.0001C5.69574 18.0001 4.80621 17.3153 5.03714 16.308C5.13245 15.8923 5.29109 15.4891 5.50791 15.1063C5.88331 14.4437 6.42426 13.8576 7.08613 13.3737C7.74789 12.8898 8.5227 12.5136 9.36266 12.2592ZM12 13.4063C11.2512 13.4063 10.513 13.5143 9.82865 13.7215C9.14406 13.9288 8.53363 14.2294 8.02856 14.5987C7.52359 14.9679 7.13896 15.3946 6.88287 15.8466C6.76706 16.051 6.67826 16.2593 6.61572 16.4688L15.3843 16.4688C15.3217 16.2593 15.2329 16.051 15.1171 15.8466C14.861 15.3946 16.4764 14.9679 15.9714 14.5987C15.4664 14.2294 14.8559 13.9288 14.1714 13.7215C13.487 13.5143 12.7488 13.4063 12 13.4063ZM6.50131 16.4687L6.50232 16.4688Z"
+          fill="currentColor"
+        />
+      </>
+    ),
+    viewBox: "5 3 17 16",
+  },
   view: {
     svg: (
       <path

src/lib/components/json-schema/form/widgets/SelectWidget.tsx

@@ -159,13 +159,15 @@ const SelectWidget = <T, F>(props: WidgetProps<T, F>) => {
             ...provided,
             color: state.isDisabled ? "gray.700" : undefined,
           }),
-          option: (provided, state) => ({
+          option: (provided) => ({
             ...provided,
             color: "text.main",
-            bg: state.isSelected ? "gray.800" : "gray.900",
             _hover: {
               bg: "gray.700",
             },
+            _selected: {
+              bg: "gray.800",
+            },
           }),
         }}
       />

src/lib/components/pagination/usePaginator.ts

@@ -31,7 +31,7 @@ export const usePaginator = ({
   const { currentChainId } = useCelatoneApp();
 
   const [totalData, setTotalData] = useState<number>(total ?? 0);
-  const [pageSize, setPageSize] = useState<number>(initialState.pageSize ?? 0);
+  const [pageSize, setPageSize] = useState<number>(initialState.pageSize ?? 10);
   const [currentPage, setCurrentPage] = useState<number>(
     initialState.currentPage
   );
@@ -56,9 +56,9 @@ export const usePaginator = ({
   }, [totalData, pageSize]);
 
   useEffect(() => {
-    setPageSize(10);
+    setPageSize(initialState.pageSize ?? 10);
     setCurrentPage(1);
-  }, [currentChainId]);
+  }, [currentChainId, initialState.pageSize]);
 
   useEffect(() => {
     setTotalData(total ?? 0);

src/lib/layout/SubHeader.tsx

@@ -32,36 +32,35 @@ const SubHeader = () => {
     { name: "Blocks", slug: "/blocks", icon: "block" },
   ];
 
-  if (moveConfig.enabled)
-    subHeaderMenu.push({
-      name: "Modules",
-      slug: "/modules",
-      icon: "contract-address",
-    });
-
   if (wasmConfig.enabled)
     subHeaderMenu.push(
       { name: "Codes", slug: "/codes", icon: "code" },
       { name: "Contracts", slug: "/contracts", icon: "contract-address" }
     );
 
-  if (govConfig.enabled)
+  if (moveConfig.enabled)
     subHeaderMenu.push({
-      name: "Proposals",
-      slug: "/proposals",
-      icon: "proposal",
+      name: "Modules",
+      slug: "/modules",
+      icon: "contract-address",
     });
 
-  if (poolConfig.enabled)
-    subHeaderMenu.push({ name: "Osmosis Pools", slug: "/pools", icon: "pool" });
-
   if (nftConfig.enabled)
     subHeaderMenu.push({
       name: "NFTs",
       slug: "/nft-collections",
       icon: "group",
     });
 
+  if (govConfig.enabled)
+    subHeaderMenu.push(
+      { name: "Proposals", slug: "/proposals", icon: "proposal" },
+      { name: "Validators", slug: "/validators", icon: "validator" }
+    );
+
+  if (poolConfig.enabled)
+    subHeaderMenu.push({ name: "Osmosis Pools", slug: "/pools", icon: "pool" });
+
   const isCurrentPage = useIsCurrentPage();
 
   const activeColor = "primary.light";

src/lib/layout/mobile/NavDrawer.tsx

@@ -74,15 +74,6 @@ export const NavDrawer = () => {
               },
             ]
           : []),
-        ...(govConfig.enabled
-          ? [
-              {
-                name: "Proposals",
-                slug: "/proposals",
-                icon: "proposal" as IconKeys,
-              },
-            ]
-          : []),
         ...(moveConfig.enabled
           ? [
               {
@@ -106,6 +97,20 @@ export const NavDrawer = () => {
               },
             ]
           : []),
+        ...(govConfig.enabled
+          ? [
+              {
+                name: "Proposals",
+                slug: "/proposals",
+                icon: "proposal" as IconKeys,
+              },
+              {
+                name: "Validators",
+                slug: "/validators",
+                icon: "validator" as IconKeys,
+              },
+            ]
+          : []),
       ],
     },
   ];

src/lib/pages/validators/components/ActiveFilter.tsx

@@ -0,0 +1,72 @@
+import { Flex, Text } from "@chakra-ui/react";
+import { Select } from "chakra-react-select";
+import { useMemo } from "react";
+
+import type { Option } from "lib/types";
+
+interface ActiveFilterProps {
+  isActive: boolean;
+  setIsActive: (value: boolean) => void;
+  activeCount: Option<number>;
+  inactiveCount: Option<number>;
+}
+
+const getOptionLabel = (label: string, count: Option<number>) =>
+  label + (count ? ` (${count})` : "");
+
+export const ActiveFilter = ({
+  isActive,
+  setIsActive,
+  activeCount,
+  inactiveCount,
+}: ActiveFilterProps) => {
+  const activeOptions = useMemo(
+    () => [
+      { label: getOptionLabel("Active validators", activeCount), value: true },
+      {
+        label: getOptionLabel("Inactive validators", inactiveCount),
+        value: false,
+      },
+    ],
+    [activeCount, inactiveCount]
+  );
+
+  return (
+    <Flex direction="column" gap={1} minW={{ base: "full", md: "240px" }}>
+      <Text variant="body3" color="text.dark" pl={{ base: 1, md: 3 }}>
+        Show only
+      </Text>
+      <Select
+        size="lg"
+        options={activeOptions}
+        value={activeOptions.find(({ value }) => value === isActive)}
+        onChange={(selectedOption) =>
+          selectedOption && setIsActive(selectedOption.value)
+        }
+        chakraStyles={{
+          valueContainer: (provided) => ({
+            ...provided,
+            pl: 3,
+            pr: 0,
+          }),
+          dropdownIndicator: (provided) => ({
+            ...provided,
+            px: 2,
+          }),
+          option: (provided) => ({
+            ...provided,
+            color: "text.main",
+            fontSize: "16px",
+            _hover: {
+              bg: "gray.700",
+            },
+            _selected: {
+              bg: "gray.800",
+            },
+          }),
+        }}
+        isSearchable={false}
+      />
+    </Flex>
+  );
+};

src/lib/pages/validators/components/OrderSelect.tsx

@@ -0,0 +1,95 @@
+import { Flex, Text } from "@chakra-ui/react";
+import { Select } from "chakra-react-select";
+
+import { ValidatorOrder } from "../types";
+
+const ORDER_OPTIONS = [
+  {
+    label: "Validator Name (A to Z)",
+    value: { order: ValidatorOrder.Moniker, isDesc: false },
+  },
+  {
+    label: "Validator Name (Z to A)",
+    value: { order: ValidatorOrder.Moniker, isDesc: true },
+  },
+  {
+    label: "Voting Power (High to Low)",
+    value: { order: ValidatorOrder.VotingPower, isDesc: true },
+  },
+  {
+    label: "Voting Power (Low to High)",
+    value: { order: ValidatorOrder.VotingPower, isDesc: false },
+  },
+  {
+    label: "Uptime (High to Low)",
+    value: { order: ValidatorOrder.Uptime, isDesc: true },
+  },
+  {
+    label: "Uptime (Low to High)",
+    value: { order: ValidatorOrder.Uptime, isDesc: false },
+  },
+  {
+    label: "Commission (High to Low)",
+    value: { order: ValidatorOrder.Commission, isDesc: true },
+  },
+  {
+    label: "Commission (Low to High)",
+    value: { order: ValidatorOrder.Commission, isDesc: false },
+  },
+];
+
+interface OrderSelectProps {
+  order: ValidatorOrder;
+  setOrder: (value: ValidatorOrder) => void;
+  isDesc: boolean;
+  setIsDesc: (value: boolean) => void;
+}
+
+export const OrderSelect = ({
+  order,
+  setOrder,
+  isDesc,
+  setIsDesc,
+}: OrderSelectProps) => (
+  <Flex direction="column" gap={1} minW="full">
+    <Text variant="body3" color="text.dark" pl={1}>
+      Sorted by
+    </Text>
+    <Select
+      size="lg"
+      options={ORDER_OPTIONS}
+      value={ORDER_OPTIONS.find(
+        ({ value }) => value.order === order && value.isDesc === isDesc
+      )}
+      onChange={(selectedOption) => {
+        if (selectedOption) {
+          setOrder(selectedOption.value.order);
+          setIsDesc(selectedOption.value.isDesc);
+        }
+      }}
+      chakraStyles={{
+        valueContainer: (provided) => ({
+          ...provided,
+          pl: 3,
+          pr: 0,
+        }),
+        dropdownIndicator: (provided) => ({
+          ...provided,
+          px: 2,
+        }),
+        option: (provided) => ({
+          ...provided,
+          color: "text.main",
+          fontSize: "16px",
+          _hover: {
+            bg: "gray.700",
+          },
+          _selected: {
+            bg: "gray.800",
+          },
+        }),
+      }}
+      isSearchable={false}
+    />
+  </Flex>
+);

src/lib/pages/validators/components/index.ts

@@ -0,0 +1,2 @@
+export * from "./ActiveFilter";
+export * from "./OrderSelect";