feat: disable voting tally

CHANGELOG.md

@@ -80,6 +80,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#996](https://github.com/alleslabs/celatone-frontend/pull/996) Allow disable voting period tally config
 - [#960](https://github.com/alleslabs/celatone-frontend/pull/960) Adjust UI in contract and account detail page
 - [#983](https://github.com/alleslabs/celatone-frontend/pull/983) Add fallback for collection names that are empty string
 - [#982](https://github.com/alleslabs/celatone-frontend/pull/982) Support Icns in account osmosis lite version

src/config/chain/initia.ts

@@ -87,6 +87,7 @@ export const INITIA_CHAIN_CONFIGS: ChainConfigs = {
         enabled: true,
         version: "v1",
         hideOpenProposal: true,
+        disableVotingPeriodTally: true,
       },
       nft: {
         enabled: true,

src/config/chain/types.ts

@@ -44,6 +44,7 @@ type GovConfig =
       hideOpenProposal?: boolean;
       disableWhitelistProposal?: boolean;
       disableStoreCodeProposal?: boolean;
+      disableVotingPeriodTally?: boolean;
     }
   | {
       enabled: false;

src/lib/pages/proposal-details/components/NoVotingPeriodTally.tsx

@@ -0,0 +1,26 @@
+import { Alert, AlertDescription } from "@chakra-ui/react";
+
+import { useCurrentChain } from "lib/app-provider";
+import { CustomIcon } from "lib/components/icon";
+
+export const NoVotingPeriodTallyExplanation = () => {
+  const {
+    chain: { chain_id: chainId },
+  } = useCurrentChain();
+  return (
+    <>
+      The proposal tally information during voting period is unavailable in{" "}
+      <span style={{ fontWeight: 700 }}>{chainId}</span>. It will be available
+      after voting period ends.
+    </>
+  );
+};
+
+export const NoVotingPeriodTallyAlert = () => (
+  <Alert variant="warning" gap={3}>
+    <CustomIcon name="alert-circle-solid" boxSize={4} color="warning.main" />
+    <AlertDescription>
+      <NoVotingPeriodTallyExplanation />
+    </AlertDescription>
+  </Alert>
+);

src/lib/pages/proposal-details/components/ResultExplanation.tsx

@@ -2,6 +2,7 @@
 import { SkeletonText, Text } from "@chakra-ui/react";
 import { isNull } from "lodash";
 
+import { useGovConfig } from "lib/app-provider";
 import {
   extractParams,
   mapDeposit,
@@ -20,6 +21,7 @@ import { ProposalStatus } from "lib/types";
 import { formatPrettyPercent, formatTokenWithValueList } from "lib/utils";
 
 import { ErrorFetchingProposalInfos } from "./ErrorFetchingProposalInfos";
+import { NoVotingPeriodTallyExplanation } from "./NoVotingPeriodTally";
 import { ViewFailedReason } from "./ViewFailedReason";
 
 const Passed = () => (
@@ -66,12 +68,25 @@ export interface ResultExplanationProps {
   isLoading: boolean;
 }
 
+// eslint-disable-next-line complexity
 export const ResultExplanation = ({
   proposalData,
   params,
   votesInfo,
   isLoading,
 }: ResultExplanationProps) => {
+  const gov = useGovConfig({ shouldRedirect: false });
+  if (
+    gov.enabled &&
+    gov.disableVotingPeriodTally &&
+    proposalData.status === ProposalStatus.VOTING_PERIOD
+  )
+    return (
+      <Text variant="body2">
+        <NoVotingPeriodTallyExplanation />
+      </Text>
+    );
+
   if (proposalData.status === ProposalStatus.DEPOSIT_FAILED)
     return (
       <Text variant="body2">

src/lib/pages/proposal-details/components/proposal-overview/proposal-period-overview/VotingOverview.tsx

@@ -2,7 +2,8 @@ import { Button, Flex, Text } from "@chakra-ui/react";
 
 import type { ProposalOverviewProps } from "..";
 import { ErrorFetchingProposalInfos } from "../../ErrorFetchingProposalInfos";
-import { useInternalNavigate } from "lib/app-provider";
+import { NoVotingPeriodTallyAlert } from "../../NoVotingPeriodTally";
+import { useGovConfig, useInternalNavigate } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
 import { Loading } from "lib/components/Loading";
 import { TabIndex } from "lib/pages/proposal-details/types";
@@ -20,6 +21,15 @@ const VotingOverviewBody = ({
 }: ProposalOverviewProps) => {
   const navigate = useInternalNavigate();
 
+  const gov = useGovConfig({ shouldRedirect: false });
+  const disableVotingPeriodTally = gov.enabled && gov.disableVotingPeriodTally;
+
+  if (
+    proposalData.status === ProposalStatus.VOTING_PERIOD &&
+    disableVotingPeriodTally
+  )
+    return <NoVotingPeriodTallyAlert />;
+
   if (proposalData.status === ProposalStatus.DEPOSIT_PERIOD)
     return (
       <Text variant="body2" color="text.dark">

src/lib/pages/proposal-details/components/proposal-overview/status-summary/index.tsx

@@ -4,6 +4,8 @@ import type { CSSProperties } from "react";
 import type { ProposalOverviewProps } from "..";
 import { ActiveDot } from "../../ActiveDot";
 import { ResultExplanation } from "../../ResultExplanation";
+import { useGovConfig } from "lib/app-provider";
+import { StatusChip } from "lib/components/table";
 import { ProposalStatus } from "lib/types";
 
 import { SummaryStatusChip } from "./SummaryStatusChip";
@@ -34,6 +36,8 @@ export const StatusSummary = ({
   proposalData,
   ...props
 }: ProposalOverviewProps) => {
+  const gov = useGovConfig({ shouldRedirect: false });
+  const disableVotingPeriodTally = gov.enabled && gov.disableVotingPeriodTally;
   const isDepositOrVoting =
     proposalData.status === ProposalStatus.DEPOSIT_PERIOD ||
     proposalData.status === ProposalStatus.VOTING_PERIOD;
@@ -55,10 +59,22 @@ export const StatusSummary = ({
       >
         <Flex align="center" gap={2} whiteSpace="nowrap">
           {isDepositOrVoting && <ActiveDot />}
-          <Text variant="body1" textColor="text.main" fontWeight={700}>
-            {isDepositOrVoting ? "Current" : "Final"} proposal result:
-          </Text>
-          <SummaryStatusChip proposalData={proposalData} {...props} />
+          {disableVotingPeriodTally &&
+          proposalData.status === ProposalStatus.VOTING_PERIOD ? (
+            <>
+              <Text variant="body1" textColor="text.main" fontWeight={700}>
+                Current proposal status:
+              </Text>
+              <StatusChip status={ProposalStatus.VOTING_PERIOD} />
+            </>
+          ) : (
+            <>
+              <Text variant="body1" textColor="text.main" fontWeight={700}>
+                {isDepositOrVoting ? "Current" : "Final"} proposal result:
+              </Text>
+              <SummaryStatusChip proposalData={proposalData} {...props} />
+            </>
+          )}
         </Flex>
         <SummaryStatusTime proposalData={proposalData} />
       </Flex>

src/lib/pages/proposal-details/components/vote-details/voting-period/index.tsx

@@ -11,11 +11,13 @@ import { isNull } from "lodash";
 import type { ReactNode } from "react";
 
 import type { VoteDetailsProps } from "..";
+import { NoVotingPeriodTallyAlert } from "../../NoVotingPeriodTally";
 import { AmpEvent, track } from "lib/amplitude";
-import { useMobile, useTierConfig } from "lib/app-provider";
+import { useGovConfig, useMobile, useTierConfig } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
 import { TableTitle } from "lib/components/table";
 import { useProposalAnswerCounts } from "lib/services/proposal";
+import { ProposalStatus } from "lib/types";
 import { scrollToComponent, scrollYPosition } from "lib/utils";
 
 import { ProposalVotesPanel } from "./ProposalVotesPanel";
@@ -50,9 +52,11 @@ const ContentContainer = ({
 const scrollComponentId = "voting-period";
 
 export const VotingPeriod = ({ proposalData, ...props }: VoteDetailsProps) => {
+  const isMobile = useMobile();
   const isFullTier = useTierConfig() === "full";
+  const gov = useGovConfig({ shouldRedirect: false });
+  const disableVotingPeriodTally = gov.enabled && gov.disableVotingPeriodTally;
 
-  const isMobile = useMobile();
   const validatorVoteDisclosure = useDisclosure();
   const allVoteDisclosure = useDisclosure();
 
@@ -111,14 +115,21 @@ export const VotingPeriod = ({ proposalData, ...props }: VoteDetailsProps) => {
         transition="all 0.25s ease-in-out"
         gap={4}
       >
-        {/* Voting Participations */}
-        <ContentContainer transparent={isMobile}>
-          <VotingQuorum proposalData={proposalData} {...props} />
-        </ContentContainer>
-        {/* Voting Results */}
-        <ContentContainer transparent={isMobile}>
-          <VotingThreshold proposalData={proposalData} {...props} />
-        </ContentContainer>
+        {proposalData.status === ProposalStatus.VOTING_PERIOD &&
+        disableVotingPeriodTally ? (
+          <NoVotingPeriodTallyAlert />
+        ) : (
+          <>
+            {/* Voting Participations */}
+            <ContentContainer transparent={isMobile}>
+              <VotingQuorum proposalData={proposalData} {...props} />
+            </ContentContainer>
+            {/* Voting Results */}
+            <ContentContainer transparent={isMobile}>
+              <VotingThreshold proposalData={proposalData} {...props} />
+            </ContentContainer>
+          </>
+        )}
         {isFullTier && (
           <Grid gridTemplateColumns={isMobile ? "1fr " : "1fr 1fr"} gridGap={4}>
             {/* Validator Votes */}

src/lib/pages/proposal-details/data.ts

@@ -1,4 +1,4 @@
-import { useTierConfig } from "lib/app-provider";
+import { useGovConfig, useTierConfig } from "lib/app-provider";
 import { useAssetInfos } from "lib/services/assetService";
 import { useMovePoolInfos } from "lib/services/move/poolService";
 import {
@@ -124,10 +124,16 @@ export const useDerivedProposalVotesInfo = (
   proposalData: DerivedProposalDataResponse["data"],
   isProposalDataLoading: boolean
 ): DerivedProposalVotesInfoResponse => {
+  const gov = useGovConfig({ shouldRedirect: false });
+  const disableVotingPeriodTally = gov.enabled && gov.disableVotingPeriodTally;
+
   const isVotingPeriod =
     proposalData?.info?.status === ProposalStatus.VOTING_PERIOD;
 
-  const { data, isLoading } = useProposalVotesInfo(id, isVotingPeriod);
+  const { data, isFetching } = useProposalVotesInfo(
+    id,
+    isVotingPeriod && !disableVotingPeriodTally
+  );
 
   if (!isVotingPeriod) {
     return {
@@ -138,6 +144,6 @@ export const useDerivedProposalVotesInfo = (
 
   return {
     data,
-    isLoading,
+    isLoading: isFetching,
   };
 };