diff --git a/ui/components/app/account-menu/account-menu.container.js b/ui/components/app/account-menu/account-menu.container.js index 52b87aaff..36a420656 100644 --- a/ui/components/app/account-menu/account-menu.container.js +++ b/ui/components/app/account-menu/account-menu.container.js @@ -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()); }, }; diff --git a/ui/components/app/app-components.scss b/ui/components/app/app-components.scss index c868491ac..7f1184243 100644 --- a/ui/components/app/app-components.scss +++ b/ui/components/app/app-components.scss @@ -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'; diff --git a/ui/components/app/edit-gas-popover/edit-gas-popover.component.js b/ui/components/app/edit-gas-popover/edit-gas-popover.component.js index bac3e7d77..9f0cbdb05 100644 --- a/ui/components/app/edit-gas-popover/edit-gas-popover.component.js +++ b/ui/components/app/edit-gas-popover/edit-gas-popover.component.js @@ -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) { diff --git a/ui/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container-container.test.js b/ui/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container-container.test.js index 37e853cd1..52f2b0fb4 100644 --- a/ui/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container-container.test.js +++ b/ui/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container-container.test.js @@ -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); }); }); }); diff --git a/ui/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js b/ui/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js index 571544cf0..3d77f1214 100644 --- a/ui/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js +++ b/ui/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js @@ -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 || diff --git a/ui/components/app/sidebars/index.js b/ui/components/app/sidebars/index.js deleted file mode 100644 index d5d5026c6..000000000 --- a/ui/components/app/sidebars/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './sidebar.component'; diff --git a/ui/components/app/sidebars/index.scss b/ui/components/app/sidebars/index.scss deleted file mode 100644 index d2d224eb0..000000000 --- a/ui/components/app/sidebars/index.scss +++ /dev/null @@ -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); -} diff --git a/ui/components/app/sidebars/sidebar-content.scss b/ui/components/app/sidebars/sidebar-content.scss deleted file mode 100644 index d8bb0a5d0..000000000 --- a/ui/components/app/sidebars/sidebar-content.scss +++ /dev/null @@ -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; - } - } - } - } -} diff --git a/ui/components/app/sidebars/sidebar.component.js b/ui/components/app/sidebars/sidebar.component.js deleted file mode 100644 index 4ed71461b..000000000 --- a/ui/components/app/sidebars/sidebar.component.js +++ /dev/null @@ -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 ( -
{ - onOverlayClose?.(); - this.props.hideSidebar(); - }} - /> - ); - } - - renderSidebarContent() { - const { type, sidebarProps = {} } = this.props; - const { transaction = {}, onSubmit, hideBasic } = sidebarProps; - switch (type) { - case 'customize-gas': - return ( -
- -
- ); - 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 ( -
- - {showSidebar ? this.renderSidebarContent() : null} - - {showSidebar ? this.renderOverlay() : null} -
- ); - } -} diff --git a/ui/components/app/sidebars/sidebar.component.test.js b/ui/components/app/sidebars/sidebar.component.test.js deleted file mode 100644 index 90ecb5ab5..000000000 --- a/ui/components/app/sidebars/sidebar.component.test.js +++ /dev/null @@ -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( - , - ); - }); - - 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); - }); - }); -}); diff --git a/ui/components/app/token-cell/token-cell.test.js b/ui/components/app/token-cell/token-cell.test.js index 12b3ae973..a118e912b 100644 --- a/ui/components/app/token-cell/token-cell.test.js +++ b/ui/components/app/token-cell/token-cell.test.js @@ -27,11 +27,6 @@ describe('Token Cell', () => { type: 'mainnet', }, }, - appState: { - sidebar: { - isOpen: true, - }, - }, }; const middlewares = [thunk]; diff --git a/ui/ducks/app/app.js b/ui/ducks/app/app.js index 93a21a16f..15d32f32a 100644 --- a/ui/ducks/app/app.js +++ b/ui/ducks/app/app.js @@ -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 { diff --git a/ui/ducks/app/app.test.js b/ui/ducks/app/app.test.js index 6f536c903..e88ac1b9b 100644 --- a/ui/ducks/app/app.test.js +++ b/ui/ducks/app/app.test.js @@ -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, diff --git a/ui/hooks/useCancelTransaction.test.js b/ui/hooks/useCancelTransaction.test.js index 7108b4513..fea8c9064 100644 --- a/ui/hooks/useCancelTransaction.test.js +++ b/ui/hooks/useCancelTransaction.test.js @@ -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), ); diff --git a/ui/pages/routes/routes.component.js b/ui/pages/routes/routes.component.js index e4a7a4e16..c92eaccba 100644 --- a/ui/pages/routes/routes.component.js +++ b/ui/pages/routes/routes.component.js @@ -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 (
)} - dispatch(lockMetamask(false)), - hideSidebar: () => dispatch(hideSidebar()), setCurrentCurrencyToUSD: () => dispatch(setCurrentCurrency('usd')), setMouseUserState: (isMouseUser) => dispatch(setMouseUserState(isMouseUser)), diff --git a/ui/store/actionConstants.js b/ui/store/actionConstants.js index d62e3f5b1..7c1ce186a 100644 --- a/ui/store/actionConstants.js +++ b/ui/store/actionConstants.js @@ -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'; diff --git a/ui/store/actions.js b/ui/store/actions.js index e265c923d..314f857b9 100644 --- a/ui/store/actions.js +++ b/ui/store/actions.js @@ -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,