chore: contacts tweaks, send to wallet flow and Cmd+K e2e test covera…

…ge (#1543)

Co-authored-by: Daniel Sinclair <d@niel.nyc>

e2e/helpers.ts

@@ -476,6 +476,36 @@ export async function performShortcutWithNormalKey(
   }
 }
 
+export async function executeMultipleShortcuts({
+  driver,
+  keyDown,
+  key,
+}: {
+  driver: WebDriver;
+  keyDown: keyof typeof Key | string;
+  key: keyof typeof Key | string;
+}) {
+  try {
+    await delayTime('short');
+    const keyDownAction =
+      keyDown in Key ? (Key[keyDown as keyof typeof Key] as string) : keyDown;
+    const keyAction =
+      key in Key ? (Key[key as keyof typeof Key] as string) : key;
+    await driver
+      .actions()
+      .keyDown(keyDownAction)
+      .sendKeys(keyAction)
+      .keyUp(keyDownAction)
+      .perform();
+  } catch (error) {
+    console.error(
+      `Error occurred while attempting multiple shortcuts with the keydown '${keyDown}' and key '${key}':`,
+      error,
+    );
+    throw error;
+  }
+}
+
 export async function performShortcutWithSpecialKey(
   driver: WebDriver,
   specialKey: keyof typeof Key,

e2e/parallel/commandKFlow.test.ts

@@ -0,0 +1,114 @@
+import 'chromedriver';
+import 'geckodriver';
+import { WebDriver } from 'selenium-webdriver';
+import { afterAll, beforeAll, describe, it } from 'vitest';
+
+import {
+  checkExtensionURL,
+  executeMultipleShortcuts,
+  executePerformShortcut,
+  getExtensionIdByName,
+  getRootUrl,
+  goToPopup,
+  importWalletFlow,
+  initDriverWithOptions,
+  typeOnTextInput,
+  waitUntilElementByTestIdIsPresent,
+} from '../helpers';
+import { TEST_VARIABLES } from '../walletVariables';
+
+let rootURL = getRootUrl();
+let driver: WebDriver;
+
+const browser = process.env.BROWSER || 'chrome';
+const os = process.env.OS || 'mac';
+
+describe('Command+K behaviours', () => {
+  beforeAll(async () => {
+    driver = await initDriverWithOptions({
+      browser,
+      os,
+    });
+    const extensionId = await getExtensionIdByName(driver, 'Rainbow');
+    if (!extensionId) throw new Error('Extension not found');
+    rootURL += extensionId;
+  });
+  afterAll(async () => driver.quit());
+
+  it('should be able import a wallet via seed', async () => {
+    await importWalletFlow(driver, rootURL, TEST_VARIABLES.EMPTY_WALLET.SECRET);
+  });
+
+  it('should send to an owned wallet in my wallets menu', async () => {
+    await goToPopup(driver, rootURL);
+
+    await executePerformShortcut({ driver, key: 'k' });
+    await executePerformShortcut({
+      driver,
+      key: 'ARROW_DOWN',
+      timesToPress: 2,
+    });
+    await executePerformShortcut({ driver, key: 'ENTER' });
+
+    // Select 2nd wallet
+    await executePerformShortcut({
+      driver,
+      key: 'ARROW_DOWN',
+      timesToPress: 1,
+    });
+
+    // Cmd+Enter
+    await executeMultipleShortcuts({
+      driver,
+      keyDown: 'COMMAND',
+      key: 'ENTER',
+    });
+
+    // Send to wallet
+    await executePerformShortcut({ driver, key: 'ENTER' });
+    await checkExtensionURL(driver, 'send');
+  });
+
+  it('should be able to add a searched wallet as contact and send it using my contacts section', async () => {
+    await goToPopup(driver, rootURL);
+
+    // cmd k
+    await executePerformShortcut({ driver, key: 'k' });
+
+    // search for wallet
+    await typeOnTextInput({
+      id: 'command-k-input',
+      driver,
+      text: 'skillet.eth',
+    });
+
+    await waitUntilElementByTestIdIsPresent({
+      id: 'command-name-skillet.eth',
+      driver,
+    });
+
+    // select wallet and add as contact
+    await executePerformShortcut({ driver, key: 'ENTER' });
+    await executePerformShortcut({
+      driver,
+      key: 'ARROW_DOWN',
+      timesToPress: 1,
+    });
+    await executePerformShortcut({ driver, key: 'ENTER' });
+
+    // cmd k
+    await executePerformShortcut({ driver, key: 'k' });
+
+    // select contact from my contacts
+    await executePerformShortcut({
+      driver,
+      key: 'ARROW_DOWN',
+      timesToPress: 3,
+    });
+    await executePerformShortcut({ driver, key: 'ENTER' });
+    await executePerformShortcut({ driver, key: 'ENTER' });
+
+    // should be on send flow
+    await checkExtensionURL(driver, 'send');
+  });
+});

src/entries/popup/components/CommandK/CommandRows.tsx

@@ -112,7 +112,12 @@ export const CommandRow = ({
             >
               <Inline alignVertical="center" space="8px" wrap={false}>
                 <Inline alignVertical="bottom" space="8px" wrap={false}>
-                  <TextOverflow color="label" size="14pt" weight="semibold">
+                  <TextOverflow
+                    color="label"
+                    size="14pt"
+                    weight="semibold"
+                    testId={`command-name-${name || command.name}`}
+                  >
                     {name || command.name}
                   </TextOverflow>
                   {description && (
@@ -210,7 +215,7 @@ export const ShortcutRow = ({
   selected,
 }: ShortcutRowProps) => {
   const isAddAsWatchedWalletRow =
-    command.address && command.id === 'addAsWatchedWallet';
+    command.address && command.id === 'watchUnownedWallet';
   const isSwitchToWalletRow =
     command.address && command.id === 'switchToWallet';
   const isContactWalletRow = command.address && command.id === 'contactWallet';

src/entries/popup/components/CommandK/references.ts

@@ -5,8 +5,7 @@ export const actionLabels = {
   open: () => i18n.t('command_k.action_labels.open'),
   openInNewTab: () => i18n.t('command_k.action_labels.open_in_new_tab'),
   switchToWallet: () => i18n.t('command_k.action_labels.switch_to_wallet'),
-  sendToWallet: () => i18n.t('command_k.action_labels.send_to_wallet'),
-  addContact: () => i18n.t('command_k.action_labels.add_contact'),
+  sendToContact: () => i18n.t('command_k.action_labels.send_to_contact'),
   view: () => i18n.t('command_k.action_labels.view'),
 };