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/modals/modal.js
David Walsh 6cc46454c2
UX: Remove legacy metametrics modal (#17817)
* UX: Remove legacy metametrics modal

* Remove old localizations

* Remove dead image
2023-02-23 13:58:09 -06:00

369 lines
8.7 KiB
JavaScript

import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import * as actions from '../../../store/actions';
import isMobileView from '../../../helpers/utils/is-mobile-view';
import { getEnvironmentType } from '../../../../app/scripts/lib/util';
import { ENVIRONMENT_TYPE_POPUP } from '../../../../shared/constants/app';
// Modal Components
import AddNetworkModal from '../../../pages/onboarding-flow/add-network-modal';
import AccountDetailsModal from './account-details-modal';
import ExportPrivateKeyModal from './export-private-key-modal';
import HideTokenConfirmationModal from './hide-token-confirmation-modal';
import QRScanner from './qr-scanner';
import HoldToRevealModal from './hold-to-reveal-modal';
import ConfirmRemoveAccount from './confirm-remove-account';
import ConfirmResetAccount from './confirm-reset-account';
import TransactionConfirmed from './transaction-confirmed';
import FadeModal from './fade-modal';
import RejectTransactions from './reject-transactions';
import ConfirmDeleteNetwork from './confirm-delete-network';
import EditApprovalPermission from './edit-approval-permission';
import NewAccountModal from './new-account-modal';
import CustomizeNonceModal from './customize-nonce';
import ConvertTokenToNftModal from './convert-token-to-nft-modal/convert-token-to-nft-modal';
const modalContainerBaseStyle = {
transform: 'translate3d(-50%, 0, 0px)',
border: '1px solid var(--color-border-default)',
borderRadius: '8px',
backgroundColor: 'var(--color-background-default)',
boxShadow: 'var(--shadow-size-sm) var(--color-shadow-default)',
};
const modalContainerLaptopStyle = {
...modalContainerBaseStyle,
width: '344px',
top: '15%',
};
const modalContainerMobileStyle = {
...modalContainerBaseStyle,
width: '309px',
top: '12.5%',
};
const accountModalStyle = {
mobileModalStyle: {
width: '95%',
// top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh',
boxShadow: 'var(--shadow-size-xs) var(--color-shadow-default)',
borderRadius: '4px',
top: '10%',
transform: 'none',
left: '0',
right: '0',
margin: '0 auto',
},
laptopModalStyle: {
width: '335px',
// top: 'calc(33% + 45px)',
boxShadow: 'var(--shadow-size-xs) var(--color-shadow-default)',
borderRadius: '4px',
top: '10%',
transform: 'none',
left: '0',
right: '0',
margin: '0 auto',
},
contentStyle: {
borderRadius: '4px',
},
};
const MODALS = {
ONBOARDING_ADD_NETWORK: {
contents: <AddNetworkModal />,
...accountModalStyle,
},
NEW_ACCOUNT: {
contents: <NewAccountModal />,
mobileModalStyle: {
width: '95%',
top: '10%',
boxShadow: 'var(--shadow-size-xs) var(--color-shadow-default)',
transform: 'none',
left: '0',
right: '0',
margin: '0 auto',
borderRadius: '10px',
},
laptopModalStyle: {
width: '375px',
top: '10%',
boxShadow: 'var(--shadow-size-xs) var(--color-shadow-default)',
transform: 'none',
left: '0',
right: '0',
margin: '0 auto',
borderRadius: '10px',
},
contentStyle: {
borderRadius: '10px',
},
},
ACCOUNT_DETAILS: {
contents: <AccountDetailsModal />,
...accountModalStyle,
},
EXPORT_PRIVATE_KEY: {
contents: <ExportPrivateKeyModal />,
...accountModalStyle,
},
HOLD_TO_REVEAL_SRP: {
contents: <HoldToRevealModal />,
mobileModalStyle: {
...modalContainerMobileStyle,
},
laptopModalStyle: {
...modalContainerLaptopStyle,
},
contentStyle: {
borderRadius: '8px',
},
},
HIDE_TOKEN_CONFIRMATION: {
contents: <HideTokenConfirmationModal />,
mobileModalStyle: {
width: '95%',
top: getEnvironmentType() === ENVIRONMENT_TYPE_POPUP ? '52vh' : '36.5vh',
},
laptopModalStyle: {
width:
getEnvironmentType() === ENVIRONMENT_TYPE_POPUP ? '357px' : '449px',
top: 'calc(33% + 45px)',
paddingLeft:
getEnvironmentType() === ENVIRONMENT_TYPE_POPUP ? '16px' : null,
paddingRight:
getEnvironmentType() === ENVIRONMENT_TYPE_POPUP ? '16px' : null,
},
},
CONFIRM_RESET_ACCOUNT: {
contents: <ConfirmResetAccount />,
mobileModalStyle: {
...modalContainerMobileStyle,
},
laptopModalStyle: {
...modalContainerLaptopStyle,
},
contentStyle: {
borderRadius: '8px',
},
},
CONFIRM_REMOVE_ACCOUNT: {
contents: <ConfirmRemoveAccount />,
mobileModalStyle: {
...modalContainerMobileStyle,
},
laptopModalStyle: {
...modalContainerLaptopStyle,
},
contentStyle: {
borderRadius: '8px',
},
},
CONVERT_TOKEN_TO_NFT: {
contents: <ConvertTokenToNftModal />,
mobileModalStyle: {
...modalContainerMobileStyle,
},
laptopModalStyle: {
...modalContainerLaptopStyle,
},
contentStyle: {
borderRadius: '8px',
},
},
CONFIRM_DELETE_NETWORK: {
contents: <ConfirmDeleteNetwork />,
mobileModalStyle: {
...modalContainerMobileStyle,
},
laptopModalStyle: {
...modalContainerLaptopStyle,
},
contentStyle: {
borderRadius: '8px',
},
},
EDIT_APPROVAL_PERMISSION: {
contents: <EditApprovalPermission />,
mobileModalStyle: {
width: '95vw',
height: '100vh',
top: '50px',
transform: 'none',
left: '0',
right: '0',
margin: '0 auto',
},
laptopModalStyle: {
width: 'auto',
height: '0px',
top: '80px',
left: '0px',
transform: 'none',
margin: '0 auto',
position: 'relative',
},
contentStyle: {
borderRadius: '8px',
},
},
TRANSACTION_CONFIRMED: {
disableBackdropClick: true,
contents: <TransactionConfirmed />,
mobileModalStyle: {
...modalContainerMobileStyle,
},
laptopModalStyle: {
...modalContainerLaptopStyle,
},
contentStyle: {
borderRadius: '8px',
},
},
QR_SCANNER: {
contents: <QRScanner />,
mobileModalStyle: {
...modalContainerMobileStyle,
},
laptopModalStyle: {
...modalContainerLaptopStyle,
},
contentStyle: {
borderRadius: '8px',
},
},
REJECT_TRANSACTIONS: {
contents: <RejectTransactions />,
mobileModalStyle: {
...modalContainerMobileStyle,
},
laptopModalStyle: {
...modalContainerLaptopStyle,
},
contentStyle: {
borderRadius: '8px',
},
},
CUSTOMIZE_NONCE: {
contents: <CustomizeNonceModal />,
mobileModalStyle: {
...modalContainerMobileStyle,
},
laptopModalStyle: {
...modalContainerLaptopStyle,
},
contentStyle: {
borderRadius: '8px',
},
},
DEFAULT: {
contents: [],
mobileModalStyle: {},
laptopModalStyle: {},
},
};
const BACKDROPSTYLE = {
backgroundColor: 'var(--color-overlay-default)',
};
function mapStateToProps(state) {
return {
active: state.appState.modal.open,
modalState: state.appState.modal.modalState,
};
}
function mapDispatchToProps(dispatch) {
return {
hideModal: (customOnHideOpts) => {
dispatch(actions.hideModal());
if (customOnHideOpts && customOnHideOpts.action) {
dispatch(customOnHideOpts.action(...customOnHideOpts.args));
}
},
hideWarning: () => {
dispatch(actions.hideWarning());
},
};
}
class Modal extends Component {
static propTypes = {
active: PropTypes.bool.isRequired,
hideModal: PropTypes.func.isRequired,
hideWarning: PropTypes.func.isRequired,
modalState: PropTypes.object.isRequired,
};
hide() {
this.modalRef.hide();
}
show() {
this.modalRef.show();
}
UNSAFE_componentWillReceiveProps(nextProps, _) {
if (nextProps.active) {
this.show();
} else if (this.props.active) {
this.hide();
}
}
render() {
const modal = MODALS[this.props.modalState.name || 'DEFAULT'];
const { contents: children, disableBackdropClick = false } = modal;
const modalStyle =
modal[isMobileView() ? 'mobileModalStyle' : 'laptopModalStyle'];
const contentStyle = modal.contentStyle || {};
return (
<FadeModal
keyboard={false}
onHide={() => {
if (modal.onHide) {
modal.onHide({
hideWarning: this.props.hideWarning,
});
}
this.props.hideModal(modal.customOnHideOpts);
}}
ref={(ref) => {
this.modalRef = ref;
}}
modalStyle={modalStyle}
contentStyle={contentStyle}
backdropStyle={BACKDROPSTYLE}
closeOnClick={!disableBackdropClick}
>
{children}
</FadeModal>
);
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Modal);