Update preimage usage to latest Substrate (#8254)

* Update preimage usage to latest Substrate

* Optional storageFee

* Bump deps

* PreImage as HexString

* Fasttrack

package.json

@@ -69,7 +69,7 @@
     "@babel/runtime": "^7.19.4",
     "@crustio/crust-pin": "^1.0.0",
     "@pinata/sdk": "^1.1.26",
-    "@polkadot/dev": "^0.67.144",
+    "@polkadot/dev": "^0.67.147",
     "@types/chart.js": "^2.9.37",
     "@types/file-saver": "^2.0.5",
     "@types/jest": "^29.0.3",
@@ -94,24 +94,24 @@
     "styled-components": "^5.3.6"
   },
   "resolutions": {
-    "@polkadot/api": "^9.5.2",
-    "@polkadot/api-augment": "^9.5.2",
-    "@polkadot/api-base": "^9.5.2",
-    "@polkadot/api-contract": "^9.5.2",
-    "@polkadot/api-derive": "^9.5.2",
+    "@polkadot/api": "^9.6.1",
+    "@polkadot/api-augment": "^9.6.1",
+    "@polkadot/api-base": "^9.6.1",
+    "@polkadot/api-contract": "^9.6.1",
+    "@polkadot/api-derive": "^9.6.1",
     "@polkadot/hw-ledger": "^10.1.11",
     "@polkadot/keyring": "^10.1.11",
     "@polkadot/networks": "^10.1.11",
     "@polkadot/phishing": "^0.18.10",
-    "@polkadot/rpc-augment": "^9.5.2",
-    "@polkadot/rpc-core": "^9.5.2",
-    "@polkadot/rpc-provider": "^9.5.2",
-    "@polkadot/types": "^9.5.2",
-    "@polkadot/types-augment": "^9.5.2",
-    "@polkadot/types-codec": "^9.5.2",
-    "@polkadot/types-create": "^9.5.2",
-    "@polkadot/types-known": "^9.5.2",
-    "@polkadot/types-support": "^9.5.2",
+    "@polkadot/rpc-augment": "^9.6.1",
+    "@polkadot/rpc-core": "^9.6.1",
+    "@polkadot/rpc-provider": "^9.6.1",
+    "@polkadot/types": "^9.6.1",
+    "@polkadot/types-augment": "^9.6.1",
+    "@polkadot/types-codec": "^9.6.1",
+    "@polkadot/types-create": "^9.6.1",
+    "@polkadot/types-known": "^9.6.1",
+    "@polkadot/types-support": "^9.6.1",
     "@polkadot/util": "^10.1.11",
     "@polkadot/util-crypto": "^10.1.11",
     "@polkadot/wasm-crypto": "^6.3.1",

packages/apps-config/package.json

@@ -31,10 +31,10 @@
     "@metaverse-network-sdk/type-definitions": "^0.0.1-13",
     "@parallel-finance/type-definitions": "1.7.13",
     "@phala/typedefs": "0.2.31",
-    "@polkadot/api": "^9.5.2",
-    "@polkadot/api-derive": "^9.5.2",
+    "@polkadot/api": "^9.6.1",
+    "@polkadot/api-derive": "^9.6.1",
     "@polkadot/networks": "^10.1.11",
-    "@polkadot/types": "^9.5.2",
+    "@polkadot/types": "^9.6.1",
     "@polkadot/util": "^10.1.11",
     "@polkadot/x-fetch": "^10.1.11",
     "@polymathnetwork/polymesh-types": "0.0.2",

packages/apps-electron/package.json

@@ -14,7 +14,7 @@
   "dependencies": {
     "@babel/core": "^7.19.3",
     "@babel/polyfill": "^7.12.1",
-    "@polkadot/dev": "^0.67.144",
+    "@polkadot/dev": "^0.67.147",
     "@polkadot/react-components": "^0.121.2-113-x",
     "electron-log": "^4.4.8",
     "electron-updater": "^4.6.5"

packages/apps/package.json

@@ -18,7 +18,7 @@
     "@babel/runtime": "^7.19.4",
     "@polkadot/apps-config": "^0.121.2-113-x",
     "@polkadot/apps-routing": "^0.121.2-113-x",
-    "@polkadot/dev": "^0.67.144",
+    "@polkadot/dev": "^0.67.147",
     "@polkadot/react-api": "^0.121.2-113-x",
     "@polkadot/react-components": "^0.121.2-113-x",
     "@polkadot/react-hooks": "^0.121.2-113-x",

packages/page-accounts/package.json

@@ -19,7 +19,7 @@
     "@polkadot/react-components": "^0.121.2-113-x",
     "@polkadot/react-hooks": "^0.121.2-113-x",
     "@polkadot/util": "^10.1.11",
-    "@polkadot/vanitygen": "^0.52.12",
+    "@polkadot/vanitygen": "^0.52.13",
     "detect-browser": "^5.3.0",
     "file-saver": "^2.0.5"
   },

packages/page-accounts/src/modals/MultisigApprove.tsx

@@ -138,12 +138,16 @@ function MultisigApprove ({ className = '', onClose, ongoing, threshold, who }:
         ? type === 'aye'
           ? isMultiCall && isCallOverride
             ? callData
-              ? multiMod.asMulti.meta.args.length === 6
+              ? multiMod.asMulti.meta.args.length === 5
                 // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-                ? multiMod.asMulti(threshold, others, multisig.when, callData.toHex(), false, weight as any)
-                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                // @ts-ignore (We are doing toHex here since we have a Vec<u8> input)
-                : multiMod.asMulti(threshold, others, multisig.when, callData)
+                ? multiMod.asMulti(threshold, others, multisig.when, callData.toHex(), weight as any)
+                : multiMod.asMulti.meta.args.length === 6
+                  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                  // @ts-ignore (We are doing toHex here since we have a Vec<u8> input)
+                  ? multiMod.asMulti(threshold, others, multisig.when, callData.toHex(), false, weight)
+                  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                  // @ts-ignore (We are doing toHex here since we have a Vec<u8> input)
+                  : multiMod.asMulti(threshold, others, multisig.when, callData)
               : null
             : multiMod.approveAsMulti.meta.args.length === 5
               // eslint-disable-next-line @typescript-eslint/no-unsafe-argument

packages/page-contracts/package.json

@@ -14,6 +14,6 @@
   "version": "0.121.2-113-x",
   "dependencies": {
     "@babel/runtime": "^7.19.4",
-    "@polkadot/api-contract": "^9.5.2"
+    "@polkadot/api-contract": "^9.6.1"
   }
 }

packages/page-democracy/src/Overview/Fasttrack.tsx

@@ -3,18 +3,19 @@
 
 import type { SubmittableExtrinsic } from '@polkadot/api/types';
 import type { Hash, VoteThreshold } from '@polkadot/types/interfaces';
+import type { HexString } from '@polkadot/util/types';
 
 import React, { useEffect, useMemo, useState } from 'react';
 
 import { getFastTrackThreshold } from '@polkadot/apps-config';
 import { Button, Input, InputAddress, InputNumber, Modal, Toggle, TxButton } from '@polkadot/react-components';
 import { useApi, useCall, useCollectiveInstance, useToggle } from '@polkadot/react-hooks';
-import { BN } from '@polkadot/util';
+import { BN, isString } from '@polkadot/util';
 
 import { useTranslation } from '../translate';
 
 interface Props {
-  imageHash: Hash;
+  imageHash: Hash | HexString;
   members: string[];
   threshold: VoteThreshold;
 }
@@ -108,7 +109,7 @@ function Fasttrack ({ imageHash, members, threshold }: Props): React.ReactElemen
               <Input
                 isDisabled
                 label={t<string>('preimage hash')}
-                value={imageHash.toHex()}
+                value={isString(imageHash) ? imageHash : imageHash.toHex()}
               />
             </Modal.Columns>
             <Modal.Columns hint={t<string>('The voting period and delay to apply to this proposal. The threshold is calculated from these values.')}>

packages/page-democracy/src/Overview/PreImage.tsx

@@ -3,29 +3,30 @@
 
 import type { SubmittableExtrinsic } from '@polkadot/api/promise/types';
 import type { Hash } from '@polkadot/types/interfaces';
+import type { HexString } from '@polkadot/util/types';
 
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import styled from 'styled-components';
 
 import { Extrinsic, Input, InputAddress, InputBalance, Modal, TxButton } from '@polkadot/react-components';
 import { useApi } from '@polkadot/react-hooks';
 import { Available } from '@polkadot/react-query';
-import { BN, BN_ZERO } from '@polkadot/util';
+import { BN, BN_ZERO, isString } from '@polkadot/util';
 import { blake2AsHex } from '@polkadot/util-crypto';
 
 import { useTranslation } from '../translate';
 
 interface Props {
   className?: string;
   isImminent?: boolean;
-  imageHash?: Hash;
+  imageHash?: Hash | HexString;
   onClose: () => void;
 }
 
 interface HashState {
   encodedHash: string;
   encodedProposal: string;
-  storageFee: BN;
+  storageFee: BN | null;
 }
 
 const ZERO_HASH = blake2AsHex('');
@@ -34,23 +35,30 @@ function PreImage ({ className = '', imageHash, isImminent = false, onClose }: P
   const { t } = useTranslation();
   const { api, apiDefaultTxSudo } = useApi();
   const [accountId, setAccountId] = useState<string | null>(null);
-  const [{ encodedHash, encodedProposal, storageFee }, setHash] = useState<HashState>({ encodedHash: ZERO_HASH, encodedProposal: '', storageFee: BN_ZERO });
+  const [{ encodedHash, encodedProposal, storageFee }, setHash] = useState<HashState>({ encodedHash: ZERO_HASH, encodedProposal: '', storageFee: null });
   const [proposal, setProposal] = useState<SubmittableExtrinsic>();
 
   useEffect((): void => {
     const encodedProposal = (proposal as SubmittableExtrinsic)?.method.toHex() || '';
-    const storageFee = api.consts.democracy.preimageByteDeposit.mul(
-      encodedProposal
-        ? new BN((encodedProposal.length - 2) / 2)
-        : BN_ZERO
-    );
+    const storageFee = api.consts.democracy.preimageByteDeposit
+      ? (api.consts.democracy.preimageByteDeposit as unknown as BN).mul(
+        encodedProposal
+          ? new BN((encodedProposal.length - 2) / 2)
+          : BN_ZERO
+      )
+      : null;
 
     setHash({ encodedHash: blake2AsHex(encodedProposal), encodedProposal, storageFee });
   }, [api, proposal]);
 
-  const isMatched = imageHash
-    ? imageHash.eq(encodedHash)
-    : true;
+  const isMatched = useMemo(
+    () => imageHash
+      ? isString(imageHash)
+        ? imageHash === encodedHash
+        : imageHash.eq(encodedHash)
+      : true,
+    [encodedHash, imageHash]
+  );
 
   return (
     <Modal
@@ -94,7 +102,7 @@ function PreImage ({ className = '', imageHash, isImminent = false, onClose }: P
             value={encodedHash}
           />
         </Modal.Columns>
-        {!isImminent && (
+        {!isImminent && storageFee && (
           <Modal.Columns hint={t<string>('The calculated storage costs based on the size and the per-bytes fee.')}>
             <InputBalance
               defaultValue={storageFee}

packages/page-democracy/src/Overview/PreImageButton.tsx

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { Hash } from '@polkadot/types/interfaces';
+import type { HexString } from '@polkadot/util/types';
 
 import React from 'react';
 
@@ -12,7 +13,7 @@ import { useTranslation } from '../translate';
 import PreImage from './PreImage';
 
 interface Props {
-  imageHash: Hash;
+  imageHash: Hash | HexString;
   isImminent?: boolean;
 }
 

packages/page-preimages/src/usePreimage.ts

@@ -4,17 +4,18 @@
 import type { ApiPromise } from '@polkadot/api';
 import type { Bytes, Option } from '@polkadot/types';
 import type { Call, Hash } from '@polkadot/types/interfaces';
-import type { PalletPreimageRequestStatus } from '@polkadot/types/lookup';
+import type { FrameSupportPreimagesBounded, PalletPreimageRequestStatus } from '@polkadot/types/lookup';
 import type { HexString } from '@polkadot/util/types';
 import type { Preimage } from './types';
 
 import { useMemo } from 'react';
 
 import { createNamedHook, useApi, useCall } from '@polkadot/react-hooks';
+import { isBn, isString } from '@polkadot/util';
 
-function createResult (api: ApiPromise, preimage: Option<Bytes>, optStatus: Option<PalletPreimageRequestStatus>): Preimage {
-  const bytes = preimage.unwrapOr(null);
+function createResult (api: ApiPromise, optStatus: Option<PalletPreimageRequestStatus>, optBytes: Option<Bytes>): Preimage {
   const status = optStatus.unwrapOr(null);
+  const bytes = optBytes.unwrapOr(null);
   let count = 0;
   let proposal: Call | null = null;
 
@@ -27,7 +28,13 @@ function createResult (api: ApiPromise, preimage: Option<Bytes>, optStatus: Opti
   }
 
   if (status && status.isRequested) {
-    count = status.asRequested.toNumber();
+    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 {
@@ -38,14 +45,54 @@ function createResult (api: ApiPromise, preimage: Option<Bytes>, optStatus: Opti
   };
 }
 
-function usePreimageImpl (hash: Hash | HexString): Preimage | undefined {
+function getParams (hash: Hash | HexString, optStatus: Option<PalletPreimageRequestStatus>): unknown[] {
+  const status = optStatus.unwrapOr(null);
+
+  return [
+    status
+      ? status.isRequested
+        ? [hash, status.asRequested.len.unwrapOr(0)]
+        : [hash, status.asUnrequested.len]
+      : [hash, 0]
+  ];
+}
+
+export function getPreimageHash (hashOrBounded: Hash | HexString | FrameSupportPreimagesBounded): HexString {
+  if (isString(hashOrBounded)) {
+    return hashOrBounded;
+  }
+
+  const bounded = hashOrBounded as FrameSupportPreimagesBounded;
+
+  return bounded.isBasic
+    ? bounded.isInline
+      ? bounded.asInline.hash.toHex()
+      : bounded.isLegacy
+        ? bounded.asLegacy.hash_.toHex()
+        : bounded.asLookup.hash_.toHex()
+    : (hashOrBounded as Hash).toHex();
+}
+
+function usePreimageImpl (hashOrBounded: Hash | HexString | FrameSupportPreimagesBounded): Preimage | undefined {
   const { api } = useApi();
-  const preimage = useCall<Option<Bytes>>(api.query.preimage.preimageFor, [hash]);
-  const status = useCall<Option<PalletPreimageRequestStatus>>(api.query.preimage.statusFor, [hash]);
+
+  const hash = useMemo(
+    () => getPreimageHash(hashOrBounded),
+    [hashOrBounded]
+  );
+
+  const optStatus = useCall<Option<PalletPreimageRequestStatus>>(api.query.preimage.statusFor, [hash]);
+
+  const params = useMemo(
+    () => optStatus && getParams(hash, optStatus),
+    [hash, optStatus]
+  );
+
+  const optBytes = useCall<Option<Bytes>>(params && api.query.preimage.preimageFor, params);
 
   return useMemo(
-    () => preimage && status && createResult(api, preimage, status),
-    [api, preimage, status]
+    () => optBytes && optStatus && createResult(api, optStatus, optBytes),
+    [api, optBytes, optStatus]
   );
 }
 

packages/page-referenda/src/Referenda/RefOngoing.tsx

@@ -1,13 +1,15 @@
 // Copyright 2017-2022 @polkadot/app-referenda authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
+import type { Hash } from '@polkadot/types/interfaces';
 import type { PalletReferendaTrackInfo } from '@polkadot/types/lookup';
 import type { BN } from '@polkadot/util';
+import type { HexString } from '@polkadot/util/types';
 import type { Referendum, ReferendumProps as Props } from '../types';
 
 import React, { useMemo } from 'react';
 
-import usePreimage from '@polkadot/app-preimages/usePreimage';
+import usePreimage, { getPreimageHash } from '@polkadot/app-preimages/usePreimage';
 import { CallExpander, Progress } from '@polkadot/react-components';
 
 import { useTranslation } from '../translate';
@@ -24,13 +26,14 @@ interface Expanded {
     decideEnd: BN | null;
     confirmEnd: BN | null;
   };
+  proposalHash: HexString;
   shortHash: string;
   tallyTotal: BN;
 }
 
 function expandOngoing (info: Referendum['info'], track?: PalletReferendaTrackInfo): Expanded {
   const ongoing = info.asOngoing;
-  const hexHash = ongoing.proposalHash.toHex();
+  const proposalHash = getPreimageHash(ongoing.proposal || (ongoing as unknown as { proposalHash: Hash }).proposalHash);
   let prepareEnd: BN | null = null;
   let decideEnd: BN | null = null;
   let confirmEnd: BN | null = null;
@@ -62,15 +65,16 @@ function expandOngoing (info: Referendum['info'], track?: PalletReferendaTrackIn
       periodEnd: confirmEnd || decideEnd || prepareEnd,
       prepareEnd
     },
-    shortHash: `${hexHash.slice(0, 8)}…${hexHash.slice(-6)}`,
+    proposalHash,
+    shortHash: `${proposalHash.slice(0, 8)}…${proposalHash.slice(-6)}`,
     tallyTotal: ongoing.tally.ayes.add(ongoing.tally.nays)
   };
 }
 
 function Ongoing ({ isMember, members, palletReferenda, palletVote, value: { id, info, isConvictionVote, track } }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
 
-  const { ongoing: { decisionDeposit, proposalHash, submissionDeposit, tally }, periods: { confirmEnd, decideEnd, periodEnd }, shortHash, tallyTotal } = useMemo(
+  const { ongoing: { decisionDeposit, submissionDeposit, tally }, periods: { confirmEnd, decideEnd, periodEnd }, proposalHash, shortHash, tallyTotal } = useMemo(
     () => expandOngoing(info, track),
     [info, track]
   );