feat: depositor list

CHANGELOG.md

@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#796](https://github.com/alleslabs/celatone-frontend/pull/796) Depositors list in vote details section
 - [#793](https://github.com/alleslabs/celatone-frontend/pull/793) Proposal Validator Votes Table
 - [#788](https://github.com/alleslabs/celatone-frontend/pull/788) Add voting power chart component
 - [#790](https://github.com/alleslabs/celatone-frontend/pull/790) Handling period tab condition

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

@@ -0,0 +1,30 @@
+import { Flex, Text } from "@chakra-ui/react";
+
+import { TokenImageRender } from "lib/components/token";
+import type { ProposalDeposit } from "lib/types";
+import { formatUTokenWithPrecision, getTokenLabel } from "lib/utils";
+
+interface DepositAmountsProps {
+  deposit: ProposalDeposit;
+}
+
+export const DepositAmounts = ({ deposit }: DepositAmountsProps) => (
+  <div>
+    {deposit.amount.map((token) => (
+      <Flex key={token.denom} alignItems="center" gap={2}>
+        <Text variant="body2">
+          <Text as="span" fontWeight={700} mr={1}>
+            {formatUTokenWithPrecision(
+              token.amount,
+              token.precision ?? 0,
+              true,
+              2
+            )}
+          </Text>
+          {getTokenLabel(token.denom, token.symbol)}
+        </Text>
+        <TokenImageRender logo={token.logo} />
+      </Flex>
+    ))}
+  </div>
+);

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

@@ -1,10 +1,10 @@
-import { Flex, Text } from "@chakra-ui/react";
+import { Flex } from "@chakra-ui/react";
 
 import { useMobile } from "lib/app-provider";
 import { ExplorerLink } from "lib/components/ExplorerLink";
-import { TokenImageRender } from "lib/components/token";
 import type { ProposalDeposit } from "lib/types";
-import { formatUTokenWithPrecision, getTokenLabel } from "lib/utils";
+
+import { DepositAmounts } from "./DepositAmounts";
 
 interface DepositListProps {
   proposalDeposits: ProposalDeposit[];
@@ -27,24 +27,7 @@ export const DepositList = ({ proposalDeposits }: DepositListProps) => {
             type="user_address"
             showCopyOnHover={!isMobile}
           />
-          <div>
-            {deposit.amount.map((token) => (
-              <Flex key={token.denom} alignItems="center" gap={2}>
-                <Text variant="body2">
-                  <Text as="span" fontWeight={700} mr={1}>
-                    {formatUTokenWithPrecision(
-                      token.amount,
-                      token.precision ?? 0,
-                      true,
-                      2
-                    )}
-                  </Text>
-                  {getTokenLabel(token.denom, token.symbol)}
-                </Text>
-                <TokenImageRender logo={token.logo} />
-              </Flex>
-            ))}
-          </div>
+          <DepositAmounts deposit={deposit} />
         </Flex>
       ))}
     </div>

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

@@ -1,12 +1,30 @@
-import { Flex, Text } from "@chakra-ui/react";
+import { Box, Flex, Grid, Text } from "@chakra-ui/react";
 
+import { DepositBar } from "../../deposit-bar";
+import { ErrorFetchingProposalInfos } from "../../ErrorFetchingProposalInfos";
+import type { ProposalOverviewProps } from "../../proposal-overview";
 import { useMobile } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
+import { Loading } from "lib/components/Loading";
 import { TableTitle } from "lib/components/table";
 import { Tooltip } from "lib/components/Tooltip";
+import { extractParams } from "lib/pages/proposal-details/utils";
 
-export const DepositPeriodSection = () => {
+import { DepositorsTable } from "./depositors-table";
+
+export const DepositPeriodSection = ({
+  proposalData,
+  params,
+  isLoading,
+}: ProposalOverviewProps) => {
   const isMobile = useMobile();
+
+  if (isLoading) return <Loading my={0} />;
+
+  if (!params) return <ErrorFetchingProposalInfos isParamsOnly />;
+
+  const { minDeposit } = extractParams(params, proposalData.isExpedited);
+
   return (
     <Flex
       direction="column"
@@ -17,30 +35,57 @@ export const DepositPeriodSection = () => {
       p={isMobile ? 0 : 6}
       gap={4}
     >
-      {!isMobile && (
-        <Flex alignItems="center" justifyContent="space-between">
-          <TableTitle title="Depositors" mb={0} />
-          <Tooltip
-            label="After reaching the total deposit amount, the proposal proceeds to the voting period."
-            closeOnClick={false}
-          >
-            <Flex alignItems="center" gap={1}>
-              <Text variant="body2" color="text.dark">
+      {!isMobile ? (
+        <Grid templateColumns="1fr 1fr minmax(300px, 3fr)">
+          <TableTitle
+            title="Depositors"
+            mb={0}
+            count={proposalData.proposalDeposits.length}
+          />
+          <Box />
+          <Flex alignContent="center">
+            <Tooltip
+              label="After reaching the total deposit amount, the proposal proceeds to the voting period."
+              closeOnClick={false}
+            >
+              <Text
+                variant="body2"
+                color="text.dark"
+                fontWeight={500}
+                whiteSpace="nowrap"
+                lineHeight={1.8}
+              >
                 Total Deposited
                 <CustomIcon
                   name="info-circle-solid"
                   color="gray.600"
                   boxSize={3}
+                  my={0}
                 />
               </Text>
-            </Flex>
-          </Tooltip>
-        </Flex>
+            </Tooltip>
+            <DepositBar
+              deposit={proposalData.totalDeposit}
+              minDeposit={minDeposit}
+              isCompact={false}
+            />
+          </Flex>
+        </Grid>
+      ) : (
+        <Box
+          mt={8}
+          pb={2}
+          borderBottom="1px solid"
+          borderBottomColor="gray.700"
+        >
+          <DepositBar
+            deposit={proposalData.totalDeposit}
+            minDeposit={minDeposit}
+            isCompact
+          />
+        </Box>
       )}
-      Depositor Tables Lorem ipsum dolor sit amet consectetur adipisicing elit.
-      Porro, soluta in molestias saepe vero possimus ullam tempora eum vitae
-      provident corporis ab eligendi non facilis quae consequatur beatae quo.
-      Nostrum!
+      <DepositorsTable depositors={proposalData.proposalDeposits} />
     </Flex>
   );
 };

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

@@ -0,0 +1,26 @@
+import type { GridProps } from "@chakra-ui/react";
+import { Grid } from "@chakra-ui/react";
+
+import { useMobile } from "lib/app-provider";
+import { TableHeader } from "lib/components/table";
+
+interface DepositorsTableHeaderProps {
+  templateColumns: GridProps["templateColumns"];
+}
+
+export const DepositorsTableHeader = ({
+  templateColumns,
+}: DepositorsTableHeaderProps) => {
+  const isMobile = useMobile();
+
+  if (isMobile) return null;
+
+  return (
+    <Grid templateColumns={templateColumns} minW="min-content">
+      <TableHeader>Depositor</TableHeader>
+      <TableHeader>Transaction Hash</TableHeader>
+      <TableHeader>Timestamp</TableHeader>
+      <TableHeader textAlign="right">Deposited Amount</TableHeader>
+    </Grid>
+  );
+};

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

@@ -0,0 +1,65 @@
+import { Flex, Grid, Text } from "@chakra-ui/react";
+
+import { DepositAmounts } from "../../../DepositAmounts";
+import { useMobile } from "lib/app-provider";
+import { ExplorerLink } from "lib/components/ExplorerLink";
+import { TableRow } from "lib/components/table";
+import type { ProposalDeposit } from "lib/types";
+import { dateFromNow, formatUTC } from "lib/utils";
+
+interface DepositorsTableRowProps {
+  proposalDeposit: ProposalDeposit;
+  templateColumns: string;
+}
+
+export const DepositorsTableRow = ({
+  proposalDeposit,
+  templateColumns,
+}: DepositorsTableRowProps) => {
+  const isMobile = useMobile();
+
+  return (
+    <Grid templateColumns={templateColumns} minW="min-content">
+      <TableRow pl={isMobile ? 0 : 4}>
+        <ExplorerLink
+          type="user_address"
+          value={proposalDeposit.depositor}
+          showCopyOnHover={!isMobile}
+        />
+      </TableRow>
+      {!isMobile && (
+        <>
+          <TableRow>
+            {proposalDeposit.txHash ? (
+              <ExplorerLink
+                type="tx_hash"
+                value={proposalDeposit.txHash.toUpperCase()}
+              />
+            ) : (
+              <Text variant="body2">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" pr={isMobile ? 0 : 4}>
+        <DepositAmounts deposit={proposalDeposit} />
+      </TableRow>
+    </Grid>
+  );
+};

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

@@ -0,0 +1,33 @@
+import { TableContainer } from "@chakra-ui/react";
+
+import { useMobile } from "lib/app-provider";
+import { EmptyState } from "lib/components/state";
+import type { ProposalDeposit } from "lib/types";
+
+import { DepositorsTableHeader } from "./DepositorsTableHeader";
+import { DepositorsTableRow } from "./DepositorsTableRow";
+
+interface DepositorsTableProps {
+  depositors: ProposalDeposit[];
+}
+
+export const DepositorsTable = ({ depositors }: DepositorsTableProps) => {
+  const isMobile = useMobile();
+  const templateColumns = isMobile ? `1fr 1fr` : `1.5fr 1.5fr 2fr 1fr`;
+
+  if (depositors.length === 0)
+    return <EmptyState message="The proposal has no depositors yet." />;
+
+  return (
+    <TableContainer>
+      <DepositorsTableHeader templateColumns={templateColumns} />
+      {depositors.map((each) => (
+        <DepositorsTableRow
+          key={each.depositor}
+          proposalDeposit={each}
+          templateColumns={templateColumns}
+        />
+      ))}
+    </TableContainer>
+  );
+};

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

@@ -79,14 +79,14 @@ export const VoteDetails = ({
       allowToggle
       w="full"
       variant="transparent"
-      index={[periodTabIndex]}
+      defaultIndex={[periodTabIndex]}
     >
       <VoteDetailsAccordionItem
         step={1}
         proposalData={proposalData}
         onClick={handleTabChange(PeriodIndex.Deposit)}
       >
-        <DepositPeriodSection />
+        <DepositPeriodSection proposalData={proposalData} {...props} />
       </VoteDetailsAccordionItem>
       <VoteDetailsAccordionItem
         step={2}
@@ -126,7 +126,7 @@ export const VoteDetails = ({
         borderRadius="0px 0px 8px 8px"
       >
         <TabPanel>
-          <DepositPeriodSection />
+          <DepositPeriodSection proposalData={proposalData} {...props} />
         </TabPanel>
         <TabPanel>
           <VotingPeriod proposalData={proposalData} {...props} />