Adding UI helpers for URL parsing (#11899)

ui/components/app/alerts/unconnected-account-alert/unconnected-account-alert.js

@@ -15,7 +15,7 @@ import {
   getSelectedAddress,
   getSelectedIdentity,
 } from '../../../../selectors';
-import { isExtensionUrl } from '../../../../helpers/utils/util';
+import { isExtensionUrl, getURLHost } from '../../../../helpers/utils/util';
 import Popover from '../../../ui/popover';
 import Button from '../../../ui/button';
 import Checkbox from '../../../ui/check-box';
@@ -88,7 +88,7 @@ const UnconnectedAccountAlert = () => {
   return (
     <Popover
       title={
-        isExtensionUrl(origin) ? t('currentExtension') : new URL(origin).host
+        isExtensionUrl(origin) ? t('currentExtension') : getURLHost(origin)
       }
       subtitle={t('currentAccountNotConnected')}
       onClose={onClose}

ui/components/app/menu-bar/account-options-menu.js

@@ -6,6 +6,7 @@ import { getAccountLink } from '@metamask/etherscan-link';
 
 import { showModal } from '../../../store/actions';
 import { CONNECTED_ROUTE } from '../../../helpers/constants/routes';
+import { getURLHostName } from '../../../helpers/utils/util';
 import { Menu, MenuItem } from '../../ui/menu';
 import {
   getCurrentChainId,
@@ -33,14 +34,7 @@ export default function AccountOptionsMenu({ anchorElement, onClose }) {
   const { address } = selectedIdentity;
   const addressLink = getAccountLink(address, chainId, rpcPrefs);
   const { blockExplorerUrl } = rpcPrefs;
-
-  const getBlockExplorerUrlHost = () => {
-    try {
-      return new URL(blockExplorerUrl)?.hostname;
-    } catch (err) {
-      return '';
-    }
-  };
+  const blockExplorerUrlSubTitle = getURLHostName(blockExplorerUrl);
 
   const openFullscreenEvent = useMetricEvent({
     eventOpts: {
@@ -71,12 +65,11 @@ export default function AccountOptionsMenu({ anchorElement, onClose }) {
     properties: {
       link_type: 'Account Tracker',
       action: 'Account Options',
-      block_explorer_domain: addressLink ? new URL(addressLink)?.hostname : '',
+      block_explorer_domain: getURLHostName(addressLink),
     },
   });
 
   const isRemovable = keyring.type !== 'HD Key Tree';
-  const blockExplorerUrlSubTitle = getBlockExplorerUrlHost();
 
   return (
     <Menu

ui/components/app/modals/account-details-modal/account-details-modal.component.js

@@ -6,6 +6,7 @@ import AccountModalContainer from '../account-modal-container';
 import QrView from '../../../ui/qr-code';
 import EditableLabel from '../../../ui/editable-label';
 import Button from '../../../ui/button';
+import { getURLHostName } from '../../../../helpers/utils/util';
 
 export default class AccountDetailsModal extends Component {
   static propTypes = {
@@ -70,9 +71,7 @@ export default class AccountDetailsModal extends Component {
               properties: {
                 link_type: 'Account Tracker',
                 action: 'Account Details Modal',
-                block_explorer_domain: accountLink
-                  ? new URL(accountLink)?.hostname
-                  : '',
+                block_explorer_domain: getURLHostName(accountLink),
               },
             });
             global.platform.openTab({

ui/components/app/modals/confirm-remove-account/confirm-remove-account.component.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { getAccountLink } from '@metamask/etherscan-link';
 import Modal from '../../modal';
-import { addressSummary } from '../../../../helpers/utils/util';
+import { addressSummary, getURLHostName } from '../../../../helpers/utils/util';
 import Identicon from '../../../ui/identicon';
 
 export default class ConfirmRemoveAccount extends Component {
@@ -66,9 +66,7 @@ export default class ConfirmRemoveAccount extends Component {
                 properties: {
                   link_type: 'Account Tracker',
                   action: 'Remove Account',
-                  block_explorer_domain: accountLink
-                    ? new URL(accountLink)?.hostname
-                    : '',
+                  block_explorer_domain: getURLHostName(accountLink),
                 },
               });
               global.platform.openTab({

ui/components/app/modals/qr-scanner/qr-scanner.component.js

@@ -7,6 +7,7 @@ import { ENVIRONMENT_TYPE_FULLSCREEN } from '../../../../../shared/constants/app
 import { SECOND } from '../../../../../shared/constants/time';
 import Spinner from '../../../ui/spinner';
 import WebcamUtils from '../../../../helpers/utils/webcam-utils';
+import { getURL } from '../../../../helpers/utils/util';
 import PageContainerFooter from '../../../ui/page-container/page-container-footer/page-container-footer.component';
 
 const READY_STATE = {
@@ -68,8 +69,8 @@ export default class QrScanner extends Component {
         !environmentReady &&
         getEnvironmentType() !== ENVIRONMENT_TYPE_FULLSCREEN
       ) {
-        const currentUrl = new URL(window.location.href);
-        const currentHash = currentUrl.hash;
+        const currentUrl = getURL(window.location.href);
+        const currentHash = currentUrl?.hash;
         const currentRoute = currentHash ? currentHash.substring(1) : null;
         global.platform.openExtensionInBrowser(currentRoute);
       }

ui/components/app/transaction-activity-log/transaction-activity-log.component.js

@@ -7,7 +7,7 @@ import {
   getEthConversionFromWeiHex,
   getValueFromWeiHex,
 } from '../../../helpers/utils/conversions.util';
-import { formatDate } from '../../../helpers/utils/util';
+import { formatDate, getURLHostName } from '../../../helpers/utils/util';
 import TransactionActivityLogIcon from './transaction-activity-log-icon';
 import { CONFIRMED_STATUS } from './transaction-activity-log.constants';
 
@@ -41,9 +41,7 @@ export default class TransactionActivityLog extends PureComponent {
       properties: {
         link_type: 'Transaction Block Explorer',
         action: 'Activity Details',
-        block_explorer_domain: etherscanUrl
-          ? new URL(etherscanUrl)?.hostname
-          : '',
+        block_explorer_domain: getURLHostName(etherscanUrl),
       },
     });
 

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

@@ -12,6 +12,7 @@ import Copy from '../../ui/icon/copy-icon.component';
 import Popover from '../../ui/popover';
 import { SECOND } from '../../../../shared/constants/time';
 import { TRANSACTION_TYPES } from '../../../../shared/constants/transaction';
+import { getURLHostName } from '../../../helpers/utils/util';
 
 export default class TransactionListItemDetails extends PureComponent {
   static contextTypes = {
@@ -65,9 +66,7 @@ export default class TransactionListItemDetails extends PureComponent {
       properties: {
         link_type: 'Transaction Block Explorer',
         action: 'Transaction Details',
-        block_explorer_domain: blockExplorerLink
-          ? new URL(blockExplorerLink)?.hostname
-          : '',
+        block_explorer_domain: getURLHostName(blockExplorerLink),
       },
     });
 

ui/helpers/utils/util.js

@@ -379,3 +379,19 @@ export function bnLessThanEqualTo(a, b) {
   }
   return new BigNumber(a, 10).lte(b, 10);
 }
+
+export function getURL(url) {
+  try {
+    return new URL(url);
+  } catch (err) {
+    return '';
+  }
+}
+
+export function getURLHost(url) {
+  return getURL(url)?.host || '';
+}
+
+export function getURLHostName(url) {
+  return getURL(url)?.hostname || '';
+}

ui/pages/add-token/add-token.component.js

@@ -1,7 +1,10 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { getTokenTrackerLink } from '@metamask/etherscan-link';
-import { checkExistingAddresses } from '../../helpers/utils/util';
+import {
+  checkExistingAddresses,
+  getURLHostName,
+} from '../../helpers/utils/util';
 import { tokenInfoGetter } from '../../helpers/utils/token-util';
 import { CONFIRM_ADD_TOKEN_ROUTE } from '../../helpers/constants/routes';
 import TextField from '../../components/ui/text-field';
@@ -262,7 +265,7 @@ class AddToken extends Component {
       { blockExplorerUrl: rpcPrefs?.blockExplorerUrl ?? null },
     );
     const blockExplorerLabel = rpcPrefs?.blockExplorerUrl
-      ? new URL(blockExplorerTokenLink).hostname
+      ? getURLHostName(blockExplorerTokenLink)
       : this.context.t('etherscan');
 
     return (

ui/pages/asset/components/native-asset.js

@@ -13,6 +13,7 @@ import {
 } from '../../../selectors/selectors';
 import { showModal } from '../../../store/actions';
 import { DEFAULT_ROUTE } from '../../../helpers/constants/routes';
+import { getURLHostName } from '../../../helpers/utils/util';
 import { useNewMetricEvent } from '../../../hooks/useMetricEvent';
 import AssetNavigation from './asset-navigation';
 import AssetOptions from './asset-options';
@@ -35,7 +36,7 @@ export default function NativeAsset({ nativeCurrency }) {
     properties: {
       link_type: 'Account Tracker',
       action: 'Asset Options',
-      block_explorer_domain: accountLink ? new URL(accountLink)?.hostname : '',
+      block_explorer_domain: getURLHostName(accountLink),
     },
   });
 

ui/pages/asset/components/token-asset.js

@@ -11,6 +11,7 @@ import {
   getRpcPrefsForCurrentProvider,
 } from '../../../selectors/selectors';
 import { DEFAULT_ROUTE } from '../../../helpers/constants/routes';
+import { getURLHostName } from '../../../helpers/utils/util';
 import { showModal } from '../../../store/actions';
 import { useNewMetricEvent } from '../../../hooks/useMetricEvent';
 
@@ -39,9 +40,7 @@ export default function TokenAsset({ token }) {
     properties: {
       link_type: 'Token Tracker',
       action: 'Token Options',
-      block_explorer_domain: tokenTrackerLink
-        ? new URL(tokenTrackerLink)?.hostname
-        : '',
+      block_explorer_domain: getURLHostName(tokenTrackerLink),
     },
   });
 

ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import UrlIcon from '../../../components/ui/url-icon';
-import { addressSummary } from '../../../helpers/utils/util';
+import { addressSummary, getURLHostName } from '../../../helpers/utils/util';
 import { formatCurrency } from '../../../helpers/utils/confirm-tx.util';
 import { ConfirmPageContainerWarning } from '../../../components/app/confirm-page-container/confirm-page-container-content';
 import Typography from '../../../components/ui/typography';
@@ -256,7 +256,7 @@ export default class ConfirmApproveContent extends Component {
           <UrlIcon
             className="confirm-approve-content__identicon"
             fallbackClassName="confirm-approve-content__identicon"
-            name={origin ? new URL(origin).hostname : ''}
+            name={getURLHostName(origin)}
             url={siteImage}
           />
         </div>

ui/pages/confirm-transaction-base/confirm-transaction-base.component.js

@@ -9,6 +9,7 @@ import {
   hexToDecimal,
   hexWEIToDecGWEI,
 } from '../../helpers/utils/conversions.util';
+import { getURLHostName } from '../../helpers/utils/util';
 import {
   CONFIRM_TRANSACTION_ROUTE,
   DEFAULT_ROUTE,
@@ -300,14 +301,6 @@ export default class ConfirmTransactionBase extends Component {
     } = this.props;
     const { t } = this.context;
 
-    const getRequestingOrigin = () => {
-      try {
-        return new URL(txData.origin)?.hostname;
-      } catch (err) {
-        return '';
-      }
-    };
-
     const renderTotalMaxAmount = () => {
       if (
         primaryTotalTextOverrideMaxAmount === undefined &&
@@ -409,7 +402,7 @@ export default class ConfirmTransactionBase extends Component {
                 txData.dappSuggestedGasFees ? (
                   <>
                     {t('transactionDetailDappGasHeading', [
-                      getRequestingOrigin(),
+                      getURLHostName(txData?.origin),
                     ])}
                     <InfoTooltip
                       contentText={t('transactionDetailDappGasTooltip')}

ui/pages/connected-accounts/connected-accounts.component.js

@@ -3,6 +3,7 @@ import React, { PureComponent } from 'react';
 import Popover from '../../components/ui/popover';
 import ConnectedAccountsList from '../../components/app/connected-accounts-list';
 import ConnectedAccountsPermissions from '../../components/app/connected-accounts-permissions';
+import { getURLHost } from '../../helpers/utils/util';
 
 export default class ConnectedAccounts extends PureComponent {
   static contextTypes = {
@@ -54,7 +55,7 @@ export default class ConnectedAccounts extends PureComponent {
         title={
           isActiveTabExtension
             ? t('currentExtension')
-            : new URL(activeTabOrigin).host
+            : getURLHost(activeTabOrigin)
         }
         subtitle={
           connectedAccounts.length

ui/pages/create-account/connect-hardware/account-list.js

@@ -7,6 +7,8 @@ import Checkbox from '../../../components/ui/check-box';
 import Dropdown from '../../../components/ui/dropdown';
 import Popover from '../../../components/ui/popover';
 
+import { getURLHostName } from '../../../helpers/utils/util';
+
 class AccountList extends Component {
   state = {
     showPopover: false,
@@ -143,9 +145,7 @@ class AccountList extends Component {
                     properties: {
                       actions: 'Hardware Connect',
                       link_type: 'Account Tracker',
-                      block_explorer_domain: accountLink
-                        ? new URL(accountLink)?.hostname
-                        : '',
+                      block_explorer_domain: getURLHostName(accountLink),
                     },
                   });
                   global.platform.openTab({

ui/pages/swaps/awaiting-swap/view-on-ether-scan-link/view-on-ether-scan-link.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { I18nContext } from '../../../../contexts/i18n';
 import { useNewMetricEvent } from '../../../../hooks/useMetricEvent';
+import { getURLHostName } from '../../../../helpers/utils/util';
 
 export default function ViewOnEtherScanLink({
   txHash,
@@ -17,9 +18,7 @@ export default function ViewOnEtherScanLink({
     properties: {
       link_type: 'Transaction Block Explorer',
       action: 'Swap Transaction',
-      block_explorer_domain: blockExplorerUrl
-        ? new URL(blockExplorerUrl)?.hostname
-        : '',
+      block_explorer_domain: getURLHostName(blockExplorerUrl),
     },
   });
 
@@ -35,7 +34,7 @@ export default function ViewOnEtherScanLink({
       }}
     >
       {isCustomBlockExplorerUrl
-        ? t('viewOnCustomBlockExplorer', [new URL(blockExplorerUrl).hostname])
+        ? t('viewOnCustomBlockExplorer', [getURLHostName(blockExplorerUrl)])
         : t('viewOnEtherscan')}
     </div>
   );

ui/pages/swaps/build-quote/build-quote.js

@@ -43,6 +43,7 @@ import {
   hexToDecimal,
 } from '../../../helpers/utils/conversions.util';
 import { calcTokenAmount } from '../../../helpers/utils/token-util';
+import { getURLHostName } from '../../../helpers/utils/util';
 import { usePrevious } from '../../../hooks/usePrevious';
 import { useTokenTracker } from '../../../hooks/useTokenTracker';
 import { useTokenFiatAmount } from '../../../hooks/useTokenFiatAmount';
@@ -241,7 +242,7 @@ export default function BuildQuote({
   );
 
   const blockExplorerLabel = rpcPrefs.blockExplorerUrl
-    ? new URL(blockExplorerTokenLink).hostname
+    ? getURLHostName(blockExplorerTokenLink)
     : t('etherscan');
 
   const blockExplorerLinkClickedEvent = useNewMetricEvent({
@@ -250,9 +251,7 @@ export default function BuildQuote({
     properties: {
       link_type: 'Token Tracker',
       action: 'Swaps Confirmation',
-      block_explorer_domain: blockExplorerTokenLink
-        ? new URL(blockExplorerTokenLink)?.hostname
-        : '',
+      block_explorer_domain: getURLHostName(blockExplorerTokenLink),
     },
   });
 

ui/pages/swaps/dropdown-search-list/dropdown-search-list.js

@@ -23,6 +23,7 @@ import {
   getRpcPrefsForCurrentProvider,
 } from '../../../selectors/selectors';
 import { SWAPS_CHAINID_DEFAULT_BLOCK_EXPLORER_URL_MAP } from '../../../../shared/constants/swaps';
+import { getURLHostName } from '../../../helpers/utils/util';
 
 export default function DropdownSearchList({
   searchListClassName,
@@ -138,7 +139,7 @@ export default function DropdownSearchList({
     null;
 
   const blockExplorerLabel = rpcPrefs.blockExplorerUrl
-    ? new URL(blockExplorerLink).hostname
+    ? getURLHostName(blockExplorerLink)
     : t('etherscan');
 
   const blockExplorerLinkClickedEvent = useNewMetricEvent({
@@ -147,9 +148,7 @@ export default function DropdownSearchList({
     properties: {
       link_type: 'Token Tracker',
       action: 'Verify Contract Address',
-      block_explorer_domain: blockExplorerLink
-        ? new URL(blockExplorerLink)?.hostname
-        : '',
+      block_explorer_domain: getURLHostName(blockExplorerLink),
     },
   });
 

ui/pages/swaps/searchable-item-list/item-list/item-list.component.js

@@ -13,6 +13,7 @@ import {
 } from '../../../../selectors';
 import { SWAPS_CHAINID_DEFAULT_BLOCK_EXPLORER_URL_MAP } from '../../../../../shared/constants/swaps';
 import { useNewMetricEvent } from '../../../../hooks/useMetricEvent';
+import { getURLHostName } from '../../../../helpers/utils/util';
 
 export default function ItemList({
   results = [],
@@ -36,7 +37,7 @@ export default function ItemList({
     null;
 
   const blockExplorerLabel = rpcPrefs.blockExplorerUrl
-    ? new URL(blockExplorerLink).hostname
+    ? getURLHostName(blockExplorerLink)
     : t('etherscan');
 
   const blockExplorerLinkClickedEvent = useNewMetricEvent({
@@ -45,9 +46,7 @@ export default function ItemList({
     properties: {
       link_type: 'Token Tracker',
       action: 'Verify Contract Address',
-      block_explorer_domain: blockExplorerLink
-        ? new URL(blockExplorerLink)?.hostname
-        : '',
+      block_explorer_domain: getURLHostName(blockExplorerLink),
     },
   });