1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
metamask-extension/ui/components/app/confirm-page-container/confirm-page-container-header/confirm-page-container-header.component.js
George Marshall 739075662c
Migrating Icon to typescript and deprecating JS component (#18431)
* Migrating Icon to typescript and deprecating JS component

* gw suggestions (#18434)

---------

Co-authored-by: Garrett Bear <gwhisten@gmail.com>
2023-04-04 09:48:04 -07:00

81 lines
2.6 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 { shortenAddress } from '../../../../helpers/utils/util';
import AccountMismatchWarning from '../../../ui/account-mismatch-warning/account-mismatch-warning.component';
import { useI18nContext } from '../../../../hooks/useI18nContext';
import { Icon, ICON_NAMES } from '../../../component-library/icon/deprecated';
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',
}}
>
<Icon name={ICON_NAMES.ARROW_LEFT} />
<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,
};