Adjust handling of old-style preimages (#8739)

* Adjust handling of old-style preimages * Adjust old columns * Adjust * Don't pass isLatest around ... will break when we change * Cater for old-style preimage retrieval
2023-01-09 22:38:51 +02:00 · 2023-01-09 22:38:51 +02:00 · edc2bab238
commit edc2bab238
parent 55bc7b4aae
42 changed files with 256 additions and 174 deletions
--- a/packages/apps/src/Apps.tsx
+++ b/packages/apps/src/Apps.tsx
@ -59,8 +59,9 @@ export default React.memo(styled(Apps)`
    display: none;
  }

-  .--placeholder {
+  .--tmp {
    background: grey;
-    filter: blur(2px) opacity(0.25);
+    filter: blur(2px);
+    opacity: 0.2;
  }
 `);
--- a/packages/page-accounts/src/Accounts/Summary.tsx
+++ b/packages/page-accounts/src/Accounts/Summary.tsx
@ -21,7 +21,7 @@ function Summary ({ balance, className }: Props) {
    <SummaryBox className={className}>
      <CardSummary label={t<string>('total balance')}>
        <FormatBalance
-          className={balance ? '' : '--placeholder'}
+          className={balance ? '' : '--tmp'}
          value={balance?.total || 1}
        />
      </CardSummary>
@ -30,13 +30,13 @@ function Summary ({ balance, className }: Props) {
        label={t<string>('total transferrable')}
      >
        <FormatBalance
-          className={balance ? '' : '--placeholder'}
+          className={balance ? '' : '--tmp'}
          value={balance?.transferrable || 1}
        />
      </CardSummary>
      <CardSummary label={t<string>('total locked')}>
        <FormatBalance
-          className={balance ? '' : '--placeholder'}
+          className={balance ? '' : '--tmp'}
          value={balance?.locked || 1}
        />
      </CardSummary>
--- a/packages/page-alliance/src/Members/Summary.tsx
+++ b/packages/page-alliance/src/Members/Summary.tsx
@ -36,13 +36,13 @@ function Summary ({ className, members, rule }: Props): React.ReactElement<Props
              )
              : t<string>('yes')
            : t<string>('no')
-          : <span className='--placeholder'>{t<string>('no')}</span>
+          : <span className='--tmp'>{t<string>('no')}</span>
        }
      </CardSummary>
      <CardSummary label={t<string>('members')}>
        {members
          ? formatNumber(members.length)
-          : <span className='--placeholder'>99</span>
+          : <span className='--tmp'>99</span>
        }
      </CardSummary>
    </SummaryBox>
--- a/packages/page-council/src/Overview/Summary.tsx
+++ b/packages/page-council/src/Overview/Summary.tsx
@ -28,19 +28,19 @@ function Summary ({ bestNumber, className = '', electionsInfo, hasElections }: P
        <CardSummary label={t<string>('seats')}>
          {electionsInfo
            ? <>{formatNumber(electionsInfo.members.length)}{electionsInfo.desiredSeats && <>&nbsp;/&nbsp;{formatNumber(electionsInfo.desiredSeats)}</>}</>
-            : <span className='--placeholder'>99</span>}
+            : <span className='--tmp'>99</span>}
        </CardSummary>
        {hasElections && (
          <>
            <CardSummary label={t<string>('runners up')}>
              {electionsInfo
                ? <>{formatNumber(electionsInfo.runnersUp.length)}{electionsInfo.desiredRunnersUp && <>&nbsp;/&nbsp;{formatNumber(electionsInfo.desiredRunnersUp)}</>}</>
-                : <span className='--placeholder'>99 / 99</span>}
+                : <span className='--tmp'>99 / 99</span>}
            </CardSummary>
            <CardSummary label={t<string>('candidates')}>
              {electionsInfo
                ? formatNumber(electionsInfo.candidateCount)
-                : <span className='--placeholder'>99</span>}
+                : <span className='--tmp'>99</span>}
            </CardSummary>
          </>
        )}
--- a/packages/page-council/src/Overview/Voters.tsx
+++ b/packages/page-council/src/Overview/Voters.tsx
@ -30,7 +30,7 @@ function Voters ({ balance, voters }: Props): React.ReactElement<Props> {
    <>
      <td className='expand'>
        <ExpanderScroll
-          className={balance ? '' : '--placeholder'}
+          className={balance ? '' : '--tmp'}
          renderChildren={renderVoters}
          summary={<FormatBalance value={balance} />}
        />
@ -38,7 +38,7 @@ function Voters ({ balance, voters }: Props): React.ReactElement<Props> {
      <td className='number'>
        {voters
          ? formatNumber(voters.length)
-          : <span className='--placeholder'>123</span>
+          : <span className='--tmp'>123</span>
        }
      </td>
    </>
--- a/packages/page-democracy/src/Overview/Summary.tsx
+++ b/packages/page-democracy/src/Overview/Summary.tsx
@ -35,24 +35,24 @@ function Summary ({ referendumCount }: Props): React.ReactElement<Props> {
        <CardSummary label={t<string>('proposals')}>
          {activeProposals
            ? formatNumber(activeProposals.length)
-            : <span className='--placeholder'>99</span>}
+            : <span className='--tmp'>99</span>}
        </CardSummary>
        <CardSummary label={t<string>('total')}>
          {publicPropCount
            ? formatNumber(publicPropCount)
-            : <span className='--placeholder'>99</span>}
+            : <span className='--tmp'>99</span>}
        </CardSummary>
      </section>
      <section>
        <CardSummary label={t<string>('referenda')}>
          {referendumCount !== undefined
            ? formatNumber(referendumCount)
-            : <span className='--placeholder'>99</span>}
+            : <span className='--tmp'>99</span>}
        </CardSummary>
        <CardSummary label={t<string>('total')}>
          {referendumTotal
            ? formatNumber(referendumTotal)
-            : <span className='--placeholder'>99</span>}
+            : <span className='--tmp'>99</span>}
        </CardSummary>
      </section>
      <section className='media--1100'>
