feat(multichain-connect-ui): Add UI preparation changes for multichain connection flow

test/e2e/json-rpc/switchEthereumChain.spec.js

@@ -140,6 +140,12 @@ describe('Switch Ethereum Chain for two dapps', function () {
         await driver.clickElement('#connectButton');
 
         await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog);
+
+        const permissionsTab = await driver.findElement(
+          '[data-testid="permissions-tab"]',
+        );
+        await permissionsTab.click();
+
         const editButtons = await driver.findElements('[data-testid="edit"]');
 
         await editButtons[1].click();
@@ -263,6 +269,12 @@ describe('Switch Ethereum Chain for two dapps', function () {
         await driver.clickElement('#connectButton');
 
         await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog);
+
+        const permissionsTab = await driver.findElement(
+          '[data-testid="permissions-tab"]',
+        );
+        await permissionsTab.click();
+
         const editButtons = await driver.findElements('[data-testid="edit"]');
 
         // Click the edit button for networks
@@ -383,6 +395,11 @@ describe('Switch Ethereum Chain for two dapps', function () {
 
         await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog);
 
+        const permissionsTab = await driver.findElement(
+          '[data-testid="permissions-tab"]',
+        );
+        await permissionsTab.click();
+
         const editButtons = await driver.findElements('[data-testid="edit"]');
 
         // Click the edit button for networks

test/e2e/page-objects/pages/confirmations/redesign/connect-account-confirmation.ts

@@ -9,8 +9,8 @@ class ConnectAccountConfirmation {
   };
 
   private readonly connectAccountConfirmationTitle = {
-    text: 'Connect with MetaMask',
-    tag: 'h2',
+    text: 'Connect this website with MetaMask.',
+    tag: 'p',
   };
 
   constructor(driver: Driver) {

test/e2e/page-objects/pages/test-dapp.ts

@@ -36,8 +36,8 @@ class TestDapp {
   private readonly connectAccountButton = '#connectButton';
 
   private readonly connectMetaMaskMessage = {
-    text: 'Connect with MetaMask',
-    tag: 'h2',
+    text: 'Connect this website with MetaMask.',
+    tag: 'p',
   };
 
   private readonly connectedAccount = '#accounts';

test/e2e/tests/request-queuing/dapp1-switch-dapp2-send.spec.js

@@ -53,6 +53,11 @@ describe('Request Queuing Dapp 1, Switch Tx -> Dapp 2 Send Tx', function () {
 
         await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog);
 
+        const permissionsTab = await driver.findElement(
+          '[data-testid="permissions-tab"]',
+        );
+        await permissionsTab.click();
+
         const editButtons = await driver.findElements('[data-testid="edit"]');
 
         await editButtons[1].click();
@@ -208,6 +213,11 @@ describe('Request Queuing Dapp 1, Switch Tx -> Dapp 2 Send Tx', function () {
         await driver.clickElement('#connectButton');
 
         await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog);
+        const permissionsTab = await driver.findElement(
+          '[data-testid="permissions-tab"]',
+        );
+        await permissionsTab.click();
+
         const editButtons = await driver.findElements('[data-testid="edit"]');
 
         await editButtons[1].click();

test/e2e/tests/request-queuing/switchChain-watchAsset.spec.js

@@ -49,6 +49,12 @@ describe('Request Queue SwitchChain -> WatchAsset', function () {
         await driver.clickElement('#connectButton');
 
         await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog);
+
+        const permissionsTab = await driver.findElement(
+          '[data-testid="permissions-tab"]',
+        );
+        await permissionsTab.click();
+
         const editButtons = await driver.findElements('[data-testid="edit"]');
 
         await editButtons[1].click();

ui/components/multichain/pages/review-permissions-page/site-cell/site-cell.tsx

@@ -100,7 +100,8 @@ export const SiteCell: React.FC<SiteCellProps> = ({
       category: MetaMetricsEventCategory.Navigation,
       event: MetaMetricsEventName.ViewPermissionedAccounts,
       properties: {
-        location: 'Connect view, Permissions toast, Permissions (dapp)',
+        location:
+          'Connect view (permissions tab), Permissions toast, Permissions (dapp)',
       },
     });
   };
@@ -112,7 +113,8 @@ export const SiteCell: React.FC<SiteCellProps> = ({
       category: MetaMetricsEventCategory.Navigation,
       event: MetaMetricsEventName.ViewPermissionedNetworks,
       properties: {
-        location: 'Connect view, Permissions toast, Permissions (dapp)',
+        location:
+          'Connect view (permissions tab), Permissions toast, Permissions (dapp)',
       },
     });
   };

ui/components/ui/tabs/tab/tab.component.js

@@ -77,6 +77,7 @@ Tab.propTypes = {
   tabIndex: PropTypes.number, // required, but added using React.cloneElement
   children: PropTypes.node, // required, but we are not rendering it explicitly
   textProps: PropTypes.object, // props to spread to the Text component
+  width: PropTypes.string,
 };
 
 Tab.defaultProps = {

ui/helpers/utils/util.js

@@ -798,6 +798,49 @@ export const getAvatarFallbackLetter = (subjectName) => {
   return subjectName?.match(/[a-z0-9]/iu)?.[0] ?? '?';
 };
 
+/**
+ * Check whether raw origin URL is an IP address.
+ *
+ * Note: IPv6 addresses are expected to be wrapped in brackets (e.g. [fe80::1])
+ * because of how URL formatting works.
+ *
+ * @param {string} rawOriginUrl - Raw origin (URL) with protocol that is potentially an IP address
+ * @returns Boolean, true if the origin is an IP address, false otherwise.
+ */
+export const isIpAddress = (rawOriginUrl) => {
+  if (typeof rawOriginUrl === 'string') {
+    return Boolean(
+      rawOriginUrl.match(/^(\d{1,3}\.){3}\d{1,3}$|^\[[0-9a-f:]+\]$/iu),
+    );
+  }
+
+  return false;
+};
+
+/**
+ * Transforms full raw URLs to something that can be used as title.
+ * Basically, it removes subdomain and protocol prefixes.
+ *
+ * Note: For IP address origins, full IP address without protocol will be returned.
+ *
+ * @param {string} rawOrigin - Raw origin (URL) with protocol.
+ * @returns User friendly title extracted from raw URL.
+ */
+export const transformOriginToTitle = (rawOrigin) => {
+  try {
+    const url = new URL(rawOrigin);
+
+    if (isIpAddress(url.hostname)) {
+      return url.hostname;
+    }
+
+    const parts = url.hostname.split('.');
+    return parts.slice(-2).join('.');
+  } catch (e) {
+    return 'Unknown Origin';
+  }
+};
+
 /**
  * Get abstracted Snap permissions filtered by weight.
  *

ui/helpers/utils/util.test.js

@@ -1298,4 +1298,54 @@ describe('util', () => {
       expect(sortedAccount).toStrictEqual([]);
     });
   });
+
+  describe('isIpAddress', () => {
+    it('should return true for the IPv4 address', () => {
+      expect(util.isIpAddress('127.0.0.1')).toBe(true);
+    });
+
+    it('should return true for the IPv6 address', () => {
+      expect(util.isIpAddress('[fe80::1]')).toBe(true);
+    });
+
+    it('should return true for the invalid IP address', () => {
+      expect(util.isIpAddress('metamask')).toBe(false);
+    });
+
+    it('should return true for the invalid type of argument', () => {
+      expect(util.isIpAddress(1024)).toBe(false);
+    });
+  });
+
+  describe('transformOriginToTitle', () => {
+    it('should return the correct title for origin with domain', () => {
+      expect(util.transformOriginToTitle('https://metamask.io')).toBe(
+        'metamask.io',
+      );
+    });
+
+    it('should return the correct title for origin with subdomain', () => {
+      expect(
+        util.transformOriginToTitle('https://metamask.github.io/test-dapp/'),
+      ).toBe('github.io');
+    });
+
+    it('should return the correct title for localhost', () => {
+      expect(util.transformOriginToTitle('http://localhost:3000')).toBe(
+        'localhost',
+      );
+    });
+
+    it('should return the correct title for IPv4 address', () => {
+      expect(util.transformOriginToTitle('http://127.0.0.1:3000')).toBe(
+        '127.0.0.1',
+      );
+    });
+
+    it('should return the correct title for IPv6 address', () => {
+      expect(util.transformOriginToTitle('http://[fe80::1]:9011/')).toBe(
+        '[fe80::1]',
+      );
+    });
+  });
 });