diff --git a/packages/page-assets/src/Overview/Create/Create.tsx b/packages/page-assets/src/Overview/Create/Create.tsx index a4111a0f71..63a8855eff 100644 --- a/packages/page-assets/src/Overview/Create/Create.tsx +++ b/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 { const { t } = useTranslation(); - const { api } = useApi(); const [step, nextStep, prevStep] = useStepper(); const [asset, setAsset] = useState(null); const [metadata, setMetadata] = useState(null); const [team, setTeam] = useState(null); - const [extrinsic, setExtrinsic] = useState | 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 ( { const { t } = useTranslation(); - const { api } = useApi(); const { hasAccounts } = useAccounts(); const [isOpen, toggleOpen] = useToggle(); @@ -27,7 +25,7 @@ function CreateButton ({ assetIds, className }: Props): React.ReactElement