fix: bugbash proposal lite

CHANGELOG.md

@@ -101,6 +101,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#985](https://github.com/alleslabs/celatone-frontend/pull/985) Fix proposal details lite version bugs
 - [#987](https://github.com/alleslabs/celatone-frontend/pull/987) Fix bug bash (query redirection, module button color, modal open/close, migration contract radio button, txs count in account detail)
 - [#989](https://github.com/alleslabs/celatone-frontend/pull/989) Change tomcat endpoints
 - [#984](https://github.com/alleslabs/celatone-frontend/pull/984) Exclude non block number from searching block in lite

src/lib/pages/proposal-details/components/VoteQuorumCircle.tsx

@@ -1,4 +1,5 @@
 import { Circle, Heading, Text } from "@chakra-ui/react";
+import { isNull } from "lodash";
 
 import type { Nullable, Ratio } from "lib/types";
 import { formatPrettyPercent } from "lib/utils";
@@ -64,7 +65,7 @@ export const VoteQuorumCircle = ({
           fontWeight={600}
           color={totalRatio ? "text.main" : "text.dark"}
         >
-          {totalRatio ? formatPrettyPercent(totalRatio, 1) : "N/A"}
+          {!isNull(totalRatio) ? formatPrettyPercent(totalRatio, 1) : "N/A"}
         </Heading>
       </Circle>
     </Circle>

src/lib/pages/proposal-details/components/proposal-overview/ProposalMessages.tsx

@@ -69,7 +69,7 @@ export const ProposalMessages = ({ messages }: ProposalMessagesProps) => {
         >
           {messages.map((item, i) => (
             <ProposalMessageCard
-              key={`msg-${JSON.stringify(item)}`}
+              key={`msg-${i.toString()}-${JSON.stringify(item)}`}
               header={`[${i}] ${item["@type"]}`}
               jsonString={jsonPrettify(JSON.stringify(item))}
             />

src/lib/pages/proposal-details/components/proposal-overview/status-summary/SummaryStatusTime.tsx

@@ -22,6 +22,8 @@ const getResolvedPrefix = (status: ProposalStatus) => {
 };
 
 export const SummaryStatusTime = ({ proposalData }: StatusTimeProps) => {
+  const endTime = proposalData.resolvedTimestamp ?? proposalData.votingEndTime;
+
   if (proposalData.status === ProposalStatus.DEPOSIT_PERIOD)
     return (
       <Text variant="body2">
@@ -46,9 +48,7 @@ export const SummaryStatusTime = ({ proposalData }: StatusTimeProps) => {
     <Text variant="body2" color="text.dark">
       {getResolvedPrefix(proposalData.status)}
       {" at "}
-      {proposalData.resolvedTimestamp
-        ? formatUTC(proposalData.resolvedTimestamp)
-        : "N/A"}
+      {endTime ? formatUTC(endTime) : "N/A"}
     </Text>
   );
 };

src/lib/pages/proposal-details/components/proposal-top/index.tsx

@@ -71,14 +71,15 @@ export const ProposalTop = ({ proposalData }: ProposalTopProps) => {
             <Flex
               gap={{ base: 0, md: 2 }}
               direction={{ base: "column", md: "row" }}
-              align={{ base: "start", md: "center" }}
+              align="start"
             >
               <Text
                 variant="body2"
                 color="text.dark"
                 fontWeight={500}
                 whiteSpace="nowrap"
                 lineHeight="24px"
+                mt="1px"
               >
                 Proposal Messages:
               </Text>
@@ -110,7 +111,7 @@ export const ProposalTop = ({ proposalData }: ProposalTopProps) => {
                   ))}
                 </Flex>
               ) : (
-                <Text variant="body2" color="text.dark">
+                <Text variant="body2" color="text.dark" mt="3px">
                   (No Message)
                 </Text>
               )}

src/lib/pages/proposal-details/components/vote-details/deposit-period/DepositPeriodSection.tsx

@@ -89,6 +89,7 @@ export const DepositPeriodSection = ({
           <DepositorsTable
             depositors={proposalData.proposalDeposits}
             isDepositsLoading={isDepositsLoading}
+            showTransaction={isFullTier}
             isPruned={!isFullTier && !isDepositOrVoting}
           />
         </>

src/lib/pages/proposal-details/components/vote-details/deposit-period/depositors-table/DepositorsTableHeader.tsx

@@ -5,15 +5,21 @@ import { TableHeader } from "lib/components/table";
 
 interface DepositorsTableHeaderProps {
   templateColumns: GridProps["templateColumns"];
+  showTransaction: boolean;
 }
 
 export const DepositorsTableHeader = ({
   templateColumns,
+  showTransaction,
 }: DepositorsTableHeaderProps) => (
   <Grid templateColumns={templateColumns} minW="min-content">
     <TableHeader>Depositor</TableHeader>
-    <TableHeader>Transaction Hash</TableHeader>
-    <TableHeader>Timestamp</TableHeader>
-    <TableHeader textAlign="right">Deposited Amount</TableHeader>
+    {showTransaction && (
+      <>
+        <TableHeader>Transaction Hash</TableHeader>
+        <TableHeader>Timestamp</TableHeader>
+      </>
+    )}
+    <TableHeader>Deposited Amount</TableHeader>
   </Grid>
 );

src/lib/pages/proposal-details/components/vote-details/deposit-period/depositors-table/DepositorsTableRow.tsx

@@ -9,11 +9,13 @@ import { dateFromNow, formatUTC } from "lib/utils";
 interface DepositorsTableRowProps {
   proposalDeposit: ProposalDeposit;
   templateColumns: string;
+  showTransaction: boolean;
 }
 
 export const DepositorsTableRow = ({
   proposalDeposit,
   templateColumns,
+  showTransaction,
 }: DepositorsTableRowProps) => (
   <Grid
     className="copier-wrapper"
@@ -27,34 +29,40 @@ export const DepositorsTableRow = ({
         showCopyOnHover
       />
     </TableRow>
+    {showTransaction && (
+      <>
+        <TableRow>
+          {proposalDeposit.txHash ? (
+            <ExplorerLink
+              type="tx_hash"
+              value={proposalDeposit.txHash.toUpperCase()}
+              showCopyOnHover
+            />
+          ) : (
+            <Text variant="body3" textColor="text.dark">
+              N/A
+            </Text>
+          )}
+        </TableRow>
+        <TableRow>
+          {proposalDeposit.timestamp ? (
+            <Flex direction="column">
+              <Text variant="body3">
+                {formatUTC(proposalDeposit.timestamp)}
+              </Text>
+              <Text variant="body3" color="text.dark" mt="2px">
+                ({dateFromNow(proposalDeposit.timestamp)})
+              </Text>
+            </Flex>
+          ) : (
+            <Text variant="body3" color="text.dark">
+              N/A
+            </Text>
+          )}
+        </TableRow>
+      </>
+    )}
     <TableRow>
-      {proposalDeposit.txHash ? (
-        <ExplorerLink
-          type="tx_hash"
-          value={proposalDeposit.txHash.toUpperCase()}
-          showCopyOnHover
-        />
-      ) : (
-        <Text variant="body3" textColor="text.dark">
-          N/A
-        </Text>
-      )}
-    </TableRow>
-    <TableRow>
-      {proposalDeposit.timestamp ? (
-        <Flex direction="column">
-          <Text variant="body3">{formatUTC(proposalDeposit.timestamp)}</Text>
-          <Text variant="body3" color="text.dark" mt="2px">
-            ({dateFromNow(proposalDeposit.timestamp)})
-          </Text>
-        </Flex>
-      ) : (
-        <Text variant="body3" color="text.dark">
-          N/A
-        </Text>
-      )}
-    </TableRow>
-    <TableRow justifyContent="flex-end">
       <DepositAmounts deposit={proposalDeposit} />
     </TableRow>
   </Grid>

src/lib/pages/proposal-details/components/vote-details/deposit-period/depositors-table/index.tsx

@@ -10,16 +10,18 @@ import { DepositorsTableRow } from "./DepositorsTableRow";
 interface DepositorsTableProps {
   depositors: ProposalDeposit[];
   isDepositsLoading: boolean;
+  showTransaction: boolean;
   isPruned: boolean;
 }
 
-const templateColumns = `1.5fr 1.5fr 2fr 1fr`;
-
 export const DepositorsTable = ({
   depositors,
   isDepositsLoading,
+  showTransaction,
   isPruned,
 }: DepositorsTableProps) => {
+  const templateColumns = showTransaction ? "1.5fr 1.5fr 2fr 1fr" : "240px 1fr";
+
   if (isDepositsLoading) return <Loading />;
 
   if (isPruned)
@@ -32,12 +34,16 @@ export const DepositorsTable = ({
 
   return (
     <TableContainer>
-      <DepositorsTableHeader templateColumns={templateColumns} />
+      <DepositorsTableHeader
+        templateColumns={templateColumns}
+        showTransaction={showTransaction}
+      />
       {depositors.map((each) => (
         <DepositorsTableRow
           key={each.depositor}
           proposalDeposit={each}
           templateColumns={templateColumns}
+          showTransaction={showTransaction}
         />
       ))}
     </TableContainer>

src/lib/services/proposal/lcd.ts

@@ -89,4 +89,6 @@ export const getProposalVotesInfoLcd = async (
       `${endpoint}/cosmos/gov/v1/proposals/${encodeURIComponent(id)}/tally`
     ),
     axios.get(`${endpoint}/cosmos/staking/v1beta1/pool`),
-  ]).then((data) => parseWithError(zProposalVotesInfoResponseLcd, data));
+  ]).then(([tallyRes, poolRes]) =>
+    parseWithError(zProposalVotesInfoResponseLcd, [tallyRes.data, poolRes.data])
+  );

src/lib/services/types/proposal.ts

@@ -147,10 +147,12 @@ export const zProposalVotesInfoResponse = z
 export const zProposalVotesInfoResponseLcd = z
   .tuple([
     z.object({
-      yes_count: zBig,
-      abstain_count: zBig,
-      no_count: zBig,
-      no_with_veto_count: zBig,
+      tally: z.object({
+        yes_count: zBig,
+        abstain_count: zBig,
+        no_count: zBig,
+        no_with_veto_count: zBig,
+      }),
     }),
     z.object({
       pool: z.object({
@@ -160,10 +162,10 @@ export const zProposalVotesInfoResponseLcd = z
     }),
   ])
   .transform<ProposalVotesInfo>(([tally, pool]) => ({
-    yes: tally.yes_count,
-    abstain: tally.abstain_count,
-    no: tally.no_count,
-    noWithVeto: tally.no_with_veto_count,
+    yes: tally.tally.yes_count,
+    abstain: tally.tally.abstain_count,
+    no: tally.tally.no_count,
+    noWithVeto: tally.tally.no_with_veto_count,
     totalVotingPower: pool.pool.bonded_tokens,
   }));
 
@@ -232,8 +234,8 @@ export const zProposalDataResponseLcd = z
     submit_time: zUtcDate,
     deposit_end_time: zUtcDate,
     total_deposit: zCoin.array(),
-    voting_start_time: zUtcDate,
-    voting_end_time: zUtcDate,
+    voting_start_time: zUtcDate.nullable(),
+    voting_end_time: zUtcDate.nullable(),
     metadata: z.string(),
     title: z.string(),
     summary: z.string(),