diff --git a/packages/page-extrinsics/src/Submission.tsx b/packages/page-extrinsics/src/Submission.tsx index 40e627a801..bed1fbd66a 100644 --- a/packages/page-extrinsics/src/Submission.tsx +++ b/packages/page-extrinsics/src/Submission.tsx @@ -69,13 +69,13 @@ function Selection ({ className }: Props): React.ReactElement { ('encoded call data')} value={extrinsicHex} withCopy /> ('encoded call hash')} value={extrinsicHash} withCopy /> diff --git a/packages/page-storage/src/Selection/Modules.tsx b/packages/page-storage/src/Selection/Modules.tsx index 02e08d6d88..ad51843615 100644 --- a/packages/page-storage/src/Selection/Modules.tsx +++ b/packages/page-storage/src/Selection/Modules.tsx @@ -10,13 +10,13 @@ import type { ComponentProps as Props } from '../types'; import React, { useCallback, useMemo, useState } from 'react'; import { ApiPromise } from '@polkadot/api'; -import { Button, Input, InputStorage } from '@polkadot/react-components'; +import { Button, Input, InputStorage, Output } from '@polkadot/react-components'; import { useApi } from '@polkadot/react-hooks'; import Params from '@polkadot/react-params'; import { getTypeDef } from '@polkadot/types'; import { getSiName } from '@polkadot/types/metadata/util'; import { TypeDefInfo } from '@polkadot/types/types'; -import { isHex, isNull, isUndefined } from '@polkadot/util'; +import { compactStripLength, isHex, isNull, isUndefined, u8aToHex } from '@polkadot/util'; import { useTranslation } from '../translate'; @@ -118,7 +118,7 @@ function extractParams (isIterable: boolean, values: RawParams): [RawParams, boo function Modules ({ onAdd }: Props): React.ReactElement { const { t } = useTranslation(); const { api } = useApi(); - const [{ defaultValues, isIterable, key, params }, setKey] = useState(() => ({ defaultValues: undefined, isIterable: false, key: api.query.timestamp?.now || api.query.system.events, params: [] })); + const [{ defaultValues, isIterable, key, params }, setKey] = useState(() => ({ defaultValues: undefined, isHeadKey: true, isIterable: false, key: api.query.timestamp?.now || api.query.system.events, params: [] })); const [{ isValid, values }, setValues] = useState(() => ({ isValid: true, values: [] })); const [{ blockHash, textHash }, setBlockHash] = useState({ blockHash: null, textHash: '' }); @@ -131,6 +131,32 @@ function Modules ({ onAdd }: Props): React.ReactElement { [api] ); + const [isHeadKey, hexKey] = useMemo( + (): [boolean, string] => { + if (isValid) { + try { + const [params] = extractParams(isIterable, values); + const args = params.map(({ value }) => value); + const isHeadKey = args.length !== ( + key.creator.meta.type.isPlain + ? 0 + : key.creator.meta.type.asMap.hashers.length + ); + const hexKey = isHeadKey && key.creator.iterKey + ? key.creator.iterKey(...args).toHex() + : u8aToHex(compactStripLength(key.creator(...args))[1]); + + return [isHeadKey, hexKey]; + } catch { + // ignore + } + } + + return [false, '0x']; + }, + [isIterable, isValid, key, values] + ); + const _onAdd = useCallback( (): void => { const [params, isAtEnabled] = extractParams(isIterable, values); @@ -205,6 +231,15 @@ function Modules ({ onAdd }: Props): React.ReactElement { onChange={_onChangeAt} placeholder={t('0x...')} /> + ('encoded head key') + : t('encoded storage key') + } + value={hexKey} + withCopy + />