fix: Disable link out modal for preinstalled Snap links (#29142)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

Disables the link out modal for links displayed by preinstalled Snaps,
reducing the UX friction. Also memoizes a frequently used selector in
Snaps UI components.

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/29142?quickstart=1)

## **Related issues**

Closes MetaMask/snaps#2936

## **Manual testing steps**

1. Go to the Solana send flow and fill out the inputs
2. Proceed to the review screen
3. Click the links on the review screen and notice that they open right
away

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

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
+import { useSelector } from 'react-redux';
 import { Display } from '../../../../helpers/constants/design-system';
 import {
   ButtonLink,
@@ -10,19 +11,26 @@ import {
 } from '../../../component-library';
 import SnapLinkWarning from '../snap-link-warning';
 import useSnapNavigation from '../../../../hooks/snaps/useSnapNavigation';
+import { useSnapInterfaceContext } from '../../../../contexts/snaps';
+import { getHideSnapBranding } from '../../../../selectors';
 
 export const SnapUILink = ({ href, children }) => {
   const [isOpen, setIsOpen] = useState(false);
 
   const isMetaMaskUrl = href.startsWith('metamask:');
   const { navigate } = useSnapNavigation();
 
+  const { snapId } = useSnapInterfaceContext();
+  const hideSnapBranding = useSelector((state) =>
+    getHideSnapBranding(state, snapId),
+  );
+
+  const handleMetaMaskLinkClick = () => {
+    navigate(href);
+  };
+
   const handleLinkClick = () => {
-    if (isMetaMaskUrl) {
-      navigate(href);
-    } else {
-      setIsOpen(true);
-    }
+    setIsOpen(true);
   };
 
   const handleModalClose = () => {
@@ -35,9 +43,33 @@ export const SnapUILink = ({ href, children }) => {
         as="a"
         size={ButtonLinkSize.Inherit}
         className="snap-ui-renderer__link"
-        onClick={handleLinkClick}
+        onClick={handleMetaMaskLinkClick}
+      >
+        {children}
+      </ButtonLink>
+    );
+  }
+
+  // hideSnapBranding disables the modal and allows direct external links.
+  if (hideSnapBranding) {
+    return (
+      <ButtonLink
+        as="a"
+        href={href}
+        externalLink
+        size={ButtonLinkSize.Inherit}
+        display={Display.Inline}
+        className="snap-ui-renderer__link"
+        style={{
+          // Prevents the link from taking up the full width of the parent.
+          width: 'fit-content',
+        }}
+        textProps={{
+          display: Display.Inline,
+        }}
       >
         {children}
+        <Icon name={IconName.Export} size={IconSize.Inherit} marginLeft={1} />
       </ButtonLink>
     );
   }

ui/selectors/selectors.js

@@ -1332,7 +1332,7 @@ export const getAnySnapUpdateAvailable = createSelector(
 /**
  * Return if the snap branding should show in the UI.
  */
-export const getHideSnapBranding = createSelector(
+export const getHideSnapBranding = createDeepEqualSelector(
   [selectInstalledSnaps, selectSnapId],
   (installedSnaps, snapId) => {
     return installedSnaps[snapId]?.hideSnapBranding;