Use batch management hook for asset create (#5102)

packages/page-assets/src/Overview/Create/Create.tsx

@@ -1,14 +1,13 @@
 // Copyright 2017-2021 @polkadot/app-assets authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { SubmittableExtrinsic } from '@polkadot/api/types';
 import type { AssetId } from '@polkadot/types/interfaces';
 import type { InfoState, MetadataState, TeamState } from './types';
 
-import React, { useEffect, useState } from 'react';
+import React, { useMemo, useState } from 'react';
 
 import { Button, Modal, TxButton } from '@polkadot/react-components';
-import { useApi, useStepper } from '@polkadot/react-hooks';
+import { useStepper, useTxBatch } from '@polkadot/react-hooks';
 
 import { useTranslation } from '../../translate';
 import Info from './Info';
@@ -21,24 +20,22 @@ interface Props {
   onClose: () => void;
 }
 
+const BATCH_OPTIONS = {
+  isBatchAll: true
+};
+
 function Create ({ assetIds, className, onClose }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
-  const { api } = useApi();
   const [step, nextStep, prevStep] = useStepper();
   const [asset, setAsset] = useState<InfoState | null>(null);
   const [metadata, setMetadata] = useState<MetadataState | null>(null);
   const [team, setTeam] = useState<TeamState | null>(null);
-  const [extrinsic, setExtrinsic] = useState<SubmittableExtrinsic<'promise'> | null>(null);
-
-  useEffect((): void => {
-    setExtrinsic(
-      () => asset && metadata && team
-        ? team.teamTx
-          ? api.tx.utility.batchAll([asset.createTx, metadata.metadataTx, team.teamTx])
-          : api.tx.utility.batchAll([asset.createTx, metadata.metadataTx])
-        : null
-    );
-  }, [api, asset, metadata, team]);
+  const txs = useMemo(() => asset && metadata && team && (
+    team.teamTx
+      ? [asset.createTx, metadata.metadataTx, team.teamTx]
+      : [asset.createTx, metadata.metadataTx]
+  ), [asset, metadata, team]);
+  const extrinsic = useTxBatch(txs, BATCH_OPTIONS);
 
   return (
     <Modal

packages/page-assets/src/Overview/Create/index.tsx

@@ -6,8 +6,7 @@ import type { AssetId } from '@polkadot/types/interfaces';
 import React from 'react';
 
 import { Button } from '@polkadot/react-components';
-import { useAccounts, useApi, useToggle } from '@polkadot/react-hooks';
-import { isFunction } from '@polkadot/util';
+import { useAccounts, useToggle } from '@polkadot/react-hooks';
 
 import { useTranslation } from '../../translate';
 import Create from './Create';
@@ -19,7 +18,6 @@ interface Props {
 
 function CreateButton ({ assetIds, className }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
-  const { api } = useApi();
   const { hasAccounts } = useAccounts();
   const [isOpen, toggleOpen] = useToggle();
 
@@ -27,7 +25,7 @@ function CreateButton ({ assetIds, className }: Props): React.ReactElement<Props
     <>
       <Button
         icon='plus'
-        isDisabled={!assetIds || !hasAccounts || !isFunction(api.tx.utility.batchAll)}
+        isDisabled={!assetIds || !hasAccounts}
         label={t<string>('Create')}
         onClick={toggleOpen}
       />

packages/react-hooks/src/useTxBatch.ts

@@ -43,7 +43,7 @@ function createBatches (api: ApiPromise, txs: SubmittableExtrinsic<'promise'>[],
     );
 }
 
-export function useTxBatch (txs?: SubmittableExtrinsic<'promise'>[] | null, options?: Options): SubmittableExtrinsic<'promise'>[] | null {
+export function useTxBatch (txs?: SubmittableExtrinsic<'promise'>[] | null | false, options?: Options): SubmittableExtrinsic<'promise'>[] | null {
   const { api } = useApi();
   const { allAccounts } = useAccounts();
   const [batchSize, setBatchSize] = useState(Math.floor(options?.batchSize || 64));