fix: Display mailto links properly in Snaps link warning

ui/components/app/snaps/snap-link-warning/snap-link-warning.js

@@ -32,11 +32,44 @@ import {
 } from '../../../../helpers/constants/design-system';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
 
+const SnapLinkDisplay = ({ url }) => {
+  const parsedUrl = new URL(url);
+  const isHTTPS = parsedUrl.protocol === 'https:';
+
+  // If the link is HTTPS we split on the host to highlight it
+  if (isHTTPS) {
+    const urlParts = url.split(parsedUrl.host);
+
+    return (
+      <>
+        {urlParts[0]}
+        <b>{parsedUrl.host}</b>
+        {urlParts[1]}
+      </>
+    );
+  }
+
+  // Otherwise highlight anything beyond the protocol
+  const urlParts = url.split(parsedUrl.protocol);
+
+  return (
+    <>
+      {parsedUrl.protocol}
+      <b>{urlParts[1]}</b>
+    </>
+  );
+};
+
+SnapLinkDisplay.propTypes = {
+  /**
+   * The URL to display
+   */
+  url: PropTypes.string,
+};
+
 export default function SnapLinkWarning({ isOpen, onClose, url }) {
   const t = useI18nContext();
 
-  const parsedUrl = url && new URL(url);
-  const urlParts = parsedUrl && url.split(parsedUrl.host);
   return (
     <Modal isOpen={isOpen} onClose={onClose}>
       <ModalOverlay />
@@ -85,17 +118,13 @@ export default function SnapLinkWarning({ isOpen, onClose, url }) {
             paddingLeft={4}
             width={BlockSize.Full}
           >
-            {parsedUrl && (
-              <Text
-                ellipsis
-                style={{ overflow: 'hidden' }}
-                color={TextColor.primaryDefault}
-              >
-                {urlParts[0]}
-                <b>{parsedUrl.host}</b>
-                {urlParts[1]}
-              </Text>
-            )}
+            <Text
+              ellipsis
+              style={{ overflow: 'hidden' }}
+              color={TextColor.primaryDefault}
+            >
+              <SnapLinkDisplay url={url} />
+            </Text>
             <Icon
               name={IconName.Export}
               color={IconColor.iconAlternative}