From 634cf70a71f63ec98ff7efbc081620480efa8a58 Mon Sep 17 00:00:00 2001 From: Alex Donesky Date: Fri, 20 May 2022 09:35:18 -0500 Subject: [PATCH] Enhance reusable SiteOrigin component (#14720) * extend and reuse SiteOrigin component --- ...onfirm-page-container-summary.component.js | 6 ++- .../connected-sites-list.component.js | 8 +-- .../app/connected-sites-list/index.scss | 4 -- .../app/signature-request-original/index.scss | 2 - .../signature-request-original.component.js | 8 +-- .../app/signature-request/index.scss | 2 + .../signature-request.component.js | 6 ++- .../app/transaction-list-item/index.scss | 6 --- .../smart-transaction-list-item.component.js | 9 ++-- .../transaction-list-item.component.js | 18 +++---- ui/components/ui/site-origin/index.scss | 8 +-- ui/components/ui/site-origin/site-origin.js | 52 ++++++++++++++++--- .../ui/site-origin/site-origin.stories.js | 8 +++ ...confirm-encryption-public-key.component.js | 5 +- .../confirm-encryption-public-key.scss | 1 + ui/pages/confirmation/confirmation.js | 9 ++-- 16 files changed, 103 insertions(+), 49 deletions(-) diff --git a/ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-summary/confirm-page-container-summary.component.js b/ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-summary/confirm-page-container-summary.component.js index a83cc1e4e..2d5fb8193 100644 --- a/ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-summary/confirm-page-container-summary.component.js +++ b/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 (
{origin === ORIGIN_METAMASK ? null : ( -
{origin}
+ )}
diff --git a/ui/components/app/connected-sites-list/connected-sites-list.component.js b/ui/components/app/connected-sites-list/connected-sites-list.component.js index 52245e7cb..7b23820c0 100644 --- a/ui/components/app/connected-sites-list/connected-sites-list.component.js +++ b/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 { >
- - {this.getSubjectDisplayName(subject)} - + siteOrigin={this.getSubjectDisplayName(subject)} + />
); }; diff --git a/ui/components/app/signature-request/index.scss b/ui/components/app/signature-request/index.scss index 1483054d5..ad97e5781 100644 --- a/ui/components/app/signature-request/index.scss +++ b/ui/components/app/signature-request/index.scss @@ -68,6 +68,8 @@ &__info { @include H7; + + padding: 0 12px 4px; } &__info--bolded { diff --git a/ui/components/app/signature-request/signature-request.component.js b/ui/components/app/signature-request/signature-request.component.js index 4edaab599..a76dfa8b0 100644 --- a/ui/components/app/signature-request/signature-request.component.js +++ b/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 {
{domain.name}
-
{origin}
+
{this.formatWallet(fromAddress)}
diff --git a/ui/components/app/transaction-list-item/index.scss b/ui/components/app/transaction-list-item/index.scss index 69413b1e1..f523714bd 100644 --- a/ui/components/app/transaction-list-item/index.scss +++ b/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; - } } diff --git a/ui/components/app/transaction-list-item/smart-transaction-list-item.component.js b/ui/components/app/transaction-list-item/smart-transaction-list-item.component.js index 26133341e..156b9d8ef 100644 --- a/ui/components/app/transaction-list-item/smart-transaction-list-item.component.js +++ b/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} /> - - {subtitle} - + } > diff --git a/ui/components/app/transaction-list-item/transaction-list-item.component.js b/ui/components/app/transaction-list-item/transaction-list-item.component.js index 5cc73bc03..867d236f9 100644 --- a/ui/components/app/transaction-list-item/transaction-list-item.component.js +++ b/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} /> - - {subtitle} - + {subtitleContainsOrigin ? ( + + ) : ( + + {subtitle} + + )} } rightContent={ diff --git a/ui/components/ui/site-origin/index.scss b/ui/components/ui/site-origin/index.scss index 2f0016e76..895e0f2ef 100644 --- a/ui/components/ui/site-origin/index.scss +++ b/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 { - padding: 4px 0 4px 8px; + &__left-icon { + padding: 4px 0 4px 8px; + } } span { @@ -17,5 +18,6 @@ /*rtl:ignore*/ direction: rtl; + max-width: 100%; } } diff --git a/ui/components/ui/site-origin/site-origin.js b/ui/components/ui/site-origin/site-origin.js index 2dc545a68..78fee0e6b 100644 --- a/ui/components/ui/site-origin/site-origin.js +++ b/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 ( -
- } - /> +
+ {chip ? ( + + } + /> + ) : ( + {siteOrigin} + )}
); } 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, }; diff --git a/ui/components/ui/site-origin/site-origin.stories.js b/ui/components/ui/site-origin/site-origin.stories.js index 53a11c190..2604b5704 100644 --- a/ui/components/ui/site-origin/site-origin.stories.js +++ b/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, }; diff --git a/ui/pages/confirm-encryption-public-key/confirm-encryption-public-key.component.js b/ui/pages/confirm-encryption-public-key/confirm-encryption-public-key.component.js index 026cea6d8..92cbf9dae 100644 --- a/ui/pages/confirm-encryption-public-key/confirm-encryption-public-key.component.js +++ b/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', [ + , + ]); const name = targetSubjectMetadata?.hostname || txData.origin; return ( diff --git a/ui/pages/confirm-encryption-public-key/confirm-encryption-public-key.scss b/ui/pages/confirm-encryption-public-key/confirm-encryption-public-key.scss index caed0982a..0df5f72d5 100644 --- a/ui/pages/confirm-encryption-public-key/confirm-encryption-public-key.scss +++ b/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 { diff --git a/ui/pages/confirmation/confirmation.js b/ui/pages/confirmation/confirmation.js index 1d09457c5..b824155bc 100644 --- a/ui/pages/confirmation/confirmation.js +++ b/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} /> -