From cb0ab90c84aad9b948eaee5348870b8c016205d4 Mon Sep 17 00:00:00 2001 From: Mark Stacey Date: Wed, 1 Apr 2020 13:35:07 -0300 Subject: [PATCH] Move asset list to home tab on small screens (#8264) Two tabs have been created on the home screen: 'Assets' and 'History'. This tabbed view is shown only on small screens (e.g. in the popup). The fullscreen view is unchanged. The toggle-able left sidebar no longer exists, so some 'sidebar-left' specific code and styles have been removed. The button in the menu bar has been removed as well. The 'History' title of the transaction history is now redundant when where are no pending transactions, so it as been conditionally hidden. A passthrough for `data-testid` has been added to the Tab component for convenience in e2e tests. --- app/_locales/am/messages.json | 3 - app/_locales/ar/messages.json | 3 - app/_locales/bg/messages.json | 3 - app/_locales/bn/messages.json | 3 - app/_locales/ca/messages.json | 3 - app/_locales/de/messages.json | 3 - app/_locales/el/messages.json | 3 - app/_locales/en/messages.json | 3 - app/_locales/es/messages.json | 3 - app/_locales/es_419/messages.json | 3 - app/_locales/et/messages.json | 3 - app/_locales/fa/messages.json | 3 - app/_locales/fi/messages.json | 3 - app/_locales/he/messages.json | 3 - app/_locales/hi/messages.json | 3 - app/_locales/hr/messages.json | 3 - app/_locales/ht/messages.json | 3 - app/_locales/hu/messages.json | 3 - app/_locales/it/messages.json | 3 - app/_locales/ja/messages.json | 3 - app/_locales/kn/messages.json | 3 - app/_locales/ko/messages.json | 3 - app/_locales/lt/messages.json | 3 - app/_locales/lv/messages.json | 3 - app/_locales/no/messages.json | 3 - app/_locales/ro/messages.json | 3 - app/_locales/ru/messages.json | 3 - app/_locales/sl/messages.json | 3 - app/_locales/sr/messages.json | 3 - app/_locales/sv/messages.json | 3 - app/_locales/sw/messages.json | 3 - app/_locales/uk/messages.json | 3 - app/_locales/zh_CN/messages.json | 3 - app/_locales/zh_TW/messages.json | 3 - test/e2e/metamask-responsive-ui.spec.js | 2 +- .../app/asset-list/asset-list.component.js | 18 +--- .../app/asset-list/asset-list.container.js | 4 +- ui/app/components/app/menu-bar/index.js | 2 +- .../app/menu-bar/menu-bar.component.js | 25 ----- .../app/menu-bar/menu-bar.container.js | 26 ----- .../app/menu-bar/tests/menu-bar.test.js | 101 ++++++------------ .../app/sidebars/sidebar.component.js | 4 - .../app/sidebars/sidebar.constants.js | 1 - .../sidebars/tests/sidebars-component.test.js | 14 +-- .../components/app/tests/token-cell.spec.js | 5 - .../transaction-list.component.js | 10 +- .../app/wallet-view/wallet-view.component.js | 11 +- .../app/wallet-view/wallet-view.container.js | 10 +- ui/app/components/ui/tabs/index.scss | 1 - .../components/ui/tabs/tab/tab.component.js | 11 +- ui/app/pages/home/home.component.js | 40 +++++-- ui/app/pages/home/index.scss | 4 + ui/app/pages/routes/routes.component.js | 14 --- ui/app/store/actions.js | 2 +- 54 files changed, 93 insertions(+), 314 deletions(-) delete mode 100644 ui/app/components/app/menu-bar/menu-bar.container.js delete mode 100644 ui/app/components/app/sidebars/sidebar.constants.js diff --git a/app/_locales/am/messages.json b/app/_locales/am/messages.json index 27b0c7d29..850b645ea 100644 --- a/app/_locales/am/messages.json +++ b/app/_locales/am/messages.json @@ -657,9 +657,6 @@ "memo": { "message": "አጭር ማስታወሻ" }, - "menu": { - "message": "ምናሌ" - }, "message": { "message": "መልዕክት" }, diff --git a/app/_locales/ar/messages.json b/app/_locales/ar/messages.json index 8a98ddcc5..6f1175cd0 100644 --- a/app/_locales/ar/messages.json +++ b/app/_locales/ar/messages.json @@ -653,9 +653,6 @@ "memo": { "message": "مذكرة" }, - "menu": { - "message": "القائمة" - }, "message": { "message": "رسالة" }, diff --git a/app/_locales/bg/messages.json b/app/_locales/bg/messages.json index 635602b6b..f32bd22e1 100644 --- a/app/_locales/bg/messages.json +++ b/app/_locales/bg/messages.json @@ -656,9 +656,6 @@ "memo": { "message": "бележка" }, - "menu": { - "message": "Меню" - }, "message": { "message": "Съобщение" }, diff --git a/app/_locales/bn/messages.json b/app/_locales/bn/messages.json index 0e1efe7a8..b5e11e08f 100644 --- a/app/_locales/bn/messages.json +++ b/app/_locales/bn/messages.json @@ -660,9 +660,6 @@ "memo": { "message": "মেমো" }, - "menu": { - "message": "মেনু" - }, "message": { "message": "বার্তা" }, diff --git a/app/_locales/ca/messages.json b/app/_locales/ca/messages.json index 2eeb1f4d7..6991aff0d 100644 --- a/app/_locales/ca/messages.json +++ b/app/_locales/ca/messages.json @@ -644,9 +644,6 @@ "memo": { "message": "notes" }, - "menu": { - "message": "Menú" - }, "message": { "message": "Missatge" }, diff --git a/app/_locales/de/messages.json b/app/_locales/de/messages.json index 684437705..1956b25ca 100644 --- a/app/_locales/de/messages.json +++ b/app/_locales/de/messages.json @@ -636,9 +636,6 @@ "memo": { "message": " Memo" }, - "menu": { - "message": "Menü" - }, "message": { "message": "Nachricht" }, diff --git a/app/_locales/el/messages.json b/app/_locales/el/messages.json index dc1d2f9e2..a802f6032 100644 --- a/app/_locales/el/messages.json +++ b/app/_locales/el/messages.json @@ -657,9 +657,6 @@ "memo": { "message": "σημείωμα" }, - "menu": { - "message": "Μενού" - }, "message": { "message": "Μήνυμα" }, diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index dcf8c59b5..9fbad4e1f 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -837,9 +837,6 @@ "memo": { "message": "memo" }, - "menu": { - "message": "Menu" - }, "message": { "message": "Message" }, diff --git a/app/_locales/es/messages.json b/app/_locales/es/messages.json index 76fb59d87..9f5886305 100644 --- a/app/_locales/es/messages.json +++ b/app/_locales/es/messages.json @@ -536,9 +536,6 @@ "mainnet": { "message": "Red principal de Ethereum (Main Net)" }, - "menu": { - "message": "Menú" - }, "message": { "message": "Mensaje" }, diff --git a/app/_locales/es_419/messages.json b/app/_locales/es_419/messages.json index f46cc9b09..5be2808da 100644 --- a/app/_locales/es_419/messages.json +++ b/app/_locales/es_419/messages.json @@ -645,9 +645,6 @@ "memorizePhrase": { "message": "Memoriza esta frase." }, - "menu": { - "message": "Menú" - }, "message": { "message": "Mensaje" }, diff --git a/app/_locales/et/messages.json b/app/_locales/et/messages.json index 9d28d8302..afa914e09 100644 --- a/app/_locales/et/messages.json +++ b/app/_locales/et/messages.json @@ -650,9 +650,6 @@ "memo": { "message": "teatis" }, - "menu": { - "message": "Menüü" - }, "message": { "message": "Sõnum" }, diff --git a/app/_locales/fa/messages.json b/app/_locales/fa/messages.json index 0499b5074..2ca8558c7 100644 --- a/app/_locales/fa/messages.json +++ b/app/_locales/fa/messages.json @@ -660,9 +660,6 @@ "memo": { "message": "یادداشت" }, - "menu": { - "message": "مینو" - }, "message": { "message": "پیام" }, diff --git a/app/_locales/fi/messages.json b/app/_locales/fi/messages.json index a6b7ad59a..20c900807 100644 --- a/app/_locales/fi/messages.json +++ b/app/_locales/fi/messages.json @@ -657,9 +657,6 @@ "memo": { "message": "muistio" }, - "menu": { - "message": "Valikko" - }, "message": { "message": "Viesti" }, diff --git a/app/_locales/he/messages.json b/app/_locales/he/messages.json index 7bc47ec1d..be958c974 100644 --- a/app/_locales/he/messages.json +++ b/app/_locales/he/messages.json @@ -657,9 +657,6 @@ "memo": { "message": "תזכיר" }, - "menu": { - "message": "תפריט" - }, "message": { "message": "הודעה" }, diff --git a/app/_locales/hi/messages.json b/app/_locales/hi/messages.json index 98252fe51..3fdd88203 100644 --- a/app/_locales/hi/messages.json +++ b/app/_locales/hi/messages.json @@ -657,9 +657,6 @@ "memo": { "message": "ज्ञापन" }, - "menu": { - "message": "मेनू" - }, "message": { "message": "संदेश" }, diff --git a/app/_locales/hr/messages.json b/app/_locales/hr/messages.json index 4ea6e5177..b153a9130 100644 --- a/app/_locales/hr/messages.json +++ b/app/_locales/hr/messages.json @@ -653,9 +653,6 @@ "memo": { "message": "podsjetnik" }, - "menu": { - "message": "Izbornik" - }, "message": { "message": "Poruka" }, diff --git a/app/_locales/ht/messages.json b/app/_locales/ht/messages.json index d322c62c3..fca9460a6 100644 --- a/app/_locales/ht/messages.json +++ b/app/_locales/ht/messages.json @@ -389,9 +389,6 @@ "mainnet": { "message": "Prensipal Ethereum Rezo a" }, - "menu": { - "message": "Opsyon" - }, "message": { "message": "Mesaje" }, diff --git a/app/_locales/hu/messages.json b/app/_locales/hu/messages.json index 69026fbbe..6bbaeb67a 100644 --- a/app/_locales/hu/messages.json +++ b/app/_locales/hu/messages.json @@ -653,9 +653,6 @@ "memo": { "message": "emlékeztető" }, - "menu": { - "message": "Menü" - }, "message": { "message": "Üzenet" }, diff --git a/app/_locales/it/messages.json b/app/_locales/it/messages.json index dbe92e988..90a501876 100644 --- a/app/_locales/it/messages.json +++ b/app/_locales/it/messages.json @@ -822,9 +822,6 @@ "memo": { "message": "promemoria" }, - "menu": { - "message": "Menu" - }, "message": { "message": "Messaggio" }, diff --git a/app/_locales/ja/messages.json b/app/_locales/ja/messages.json index 4a5d9ea5a..c157470d3 100644 --- a/app/_locales/ja/messages.json +++ b/app/_locales/ja/messages.json @@ -323,9 +323,6 @@ "mainnet": { "message": "Ethereumメインネットワーク" }, - "menu": { - "message": "メニュー" - }, "message": { "message": "メッセージ" }, diff --git a/app/_locales/kn/messages.json b/app/_locales/kn/messages.json index 56dc09d38..8f6e7b88e 100644 --- a/app/_locales/kn/messages.json +++ b/app/_locales/kn/messages.json @@ -660,9 +660,6 @@ "memo": { "message": "ಮೆಮೊ" }, - "menu": { - "message": "ಮೆನು" - }, "message": { "message": "ಸಂದೇಶ" }, diff --git a/app/_locales/ko/messages.json b/app/_locales/ko/messages.json index 4d5491ded..abf255f64 100644 --- a/app/_locales/ko/messages.json +++ b/app/_locales/ko/messages.json @@ -654,9 +654,6 @@ "memo": { "message": "메모" }, - "menu": { - "message": "메뉴" - }, "message": { "message": "메시지" }, diff --git a/app/_locales/lt/messages.json b/app/_locales/lt/messages.json index a23a9efcd..bc383babd 100644 --- a/app/_locales/lt/messages.json +++ b/app/_locales/lt/messages.json @@ -660,9 +660,6 @@ "memo": { "message": "pastaba" }, - "menu": { - "message": "Meniu" - }, "message": { "message": "Pranešimas" }, diff --git a/app/_locales/lv/messages.json b/app/_locales/lv/messages.json index a6dac202e..395609a77 100644 --- a/app/_locales/lv/messages.json +++ b/app/_locales/lv/messages.json @@ -656,9 +656,6 @@ "memo": { "message": "atgādinājums" }, - "menu": { - "message": "Izvēlne" - }, "message": { "message": "Ziņojums" }, diff --git a/app/_locales/no/messages.json b/app/_locales/no/messages.json index 5f598a72b..9e98d681d 100644 --- a/app/_locales/no/messages.json +++ b/app/_locales/no/messages.json @@ -650,9 +650,6 @@ "memo": { "message": "beskjed" }, - "menu": { - "message": "Meny " - }, "message": { "message": "Melding " }, diff --git a/app/_locales/ro/messages.json b/app/_locales/ro/messages.json index 03e96e936..64c1038d3 100644 --- a/app/_locales/ro/messages.json +++ b/app/_locales/ro/messages.json @@ -647,9 +647,6 @@ "memo": { "message": "notă" }, - "menu": { - "message": "Meniu" - }, "message": { "message": "Mesaj" }, diff --git a/app/_locales/ru/messages.json b/app/_locales/ru/messages.json index 5dd78fd99..31388c8f1 100644 --- a/app/_locales/ru/messages.json +++ b/app/_locales/ru/messages.json @@ -890,9 +890,6 @@ "memo": { "message": "Мнемотик" }, - "menu": { - "message": "Меню" - }, "metamaskVersion": { "message": "Версия MetaMask" }, diff --git a/app/_locales/sl/messages.json b/app/_locales/sl/messages.json index 0f0689b68..85fda71e8 100644 --- a/app/_locales/sl/messages.json +++ b/app/_locales/sl/messages.json @@ -645,9 +645,6 @@ "memo": { "message": "okrožnica" }, - "menu": { - "message": "Meni" - }, "message": { "message": "Sporočilo" }, diff --git a/app/_locales/sr/messages.json b/app/_locales/sr/messages.json index 3ab5f6c4c..481b00415 100644 --- a/app/_locales/sr/messages.json +++ b/app/_locales/sr/messages.json @@ -651,9 +651,6 @@ "memorizePhrase": { "message": "Zapamtite ovaj izraz." }, - "menu": { - "message": "Meni" - }, "message": { "message": "Poruka" }, diff --git a/app/_locales/sv/messages.json b/app/_locales/sv/messages.json index 1bd58598a..54c075bf3 100644 --- a/app/_locales/sv/messages.json +++ b/app/_locales/sv/messages.json @@ -644,9 +644,6 @@ "memorizePhrase": { "message": "Memorera denna fras." }, - "menu": { - "message": "Meny" - }, "message": { "message": "Meddelande" }, diff --git a/app/_locales/sw/messages.json b/app/_locales/sw/messages.json index f831ab9ef..79bc204b7 100644 --- a/app/_locales/sw/messages.json +++ b/app/_locales/sw/messages.json @@ -638,9 +638,6 @@ "memorizePhrase": { "message": "Kariri kirai hiki" }, - "menu": { - "message": "Menyu" - }, "message": { "message": "Ujumbe" }, diff --git a/app/_locales/uk/messages.json b/app/_locales/uk/messages.json index e6034d481..c48a45950 100644 --- a/app/_locales/uk/messages.json +++ b/app/_locales/uk/messages.json @@ -660,9 +660,6 @@ "memo": { "message": "нотатка" }, - "menu": { - "message": "Меню" - }, "message": { "message": "Повідомлення" }, diff --git a/app/_locales/zh_CN/messages.json b/app/_locales/zh_CN/messages.json index 22e490303..b7e4513dd 100644 --- a/app/_locales/zh_CN/messages.json +++ b/app/_locales/zh_CN/messages.json @@ -648,9 +648,6 @@ "memo": { "message": "备忘录" }, - "menu": { - "message": "菜单" - }, "message": { "message": "消息" }, diff --git a/app/_locales/zh_TW/messages.json b/app/_locales/zh_TW/messages.json index 33e3bbc2b..611ea6fdf 100644 --- a/app/_locales/zh_TW/messages.json +++ b/app/_locales/zh_TW/messages.json @@ -654,9 +654,6 @@ "memo": { "message": "備註" }, - "menu": { - "message": "選單" - }, "message": { "message": "訊息" }, diff --git a/test/e2e/metamask-responsive-ui.spec.js b/test/e2e/metamask-responsive-ui.spec.js index e4d18f01d..97b1ca6fe 100644 --- a/test/e2e/metamask-responsive-ui.spec.js +++ b/test/e2e/metamask-responsive-ui.spec.js @@ -205,10 +205,10 @@ describe('MetaMask', function () { it('confirms the transaction', async function () { await driver.clickElement(By.xpath(`//button[contains(text(), 'Confirm')]`)) - await driver.delay(largeDelayMs) }) it('finds the transaction in the transactions list', async function () { + await driver.clickElement(By.css('[data-testid="home__history-tab"]')) await driver.wait(async () => { const confirmedTxes = await driver.findElements(By.css('.transaction-list__completed-transactions .transaction-list-item')) return confirmedTxes.length === 1 diff --git a/ui/app/components/app/asset-list/asset-list.component.js b/ui/app/components/app/asset-list/asset-list.component.js index 9ea794ab8..d027e4a8e 100644 --- a/ui/app/components/app/asset-list/asset-list.component.js +++ b/ui/app/components/app/asset-list/asset-list.component.js @@ -18,21 +18,17 @@ export default class AssetList extends Component { } static propTypes = { - hideSidebar: PropTypes.func.isRequired, history: PropTypes.object.isRequired, selectedAccount: PropTypes.object, selectedTokenAddress: PropTypes.string, setSelectedToken: PropTypes.func.isRequired, - sidebarOpen: PropTypes.bool.isRequired, unsetSelectedToken: PropTypes.func.isRequired, } renderWalletBalance () { const { - hideSidebar, selectedTokenAddress, selectedAccount, - sidebarOpen, unsetSelectedToken, } = this.props @@ -46,7 +42,6 @@ export default class AssetList extends Component { className="wallet-balance" onClick={() => { unsetSelectedToken() - selectedTokenAddress && sidebarOpen && hideSidebar() }} > ) } render () { - const { - hideSidebar, - selectedTokenAddress, - setSelectedToken, - sidebarOpen, - } = this.props + const { setSelectedToken } = this.props return ( <> {this.renderWalletBalance()} @@ -104,7 +89,6 @@ export default class AssetList extends Component { name: 'Clicked Token', }, }) - selectedTokenAddress !== tokenAddress && sidebarOpen && hideSidebar() }} /> {this.renderAddToken()} diff --git a/ui/app/components/app/asset-list/asset-list.container.js b/ui/app/components/app/asset-list/asset-list.container.js index e16fc320b..17d844fab 100644 --- a/ui/app/components/app/asset-list/asset-list.container.js +++ b/ui/app/components/app/asset-list/asset-list.container.js @@ -2,12 +2,11 @@ import { connect } from 'react-redux' import { withRouter } from 'react-router-dom' import { compose } from 'redux' import AssetList from './asset-list.component' -import { hideSidebar, setSelectedToken } from '../../../store/actions' +import { setSelectedToken } from '../../../store/actions' import { getSelectedAccount } from '../../../selectors/selectors' function mapStateToProps (state) { return { - sidebarOpen: state.appState.sidebar.isOpen, selectedAccount: getSelectedAccount(state), selectedTokenAddress: state.metamask.selectedTokenAddress, } @@ -15,7 +14,6 @@ function mapStateToProps (state) { function mapDispatchToProps (dispatch) { return { - hideSidebar: () => dispatch(hideSidebar()), setSelectedToken: (tokenAddress) => dispatch(setSelectedToken(tokenAddress)), unsetSelectedToken: () => dispatch(setSelectedToken()), } diff --git a/ui/app/components/app/menu-bar/index.js b/ui/app/components/app/menu-bar/index.js index c5760847f..533e01c85 100644 --- a/ui/app/components/app/menu-bar/index.js +++ b/ui/app/components/app/menu-bar/index.js @@ -1 +1 @@ -export { default } from './menu-bar.container' +export { default } from './menu-bar.component' diff --git a/ui/app/components/app/menu-bar/menu-bar.component.js b/ui/app/components/app/menu-bar/menu-bar.component.js index 045bdee35..cfd95eba9 100644 --- a/ui/app/components/app/menu-bar/menu-bar.component.js +++ b/ui/app/components/app/menu-bar/menu-bar.component.js @@ -10,39 +10,14 @@ export default class MenuBar extends PureComponent { metricsEvent: PropTypes.func, } - static propTypes = { - hideSidebar: PropTypes.func, - sidebarOpen: PropTypes.bool, - showSidebar: PropTypes.func, - } - state = { accountDetailsMenuOpen: false } render () { const { t } = this.context - const { sidebarOpen, hideSidebar, showSidebar } = this.props const { accountDetailsMenuOpen } = this.state return (
- -
{ - this.context.metricsEvent({ - eventOpts: { - category: 'Navigation', - action: 'Home', - name: 'Opened Hamburger', - }, - }) - sidebarOpen ? hideSidebar() : showSidebar() - }} - /> - { - const { appState: { sidebar: { isOpen } } } = state - - return { - sidebarOpen: isOpen, - } -} - -const mapDispatchToProps = (dispatch) => { - return { - showSidebar: () => { - dispatch(showSidebar({ - transitionName: 'sidebar-right', - type: WALLET_VIEW_SIDEBAR, - })) - }, - hideSidebar: () => dispatch(hideSidebar()), - } -} - -export default connect(mapStateToProps, mapDispatchToProps)(MenuBar) diff --git a/ui/app/components/app/menu-bar/tests/menu-bar.test.js b/ui/app/components/app/menu-bar/tests/menu-bar.test.js index 46daccb38..424111af2 100644 --- a/ui/app/components/app/menu-bar/tests/menu-bar.test.js +++ b/ui/app/components/app/menu-bar/tests/menu-bar.test.js @@ -1,88 +1,53 @@ import React from 'react' -import configureStore from 'redux-mock-store' import assert from 'assert' -import sinon from 'sinon' +import { Provider } from 'react-redux' +import configureStore from 'redux-mock-store' import { mountWithRouter } from '../../../../../../test/lib/render-helpers' import MenuBar from '../index' -import { Provider } from 'react-redux' -describe('MenuBar', function () { - let wrapper - - const mockStore = { - metamask: { - network: '1', - selectedAddress: '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc', - identities: { - '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc': { - address: '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc', - name: 'Account 1', - }, +const initState = { + metamask: { + network: '1', + selectedAddress: '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc', + identities: { + '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc': { + address: '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc', + name: 'Account 1', }, - keyrings: [ - { - type: 'HD Key Tree', - accounts: [ - '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc', - ], - }, - ], - frequentRpcListDetail: [], }, - appState: { - sidebar: { - isOpen: false, + keyrings: [ + { + type: 'HD Key Tree', + accounts: [ + '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc', + ], }, - }, - } + ], + frequentRpcListDetail: [], + }, +} +const mockStore = configureStore() - const store = configureStore()(mockStore) - - afterEach(function () { - sinon.restore() - }) - - it('shows side bar when sidbarOpen is set to false', function () { - const props = { - showSidebar: sinon.spy(), - } - - wrapper = mountWithRouter( - - - , store - ) - - const sidebarButton = wrapper.find('.menu-bar__sidebar-button') - sidebarButton.simulate('click') - assert(props.showSidebar.calledOnce) - }) - - it('hides side when sidebarOpen is set to true', function () { - const props = { - showSidebar: sinon.spy(), - hideSidebar: sinon.spy(), - sidebarOpen: true, - } - - wrapper = mountWithRouter( +describe('MenuBar', function () { + it('opens account detail menu when account options is clicked', function () { + const store = mockStore(initState) + const wrapper = mountWithRouter( - - , store + + ) - - const sidebarButton = wrapper.find('.menu-bar__sidebar-button') - sidebarButton.prop('onClick')() - assert(props.hideSidebar.calledOnce) - }) - - it('opens account detail menu when account options is clicked', function () { const accountOptions = wrapper.find('.menu-bar__open-in-browser') accountOptions.simulate('click') assert.equal(wrapper.find('MenuBar').instance().state.accountDetailsMenuOpen, true) }) it('sets accountDetailsMenuOpen to false when closed', function () { + const store = mockStore(initState) + const wrapper = mountWithRouter( + + + + ) wrapper.find('MenuBar').instance().setState({ accountDetailsMenuOpen: true }) wrapper.update() diff --git a/ui/app/components/app/sidebars/sidebar.component.js b/ui/app/components/app/sidebars/sidebar.component.js index 7ebd5551a..3f514001a 100644 --- a/ui/app/components/app/sidebars/sidebar.component.js +++ b/ui/app/components/app/sidebars/sidebar.component.js @@ -1,8 +1,6 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import ReactCSSTransitionGroup from 'react-transition-group/CSSTransitionGroup' -import WalletView from '../wallet-view' -import { WALLET_VIEW_SIDEBAR } from './sidebar.constants' import CustomizeGas from '../gas-customization/gas-modal-page-container' export default class Sidebar extends Component { @@ -35,8 +33,6 @@ export default class Sidebar extends Component { const { type, sidebarProps = {} } = this.props const { transaction = {} } = sidebarProps switch (type) { - case WALLET_VIEW_SIDEBAR: - return case 'customize-gas': return
default: diff --git a/ui/app/components/app/sidebars/sidebar.constants.js b/ui/app/components/app/sidebars/sidebar.constants.js deleted file mode 100644 index 1613a8245..000000000 --- a/ui/app/components/app/sidebars/sidebar.constants.js +++ /dev/null @@ -1 +0,0 @@ -export const WALLET_VIEW_SIDEBAR = 'wallet-view' diff --git a/ui/app/components/app/sidebars/tests/sidebars-component.test.js b/ui/app/components/app/sidebars/tests/sidebars-component.test.js index a505c9224..8a203204e 100644 --- a/ui/app/components/app/sidebars/tests/sidebars-component.test.js +++ b/ui/app/components/app/sidebars/tests/sidebars-component.test.js @@ -5,7 +5,6 @@ import sinon from 'sinon' import ReactCSSTransitionGroup from 'react-transition-group/CSSTransitionGroup' import Sidebar from '../sidebar.component.js' -import WalletView from '../../wallet-view' import CustomizeGas from '../../gas-customization/gas-modal-page-container' const propsMethodSpies = { @@ -21,7 +20,7 @@ describe('Sidebar Component', function () { sidebarOpen={false} hideSidebar={propsMethodSpies.hideSidebar} transitionName="someTransition" - type="wallet-view" + type="customize-gas" /> )) }) @@ -52,18 +51,10 @@ describe('Sidebar Component', function () { let renderSidebarContent beforeEach(function () { - wrapper.setProps({ type: 'wallet-view' }) renderSidebarContent = wrapper.instance().renderSidebarContent() }) - it('should render sidebar content with the type wallet-view', function () { - wrapper.setProps({ type: 'wallet-view' }) - renderSidebarContent = wrapper.instance().renderSidebarContent() - assert.equal(renderSidebarContent.props.responsiveDisplayClassname, 'sidebar-right') - }) - it('should render sidebar content with the type customize-gas', function () { - wrapper.setProps({ type: 'customize-gas' }) renderSidebarContent = wrapper.instance().renderSidebarContent() const renderedSidebarContent = shallow(renderSidebarContent) assert(renderedSidebarContent.hasClass('sidebar-left')) @@ -93,7 +84,8 @@ describe('Sidebar Component', function () { assert.equal(wrapper.children().length, 2) assert(wrapper.children().at(1).hasClass('sidebar-overlay')) assert.equal(wrapper.children().at(0).children().length, 1) - assert(wrapper.children().at(0).children().at(0).is(WalletView)) + assert(wrapper.children().at(0).children().at(0).hasClass('sidebar-left')) + assert(wrapper.children().at(0).children().at(0).children().at(0).is(CustomizeGas)) }) }) }) diff --git a/ui/app/components/app/tests/token-cell.spec.js b/ui/app/components/app/tests/token-cell.spec.js index 858ae987a..c8b791493 100644 --- a/ui/app/components/app/tests/token-cell.spec.js +++ b/ui/app/components/app/tests/token-cell.spec.js @@ -22,11 +22,6 @@ describe('Token Cell', function () { }, conversionRate: 7.00, }, - appState: { - sidebar: { - isOpen: true, - }, - }, } const middlewares = [thunk] diff --git a/ui/app/components/app/transaction-list/transaction-list.component.js b/ui/app/components/app/transaction-list/transaction-list.component.js index 6f9a873ae..0074225d1 100644 --- a/ui/app/components/app/transaction-list/transaction-list.component.js +++ b/ui/app/components/app/transaction-list/transaction-list.component.js @@ -100,9 +100,13 @@ export default class TransactionList extends PureComponent { ) }
-
- { t('history') } -
+ { + pendingLength > 0 && ( +
+ { t('history') } +
+ ) + } { completedTransactions.length > 0 ? completedTransactions.map((transactionGroup, index) => ( diff --git a/ui/app/components/app/wallet-view/wallet-view.component.js b/ui/app/components/app/wallet-view/wallet-view.component.js index b067d7e5d..5bd1c140c 100644 --- a/ui/app/components/app/wallet-view/wallet-view.component.js +++ b/ui/app/components/app/wallet-view/wallet-view.component.js @@ -18,25 +18,16 @@ export default class WalletView extends Component { } static propTypes = { - hideSidebar: PropTypes.func.isRequired, history: PropTypes.object.isRequired, identities: PropTypes.object.isRequired, keyrings: PropTypes.array.isRequired, responsiveDisplayClassname: PropTypes.string, selectedAddress: PropTypes.string.isRequired, - sidebarOpen: PropTypes.bool.isRequired, } showConnectedSites = () => { - const { - sidebarOpen, - hideSidebar, - history, - } = this.props + const { history } = this.props history.push(CONNECTED_ROUTE) - if (sidebarOpen) { - hideSidebar() - } } render () { diff --git a/ui/app/components/app/wallet-view/wallet-view.container.js b/ui/app/components/app/wallet-view/wallet-view.container.js index 01fd7a1e1..a5e4f6be0 100644 --- a/ui/app/components/app/wallet-view/wallet-view.container.js +++ b/ui/app/components/app/wallet-view/wallet-view.container.js @@ -2,25 +2,17 @@ import { connect } from 'react-redux' import { withRouter } from 'react-router-dom' import { compose } from 'redux' import WalletView from './wallet-view.component' -import { hideSidebar } from '../../../store/actions' import { getSelectedAddress } from '../../../selectors/selectors' function mapStateToProps (state) { return { - sidebarOpen: state.appState.sidebar.isOpen, identities: state.metamask.identities, keyrings: state.metamask.keyrings, selectedAddress: getSelectedAddress(state), } } -function mapDispatchToProps (dispatch) { - return { - hideSidebar: () => dispatch(hideSidebar()), - } -} - export default compose( withRouter, - connect(mapStateToProps, mapDispatchToProps) + connect(mapStateToProps) )(WalletView) diff --git a/ui/app/components/ui/tabs/index.scss b/ui/app/components/ui/tabs/index.scss index 678f2afe5..4aa1b5df9 100644 --- a/ui/app/components/ui/tabs/index.scss +++ b/ui/app/components/ui/tabs/index.scss @@ -5,6 +5,5 @@ display: flex; justify-content: flex-start; border-bottom: 1px solid $geyser; - padding: 0 16px; } } diff --git a/ui/app/components/ui/tabs/tab/tab.component.js b/ui/app/components/ui/tabs/tab/tab.component.js index 6f847be49..7e48c7d85 100644 --- a/ui/app/components/ui/tabs/tab/tab.component.js +++ b/ui/app/components/ui/tabs/tab/tab.component.js @@ -3,7 +3,14 @@ import PropTypes from 'prop-types' import classnames from 'classnames' const Tab = (props) => { - const { name, onClick, isActive, tabIndex, className } = props + const { + className, + 'data-testid': dataTestId, + isActive, + name, + onClick, + tabIndex, + } = props return (
  • { className, { 'tab--active': isActive }, )} + data-testid={dataTestId} onClick={(event) => { event.preventDefault() onClick(tabIndex) @@ -24,6 +32,7 @@ const Tab = (props) => { Tab.propTypes = { className: PropTypes.string, + 'data-testid': PropTypes.string, isActive: PropTypes.bool, // required, but added using React.cloneElement name: PropTypes.string.isRequired, onClick: PropTypes.func, diff --git a/ui/app/pages/home/home.component.js b/ui/app/pages/home/home.component.js index d83a6e075..a60ff2eba 100644 --- a/ui/app/pages/home/home.component.js +++ b/ui/app/pages/home/home.component.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types' import Media from 'react-media' import { Redirect, Route } from 'react-router-dom' import { formatDate } from '../../helpers/utils/util' +import AssetList from '../../components/app/asset-list' import HomeNotification from '../../components/app/home-notification' import DaiMigrationNotification from '../../components/app/dai-migration-component' import MultipleNotifications from '../../components/app/multiple-notifications' @@ -11,6 +12,7 @@ import TransactionList from '../../components/app/transaction-list' import TransactionViewBalance from '../../components/app/transaction-view-balance' import MenuBar from '../../components/app/menu-bar' import ConnectedSites from '../connected-sites' +import { Tabs, Tab } from '../../components/ui/tabs' import { RESTORE_VAULT_ROUTE, @@ -179,18 +181,34 @@ export default class Home extends PureComponent { > { (isWideViewport) => ( - <> - { isWideViewport ? : null } -
    - { - !isWideViewport ? : null - } -
    - + isWideViewport + ? ( + <> + +
    +
    + +
    + +
    + + ) + : ( +
    + +
    + +
    + + + + + + + +
    - -
    - + ) ) } diff --git a/ui/app/pages/home/index.scss b/ui/app/pages/home/index.scss index fa574043a..7264d10ef 100644 --- a/ui/app/pages/home/index.scss +++ b/ui/app/pages/home/index.scss @@ -32,4 +32,8 @@ flex: 0 0 auto; } } + + &__tab { + flex-grow: 1; + } } diff --git a/ui/app/pages/routes/routes.component.js b/ui/app/pages/routes/routes.component.js index 0ddc69871..25b653593 100644 --- a/ui/app/pages/routes/routes.component.js +++ b/ui/app/pages/routes/routes.component.js @@ -8,7 +8,6 @@ import FirstTimeFlow from '../first-time-flow' import SendTransactionScreen from '../send' import ConfirmTransaction from '../confirm-transaction' import Sidebar from '../../components/app/sidebars' -import { WALLET_VIEW_SIDEBAR } from '../../components/app/sidebars/sidebar.constants' import Home from '../home' import Settings from '../settings' import Authenticated from '../../helpers/higher-order-components/authenticated' @@ -205,18 +204,6 @@ export default class Routes extends Component { } = sidebar const { transaction: sidebarTransaction } = props || {} - const sidebarOnOverlayClose = sidebarType === WALLET_VIEW_SIDEBAR - ? () => { - this.context.metricsEvent({ - eventOpts: { - category: 'Navigation', - action: 'Wallet Sidebar', - name: 'Closed Sidebare Via Overlay', - }, - }) - } - : null - const sidebarShouldClose = sidebarTransaction && !sidebarTransaction.status === 'failed' && !submittedPendingTransactions.find(({ id }) => id === sidebarTransaction.id) @@ -250,7 +237,6 @@ export default class Routes extends Component { transitionName={sidebarTransitionName} type={sidebarType} sidebarProps={sidebar.props} - onOverlayClose={sidebarOnOverlayClose} />