Simplify query generation

1234567890123456789012345678901234567890123456789012345678901234567890 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 · 4d382f5 · 4d382f5
1 parent 7592523
commit 4d382f5
Show file tree

Hide file tree

Showing 2 changed files with 38 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,16 @@ 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 =>
+      // 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 +41,16 @@ 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 =>
+      // 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 +59,17 @@ 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 =>
+      // 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[]
   }