diff --git a/packages/page-parachains/src/Parathreads/Actions.tsx b/packages/page-parachains/src/Parathreads/Actions.tsx index f7bae9e283..f0fec515a0 100644 --- a/packages/page-parachains/src/Parathreads/Actions.tsx +++ b/packages/page-parachains/src/Parathreads/Actions.tsx @@ -1,14 +1,17 @@ // Copyright 2017-2021 @polkadot/app-parachains authors & contributors // SPDX-License-Identifier: Apache-2.0 +import type BN from 'bn.js'; +import type { ParaId } from '@polkadot/types/interfaces'; import type { OwnedId } from '../types'; import React from 'react'; import { Button } from '@polkadot/react-components'; -import { useApi, useToggle } from '@polkadot/react-hooks'; +import { useApi, useCall, useToggle } from '@polkadot/react-hooks'; import { useTranslation } from '../translate'; +import { LOWEST_PUBLIC_ID } from './constants'; import RegisterId from './RegisterId'; import RegisterThread from './RegisterThread'; @@ -17,11 +20,19 @@ interface Props { ownedIds: OwnedId[]; } +const transformId = { + transform: (nextId: ParaId) => + nextId.isZero() + ? LOWEST_PUBLIC_ID + : nextId +}; + function Actions ({ className, ownedIds }: Props): React.ReactElement { const { t } = useTranslation(); const { api } = useApi(); const [isRegisterOpen, toggleRegisterOpen] = useToggle(); const [isReserveOpen, toggleReserveOpen] = useToggle(); + const nextParaId = useCall(api.query.registrar.nextFreeParaId, [], transformId); return ( @@ -32,7 +43,10 @@ function Actions ({ className, ownedIds }: Props): React.ReactElement { onClick={toggleReserveOpen} /> {isReserveOpen && ( - + )}