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>
2024-11-21 17:37:01 +01:00 · 2023-08-30 05:22:53 +08:00 · 2023-08-30 05:22:53 +08:00 · 3747bc61ef
commit 3747bc61ef
parent 863362dc37
5 changed files with 132 additions and 115 deletions
--- a/ui/pages/keyring-snaps/snap-account-detail-page/snapshots/snap-account-detail-page.test.tsx.snap
+++ b/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
-              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>
+            By MetaMask
          </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
-              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>
+            Audited
          </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
-            class="mm-box mm-text mm-text--body-md mm-box--color-text-default"
+          <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="auditUrl1"
+            rel="noopener noreferrer"
+            target="_blank"
          >
-            <a
-              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"
-              href="auditUrl1"
-            >
-              auditUrl1
-            </a>
-          </p>
-          <p
-            class="mm-box mm-text mm-text--body-md mm-box--color-text-default"
+            auditUrl1
+          </a>
+          <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="auditUrl2"
+            rel="noopener noreferrer"
+            target="_blank"
          >
-            <a
-              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"
-              href="auditUrl2"
-            >
-              auditUrl2
-            </a>
-          </p>
+            auditUrl2
+          </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"
          >
            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>
--- a/ui/pages/keyring-snaps/snap-account-detail-page/detail.tsx
+++ b/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}
--- a/ui/pages/keyring-snaps/snap-account-detail-page/header.tsx
+++ b/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
-              color={TextColor.infoDefault}
-              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('snapCreatedByMetaMask')}
-                  </Text>
-                </Box>
-              }
-              labelProps={{
-                color: TextColor.infoDefault,
-              }}
-              className=""
-              marginRight={1}
-            />
+            <SnapDetailTag icon={IconName.Star}>
+              {t('snapCreatedByMetaMask')}
+            </SnapDetailTag>
          )}
          {auditUrls.length > 0 && (
-            <Tag
-              className=""
-              color={TextColor.infoDefault}
-              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,
-              }}
-            />
+            <SnapDetailTag icon={IconName.Star}>
+              {t('snapIsAudited')}
+            </SnapDetailTag>
          )}
        </Box>
      </Box>
--- a/ui/pages/keyring-snaps/snap-account-detail-page/snap-account-detail-page.tsx
+++ b/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 variant={ButtonVariant.Link} href={auditLink}>
-                    {auditLink}
-                  </Button>
-                </Text>
+                <Button
+                  key={`audit-link-${index}`}
+                  variant={ButtonVariant.Link}
+                  overflowWrap={OverflowWrap.Anywhere}
+                  href={auditLink}
+                  externalLink
+                >
+                  {auditLink}
+                </Button>
              );
            })}
          </Detail>
--- a/ui/pages/keyring-snaps/snap-account-detail-page/snap-detail-tag.tsx
+++ b/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);