diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7b777ece2..67a703f44 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/src/lib/pages/proposals/components/ProposalTextCell.tsx b/src/lib/components/table/proposals/ProposalTextCell.tsx
similarity index 100%
rename from src/lib/pages/proposals/components/ProposalTextCell.tsx
rename to src/lib/components/table/proposals/ProposalTextCell.tsx
diff --git a/src/lib/components/table/proposals/ProposalsTable.tsx b/src/lib/components/table/proposals/ProposalsTable.tsx
index 3cf496808..452fa7889 100644
--- a/src/lib/components/table/proposals/ProposalsTable.tsx
+++ b/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 (
-
+
{proposals.map((proposal) => (
))}
diff --git a/src/lib/components/table/proposals/ProposalsTableHeader.tsx b/src/lib/components/table/proposals/ProposalsTableHeader.tsx
index ca21026f3..c789ec8f9 100644
--- a/src/lib/components/table/proposals/ProposalsTableHeader.tsx
+++ b/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"];
-}) => (
-
- Proposal ID
- Proposal Title
- Status
- Voting ends
- Resolved Block Height
- Type
- Proposer
-
-);
+ boxShadow: DividerProps["boxShadow"];
+}) => {
+ // TODO - Revisit split columnsWidth
+ const columnsWidth = templateColumns?.toString().split(" ");
+ return (
+
+ Proposal ID
+
+ Proposal Title/Type
+
+ Status
+ Voting ends
+ Resolved Block Height
+ Proposed By
+
+ );
+};
diff --git a/src/lib/components/table/proposals/ProposalsTableRow.tsx b/src/lib/components/table/proposals/ProposalsTableRow.tsx
index 36c740b65..58767b859 100644
--- a/src/lib/components/table/proposals/ProposalsTableRow.tsx
+++ b/src/lib/components/table/proposals/ProposalsTableRow.tsx
@@ -1,12 +1,17 @@
-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";
@@ -14,29 +19,77 @@ 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 => {
+ if (proposal.isExpedited && isDepositOrVoting) return "primary.background";
+ return isDepositFailed ? undefined : "gray.900";
+ };
+
return (
-
-
+ div": { bgColor: hoverBg } }}
+ onClick={
+ !isDepositFailed
+ ? () => {
+ AmpTrackMintscan("proposal-detail", {
+ type: proposal.type,
+ status: proposal.status,
+ });
+ openNewTab(
+ `${explorerProposal}/${proposal.proposalId.toString()}`
+ );
+ }
+ : undefined
+ }
+ >
+
-
- {proposal.title}
+
+
+
+
-
+
+
+
-
-
-
- {proposal.type}
+
+
+
-
+
);
diff --git a/src/lib/pages/proposals/index.tsx b/src/lib/pages/proposals/index.tsx
index 6344d0c18..c238549c4 100644
--- a/src/lib/pages/proposals/index.tsx
+++ b/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 = () => {
/>
-
+ 0 ||
+ types.length > 0 ||
+ search.trim().length > 0 ||
+ proposer !== undefined ? (
+
+ ) : (
+
+ )
+ }
+ />
{countProposals > 10 && (
;
- isLoading: boolean;
-}
-
-const TEMPLATE_COLUMNS =
- "100px minmax(360px, 2fr) minmax(150px, 1fr) 330px 180px 160px";
-const BOX_SHADOW = "16px 0 32px -10px";
-
-export const ProposalTable = ({ proposals, isLoading }: ProposalTableProps) => {
- if (isLoading) return ;
- if (!proposals)
- return (
-
- );
- if (!proposals.length)
- return (
-
- );
- return (
-
-
- {proposals.map((proposal) => (
-
- ))}
-
- );
-};
diff --git a/src/lib/pages/proposals/table/ProposalTableHeader.tsx b/src/lib/pages/proposals/table/ProposalTableHeader.tsx
deleted file mode 100644
index 973fda428..000000000
--- a/src/lib/pages/proposals/table/ProposalTableHeader.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import type { DividerProps, GridProps } from "@chakra-ui/react";
-import { Grid, Text } from "@chakra-ui/react";
-
-import { TableHeader, TableHeaderFreeze } from "lib/components/table";
-
-export const ProposalTableHeader = ({
- templateColumns,
- boxShadow,
-}: {
- templateColumns: GridProps["templateColumns"];
- boxShadow: DividerProps["boxShadow"];
-}) => {
- // TODO - Revisit split columnsWidth
- const columnsWidth = templateColumns?.toString().split(" ");
- return (
-
- Proposal ID
-
- Proposal Title/Type
-
- Status
- Voting ends
- Resolved Block Height
- Proposed By
-
- );
-};
diff --git a/src/lib/pages/proposals/table/ProposalTableRow.tsx b/src/lib/pages/proposals/table/ProposalTableRow.tsx
deleted file mode 100644
index e3657bb37..000000000
--- a/src/lib/pages/proposals/table/ProposalTableRow.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-import type { DividerProps, GridProps } from "@chakra-ui/react";
-import { Grid } from "@chakra-ui/react";
-
-import { ProposalTextCell } from "../components/ProposalTextCell";
-import { useCelatoneApp } from "lib/app-provider";
-import { ExplorerLink } from "lib/components/ExplorerLink";
-import { StopPropagationBox } from "lib/components/StopPropagationBox";
-import { TableRow, TableRowFreeze } from "lib/components/table";
-import { Proposer } from "lib/components/table/proposals/Proposer";
-import { ResolvedHeight } from "lib/components/table/proposals/ResolvedHeight";
-import { StatusChip } from "lib/components/table/proposals/StatusChip";
-import { VotingEndTime } from "lib/components/table/proposals/VotingEndTime";
-import { openNewTab } from "lib/hooks";
-import { AmpTrackMintscan } from "lib/services/amplitude";
-import type { Proposal, Option } from "lib/types";
-import { ProposalStatus } from "lib/types";
-
-interface ProposalRowProps {
- proposal: Proposal;
- templateColumns: GridProps["templateColumns"];
- boxShadow: DividerProps["boxShadow"];
-}
-
-export const ProposalTableRow = ({
- proposal,
- templateColumns,
- boxShadow,
-}: ProposalRowProps) => {
- 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 => {
- if (proposal.isExpedited && isDepositOrVoting) return "primary.background";
- return isDepositFailed ? undefined : "gray.900";
- };
-
- return (
- div": { bgColor: hoverBg } }}
- onClick={
- !isDepositFailed
- ? () => {
- AmpTrackMintscan("proposal-detail", {
- type: proposal.type,
- status: proposal.status,
- });
- openNewTab(
- `${explorerProposal}/${proposal.proposalId.toString()}`
- );
- }
- : undefined
- }
- >
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-};