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()}%`;
-};