feat: add initial deposit to proposal to store code page

CHANGELOG.md

@@ -44,6 +44,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#324](https://github.com/alleslabs/celatone-frontend/pull/324) Add deposit/voting period from gov params and add minimum required alert for proposal to store code
 - [#298](https://github.com/alleslabs/celatone-frontend/pull/298) Show deposit/voting period from gov params and add minimum required alert
 
 ### Bug fixes

src/lib/components/button/NewProposalButton.tsx

@@ -32,17 +32,16 @@ export const NewProposalButton = () => {
         Create New Proposal
       </MenuButton>
       <MenuList>
-        {/* <StyledMenuItem
+        <StyledMenuItem
           icon={<CustomIcon name="code" />}
-          // TODO - Change navigation path
           onClick={() => {
             navigate({
-              pathname: "/proposal-storecode",
+              pathname: "/proposal/store-code",
             });
           }}
         >
           To Store Code
-        </StyledMenuItem> */}
+        </StyledMenuItem>
         {/* <StyledMenuItem
           icon={<CustomIcon name="contract-address" />}
           onClick={() => {

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

@@ -0,0 +1,32 @@
+import { Text, Box, Heading } from "@chakra-ui/react";
+
+import type { GovParams } from "lib/services/proposalService";
+import type { Option } from "lib/types";
+import { formatSeconds } from "lib/utils";
+
+interface InitialDepositProps {
+  govParams: Option<GovParams>;
+}
+
+export const InitialDeposit = ({ govParams }: InitialDepositProps) => {
+  const minDeposit = govParams?.depositParams.minDeposit;
+
+  return (
+    <Box>
+      <Heading as="h6" variant="h6" mt={12}>
+        Initial Deposit
+      </Heading>
+      <Text color="text.dark" mt={2} fontWeight={500} variant="body2">
+        Minimum deposit required to start{" "}
+        {formatSeconds(govParams?.depositParams.maxDepositPeriod)} deposit
+        period: {govParams?.depositParams.minInitialDeposit}{" "}
+        {minDeposit?.formattedDenom}
+      </Text>
+      <Text color="text.dark" mt={2} fontWeight={500} variant="body2">
+        Minimum deposit required to start{" "}
+        {formatSeconds(govParams?.votingParams.votingPeriod)} voting period:{" "}
+        {minDeposit?.formattedToken}
+      </Text>
+    </Box>
+  );
+};

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

@@ -16,6 +16,7 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 import { useForm } from "react-hook-form";
 
 import { AssetBox, Footer } from "../components";
+import { InitialDeposit } from "../components/InitialDeposit";
 import {
   SIDEBAR_STORE_CODE_DETAILS,
   PROPOSAL_STORE_CODE_TEXT,
@@ -505,13 +506,7 @@ const StoreCodeProposal = () => {
                 />
 
                 {/* Deposit  */}
-                <Heading as="h6" variant="h6" mt={12}>
-                  Initial Deposit
-                </Heading>
-                <Text color="text.dark" mt={2} fontWeight={500} variant="body2">
-                  Minimum deposit required to start 7-day voting period:{" "}
-                  {minDeposit?.formattedToken}
-                </Text>
+                <InitialDeposit govParams={govParams} />
                 <Grid py={6} columnGap={4} templateColumns="1fr 3fr">
                   <AssetBox baseDenom={initialDeposit.denom} />
                   <ControllerInput

src/lib/pages/proposal/whitelist/index.tsx

@@ -14,6 +14,7 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 import { useFieldArray, useForm } from "react-hook-form";
 
 import { AssetBox, Footer } from "../components";
+import { InitialDeposit } from "../components/InitialDeposit";
 import { TestnetAlert } from "../components/TestnetAlert";
 import { SIDEBAR_WHITELIST_DETAILS } from "../constants";
 import { getAlert } from "../utils";
@@ -40,11 +41,7 @@ import { useTxBroadcast } from "lib/providers/tx-broadcast";
 import { AmpEvent, AmpTrack } from "lib/services/amplitude";
 import { useGovParams } from "lib/services/proposalService";
 import type { Addr } from "lib/types";
-import {
-  composeSubmitWhitelistProposalMsg,
-  getAmountToVote,
-  formatSeconds,
-} from "lib/utils";
+import { composeSubmitWhitelistProposalMsg, getAmountToVote } from "lib/utils";
 
 interface WhiteListState {
   title: string;
@@ -339,20 +336,7 @@ const ProposalToWhitelist = () => {
               >
                 Add More Address
               </Button>
-              <Heading as="h6" variant="h6" mt={12}>
-                Initial Deposit
-              </Heading>
-              <Text color="text.dark" mt={2} fontWeight={500} variant="body2">
-                Minimum deposit required to start{" "}
-                {formatSeconds(govParams?.depositParams.maxDepositPeriod)}{" "}
-                deposit period: {govParams?.depositParams.minInitialDeposit}{" "}
-                {minDeposit?.formattedDenom}
-              </Text>
-              <Text color="text.dark" mt={2} fontWeight={500} variant="body2">
-                Minimum deposit required to start{" "}
-                {formatSeconds(govParams?.votingParams.votingPeriod)} voting
-                period: {minDeposit?.formattedToken}
-              </Text>
+              <InitialDeposit govParams={govParams} />
               <Grid py={6} columnGap={4} templateColumns="1fr 3fr">
                 <AssetBox baseDenom={initialDeposit.denom} />
                 <ControllerInput

src/lib/services/proposalService.ts

@@ -289,50 +289,51 @@ interface DepositParamsReturn
   minInitialDeposit: Token;
 }
 
-export const useGovParams = (): UseQueryResult<{
+export interface GovParams {
   depositParams: DepositParamsReturn;
   uploadAccess: UploadAccess;
   votingParams: VotingParamsInternal;
-}> => {
+}
+
+export const useGovParams = (): UseQueryResult<GovParams> => {
   const lcdEndpoint = useLCDEndpoint();
-  const queryFn = useCallback(() => {
-    return Promise.all([
-      fetchGovDepositParams(lcdEndpoint),
-      fetchGovUploadAccessParams(lcdEndpoint),
-      fetchGovVotingParams(lcdEndpoint),
-    ]).then<{
-      depositParams: DepositParamsReturn;
-      uploadAccess: UploadAccess;
-      votingParams: VotingParamsInternal;
-    }>((params) => {
-      const minDepositParam = params[0].minDeposit[0];
-      const [minDepositAmount, minDepositDenom] = [
-        demicrofy(minDepositParam.amount as U<Token>).toFixed(),
-        getTokenLabel(minDepositParam.denom),
-      ];
-      return {
-        depositParams: {
-          ...params[0],
-          minDeposit: {
-            ...minDepositParam,
-            amount: minDepositParam.amount as U<Token>,
-            formattedAmount: minDepositAmount as Token,
-            formattedDenom: minDepositDenom,
-            formattedToken: formatBalanceWithDenom({
-              coin: minDepositParam,
-              precision: 6,
-              decimalPoints: 2,
-            }),
+  const queryFn = useCallback(
+    () =>
+      Promise.all([
+        fetchGovDepositParams(lcdEndpoint),
+        fetchGovUploadAccessParams(lcdEndpoint),
+        fetchGovVotingParams(lcdEndpoint),
+      ]).then<GovParams>((params) => {
+        const minDepositParam = params[0].minDeposit[0];
+        const [minDepositAmount, minDepositDenom] = [
+          demicrofy(minDepositParam.amount as U<Token>).toFixed(),
+          getTokenLabel(minDepositParam.denom),
+        ];
+
+        return {
+          depositParams: {
+            ...params[0],
+            minDeposit: {
+              ...minDepositParam,
+              amount: minDepositParam.amount as U<Token>,
+              formattedAmount: minDepositAmount as Token,
+              formattedDenom: minDepositDenom,
+              formattedToken: formatBalanceWithDenom({
+                coin: minDepositParam,
+                precision: 6,
+                decimalPoints: 2,
+              }),
+            },
+            minInitialDeposit: big(params[0].minInitialDepositRatio)
+              .times(minDepositAmount)
+              .toFixed(2) as Token,
           },
-          minInitialDeposit: big(params[0].minInitialDepositRatio)
-            .times(minDepositAmount)
-            .toFixed(2) as Token,
-        },
-        uploadAccess: params[1],
-        votingParams: params[2],
-      };
-    });
-  }, [lcdEndpoint]);
+          uploadAccess: params[1],
+          votingParams: params[2],
+        };
+      }),
+    [lcdEndpoint]
+  );
 
   return useQuery(["gov_params", lcdEndpoint], queryFn, {
     keepPreviousData: true,