Merge pull request #910 from alleslabs/feature/cfe-418-proposal-listi…

…ng-lite [CFE-418]: Proposal listing lite version
alleslabs · May 20, 2024 · e428e2d · e428e2d
2 parents 5a51670 + f1148a1
commit e428e2d
Show file tree

Hide file tree

Showing 45 changed files with 980 additions and 672 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#910](https://github.com/alleslabs/celatone-frontend/pull/910) Support proposals page lite version with LCD endpoint
 - [#930](https://github.com/alleslabs/celatone-frontend/pull/930) Add validator details stats to support lite version
 - [#928](https://github.com/alleslabs/celatone-frontend/pull/928) Add validator details page lite version
 - [#933](https://github.com/alleslabs/celatone-frontend/pull/933) Support lite version for code details contract list
@@ -60,6 +61,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#917](https://github.com/alleslabs/celatone-frontend/pull/917) Update filter selection input to support multiple use case
 - [#936](https://github.com/alleslabs/celatone-frontend/pull/936) Add isHydrated in app context for redirect behaviors
 - [#921](https://github.com/alleslabs/celatone-frontend/pull/921) Add theme
 - [#922](https://github.com/alleslabs/celatone-frontend/pull/922) Adjust color for latest blocks

diff --git a/src/lib/app-provider/env.ts b/src/lib/app-provider/env.ts
@@ -70,13 +70,15 @@ export enum CELATONE_QUERY_KEYS {
   FAUCET_INFO = "CELATONE_QUERY_FAUCET_INFO",
   // X/GOV
   PROPOSAL_DATA = "CELATONE_QUERY_PROPOSAL_DATA",
+  PROPOSAL_DATA_LCD = "CELATONE_QUERY_PROPOSAL_DATA_LCD",
   PROPOSAL_VOTES_INFO = "CELATONE_QUERY_PROPOSAL_VOTES_INFO",
   PROPOSAL_VOTES = "CELATONE_QUERY_PROPOSAL_VOTES",
   PROPOSAL_VALIDATOR_VOTES = "CELATONE_QUERY_PROPOSAL_VALIDATOR_VOTES",
   PROPOSAL_ANSWER_COUNTS = "CELATONE_QUERY_PROPOSAL_ANSWER_COUNTS",
   RELATED_PROPOSALS_BY_CONTRACT_ADDRESS = "CELATONE_QUERY_RELATED_PROPOSALS_BY_CONTRACT_ADDRESS",
   PROPOSALS_BY_ADDRESS = "CELATONE_QUERY_PROPOSALS_BY_ADDRESS",
   PROPOSALS = "CELATONE_QUERY_PROPOSALS",
+  PROPOSALS_LCD = "CELATONE_QUERY_PROPOSALS_LCD",
   PROPOSAL_PARAMS = "CELATONE_QUERY_PROPOSAL_PARAMS",
   PROPOSAL_TYPES = "CELATONE_QUERY_PROPOSAL_TYPES",
   GOV_PARAMS = "CELATONE_QUERY_GOV_PARAMS",

diff --git a/src/lib/components/Expedited.tsx b/src/lib/components/Expedited.tsx
@@ -1,6 +1,6 @@
 import { Flex, SkeletonText, Text } from "@chakra-ui/react";
 
-import { useProposalParams } from "lib/services/proposalService";
+import { useProposalParams } from "lib/services/proposal";
 import type { Option, Ratio } from "lib/types";
 import { formatPrettyPercent, formatSeconds } from "lib/utils";
 

diff --git a/src/lib/components/button/NewProposalButton.tsx b/src/lib/components/button/NewProposalButton.tsx
@@ -31,7 +31,7 @@ export const NewProposalButton = () => {
       >
         Create New Proposal
       </MenuButton>
-      <MenuList display="flex" flexDirection="column">
+      <MenuList>
         <Tooltip label="Coming soon!" hidden={!disableStoreCode}>
           <MenuItem
             isDisabled={disableStoreCode}

diff --git a/src/lib/components/filter/FilterInput.tsx b/src/lib/components/filter/FilterInput.tsx
@@ -2,14 +2,11 @@ import { Flex, FormLabel, Input } from "@chakra-ui/react";
 import type { Dispatch, ForwardedRef, RefObject, SetStateAction } from "react";
 
 import { DropdownChevron } from "../DropdownChevron";
-import type { ProposalStatus, ProposalType } from "lib/types";
 import { mergeRefs } from "lib/utils";
 
-type Result = ProposalType | ProposalStatus;
-
 interface FilterInputProps {
   keyword: string;
-  result: Result[];
+  result: string[];
   isDropdown: boolean;
   chipContainerComponent: JSX.Element;
   inputRef: RefObject<HTMLInputElement>;
@@ -49,7 +46,7 @@ export const FilterInput = ({
         autoComplete="off"
         size="lg"
         minW="150px"
-        placeholder={result.length ? "" : placeholder}
+        placeholder={result.length > 0 ? "" : placeholder}
         ref={mergeRefs([inputRef, ref])}
         maxLength={36}
         style={{ border: 0, maxHeight: "54px" }}

diff --git a/src/lib/components/table/proposals/ProposalsTable.tsx b/src/lib/components/table/proposals/ProposalsTable.tsx
@@ -1,5 +1,5 @@
 import { MobileTableContainer, TableContainer } from "../tableComponents";
-import { useMobile } from "lib/app-provider";
+import { useMobile, useTierConfig } from "lib/app-provider";
 import { Loading } from "lib/components/Loading";
 import type { Option, Proposal } from "lib/types";
 
@@ -18,13 +18,15 @@ export const ProposalsTable = ({
   isLoading,
   emptyState,
 }: ProposalsTableProps) => {
+  const isFullTier = useTierConfig() === "full";
   const isMobile = useMobile();
 
   if (isLoading) return <Loading />;
   if (!proposals?.length) return emptyState;
 
-  const templateColumns =
-    "100px minmax(360px, 2fr) minmax(150px, 1fr) 330px 180px 160px";
+  const templateColumns = isFullTier
+    ? "100px minmax(360px, 2fr) minmax(150px, 1fr) 330px 180px 180px"
+    : "100px minmax(360px, 2fr) minmax(150px, 1fr) 330px 180px";
   const boxShadow = "16px 0 32px -10px";
 
   return isMobile ? (

diff --git a/src/lib/components/table/proposals/ProposalsTableHeader.tsx b/src/lib/components/table/proposals/ProposalsTableHeader.tsx
@@ -2,6 +2,7 @@ import type { DividerProps, GridProps } from "@chakra-ui/react";
 import { Grid, Text } from "@chakra-ui/react";
 
 import { TableHeader, TableHeaderFreeze } from "../tableComponents";
+import { useTierConfig } from "lib/app-provider";
 
 interface ProposalsTableHeaderProps {
   templateColumns: GridProps["templateColumns"];
@@ -12,8 +13,11 @@ export const ProposalsTableHeader = ({
   templateColumns,
   boxShadow,
 }: ProposalsTableHeaderProps) => {
+  const isFullTier = useTierConfig() === "full";
+
   // TODO - Revisit split columnsWidth
   const columnsWidth = templateColumns?.toString().split(" ");
+
   return (
     <Grid templateColumns={templateColumns} minW="min-content">
       <TableHeaderFreeze left="0">Proposal ID</TableHeaderFreeze>
@@ -28,7 +32,7 @@ export const ProposalsTableHeader = ({
       </TableHeaderFreeze>
       <TableHeader textAlign="center">Status</TableHeader>
       <TableHeader>Voting ends</TableHeader>
-      <TableHeader>Resolved Block Height</TableHeader>
+      {isFullTier && <TableHeader>Resolved Block Height</TableHeader>}
       <TableHeader>Proposed By</TableHeader>
     </Grid>
   );

diff --git a/src/lib/components/table/proposals/ProposalsTableMobileCard.tsx b/src/lib/components/table/proposals/ProposalsTableMobileCard.tsx
@@ -2,7 +2,7 @@ import { Flex } from "@chakra-ui/react";
 
 import { MobileCardTemplate } from "../MobileCardTemplate";
 import { MobileLabel } from "../MobileLabel";
-import { useInternalNavigate } from "lib/app-provider";
+import { useInternalNavigate, useTierConfig } from "lib/app-provider";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import type { Proposal } from "lib/types";
 import { ProposalStatus } from "lib/types";
@@ -20,6 +20,7 @@ export interface ProposalsTableMobileCardProps {
 export const ProposalsTableMobileCard = ({
   proposal,
 }: ProposalsTableMobileCardProps) => {
+  const isFullTier = useTierConfig() === "full";
   const navigate = useInternalNavigate();
 
   const onCardSelect = (proposalId: number) =>
@@ -62,22 +63,30 @@ export const ProposalsTableMobileCard = ({
               status={proposal.status}
             />
           </Flex>
+          {!isFullTier && (
+            <Flex direction="column" flex="1">
+              <MobileLabel label="Proposed by" />
+              <Proposer proposer={proposal.proposer} />
+            </Flex>
+          )}
         </Flex>
       }
       bottomContent={
-        <>
-          <Flex direction="column" flex="1">
-            <MobileLabel label="Resolved Block Height" />
-            <ResolvedHeight
-              resolvedHeight={proposal.resolvedHeight}
-              isDepositOrVoting={isDepositOrVoting}
-            />
-          </Flex>
-          <Flex direction="column" flex="1">
-            <MobileLabel label="Proposed by" />
-            <Proposer proposer={proposal.proposer} />
-          </Flex>
-        </>
+        isFullTier && (
+          <>
+            <Flex direction="column" flex="1">
+              <MobileLabel label="Resolved Block Height" />
+              <ResolvedHeight
+                resolvedHeight={proposal.resolvedHeight}
+                isDepositOrVoting={isDepositOrVoting}
+              />
+            </Flex>
+            <Flex direction="column" flex="1">
+              <MobileLabel label="Proposed by" />
+              <Proposer proposer={proposal.proposer} />
+            </Flex>
+          </>
+        )
       }
       onClick={() => onCardSelect(proposal.id)}
     />

diff --git a/src/lib/components/table/proposals/ProposalsTableRow.tsx b/src/lib/components/table/proposals/ProposalsTableRow.tsx
@@ -2,7 +2,7 @@ import type { DividerProps, GridProps } from "@chakra-ui/react";
 import { Grid } from "@chakra-ui/react";
 
 import { TableRow, TableRowFreeze } from "../tableComponents";
-import { useInternalNavigate } from "lib/app-provider";
+import { useInternalNavigate, useTierConfig } from "lib/app-provider";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { StopPropagationBox } from "lib/components/StopPropagationBox";
 import type { Proposal } from "lib/types";
@@ -25,6 +25,7 @@ export const ProposalsTableRow = ({
   templateColumns,
   boxShadow,
 }: ProposalsTableRowProps) => {
+  const isFullTier = useTierConfig() === "full";
   const navigate = useInternalNavigate();
 
   const onRowSelect = (proposalId: number) =>
@@ -86,15 +87,17 @@ export const ProposalsTableRow = ({
           status={proposal.status}
         />
       </TableRow>
-      <TableRow>
-        <StopPropagationBox>
-          <ResolvedHeight
-            resolvedHeight={proposal.resolvedHeight}
-            isDepositOrVoting={isDepositOrVoting}
-            amptrackSection="proposal-list"
-          />
-        </StopPropagationBox>
-      </TableRow>
+      {isFullTier && (
+        <TableRow>
+          <StopPropagationBox>
+            <ResolvedHeight
+              resolvedHeight={proposal.resolvedHeight}
+              isDepositOrVoting={isDepositOrVoting}
+              amptrackSection="proposal-list"
+            />
+          </StopPropagationBox>
+        </TableRow>
+      )}
       <TableRow>
         <Proposer
           proposer={proposal.proposer}

diff --git a/src/lib/layout/mobile/NavDrawer.tsx b/src/lib/layout/mobile/NavDrawer.tsx
@@ -32,7 +32,7 @@ import { usePublicProjectStore } from "lib/providers/store";
 import { getNavDrawerFull, getNavDrawerLite } from "./utils";
 
 export const NavDrawer = () => {
-  const tier = useTierConfig();
+  const isFullTier = useTierConfig() === "full";
   const govConfig = useGovConfig({ shouldRedirect: false });
   const wasmConfig = useWasmConfig({ shouldRedirect: false });
   const moveConfig = useMoveConfig({ shouldRedirect: false });
@@ -43,19 +43,18 @@ export const NavDrawer = () => {
   const { getSavedPublicProjects } = usePublicProjectStore();
   const { isOpen, onOpen, onClose } = useDisclosure();
 
-  const navMenu =
-    tier === "full"
-      ? getNavDrawerFull(
-          govConfig.enabled,
-          wasmConfig.enabled,
-          moveConfig.enabled,
-          nftConfig.enabled
-        )
-      : getNavDrawerLite(
-          govConfig.enabled,
-          wasmConfig.enabled,
-          moveConfig.enabled
-        );
+  const navMenu = isFullTier
+    ? getNavDrawerFull(
+        govConfig.enabled,
+        wasmConfig.enabled,
+        moveConfig.enabled,
+        nftConfig.enabled
+      )
+    : getNavDrawerLite(
+        govConfig.enabled,
+        wasmConfig.enabled,
+        moveConfig.enabled
+      );
 
   if (publicProject.enabled) {
     navMenu.push({