Apply useBatchTx to gov2 delegation (#9606)

packages/page-referenda/src/Referenda/Delegate/index.tsx

@@ -1,13 +1,14 @@
 // Copyright 2017-2023 @polkadot/app-referenda authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
+import type { BatchOptions } from '@polkadot/react-hooks/types';
 import type { BN } from '@polkadot/util';
 import type { PalletReferenda, PalletVote, TrackDescription } from '../../types.js';
 
 import React, { useCallback, useMemo, useState } from 'react';
 
 import { Button, ConvictionDropdown, InputAddress, Modal, Toggle, ToggleGroup, TxButton, VoteValue } from '@polkadot/react-components';
-import { useAccounts, useApi, useStepper, useToggle } from '@polkadot/react-hooks';
+import { useAccounts, useApi, useStepper, useToggle, useTxBatch } from '@polkadot/react-hooks';
 import { isFunction } from '@polkadot/util';
 
 import { useTranslation } from '../../translate.js';
@@ -30,6 +31,8 @@ interface Option {
   value: string;
 }
 
+const BATCH_OPTS: BatchOptions = { type: 'force' };
+
 function Delegate ({ className, palletReferenda, palletVote, tracks }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
@@ -92,17 +95,21 @@ function Delegate ({ className, palletReferenda, palletVote, tracks }: Props): R
     []
   );
 
-  const extrinsic = useMemo(
+  const batchInner = useMemo(
     () => balance && conviction >= 0 && toAccount && includeTracks
-      ? isAllTracks
-        ? api.tx.utility.forceBatch(includeTracks.map((trackId) =>
-          api.tx[palletVote as 'convictionVoting'].delegate(trackId, toAccount, conviction, balance)
-        ))
-        : api.tx[palletVote as 'convictionVoting'].delegate(trackId, toAccount, conviction, balance)
+      ? (isAllTracks ? includeTracks : [trackId]).map((trackId) =>
+        api.tx[palletVote as 'convictionVoting'].delegate(trackId, toAccount, conviction, balance)
+      )
       : null,
     [api, balance, conviction, includeTracks, isAllTracks, palletVote, toAccount, trackId]
   );
 
+  const extrinsics = useTxBatch(batchInner, BATCH_OPTS);
+
+  // NOTE The activityFrom & activityTo checks only checks that the hook has received
+  // values, not that any values are contained. If we do a length check, that would mean
+  // we could only delegate to accounts with activity. Instead, we just check that we
+  // have the results from the on-chain data received via useActivity*
   const isStep1Valid = !!(accountId && activityFrom && includeTracks && (includeTracks.length > 0));
   const isStep2Valid = !!(toAccount && activityTo);
 
@@ -259,7 +266,7 @@ function Delegate ({ className, palletReferenda, palletVote, tracks }: Props): R
             )}
             <TxButton
               accountId={accountId}
-              extrinsic={extrinsic}
+              extrinsic={extrinsics}
               icon='code-merge'
               isDisabled={
                 !isStep1Valid ||

packages/react-hooks/src/types.ts

@@ -170,7 +170,7 @@ export interface Judgement {
 
 export type UseJudgements = Judgement[]
 
-export type BatchType = 'all' | 'default';
+export type BatchType = 'all' | 'default' | 'force';
 
 export interface BatchOptions {
   max?: number;

packages/react-hooks/src/useTxBatch.ts

@@ -155,7 +155,9 @@ function createBatches (api: ApiPromise, txs: SubmittableExtrinsic<'promise'>[],
         ? batch[0]
         : type === 'all' && isFunction(api.tx.utility.batchAll)
           ? api.tx.utility.batchAll(batch)
-          : api.tx.utility.batch(batch)
+          : type === 'force' && isFunction(api.tx.utility.forceBatch)
+            ? api.tx.utility.forceBatch(batch)
+            : api.tx.utility.batch(batch)
     );
 }