Support requestStatusFor for usePreimage (#10310)

* support requestStatusFor for usePreimage

* remove console

* Add comment

Author: TarikGul

packages/apps-routing/src/preimages.ts

@@ -11,6 +11,7 @@ export default function create (t: TFunction): Route {
     display: {
       needsAccounts: true,
       needsApi: [
+        'query.preimage.requestStatusFor',
         'query.preimage.statusFor',
         'tx.preimage.notePreimage'
       ]

packages/page-preimages/src/usePreimages.ts

@@ -34,11 +34,12 @@ function filter (records: EventRecord[]): Changes<Hash> {
 
 function usePreimagesImpl (): HexString[] | undefined {
   const { api } = useApi();
-  const startValue = useMapKeys(api.query.preimage.statusFor, EMPTY_PARAMS, OPT_HASH);
+  const startValueStatusFor = useMapKeys(api.query.preimage.statusFor, EMPTY_PARAMS, OPT_HASH);
+  const startvalueRequstStatusFor = useMapKeys(api.query.preimage.requestStatusFor, EMPTY_PARAMS, OPT_HASH);
   const hashes = useEventChanges([
     api.events.preimage.Cleared,
     api.events.preimage.Noted
-  ], filter, startValue);
+  ], filter, startValueStatusFor?.concat(startvalueRequstStatusFor || []));
 
   return useMemo(
     () => hashes?.map((h) => h.toHex()),

packages/react-hooks/src/usePreimage.ts

@@ -159,9 +159,9 @@ function convertDeposit (deposit?: [AccountId, u128] | null): PreimageDeposit |
 }
 
 /** @internal Returns the parameters required for a call to bytes */
-function getBytesParams (interimResult: PreimageStatus, optStatus: Option<PalletPreimageRequestStatus>): BytesParams {
+function getBytesParams (interimResult: PreimageStatus, someOptStatus: Option<PalletPreimageRequestStatus>): BytesParams {
   const result = objectSpread<PreimageStatus>({}, interimResult, {
-    status: optStatus.unwrapOr(null)
+    status: someOptStatus.unwrapOr(null)
   });
 
   if (result.status) {
@@ -218,14 +218,18 @@ function usePreimageImpl (hashOrBounded?: Hash | HexString | FrameSupportPreimag
     [api, hashOrBounded]
   );
 
+  // api.query.preimage.statusFor has been deprecated in favor of api.query.preimage.requestStatusFor.
+  // To ensure we get all preimages correctly we query both storages. see: https://github.com/polkadot-js/apps/pull/10310
   const optStatus = useCall<Option<PalletPreimageRequestStatus>>(!inlineData && paramsStatus && api.query.preimage?.statusFor, paramsStatus);
+  const optRequstStatus = useCall<Option<PalletPreimageRequestStatus>>(!inlineData && paramsStatus && api.query.preimage?.requestStatusFor, paramsStatus);
+  const someOptStatus = optStatus?.isSome ? optStatus : optRequstStatus;
 
   // from the retrieved status (if any), get the on-chain stored bytes
   const { paramsBytes, resultPreimageFor } = useMemo(
-    () => resultPreimageHash && optStatus
-      ? getBytesParams(resultPreimageHash, optStatus)
+    () => resultPreimageHash && someOptStatus
+      ? getBytesParams(resultPreimageHash, someOptStatus)
       : {},
-    [optStatus, resultPreimageHash]
+    [someOptStatus, resultPreimageHash]
   );
 
   const optBytes = useCall<Option<Bytes>>(paramsBytes && api.query.preimage?.preimageFor, paramsBytes);