chore(gov): governance fixes (#1238)

* fix: fix infinity deposit issue * chore: fix title overflow issue * chore: update tx errors * chore: fix gov deposit * chore * chore(staking): add select network option in staking overview
vitwit · May 21, 2024 · 0f372d0 · 0f372d0
1 parent 2bafd31
commit 0f372d0
Show file tree

Hide file tree

Showing 10 changed files with 123 additions and 71 deletions.
diff --git a/frontend/src/app/(routes)/governance/AllProposals.tsx b/frontend/src/app/(routes)/governance/AllProposals.tsx
@@ -26,6 +26,7 @@ const AllProposals = ({
   currentOverviewId,
   handleProposalSelected,
   isSelected,
+  overviewPropChainID,
 }: {
   isRightBarOpen: boolean;
   chainIDs: string[];
@@ -35,6 +36,7 @@ const AllProposals = ({
   currentOverviewId: number;
   handleProposalSelected: (value: boolean) => void;
   isSelected: boolean;
+  overviewPropChainID: string;
 }) => {
   const dispatch = useAppDispatch();
   const [selectedChainsProposals, setSelectedChainsProposals] =
@@ -193,7 +195,8 @@ const AllProposals = ({
                               proposal,
                               'proposal_id',
                               get(proposal, 'id', '')
-                            )
+                            ) &&
+                          overviewPropChainID === chainID
                             ? 'proposal proposal-selected'
                             : 'proposal'
                         }
@@ -209,7 +212,8 @@ const AllProposals = ({
                                     proposal,
                                     'proposal_id',
                                     get(proposal, 'id', '')
-                                  )
+                                  ) &&
+                                overviewPropChainID === chainID
                                   ? 'proposal-id'
                                   : 'proposal-id proposal-id-static'
                               }

diff --git a/frontend/src/app/(routes)/governance/DepositPopup.tsx b/frontend/src/app/(routes)/governance/DepositPopup.tsx
@@ -64,15 +64,15 @@ const DepositPopup = ({
     formState: { errors },
   } = useForm({
     defaultValues: {
-      amount: 0,
+      amount: '',
     },
   });
 
   const handleClose = () => {
     onClose();
   };
 
-  const handleDeposit = (data: { amount: number }) => {
+  const handleDeposit = (data: { amount: string }) => {
     const {
       aminoConfig,
       prefix,
@@ -170,7 +170,7 @@ const DepositPopup = ({
                           height={26}
                           alt="logo"
                         />
-                        <p className="proposal-text-small">{proposalId}</p>
+                        <p className="proposal-text-small">#{proposalId}</p>
                       </div>
                       <div className="proposal-text-small">{`Deposit period ends in ${votingEndsInDays} `}</div>
                     </div>
@@ -185,13 +185,21 @@ const DepositPopup = ({
                     <Controller
                       name="amount"
                       control={control}
+                      rules={{
+                        validate: (value) => {
+                          const amount = Number(value);
+                          if (isNaN(amount) || amount <= 0)
+                            return 'Invalid Amount';
+                        },
+                      }}
                       render={({ field }) => (
                         <TextField
                           className="bg-[#FFFFFF0D] rounded-2xl"
                           {...field}
                           required
                           fullWidth
                           size="small"
+                          autoFocus={true}
                           placeholder="Enter Amount here"
                           sx={{
                             '& .MuiTypography-body1': {
@@ -217,15 +225,20 @@ const DepositPopup = ({
                               },
                             },
                           }}
-                          error={!!errors.amount}
-                          helperText={
-                            errors.amount?.type === 'validate'
-                              ? 'Insufficient balance'
-                              : errors.amount?.message
-                          }
                         />
                       )}
                     />
+                    <div className="error-box">
+                      <span
+                        className={
+                          !!errors.amount
+                            ? 'error-chip opacity-80'
+                            : 'error-chip opacity-0'
+                        }
+                      >
+                        {errors.amount?.message}
+                      </span>
+                    </div>
                   </div>
                   <div className="mt-6">
                     <button

diff --git a/frontend/src/app/(routes)/governance/DepositProposalInfo.tsx b/frontend/src/app/(routes)/governance/DepositProposalInfo.tsx
@@ -63,21 +63,23 @@ const DepositProposalInfo = ({ chainID }: { chainID: string }) => {
             </div>
           </div>
         </div>
-        <div className="w-full">
-          <div className="flex">
-            <div style={{ width: `${depositPercent.toString()}%` }}></div>
-            <div className="flex flex-col">
-              <div>{depositPercent}%</div>
-              <div className="bg-[#f0f0f3] h-[10px] w-[4px]"></div>
+        {!minDeposit ? null : (
+          <div className="w-full">
+            <div className="flex">
+              <div style={{ width: `${depositPercent.toString()}%` }}></div>
+              <div className="flex flex-col">
+                <div>{depositPercent}%</div>
+                <div className="bg-[#f0f0f3] h-[10px] w-[4px]"></div>
+              </div>
+            </div>
+            <div className="bg-[#FFFFFF1A] w-full h-[10px] rounded-full">
+              <div
+                style={{ width: `${depositPercent.toString()}%` }}
+                className={`bg-[#2DC5A4] h-[10px] rounded-l-full`}
+              ></div>
             </div>
           </div>
-          <div className="bg-[#FFFFFF1A] w-full h-[10px] rounded-full">
-            <div
-              style={{ width: `${depositPercent.toString()}%` }}
-              className={`bg-[#2DC5A4] h-[10px] rounded-l-full`}
-            ></div>
-          </div>
-        </div>
+        )}
       </div>
     </div>
   );

diff --git a/frontend/src/app/(routes)/governance/GovPage.tsx b/frontend/src/app/(routes)/governance/GovPage.tsx
@@ -73,6 +73,7 @@ const GovPage = ({ chainIDs }: { chainIDs: string[] }) => {
           currentOverviewId={currentOverviewId}
           handleProposalSelected={handleProposalSelected}
           isSelected={isSelected}
+          overviewPropChainID={chainID}
         />
       </div>
       {(isOverviewOpen && (

diff --git a/frontend/src/app/(routes)/governance/RightOverview.tsx b/frontend/src/app/(routes)/governance/RightOverview.tsx
@@ -9,6 +9,7 @@ import { CircularProgress, Tooltip } from '@mui/material';
 import { RootState } from '@/store/store';
 import { useAppDispatch, useAppSelector } from '@/custom-hooks/StateHooks';
 import {
+  getDepositParams,
   getGovTallyParams,
   getProposal,
   getProposalTally,
@@ -25,6 +26,7 @@ import { deepPurple } from '@mui/material/colors';
 import DepositProposalInfo from './DepositProposalInfo';
 import DepositProposalDetails from './DepositProposalDetails';
 import { formatCoin } from '@/utils/util';
+import { parseBalance } from '@/utils/denom';
 
 type handleCloseOverview = () => void;
 
@@ -42,12 +44,18 @@ const RightOverview = ({
   handleProposalSelected: (value: boolean) => void;
 }) => {
   const dispatch = useAppDispatch();
+
+  const [depositRequired, setDepositRequired] = useState(0);
+
   const proposalInfo = useAppSelector(
     (state: RootState) => state.gov.proposalDetails
   );
   const networkLogo = useAppSelector(
     (state: RootState) => state.wallet.networks[chainID]?.network.logos.menu
   );
+  const depositParams = useAppSelector(
+    (state: RootState) => state.gov.chains[chainID]?.depositParams.params
+  );
 
   const networks = useAppSelector((state: RootState) => state.wallet.networks);
   const tallyResult = useAppSelector(
@@ -57,8 +65,7 @@ const RightOverview = ({
 
   const isStatusVoting =
     get(proposalInfo, 'status') === 'PROPOSAL_STATUS_VOTING_PERIOD';
-  const { getChainInfo, isFeeAvailable } = useGetChainInfo();
-  const isFeeEnough = isFeeAvailable(chainID);
+  const { getChainInfo } = useGetChainInfo();
   const { chainName } = getChainInfo(chainID);
 
   useEffect(() => {
@@ -92,13 +99,42 @@ const RightOverview = ({
         baseURLs: chainInfo?.config.restURIs,
       })
     );
+
     dispatch(
       getPoolInfo({
         baseURLs: chainInfo.config.restURIs,
         chainID: chainID,
       })
     );
-  }, [proposalId]);
+
+    dispatch(
+      getDepositParams({
+        baseURLs: chainInfo?.config.restURIs,
+        baseURL: chainInfo?.config.rest,
+        chainID: chainID,
+      })
+    );
+  }, [proposalId, chainID]);
+
+  useEffect(() => {
+    if (
+      depositParams?.min_deposit?.length &&
+      proposalInfo?.total_deposit?.length
+    ) {
+      const min_deposit = parseBalance(
+        depositParams.min_deposit,
+        currency.coinDecimals,
+        currency.coinMinimalDenom
+      );
+      const total_deposit = parseBalance(
+        proposalInfo.total_deposit,
+        currency.coinDecimals,
+        currency.coinMinimalDenom
+      );
+      const deposit_required = min_deposit - total_deposit;
+      setDepositRequired(deposit_required);
+    }
+  }, [depositParams, proposalInfo]);
 
   const poolInfo = useAppSelector(
     (state: RootState) => state.staking.chains[chainID]?.pool
@@ -182,7 +218,6 @@ const RightOverview = ({
   const proposalSubmittedOn = getTimeDifference(
     get(proposalInfo, 'submit_time')
   );
-  const [depositRequired] = useState(0);
   const nameToChainIDs = useAppSelector(
     (state: RootState) => state.wallet.nameToChainIDs
   );
@@ -277,7 +312,7 @@ const RightOverview = ({
                         )}
                       </div>
                     </div>
-                    <div className="font-bold text-base text-white">
+                    <div className="font-bold text-base text-white max-w-[450px] whitespace-normal break-words">
                       {get(
                         proposalInfo,
                         'content.title',
@@ -291,20 +326,15 @@ const RightOverview = ({
                     </div>
                   </div>
 
-                  <div className="space-y-6">
-                    <div className="proposal-text-normal">
+                  <div className="space-y-6 max-w-[450px]">
+                    <div className="proposal-text-normal whitespace-normal break-words">
                       {truncatedDescription}
                       {isDescriptionTruncated && '...'}
                     </div>
                     <div className="flex space-x-6">
                       <button
-                        className={
-                          isFeeEnough
-                            ? 'primary-custom-btn'
-                            : 'primary-custom-btn-disabled'
-                        }
+                        className="primary-custom-btn"
                         onClick={() => {
-                          if (!isFeeEnough) return;
                           if (isStatusVoting) {
                             setIsVotePopupOpen(true);
                           } else {

diff --git a/frontend/src/app/(routes)/governance/VotePopup.tsx b/frontend/src/app/(routes)/governance/VotePopup.tsx
@@ -45,6 +45,7 @@ const VotePopup = ({
   const { getChainInfo, getDenomInfo } = useGetChainInfo();
 
   const handleClose = () => {
+    setVoteOption('');
     onClose();
   };
 

diff --git a/frontend/src/app/(routes)/governance/style.css b/frontend/src/app/(routes)/governance/style.css
@@ -232,3 +232,11 @@
 .deposit-popup-btn {
   @apply button w-36 min-h-[44px];
 }
+
+.error-box {
+  @apply flex justify-end mt-2 h-[26px];
+}
+
+.error-chip {
+  @apply text-[12px] rounded-lg bg-[#ff00005b] text-white text-center leading-normal max-w-fit py-1 px-2 truncate;
+}
diff --git a/frontend/src/app/(routes)/staking/components/StakingOverview.tsx b/frontend/src/app/(routes)/staking/components/StakingOverview.tsx
@@ -17,8 +17,8 @@ import { getBalances } from '@/store/features/bank/bankSlice';
 import useGetChainInfo from '@/custom-hooks/useGetChainInfo';
 import Image from 'next/image';
 import {
-  NO_DELEGATIONS_MSG,
   NO_MESSAGES_ILLUSTRATION,
+  OVERVIEW_NO_DELEGATIONS,
 } from '@/utils/constants';
 import { CircularProgress } from '@mui/material';
 import MainTopNav from '@/components/MainTopNav';
@@ -161,15 +161,23 @@ const StakingOverview = () => {
       {(!isAuthzMode && delegationsLoading === 0 && !hasDelegations) ||
       (isAuthzMode && authzDelegationsLoading && !hasAuthzDelegations) ? (
         <div className="no-data">
-          <Image
-            src={NO_MESSAGES_ILLUSTRATION}
-            width={200}
-            height={177}
-            alt={'No Transactions'}
-            draggable={false}
-          />
-          <div className="text-[16px] opacity-50 mt-2 mb-6 leading-normal italic font-extralight text-center">
-            {NO_DELEGATIONS_MSG}
+          <div className="flex-1 flex flex-col justify-center items-center gap-4">
+            <Image
+              src={NO_MESSAGES_ILLUSTRATION}
+              width={400}
+              height={235}
+              alt={'No Transactions'}
+              draggable={false}
+            />
+            <p>{OVERVIEW_NO_DELEGATIONS}</p>
+            <button
+              className="primary-custom-btn"
+              onClick={() => {
+                document.getElementById('select-network')!.click();
+              }}
+            >
+              Select Network
+            </button>
           </div>
         </div>
       ) : null}