Merge pull request #966 from alleslabs/feat/proposal-details-lite

feat: proposal lite
alleslabs · Jun 12, 2024 · 636ec3b · 636ec3b
2 parents d02d7a0 + 9cf289c
commit 636ec3b
Show file tree

Hide file tree

Showing 27 changed files with 516 additions and 248 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
 
+- [#966](https://github.com/alleslabs/celatone-frontend/pull/966) Support lite version for proposal details
 - [#958](https://github.com/alleslabs/celatone-frontend/pull/958) Support lite version for block index page
 - [#951](https://github.com/alleslabs/celatone-frontend/pull/951) Support contract details lite version with LCD endpoint
 - [#961](https://github.com/alleslabs/celatone-frontend/pull/961) Add and refactor proposal related lcd endpoints

diff --git a/src/lib/app-provider/env.ts b/src/lib/app-provider/env.ts
@@ -73,6 +73,7 @@ export enum CELATONE_QUERY_KEYS {
   // X/GOV
   PROPOSAL_DATA = "CELATONE_QUERY_PROPOSAL_DATA",
   PROPOSAL_DATA_LCD = "CELATONE_QUERY_PROPOSAL_DATA_LCD",
+  PROPOSAL_DEPOSITS_LCD = "CELATONE_QUERY_PROPOSAL_DEPOSITS_LCD",
   PROPOSAL_VOTES_INFO = "CELATONE_QUERY_PROPOSAL_VOTES_INFO",
   PROPOSAL_VOTES = "CELATONE_QUERY_PROPOSAL_VOTES",
   PROPOSAL_VALIDATOR_VOTES = "CELATONE_QUERY_PROPOSAL_VALIDATOR_VOTES",

diff --git a/src/lib/pages/proposal-details/components/DepositList.tsx b/src/lib/pages/proposal-details/components/DepositList.tsx
@@ -2,17 +2,23 @@ import { Flex } from "@chakra-ui/react";
 
 import { useMobile } from "lib/app-provider";
 import { ExplorerLink } from "lib/components/ExplorerLink";
+import { Loading } from "lib/components/Loading";
 import type { ProposalDeposit } from "lib/types";
 
 import { DepositAmounts } from "./DepositAmounts";
 
 interface DepositListProps {
   proposalDeposits: ProposalDeposit[];
+  isDepositsLoading: boolean;
 }
 
-export const DepositList = ({ proposalDeposits }: DepositListProps) => {
+export const DepositList = ({
+  proposalDeposits,
+  isDepositsLoading,
+}: DepositListProps) => {
   const isMobile = useMobile();
 
+  if (isDepositsLoading) return <Loading />;
   return (
     <div>
       {proposalDeposits.map((deposit, index) => (

diff --git a/src/lib/pages/proposal-details/components/deposit-bar/DepositRatio.tsx b/src/lib/pages/proposal-details/components/deposit-bar/DepositRatio.tsx
@@ -2,25 +2,23 @@ import { Flex, Text } from "@chakra-ui/react";
 
 import { TokenImageRender } from "lib/components/token";
 import type { TokenWithValue } from "lib/types";
-import {
-  formatTokenWithValue,
-  formatUTokenWithPrecision,
-  getTokenLabel,
-} from "lib/utils";
+import { formatUTokenWithPrecision, getTokenLabel } from "lib/utils";
 
 interface DepositRatioProps {
   current: TokenWithValue;
   min: TokenWithValue;
+  isDepositOrVoting: boolean;
   isCompact: boolean;
 }
 
 export const DepositRatio = ({
   current,
   min,
+  isDepositOrVoting,
   isCompact,
 }: DepositRatioProps) => (
   <Flex gap={1} align="center" minW="fit-content">
-    <Text variant={isCompact ? "body2" : "body1"} alignContent="center">
+    <Text variant={isCompact ? "body2" : "body1"}>
       <span style={{ fontWeight: 500 }}>
         {formatUTokenWithPrecision(
           current.amount,
@@ -29,16 +27,26 @@ export const DepositRatio = ({
           isCompact ? 2 : undefined
         )}
       </span>
-      <span
-        style={{
-          color: isCompact
-            ? "var(--chakra-colors-text-main)"
-            : "var(--chakra-colors-accent-main)",
-        }}
-      >
-        {" / "}
-      </span>
-      {formatTokenWithValue(min, isCompact ? 2 : undefined)}
+      {isDepositOrVoting && (
+        <>
+          <span
+            style={{
+              color: isCompact
+                ? "var(--chakra-colors-text-main)"
+                : "var(--chakra-colors-accent-main)",
+            }}
+          >
+            {" / "}
+          </span>
+          {formatUTokenWithPrecision(
+            min.amount,
+            min.precision ?? 0,
+            false,
+            isCompact ? 2 : undefined
+          )}
+        </>
+      )}
+      {` ${getTokenLabel(min.denom, min.symbol)}`}
     </Text>
     {!isCompact && (
       <TokenImageRender

diff --git a/src/lib/pages/proposal-details/components/deposit-bar/index.tsx b/src/lib/pages/proposal-details/components/deposit-bar/index.tsx
@@ -9,38 +9,53 @@ import { ProgressBar } from "./ProgressBar";
 interface DepositBarProps {
   deposit: ProposalData["totalDeposit"];
   minDeposit: TokenWithValue[];
+  isDepositOrVoting: boolean;
   isCompact: boolean;
 }
 
 export const DepositBar = ({
   deposit,
   minDeposit,
+  isDepositOrVoting,
   isCompact,
 }: DepositBarProps) => {
   const pairDeposit = mapDeposit(deposit, minDeposit);
   return (
-    <Flex direction="column" gap="2px" w="full">
+    <Flex direction="column" ml={isCompact ? 0 : 2} gap="2px" w="full">
       {pairDeposit.map(({ current, min }) => (
         <Flex
           key={min.denom}
           direction={isCompact ? "column" : "row"}
+          align="center"
           w="full"
           gap={isCompact ? 0 : 2}
         >
-          <ProgressBar
-            value={current.amount}
-            max={min.amount}
-            isCompact={isCompact}
-          />
+          {isDepositOrVoting && (
+            <ProgressBar
+              value={current.amount}
+              max={min.amount}
+              isCompact={isCompact}
+            />
+          )}
           {isCompact ? (
-            <Flex align="center" justify="space-between">
+            <Flex align="center" w="full" justify="space-between">
               <Text variant="body2" textColor="text.dark" fontWeight={500}>
                 Deposited
               </Text>
-              <DepositRatio current={current} min={min} isCompact />
+              <DepositRatio
+                current={current}
+                min={min}
+                isDepositOrVoting={isDepositOrVoting}
+                isCompact
+              />
             </Flex>
           ) : (
-            <DepositRatio current={current} min={min} isCompact={false} />
+            <DepositRatio
+              current={current}
+              min={min}
+              isDepositOrVoting={isDepositOrVoting}
+              isCompact={false}
+            />
           )}
         </Flex>
       ))}

diff --git a/.../pages/proposal-details/components/proposal-overview/__stories__/StatusSummary.stories.ts b/.../pages/proposal-details/components/proposal-overview/__stories__/StatusSummary.stories.ts
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import type Big from "big.js";
+import Big from "big.js";
 import dayjs from "dayjs";
 
 import { StatusSummary } from "../status-summary";
@@ -51,8 +51,14 @@ const data: Omit<
       value: undefined,
     },
   ],
-  version: "v1",
   votingTime: null,
+  finalTallyResult: {
+    yes: Big(0),
+    abstain: Big(0),
+    no: Big(0),
+    noWithVeto: Big(0),
+    totalVotingPower: null,
+  },
 };
 
 const params: ProposalParams = {

diff --git a/src/lib/pages/proposal-details/components/proposal-overview/index.tsx b/src/lib/pages/proposal-details/components/proposal-overview/index.tsx
@@ -18,13 +18,12 @@ export interface ProposalOverviewProps {
   votesInfo: Option<ProposalVotesInfo>;
   params: Option<ProposalParams>;
   isLoading: boolean;
+  isDepositsLoading: boolean;
 }
 
 export const ProposalOverview = ({
   proposalData,
-  votesInfo,
-  params,
-  isLoading,
+  ...props
 }: ProposalOverviewProps) => (
   <Grid
     gridTemplateColumns={{ base: "1fr", xl: "2fr minmax(360px, 1fr)" }}
@@ -33,24 +32,14 @@ export const ProposalOverview = ({
   >
     <GridItem>
       <Flex direction="column" gap={8}>
-        <StatusSummary
-          proposalData={proposalData}
-          votesInfo={votesInfo}
-          params={params}
-          isLoading={isLoading}
-        />
+        <StatusSummary proposalData={proposalData} {...props} />
         <ProposalDescription description={proposalData.description} />
         <ProposalMetadata metadata={proposalData.metadata} />
         <ProposalMessages messages={proposalData.messages} />
       </Flex>
     </GridItem>
     <GridItem>
-      <ProposalPeriodOverview
-        proposalData={proposalData}
-        votesInfo={votesInfo}
-        params={params}
-        isLoading={isLoading}
-      />
+      <ProposalPeriodOverview proposalData={proposalData} {...props} />
     </GridItem>
   </Grid>
 );
diff --git a/...roposal-details/components/proposal-overview/proposal-period-overview/DepositOverview.tsx b/...roposal-details/components/proposal-overview/proposal-period-overview/DepositOverview.tsx
@@ -17,6 +17,7 @@ const DepositOverviewBody = ({
   proposalData,
   params,
   isLoading,
+  isDepositsLoading,
 }: Omit<ProposalOverviewProps, "votesInfo">) => {
   const navigate = useInternalNavigate();
 
@@ -45,11 +46,13 @@ const DepositOverviewBody = ({
         <DepositBar
           deposit={proposalData.totalDeposit}
           minDeposit={minDeposit}
+          isDepositOrVoting
           isCompact
         />
       )}
       <DepositList
         proposalDeposits={proposalData.proposalDeposits.slice(0, 5)}
+        isDepositsLoading={isDepositsLoading}
       />
       {proposalData.proposalDeposits.length > 0 && (
         <Button

diff --git a/src/lib/pages/proposal-details/components/proposal-overview/status-summary/index.tsx b/src/lib/pages/proposal-details/components/proposal-overview/status-summary/index.tsx
@@ -34,7 +34,7 @@ export const StatusSummary = ({
   proposalData,
   ...props
 }: ProposalOverviewProps) => {
-  const isOngoing =
+  const isDepositOrVoting =
     proposalData.status === ProposalStatus.DEPOSIT_PERIOD ||
     proposalData.status === ProposalStatus.VOTING_PERIOD;
   return (
@@ -54,9 +54,9 @@ export const StatusSummary = ({
         justify="space-between"
       >
         <Flex align="center" gap={2} whiteSpace="nowrap">
-          {isOngoing && <ActiveDot />}
+          {isDepositOrVoting && <ActiveDot />}
           <Text variant="body1" textColor="text.main" fontWeight={700}>
-            {isOngoing ? "Current" : "Final"} proposal result:
+            {isDepositOrVoting ? "Current" : "Final"} proposal result:
           </Text>
           <SummaryStatusChip proposalData={proposalData} {...props} />
         </Flex>

diff --git a/src/lib/pages/proposal-details/components/proposal-top/index.tsx b/src/lib/pages/proposal-details/components/proposal-top/index.tsx
@@ -1,6 +1,6 @@
 import { Flex, Heading, Text } from "@chakra-ui/react";
 
-import { useMobile } from "lib/app-provider";
+import { useMobile, useTierConfig } from "lib/app-provider";
 import { Breadcrumb } from "lib/components/Breadcrumb";
 import { DotSeparator } from "lib/components/DotSeparator";
 import { Expedited } from "lib/components/Expedited";
@@ -18,13 +18,14 @@ interface ProposalTopProps {
 }
 
 export const ProposalTop = ({ proposalData }: ProposalTopProps) => {
+  const isFullTier = useTierConfig() === "full";
   const isMobile = useMobile();
 
   const isDepositOrVoting =
     proposalData.status === ProposalStatus.DEPOSIT_PERIOD ||
     proposalData.status === ProposalStatus.VOTING_PERIOD;
   return (
-    <Flex direction="column" mb={6} gap={5}>
+    <Flex direction="column" gap={5}>
       <Breadcrumb
         items={[
           {
@@ -114,37 +115,42 @@ export const ProposalTop = ({ proposalData }: ProposalTopProps) => {
                 </Text>
               )}
             </Flex>
-            <Flex>
+            {proposalData.createdHeight ? (
               <Flex
                 gap={{ base: 0, md: 2 }}
                 direction={{ base: "column", md: "row" }}
                 alignItems={{ base: "flex-start", md: "center" }}
               >
-                {proposalData.createdHeight && (
-                  <Flex gap={2} alignItems="center">
-                    <Text color="text.dark" variant="body2" fontWeight={500}>
-                      Created Height:
-                    </Text>
-                    <ExplorerLink
-                      type="block_height"
-                      value={proposalData.createdHeight.toString()}
-                      showCopyOnHover
-                    >
-                      {proposalData.createdHeight.toString()}
-                    </ExplorerLink>
-                    {!isMobile && <DotSeparator />}
-                  </Flex>
-                )}
+                <Flex gap={2} alignItems="center">
+                  <Text color="text.dark" variant="body2" fontWeight={500}>
+                    Created Height:
+                  </Text>
+                  <ExplorerLink
+                    type="block_height"
+                    value={proposalData.createdHeight.toString()}
+                    showCopyOnHover
+                  >
+                    {proposalData.createdHeight.toString()}
+                  </ExplorerLink>
+                  {!isMobile && <DotSeparator />}
+                </Flex>
                 <Text variant="body2" color="text.dark">
                   {formatUTC(proposalData.submitTime)}
                 </Text>
               </Flex>
-            </Flex>
+            ) : (
+              <Text color="text.dark" variant="body2">
+                <span style={{ fontWeight: 500 }}>Created Time: </span>
+                {formatUTC(proposalData.submitTime)}
+              </Text>
+            )}
           </Flex>
         </Flex>
         <ViewProposalJson id={proposalData.id} status={proposalData.status} />
       </Flex>
-      <ProposalInfo data={proposalData} />
+      {(isFullTier || isDepositOrVoting) && (
+        <ProposalInfo data={proposalData} />
+      )}
     </Flex>
   );
 };
diff --git a/src/lib/pages/proposal-details/components/proposal-top/proposal-info/TimeInfoItem.tsx b/src/lib/pages/proposal-details/components/proposal-top/proposal-info/TimeInfoItem.tsx
@@ -51,14 +51,12 @@ export const TimeInfoItem = ({ data }: TimeInfoItemProps) => {
         <>
           <InfoItem label="Deposit Start">
             <Text variant="body2" color="text.dark">
-              {data.submitTime ? `${formatUTC(data.submitTime)}` : "N/A"}
+              {formatUTC(data.submitTime)}
             </Text>
           </InfoItem>
           <InfoItem label="Deposit End">
             <Text variant="body2" color="text.dark">
-              {data.depositEndTime
-                ? `${formatUTC(data.depositEndTime)}`
-                : "N/A"}
+              {formatUTC(data.depositEndTime)}
             </Text>
           </InfoItem>
         </>

diff --git a/src/lib/pages/proposal-details/components/proposal-top/proposal-info/index.tsx b/src/lib/pages/proposal-details/components/proposal-top/proposal-info/index.tsx
@@ -13,12 +13,13 @@ interface ProposalStatusProps {
 
 export const ProposalInfo = ({ data }: ProposalStatusProps) => (
   <Flex
-    background="gray.900"
-    borderRadius="8px"
+    direction={{ base: "column", lg: "row" }}
+    gap={{ base: 3, lg: 8 }}
     px={4}
     py={3}
-    gap={{ base: 3, lg: 8 }}
-    direction={{ base: "column", lg: "row" }}
+    mb={6}
+    borderRadius="8px"
+    background="gray.900"
   >
     <InfoItem label="Proposal Status">
       <Flex minW="110px">