--- a/packages/page-explorer/src/BlockInfo/Summary.tsx
+++ b/packages/page-explorer/src/BlockInfo/Summary.tsx
@ -56,7 +56,7 @@ function Summary ({ events, maxBlockWeight, signedBlock }: Props): React.ReactEl
          <>
            <CardSummary label={t<string>('deposits')}>
              <FormatBalance
-                className={deposits ? '' : '--placeholder'}
+                className={deposits ? '' : '--tmp'}
                value={deposits || BN_ONE}
              />
            </CardSummary>
@ -65,7 +65,7 @@ function Summary ({ events, maxBlockWeight, signedBlock }: Props): React.ReactEl
              label={t<string>('transfers')}
            >
              <FormatBalance
-                className={transfers ? '' : '--placeholder'}
+                className={transfers ? '' : '--tmp'}
                value={transfers || BN_ONE}
              />
            </CardSummary>
@ -84,19 +84,19 @@ function Summary ({ events, maxBlockWeight, signedBlock }: Props): React.ReactEl
        >
          {weight
            ? formatNumber(weight)
-            : <span className='--placeholder'>999,999,999</span>}
+            : <span className='--tmp'>999,999,999</span>}
        </CardSummary>
      </section>
      <section className='media--900'>
        <CardSummary label={t<string>('event count')}>
          {events
            ? formatNumber(events.length)
-            : <span className='--placeholder'>99</span>}
+            : <span className='--tmp'>99</span>}
        </CardSummary>
        <CardSummary label={t<string>('extrinsic count')}>
          {signedBlock
            ? formatNumber(signedBlock.block.extrinsics.length)
-            : <span className='--placeholder'>99</span>}
+            : <span className='--tmp'>99</span>}
        </CardSummary>
      </section>
    </SummaryBox>
--- a/packages/page-explorer/src/SummarySession.tsx
+++ b/packages/page-explorer/src/SummarySession.tsx
@ -53,7 +53,7 @@ function SummarySession ({ className, withEra = true, withSession = true }: Prop
                <CardSummary label={sessionLabel}>
                  #{sessionInfo
                    ? formatNumber(sessionInfo.currentIndex)
-                    : <span className='--placeholder'>123</span>}
+                    : <span className='--tmp'>123</span>}
                  {withEra && activeEraStart && <div className='isSecondary'>&nbsp;</div>}
                </CardSummary>
              )
@ -87,10 +87,10 @@ function SummarySession ({ className, withEra = true, withSession = true }: Prop
                >
                  #{sessionInfo
                    ? formatNumber(sessionInfo.activeEra)
-                    : <span className='--placeholder'>123</span>}
+                    : <span className='--tmp'>123</span>}
                  {activeEraStart && (
                    <Elapsed
-                      className={`${sessionInfo ? '' : '--placeholder'} isSecondary`}
+                      className={`${sessionInfo ? '' : '--tmp'} isSecondary`}
                      value={activeEraStart}
                    >
                      &nbsp;{t('elapsed')}
--- a/packages/page-parachains/src/Auctions/Summary.tsx
+++ b/packages/page-parachains/src/Auctions/Summary.tsx
@ -32,14 +32,14 @@ function Summary ({ auctionInfo, className, lastWinners }: Props): React.ReactEl
        <CardSummary label={t<string>('auctions')}>
          {auctionInfo
            ? formatNumber(auctionInfo.numAuctions)
-            : <span className='--placeholder'>99</span>}
+            : <span className='--tmp'>99</span>}
        </CardSummary>
        <CardSummary label={t<string>('active')}>
          {auctionInfo
            ? auctionInfo.leasePeriod
              ? t<string>('yes')
              : t<string>('no')
-            : <span className='--placeholder'>{t<string>('no')}</span>
+            : <span className='--tmp'>{t<string>('no')}</span>
          }
        </CardSummary>
      </section>
--- a/packages/page-parachains/src/Crowdloan/Fund.tsx
+++ b/packages/page-parachains/src/Crowdloan/Fund.tsx
@ -148,7 +148,7 @@ function Fund ({ bestHash, bestNumber, className = '', isOngoing, leasePeriod, v
              )}
            </>
          )
-          : <span className='--placeholder'>999</span>
+          : <span className='--tmp'>999</span>
        }
      </td>
      <td className='button media--1000'>
