diff --git a/CHANGELOG.md b/CHANGELOG.md index a26fad237..c0c6bd0dc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -77,6 +77,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Bug fixes +- [#792](https://github.com/alleslabs/celatone-frontend/pull/792) Expedited with network params - [#791](https://github.com/alleslabs/celatone-frontend/pull/791) Proposal view in json direct to the lcd information - [#789](https://github.com/alleslabs/celatone-frontend/pull/789) Remove loading overlay on pool list page causing the page look like flicking - [#783](https://github.com/alleslabs/celatone-frontend/pull/783) Fix link used for Osmosis Pool JSON To poolmanager diff --git a/src/lib/components/Expedited.tsx b/src/lib/components/Expedited.tsx index e4423319c..5aa2e8538 100644 --- a/src/lib/components/Expedited.tsx +++ b/src/lib/components/Expedited.tsx @@ -1,38 +1,82 @@ -import { Flex, Text, Highlight } from "@chakra-ui/react"; +import { Flex, SkeletonText, Text } from "@chakra-ui/react"; + +import { useProposalParams } from "lib/services/proposalService"; +import type { Option } from "lib/types"; +import { formatPrettyPercent, formatSeconds } from "lib/utils"; import { CustomIcon } from "./icon"; import { Tooltip } from "./Tooltip"; -const ExpeditedText = ( - - - An expedited governance proposal is required to pass a high quorum - threshold of 66.6% within the first 24 hours of voting in order to pass. - - -); +const ExpeditedText = ({ + quorum, + threshold, + votingPeriod, + isLoading, +}: { + quorum: Option; + threshold: Option; + votingPeriod: Option; + isLoading: boolean; +}) => { + if (isLoading) + ; + + return ( + + An expedited governance proposal is required to{" "} + + pass a quorum of {quorum ? formatPrettyPercent(quorum, 1, true) : "N/A"}{" "} + and a high threshold of{" "} + {threshold ? formatPrettyPercent(threshold, 1, true) : "N/A"} within{" "} + {formatSeconds(votingPeriod)} voting period + {" "} + in order to pass. + + ); +}; interface ExpeditedProps { isActiveExpedited: boolean; } -export const Expedited = ({ isActiveExpedited }: ExpeditedProps) => ( - - - - - Expedited - - - -); + +export const Expedited = ({ isActiveExpedited }: ExpeditedProps) => { + const { data: params, isLoading } = useProposalParams(); + const quorum = params?.expeditedQuorum || params?.quorum; + const threshold = params?.expeditedThreshold || params?.threshold; + const votingPeriod = params?.expeditedVotingPeriod || params?.votingPeriod; + + return ( + + } + > + + + + Expedited + + + + ); +}; diff --git a/src/lib/components/table/proposals/ProposalsTableMobileCard.tsx b/src/lib/components/table/proposals/ProposalsTableMobileCard.tsx index f9671285f..9b33f6b05 100644 --- a/src/lib/components/table/proposals/ProposalsTableMobileCard.tsx +++ b/src/lib/components/table/proposals/ProposalsTableMobileCard.tsx @@ -3,6 +3,7 @@ import { Flex, Text } from "@chakra-ui/react"; import { MobileCardTemplate } from "../MobileCardTemplate"; import { MobileLabel } from "../MobileLabel"; import { useInternalNavigate } from "lib/app-provider"; +import { Expedited } from "lib/components/Expedited"; import { ExplorerLink } from "lib/components/ExplorerLink"; import type { Proposal } from "lib/types"; import { ProposalStatus } from "lib/types"; @@ -51,6 +52,17 @@ export const ProposalsTableMobileCard = ({ {proposal.title} + {proposal.isExpedited && ( + + + + )} {proposal.types.length ? ( proposal.types.map((msgType, index) => ( diff --git a/src/lib/layout/mobile/NavDrawer.tsx b/src/lib/layout/mobile/NavDrawer.tsx index a9a355bc4..1404e8ee0 100644 --- a/src/lib/layout/mobile/NavDrawer.tsx +++ b/src/lib/layout/mobile/NavDrawer.tsx @@ -77,7 +77,7 @@ export const NavDrawer = () => { ...(govConfig.enabled ? [ { - name: "Proposal", + name: "Proposals", slug: "/proposals", icon: "proposal" as IconKeys, }, diff --git a/src/lib/pages/proposal-details/components/VoteThresholdBar.tsx b/src/lib/pages/proposal-details/components/VoteThresholdBar.tsx index ccebaaa8b..297d3423c 100644 --- a/src/lib/pages/proposal-details/components/VoteThresholdBar.tsx +++ b/src/lib/pages/proposal-details/components/VoteThresholdBar.tsx @@ -1,8 +1,8 @@ import { Flex, Text } from "@chakra-ui/react"; -import { formatPrettyPercent, normalizeVotesInfo } from "../utils"; +import { normalizeVotesInfo } from "../utils"; import type { ProposalVotesInfo } from "lib/types"; -import { divWithDefault } from "lib/utils"; +import { divWithDefault, formatPrettyPercent } from "lib/utils"; interface BarSectionProps { percent: string; diff --git a/src/lib/pages/proposal-details/components/proposal-top/index.tsx b/src/lib/pages/proposal-details/components/proposal-top/index.tsx index 5071af994..8665a6be0 100644 --- a/src/lib/pages/proposal-details/components/proposal-top/index.tsx +++ b/src/lib/pages/proposal-details/components/proposal-top/index.tsx @@ -6,7 +6,7 @@ import { DotSeparator } from "lib/components/DotSeparator"; import { Expedited } from "lib/components/Expedited"; import { ExplorerLink } from "lib/components/ExplorerLink"; import { CustomIcon } from "lib/components/icon"; -import type { ProposalData } from "lib/types"; +import { ProposalStatus, type ProposalData } from "lib/types"; import { formatUTC } from "lib/utils"; import { ProposalInfo } from "./proposal-info"; @@ -19,6 +19,9 @@ interface ProposalTopProps { export const ProposalTop = ({ proposalData }: ProposalTopProps) => { const isMobile = useMobile(); + const isDepositOrVoting = + proposalData.status === ProposalStatus.DEPOSIT_PERIOD || + proposalData.status === ProposalStatus.VOTING_PERIOD; return ( { style={{ display: "inline-block", marginLeft: "8px", - marginBottom: "2px", verticalAlign: "middle", }} > - + )} diff --git a/src/lib/pages/proposal-details/utils.ts b/src/lib/pages/proposal-details/utils.ts index 7bde55d4a..4fb3250b2 100644 --- a/src/lib/pages/proposal-details/utils.ts +++ b/src/lib/pages/proposal-details/utils.ts @@ -89,13 +89,3 @@ export const getVoteResult = ( resultColor: "error.main", }; }; - -export const formatPrettyPercent = (ratio: number, fp = 2, fixedFp = false) => { - const lowestPercent = 10 ** -fp; - - const percent = ratio * 100; - if (percent > 0 && percent < lowestPercent) return `<${lowestPercent}%`; - - const rounded = big(percent).round(fp); - return `${fixedFp ? rounded.toFixed(fp) : rounded.toNumber()}%`; -};