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 - } - > - - - - - - - - - - - - - - - - - - - - - - - - ); -};