--- a/packages/page-parachains/src/Crowdloan/Summary.tsx
+++ b/packages/page-parachains/src/Crowdloan/Summary.tsx
@ -28,7 +28,7 @@ function Summary ({ activeCap, activeRaised, className, fundCount, isLoading, to
    <SummaryBox className={className}>
      <CardSummary label={t<string>('funds')}>
        {fundCount === undefined
-          ? <span className='--placeholder'>99</span>
+          ? <span className='--tmp'>99</span>
          : formatNumber(fundCount)}
      </CardSummary>
      <CardSummary
@ -40,7 +40,7 @@ function Summary ({ activeCap, activeRaised, className, fundCount, isLoading, to
          value: isLoading ? BN_TWO : activeRaised
        }}
      >
-        <span className={isLoading ? '--placeholder' : ''}>
+        <span className={isLoading ? '--tmp' : ''}>
          <FormatBalance
            value={activeRaised}
            withCurrency={false}
@ -62,7 +62,7 @@ function Summary ({ activeCap, activeRaised, className, fundCount, isLoading, to
          value: isLoading ? BN_TWO : totalRaised
        }}
      >
-        <span className={isLoading ? '--placeholder' : ''}>
+        <span className={isLoading ? '--tmp' : ''}>
          <FormatBalance
            value={totalRaised}
            withCurrency={false}
--- a/packages/page-parachains/src/Overview/Parachain.tsx
+++ b/packages/page-parachains/src/Overview/Parachain.tsx
@ -105,7 +105,7 @@ function Parachain ({ bestNumber, className = '', id, lastBacked, lastInclusion,
      </td>
      <td className='number media--1400'>
        <Expander
-          className={validators ? '' : '--placeholder'}
+          className={validators ? '' : '--tmp'}
          renderChildren={valRender}
          summary={t<string>('Val. Group {{group}} ({{count}})', {
            replace: {
--- a/packages/page-parachains/src/Overview/Summary.tsx
+++ b/packages/page-parachains/src/Overview/Summary.tsx
@ -28,7 +28,7 @@ function Summary ({ leasePeriod, parachainCount, proposalCount, upcomingCount }:
        <CardSummary label={t<string>('parachains')}>
          {isNumber(parachainCount)
            ? formatNumber(parachainCount)
-            : <span className='--placeholder'>99</span>}
+            : <span className='--tmp'>99</span>}
        </CardSummary>
        <CardSummary
          className='media--1000'
@ -36,7 +36,7 @@ function Summary ({ leasePeriod, parachainCount, proposalCount, upcomingCount }:
        >
          {isNumber(upcomingCount)
            ? formatNumber(upcomingCount)
-            : <span className='--placeholder'>99</span>}
+            : <span className='--tmp'>99</span>}
        </CardSummary>
        {isNumber(proposalCount) && (
          <CardSummary
@ -51,7 +51,7 @@ function Summary ({ leasePeriod, parachainCount, proposalCount, upcomingCount }:
        <CardSummary label={t<string>('current lease')}>
          {leasePeriod
            ? formatNumber(leasePeriod.currentPeriod)
-            : <span className='--placeholder'>99</span>}
+            : <span className='--tmp'>99</span>}
        </CardSummary>
        <CardSummary
          className='media--1200'
--- a/packages/page-preimages/src/Preimages/Call.tsx
+++ b/packages/page-preimages/src/Preimages/Call.tsx
@ -11,41 +11,55 @@ import { useTranslation } from '../translate';

 interface Props {
  className?: string;
+  noTmp?: boolean;
  value?: Preimage;
 }

+const NULL_ADDR = '0x1234567812345678123456781234567812345678123456781234567812345678';
+
 function PreimageCall ({ className = '', value }: Props): React.ReactElement<Props> {
  const { t } = useTranslation();

  return (
    <>
      <td className={`${className} all`}>
-        {value && (
-          <>
-            {value.proposal && (
-              <CallExpander
-                labelHash={t<string>('call')}
-                value={value.proposal}
-              />
-            )}
-            {
-              value.proposalError
+        {value && value.isCompleted
+          ? (
+            <>
+              {value.proposal && (
+                <CallExpander
+                  labelHash={t<string>('call')}
+                  value={value.proposal}
+                />
+              )}
+              {value.proposalError
                ? <MarkError content={value.proposalError} />
                : value.proposalWarning
                  ? <MarkWarning content={value.proposalWarning} />
                  : null
-            }
-          </>
-        )}
+              }
+            </>
+          )
+          : <div className='--tmp'>balances.transfer</div>
+        }
      </td>
      <td className='address media--1300'>
-        {value?.deposit && (
-          <AddressMini
-            balance={value.deposit.amount}
-            value={value.deposit.who}
-            withBalance
-          />
-        )}
+        {value && value.isCompleted
+          ? value.deposit
+            ? (
+              <AddressMini
+                balance={value.deposit.amount}
+                value={value.deposit.who}
+                withBalance
+              />
+            )
+            : null
+          : (
+            <AddressMini
+              className='--tmp'
+              value={NULL_ADDR}
+            />
+          )}
      </td>
    </>
  );
--- a/packages/page-preimages/src/Preimages/Preimage.tsx
+++ b/packages/page-preimages/src/Preimages/Preimage.tsx
@ -25,12 +25,9 @@ function Preimage ({ className, value }: Props): React.ReactElement<Props> {
      <Hash value={value} />
      <Call value={info} />
      <td className='number media--1000'>
-        {info
-          ? info.bytes
-            ? formatNumber(info.bytes.length)
-            : null
-          : <span className='--placeholder'>999,999</span>
-        }
+        {info && info.proposalLength
+          ? formatNumber(info.proposalLength)
+          : <span className='--tmp'>999,999</span>}
      </td>
      <td className='preimage-status together media--1200'>
        {info
@ -40,8 +37,7 @@ function Preimage ({ className, value }: Props): React.ReactElement<Props> {
              <Free value={info} />
            </>
          )
-          : <span className='--placeholder'>Unrequested</span>
-        }
+          : <span className='--tmp'>Unrequested</span>}
      </td>
    </tr>
  );
--- a/packages/page-preimages/src/Preimages/Summary.tsx
+++ b/packages/page-preimages/src/Preimages/Summary.tsx
@ -20,7 +20,7 @@ function Summary ({ className, hashes }: Props): React.ReactElement<Props> {
    <SummaryBox className={className}>
      <CardSummary label={t<string>('images')}>
        {hashes === undefined
-          ? <span className='--placeholder'>99</span>
+          ? <span className='--tmp'>99</span>
          : formatNumber(hashes.length)
        }
      </CardSummary>
--- a/packages/page-preimages/src/Preimages/index.tsx
+++ b/packages/page-preimages/src/Preimages/index.tsx
@ -27,7 +27,7 @@ function Hashes ({ className }: Props): React.ReactElement<Props> {
  const headerRef = useRef<([React.ReactNode?, string?, number?] | false)[]>([
    [t('preimages'), 'start', 2],
    [undefined, 'media--1300'],
-    [t('size'), 'media--1000'],
+    [t('length'), 'media--1000'],
    [t('status'), 'start media--1200']
  ]);

--- a/packages/page-preimages/src/types.ts
+++ b/packages/page-preimages/src/types.ts
@ -8,18 +8,28 @@ import type { Registry } from '@polkadot/types/types';
 import type { BN } from '@polkadot/util';
 import type { HexString } from '@polkadot/util/types';

-export interface Preimage {
-  deposit?: {
-    amount: BN;
-    who: string;
-  };
+export interface PreimageDeposit {
+  amount: BN;
+  who: string;
+}
+
+export interface PreimageStatus {
  count: number;
-  bytes: Bytes | null;
-  proposal: Call | null;
-  proposalError: string | null;
+  deposit?: PreimageDeposit;
+  isCompleted: boolean;
  proposalHash: HexString;
-  proposalLength: BN;
-  proposalWarning: string | null;
+  proposalLength?: BN;
  registry: Registry;
  status: PalletPreimageRequestStatus | null;
 }
+
+export interface PreimageBytes {
+  bytes?: Bytes | null;
+  proposal?: Call | null;
+  proposalError?: string | null;
+  proposalWarning?: string | null;
+}
+
+export interface Preimage extends PreimageBytes, PreimageStatus {
+  // just the interfaces above
+}
--- a/packages/page-preimages/src/usePreimage.ts
+++ b/packages/page-preimages/src/usePreimage.ts
@ -2,37 +2,70 @@
 // SPDX-License-Identifier: Apache-2.0

 import type { ApiPromise } from '@polkadot/api';
-import type { Bytes, Option } from '@polkadot/types';
-import type { AccountId32, Call, Hash } from '@polkadot/types/interfaces';
+import type { Bytes } from '@polkadot/types';
+import type { AccountId, Balance, Call, Hash } from '@polkadot/types/interfaces';
 import type { FrameSupportPreimagesBounded, PalletPreimageRequestStatus } from '@polkadot/types/lookup';
-import type { BN } from '@polkadot/util';
+import type { ITuple } from '@polkadot/types/types';
 import type { HexString } from '@polkadot/util/types';
-import type { Preimage } from './types';
+import type { Preimage, PreimageDeposit, PreimageStatus } from './types';

 import { useMemo } from 'react';

 import { createNamedHook, useApi, useCall } from '@polkadot/react-hooks';
-import { BN_ZERO, isBn, isString } from '@polkadot/util';
+import { Option } from '@polkadot/types';
+import { BN, BN_ZERO, formatNumber, isString, objectSpread } from '@polkadot/util';

-interface BytesParams {
-  deposit: [AccountId32, BN] | null;
-  params: [[hexHash: HexString, length: BN]]
+type BytesParams = [[proposalHash: HexString, proposalLength: BN]] | [proposalHash: HexString];
+
+interface InterimResult {
+  paramsBytes?: BytesParams;
+  preimageStatus?: PreimageStatus;
 }

-function createResult (api: ApiPromise, optStatus: Option<PalletPreimageRequestStatus>, optBytes: Option<Bytes>, { deposit, params: [[proposalHash, proposalLength]] }: BytesParams): Preimage {
-  const status = optStatus.unwrapOr(null);
+type Result = 'unknown' | 'hash' | 'hashAndLen';
+
+export function getParamType (api: ApiPromise): Result {
+  if ((
+    api.query.preimage &&
+    api.query.preimage.preimageFor &&
+    api.query.preimage.preimageFor.creator.meta.type.isMap
+  )) {
+    const { type } = api.registry.lookup.getTypeDef(api.query.preimage.preimageFor.creator.meta.type.asMap.key);
+
+    if (type === 'H256') {
+      return 'hash';
+    } else if (type === '(H256,u32)') {
+      return 'hashAndLen';
+    } else {
+      // we are clueless :()
+    }
+  }
+
+  return 'unknown';
+}
+
+function createResult (api: ApiPromise, preimageStatus: PreimageStatus, optBytes: Option<Bytes>): Preimage {
  const bytes = optBytes.unwrapOr(null);
-  let count = 0;
  let proposal: Call | null = null;
  let proposalError: string | null = null;
  let proposalWarning: string | null = null;
+  let proposalLength: BN | undefined;

  if (bytes) {
    try {
      proposal = api.registry.createType('Call', bytes.toU8a(true));

-      if (proposal.encodedLength !== proposalLength.toNumber()) {
-        proposalWarning = 'Call length does not match on-chain stored preimage length';
+      const callLength = proposal.encodedLength;
+
+      if (preimageStatus.proposalLength) {
+        const storeLength = preimageStatus.proposalLength.toNumber();
+
+        if (callLength !== storeLength) {
+          proposalWarning = `Decoded call length does not match on-chain stored preimage length (${formatNumber(callLength)} bytes vs ${formatNumber(storeLength)} bytes)`;
+        }
+      } else {
+        // for the old style, we set the actual length
+        proposalLength = new BN(callLength);
      }
    } catch (error) {
      console.error(error);
@ -43,57 +76,78 @@ function createResult (api: ApiPromise, optStatus: Option<PalletPreimageRequestS
    proposalWarning = 'No preimage bytes found';
  }

-  if (status && status.isRequested) {
-    const req = status.asRequested;
-
-    // the original version has asRequested as the actual count
-    // (current/later versions has it as a structure)
-    count = isBn(req)
-      ? req.toNumber()
-      : req.count.toNumber();
-  }
-
-  return {
+  return objectSpread<Preimage>({}, preimageStatus, {
    bytes,
-    count,
-    deposit: deposit
-      ? { amount: deposit[1], who: deposit[0].toString() }
-      : undefined,
+    isCompleted: true,
    proposal,
    proposalError,
-    proposalHash,
-    proposalLength,
+    proposalLength: proposalLength || preimageStatus.proposalLength,
    proposalWarning,
+    registry: api.registry
+  });
+}
+
+function convertDeposit (deposit?: [AccountId, Balance] | null): PreimageDeposit | undefined {
+  return deposit
+    ? {
+      amount: deposit[1],
+      who: deposit[0].toString()
+    }
+    : undefined;
+}
+
+function getBytesParams (api: ApiPromise, hash: Hash | HexString, optStatus: Option<PalletPreimageRequestStatus>): InterimResult {
+  const isHashParam = getParamType(api) === 'hash';
+  const status = optStatus.unwrapOr(null);
+  const preimageStatus: PreimageStatus = {
+    count: 0,
+    isCompleted: false,
+    proposalHash: isString(hash)
+      ? hash
+      : hash.toHex(),
    registry: api.registry,
    status
  };
-}

-function getBytesParams (hash: Hash | HexString, optStatus: Option<PalletPreimageRequestStatus>): BytesParams {
-  const status = optStatus.unwrapOr(null);
-  const hexHash = isString(hash)
-    ? hash
-    : hash.toHex();
+  if (status) {
+    if (status.isRequested) {
+      const asRequested = status.asRequested;

-  if (!status) {
-    return {
-      deposit: null,
-      params: [[hexHash, BN_ZERO]]
-    };
-  } else if (status.isRequested) {
-    const { deposit, len } = status.asRequested;
+      if (asRequested instanceof Option) {
+        // FIXME Cannot recall how to deal with these
+        // (unlike Unrequested below, didn't have an example)
+      } else {
+        const { count, deposit, len } = asRequested;

-    return {
-      deposit: deposit.unwrapOr(null),
-      params: [[hexHash, len.unwrapOr(BN_ZERO)]]
-    };
+        preimageStatus.count = count.toNumber();
+        preimageStatus.deposit = convertDeposit(deposit.unwrapOr(null));
+        preimageStatus.proposalLength = len.unwrapOr(BN_ZERO);
+      }
+    } else if (status.isUnrequested) {
+      const asUnrequested = status.asUnrequested;
+
+      if (asUnrequested instanceof Option) {
+        preimageStatus.deposit = convertDeposit(
+          // old-style conversion
+          (asUnrequested as Option<ITuple<[AccountId, Balance]>>).unwrapOr(null)
+        );
+      } else {
+        const { deposit, len } = status.asUnrequested;
+
+        preimageStatus.deposit = convertDeposit(deposit);
+        preimageStatus.proposalLength = len;
+      }
+    } else {
+      // for future reference...
+      console.error('Unhandled preimage status type: ', status.type);
+    }
  }

-  const { deposit, len } = status.asUnrequested;
-
  return {
-    deposit,
-    params: [[hexHash, len]]
+    paramsBytes: isHashParam
+      ? [preimageStatus.proposalHash]
+      : [[preimageStatus.proposalHash, preimageStatus.proposalLength || BN_ZERO]],
+    preimageStatus
  };
 }

@ -120,26 +174,32 @@ function usePreimageImpl (hashOrBounded?: Hash | HexString | FrameSupportPreimag
  const paramsStatus = useMemo(
    // we need a hash _and_ be on the newest supported version of the pallet
    // (after the application of bounded calls)
-    () => api.query.preimage?.preimageFor?.creator.meta.type.isMap && api.registry.lookup.getTypeDef(api.query.preimage.preimageFor.creator.meta.type.asMap.key).type === '(H256,u32)' && hashOrBounded
+    () => hashOrBounded
      ? [getPreimageHash(hashOrBounded)]
      : undefined,
-    [api, hashOrBounded]
+    [hashOrBounded]
  );

  const optStatus = useCall<Option<PalletPreimageRequestStatus>>(paramsStatus && api.query.preimage?.statusFor, paramsStatus);

  // from the retrieved status (if any), get the on-chain stored bytes
-  const paramsBytes = useMemo(
-    () => paramsStatus && optStatus && getBytesParams(paramsStatus[0], optStatus),
-    [optStatus, paramsStatus]
+  const { paramsBytes, preimageStatus } = useMemo(
+    () => paramsStatus && optStatus
+      ? getBytesParams(api, paramsStatus[0], optStatus)
+      : {},
+    [api, optStatus, paramsStatus]
  );

-  const optBytes = useCall<Option<Bytes>>(paramsBytes && api.query.preimage?.preimageFor, paramsBytes && paramsBytes.params);
+  const optBytes = useCall<Option<Bytes>>(paramsBytes && api.query.preimage?.preimageFor, paramsBytes);

  // extract all the preimage info we have retrieved
  return useMemo(
-    () => optBytes && optStatus && paramsBytes && createResult(api, optStatus, optBytes, paramsBytes),
-    [api, optBytes, optStatus, paramsBytes]
+    () => preimageStatus
+      ? optBytes
+        ? createResult(api, preimageStatus, optBytes)
+        : preimageStatus
+      : undefined,
+    [api, optBytes, preimageStatus]
  );
 }

--- a/packages/page-preimages/src/usePreimages.ts
+++ b/packages/page-preimages/src/usePreimages.ts
@ -10,6 +10,8 @@ import { useMemo } from 'react';

 import { createNamedHook, useApi, useEventChanges, useMapKeys } from '@polkadot/react-hooks';

+const EMPTY_PARAMS: unknown[] = [];
+
 const OPT_HASH = {
  transform: (keys: StorageKey<[Hash]>[]): Hash[] =>
    keys.map(({ args: [hash] }) => hash)
@ -32,7 +34,7 @@ function filter (records: EventRecord[]): Changes<Hash> {

 function usePreimagesImpl (): HexString[] | undefined {
  const { api } = useApi();
-  const startValue = useMapKeys(api.query.preimage.statusFor, [], OPT_HASH);
+  const startValue = useMapKeys(api.query.preimage.statusFor, EMPTY_PARAMS, OPT_HASH);
  const hashes = useEventChanges([
    api.events.preimage.Cleared,
    api.events.preimage.Noted
--- a/packages/page-ranked/src/Members/Summary.tsx
+++ b/packages/page-ranked/src/Members/Summary.tsx
@ -22,7 +22,7 @@ function Summary ({ className, members }: Props): React.ReactElement<Props> {
    <SummaryBox className={className}>
      <CardSummary label={t<string>('members')}>
        {members === undefined
-          ? <span className='--placeholder'>99</span>
+          ? <span className='--tmp'>99</span>
          : formatNumber(members.length)
        }
      </CardSummary>
--- a/packages/page-referenda/src/Referenda/Summary.tsx
+++ b/packages/page-referenda/src/Referenda/Summary.tsx
@ -29,13 +29,13 @@ function Summary ({ className, issuanceActive, issuanceInactive, issuanceTotal,
      <section>
        <CardSummary label={t<string>('active')}>
          {refActive === undefined
-            ? <span className='--placeholder'>99</span>
+            ? <span className='--tmp'>99</span>
            : formatNumber(refActive)
          }
        </CardSummary>
        <CardSummary label={t<string>('total')}>
          {refCount === undefined
-            ? <span className='--placeholder'>99</span>
+            ? <span className='--tmp'>99</span>
            : formatNumber(refCount)
          }
        </CardSummary>
@ -66,7 +66,7 @@ function Summary ({ className, issuanceActive, issuanceInactive, issuanceTotal,
          )}
          <CardSummary label={t<string>('total issuance')}>
            <FormatBalance
-              className={issuanceTotal ? '' : '--placeholder'}
+              className={issuanceTotal ? '' : '--tmp'}
              value={issuanceTotal || 1}
              withSi
            />
--- a/packages/page-scheduler/src/Scheduled.tsx
+++ b/packages/page-scheduler/src/Scheduled.tsx
@ -20,7 +20,6 @@ interface Props {

 function Scheduled ({ bestNumber, className = '', value: { blockNumber, call, maybeId, maybePeriodic, preimageHash } }: Props): React.ReactElement<Props> {
  const preimage = usePreimage(preimageHash);
-
  const period = maybePeriodic.unwrapOr(null);
  const name = maybeId.unwrapOr(null);

--- a/packages/page-staking/src/Bags/Bag.tsx
+++ b/packages/page-staking/src/Bags/Bag.tsx
@ -81,7 +81,7 @@ function Bag ({ bagLower, bagUpper, info, nodesOwn }: Props): React.ReactElement
      </td>
      <td className='number'>
        {isLoading
-          ? <span className='--placeholder'>99</span>
+          ? <span className='--tmp'>99</span>
          : list.length
            ? formatNumber(list.length)
            : null
--- a/packages/page-staking/src/Bags/Summary.tsx
+++ b/packages/page-staking/src/Bags/Summary.tsx
@ -34,20 +34,20 @@ function Summary ({ bags, className = '', mapOwn }: Props): React.ReactElement<P
      <CardSummary label={t<string>('total bags')}>
        {bags
          ? formatNumber(bags.length)
-          : <span className='--placeholder'>99</span>
+          : <span className='--tmp'>99</span>
        }
      </CardSummary>
      <section>
        <CardSummary label={t<string>('total nodes')}>
          {mapOwn
            ? formatNumber(total)
-            : <span className='--placeholder'>99</span>
+            : <span className='--tmp'>99</span>
          }
        </CardSummary>
        <CardSummary label={t<string>('my nodes')}>
          {isNumber(myCount)
            ? formatNumber(myCount)
-            : <span className='--placeholder'>99</span>
+            : <span className='--tmp'>99</span>
          }
        </CardSummary>
      </section>
--- a/packages/page-staking/src/Payouts/Stash.tsx
+++ b/packages/page-staking/src/Payouts/Stash.tsx
@ -49,7 +49,7 @@ function Stash ({ className = '', historyDepth, payout: { available, rewards, st
      <td className='number'><FormatBalance value={available} /></td>
      <td className='number'>
        <BlockToTime
-          className={eraBlocks ? '' : '--placeholder'}
+          className={eraBlocks ? '' : '--tmp'}
          value={eraBlocks || BN_MILLION}
        />
      </td>
--- a/packages/page-staking/src/Pools/Pool.tsx
+++ b/packages/page-staking/src/Pools/Pool.tsx
@ -60,17 +60,17 @@ function Pool ({ className = '', members, ownAccounts, params, poolId }: Props):
          <div className={`${isExpanded ? '' : 'clamp'}`}>
            {info
              ? info.metadata
-              : <span className='--placeholder'>This is a pool placeholder</span>}
+              : <span className='--tmp'>This is a pool placeholder</span>}
          </div>
        </td>
        <td className='number media--1100'>
          {info
            ? info.bonded.state.type
-            : <span className='--placeholder'>Destroying</span>}
+            : <span className='--tmp'>Destroying</span>}
        </td>
        <td className='number'>
          <FormatBalance
-            className={info ? '' : '--placeholder'}
+            className={info ? '' : '--tmp'}
            value={info?.bonded.points || 1}
          />
        </td>
--- a/packages/page-staking/src/Targets/Summary.tsx
+++ b/packages/page-staking/src/Targets/Summary.tsx
@ -71,7 +71,7 @@ function Summary ({ avgStaked, lastEra, lowStaked, minNominated, minNominatorBon
          progress={progressStake}
        >
          <FormatBalance
-            className={progressStake.isBlurred ? '--placeholder' : ''}
+            className={progressStake.isBlurred ? '--tmp' : ''}
            value={progressStake.total}
            withSi
          />
@ -83,7 +83,7 @@ function Summary ({ avgStaked, lastEra, lowStaked, minNominated, minNominatorBon
            ? Number.isFinite(stakedReturn)
              ? <>{stakedReturn.toFixed(1)}%</>
              : '-.-%'
-            : <span className='--placeholder'>0.0%</span>
+            : <span className='--tmp'>0.0%</span>
          }
        </CardSummary>
      </section>
@ -92,7 +92,7 @@ function Summary ({ avgStaked, lastEra, lowStaked, minNominated, minNominatorBon
          label={`${t<string>('lowest / avg staked')}`}
          progress={progressAvg}
        >
-          <span className={progressAvg.isBlurred ? '--placeholder' : ''}>
+          <span className={progressAvg.isBlurred ? '--tmp' : ''}>
            <FormatBalance
              value={progressAvg.value}
              withCurrency={false}
@ -100,7 +100,7 @@ function Summary ({ avgStaked, lastEra, lowStaked, minNominated, minNominatorBon
            />
            &nbsp;/&nbsp;
            <FormatBalance
-              className={progressAvg.isBlurred ? '--placeholder' : ''}
+              className={progressAvg.isBlurred ? '--tmp' : ''}
              value={progressAvg.total}
              withSi
            />
@ -136,7 +136,7 @@ function Summary ({ avgStaked, lastEra, lowStaked, minNominated, minNominatorBon
      <section>
        <CardSummary label={t<string>('last reward')}>
          <FormatBalance
-            className={lastReward ? '' : '--placeholder'}
+            className={lastReward ? '' : '--tmp'}
            value={lastReward || 1}
            withSi
          />
--- a/packages/page-staking/src/Validators/Address/StakeOther.tsx
+++ b/packages/page-staking/src/Validators/Address/StakeOther.tsx
@ -73,7 +73,7 @@ function StakeOther ({ nominators, stakeOther }: Props): React.ReactElement<Prop
    <td className='expand all'>
      {(!rewarded || rewarded[0] !== 0) && (
        <ExpanderScroll
-          className={rewarded ? '' : '--placeholder'}
+          className={rewarded ? '' : '--tmp'}
          renderChildren={rewarded && rewarded[1]}
          summary={
            <FormatBalance
--- a/packages/page-staking/src/Validators/Address/index.tsx
+++ b/packages/page-staking/src/Validators/Address/index.tsx
@ -167,7 +167,7 @@ function Address ({ address, className = '', filterName, hasQueries, isElected,
          )
        }
        <td className='number'>
-          {commission || <span className='--placeholder'>50.00%</span>}
+          {commission || <span className='--tmp'>50.00%</span>}
        </td>
        {isMain && (
          <td className='number'>
--- a/packages/page-staking/src/Validators/Summary.tsx
+++ b/packages/page-staking/src/Validators/Summary.tsx
@ -29,7 +29,7 @@ function Summary ({ className = '', stakingOverview, targets: { counterForNomina
        <CardSummary label={t<string>('validators')}>
          {stakingOverview
            ? <>{formatNumber(stakingOverview.validators.length)}&nbsp;/&nbsp;{formatNumber(stakingOverview.validatorCount)}</>
-            : <span className='--placeholder'>99&nbsp;/&nbsp;99</span>
+            : <span className='--tmp'>999 / 999</span>
          }
        </CardSummary>
        <CardSummary
@ -38,7 +38,7 @@ function Summary ({ className = '', stakingOverview, targets: { counterForNomina
        >
          {waitingIds
            ? formatNumber(waitingIds.length)
-            : <span className='--placeholder'>99</span>
+            : <span className='--tmp'>99</span>
          }
        </CardSummary>
        <CardSummary
@ -58,7 +58,7 @@ function Summary ({ className = '', stakingOverview, targets: { counterForNomina
                )}
              </>
            )
-            : <span className='--placeholder'>99</span>
+            : <span className='--tmp'>999 / 999</span>
          }
        </CardSummary>
      </section>
--- a/packages/page-tech-comm/src/Overview/Summary.tsx
+++ b/packages/page-tech-comm/src/Overview/Summary.tsx
@ -26,12 +26,12 @@ function Summary ({ className = '', members, proposalHashes, type }: Props): Rea
        <CardSummary label={t<string>('proposals')}>
          {proposalHashes
            ? formatNumber(proposalHashes?.length)
-            : <span className='--placeholder'>99</span>}
+            : <span className='--tmp'>99</span>}
        </CardSummary>
        <CardSummary label={t<string>('total')}>
          {proposalCount
            ? formatNumber(proposalCount)
-            : <span className='--placeholder'>99</span>}
+            : <span className='--tmp'>99</span>}
        </CardSummary>
      </section>
    </SummaryBox>
--- a/packages/page-treasury/src/Overview/Summary.tsx
+++ b/packages/page-treasury/src/Overview/Summary.tsx
@ -39,7 +39,7 @@ function Summary ({ approvalCount, proposalCount }: Props): React.ReactElement<P
          label={t<string>('open')}
        >
          {proposalCount === undefined
-            ? <span className='--placeholder'>99</span>
+            ? <span className='--tmp'>99</span>
            : formatNumber(proposalCount)}
        </CardSummary>
        <CardSummary
@ -47,7 +47,7 @@ function Summary ({ approvalCount, proposalCount }: Props): React.ReactElement<P
          label={t<string>('approved')}
        >
          {approvalCount === undefined
-            ? <span className='--placeholder'>99</span>
+            ? <span className='--tmp'>99</span>
            : formatNumber(approvalCount)}
        </CardSummary>
        <CardSummary
@ -55,7 +55,7 @@ function Summary ({ approvalCount, proposalCount }: Props): React.ReactElement<P
          label={t<string>('total')}
        >
          {totalProposals === undefined
-            ? totalProposals
+            ? <span className='--tmp'>99</span>
            : formatNumber(totalProposals)}
        </CardSummary>
      </section>
@ -87,7 +87,7 @@ function Summary ({ approvalCount, proposalCount }: Props): React.ReactElement<P
          label={t<string>('next burn')}
        >
          <FormatBalance
-            className={burn ? '' : '--placeholder'}
+            className={burn ? '' : '--tmp'}
            value={burn || 1}
            withSi
          />
@ -103,7 +103,7 @@ function Summary ({ approvalCount, proposalCount }: Props): React.ReactElement<P
            value: hasSpendable ? spendable : BN_TWO
          }}
        >
-          <span className={hasSpendable ? '' : '--placeholder'}>
+          <span className={hasSpendable ? '' : '--tmp'}>
            <FormatBalance
              value={spendable || BN_TWO}
              withSi
--- a/packages/page-whitelist/src/Hashes/Summary.tsx
+++ b/packages/page-whitelist/src/Hashes/Summary.tsx
@ -20,7 +20,7 @@ function Summary ({ className, hashes }: Props): React.ReactElement<Props> {
    <SummaryBox className={className}>
      <CardSummary label={t<string>('hashes')}>
        {hashes === undefined
-          ? <span className='--placeholder'>99</span>
+          ? <span className='--tmp'>99</span>
          : formatNumber(hashes.length)
        }
      </CardSummary>
--- a/packages/react-components/src/AddressInfo.tsx
+++ b/packages/react-components/src/AddressInfo.tsx
@ -242,7 +242,7 @@ function createBalanceItems (formatIndex: number, lookup: Record<string, string>
    <React.Fragment key={0}>
      <Label label={withLabel ? t<string>('total') : ''} />
      <FormatBalance
-        className={`result ${balancesAll ? '' : '--placeholder'}`}
+        className={`result ${balancesAll ? '' : '--tmp'}`}
        formatIndex={formatIndex}
        labelPost={<IconVoid />}
        value={balancesAll ? balancesAll.freeBalance.add(balancesAll.reservedBalance) : 1}
--- a/packages/react-components/src/CardSummary.tsx
+++ b/packages/react-components/src/CardSummary.tsx
@ -72,7 +72,7 @@ function CardSummary ({ children, className = '', help, label, progress }: Props
            <>
              {isTimed && !children && (
                <BlockToTime
-                  className={progress.isBlurred ? '--placeholder' : ''}
+                  className={progress.isBlurred ? '--tmp' : ''}
                  value={progress.total}
                />
              )}
@ -87,7 +87,7 @@ function CardSummary ({ children, className = '', help, label, progress }: Props
                    }`
                    : (
                      <BlockToTime
-                        className={`${progress.isBlurred ? '--placeholder' : ''} timer`}
+                        className={`${progress.isBlurred ? '--tmp' : ''} timer`}
                        value={progress.total.sub(progress.value)}
                      />
                    )
--- a/packages/react-components/src/Progress.tsx
+++ b/packages/react-components/src/Progress.tsx
@ -48,7 +48,7 @@ function Progress ({ className = '', isBlurred, isDisabled, total, value }: Prop
  const drawAngle = (angle === 360) ? 360 : angle % 360;

  return (
-    <div className={`ui--Progress ${isDisabled ? 'isDisabled' : ''} ${isBlurred ? '--placeholder' : ''} ${className}`}>
+    <div className={`ui--Progress ${isDisabled ? 'isDisabled' : ''} ${isBlurred ? '--tmp' : ''} ${className}`}>
      <div className='background highlight--bg' />
      <Clip
        angle={
--- a/packages/react-query/src/BestFinalized.tsx
+++ b/packages/react-query/src/BestFinalized.tsx
@ -20,7 +20,7 @@ function BestFinalized ({ children, className = '', label }: Props): React.React
  const bestNumberFinalized = useCall<BlockNumber>(api.derive.chain.bestNumberFinalized);

  return (
-    <div className={`${className} ${bestNumberFinalized ? '' : '--placeholder'}`}>
+    <div className={`${className} ${bestNumberFinalized ? '' : '--tmp'}`}>
      {label || ''}{
        <Digits value={formatNumber(bestNumberFinalized || 1234)} />
      }{children}
--- a/packages/react-query/src/BestNumber.tsx
+++ b/packages/react-query/src/BestNumber.tsx
@ -22,7 +22,7 @@ function BestNumber ({ children, className = '', isFinalized, label, withPound }
  const bestNumber = useCall<BlockNumber>(isApiReady && (isFinalized ? api.derive.chain.bestNumberFinalized : api.derive.chain.bestNumber));

  return (
-    <div className={`${className} ${bestNumber ? '' : '--placeholder'}`}>
+    <div className={`${className} ${bestNumber ? '' : '--tmp'}`}>
      {label || ''}{withPound && '#'}{
        <Digits value={formatNumber(bestNumber || 1234)} />
      }{children}
--- a/packages/react-query/src/TimeNow.tsx
+++ b/packages/react-query/src/TimeNow.tsx
@ -26,7 +26,7 @@ function TimeNow ({ children, className = '', label, value }: Props): React.Reac
  );

  return (
-    <div className={`${className} ${hasValue ? '' : '--placeholder'}`}>
+    <div className={`${className} ${hasValue ? '' : '--tmp'}`}>
      {label || ''}
      <Elapsed value={hasValue ? now : Date.now()} />
      {children}
--- a/packages/react-query/src/TotalInactive.tsx
+++ b/packages/react-query/src/TotalInactive.tsx
@ -21,7 +21,7 @@ function TotalInactive ({ children, className = '', label }: Props): React.React
    <div className={className}>
      {label || ''}
      <FormatBalance
-        className={inactiveIssuance ? '' : '--placeholder'}
+        className={inactiveIssuance ? '' : '--tmp'}
        value={inactiveIssuance || 1}
        withSi
      />
--- a/packages/react-query/src/TotalIssuance.tsx
+++ b/packages/react-query/src/TotalIssuance.tsx
@ -21,7 +21,7 @@ function TotalIssuance ({ children, className = '', label }: Props): React.React
    <div className={className}>
      {label || ''}
      <FormatBalance
-        className={totalIssuance ? '' : '--placeholder'}
+        className={totalIssuance ? '' : '--tmp'}
        value={totalIssuance || 1}
        withSi
      />