feat: update voting

Author: marslavish

templates/chain-admin/components/voting/Proposal.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react';
 import {
   Box,
   Button,
@@ -13,18 +14,18 @@ import {
 import {
   Proposal as IProposal,
   ProposalStatus,
-} from 'interchain-query/cosmos/gov/v1/gov';
+} from '@interchainjs/react/cosmos/gov/v1/gov';
+import Markdown from 'react-markdown';
+import { useChain } from '@interchain-kit/react';
+
+import { useVoting, Votes } from '@/hooks';
 import {
   exponentiate,
   formatDate,
   getExponentFromAsset,
   getNativeAsset,
   percent,
 } from '@/utils';
-import Markdown from 'react-markdown';
-import { useEffect, useState } from 'react';
-import { useVoting, Votes } from '@/hooks';
-import { useChain } from '@cosmos-kit/react';
 
 // export declare enum VoteOption {
 //   /** VOTE_OPTION_UNSPECIFIED - VOTE_OPTION_UNSPECIFIED defines a no-op vote option. */
@@ -64,8 +65,8 @@ export function Proposal({
   const [showMore, setShowMore] = useState(false);
   const [voteType, setVoteType] = useState<GovernanceVoteType>();
 
-  const { assets } = useChain(chainName);
-  const coin = getNativeAsset(assets!);
+  const { assetList } = useChain(chainName);
+  const coin = getNativeAsset(assetList);
   const exponent = getExponentFromAsset(coin);
   const { isVoting, onVote } = useVoting({ chainName, proposal });
 

templates/chain-admin/components/voting/Voting.tsx

@@ -1,10 +1,10 @@
 import { useEffect, useState } from 'react';
-import { useChain } from '@cosmos-kit/react';
+import { useChain } from '@interchain-kit/react';
 import {
   Proposal as IProposal,
   ProposalStatus,
   TallyResult,
-} from 'interchain-query/cosmos/gov/v1/gov';
+} from '@interchainjs/react/cosmos/gov/v1/gov';
 import {
   BasicModal,
   Box,
@@ -13,10 +13,11 @@ import {
   Text,
   useColorModeValue,
 } from '@interchain-ui/react';
+import { chains } from 'chain-registry';
+
 import { useModal, useVotingData } from '@/hooks';
 import { Proposal } from '@/components';
 import { formatDate } from '@/utils';
-import { chains } from 'chain-registry';
 
 function status(s: ProposalStatus) {
   switch (s) {
@@ -65,7 +66,9 @@ export function Voting({ chainName }: VotingProps) {
       if (proposal.status === ProposalStatus.PROPOSAL_STATUS_VOTING_PERIOD) {
         (async () => {
           for (const { address } of chain?.apis?.rest || []) {
-            const api = `${address}/cosmos/gov/v1/proposals/${Number(proposal.id)}/tally`;
+            const api = `${address}/cosmos/gov/v1/proposals/${Number(
+              proposal.id
+            )}/tally`;
             try {
               const tally = (await (await fetch(api)).json()).tally;
               if (!tally) {

templates/chain-admin/hooks/voting/index.ts

@@ -1,5 +1,3 @@
 export * from './useModal';
 export * from './useVoting';
 export * from './useVotingData';
-export * from './useQueryHooks';
-export * from './useRpcQueryClient';

templates/chain-admin/hooks/voting/useQueryHooks.ts

@@ -1,13 +1,12 @@
-import { useState } from 'react';
-import { cosmos } from 'interchain-query';
-import { toast } from '@interchain-ui/react';
-import { useChain } from '@cosmos-kit/react';
-import { coins, StdFee } from '@cosmjs/stargate';
-import { Proposal } from 'interchain-query/cosmos/gov/v1/gov';
-import { getNativeAsset } from '@/utils';
-import { useVotingTx } from './useVotingTx';
+import { useChain } from '@interchain-kit/react';
+import { Proposal } from '@interchainjs/react/cosmos/gov/v1/gov';
+import { useVote } from '@interchainjs/react/cosmos/gov/v1beta1/tx.rpc.react';
+import { MsgVote } from '@interchainjs/react/cosmos/gov/v1beta1/tx';
+import { defaultContext } from '@tanstack/react-query';
+import { StdFee } from '@interchainjs/react/types';
 
-const MessageComposer = cosmos.gov.v1beta1.MessageComposer;
+import { getNativeAsset } from '@/utils';
+import { useSigningClient, useToastHandlers } from '../common';
 
 export type useVotingOptions = {
   chainName: string;
@@ -21,11 +20,18 @@ export type onVoteOptions = {
 };
 
 export function useVoting({ chainName, proposal }: useVotingOptions) {
-  const { tx } = useVotingTx(chainName);
-  const { address, assets } = useChain(chainName);
-  const [isVoting, setIsVoting] = useState(false);
+  const { address, assetList } = useChain(chainName);
+  const toastHandlers = useToastHandlers();
+  const { data: signingClient } = useSigningClient(chainName);
+  const { mutate: vote, isLoading: isVoting } = useVote({
+    clientResolver: signingClient,
+    options: {
+      context: defaultContext,
+      ...toastHandlers,
+    },
+  });
 
-  const coin = getNativeAsset(assets!);
+  const coin = getNativeAsset(assetList);
 
   async function onVote({
     option,
@@ -34,35 +40,39 @@ export function useVoting({ chainName, proposal }: useVotingOptions) {
   }: onVoteOptions) {
     if (!address || !option) return;
 
-    const msg = MessageComposer.fromPartial.vote({
+    const msg = MsgVote.fromPartial({
       option,
       voter: address,
       proposalId: proposal.id,
     });
 
     const fee: StdFee = {
-      amount: coins('1000', coin.base),
+      amount: [
+        {
+          denom: coin.base,
+          amount: '0',
+        },
+      ],
       gas: '100000',
     };
 
-    try {
-      setIsVoting(true);
-      const res = await tx([msg], { fee });
-      if (res.error) {
-        error();
-        console.error(res.error);
-        toast.error(res.errorMsg);
-      } else {
-        success();
-        toast.success('Vote successful');
+    vote(
+      {
+        signerAddress: address,
+        message: msg,
+        fee,
+        memo: 'Vote',
+      },
+      {
+        onSuccess: () => {
+          success();
+        },
+        onError: (err) => {
+          error();
+          console.error(err);
+        },
       }
-    } catch (e) {
-      error();
-      console.error(e);
-      toast.error('Vote failed');
-    } finally {
-      setIsVoting(false);
-    }
+    );
   }
 
   return { isVoting, onVote };