Merge pull request #364 from Plex-Engineer/optimisation-of-staking-an…

…d-gov

New user staking hook for Gov and minor changes in voting page

app/governance/proposal/page.tsx

@@ -28,6 +28,8 @@ import useStaking from "@/hooks/staking/useStaking";
 import { VoteBarGraph } from "../components/votingChart/voteGraph";
 import useScreenSize from "@/hooks/helpers/useScreenSize";
 import Container from "@/components/container/container";
+import useUserStaking from "@/hooks/staking/userStaking";
+import { formatBalance } from "@/utils/formatting";
 
 const VOTE_OPTION_COLORS = {
   [VoteOption.YES]: [
@@ -56,10 +58,21 @@ export default function Page() {
     chainId: chainId,
   });
 
-  const { userStaking } = useStaking({
+  // const { userStaking } = useStaking({
+  //   chainId: chainId,
+  //   userEthAddress: signer?.account.address,
+  // });
+  const userData = useUserStaking({
     chainId: chainId,
     userEthAddress: signer?.account.address,
   });
+  const totalStakedAmount =
+    userData.userStaking && userData?.userStaking.length > 0
+      ? userData?.userStaking.reduce((totalStaked: number, entry) => {
+          const balanceAsInt: number = Number(formatBalance(entry.balance, 18));
+          return totalStaked + balanceAsInt;
+        }, 0)
+      : 0;
   const { isMobile } = useScreenSize();
   // transaction
   function castVote(proposalId: number, voteOption: VoteOption | null) {
@@ -261,7 +274,11 @@ export default function Page() {
                   <div className={styles.VotingButton}>
                     <Button
                       width={200}
-                      disabled={!isActive || selectedVote == null}
+                      disabled={
+                        !isActive ||
+                        selectedVote == null ||
+                        totalStakedAmount <= 0
+                      }
                       onClick={() =>
                         castVote(proposal.proposal_id, selectedVote)
                       }
@@ -394,9 +411,15 @@ export default function Page() {
                   <div className={styles.circle} />
                 </div>
                 <div className={styles.txt}>
-                  <Text font="rm_mono" size={isMobile ? "md" : "x-sm"}>
-                    Voting Ended on{" "}
-                  </Text>
+                  {isActive ? (
+                    <Text font="rm_mono" size={isMobile ? "md" : "x-sm"}>
+                      Voting closes at{" "}
+                    </Text>
+                  ) : (
+                    <Text font="rm_mono" size={isMobile ? "md" : "x-sm"}>
+                      Voting Ended on{" "}
+                    </Text>
+                  )}
                 </div>
                 <div>
                   <Text font="rm_mono" size={isMobile ? "md" : "x-sm"}>

hooks/staking/interfaces/hookParams.ts

@@ -30,3 +30,11 @@ export interface StakingHookReturn {
     cantoBalance: string;
   };
 }
+
+export interface UserStakingHookReturn {
+  userStaking: {
+    validator_address: string;
+    balance: string;
+    rewards: string;
+  }[];
+}

hooks/staking/userStaking.ts

@@ -0,0 +1,62 @@
+import { useQuery } from "react-query";
+import { getAllUserStakingData } from "./helpers/userStaking";
+import {
+  StakingHookInputParams,
+  UserStakingHookReturn,
+} from "./interfaces/hookParams";
+
+export default function useUserStaking(
+  params: StakingHookInputParams,
+  options?: { refetchInterval?: number }
+): UserStakingHookReturn {
+  const { data: staking, isLoading } = useQuery(
+    ["staking", params.chainId, params.userEthAddress],
+    async () => {
+      const [userStaking] = await Promise.all([
+        getAllUserStakingData(params.chainId, params.userEthAddress),
+      ]);
+
+      if (userStaking.error) {
+        return {
+          userStaking: [],
+        };
+      }
+      const userValidators: {
+        validator_address: string;
+        balance: string;
+        rewards: string;
+      }[] = [];
+      // console.log(userStaking);
+      // go through each user delegation
+      if (
+        userStaking.data.delegations &&
+        userStaking.data.delegations.length > 0
+      ) {
+        userStaking.data.delegations.forEach((delegation) => {
+          const rewards =
+            userStaking.data.rewards.rewards
+              .find(
+                (rew) =>
+                  rew.validator_address ===
+                  delegation.delegation.validator_address
+              )
+              ?.reward?.find((bal) => bal.denom === "acanto")?.amount ?? "0";
+
+          userValidators.push({
+            validator_address: delegation.delegation.validator_address,
+            balance: delegation.balance.amount,
+            rewards: rewards,
+          });
+        });
+      }
+
+      return { userStaking: userValidators };
+    },
+    {
+      onError: (error) => {
+        console.error(error);
+      },
+    }
+  );
+  return staking ? staking : { userStaking: [] };
+}