Fix the rendering of certain domain names in connected-sites list (#16074)

* Fix rendering origins in connected-sites list

CHANGELOG.md

@@ -96,6 +96,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [10.21.2]
 ### Fixed
 - Fix undefined txParams when calling approveTransaction, by adding the id on the txMeta argument ([#16382](https://github.com/MetaMask/metamask-extension/pull/16382))
+### Fixed
+- Fix issue where domain names were not always beign rendered correctly in the connected sites list ([#16074](https://github.com/MetaMask/metamask-extension/pull/16074))
 
 ## [10.21.1]
 ### Changed

test/e2e/tests/dapp-interactions.spec.js

@@ -112,11 +112,11 @@ describe('Dapp interactions', function () {
         await driver.clickElement({ text: 'Connected sites', tag: 'span' });
         const connectedDapp1 = await driver.isElementPresent({
           text: 'http://127.0.0.1:8080',
-          tag: 'span',
+          tag: 'bdi',
         });
         const connectedDapp2 = await driver.isElementPresent({
           text: 'http://127.0.0.1:8081',
-          tag: 'span',
+          tag: 'bdi',
         });
 
         assert.ok(connectedDapp1, 'Account not connected to Dapp1');

ui/components/app/signature-request-original/__snapshots__/signature-request-original.test.js.snap

@@ -135,9 +135,11 @@ exports[`SignatureRequestOriginal should match snapshot 1`] = `
         <div
           class="site-origin request-signature__origin"
         >
-          <span>
+          <bdi
+            dir="ltr"
+          >
             https://happydapp.website/governance?futarchy=true
-          </span>
+          </bdi>
         </div>
       </div>
       <div

ui/components/ui/site-origin/site-origin.js

@@ -30,7 +30,7 @@ export default function SiteOrigin({
           rightIcon={rightIcon}
         />
       ) : (
-        <span>{siteOrigin}</span>
+        <bdi dir="ltr">{siteOrigin}</bdi>
       )}
     </div>
   );

ui/components/ui/site-origin/site-origin.test.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import SiteOrigin from './site-origin';
+
+describe('SiteOrigin', () => {
+  const defaultProps = {
+    siteOrigin: 'https://example.com',
+    iconSrc: 'https://example.com/icon.png',
+    iconName: 'icon',
+    chip: false,
+    className: '',
+    rightIcon: false,
+  };
+
+  it('renders number and hyphen prefixed domains correctly', () => {
+    const numberHyphenPrefixOrigin = '0-example.com';
+    const wrapper = shallow(
+      <SiteOrigin {...defaultProps} siteOrigin={numberHyphenPrefixOrigin} />,
+    );
+    const bdiElement = wrapper.find('bdi');
+
+    expect(bdiElement.text()).toBe('0-example.com');
+  });
+});