Merge pull request #782 from alleslabs/feat/cfe-214-period-detail

feat: proposal details on vote tabs

CHANGELOG.md

@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#782](https://github.com/alleslabs/celatone-frontend/pull/782) Show proposal details on vote details section tabs
 - [#779](https://github.com/alleslabs/celatone-frontend/pull/779) Proposal period overview voting - no with veto alert
 - [#778](https://github.com/alleslabs/celatone-frontend/pull/778) Proposal period overview voting
 - [#775](https://github.com/alleslabs/celatone-frontend/pull/775) Proposal period overview deposit

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

@@ -2,6 +2,7 @@ import { Spinner } from "@chakra-ui/react";
 import dayjs from "dayjs";
 import { useRouter } from "next/router";
 import plur from "plur";
+import type { ReactNode } from "react";
 import { useEffect, useState } from "react";
 
 import { getCurrentDate } from "lib/utils";
@@ -14,11 +15,12 @@ const formatNumber = (num: number) =>
 
 interface CountdownProps {
   endTime: Date;
+  isString: boolean;
 }
 
-export const Countdown = ({ endTime }: CountdownProps) => {
+export const Countdown = ({ endTime, isString }: CountdownProps) => {
   const router = useRouter();
-  const [time, setTime] = useState<JSX.Element>(
+  const [time, setTime] = useState<ReactNode>(
     <Spinner as="span" boxSize={2} mx={2} />
   );
 
@@ -31,7 +33,11 @@ export const Countdown = ({ endTime }: CountdownProps) => {
       const duration = dayjs.duration(diffTime, "seconds");
 
       const days = duration.days();
-      const timestamp = (
+      const timestamp = isString ? (
+        `${
+          days > 0 && `${days.toString()} ${plur("day", days)} `
+        }${duration.hours()}:${formatNumber(duration.minutes())}:${formatNumber(duration.seconds())}`
+      ) : (
         <>
           {days > 0 && (
             <>
@@ -49,7 +55,7 @@ export const Countdown = ({ endTime }: CountdownProps) => {
       setTime(timestamp);
     }, 1000);
     return () => clearInterval(intervalId);
-  }, [endTime, router]);
+  }, [endTime, isString, router]);
 
   return time;
 };

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

@@ -25,7 +25,8 @@ export const SummaryStatusTime = ({ proposalData }: StatusTimeProps) => {
   if (proposalData.status === ProposalStatus.DEPOSIT_PERIOD)
     return (
       <Text variant="body2" textAlign={{ base: "end", md: "start" }}>
-        Deposit ends in <Countdown endTime={proposalData.depositEndTime} />
+        Deposit ends in{" "}
+        <Countdown endTime={proposalData.depositEndTime} isString={false} />
       </Text>
     );
 
@@ -34,7 +35,7 @@ export const SummaryStatusTime = ({ proposalData }: StatusTimeProps) => {
       <Text variant="body2" textAlign={{ base: "end", md: "start" }}>
         Voting ends in{" "}
         {proposalData.votingEndTime ? (
-          <Countdown endTime={proposalData.votingEndTime} />
+          <Countdown endTime={proposalData.votingEndTime} isString={false} />
         ) : (
           "N/A"
         )}

src/lib/pages/proposal-details/components/proposal-stepper/StepHelperText.tsx

@@ -0,0 +1,69 @@
+/* eslint-disable sonarjs/cognitive-complexity */
+import { Text } from "@chakra-ui/react";
+
+import { Countdown } from "../proposal-overview/status-summary/Countdown";
+import type { ProposalData } from "lib/types";
+import { ProposalStatus } from "lib/types";
+import { formatUTC } from "lib/utils";
+
+interface StepperHelperTextProps {
+  step: number;
+  proposalData: ProposalData;
+}
+
+const StepperHelperTextBody = ({
+  step,
+  proposalData,
+}: StepperHelperTextProps) => {
+  // Deposit Period
+  if (step === 1) {
+    if (proposalData.status === ProposalStatus.DEPOSIT_FAILED)
+      return "The proposal is rejected as it did not meet the required deposit";
+
+    if (
+      proposalData.status === ProposalStatus.CANCELLED &&
+      proposalData.votingTime === null
+    )
+      return `The proposal is cancelled at ${proposalData.resolvedTimestamp ? formatUTC(proposalData.resolvedTimestamp) : "N/A"}`;
+
+    if (proposalData.status === ProposalStatus.DEPOSIT_PERIOD)
+      return (
+        <>
+          Deposit ends in{" "}
+          <Countdown endTime={proposalData.depositEndTime} isString />
+        </>
+      );
+
+    return `The proposal passed the deposit period at ${proposalData.votingTime ? formatUTC(proposalData.votingTime) : "N/A"}`;
+  }
+
+  // Voting Period
+  if (proposalData.status === ProposalStatus.DEPOSIT_FAILED)
+    return "The proposal is rejected as it did not meet the required deposit";
+
+  if (proposalData.status === ProposalStatus.CANCELLED)
+    return `The proposal is cancelled during the ${proposalData.votingTime === null ? "deposit" : "voting"}  period`;
+
+  if (proposalData.status === ProposalStatus.DEPOSIT_PERIOD)
+    return "Proposal proceeds to voting period after meeting deposit requirement";
+
+  if (proposalData.status === ProposalStatus.VOTING_PERIOD)
+    return (
+      <>
+        Voting ends in{" "}
+        {proposalData.votingEndTime ? (
+          <Countdown endTime={proposalData.votingEndTime} isString />
+        ) : (
+          "N/A"
+        )}
+      </>
+    );
+
+  return `The proposal ended with the "${proposalData.status.replace(/([A-Z])/g, " $1").trim()}" result`;
+};
+
+export const StepperHelperText = (props: StepperHelperTextProps) => (
+  <Text variant="body3" color="text.dark" ml={8} textAlign="start">
+    <StepperHelperTextBody {...props} />
+  </Text>
+);

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

@@ -3,8 +3,9 @@ import { Flex, Spacer, Text } from "@chakra-ui/react";
 import { ProgressBadge } from "../ProgressBadge";
 import type { ProposalData } from "lib/types";
 
+import { StepperHelperText } from "./StepHelperText";
 import { StepIcon } from "./StepIcon";
-import { getProgressBadgeProps, getStepperDescription } from "./utils";
+import { getProgressBadgeProps } from "./utils";
 
 export interface ProposalStepperProps {
   step: number;
@@ -17,19 +18,17 @@ export const ProposalStepper = ({
   proposalData,
   isOverview = false,
 }: ProposalStepperProps) => (
-  <Flex direction="column" gap={1}>
+  <Flex direction="column" gap={1} w="full" align="start">
     <Flex w="full" gap={2} alignItems="center">
       <StepIcon step={step} proposalData={proposalData} />
-      <Text variant="body1" fontWeight={700}>
+      <Text variant="body1" fontWeight={700} textAlign="start">
         {step === 1 ? "Deposit Period" : "Voting Period"}
       </Text>
       <Spacer />
       <ProgressBadge {...getProgressBadgeProps(step, proposalData)} />
     </Flex>
     {!isOverview && (
-      <Text variant="body3" color="text.dark" ml={8}>
-        {getStepperDescription()}
-      </Text>
+      <StepperHelperText step={step} proposalData={proposalData} />
     )}
   </Flex>
 );

src/lib/pages/proposal-details/components/vote-details/VoteDetailsAccordionItem.tsx

@@ -0,0 +1,36 @@
+import {
+  AccordionButton,
+  AccordionIcon,
+  AccordionItem,
+  AccordionPanel,
+} from "@chakra-ui/react";
+import type { ReactNode } from "react";
+
+import { ProposalStepper } from "../proposal-stepper";
+import type { ProposalData } from "lib/types";
+
+export const VoteDetailsAccordionItem = ({
+  step,
+  proposalData,
+  children,
+}: {
+  step: number;
+  proposalData: ProposalData;
+  children: ReactNode;
+}) => (
+  <AccordionItem borderTop="1px solid" borderColor="gray.700">
+    <AccordionButton py={3} px={0}>
+      <ProposalStepper step={step} proposalData={proposalData} />
+      <AccordionIcon color="gray.600" ml="auto" />
+    </AccordionButton>
+    <AccordionPanel
+      bg="transparent"
+      py={3}
+      px={0}
+      borderTop="1px solid"
+      borderColor="gray.700"
+    >
+      {children}
+    </AccordionPanel>
+  </AccordionItem>
+);

src/lib/pages/proposal-details/components/vote-details/VoteDetailTab.tsx → src/lib/pages/proposal-details/components/vote-details/VoteDetailsTab.tsx

@@ -1,26 +1,19 @@
 import type { TabProps } from "@chakra-ui/react";
 import { Button, useTab, useMultiStyleConfig } from "@chakra-ui/react";
 
-import type { Nullable } from "lib/types";
+import { ProposalStepper } from "../proposal-stepper";
+import type { ProposalData } from "lib/types";
 
-import { ProposalStepper } from "./ProposalStepper";
-
-interface VoteDetailTabProps extends TabProps {
-  count?: Nullable<number | string>;
-  isLoading?: boolean;
-  title: string;
-  description: string;
+interface VoteDetailsTabProps extends TabProps {
   step: number;
+  proposalData: ProposalData;
 }
 
-export const VoteDetailTab = ({
-  count,
-  isLoading,
-  title,
-  description,
+export const VoteDetailsTab = ({
   step,
+  proposalData,
   ...restProps
-}: VoteDetailTabProps) => {
+}: VoteDetailsTabProps) => {
   const tabProps = useTab({ ...restProps });
   const styles = useMultiStyleConfig("Tabs", tabProps);
 
@@ -29,22 +22,17 @@ export const VoteDetailTab = ({
       __css={styles.tab}
       display="flex"
       w="full"
-      alignItems="center"
-      fontSize="14px"
-      fontWeight={700}
-      lineHeight="24px"
-      letterSpacing="0.4px"
-      variant="ghost-gray"
       mb={0}
       py={3}
       borderRadius="8px 8px 0px 0px"
+      color="text.main"
       sx={{
         "&[aria-selected=true]": {
           background: "gray.800",
           border: "1px solid",
           borderColor: "gray.700",
           opacity: "100%",
-          borderBottomColor: "transparent",
+          borderBottomColor: "gray.800",
         },
         "&[aria-selected=false]": {
           background: "transparent",
@@ -59,7 +47,7 @@ export const VoteDetailTab = ({
       }}
       {...tabProps}
     >
-      <ProposalStepper title={title} description={description} step={step} />
+      <ProposalStepper step={step} proposalData={proposalData} />
     </Button>
   );
 };