feat: refactor proposal table

CHANGELOG.md

@@ -52,6 +52,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#392](https://github.com/alleslabs/celatone-frontend/pull/392) Refactor proposal table and fix empty state of the proposal list table
 - [#374](https://github.com/alleslabs/celatone-frontend/pull/374) Remove testnet, mainnet concepts and use permission from params
 - [#369](https://github.com/alleslabs/celatone-frontend/pull/369) Implement Wasm feature from config
 - [#359](https://github.com/alleslabs/celatone-frontend/pull/359) Remove hardcode constant (length) and use from config

src/lib/components/table/proposals/ProposalsTable.tsx

@@ -20,16 +20,21 @@ export const ProposalsTable = ({
   if (!proposals?.length) return emptyState;
 
   const templateColumns =
-    "100px minmax(300px, 1fr) 150px 280px 180px 190px 160px";
+    "100px minmax(360px, 2fr) minmax(150px, 1fr) 330px 180px 160px";
+  const boxShadow = "16px 0 32px -10px";
 
   return (
     <TableContainer>
-      <ProposalsTableHeader templateColumns={templateColumns} />
+      <ProposalsTableHeader
+        templateColumns={templateColumns}
+        boxShadow={boxShadow}
+      />
       {proposals.map((proposal) => (
         <ProposalsTableRow
           key={proposal.proposalId}
           proposal={proposal}
           templateColumns={templateColumns}
+          boxShadow={boxShadow}
         />
       ))}
     </TableContainer>

src/lib/components/table/proposals/ProposalsTableHeader.tsx

@@ -1,20 +1,31 @@
-import type { GridProps } from "@chakra-ui/react";
-import { Grid } from "@chakra-ui/react";
+import type { DividerProps, GridProps } from "@chakra-ui/react";
+import { Grid, Text } from "@chakra-ui/react";
 
-import { TableHeader } from "../tableComponents";
+import { TableHeader, TableHeaderFreeze } from "../tableComponents";
 
 export const ProposalsTableHeader = ({
   templateColumns,
+  boxShadow,
 }: {
   templateColumns: GridProps["templateColumns"];
-}) => (
-  <Grid templateColumns={templateColumns}>
-    <TableHeader>Proposal ID</TableHeader>
-    <TableHeader>Proposal Title</TableHeader>
-    <TableHeader textAlign="center">Status</TableHeader>
-    <TableHeader>Voting ends</TableHeader>
-    <TableHeader>Resolved Block Height</TableHeader>
-    <TableHeader>Type</TableHeader>
-    <TableHeader>Proposer</TableHeader>
-  </Grid>
-);
+  boxShadow: DividerProps["boxShadow"];
+}) => {
+  // TODO - Revisit split columnsWidth
+  const columnsWidth = templateColumns?.toString().split(" ");
+  return (
+    <Grid templateColumns={templateColumns} minW="min-content">
+      <TableHeaderFreeze left="0">Proposal ID</TableHeaderFreeze>
+      <TableHeaderFreeze
+        left={columnsWidth && columnsWidth[0]}
+        boxShadow={boxShadow}
+        color="gray.800"
+      >
+        <Text color="text.main">Proposal Title/Type</Text>
+      </TableHeaderFreeze>
+      <TableHeader textAlign="center">Status</TableHeader>
+      <TableHeader>Voting ends</TableHeader>
+      <TableHeader>Resolved Block Height</TableHeader>
+      <TableHeader>Proposed By</TableHeader>
+    </Grid>
+  );
+};

src/lib/components/table/proposals/ProposalsTableRow.tsx

@@ -1,42 +1,95 @@
-import type { GridProps } from "@chakra-ui/react";
-import { Grid, Text } from "@chakra-ui/react";
+import type { DividerProps, GridProps } from "@chakra-ui/react";
+import { Grid } from "@chakra-ui/react";
 
-import { TableRow } from "../tableComponents";
+import { TableRow, TableRowFreeze } from "../tableComponents";
+import { useCelatoneApp } from "lib/app-provider";
 import { ExplorerLink } from "lib/components/ExplorerLink";
+import { StopPropagationBox } from "lib/components/StopPropagationBox";
 import { Proposer } from "lib/components/table/proposals/Proposer";
-import type { Proposal } from "lib/types";
+import { openNewTab } from "lib/hooks";
+import { AmpTrackMintscan } from "lib/services/amplitude";
+import type { Option, Proposal } from "lib/types";
 import { ProposalStatus } from "lib/types";
 
+import { ProposalTextCell } from "./ProposalTextCell";
 import { ResolvedHeight } from "./ResolvedHeight";
 import { StatusChip } from "./StatusChip";
 import { VotingEndTime } from "./VotingEndTime";
 
 export interface ProposalsTableRowProps {
   proposal: Proposal;
   templateColumns: GridProps["templateColumns"];
+  boxShadow: DividerProps["boxShadow"];
 }
 
 export const ProposalsTableRow = ({
   proposal,
   templateColumns,
+  boxShadow,
 }: ProposalsTableRowProps) => {
+  const {
+    chainConfig: {
+      explorerLink: { proposal: explorerProposal },
+    },
+  } = useCelatoneApp();
+
+  // TODO - Revisit split columnsWidth
+  const columnsWidth = templateColumns?.toString().split(" ");
   const isDepositFailed = proposal.status === ProposalStatus.DEPOSIT_FAILED;
   const isDepositOrVoting =
     proposal.status === ProposalStatus.DEPOSIT_PERIOD ||
     proposal.status === ProposalStatus.VOTING_PERIOD;
+
+  const hoverBg = (): Option<string> => {
+    if (proposal.isExpedited && isDepositOrVoting) return "primary.background";
+    return isDepositFailed ? undefined : "gray.900";
+  };
+
   return (
-    <Grid templateColumns={templateColumns}>
-      <TableRow>
+    <Grid
+      templateColumns={templateColumns}
+      minW="min-content"
+      cursor={isDepositFailed ? "default" : "pointer"}
+      _hover={{ "> div": { bgColor: hoverBg } }}
+      onClick={
+        !isDepositFailed
+          ? () => {
+              AmpTrackMintscan("proposal-detail", {
+                type: proposal.type,
+                status: proposal.status,
+              });
+              openNewTab(
+                `${explorerProposal}/${proposal.proposalId.toString()}`
+              );
+            }
+          : undefined
+      }
+    >
+      <TableRowFreeze left="0">
         <ExplorerLink
           isReadOnly={isDepositFailed}
           type="proposal_id"
           value={proposal.proposalId.toString()}
           showCopyOnHover
+          ampCopierSection="proposal-list"
         />
-      </TableRow>
-      <TableRow>{proposal.title}</TableRow>
+      </TableRowFreeze>
+      <TableRowFreeze
+        left={columnsWidth && columnsWidth[0]}
+        boxShadow={boxShadow}
+        color="gray.800"
+      >
+        <ProposalTextCell
+          title={proposal.title}
+          type={proposal.type}
+          isExpedited={proposal.isExpedited}
+          isDepositOrVoting={isDepositOrVoting}
+        />
+      </TableRowFreeze>
       <TableRow justifyContent="center">
-        <StatusChip status={proposal.status} />
+        <StopPropagationBox>
+          <StatusChip status={proposal.status} />
+        </StopPropagationBox>
       </TableRow>
       <TableRow>
         <VotingEndTime
@@ -46,16 +99,19 @@ export const ProposalsTableRow = ({
         />
       </TableRow>
       <TableRow>
-        <ResolvedHeight
-          resolvedHeight={proposal.resolvedHeight}
-          isDepositOrVoting={isDepositOrVoting}
-        />
-      </TableRow>
-      <TableRow>
-        <Text color="text.dark">{proposal.type}</Text>
+        <StopPropagationBox>
+          <ResolvedHeight
+            resolvedHeight={proposal.resolvedHeight}
+            isDepositOrVoting={isDepositOrVoting}
+            amptrackSection="proposal-list"
+          />
+        </StopPropagationBox>
       </TableRow>
       <TableRow>
-        <Proposer proposer={proposal.proposer} />
+        <Proposer
+          proposer={proposal.proposer}
+          amptrackSection="proposal-list"
+        />
       </TableRow>
     </Grid>
   );

src/lib/pages/proposals/index.tsx

@@ -9,6 +9,8 @@ import InputWithIcon from "lib/components/InputWithIcon";
 import PageContainer from "lib/components/PageContainer";
 import { Pagination } from "lib/components/pagination";
 import { usePaginator } from "lib/components/pagination/usePaginator";
+import { EmptyState } from "lib/components/state";
+import { ProposalsTable } from "lib/components/table";
 import { Tooltip } from "lib/components/Tooltip";
 import { AmpEvent, AmpTrack } from "lib/services/amplitude";
 import {
@@ -19,7 +21,6 @@ import type { ProposalStatus, ProposalType, Addr, Option } from "lib/types";
 
 import { ProposalStatusFilter } from "./components/ProposalStatusFilter";
 import { ProposalTypeFilter } from "./components/ProposalTypeFilter";
-import { ProposalTable } from "./table/ProposalTable";
 
 const Proposals = () => {
   const { currentChainId } = useCelatoneApp();
@@ -164,7 +165,28 @@ const Proposals = () => {
           />
         </Flex>
       </Flex>
-      <ProposalTable proposals={proposals} isLoading={isLoading} />
+      <ProposalsTable
+        proposals={proposals}
+        isLoading={isLoading}
+        emptyState={
+          statuses.length > 0 ||
+          types.length > 0 ||
+          search.trim().length > 0 ||
+          proposer !== undefined ? (
+            <EmptyState
+              imageVariant="not-found"
+              message="No matches found. Please double-check your input and select correct network."
+              withBorder
+            />
+          ) : (
+            <EmptyState
+              imageVariant="empty"
+              message="There are no proposals on this network."
+              withBorder
+            />
+          )
+        }
+      />
       {countProposals > 10 && (
         <Pagination
           currentPage={currentPage}