1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-05 23:44:56 +01:00
metamask-extension/ui/components/app/confirm-page-container/confirm-page-container-header/confirm-page-container-header.component.js
Dan J Miller 0a5c46b156
Prevent user from editing a contract interaction created by a dapp (#16498)
* Prevent user from editing a contract interaction created by a dapp

* Code cleanup

* Fix e2e test selector

* Fix e2e test

* Fix e2e test

* Update snapshot
2022-11-15 12:28:39 -03:30

81 lines
2.5 KiB
JavaScript

import React from 'react';
import PropTypes from 'prop-types';
import {
ENVIRONMENT_TYPE_POPUP,
ENVIRONMENT_TYPE_NOTIFICATION,
} from '../../../../../shared/constants/app';
import { getEnvironmentType } from '../../../../../app/scripts/lib/util';
import NetworkDisplay from '../../network-display';
import Identicon from '../../../ui/identicon';
import IconCaretLeft from '../../../ui/icon/icon-caret-left';
import { shortenAddress } from '../../../../helpers/utils/util';
import AccountMismatchWarning from '../../../ui/account-mismatch-warning/account-mismatch-warning.component';
import { useI18nContext } from '../../../../hooks/useI18nContext';
export default function ConfirmPageContainerHeader({
onEdit,
showEdit,
accountAddress,
showAccountInHeader,
children,
}) {
const t = useI18nContext();
const windowType = getEnvironmentType();
const isFullScreen =
windowType !== ENVIRONMENT_TYPE_NOTIFICATION &&
windowType !== ENVIRONMENT_TYPE_POPUP;
if (!showEdit && isFullScreen) {
return children;
}
return (
<div
className="confirm-page-container-header"
data-testid="header-container"
>
<div className="confirm-page-container-header__row">
{showAccountInHeader ? (
<div className="confirm-page-container-header__address-container">
<div className="confirm-page-container-header__address-identicon">
<Identicon address={accountAddress} diameter={24} />
</div>
<div
className="confirm-page-container-header__address"
data-testid="header-address"
>
{shortenAddress(accountAddress)}
</div>
<AccountMismatchWarning address={accountAddress} />
</div>
) : (
<div
className="confirm-page-container-header__back-button-container"
style={{
visibility: showEdit ? 'initial' : 'hidden',
}}
>
<IconCaretLeft />
<span
data-testid="confirm-page-back-edit-button"
className="confirm-page-container-header__back-button"
onClick={() => onEdit()}
>
{t('edit')}
</span>
</div>
)}
{isFullScreen ? null : <NetworkDisplay />}
</div>
{children}
</div>
);
}
ConfirmPageContainerHeader.propTypes = {
accountAddress: PropTypes.string,
showAccountInHeader: PropTypes.bool,
showEdit: PropTypes.bool,
onEdit: PropTypes.func,
children: PropTypes.node,
};