Add remove votes batch extrinsic

src/api/staking.ts

@@ -1,13 +1,14 @@
 //@ts-nocheck
 import { ApiPromise } from "@polkadot/api"
-import { useQuery } from "@tanstack/react-query"
+import { useMutation, useQuery } from "@tanstack/react-query"
 import { QUERY_KEYS } from "utils/queryKeys"
 import BN from "bignumber.js"
 import { getUniques } from "./uniques"
 import { getReferendumInfoOf } from "./democracy"
 import request, { gql } from "graphql-request"
 import { PROVIDERS, useProviderRpcUrlStore } from "./provider"
 import { useRpcProvider } from "providers/rpcProvider"
+import { useAccount } from "sections/web3-connect/Web3Connect.utils"
 
 interface ISubscanData {
   code: number
@@ -327,3 +328,39 @@ const getStakingPositionBalances =
       )),
     }
   }
+
+export const useProcessedVotesIds = () => {
+  const { account } = useAccount()
+  const { api } = useRpcProvider()
+
+  return useMutation(async () => {
+    if (!account) {
+      return []
+    }
+
+    const processedVotesRes = await api.query.staking.processedVotes.entries(
+      account.address,
+    )
+
+    const ids = processedVotesRes.map(([processedVote]) => {
+      const [, id] = processedVote.toHuman() as string[]
+
+      return id
+    })
+
+    return ids
+  })
+}
+
+export const usePositionVotesIds = () => {
+  const { api } = useRpcProvider()
+
+  return useMutation(async (positionId: number) => {
+    const positionVotesRes = await api.query.staking.positionVotes(positionId)
+    const positionVotesIds = positionVotesRes.votes.map((position) =>
+      position[0].toString(),
+    )
+
+    return positionVotesIds
+  })
+}

src/sections/staking/sections/dashboard/components/StakingInputSection/Stake/Stake.tsx

@@ -16,6 +16,7 @@ import { TOAST_MESSAGES } from "state/toasts"
 import { useRpcProvider } from "providers/rpcProvider"
 import { useAccount } from "sections/web3-connect/Web3Connect.utils"
 import { Web3ConnectModalButton } from "sections/web3-connect/modal/Web3ConnectModalButton"
+import { useProcessedVotesIds } from "api/staking"
 
 export const Stake = ({
   loading,
@@ -36,6 +37,8 @@ export const Stake = ({
   const { account } = useAccount()
   const form = useForm<{ amount: string }>()
 
+  const processedVotes = useProcessedVotesIds()
+
   const onSubmit = async (values: FormValues<typeof form>) => {
     const amount = getFixedPointAmount(values.amount, 12).toString()
 
@@ -62,9 +65,18 @@ export const Stake = ({
     }, {} as ToastMessage)
 
     if (isStakePosition) {
+      const processedVoteIds = await processedVotes.mutateAsync()
+
       transaction = await createTransaction(
         {
-          tx: api.tx.staking.increaseStake(positionId, amount),
+          tx: processedVoteIds.length
+            ? api.tx.utility.batchAll([
+                ...processedVoteIds.map((id) =>
+                  api.tx.democracy.removeVote(id),
+                ),
+                api.tx.staking.increaseStake(positionId, amount),
+              ])
+            : api.tx.staking.increaseStake(positionId, amount),
         },
         { toast },
       )
@@ -168,11 +180,7 @@ export const Stake = ({
         <Spacer size={20} />
 
         {account ? (
-          <Button
-            variant="primary"
-            type="submit"
-            disabled={loading || account?.isExternalWalletConnected}
-          >
+          <Button variant="primary" type="submit" disabled={loading}>
             {positionId == null
               ? t("staking.dashboard.form.stake.button")
               : t("staking.dashboard.form.restake.button")}

src/sections/staking/sections/dashboard/components/StakingInputSection/Unstake/Unstake.tsx

@@ -14,6 +14,7 @@ import { QUERY_KEYS } from "utils/queryKeys"
 import { TOAST_MESSAGES } from "state/toasts"
 import { useRpcProvider } from "providers/rpcProvider"
 import { useAccount } from "sections/web3-connect/Web3Connect.utils"
+import { usePositionVotesIds, useProcessedVotesIds } from "api/staking"
 
 export const Unstake = ({
   loading,
@@ -38,7 +39,12 @@ export const Unstake = ({
     },
   })
 
+  const processedVotes = useProcessedVotesIds()
+  const positionVotes = usePositionVotesIds()
+
   const onSubmit = async () => {
+    if (!positionId) return null
+
     const toast = TOAST_MESSAGES.reduce((memo, type) => {
       const msType = type === "onError" ? "onLoading" : type
       memo[type] = (
@@ -56,9 +62,19 @@ export const Unstake = ({
       return memo
     }, {} as ToastMessage)
 
+    const pendingVoteIds = await positionVotes.mutateAsync(positionId)
+    const processedVoteIds = await processedVotes.mutateAsync()
+
+    const voteIds = [...pendingVoteIds, ...processedVoteIds]
+
     const transaction = await createTransaction(
       {
-        tx: api.tx.staking.unstake(positionId!),
+        tx: voteIds.length
+          ? api.tx.utility.batchAll([
+              ...voteIds.map((id) => api.tx.democracy.removeVote(id)),
+              api.tx.staking.unstake(positionId),
+            ])
+          : api.tx.staking.unstake(positionId),
       },
       { toast },
     )
@@ -137,9 +153,7 @@ export const Unstake = ({
           <Button
             variant="blue"
             type="submit"
-            disabled={
-              loading || staked.isZero() || account?.isExternalWalletConnected
-            }
+            disabled={loading || staked.isZero()}
           >
             {t("staking.dashboard.form.unstake.button")}
           </Button>