feat: use chain name instead of domainId for filters (#177)

Now uses chain name instead of `domainId` as URL filter - Update `ChainSelector` onChange function to update value with chain name instead of `domainId` - Update logic for `useMessageSearchQuery` to get `domainId` from chain name fixes #170
hyperlane-xyz · Feb 13, 2025 · 16cf874 · 16cf874
1 parent 9d924d8
commit 16cf874
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 26 deletions.
diff --git a/src/components/search/SearchFilterBar.tsx b/src/components/search/SearchFilterBar.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import { useState } from 'react';
 
-import { ChainMetadata, getDomainId } from '@hyperlane-xyz/sdk';
+import { ChainMetadata } from '@hyperlane-xyz/sdk';
 import { trimToLength } from '@hyperlane-xyz/utils';
 import {
   ChevronIcon,
@@ -71,13 +71,12 @@ function ChainSelector({
 
   const multiProvider = useMultiProvider();
 
-  const chainName = value ? multiProvider.tryGetChainName(value) : undefined;
-  const chainDisplayName = chainName
-    ? trimToLength(getChainDisplayName(multiProvider, chainName, true), 12)
+  const chainDisplayName = value
+    ? trimToLength(getChainDisplayName(multiProvider, value, true), 12)
     : undefined;
 
   const onClickChain = (c: ChainMetadata) => {
-    onChangeValue(getDomainId(c).toString());
+    onChangeValue(c.name);
     close();
   };
 

diff --git a/src/features/messages/queries/build.ts b/src/features/messages/queries/build.ts
@@ -64,15 +64,15 @@ export function buildMessageQuery(
 
 export function buildMessageSearchQuery(
   searchInput: string,
-  originFilter: string | null,
-  destFilter: string | null,
+  originDomainIdFilter: number | null,
+  destDomainIdFilter: number | null,
   startTimeFilter: number | null,
   endTimeFilter: number | null,
   limit: number,
   useStub = false,
 ) {
-  const originChains = originFilter ? originFilter.split(',') : undefined;
-  const destinationChains = destFilter ? destFilter.split(',') : undefined;
+  const originChains = originDomainIdFilter ? [originDomainIdFilter] : undefined;
+  const destinationChains = destDomainIdFilter ? [destDomainIdFilter] : undefined;
   const startTime = startTimeFilter ? adjustToUtcTime(startTimeFilter) : undefined;
   const endTime = endTimeFilter ? adjustToUtcTime(endTimeFilter) : undefined;
   const variables = {
@@ -91,8 +91,8 @@ export function buildMessageSearchQuery(
       `q${i}: message_view(
     where: {
       _and: [
-        ${originFilter ? '{origin_domain_id: {_in: $originChains}},' : ''}
-        ${destFilter ? '{destination_domain_id: {_in: $destinationChains}},' : ''}
+        ${originDomainIdFilter ? '{origin_domain_id: {_in: $originChains}},' : ''}
+        ${destDomainIdFilter ? '{destination_domain_id: {_in: $destinationChains}},' : ''}
         ${startTimeFilter ? '{send_occurred_at: {_gte: $startTime}},' : ''}
         ${endTimeFilter ? '{send_occurred_at: {_lte: $endTime}},' : ''}
         ${whereClause}

diff --git a/src/features/messages/queries/useMessageQuery.ts b/src/features/messages/queries/useMessageQuery.ts
@@ -5,7 +5,6 @@ import { useMultiProvider } from '../../../store';
 import { MessageStatus } from '../../../types';
 import { useScrapedDomains } from '../../chains/queries/useScrapedChains';
 
-import { MultiProvider } from '@hyperlane-xyz/sdk';
 import { useInterval } from '@hyperlane-xyz/widgets';
 import { MessageIdentifierType, buildMessageQuery, buildMessageSearchQuery } from './build';
 import { searchValueToPostgresBytea } from './encoding';
@@ -22,15 +21,10 @@ export function isValidSearchQuery(input: string) {
   return !!searchValueToPostgresBytea(input);
 }
 
-export function isValidDomainId(domainId: string | null, multiProvider: MultiProvider) {
-  if (!domainId) return false;
-  return multiProvider.hasChain(domainId);
-}
-
 export function useMessageSearchQuery(
   sanitizedInput: string,
-  originChainFilter: string | null,
-  destinationChainFilter: string | null,
+  originChainNameFilter: string | null,
+  destinationChainNameFilter: string | null,
   startTimeFilter: number | null,
   endTimeFilter: number | null,
 ) {
@@ -40,16 +34,23 @@ export function useMessageSearchQuery(
   const hasInput = !!sanitizedInput;
   const isValidInput = !hasInput || isValidSearchQuery(sanitizedInput);
 
+  // Get chains domainId
+  const originDomainId = originChainNameFilter
+    ? multiProvider.tryGetDomainId(originChainNameFilter)
+    : null;
+  const destDomainId = destinationChainNameFilter
+    ? multiProvider.tryGetDomainId(destinationChainNameFilter)
+    : null;
+
   // validating filters
-  const isValidOrigin = !originChainFilter || isValidDomainId(originChainFilter, multiProvider);
-  const isValidDestination =
-    !destinationChainFilter || isValidDomainId(destinationChainFilter, multiProvider);
+  const isValidOrigin = !originChainNameFilter || originDomainId !== null;
+  const isValidDestination = !destinationChainNameFilter || destDomainId !== null;
 
   // Assemble GraphQL query
   const { query, variables } = buildMessageSearchQuery(
     sanitizedInput,
-    isValidOrigin ? originChainFilter : null,
-    isValidDestination ? destinationChainFilter : null,
+    isValidOrigin ? originDomainId : null,
+    isValidDestination ? destDomainId : null,
     startTimeFilter,
     endTimeFilter,
     hasInput ? SEARCH_QUERY_LIMIT : LATEST_QUERY_LIMIT,
@@ -73,8 +74,8 @@ export function useMessageSearchQuery(
   // Filter recent messages during DB backfilling period
   // TODO remove this once backfilling is complete
   const hasFilter = !!(
-    originChainFilter ||
-    destinationChainFilter ||
+    originChainNameFilter ||
+    destinationChainNameFilter ||
     startTimeFilter ||
     endTimeFilter
   );