Align unique id trigger to assets (#7174)

packages/page-assets/src/useAssetIds.ts

@@ -2,38 +2,39 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { Changes } from '@polkadot/react-hooks/useEventChanges';
-import type { StorageKey } from '@polkadot/types';
-import type { AssetId, EventRecord } from '@polkadot/types/interfaces';
+import type { StorageKey, u32 } from '@polkadot/types';
+import type { EventRecord } from '@polkadot/types/interfaces';
 
 import { createNamedHook, useApi, useEventChanges, useMapKeys } from '@polkadot/react-hooks';
 
 const keyOptions = {
-  transform: (keys: StorageKey<[AssetId]>[]): AssetId[] =>
+  transform: (keys: StorageKey<[u32]>[]): u32[] =>
     keys.map(({ args: [id] }) => id)
 };
 
-function filter (records: EventRecord[]): Changes<AssetId> {
-  const added: AssetId[] = [];
-  const removed: AssetId[] = [];
+function filter (records: EventRecord[]): Changes<u32> {
+  const added: u32[] = [];
+  const removed: u32[] = [];
 
   records.forEach(({ event: { data: [id], method } }): void => {
-    if (method === 'Created') {
-      added.push(id as AssetId);
+    if (method === 'Created' || method === 'ForceCreated') {
+      added.push(id as u32);
     } else {
-      removed.push(id as AssetId);
+      removed.push(id as u32);
     }
   });
 
   return { added, removed };
 }
 
-function useAssetIdsImpl (): AssetId[] | undefined {
+function useAssetIdsImpl (): u32[] {
   const { api } = useApi();
   const startValue = useMapKeys(api.query.assets.asset, keyOptions);
 
   return useEventChanges([
     api.events.assets.Created,
-    api.events.assets.Destroyed
+    api.events.assets.Destroyed,
+    api.events.assets.ForceCreated
   ], filter, startValue);
 }
 

packages/page-nfts/src/useCollectionIds.ts

@@ -1,26 +1,43 @@
 // Copyright 2017-2022 @polkadot/app-nfts authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { StorageKey } from '@polkadot/types';
-import type { AssetId } from '@polkadot/types/interfaces';
+import type { Changes } from '@polkadot/react-hooks/useEventChanges';
+import type { StorageKey, u32 } from '@polkadot/types';
+import type { EventRecord } from '@polkadot/types/interfaces';
 
-import { createNamedHook, useApi, useEventTrigger, useMapKeys } from '@polkadot/react-hooks';
+import { createNamedHook, useApi, useEventChanges, useMapKeys } from '@polkadot/react-hooks';
 
-const options = {
-  transform: (keys: StorageKey<[AssetId]>[]): AssetId[] =>
+const keyOptions = {
+  transform: (keys: StorageKey<[u32]>[]): u32[] =>
     keys
-      .map(({ args: [assetId] }) => assetId)
+      .map(({ args: [id] }) => id)
       .sort((a, b) => a.cmp(b))
 };
 
-function useCollectionIdsImpl (): AssetId[] | undefined {
-  const { api } = useApi();
-  const trigger = useEventTrigger([
-    api.events.uniques.Created,
-    api.events.uniques.Destroyed
-  ]);
+function filter (records: EventRecord[]): Changes<u32> {
+  const added: u32[] = [];
+  const removed: u32[] = [];
 
-  return useMapKeys(api.query.uniques.class, options, trigger.blockHash);
+  records.forEach(({ event: { data: [id], method } }): void => {
+    if (method === 'Created' || method === 'ForceCreated') {
+      added.push(id as u32);
+    } else {
+      removed.push(id as u32);
+    }
+  });
+
+  return { added, removed };
+}
+
+function useCollectionIdsImpl (): u32[] {
+  const { api } = useApi();
+  const startValue = useMapKeys(api.query.uniques.class, keyOptions);
+
+  return useEventChanges([
+    api.events.uniques.Created,
+    api.events.uniques.Destroyed,
+    api.events.uniques.ForceCreated
+  ], filter, startValue);
 }
 
 export default createNamedHook('useCollectionIds', useCollectionIdsImpl);

packages/react-hooks/src/useEventChanges.ts

@@ -1,9 +1,9 @@
 // Copyright 2017-2022 @polkadot/react-hooks authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { u32 } from '@polkadot/types';
 import type { EventRecord } from '@polkadot/types/interfaces';
 import type { Codec } from '@polkadot/types/types';
+import type { BN } from '@polkadot/util';
 import type { EventCheck } from './useEventTrigger';
 
 import { useEffect, useState } from 'react';
@@ -38,8 +38,8 @@ function interleave <T extends Codec> (existing: T[], { added = [], removed = []
     .entries(map)
     .sort((a, b) =>
       // for BN-like objects, we use the built-in compare for sorting
-      isFunction((a[1] as unknown as u32).cmp)
-        ? (a[1] as unknown as u32).cmp(b[1] as unknown as u32)
+      isFunction((a[1] as unknown as BN).cmp)
+        ? (a[1] as unknown as BN).cmp(b[1] as unknown as BN)
         : a[0].localeCompare(b[0])
     )
     .map(([, v]) => v);