feat: better chain selection for single chain (#4824)

### Description This PR updates the single chain selection prompt to use a search prompt instead of a select one. ### Drive-by changes - Adds missing `:` where the `runSingleChainSelectionStep` is used. - Installs the `@inquirer/search` package ### Related issues - Fixes #4823 ### Backward compatibility - Yes ### Testing - Manual --------- Co-authored-by: Lee <[email protected]>
hyperlane-xyz · Jan 2, 2025 · d35502f · d35502f
1 parent a5ece3b
commit d35502f
Show file tree

Hide file tree

Showing 9 changed files with 87 additions and 11 deletions.
diff --git a/.changeset/yellow-icons-do.md b/.changeset/yellow-icons-do.md
@@ -0,0 +1,5 @@
+---
+'@hyperlane-xyz/cli': minor
+---
+
+Update single chain selection to be searchable instead of a simple select
diff --git a/typescript/cli/package.json b/typescript/cli/package.json
@@ -11,6 +11,7 @@
     "@inquirer/core": "9.0.10",
     "@inquirer/figures": "1.0.5",
     "@inquirer/prompts": "3.3.2",
+    "@inquirer/search": "^3.0.1",
     "ansi-escapes": "^7.0.0",
     "asn1.js": "^5.4.1",
     "bignumber.js": "^9.1.1",

diff --git a/typescript/cli/src/config/hooks.ts b/typescript/cli/src/config/hooks.ts
@@ -270,7 +270,7 @@ async function getOwnerAndBeneficiary(
 async function selectIgpChains(context: CommandContext) {
   const localChain = await runSingleChainSelectionStep(
     context.chainMetadata,
-    'Select local chain for IGP hook',
+    'Select local chain for IGP hook:',
   );
   const isTestnet = context.chainMetadata[localChain].isTestnet;
   const remoteChains = await runMultiChainSelectionStep({

diff --git a/typescript/cli/src/deploy/agent.ts b/typescript/cli/src/deploy/agent.ts
@@ -25,7 +25,7 @@ export async function runKurtosisAgentDeploy({
   if (!originChain) {
     originChain = await runSingleChainSelectionStep(
       context.chainMetadata,
-      'Select the origin chain',
+      'Select the origin chain:',
     );
   }
   if (!relayChains) {

diff --git a/typescript/cli/src/send/message.ts b/typescript/cli/src/send/message.ts
@@ -33,14 +33,14 @@ export async function sendTestMessage({
   if (!origin) {
     origin = await runSingleChainSelectionStep(
       chainMetadata,
-      'Select the origin chain',
+      'Select the origin chain:',
     );
   }
 
   if (!destination) {
     destination = await runSingleChainSelectionStep(
       chainMetadata,
-      'Select the destination chain',
+      'Select the destination chain:',
     );
   }
 

diff --git a/typescript/cli/src/send/transfer.ts b/typescript/cli/src/send/transfer.ts
@@ -53,14 +53,14 @@ export async function sendTestTransfer({
   if (!origin) {
     origin = await runSingleChainSelectionStep(
       chainMetadata,
-      'Select the origin chain',
+      'Select the origin chain:',
     );
   }
 
   if (!destination) {
     destination = await runSingleChainSelectionStep(
       chainMetadata,
-      'Select the destination chain',
+      'Select the destination chain:',
     );
   }
 

diff --git a/typescript/cli/src/status/message.ts b/typescript/cli/src/status/message.ts
@@ -24,7 +24,7 @@ export async function checkMessageStatus({
   if (!origin) {
     origin = await runSingleChainSelectionStep(
       context.chainMetadata,
-      'Select the origin chain',
+      'Select the origin chain:',
     );
   }
 

diff --git a/typescript/cli/src/utils/chains.ts b/typescript/cli/src/utils/chains.ts
@@ -1,4 +1,5 @@
 import { Separator, confirm } from '@inquirer/prompts';
+import search from '@inquirer/search';
 import select from '@inquirer/select';
 import chalk from 'chalk';
 
@@ -23,9 +24,21 @@ export async function runSingleChainSelectionStep(
     chainMetadata,
     networkType,
   );
-  const chain = (await select({
-    message,
-    choices: [networkTypeSeparator, ...choices],
+
+  const formattedMessage = message.endsWith(':') ? message : `${message}:`;
+  const options = [networkTypeSeparator, ...choices];
+  const chain = (await search({
+    message: formattedMessage,
+    source: (searchTerm) => {
+      if (!searchTerm) {
+        return options;
+      }
+
+      return options.filter(
+        (value) =>
+          Separator.isSeparator(value) || value.value.includes(searchTerm),
+      );
+    },
     pageSize: calculatePageSize(2),
   })) as string;
   handleNewChain([chain]);
@@ -142,7 +155,9 @@ function getChainChoices(
   networkType: 'mainnet' | 'testnet',
 ) {
   const chainsToChoices = (chains: ChainMetadata[]) =>
-    chains.map((c) => ({ name: c.name, value: c.name }));
+    chains
+      .map((c) => ({ name: c.name, value: c.name }))
+      .sort((a, b) => a.name.localeCompare(b.name));
 
   const chains = Object.values(chainMetadata);
   const filteredChains = chains.filter((c) =>

diff --git a/yarn.lock b/yarn.lock
@@ -7326,6 +7326,7 @@ __metadata:
     "@inquirer/core": "npm:9.0.10"
     "@inquirer/figures": "npm:1.0.5"
     "@inquirer/prompts": "npm:3.3.2"
+    "@inquirer/search": "npm:^3.0.1"
     "@types/chai-as-promised": "npm:^8"
     "@types/mocha": "npm:^10.0.1"
     "@types/node": "npm:^18.14.5"
@@ -7737,6 +7738,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@inquirer/core@npm:^10.1.2":
+  version: 10.1.2
+  resolution: "@inquirer/core@npm:10.1.2"
+  dependencies:
+    "@inquirer/figures": "npm:^1.0.9"
+    "@inquirer/type": "npm:^3.0.2"
+    ansi-escapes: "npm:^4.3.2"
+    cli-width: "npm:^4.1.0"
+    mute-stream: "npm:^2.0.0"
+    signal-exit: "npm:^4.1.0"
+    strip-ansi: "npm:^6.0.1"
+    wrap-ansi: "npm:^6.2.0"
+    yoctocolors-cjs: "npm:^2.1.2"
+  checksum: 10/e92ade5ba7dbcfd83629db2df7fb91877ac777a7f1e03a16b0d5c08621dafe09d321c5f14b37c2dca80a3db2d68e5a478f8eaeafcb62ed42c46e7349b7276094
+  languageName: node
+  linkType: hard
+
 "@inquirer/core@npm:^6.0.0":
   version: 6.0.0
   resolution: "@inquirer/core@npm:6.0.0"
@@ -7790,6 +7808,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@inquirer/figures@npm:^1.0.9":
+  version: 1.0.9
+  resolution: "@inquirer/figures@npm:1.0.9"
+  checksum: 10/7ced1275a5826cdeb61797d6c068417e7d52aa87894de18cedd259f783f42d731226c3f8b92cab27b8e7b0e31ab1dd3cd77f16935b67ebe1cbb271e5972d7758
+  languageName: node
+  linkType: hard
+
 "@inquirer/input@npm:^1.2.16":
   version: 1.2.16
   resolution: "@inquirer/input@npm:1.2.16"
@@ -7841,6 +7866,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@inquirer/search@npm:^3.0.1":
+  version: 3.0.4
+  resolution: "@inquirer/search@npm:3.0.4"
+  dependencies:
+    "@inquirer/core": "npm:^10.1.2"
+    "@inquirer/figures": "npm:^1.0.9"
+    "@inquirer/type": "npm:^3.0.2"
+    yoctocolors-cjs: "npm:^2.1.2"
+  peerDependencies:
+    "@types/node": ">=18"
+  checksum: 10/e2363f808e32983d659049cabc21f57e8b7dd7b591677b4bd1be0c45653e3d86f98f1772f3866bc97f14f63983399b259e8956eda181fafbe7eea07f8169bd95
+  languageName: node
+  linkType: hard
+
 "@inquirer/select@npm:^1.3.3":
   version: 1.3.3
   resolution: "@inquirer/select@npm:1.3.3"
@@ -7872,6 +7911,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@inquirer/type@npm:^3.0.2":
+  version: 3.0.2
+  resolution: "@inquirer/type@npm:3.0.2"
+  peerDependencies:
+    "@types/node": ">=18"
+  checksum: 10/d1a2879b1baa357421cef441fc7b43181e110243933763ae922c55c2fc9af2d459ceaca8b71ed57e3dabd5077542fa0dd1d0ff0cf362ce054e61202386b545ed
+  languageName: node
+  linkType: hard
+
 "@interchain-ui/react@npm:^1.23.28":
   version: 1.26.1
   resolution: "@interchain-ui/react@npm:1.26.1"
@@ -29046,6 +29094,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mute-stream@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "mute-stream@npm:2.0.0"
+  checksum: 10/d2e4fd2f5aa342b89b98134a8d899d8ef9b0a6d69274c4af9df46faa2d97aeb1f2ce83d867880d6de63643c52386579b99139801e24e7526c3b9b0a6d1e18d6c
+  languageName: node
+  linkType: hard
+
 "mz@npm:^2.7.0":
   version: 2.7.0
   resolution: "mz@npm:2.7.0"