fix: restore chain details edit modal

src/features/chains/ChainEditModal.tsx

@@ -1,4 +1,4 @@
-import { ChainMetadata } from '@hyperlane-xyz/sdk';
+import type { ChainMetadata, ChainName } from '@hyperlane-xyz/sdk';
 import { ChainDetailsMenu, Modal } from '@hyperlane-xyz/widgets';
 import { useCallback, useEffect, useRef } from 'react';
 

src/features/tokens/TokenSelectField.tsx

@@ -10,6 +10,7 @@ import { updateQueryParams } from '../../utils/queryParams';
 import { trackTokenSelectionEvent } from '../analytics/utils';
 import { useChains } from '../api/hooks';
 import { routerClient } from '../api/RouterClient';
+import { ChainEditModal } from '../chains/ChainEditModal';
 import { useMultiProvider } from '../chains/hooks';
 import { getChainDisplayName } from '../chains/utils';
 import { useStore } from '../store';
@@ -37,6 +38,7 @@ type Props = {
 export function TokenSelectField({ selectionMode, disabled }: Props) {
   const { values, setFieldValue } = useFormikContext<TransferFormValues>();
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const [editingChain, setEditingChain] = useState<string | null>(null);
   const queryClient = useQueryClient();
   const tokenMap = useTokenByKeyMap();
   const multiProvider = useMultiProvider();
@@ -108,6 +110,11 @@ export function TokenSelectField({ selectionMode, disabled }: Props) {
     if (!disabled) setIsModalOpen(true);
   };
 
+  const handleEditBack = () => {
+    setEditingChain(null);
+    setIsModalOpen(true);
+  };
+
   return (
     <>
       <TokenButton
@@ -125,7 +132,16 @@ export function TokenSelectField({ selectionMode, disabled }: Props) {
         selectionMode={selectionMode}
         counterpartToken={counterpartToken}
         recipient={values.recipient}
+        onEditChain={setEditingChain}
       />
+      {editingChain && (
+        <ChainEditModal
+          isOpen={!!editingChain}
+          close={() => setEditingChain(null)}
+          onClickBack={handleEditBack}
+          chainName={editingChain}
+        />
+      )}
     </>
   );
 }

tests/chain-selection/edit-chain.spec.ts

@@ -1,7 +1,13 @@
 import { test, expect } from '@playwright/test';
+
 import { getOriginTokenButton } from '../helpers/locators';
+import { installRouterApiMock } from '../helpers/routerApi';
 
 test.describe('Chain Selection - Edit Chain', () => {
+  test.beforeEach(async ({ page }) => {
+    await installRouterApiMock(page);
+  });
+
   test('should exit edit mode', async ({ page }) => {
     await page.goto('http://localhost:3000');
     await page.getByText('Send').first().waitFor({ state: 'visible' });
@@ -18,4 +24,16 @@ test.describe('Chain Selection - Edit Chain', () => {
     // Should show "Edit chain metadata" again
     await expect(page.getByRole('button', { name: 'Edit chain metadata' })).toBeVisible();
   });
+
+  test('should open chain details when selecting a chain in edit mode', async ({ page }) => {
+    await page.goto('http://localhost:3000');
+    await page.getByText('Send').first().waitFor({ state: 'visible' });
+
+    await getOriginTokenButton(page).click();
+    await page.getByRole('button', { name: 'Edit chain metadata' }).click();
+    await page.locator('.token-picker-chain-row[data-chain="bsc"]').click();
+
+    await expect(page.locator('.chain-edit-container')).toBeVisible();
+    await expect(page.getByText('Edit Binance Smart Chain')).toBeVisible();
+  });
 });

tests/helpers/routerApi.ts

@@ -0,0 +1,109 @@
+import type { Page, Route } from '@playwright/test';
+
+const ZERO = '0x0000000000000000000000000000000000000000';
+const PERMIT2 = '0x000000000022D473030F116dDEE9F6B43aC78BA3';
+const UNIVERSAL_ROUTER = '0x1111111111111111111111111111111111111111';
+
+const chains = [
+  {
+    id: 56,
+    name: 'BNB Smart Chain',
+    chainName: 'bsc',
+    displayName: 'BNB Smart Chain',
+    protocol: 'ethereum',
+    nativeCurrency: { name: 'BNB', symbol: 'BNB', decimals: 18 },
+    universalRouter: UNIVERSAL_ROUTER,
+    permit2: PERMIT2,
+    dex: null,
+    canSwap: true,
+    canExecute: true,
+    supportsNative: true,
+  },
+  {
+    id: 8453,
+    name: 'Base',
+    chainName: 'base',
+    displayName: 'Base',
+    protocol: 'ethereum',
+    nativeCurrency: { name: 'Ether', symbol: 'ETH', decimals: 18 },
+    universalRouter: UNIVERSAL_ROUTER,
+    permit2: PERMIT2,
+    dex: null,
+    canSwap: true,
+    canExecute: true,
+    supportsNative: true,
+  },
+];
+
+const tokens = [
+  {
+    chainId: 56,
+    address: ZERO,
+    symbol: 'BNB',
+    name: 'BNB',
+    decimals: 18,
+    isNative: true,
+    isBridgeToken: true,
+    isPoolToken: false,
+    canBridge: true,
+    canSwap: true,
+    bridgeSymbols: ['BNB'],
+    warpRouteIds: ['BNB/test'],
+  },
+  {
+    chainId: 8453,
+    address: ZERO,
+    symbol: 'ETH',
+    name: 'Ether',
+    decimals: 18,
+    isNative: true,
+    isBridgeToken: true,
+    isPoolToken: false,
+    canBridge: true,
+    canSwap: true,
+    bridgeSymbols: ['ETH'],
+    warpRouteIds: ['ETH/test'],
+  },
+];
+
+export async function installRouterApiMock(page: Page): Promise<void> {
+  await page.route('**/readyz', async (route: Route) =>
+    route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify({
+        ok: true,
+        graphReady: true,
+        graphConnections: 1,
+        coreConfigChains: chains.length,
+        chainCacheHydrated: true,
+        lastRouteCacheRefreshAt: new Date().toISOString(),
+        lastRouteCacheRefreshStatus: 'ok',
+      }),
+    }),
+  );
+
+  await page.route('**/v1/chains', async (route: Route) =>
+    route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify({ chains }),
+    }),
+  );
+
+  await page.route('**/v1/tokens**', async (route: Route) =>
+    route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify({ tokens }),
+    }),
+  );
+
+  await page.route('**/v1/available-routes**', async (route: Route) =>
+    route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify({ direction: 'fromSource', tokens }),
+    }),
+  );
+}