Simplify query generation

Instead of manually enumerating all possible combinations of networks and runtimes, creating queries for them, and then checking if they are enabled, we can just compile the list of enabled combinations, and generated queries just for them. Doing this simplifies our code. (And now we can add more networks and runtimes without manually having to touch this code.) Normally, calling React hooks from callbacks and other conditional code is not a good idea, but in this case, we can be sure that the number of enabled combinations will never change during runtime (since it's hard-coded in route-utils.ts), su we can just ignore the TS warning about abusing the rules of hooks.
oasisprotocol · May 25, 2023 · 465a8de · 465a8de
1 parent c23e88c
commit 465a8de
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 77 deletions.
diff --git a/src/app/pages/SearchResultsPage/hooks.ts b/src/app/pages/SearchResultsPage/hooks.ts
@@ -6,8 +6,8 @@ import {
   useGetRuntimeBlockByHeight,
   useGetRuntimeTransactionsTxHash,
   Runtime,
+  Layer,
 } from '../../../oasis-indexer/api'
-import { Network } from '../../../types/network'
 import { RouteUtils } from '../../utils/route-utils'
 
 function isDefined<T>(item: T): item is NonNullable<T> {
@@ -23,32 +23,23 @@ export type SearchQueries = {
   evmBech32Account: ConditionalResults<RuntimeAccount>
 }
 export function useBlocksConditionally(blockHeight: string | undefined): ConditionalResults<RuntimeBlock> {
-  const queries = [
-    useGetRuntimeBlockByHeight(Network.mainnet, Runtime.emerald, parseInt(blockHeight!), {
-      query: {
-        enabled:
-          !!blockHeight && RouteUtils.getEnabledLayersForNetwork(Network.mainnet).includes(Runtime.emerald),
-      },
-    }),
-    useGetRuntimeBlockByHeight(Network.mainnet, Runtime.sapphire, parseInt(blockHeight!), {
-      query: {
-        enabled:
-          !!blockHeight && RouteUtils.getEnabledLayersForNetwork(Network.mainnet).includes(Runtime.sapphire),
-      },
-    }),
-    useGetRuntimeBlockByHeight(Network.testnet, Runtime.emerald, parseInt(blockHeight!), {
-      query: {
-        enabled:
-          !!blockHeight && RouteUtils.getEnabledLayersForNetwork(Network.testnet).includes(Runtime.emerald),
-      },
-    }),
-    useGetRuntimeBlockByHeight(Network.testnet, Runtime.sapphire, parseInt(blockHeight!), {
-      query: {
-        enabled:
-          !!blockHeight && RouteUtils.getEnabledLayersForNetwork(Network.testnet).includes(Runtime.sapphire),
-      },
-    }),
-  ]
+  const queries = RouteUtils.getEnabledScopes()
+    .filter(scope => scope.layer !== Layer.consensus)
+    .map(scope =>
+      /**
+       * Normally, calling React hooks from callbacks and other conditional code
+       * is not a good idea, but in this case, we can be sure that the number of
+       * enabled combinations will never change during runtime
+       * (since it's hard-coded in route-utils.ts), su we can just ignore
+       * the TS warning about abusing the rules of hooks.
+       */
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      useGetRuntimeBlockByHeight(scope.network, scope.layer as Runtime, parseInt(blockHeight!), {
+        query: {
+          enabled: !!blockHeight,
+        },
+      }),
+    )
   return {
     isLoading: queries.some(query => query.isInitialLoading),
     results: queries.map(query => query.data?.data).filter(isDefined),
@@ -57,30 +48,17 @@ export function useBlocksConditionally(blockHeight: string | undefined): Conditi
 export function useTransactionsConditionally(
   txHash: string | undefined,
 ): ConditionalResults<RuntimeTransaction> {
-  const queries = [
-    useGetRuntimeTransactionsTxHash(Network.mainnet, Runtime.emerald, txHash!, {
-      query: {
-        enabled: !!txHash && RouteUtils.getEnabledLayersForNetwork(Network.mainnet).includes(Runtime.emerald),
-      },
-    }),
-    useGetRuntimeTransactionsTxHash(Network.mainnet, Runtime.sapphire, txHash!, {
-      query: {
-        enabled:
-          !!txHash && RouteUtils.getEnabledLayersForNetwork(Network.mainnet).includes(Runtime.sapphire),
-      },
-    }),
-    useGetRuntimeTransactionsTxHash(Network.testnet, Runtime.emerald, txHash!, {
-      query: {
-        enabled: !!txHash && RouteUtils.getEnabledLayersForNetwork(Network.testnet).includes(Runtime.emerald),
-      },
-    }),
-    useGetRuntimeTransactionsTxHash(Network.testnet, Runtime.sapphire, txHash!, {
-      query: {
-        enabled:
-          !!txHash && RouteUtils.getEnabledLayersForNetwork(Network.testnet).includes(Runtime.sapphire),
-      },
-    }),
-  ]
+  const queries = RouteUtils.getEnabledScopes()
+    .filter(scope => scope.layer !== Layer.consensus)
+    .map(scope =>
+      // See explanation above
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      useGetRuntimeTransactionsTxHash(scope.network, scope.layer as Runtime, txHash!, {
+        query: {
+          enabled: !!txHash,
+        },
+      }),
+    )
   return {
     isLoading: queries.some(query => query.isInitialLoading),
     results: queries.flatMap(query => query.data?.data.transactions).filter(isDefined),
@@ -89,32 +67,18 @@ export function useTransactionsConditionally(
 export function useRuntimeAccountConditionally(
   address: string | undefined,
 ): ConditionalResults<RuntimeAccount> {
-  const queries = [
-    useGetRuntimeAccountsAddress(Network.mainnet, Runtime.emerald, address!, {
-      query: {
-        enabled:
-          !!address && RouteUtils.getEnabledLayersForNetwork(Network.mainnet).includes(Runtime.emerald),
-      },
-    }),
-    useGetRuntimeAccountsAddress(Network.mainnet, Runtime.sapphire, address!, {
-      query: {
-        enabled:
-          !!address && RouteUtils.getEnabledLayersForNetwork(Network.mainnet).includes(Runtime.sapphire),
-      },
-    }),
-    useGetRuntimeAccountsAddress(Network.testnet, Runtime.emerald, address!, {
-      query: {
-        enabled:
-          !!address && RouteUtils.getEnabledLayersForNetwork(Network.testnet).includes(Runtime.emerald),
-      },
-    }),
-    useGetRuntimeAccountsAddress(Network.testnet, Runtime.sapphire, address!, {
-      query: {
-        enabled:
-          !!address && RouteUtils.getEnabledLayersForNetwork(Network.testnet).includes(Runtime.sapphire),
-      },
-    }),
-  ]
+  const queries = RouteUtils.getEnabledScopes()
+    .filter(scope => scope.layer !== Layer.consensus)
+    .map(scope =>
+      // See explanation above
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      useGetRuntimeAccountsAddress(scope.network, scope.layer as Runtime, address!, {
+        query: {
+          enabled: !!address,
+        },
+      }),
+    )
+
   return {
     isLoading: queries.some(query => query.isInitialLoading),
     results: queries.map(query => query.data?.data).filter(isDefined),

diff --git a/src/app/utils/route-utils.ts b/src/app/utils/route-utils.ts
@@ -72,6 +72,12 @@ export abstract class RouteUtils {
     return RouteUtils.ENABLED_LAYERS_FOR_NETWORK[network] || []
   }
 
+  static getEnabledScopes(): { network: Network; layer: Layer }[] {
+    return RouteUtils.getEnabledNetworks().flatMap(network =>
+      RouteUtils.getEnabledLayersForNetwork(network).map(layer => ({ network, layer })),
+    )
+  }
+
   static getEnabledNetworks() {
     return Object.keys(RouteUtils.ENABLED_LAYERS_FOR_NETWORK) as Network[]
   }