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

remove unused sidebar component (#12048)

Browse Source
This commit is contained in:
Brad Decker 2021-09-09 10:14:07 -05:00 committed by GitHub
parent cd30536cb7
commit ec1fd38076
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 5 additions and 511 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
ui/components/app/account-menu/account-menu.container.js
View File

@ -4,7 +4,6 @@ import { withRouter } from 'react-router-dom';
import {
toggleAccountMenu,
showAccountDetail,
hideSidebar,
lockMetamask,
hideWarning,
} from '../../../store/actions';
@ -46,13 +45,11 @@ function mapDispatchToProps(dispatch) {
toggleAccountMenu: () => dispatch(toggleAccountMenu()),
showAccountDetail: (address) => {
dispatch(showAccountDetail(address));
dispatch(hideSidebar());
dispatch(toggleAccountMenu());
},
lockMetamask: () => {
dispatch(lockMetamask());
dispatch(hideWarning());
dispatch(hideSidebar());
dispatch(toggleAccountMenu());
},
};

1
ui/components/app/app-components.scss
View File

@ -30,7 +30,6 @@
@import 'recovery-phrase-reminder/index';
@import 'step-progress-bar/index.scss';
@import 'selected-account/index';
@import 'sidebars/index';
@import 'signature-request/index';
@import 'signature-request-original/index';
@import 'tab-bar/index';

10
ui/components/app/edit-gas-popover/edit-gas-popover.component.js
View File

@ -22,7 +22,6 @@ import {
createCancelTransaction,
createSpeedUpTransaction,
hideModal,
hideSidebar,
updateTransaction,
updateCustomSwapsEIP1559GasParams,
updateSwapsUserFeeLevel,
@ -42,7 +41,6 @@ export default function EditGasPopover({
}) {
const t = useContext(I18nContext);
const dispatch = useDispatch();
const showSidebar = useSelector((state) => state.appState.sidebar.isOpen);
const networkAndAccountSupport1559 = useSelector(
checkNetworkAndAccountSupports1559,
);
@ -98,19 +96,17 @@ export default function EditGasPopover({
/**
* Temporary placeholder, this should be managed by the parent component but
* we will be extracting this component from the hard to maintain modal/
* sidebar component. For now this is just to be able to appropriately close
* we will be extracting this component from the hard to maintain modal
* component. For now this is just to be able to appropriately close
* the modal in testing
*/
const closePopover = useCallback(() => {
if (onClose) {
onClose();
} else if (showSidebar) {
dispatch(hideSidebar());
} else {
dispatch(hideModal());
}
}, [showSidebar, onClose, dispatch]);
}, [onClose, dispatch]);
const onSubmit = useCallback(() => {
if (!transaction || !mode) {

2
ui/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container-container.test.js
View File

@ -166,7 +166,6 @@ describe('gas-modal-page-container container', () => {
updateTransactionGasFees: sinon.spy(),
someOtherDispatchProp: sinon.spy(),
createSpeedUpTransaction: sinon.spy(),
hideSidebar: sinon.spy(),
hideModal: sinon.spy(),
cancelAndClose: sinon.spy(),
};
@ -268,7 +267,6 @@ describe('gas-modal-page-container container', () => {
expect(dispatchProps.cancelAndClose.callCount).toStrictEqual(1);
expect(dispatchProps.createSpeedUpTransaction.callCount).toStrictEqual(1);
expect(dispatchProps.hideSidebar.callCount).toStrictEqual(1);
});
});
});

9
ui/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js
View File

@ -4,7 +4,6 @@ import {
hideModal,
createRetryTransaction,
createSpeedUpTransaction,
hideSidebar,
} from '../../../../store/actions';
import {
setCustomGasPrice,
@ -223,7 +222,6 @@ const mapDispatchToProps = (dispatch) => {
createSpeedUpTransaction: (txId, customGasSettings) => {
return dispatch(createSpeedUpTransaction(txId, customGasSettings));
},
hideSidebar: () => dispatch(hideSidebar()),
};
};
@ -246,7 +244,6 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
createSpeedUpTransaction: dispatchCreateSpeedUpTransaction,
createRetryTransaction: dispatchCreateRetryTransaction,
updateTransactionGasFees: dispatchUpdateTransactionGasFees,
hideSidebar: dispatchHideSidebar,
cancelAndClose: dispatchCancelAndClose,
hideModal: dispatchHideModal,
...otherDispatchProps
@ -258,7 +255,6 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
...ownProps,
onSubmit: (gasLimit, gasPrice) => {
if (ownProps.onSubmit) {
dispatchHideSidebar();
dispatchCancelAndClose();
ownProps.onSubmit({ gasLimit, gasPrice });
return;
@ -274,11 +270,9 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
dispatchCancelAndClose();
} else if (isSpeedUp) {
dispatchCreateSpeedUpTransaction(txId, { gasPrice, gasLimit });
dispatchHideSidebar();
dispatchCancelAndClose();
} else if (isRetry) {
dispatchCreateRetryTransaction(txId, { gasPrice, gasLimit });
dispatchHideSidebar();
dispatchCancelAndClose();
} else {
dispatchSetGasData(gasLimit, gasPrice);
@ -293,9 +287,6 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
},
cancelAndClose: () => {
dispatchCancelAndClose();
if (isSpeedUp || isRetry) {
dispatchHideSidebar();
}
},
disableSave:
insufficientBalance ||

1
ui/components/app/sidebars/index.js
View File

@ -1 +0,0 @@
export { default } from './sidebar.component';

81
ui/components/app/sidebars/index.scss
View File

@ -1,81 +0,0 @@
@import 'sidebar-content';
.sidebar-right-enter {
transition: transform 300ms ease-in-out;
transform: translateX(-100%);
}
.sidebar-right-enter.sidebar-right-enter-active {
transition: transform 300ms ease-in-out;
transform: translateX(0%);
}
.sidebar-right-leave {
transition: transform 200ms ease-out;
transform: translateX(0%);
}
.sidebar-right-leave.sidebar-right-leave-active {
transition: transform 200ms ease-out;
transform: translateX(-100%);
}
.sidebar-left-enter {
transition: transform 300ms ease-in-out;
transform: translateX(100%);
}
.sidebar-left-enter.sidebar-left-enter-active {
transition: transform 300ms ease-in-out;
transform: translateX(0%);
}
.sidebar-left-leave {
transition: transform 200ms ease-out;
transform: translateX(0%);
}
.sidebar-left-leave.sidebar-left-leave-active {
transition: transform 200ms ease-out;
transform: translateX(100%);
}
.sidebar-left {
flex: 1 0 230px;
background: rgb(250, 250, 250);
z-index: $sidebar-z-index;
position: fixed;
left: 15%;
right: 0;
bottom: 0;
opacity: 1;
visibility: visible;
will-change: transform;
overflow-y: auto;
box-shadow: rgba(0, 0, 0, 0.15) 2px 2px 4px;
width: 85%;
height: 100%;
@media screen and (min-width: 769px) {
width: 408px;
left: calc(100% - 408px);
}
@media screen and (max-width: $break-small) {
width: 100%;
left: 0%;
}
}
.sidebar-overlay {
z-index: $sidebar-overlay-z-index;
position: fixed;
height: 100%;
width: 100%;
left: 0;
right: 0;
bottom: 0;
opacity: 1;
visibility: visible;
background-color: rgba(0, 0, 0, 0.3);
}

104
ui/components/app/sidebars/sidebar-content.scss
View File

@ -1,104 +0,0 @@
.sidebar-left {
display: flex;
.gas-modal-page-container {
display: flex;
.page-container {
flex: 1;
max-width: 100%;
&__content {
display: flex;
overflow-y: initial;
}
@media screen and (max-width: $break-small) {
max-width: 344px;
min-height: auto;
}
@media screen and (min-width: $break-small) {
max-height: none;
}
}
.page-container__bottom {
display: flex;
flex-direction: column;
height: 100%;
}
.page-container__content {
overflow-y: inherit;
}
.basic-tab-content {
height: auto;
margin-bottom: 0;
border-bottom: 1px solid #d2d8dd;
flex: 1 1 70%;
@media screen and (max-width: $break-small) {
padding-left: 14px;
padding-bottom: 21px;
}
.gas-price-button-group--alt {
@media screen and (max-width: $break-small) {
max-width: 318px;
&__time-estimate {
@include H7;
}
}
}
}
.advanced-tab {
@media screen and (min-width: $break-small) {
flex: 1 1 70%;
}
&__fee-chart {
height: 320px;
@media screen and (max-width: $break-small) {
height: initial;
}
}
&__fee-chart__speed-buttons {
bottom: 77px;
@media screen and (max-width: $break-small) {
display: none;
}
}
}
.gas-modal-content {
display: flex;
flex-direction: column;
width: 100%;
&__info-row-wrapper {
display: flex;
@media screen and (min-width: $break-small) {
flex: 1 1 30%;
}
}
&__info-row {
height: 170px;
@media screen and (max-width: $break-small) {
height: initial;
display: flex;
justify-content: center;
}
}
}
}
}

79
ui/components/app/sidebars/sidebar.component.js
View File

@ -1,79 +0,0 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import ReactCSSTransitionGroup from 'react-transition-group/CSSTransitionGroup';
import CustomizeGas from '../gas-customization/gas-modal-page-container';
import { MILLISECOND } from '../../../../shared/constants/time';
export default class Sidebar extends Component {
static propTypes = {
sidebarOpen: PropTypes.bool,
hideSidebar: PropTypes.func,
sidebarShouldClose: PropTypes.bool,
transitionName: PropTypes.string,
type: PropTypes.string,
sidebarProps: PropTypes.object,
onOverlayClose: PropTypes.func,
};
static contextTypes = {
t: PropTypes.func,
};
renderOverlay() {
const { onOverlayClose } = this.props;
return (
<div
className="sidebar-overlay"
onClick={() => {
onOverlayClose?.();
this.props.hideSidebar();
}}
/>
);
}
renderSidebarContent() {
const { type, sidebarProps = {} } = this.props;
const { transaction = {}, onSubmit, hideBasic } = sidebarProps;
switch (type) {
case 'customize-gas':
return (
<div className="sidebar-left">
<CustomizeGas
transaction={transaction}
onSubmit={onSubmit}
hideBasic={hideBasic}
/>
</div>
);
default:
return null;
}
}
componentDidUpdate(prevProps) {
if (!prevProps.sidebarShouldClose && this.props.sidebarShouldClose) {
this.props.hideSidebar();
}
}
render() {
const { transitionName, sidebarOpen, sidebarShouldClose } = this.props;
const showSidebar = sidebarOpen && !sidebarShouldClose;
return (
<div>
<ReactCSSTransitionGroup
transitionName={transitionName}
transitionEnterTimeout={MILLISECOND * 300}
transitionLeaveTimeout={MILLISECOND * 200}
>
{showSidebar ? this.renderSidebarContent() : null}
</ReactCSSTransitionGroup>
{showSidebar ? this.renderOverlay() : null}
</div>
);
}
}

108
ui/components/app/sidebars/sidebar.component.test.js
View File

@ -1,108 +0,0 @@
import React from 'react';
import { shallow } from 'enzyme';
import sinon from 'sinon';
import ReactCSSTransitionGroup from 'react-transition-group/CSSTransitionGroup';
import CustomizeGas from '../gas-customization/gas-modal-page-container';
import Sidebar from './sidebar.component';
const propsMethodSpies = {
hideSidebar: sinon.spy(),
};
describe('Sidebar Component', () => {
let wrapper;
beforeEach(() => {
wrapper = shallow(
<Sidebar
sidebarOpen={false}
hideSidebar={propsMethodSpies.hideSidebar}
transitionName="someTransition"
type="customize-gas"
/>,
);
});
afterEach(() => {
propsMethodSpies.hideSidebar.resetHistory();
});
describe('renderOverlay', () => {
let renderOverlay;
beforeEach(() => {
renderOverlay = shallow(wrapper.instance().renderOverlay());
});
it('should render a overlay element', () => {
expect(renderOverlay.hasClass('sidebar-overlay')).toStrictEqual(true);
});
it('should pass the correct onClick function to the element', () => {
expect(propsMethodSpies.hideSidebar.callCount).toStrictEqual(0);
renderOverlay.props().onClick();
expect(propsMethodSpies.hideSidebar.callCount).toStrictEqual(1);
});
});
describe('renderSidebarContent', () => {
let renderSidebarContent;
beforeEach(() => {
renderSidebarContent = wrapper.instance().renderSidebarContent();
});
it('should render sidebar content with the type customize-gas', () => {
renderSidebarContent = wrapper.instance().renderSidebarContent();
const renderedSidebarContent = shallow(renderSidebarContent);
expect(renderedSidebarContent.hasClass('sidebar-left')).toStrictEqual(
true,
);
expect(renderedSidebarContent.childAt(0).is(CustomizeGas)).toStrictEqual(
true,
);
});
it('should not render with an unrecognized type', () => {
wrapper.setProps({ type: 'foobar' });
renderSidebarContent = wrapper.instance().renderSidebarContent();
expect(renderSidebarContent).toBeNull();
});
});
describe('render', () => {
it('should render a div with one child', () => {
expect(wrapper.is('div')).toStrictEqual(true);
expect(wrapper.children()).toHaveLength(1);
});
it('should render the ReactCSSTransitionGroup without any children', () => {
expect(
wrapper.children().at(0).is(ReactCSSTransitionGroup),
).toStrictEqual(true);
expect(wrapper.children().at(0).children()).toHaveLength(0);
});
it('should render sidebar content and the overlay if sidebarOpen is true', () => {
wrapper.setProps({ sidebarOpen: true });
expect(wrapper.children()).toHaveLength(2);
expect(
wrapper.children().at(1).hasClass('sidebar-overlay'),
).toStrictEqual(true);
expect(wrapper.children().at(0).children()).toHaveLength(1);
expect(
wrapper.children().at(0).children().at(0).hasClass('sidebar-left'),
).toStrictEqual(true);
expect(
wrapper
.children()
.at(0)
.children()
.at(0)
.children()
.at(0)
.is(CustomizeGas),
).toBe(true);
});
});
});

5
ui/components/app/token-cell/token-cell.test.js
View File

@ -27,11 +27,6 @@ describe('Token Cell', () => {
type: 'mainnet',
},
},
appState: {
sidebar: {
isOpen: true,
},
},
};
const middlewares = [thunk];

25
ui/ducks/app/app.js
View File

@ -18,12 +18,6 @@ export default function reduceApp(state = {}, action) {
name: null,
},
},
sidebar: {
isOpen: false,
transitionName: '',
type: '',
props: {},
},
alertOpen: false,
alertMessage: null,
qrCodeData: null,
@ -71,25 +65,6 @@ export default function reduceApp(state = {}, action) {
networkDropdownOpen: false,
};
// sidebar methods
case actionConstants.SIDEBAR_OPEN:
return {
...appState,
sidebar: {
...action.value,
isOpen: true,
},
};
case actionConstants.SIDEBAR_CLOSE:
return {
...appState,
sidebar: {
...appState.sidebar,
isOpen: false,
},
};
// alert methods
case actionConstants.ALERT_OPEN:
return {

25
ui/ducks/app/app.test.js
View File

@ -38,31 +38,6 @@ describe('App State', () => {
expect(newState.networkDropdownOpen).toStrictEqual(false);
});
it('opens sidebar', () => {
const value = {
transitionName: 'sidebar-right',
type: 'wallet-view',
isOpen: true,
};
const state = reduceApp(metamaskState, {
type: actions.SIDEBAR_OPEN,
value,
});
expect(state.sidebar).toStrictEqual(value);
});
it('closes sidebar', () => {
const openSidebar = { sidebar: { isOpen: true } };
const state = { ...metamaskState, ...openSidebar };
const newState = reduceApp(state, {
type: actions.SIDEBAR_CLOSE,
});
expect(newState.sidebar.isOpen).toStrictEqual(false);
});
it('opens alert', () => {
const state = reduceApp(metamaskState, {
type: actions.ALERT_OPEN,

2
ui/hooks/useCancelTransaction.test.js
View File

@ -59,7 +59,7 @@ describe('useCancelTransaction', function () {
);
expect(result.current.hasEnoughCancelGas).toStrictEqual(false);
});
it(`should return a function that opens the gas sidebar onsubmit kicks off cancellation for id ${transactionId}`, function () {
it(`should return a function that kicks off cancellation for id ${transactionId}`, function () {
const { result } = renderHook(() =>
useCancelTransaction(transactionGroup),
);

30
ui/pages/routes/routes.component.js
View File

@ -8,7 +8,6 @@ import FirstTimeFlow from '../first-time-flow';
import SendTransactionScreen from '../send';
import Swaps from '../swaps';
import ConfirmTransaction from '../confirm-transaction';
import Sidebar from '../../components/app/sidebars';
import Home from '../home';
import Settings from '../settings';
import Authenticated from '../../helpers/higher-order-components/authenticated';
@ -62,7 +61,6 @@ import {
} from '../../../shared/constants/app';
import { getEnvironmentType } from '../../../app/scripts/lib/util';
import { isBeta } from '../../helpers/utils/build-types';
import { TRANSACTION_STATUSES } from '../../../shared/constants/transaction';
import ConfirmationPage from '../confirmation';
export default class Routes extends Component {
@ -76,15 +74,12 @@ export default class Routes extends Component {
isNetworkLoading: PropTypes.bool,
provider: PropTypes.object,
frequentRpcListDetail: PropTypes.array,
sidebar: PropTypes.object,
alertOpen: PropTypes.bool,
hideSidebar: PropTypes.func,
isUnlocked: PropTypes.bool,
setLastActiveTime: PropTypes.func,
history: PropTypes.object,
location: PropTypes.object,
lockMetaMask: PropTypes.func,
submittedPendingTransactions: PropTypes.array,
isMouseUser: PropTypes.bool,
setMouseUserState: PropTypes.func,
providerId: PropTypes.string,
@ -273,8 +268,6 @@ export default class Routes extends Component {
provider,
frequentRpcListDetail,
setMouseUserState,
sidebar,
submittedPendingTransactions,
isMouseUser,
prepareToLeaveSwaps,
browserEnvironment,
@ -284,21 +277,6 @@ export default class Routes extends Component {
? this.getConnectingLabel(loadingMessage)
: null;
const {
isOpen: sidebarIsOpen,
transitionName: sidebarTransitionName,
type: sidebarType,
props,
} = sidebar;
const { transaction: sidebarTransaction } = props || {};
const sidebarShouldClose =
sidebarTransaction &&
!sidebarTransaction.status === TRANSACTION_STATUSES.FAILED &&
!submittedPendingTransactions.find(
({ id }) => id === sidebarTransaction.id,
);
const { os, browser } = browserEnvironment;
return (
<div
@ -333,14 +311,6 @@ export default class Routes extends Component {
}
/>
)}
<Sidebar
sidebarOpen={sidebarIsOpen}
sidebarShouldClose={sidebarShouldClose}
hideSidebar={this.props.hideSidebar}
transitionName={sidebarTransitionName}
type={sidebarType}
sidebarProps={sidebar.props}
/>
<NetworkDropdown
provider={provider}
frequentRpcListDetail={frequentRpcListDetail}

11
ui/pages/routes/routes.container.js
View File

@ -8,7 +8,6 @@ import {
submittedPendingTransactionsSelector,
} from '../../selectors';
import {
hideSidebar,
lockMetamask,
setCurrentCurrency,
setLastActiveTime,
@ -20,17 +19,10 @@ import Routes from './routes.component';
function mapStateToProps(state) {
const { appState } = state;
const {
sidebar,
alertOpen,
alertMessage,
isLoading,
loadingMessage,
} = appState;
const { alertOpen, alertMessage, isLoading, loadingMessage } = appState;
const { autoLockTimeLimit = 0 } = getPreferences(state);
return {
sidebar,
alertOpen,
alertMessage,
textDirection: state.metamask.textDirection,
@ -52,7 +44,6 @@ function mapStateToProps(state) {
function mapDispatchToProps(dispatch) {
return {
lockMetaMask: () => dispatch(lockMetamask(false)),
hideSidebar: () => dispatch(hideSidebar()),
setCurrentCurrencyToUSD: () => dispatch(setCurrentCurrency('usd')),
setMouseUserState: (isMouseUser) =>
dispatch(setMouseUserState(isMouseUser)),

3
ui/store/actionConstants.js
View File

@ -2,9 +2,6 @@ export const GO_HOME = 'GO_HOME';
// modal state
export const MODAL_OPEN = 'UI_MODAL_OPEN';
export const MODAL_CLOSE = 'UI_MODAL_CLOSE';
// sidebar state
export const SIDEBAR_OPEN = 'UI_SIDEBAR_OPEN';
export const SIDEBAR_CLOSE = 'UI_SIDEBAR_CLOSE';
// alert state
export const ALERT_OPEN = 'UI_ALERT_OPEN';
export const ALERT_CLOSE = 'UI_ALERT_CLOSE';

17
ui/store/actions.js
View File

@ -1655,23 +1655,6 @@ export function closeCurrentNotificationWindow() {
};
}
export function showSidebar({ transitionName, type, props }) {
return {
type: actionConstants.SIDEBAR_OPEN,
value: {
transitionName,
type,
props,
},
};
}
export function hideSidebar() {
return {
type: actionConstants.SIDEBAR_CLOSE,
};
}
export function showAlert(msg) {
return {
type: actionConstants.ALERT_OPEN,