fix: expedited with params

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
 - [#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
 - [#780](https://github.com/alleslabs/celatone-frontend/pull/780) Fix proposal vote table, scroll to top on table

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 = (
-  <Text variant="body3">
-    <Highlight
-      query="pass a high quorum threshold of 66.6% within the first 24 hours of voting"
-      styles={{ fontWeight: 700, whiteSpace: "wrap", color: "text.main" }}
-    >
-      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.
-    </Highlight>
-  </Text>
-);
+const ExpeditedText = ({
+  quorum,
+  threshold,
+  votingPeriod,
+  isLoading,
+}: {
+  quorum: Option<number>;
+  threshold: Option<number>;
+  votingPeriod: Option<string>;
+  isLoading: boolean;
+}) => {
+  if (isLoading)
+    <SkeletonText
+      color="white"
+      noOfLines={4}
+      spacing={2.5}
+      skeletonHeight={2}
+      w="250px"
+    />;
+
+  return (
+    <Text variant="body3">
+      An expedited governance proposal is required to{" "}
+      <span style={{ fontWeight: 700, color: "text.main" }}>
+        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
+      </span>{" "}
+      in order to pass.
+    </Text>
+  );
+};
 
 interface ExpeditedProps {
   isActiveExpedited: boolean;
 }
-export const Expedited = ({ isActiveExpedited }: ExpeditedProps) => (
-  <Tooltip label={ExpeditedText}>
-    <Flex align="center">
-      <CustomIcon
-        name="expedited"
-        boxSize={4}
-        ml={0}
-        color={isActiveExpedited ? "accent.main" : "gray.400"}
-      />
-      <Text
-        variant="body3"
-        color={isActiveExpedited ? "accent.main" : "text.dark"}
-      >
-        Expedited
-      </Text>
-    </Flex>
-  </Tooltip>
-);
+
+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 (
+    <Tooltip
+      label={
+        <ExpeditedText
+          quorum={quorum}
+          threshold={threshold}
+          votingPeriod={votingPeriod}
+          isLoading={isLoading}
+        />
+      }
+    >
+      <Flex as="span" align="center">
+        <CustomIcon
+          name="expedited"
+          boxSize={4}
+          ml={0}
+          color={isActiveExpedited ? "accent.main" : "gray.400"}
+        />
+        <Text
+          as="span"
+          variant="body3"
+          color={isActiveExpedited ? "accent.main" : "text.dark"}
+        >
+          Expedited
+        </Text>
+      </Flex>
+    </Tooltip>
+  );
+};

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 = ({
             <MobileLabel label="Proposal Title" />
             <Text color="text.main" variant="body2" wordBreak="break-word">
               {proposal.title}
+              {proposal.isExpedited && (
+                <span
+                  style={{
+                    display: "inline-block",
+                    marginLeft: "8px",
+                    verticalAlign: "middle",
+                  }}
+                >
+                  <Expedited isActiveExpedited={isDepositOrVoting} />
+                </span>
+              )}
             </Text>
             {proposal.types.length ? (
               proposal.types.map((msgType, index) => (

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,
               },

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;

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, openNewTab } from "lib/utils";
 
 import { ProposalInfo } from "./proposal-info";
@@ -22,6 +22,9 @@ export const ProposalTop = ({ proposalData }: ProposalTopProps) => {
   const openApiPage = () =>
     openNewTab(`${endpoint}/${encodeURIComponent(proposalData.id)}/info`);
 
+  const isDepositOrVoting =
+    proposalData.status === ProposalStatus.DEPOSIT_PERIOD ||
+    proposalData.status === ProposalStatus.VOTING_PERIOD;
   return (
     <Flex direction="column" mb={6} gap={5}>
       <Breadcrumb
@@ -57,11 +60,10 @@ export const ProposalTop = ({ proposalData }: ProposalTopProps) => {
                   style={{
                     display: "inline-block",
                     marginLeft: "8px",
-                    marginBottom: "2px",
                     verticalAlign: "middle",
                   }}
                 >
-                  <Expedited isActiveExpedited />
+                  <Expedited isActiveExpedited={isDepositOrVoting} />
                 </span>
               )}
             </Heading>

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