fix: overflow of link and warnings (#20375)

* fix: overflow of link and warnings

* fix: update snapshot

* --wrapped in React.memo HOC
--changed Website to a clickable link
--slightly better overflow wrapping, but the best would be to wrap on dots and slashes

* updated snapshot

---------

Co-authored-by: Howard Braham <howrad@gmail.com>

ui/pages/keyring-snaps/snap-account-detail-page/__snapshots__/snap-account-detail-page.test.tsx.snap

@@ -61,47 +61,31 @@ exports[`SnapAccountDetails should take a snapshot 1`] = `
           />
         </div>
         <div
-          class="mm-box mm-tag mm-box--margin-right-1 mm-box--padding-right-1 mm-box--padding-left-1 mm-box--display-inline-block mm-box--justify-content-center mm-box--align-items-center mm-box--color-info-default mm-box--background-color-info-muted mm-box--rounded-pill mm-box--border-color-info-muted mm-box--border-width-1 box--border-style-solid"
+          class="mm-box mm-tag mm-box--margin-right-1 mm-box--padding-right-1 mm-box--padding-left-1 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--background-color-info-muted mm-box--rounded-pill mm-box--border-color-info-muted mm-box--border-width-1 box--border-style-solid"
         >
+          <span
+            class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-info-default"
+            style="mask-image: url('./images/icons/star.svg');"
+          />
+           
           <p
             class="mm-box mm-text mm-text--body-sm mm-box--color-info-default"
           >
-            <div
+            By MetaMask
-              class="mm-box mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center"
-            >
-              <span
-                class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-inherit"
-                style="mask-image: url('./images/icons/star.svg');"
-              />
-               
-              <p
-                class="mm-box mm-text mm-text--body-sm mm-box--color-info-default"
-              >
-                By MetaMask
-              </p>
-            </div>
           </p>
         </div>
         <div
-          class="mm-box mm-tag mm-box--padding-right-1 mm-box--padding-left-1 mm-box--display-inline-block mm-box--justify-content-center mm-box--align-items-center mm-box--color-info-default mm-box--background-color-info-muted mm-box--rounded-pill mm-box--border-color-info-muted mm-box--border-width-1 box--border-style-solid"
+          class="mm-box mm-tag mm-box--margin-right-1 mm-box--padding-right-1 mm-box--padding-left-1 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--background-color-info-muted mm-box--rounded-pill mm-box--border-color-info-muted mm-box--border-width-1 box--border-style-solid"
         >
+          <span
+            class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-info-default"
+            style="mask-image: url('./images/icons/star.svg');"
+          />
+           
           <p
             class="mm-box mm-text mm-text--body-sm mm-box--color-info-default"
           >
-            <div
+            Audited
-              class="mm-box mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center"
-            >
-              <span
-                class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-inherit"
-                style="mask-image: url('./images/icons/star.svg');"
-              />
-               
-              <p
-                class="mm-box mm-text mm-text--body-sm mm-box--color-info-default"
-              >
-                Audited
-              </p>
-            </div>
           </p>
         </div>
       </div>
@@ -130,7 +114,7 @@ exports[`SnapAccountDetails should take a snapshot 1`] = `
           class="mm-box mm-box--margin-bottom-4 mm-box--flex-direction-column"
         >
           <p
-            class="mm-box mm-text mm-text--body-sm-bold mm-box--margin-bottom-1 mm-box--color-text-default"
+            class="mm-box mm-text mm-text--body-sm-bold mm-text--overflow-wrap-break-word mm-box--margin-bottom-1 mm-box--color-text-default"
           >
             Tags
           </p>
@@ -148,12 +132,12 @@ exports[`SnapAccountDetails should take a snapshot 1`] = `
           class="mm-box mm-box--margin-bottom-4 mm-box--flex-direction-column"
         >
           <p
-            class="mm-box mm-text mm-text--body-sm-bold mm-box--margin-bottom-1 mm-box--color-text-default"
+            class="mm-box mm-text mm-text--body-sm-bold mm-text--overflow-wrap-break-word mm-box--margin-bottom-1 mm-box--color-text-default"
           >
             Developer
           </p>
           <p
-            class="mm-box mm-text mm-text--body-md mm-box--color-text-default"
+            class="mm-box mm-text mm-text--body-md mm-text--overflow-wrap-break-word mm-box--color-text-default"
           >
             Metamask
           </p>
@@ -162,46 +146,49 @@ exports[`SnapAccountDetails should take a snapshot 1`] = `
           class="mm-box mm-box--margin-bottom-4 mm-box--flex-direction-column"
         >
           <p
-            class="mm-box mm-text mm-text--body-sm-bold mm-box--margin-bottom-1 mm-box--color-text-default"
+            class="mm-box mm-text mm-text--body-sm-bold mm-text--overflow-wrap-break-word mm-box--margin-bottom-1 mm-box--color-text-default"
           >
             Website
           </p>
-          https://www.consensys.net/
+          <a
+            class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-text--overflow-wrap-anywhere mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
+            href="https://www.consensys.net/"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            https://www.consensys.net/
+          </a>
         </div>
         <div
           class="mm-box mm-box--margin-bottom-4 mm-box--flex-direction-column"
         >
           <p
-            class="mm-box mm-text mm-text--body-sm-bold mm-box--margin-bottom-1 mm-box--color-text-default"
+            class="mm-box mm-text mm-text--body-sm-bold mm-text--overflow-wrap-break-word mm-box--margin-bottom-1 mm-box--color-text-default"
           >
             Audit
           </p>
-          <p
+          <a
-            class="mm-box mm-text mm-text--body-md mm-box--color-text-default"
+            class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-text--overflow-wrap-anywhere mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
+            href="auditUrl1"
+            rel="noopener noreferrer"
+            target="_blank"
           >
-            <a
+            auditUrl1
-              class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
+          </a>
-              href="auditUrl1"
+          <a
-            >
+            class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-text--overflow-wrap-anywhere mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
-              auditUrl1
+            href="auditUrl2"
-            </a>
+            rel="noopener noreferrer"
-          </p>
+            target="_blank"
-          <p
-            class="mm-box mm-text mm-text--body-md mm-box--color-text-default"
           >
-            <a
+            auditUrl2
-              class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
+          </a>
-              href="auditUrl2"
-            >
-              auditUrl2
-            </a>
-          </p>
         </div>
         <div
           class="mm-box mm-box--margin-bottom-4 mm-box--flex-direction-column"
         >
           <p
-            class="mm-box mm-text mm-text--body-sm-bold mm-box--margin-bottom-1 mm-box--color-text-default"
+            class="mm-box mm-text mm-text--body-sm-bold mm-text--overflow-wrap-break-word mm-box--margin-bottom-1 mm-box--color-text-default"
           >
             Version
           </p>
@@ -215,7 +202,7 @@ exports[`SnapAccountDetails should take a snapshot 1`] = `
           class="mm-box mm-box--margin-bottom-4 mm-box--flex-direction-column"
         >
           <p
-            class="mm-box mm-text mm-text--body-sm-bold mm-box--margin-bottom-1 mm-box--color-text-default"
+            class="mm-box mm-text mm-text--body-sm-bold mm-text--overflow-wrap-break-word mm-box--margin-bottom-1 mm-box--color-text-default"
           >
             Updated
           </p>

ui/pages/keyring-snaps/snap-account-detail-page/detail.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Box, Text } from '../../../components/component-library';
 import {
   FlexDirection,
+  OverflowWrap,
   TextVariant,
 } from '../../../helpers/constants/design-system';
 
@@ -11,7 +12,11 @@ const Detail = ({
 }: React.PropsWithChildren<{ title: string }>) => {
   return (
     <Box flexDirection={FlexDirection.Column} marginBottom={4}>
-      <Text variant={TextVariant.bodySmBold} marginBottom={1}>
+      <Text
+        variant={TextVariant.bodySmBold}
+        overflowWrap={OverflowWrap.BreakWord}
+        marginBottom={1}
+      >
         {title}
       </Text>
       {children}

ui/pages/keyring-snaps/snap-account-detail-page/header.tsx

@@ -13,7 +13,6 @@ import {
 } from '../../../components/component-library';
 import {
   AlignItems,
-  BackgroundColor,
   BorderColor,
   Display,
   FlexDirection,
@@ -22,8 +21,9 @@ import {
   TextVariant,
 } from '../../../helpers/constants/design-system';
 import { useI18nContext } from '../../../hooks/useI18nContext';
-import { SnapCardProps } from '../new-snap-account-page/new-snap-account-page';
 import { METAMASK_DEVELOPER } from '../constants';
+import { SnapCardProps } from '../new-snap-account-page/new-snap-account-page';
+import SnapDetailTag from './snap-detail-tag';
 
 export const SnapDetailHeader = ({
   updateAvailable,
@@ -147,57 +147,14 @@ export const SnapDetailHeader = ({
             <img src={iconUrl} className="snap-detail-icon" />
           </Box>
           {developer.toLowerCase() === METAMASK_DEVELOPER && (
-            <Tag
+            <SnapDetailTag icon={IconName.Star}>
-              color={TextColor.infoDefault}
+              {t('snapCreatedByMetaMask')}
-              backgroundColor={BackgroundColor.infoMuted}
+            </SnapDetailTag>
-              borderColor={BorderColor.infoMuted}
-              label={
-                <Box
-                  display={Display.Flex}
-                  justifyContent={JustifyContent.center}
-                  alignItems={AlignItems.center}
-                >
-                  <Icon name={IconName.Star} />{' '}
-                  <Text
-                    color={TextColor.infoDefault}
-                    variant={TextVariant.bodySm}
-                  >
-                    {t('snapCreatedByMetaMask')}
-                  </Text>
-                </Box>
-              }
-              labelProps={{
-                color: TextColor.infoDefault,
-              }}
-              className=""
-              marginRight={1}
-            />
           )}
           {auditUrls.length > 0 && (
-            <Tag
+            <SnapDetailTag icon={IconName.Star}>
-              className=""
+              {t('snapIsAudited')}
-              color={TextColor.infoDefault}
+            </SnapDetailTag>
-              backgroundColor={BackgroundColor.infoMuted}
-              borderColor={BorderColor.infoMuted}
-              label={
-                <Box
-                  display={Display.Flex}
-                  justifyContent={JustifyContent.center}
-                  alignItems={AlignItems.center}
-                >
-                  <Icon name={IconName.Star} />{' '}
-                  <Text
-                    color={TextColor.infoDefault}
-                    variant={TextVariant.bodySm}
-                  >
-                    {t('snapIsAudited')}
-                  </Text>
-                </Box>
-              }
-              labelProps={{
-                color: TextColor.infoDefault,
-              }}
-            />
           )}
         </Box>
       </Box>

ui/pages/keyring-snaps/snap-account-detail-page/snap-account-detail-page.tsx

@@ -13,6 +13,7 @@ import {
   BlockSize,
   Display,
   FlexDirection,
+  OverflowWrap,
   TextColor,
   TextVariant,
 } from '../../../helpers/constants/design-system';
@@ -104,17 +105,35 @@ export default function SnapAccountDetailPage() {
             })}
           </Detail>
           <Detail title={t('snapDetailDeveloper')}>
-            <Text variant={TextVariant.bodyMd}>{currentSnap.developer}</Text>
+            <Text
+              variant={TextVariant.bodyMd}
+              overflowWrap={OverflowWrap.BreakWord}
+            >
+              {currentSnap.developer}
+            </Text>
+          </Detail>
+          <Detail title={t('snapDetailWebsite')}>
+            <Button
+              variant={ButtonVariant.Link}
+              overflowWrap={OverflowWrap.Anywhere}
+              href={currentSnap.website}
+              externalLink
+            >
+              {currentSnap.website}
+            </Button>
           </Detail>
-          <Detail title={t('snapDetailWebsite')}>{currentSnap.website}</Detail>
           <Detail title={t('snapDetailAudits')}>
             {currentSnap.auditUrls.map((auditLink, index) => {
               return (
-                <Text key={`audit-link-${index}`}>
+                <Button
-                  <Button variant={ButtonVariant.Link} href={auditLink}>
+                  key={`audit-link-${index}`}
-                    {auditLink}
+                  variant={ButtonVariant.Link}
-                  </Button>
+                  overflowWrap={OverflowWrap.Anywhere}
-                </Text>
+                  href={auditLink}
+                  externalLink
+                >
+                  {auditLink}
+                </Button>
               );
             })}
           </Detail>

ui/pages/keyring-snaps/snap-account-detail-page/snap-detail-tag.tsx

@@ -0,0 +1,49 @@
+import React, { ReactChildren } from 'react';
+import {
+  Box,
+  Icon,
+  IconName,
+  Text,
+} from '../../../components/component-library';
+import {
+  AlignItems,
+  BackgroundColor,
+  BorderColor,
+  BorderRadius,
+  Display,
+  IconColor,
+  JustifyContent,
+  TextColor,
+  TextVariant,
+} from '../../../helpers/constants/design-system';
+
+const SnapDetailTag = ({
+  icon,
+  children,
+}: {
+  icon: IconName;
+  children: ReactChildren;
+}) => {
+  return (
+    <Box
+      className="mm-tag"
+      backgroundColor={BackgroundColor.infoMuted}
+      borderColor={BorderColor.infoMuted}
+      borderWidth={1}
+      justifyContent={JustifyContent.center}
+      alignItems={AlignItems.center}
+      paddingLeft={1}
+      paddingRight={1}
+      marginRight={1}
+      borderRadius={BorderRadius.pill}
+      display={Display.Flex}
+    >
+      <Icon name={icon} color={IconColor.infoDefault} />{' '}
+      <Text color={TextColor.infoDefault} variant={TextVariant.bodySm}>
+        {children}
+      </Text>
+    </Box>
+  );
+};
+
+export default React.memo(SnapDetailTag);