From e365317d09b07f5e4fc55ff5e01e2e619111bbf8 Mon Sep 17 00:00:00 2001
From: Hassan Malik <hbmalik88@gmail.com>
Date: Thu, 5 Dec 2024 15:52:21 -0500
Subject: [PATCH] make sure modal and external link is not shown for metamask
 links in markdown content

---
 .../snap-ui-markdown/snap-ui-markdown.js      | 72 ++++++++++++-------
 1 file changed, 48 insertions(+), 24 deletions(-)

diff --git a/ui/components/app/snaps/snap-ui-markdown/snap-ui-markdown.js b/ui/components/app/snaps/snap-ui-markdown/snap-ui-markdown.js
index 90dc5af19290..235ea458786c 100644
--- a/ui/components/app/snaps/snap-ui-markdown/snap-ui-markdown.js
+++ b/ui/components/app/snaps/snap-ui-markdown/snap-ui-markdown.js
@@ -16,6 +16,7 @@ import {
   Text,
 } from '../../../component-library';
 import SnapLinkWarning from '../snap-link-warning';
+import useSnapNavigation from '../../../../hooks/snaps/useSnapNavigation';
 
 const Paragraph = (props) => (
   <Text
@@ -27,28 +28,42 @@ const Paragraph = (props) => (
   />
 );
 
-const Link = ({ onClick, children, ...rest }) => (
-  <ButtonLink
-    {...rest}
-    as="a"
-    onClick={onClick}
-    externalLink
-    size={ButtonLinkSize.Inherit}
-    display={Display.Inline}
-    className="snap-ui-markdown__link"
-  >
-    {children}
-    <Icon name={IconName.Export} size={IconSize.Inherit} marginLeft={1} />
-  </ButtonLink>
-);
+const Link = ({ onClick, children, isMetaMaskUrl, ...rest }) => {
+  return (
+    <ButtonLink
+      {...rest}
+      as="a"
+      onClick={onClick}
+      externalLink={!isMetaMaskUrl}
+      size={ButtonLinkSize.Inherit}
+      display={Display.Inline}
+      className="snap-ui-markdown__link"
+    >
+      {children}
+      {!isMetaMaskUrl && (
+        <Icon name={IconName.Export} size={IconSize.Inherit} marginLeft={1} />
+      )}
+    </ButtonLink>
+  );
+};
+
+const isMetaMaskUrl = (href) => href.startsWith('metamask:');
 
 export const SnapUIMarkdown = ({ children, markdown }) => {
   const [redirectUrl, setRedirectUrl] = useState(undefined);
+  const { navigate } = useSnapNavigation();
 
   if (markdown === false) {
     return <Paragraph>{children}</Paragraph>;
   }
 
+  const linkTransformer = (href) => {
+    if (isMetaMaskUrl(href)) {
+      return href;
+    }
+    return ReactMarkdown.uriTransformer(href);
+  };
+
   const handleLinkClick = (url) => {
     setRedirectUrl(url);
   };
@@ -66,18 +81,26 @@ export const SnapUIMarkdown = ({ children, markdown }) => {
       />
       <ReactMarkdown
         allowedElements={['p', 'strong', 'em', 'a']}
+        transformLinkUri={linkTransformer}
         components={{
           p: Paragraph,
-          a: ({ children: value, href }) => (
-            <Link
-              onClick={(e) => {
-                e.stopPropagation();
-                handleLinkClick(href);
-              }}
-            >
-              {value ?? href}
-            </Link>
-          ),
+          a: ({ children: value, href }) => {
+            return (
+              <Link
+                onClick={(e) => {
+                  e.stopPropagation();
+                  if (isMetaMaskUrl(href)) {
+                    navigate(href);
+                  } else {
+                    handleLinkClick(href);
+                  }
+                }}
+                isMetaMaskUrl={isMetaMaskUrl(href)}
+              >
+                {value ?? href}
+              </Link>
+            );
+          },
         }}
       >
         {children}
@@ -94,4 +117,5 @@ SnapUIMarkdown.propTypes = {
 Link.propTypes = {
   onClick: PropTypes.func,
   children: PropTypes.node,
+  isMetaMaskUrl: PropTypes.bool,
 };