m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 01:39:44 +01:00
Code

Adding UI helpers for URL parsing (#11899)

Browse Source
This commit is contained in:
ryanml 2021-08-24 15:28:16 -07:00 committed by GitHub
parent b7009ac454
commit 472cf17bda
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 62 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ui/components/app/alerts/unconnected-account-alert/unconnected-account-alert.js
View File

@ -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}

13
ui/components/app/menu-bar/account-options-menu.js
View File

@ -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

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

@ -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({

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

@ -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({

5
ui/components/app/modals/qr-scanner/qr-scanner.component.js
View File

@ -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);
}

6
ui/components/app/transaction-activity-log/transaction-activity-log.component.js
View File

@ -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),
},
});

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

@ -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),
},
});

16
ui/helpers/utils/util.js
View File

@ -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 || '';
}

7
ui/pages/add-token/add-token.component.js
View File

@ -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 (

3
ui/pages/asset/components/native-asset.js
View File

@ -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),
},
});

5
ui/pages/asset/components/token-asset.js
View File

@ -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),
},
});

4
ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js
View File

@ -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>

11
ui/pages/confirm-transaction-base/confirm-transaction-base.component.js
View File

@ -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')}

3
ui/pages/connected-accounts/connected-accounts.component.js
View File

@ -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

6
ui/pages/create-account/connect-hardware/account-list.js
View File

@ -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({

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

@ -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>
);

7
ui/pages/swaps/build-quote/build-quote.js
View File

@ -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),
},
});

7
ui/pages/swaps/dropdown-search-list/dropdown-search-list.js
View File

@ -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),
},
});

7
ui/pages/swaps/searchable-item-list/item-list/item-list.component.js
View File

@ -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),
},
});