Enhance reusable SiteOrigin component (#14720)

* extend and reuse SiteOrigin component

ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-summary/confirm-page-container-summary.component.js

@@ -14,6 +14,7 @@ import NicknamePopovers from '../../../modals/nickname-popovers';
 import Typography from '../../../../ui/typography';
 import { TYPOGRAPHY } from '../../../../../helpers/constants/design-system';
 import { ORIGIN_METAMASK } from '../../../../../../shared/constants/app';
+import SiteOrigin from '../../../../ui/site-origin';
 
 const ConfirmPageContainerSummary = (props) => {
   const {
@@ -85,7 +86,10 @@ const ConfirmPageContainerSummary = (props) => {
   return (
     <div className={classnames('confirm-page-container-summary', className)}>
       {origin === ORIGIN_METAMASK ? null : (
-        <div className="confirm-page-container-summary__origin">{origin}</div>
+        <SiteOrigin
+          className="confirm-page-container-summary__origin"
+          siteOrigin={origin}
+        />
       )}
       <div className="confirm-page-container-summary__action-row">
         <div className="confirm-page-container-summary__action">

ui/components/app/connected-sites-list/connected-sites-list.component.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import Button from '../../ui/button';
 import SiteIcon from '../../ui/site-icon';
 import { stripHttpsSchemeWithoutPort } from '../../../helpers/utils/util';
+import SiteOrigin from '../../ui/site-origin';
 
 export default class ConnectedSitesList extends Component {
   static contextTypes = {
@@ -33,12 +34,11 @@ export default class ConnectedSitesList extends Component {
           >
             <div className="connected-sites-list__subject-info">
               <SiteIcon icon={subject.iconUrl} name={subject.name} size={32} />
-              <span
+              <SiteOrigin
                 className="connected-sites-list__subject-name"
                 title={subject.extensionId || subject.origin}
-              >
+                siteOrigin={this.getSubjectDisplayName(subject)}
-                {this.getSubjectDisplayName(subject)}
+              />
-              </span>
             </div>
             <Button
               className="connected-sites-list__content-row-link-button"

ui/components/app/connected-sites-list/index.scss

@@ -34,10 +34,6 @@
 
   &__subject-name {
     max-width: 215px;
-    white-space: nowrap;
-    overflow: hidden;
-    direction: rtl;
-    text-overflow: ellipsis;
     margin-left: 6px;
   }
 }

ui/components/app/signature-request-original/index.scss

@@ -170,8 +170,6 @@
 
   &__origin {
     margin-left: 5px;
-    overflow: hidden;
-    text-overflow: ellipsis;
   }
 
   &__notice,

ui/components/app/signature-request-original/signature-request-original.component.js

@@ -13,6 +13,7 @@ import AccountListItem from '../account-list-item';
 import { conversionUtil } from '../../../../shared/modules/conversion.utils';
 import Button from '../../ui/button';
 import SiteIcon from '../../ui/site-icon';
+import SiteOrigin from '../../ui/site-origin';
 
 export default class SignatureRequestOriginal extends Component {
   static contextTypes = {
@@ -148,9 +149,10 @@ export default class SignatureRequestOriginal extends Component {
             size={24}
           />
         ) : null}
-        <div className="request-signature__origin">
+        <SiteOrigin
-          {txData.msgParams.origin}
+          className="request-signature__origin"
-        </div>
+          siteOrigin={txData.msgParams.origin}
+        />
       </div>
     );
   };

ui/components/app/signature-request/index.scss

@@ -68,6 +68,8 @@
 
   &__info {
     @include H7;
+
+    padding: 0 12px 4px;
   }
 
   &__info--bolded {

ui/components/app/signature-request/signature-request.component.js

@@ -4,6 +4,7 @@ import Identicon from '../../ui/identicon';
 import LedgerInstructionField from '../ledger-instruction-field';
 import { sanitizeMessage } from '../../../helpers/utils/util';
 import { EVENT } from '../../../../shared/constants/metametrics';
+import SiteOrigin from '../../ui/site-origin';
 import Header from './signature-request-header';
 import Footer from './signature-request-footer';
 import Message from './signature-request-message';
@@ -124,7 +125,10 @@ export default class SignatureRequest extends PureComponent {
           <div className="signature-request-content__info--bolded">
             {domain.name}
           </div>
-          <div className="signature-request-content__info">{origin}</div>
+          <SiteOrigin
+            className="signature-request-content__info"
+            siteOrigin={origin}
+          />
           <div className="signature-request-content__info">
             {this.formatWallet(fromAddress)}
           </div>

ui/components/app/transaction-list-item/index.scss

@@ -53,15 +53,9 @@
     margin: 0 4px;
   }
 
-  &__origin,
   &__address {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
-
-  &__origin {
-    /*rtl:ignore*/
-    direction: rtl;
-  }
 }

ui/components/app/transaction-list-item/smart-transaction-list-item.component.js

@@ -14,6 +14,7 @@ import {
 
 import CancelButton from '../cancel-button';
 import { cancelSwapsSmartTransaction } from '../../../ducks/swaps/swaps';
+import SiteOrigin from '../../ui/site-origin';
 
 export default function SmartTransactionListItem({
   smartTransaction,
@@ -60,9 +61,11 @@ export default function SmartTransactionListItem({
               date={date}
               status={displayedStatusKey}
             />
-            <span className="transaction-list-item__origin" title={subtitle}>
+            <SiteOrigin
-              {subtitle}
+              className="transaction-list-item__origin"
-            </span>
+              siteOrigin={subtitle}
+              title={subtitle}
+            />
           </h3>
         }
       >

ui/components/app/transaction-list-item/transaction-list-item.component.js

@@ -39,6 +39,7 @@ import CancelSpeedupPopover from '../cancel-speedup-popover';
 import EditGasFeePopover from '../edit-gas-fee-popover';
 import EditGasPopover from '../edit-gas-popover';
 import { MetaMetricsContext } from '../../../contexts/metametrics';
+import SiteOrigin from '../../ui/site-origin';
 
 function TransactionListItemInner({
   transactionGroup,
@@ -191,16 +192,13 @@ function TransactionListItemInner({
               date={date}
               status={displayedStatusKey}
             />
-            <span
+            {subtitleContainsOrigin ? (
-              className={
+              <SiteOrigin siteOrigin={subtitle} />
-                subtitleContainsOrigin
+            ) : (
-                  ? 'transaction-list-item__origin'
+              <span className="transaction-list-item__address" title={subtitle}>
-                  : 'transaction-list-item__address'
+                {subtitle}
-              }
+              </span>
-              title={subtitle}
+            )}
-            >
-              {subtitle}
-            </span>
           </h3>
         }
         rightContent={

ui/components/ui/site-origin/index.scss

@@ -1,12 +1,13 @@
 .site-origin {
+  overflow: hidden;
   max-width: 100%;
 
   .chip {
     max-width: 100%;
-  }
 
-  .chip__left-icon {
+    &__left-icon {
-    padding: 4px 0 4px 8px;
+      padding: 4px 0 4px 8px;
+    }
   }
 
   span {
@@ -17,5 +18,6 @@
 
     /*rtl:ignore*/
     direction: rtl;
+    max-width: 100%;
   }
 }

ui/components/ui/site-origin/site-origin.js

@@ -1,22 +1,60 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classnames from 'classnames';
 import Chip from '../chip';
 import IconWithFallback from '../icon-with-fallback';
 
-export default function SiteOrigin({ siteOrigin, iconSrc, iconName }) {
+export default function SiteOrigin({
+  siteOrigin,
+  iconSrc,
+  iconName,
+  chip,
+  className,
+  title,
+}) {
   return (
-    <div className="site-origin">
+    <div className={classnames('site-origin', className)} title={title}>
-      <Chip
+      {chip ? (
-        label={siteOrigin}
+        <Chip
-        maxContent={false}
+          label={siteOrigin}
-        leftIcon={<IconWithFallback icon={iconSrc} name={iconName} size={32} />}
+          maxContent={false}
-      />
+          leftIcon={
+            <IconWithFallback icon={iconSrc} name={iconName} size={32} />
+          }
+        />
+      ) : (
+        <span>{siteOrigin}</span>
+      )}
     </div>
   );
 }
 
 SiteOrigin.propTypes = {
+  /**
+   * The origin of the site generally the URL
+   */
   siteOrigin: PropTypes.string.isRequired,
+  /**
+   * Icon name is used for the fallback icon and will display the first letter of the string
+   * when iconSrc errors or is not provided.
+   */
   iconName: PropTypes.string,
+  /**
+   * The image src of the icon
+   */
   iconSrc: PropTypes.string,
+  /**
+   * Additional className added to the root html element
+   */
+  className: PropTypes.string,
+  /**
+   * title specifies extra information and is added to a title attribute added to the root html element
+   * It is most often shown as a tooltip text when the mouse moves over the element.
+   */
+  title: PropTypes.string,
+  /**
+   * Whether the SiteOrigin is displayed as a chip or plain text.
+   * if false iconSrc and iconName props will not be used.
+   */
+  chip: PropTypes.bool,
 };

ui/components/ui/site-origin/site-origin.stories.js

@@ -16,6 +16,12 @@ export default {
     iconName: {
       control: 'text',
     },
+    title: {
+      control: 'text',
+    },
+    chip: {
+      control: 'boolean',
+    },
   },
 };
 
@@ -25,6 +31,8 @@ DefaultStory.storyName = 'Default';
 
 DefaultStory.args = {
   siteOrigin: 'https://metamask.io',
+  title: 'https://metamask.io',
   iconName: 'MetaMask',
   iconSrc: './metamark.svg',
+  chip: true,
 };

ui/pages/confirm-encryption-public-key/confirm-encryption-public-key.component.js

@@ -7,6 +7,7 @@ import Identicon from '../../components/ui/identicon';
 
 import { EVENT } from '../../../shared/constants/metametrics';
 import { conversionUtil } from '../../../shared/modules/conversion.utils';
+import SiteOrigin from '../../components/ui/site-origin';
 
 export default class ConfirmEncryptionPublicKey extends Component {
   static contextTypes = {
@@ -118,7 +119,9 @@ export default class ConfirmEncryptionPublicKey extends Component {
     const { t } = this.context;
 
     const targetSubjectMetadata = subjectMetadata[txData.origin];
-    const notice = t('encryptionPublicKeyNotice', [txData.origin]);
+    const notice = t('encryptionPublicKeyNotice', [
+      <SiteOrigin siteOrigin={txData.origin} key={txData.origin} />,
+    ]);
     const name = targetSubjectMetadata?.hostname || txData.origin;
 
     return (

ui/pages/confirm-encryption-public-key/confirm-encryption-public-key.scss

@@ -198,6 +198,7 @@
       flex-direction: column;
       align-items: center;
       flex: 1;
+      width: 100%;
     }
 
     &-identicon {

ui/pages/confirmation/confirmation.js

@@ -10,7 +10,6 @@ import { useHistory } from 'react-router-dom';
 import { isEqual } from 'lodash';
 import { produce } from 'immer';
 import Box from '../../components/ui/box';
-import Chip from '../../components/ui/chip';
 import MetaMaskTemplateRenderer from '../../components/app/metamask-template-renderer';
 import SiteIcon from '../../components/ui/site-icon';
 import { DEFAULT_ROUTE } from '../../helpers/constants/routes';
@@ -25,6 +24,7 @@ import { useOriginMetadata } from '../../hooks/useOriginMetadata';
 import { getUnapprovedTemplatedConfirmations } from '../../selectors';
 import NetworkDisplay from '../../components/app/network-display/network-display';
 import Callout from '../../components/ui/callout';
+import SiteOrigin from '../../components/ui/site-origin';
 import ConfirmationFooter from './components/confirmation-footer';
 import { getTemplateValues, getTemplateAlerts } from './templates';
 
@@ -208,9 +208,10 @@ export default function ConfirmationPage() {
             name={originMetadata.hostname}
             size={36}
           />
-          <Chip
+          <SiteOrigin
-            label={stripHttpsScheme(originMetadata.origin)}
+            chip
-            borderColor={COLORS.BORDER_DEFAULT}
+            siteOrigin={stripHttpsScheme(originMetadata.origin)}
+            title={stripHttpsScheme(originMetadata.origin)}
           />
         </Box>
         <MetaMaskTemplateRenderer sections={templatedValues.content} />