Refactor env enum into separate file

src/components/nav/Header.tsx

@@ -2,7 +2,7 @@ import Image from 'next/future/image';
 import Link from 'next/link';
 import useDropdownMenu from 'react-accessible-dropdown-menu-hook';
 
-import { Environment } from '../../consts/appConfig';
+import { Environment, envDisplayValue } from '../../consts/environments';
 import { links } from '../../consts/links';
 import BookIcon from '../../images/icons/book.svg';
 import BugIcon from '../../images/icons/bug.svg';
@@ -118,8 +118,8 @@ function NetworkSelector() {
 }
 
 const envOptions = [
-  { value: Environment.Mainnet, display: 'Mainnet' },
+  { value: Environment.Mainnet, display: envDisplayValue[Environment.Mainnet] },
-  { value: Environment.Testnet2, display: 'Testnet' },
+  { value: Environment.Testnet2, display: envDisplayValue[Environment.Testnet2] },
 ];
 
 const styles = {

src/consts/appConfig.ts

@@ -1,14 +1,10 @@
-export enum Environment {
+import { Environment } from './environments';
-  Mainnet = 'mainnet',
-  Testnet2 = 'testnet2',
-}
 
 const isDevMode = process?.env?.NODE_ENV === 'development';
 const version = process?.env?.NEXT_PUBLIC_VERSION ?? null;
 
 export const configs: Record<Environment, Config> = {
   mainnet: {
-    name: 'Hyperlane Explorer',
     environment: Environment.Mainnet,
     debug: isDevMode,
     version,
@@ -16,7 +12,6 @@ export const configs: Record<Environment, Config> = {
     apiUrl: 'https://abacus-explorer-api.hasura.app/v1/graphql',
   },
   testnet2: {
-    name: 'Hyperlane Testnet Explorer',
     environment: Environment.Testnet2,
     debug: true,
     version,
@@ -26,7 +21,6 @@ export const configs: Record<Environment, Config> = {
 };
 
 interface Config {
-  name: string;
   environment: Environment;
   debug: boolean;
   version: string | null;

src/consts/environments.ts

@@ -0,0 +1,9 @@
+export enum Environment {
+  Mainnet = 'mainnet',
+  Testnet2 = 'testnet2',
+}
+
+export const envDisplayValue = {
+  [Environment.Mainnet]: 'Mainnet',
+  [Environment.Testnet2]: 'Testnet',
+};

src/features/debugger/TxDebugger.tsx

@@ -7,11 +7,15 @@ import {
   SearchInvalidError,
   SearchUnknownError,
 } from '../../components/search/SearchError';
+import { envDisplayValue } from '../../consts/environments';
+import { useStore } from '../../store';
 import useDebounce from '../../utils/debounce';
 import { sanitizeString } from '../../utils/string';
 import { isValidSearchQuery } from '../search/utils';
 
 export function TxDebugger() {
+  const environment = useStore((s) => s.environment);
+
   // Search text input
   const [searchInput, setSearchInput] = useState('');
   const debouncedSearchInput = useDebounce(searchInput, 750);
@@ -34,7 +38,7 @@ export function TxDebugger() {
       <div className="w-full h-[38.05rem] mt-5 bg-white shadow-md border border-blue-50 rounded overflow-auto relative">
         {/* Content header and filter bar */}
         <div className="px-2 py-3 sm:px-4 md:px-5 md:py-3 flex items-center justify-between border-b border-gray-100">
-          <h2 className="text-gray-600">{!hasInput ? 'Transaction Debugger' : 'Search Result'}</h2>
+          <h2 className="text-gray-600">{`Transaction Debugger (${envDisplayValue[environment]})`}</h2>
         </div>
         {/* Message list */}
         <Fade show={!hasError && isValidInput && !!txResult}>{JSON.stringify(txResult)}</Fade>

src/pages/_app.tsx

@@ -14,7 +14,8 @@ import { publicProvider } from 'wagmi/providers/public';
 
 import { ErrorBoundary } from '../components/errors/ErrorBoundary';
 import { AppLayout } from '../components/layout/AppLayout';
-import { Environment, configs } from '../consts/appConfig';
+import { configs } from '../consts/appConfig';
+import { Environment } from '../consts/environments';
 import { prodChains } from '../consts/networksConfig';
 import { useStore } from '../store';
 import { Color } from '../styles/Color';

src/store.ts

@@ -1,6 +1,6 @@
 import create from 'zustand';
 
-import { Environment } from './consts/appConfig';
+import { Environment } from './consts/environments';
 
 // Keeping everything here for now as state is simple
 // Will refactor into slices as necessary