feat: proposal lcds

CHANGELOG.md

@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#961](https://github.com/alleslabs/celatone-frontend/pull/961) Add and refactor proposal related lcd endpoints
 - [#952](https://github.com/alleslabs/celatone-frontend/pull/952) Support module details page lite version with LCD endpoint
 - [#940](https://github.com/alleslabs/celatone-frontend/pull/940) Support my published modules page lite version with LCD endpoint
 - [#956](https://github.com/alleslabs/celatone-frontend/pull/956) Add landlord-1 network

src/lib/app-provider/env.ts

@@ -82,8 +82,7 @@ export enum CELATONE_QUERY_KEYS {
   PROPOSALS_LCD = "CELATONE_QUERY_PROPOSALS_LCD",
   PROPOSAL_PARAMS = "CELATONE_QUERY_PROPOSAL_PARAMS",
   PROPOSAL_TYPES = "CELATONE_QUERY_PROPOSAL_TYPES",
-  GOV_PARAMS = "CELATONE_QUERY_GOV_PARAMS",
-  UPLOAD_ACCESS_PARAMS = "CELATONE_QUERY_UPLOAD_ACCESS_PARAMS",
+  UPLOAD_ACCESS_PARAMS_LCD = "CELATONE_QUERY_UPLOAD_ACCESS_PARAMS_LCD",
   // PUBLIC PROJECT
   PUBLIC_PROJECTS = "CELATONE_QUERY_PUBLIC_PROJECTS",
   PUBLIC_PROJECT_BY_SLUG = "CELATONE_QUERY_PUBLIC_PROJECT_BY_SLUG",

src/lib/model/proposal.ts

@@ -0,0 +1,143 @@
+import { useAssetInfos } from "lib/services/assetService";
+import { useMovePoolInfos } from "lib/services/move/poolService";
+import { useProposalParams } from "lib/services/proposal";
+import { big } from "lib/types";
+import type { Coin, Option, ProposalParams, Token, U } from "lib/types";
+import {
+  coinToTokenWithValue,
+  compareTokenWithValues,
+  deexponentify,
+  formatTokenWithValue,
+  getTokenLabel,
+} from "lib/utils";
+
+// TODO: remove and use `useDerivedProposalParams` instead
+export interface GovParams {
+  depositParams: {
+    minDeposit: {
+      amount: U<Token<Big>>;
+      denom: string;
+      formattedAmount: Token;
+      formattedDenom: string;
+      formattedToken: string;
+      precision: number;
+    };
+    minInitialDeposit: Token;
+    maxDepositPeriod: string;
+    minExpeditedDeposit: Option<Coin[]>;
+    minInitialDepositRatio: Option<string>;
+  };
+  votingParams: {
+    votingPeriod: string;
+    expeditedVotingPeriod: Option<string>;
+  };
+}
+
+export const useGovParamsDeprecated = (): {
+  data: Option<GovParams>;
+  isLoading: boolean;
+} => {
+  const { data: assetInfos } = useAssetInfos({ withPrices: false });
+  const { data: movePoolInfos } = useMovePoolInfos({ withPrices: false });
+
+  const { data, isLoading } = useProposalParams();
+
+  if (!data) return { data: undefined, isLoading };
+
+  const minDepositParam = data.minDeposit[0];
+  const minDepositToken = coinToTokenWithValue(
+    minDepositParam.denom,
+    minDepositParam.amount,
+    assetInfos,
+    movePoolInfos
+  );
+  const minDepositAmount = deexponentify(
+    minDepositToken.amount,
+    minDepositToken.precision
+  ).toFixed() as Token;
+  return {
+    data: {
+      depositParams: {
+        minDeposit: {
+          ...minDepositParam,
+          amount: minDepositToken.amount,
+          formattedAmount: minDepositAmount,
+          formattedDenom: getTokenLabel(
+            minDepositToken.denom,
+            minDepositToken.symbol
+          ),
+          formattedToken: formatTokenWithValue(minDepositToken),
+          precision: minDepositToken.precision ?? 0,
+        },
+        minInitialDeposit: big(data.minInitialDepositRatio)
+          .times(minDepositAmount)
+          .toFixed(2) as Token,
+        maxDepositPeriod: data.maxDepositPeriod,
+        minInitialDepositRatio: data.minInitialDepositRatio.toString(),
+        minExpeditedDeposit: data.expeditedMinDeposit,
+      },
+      votingParams: {
+        votingPeriod: data.votingPeriod,
+        expeditedVotingPeriod: data.expeditedVotingPeriod,
+      },
+    },
+    isLoading,
+  };
+};
+
+export const useDerivedProposalParams = (
+  withPrices = false
+): {
+  data: Option<ProposalParams>;
+  isLoading: boolean;
+} => {
+  const { data, isLoading } = useProposalParams();
+  const { data: assetInfos, isLoading: isAssetInfosLoading } = useAssetInfos({
+    withPrices,
+  });
+  const { data: movePoolInfos, isLoading: isMovePoolInfosLoading } =
+    useMovePoolInfos({ withPrices });
+
+  if (isLoading || isAssetInfosLoading || isMovePoolInfosLoading || !data)
+    return {
+      data: undefined,
+      isLoading: isLoading || isAssetInfosLoading || isMovePoolInfosLoading,
+    };
+
+  return {
+    data: {
+      ...data,
+      minDeposit: data.minDeposit
+        .map((coin) =>
+          coinToTokenWithValue(
+            coin.denom,
+            coin.amount,
+            assetInfos,
+            movePoolInfos
+          )
+        )
+        .sort(compareTokenWithValues),
+      expeditedMinDeposit: data.expeditedMinDeposit
+        ?.map((coin) =>
+          coinToTokenWithValue(
+            coin.denom,
+            coin.amount,
+            assetInfos,
+            movePoolInfos
+          )
+        )
+        .sort(compareTokenWithValues),
+      emergencyMinDeposit: data.emergencyMinDeposit
+        ?.map((coin) =>
+          coinToTokenWithValue(
+            coin.denom,
+            coin.amount,
+            assetInfos,
+            movePoolInfos
+          )
+        )
+        .sort(compareTokenWithValues),
+    },
+    isLoading: false,
+  };
+};

src/lib/pages/deploy/index.tsx

@@ -17,7 +17,7 @@ import { Loading } from "lib/components/Loading";
 import { Stepper } from "lib/components/stepper";
 import { UserDocsLink } from "lib/components/UserDocsLink";
 import WasmPageContainer from "lib/components/WasmPageContainer";
-import { useUploadAccessParams } from "lib/services/wasm/code";
+import { useUploadAccessParamsLcd } from "lib/services/wasm/code";
 import { AccessConfigPermission } from "lib/types";
 
 const getAlertContent = (
@@ -59,7 +59,7 @@ const Deploy = () => {
   const {
     chainConfig: { prettyName: chainPrettyName },
   } = useCelatoneApp();
-  const { data, isFetching } = useUploadAccessParams();
+  const { data, isFetching } = useUploadAccessParamsLcd();
 
   const isPermissionedNetwork =
     data?.permission !== AccessConfigPermission.EVERYBODY;

src/lib/pages/migrate/index.tsx

@@ -17,7 +17,7 @@ import { Loading } from "lib/components/Loading";
 import { Stepper } from "lib/components/stepper";
 import WasmPageContainer from "lib/components/WasmPageContainer";
 import { useUploadCode } from "lib/hooks";
-import { useUploadAccessParams } from "lib/services/wasm/code";
+import { useUploadAccessParamsLcd } from "lib/services/wasm/code";
 import { useContractLcd } from "lib/services/wasm/contract";
 import type { BechAddr32 } from "lib/types";
 import { getFirstQueryParam } from "lib/utils";
@@ -38,7 +38,7 @@ const Migrate = () => {
   useWasmConfig({ shouldRedirect: true });
   const router = useRouter();
   const navigate = useInternalNavigate();
-  const { data: uploadAccessParams, isFetching } = useUploadAccessParams();
+  const { data: uploadAccessParams, isFetching } = useUploadAccessParamsLcd();
   const {
     proceed,
     formData,

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

@@ -0,0 +1,5 @@
+import { InvalidState } from "lib/components/state";
+
+export const InvalidProposal = () => (
+  <InvalidState title="Proposal does not exist" />
+);

src/lib/pages/proposal-details/components/index.ts

@@ -1,3 +1,4 @@
 export * from "./proposal-overview";
 export * from "./proposal-top";
 export * from "./vote-details";
+export * from "./InvalidProposal";

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

@@ -1,6 +1,6 @@
 import { Button, Flex, Text } from "@chakra-ui/react";
 
-import type { ProposalOverviewProps } from "../..";
+import type { ProposalOverviewProps } from "..";
 import { ErrorFetchingProposalInfos } from "../../ErrorFetchingProposalInfos";
 import { useInternalNavigate } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";

src/lib/pages/proposal-details/components/proposal-top/index.tsx

@@ -135,11 +135,9 @@ export const ProposalTop = ({ proposalData }: ProposalTopProps) => {
                     {!isMobile && <DotSeparator />}
                   </Flex>
                 )}
-                {proposalData.createdTimestamp && (
-                  <Text variant="body2" color="text.dark">
-                    {formatUTC(proposalData.createdTimestamp)}
-                  </Text>
-                )}
+                <Text variant="body2" color="text.dark">
+                  {formatUTC(proposalData.submitTime)}
+                </Text>
               </Flex>
             </Flex>
           </Flex>

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

@@ -1,65 +1,8 @@
-import { useMobile } from "lib/app-provider";
 import { useAssetInfos } from "lib/services/assetService";
 import { useMovePoolInfos } from "lib/services/move/poolService";
-import { useProposalData, useProposalParams } from "lib/services/proposal";
-import type { Nullable, Option, ProposalData, ProposalParams } from "lib/types";
-import { coinToTokenWithValue, compareTokenWithValues } from "lib/utils";
-
-export const useDerivedProposalParams = (): {
-  data: Option<ProposalParams>;
-  isLoading: boolean;
-} => {
-  const isMobile = useMobile();
-  const { data, isLoading } = useProposalParams();
-  const { data: assetInfos, isLoading: isAssetInfosLoading } = useAssetInfos({
-    withPrices: !isMobile,
-  });
-  const { data: movePoolInfos, isLoading: isMovePoolInfosLoading } =
-    useMovePoolInfos({ withPrices: !isMobile });
-
-  if (isLoading || isAssetInfosLoading || isMovePoolInfosLoading || !data)
-    return {
-      data: undefined,
-      isLoading: isLoading || isAssetInfosLoading || isMovePoolInfosLoading,
-    };
-
-  return {
-    data: {
-      ...data,
-      minDeposit: data.minDeposit
-        .map((coin) =>
-          coinToTokenWithValue(
-            coin.denom,
-            coin.amount,
-            assetInfos,
-            movePoolInfos
-          )
-        )
-        .sort(compareTokenWithValues),
-      expeditedMinDeposit: data.expeditedMinDeposit
-        ?.map((coin) =>
-          coinToTokenWithValue(
-            coin.denom,
-            coin.amount,
-            assetInfos,
-            movePoolInfos
-          )
-        )
-        .sort(compareTokenWithValues),
-      emergencyMinDeposit: data.emergencyMinDeposit
-        ?.map((coin) =>
-          coinToTokenWithValue(
-            coin.denom,
-            coin.amount,
-            assetInfos,
-            movePoolInfos
-          )
-        )
-        .sort(compareTokenWithValues),
-    },
-    isLoading: false,
-  };
-};
+import { useProposalData } from "lib/services/proposal";
+import type { Nullable, Option, ProposalData } from "lib/types";
+import { coinToTokenWithValue } from "lib/utils";
 
 interface DerivedProposalDataResponse {
   data: Option<{

src/lib/pages/proposal-details/index.tsx

@@ -3,33 +3,38 @@ import { useRouter } from "next/router";
 import { useCallback, useEffect } from "react";
 
 import { AmpEvent, track, trackUseTab } from "lib/amplitude";
-import { useGovConfig, useInternalNavigate } from "lib/app-provider";
+import { useGovConfig, useInternalNavigate, useMobile } from "lib/app-provider";
 import { CustomTab } from "lib/components/CustomTab";
 import { Loading } from "lib/components/Loading";
 import PageContainer from "lib/components/PageContainer";
-import { ErrorFetching, InvalidState } from "lib/components/state";
+import { ErrorFetching } from "lib/components/state";
 import { UserDocsLink } from "lib/components/UserDocsLink";
+import { useDerivedProposalParams } from "lib/model/proposal";
 import { useProposalVotesInfo } from "lib/services/proposal";
 
-import { ProposalOverview, ProposalTop, VoteDetails } from "./components";
-import { useDerivedProposalData, useDerivedProposalParams } from "./data";
+import {
+  InvalidProposal,
+  ProposalOverview,
+  ProposalTop,
+  VoteDetails,
+} from "./components";
+import { useDerivedProposalData } from "./data";
 import type { ProposalDetailsQueryParams } from "./types";
 import { TabIndex, zProposalDetailsQueryParams } from "./types";
 
-const InvalidProposal = () => <InvalidState title="Proposal does not exist" />;
-
 const ProposalDetailsBody = ({
   proposalId,
   tab,
 }: ProposalDetailsQueryParams) => {
   useGovConfig({ shouldRedirect: true });
 
+  const isMobile = useMobile();
   const navigate = useInternalNavigate();
   const { data, isLoading } = useDerivedProposalData(proposalId);
   const { data: votesInfo, isLoading: isVotesInfoLoading } =
     useProposalVotesInfo(proposalId);
   const { data: params, isLoading: isParamsLoading } =
-    useDerivedProposalParams();
+    useDerivedProposalParams(!isMobile);
 
   const handleTabChange = useCallback(
     (nextTab: TabIndex) => () => {

src/lib/pages/proposal/components/InitialDeposit.tsx

@@ -1,6 +1,6 @@
 import { Box, Heading, Text } from "@chakra-ui/react";
 
-import type { GovParams } from "lib/services/types";
+import type { GovParams } from "lib/model/proposal";
 import type { Option } from "lib/types";
 import { formatSeconds } from "lib/utils";
 

src/lib/pages/proposal/store-code/index.tsx

@@ -54,7 +54,8 @@ import { InstantiatePermissionRadio } from "lib/components/upload/InstantiatePer
 import { SimulateMessageRender } from "lib/components/upload/SimulateMessageRender";
 import { UploadCard } from "lib/components/upload/UploadCard";
 import { useGetMaxLengthError, useTxBroadcast } from "lib/hooks";
-import { useGovParams } from "lib/services/proposal";
+import { useGovParamsDeprecated } from "lib/model/proposal";
+import { useUploadAccessParamsLcd } from "lib/services/wasm/code";
 import type { BechAddr, SimulateStatus, UploadSectionState } from "lib/types";
 import { AccessConfigPermission, AccessType } from "lib/types";
 import {
@@ -95,10 +96,11 @@ const StoreCodeProposal = () => {
   const getMaxLengthError = useGetMaxLengthError();
   const { address: walletAddress } = useCurrentChain();
   const fabricateFee = useFabricateFee();
-  const { data: govParams } = useGovParams();
+  const { data: govParams } = useGovParamsDeprecated();
+  const { data: uploadAccessParams } = useUploadAccessParamsLcd();
   const minDeposit = govParams?.depositParams.minDeposit;
   const isPermissionless =
-    govParams?.uploadAccess.permission === AccessConfigPermission.EVERYBODY;
+    uploadAccessParams?.permission === AccessConfigPermission.EVERYBODY;
   const { validateUserAddress, validateContractAddress } = useValidateAddress();
   const submitStoreCodeProposalTx = useSubmitStoreCodeProposalTx();
   const { broadcast } = useTxBroadcast();