diff --git a/ui/app/components/app/asset-list/asset-list.component.js b/ui/app/components/app/asset-list/asset-list.component.js new file mode 100644 index 000000000..9ea794ab8 --- /dev/null +++ b/ui/app/components/app/asset-list/asset-list.component.js @@ -0,0 +1,114 @@ +import classnames from 'classnames' +import PropTypes from 'prop-types' +import React, { Component } from 'react' +import BalanceComponent from '../../ui/balance' +import AddTokenButton from '../add-token-button' +import TokenList from '../token-list' +import { ADD_TOKEN_ROUTE } from '../../../helpers/constants/routes' + +export default class AssetList extends Component { + static contextTypes = { + t: PropTypes.func, + metricsEvent: PropTypes.func, + } + + static defaultProps = { + selectedAccount: undefined, + selectedTokenAddress: undefined, + } + + 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 + + return ( +
+
{ + unsetSelectedToken() + selectedTokenAddress && sidebarOpen && hideSidebar() + }} + > + +
+
+ ) + } + + renderAddToken () { + const { + hideSidebar, + history, + sidebarOpen, + } = this.props + const { metricsEvent } = this.context + + return ( + { + history.push(ADD_TOKEN_ROUTE) + metricsEvent({ + eventOpts: { + category: 'Navigation', + action: 'Token Menu', + name: 'Clicked "Add Token"', + }, + }) + if (sidebarOpen) { + hideSidebar() + } + }} + /> + ) + } + + render () { + const { + hideSidebar, + selectedTokenAddress, + setSelectedToken, + sidebarOpen, + } = this.props + return ( + <> + {this.renderWalletBalance()} + { + setSelectedToken(tokenAddress) + this.context.metricsEvent({ + eventOpts: { + category: 'Navigation', + action: 'Token Menu', + 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 new file mode 100644 index 000000000..e16fc320b --- /dev/null +++ b/ui/app/components/app/asset-list/asset-list.container.js @@ -0,0 +1,27 @@ +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 { getSelectedAccount } from '../../../selectors/selectors' + +function mapStateToProps (state) { + return { + sidebarOpen: state.appState.sidebar.isOpen, + selectedAccount: getSelectedAccount(state), + selectedTokenAddress: state.metamask.selectedTokenAddress, + } +} + +function mapDispatchToProps (dispatch) { + return { + hideSidebar: () => dispatch(hideSidebar()), + setSelectedToken: (tokenAddress) => dispatch(setSelectedToken(tokenAddress)), + unsetSelectedToken: () => dispatch(setSelectedToken()), + } +} + +export default compose( + withRouter, + connect(mapStateToProps, mapDispatchToProps) +)(AssetList) diff --git a/ui/app/css/itcss/components/wallet-balance.scss b/ui/app/components/app/asset-list/asset-list.scss similarity index 100% rename from ui/app/css/itcss/components/wallet-balance.scss rename to ui/app/components/app/asset-list/asset-list.scss diff --git a/ui/app/components/app/asset-list/index.js b/ui/app/components/app/asset-list/index.js new file mode 100644 index 000000000..777c5c187 --- /dev/null +++ b/ui/app/components/app/asset-list/index.js @@ -0,0 +1 @@ +export { default } from './asset-list.container.js' diff --git a/ui/app/components/app/index.scss b/ui/app/components/app/index.scss index 7e4713a32..dc2a21c64 100644 --- a/ui/app/components/app/index.scss +++ b/ui/app/components/app/index.scss @@ -6,6 +6,8 @@ @import 'app-header/index'; +@import 'asset-list/asset-list.scss'; + @import '../ui/breadcrumbs/index'; @import '../ui/button-group/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 200e1bf06..b067d7e5d 100644 --- a/ui/app/components/app/wallet-view/wallet-view.component.js +++ b/ui/app/components/app/wallet-view/wallet-view.component.js @@ -1,13 +1,11 @@ import classnames from 'classnames' import PropTypes from 'prop-types' import React, { Component } from 'react' -import BalanceComponent from '../../ui/balance' -import AddTokenButton from '../add-token-button' import AccountDetails from '../account-details' import { checksumAddress } from '../../../helpers/utils/util' -import TokenList from '../token-list' -import { ADD_TOKEN_ROUTE, CONNECTED_ROUTE } from '../../../helpers/constants/routes' +import AssetList from '../asset-list' +import { CONNECTED_ROUTE } from '../../../helpers/constants/routes' export default class WalletView extends Component { static contextTypes = { @@ -17,8 +15,6 @@ export default class WalletView extends Component { static defaultProps = { responsiveDisplayClassname: '', - selectedAccount: null, - selectedTokenAddress: null, } static propTypes = { @@ -27,69 +23,8 @@ export default class WalletView extends Component { identities: PropTypes.object.isRequired, keyrings: PropTypes.array.isRequired, responsiveDisplayClassname: PropTypes.string, - selectedAccount: PropTypes.object, selectedAddress: PropTypes.string.isRequired, - selectedTokenAddress: PropTypes.string, - setSelectedToken: PropTypes.func.isRequired, sidebarOpen: PropTypes.bool.isRequired, - unsetSelectedToken: PropTypes.func.isRequired, - } - - renderWalletBalance () { - const { - selectedTokenAddress, - selectedAccount, - unsetSelectedToken, - hideSidebar, - sidebarOpen, - } = this.props - - return ( -
-
{ - unsetSelectedToken() - selectedTokenAddress && sidebarOpen && hideSidebar() - }} - > - -
-
- ) - } - - renderAddToken () { - const { - sidebarOpen, - hideSidebar, - history, - } = this.props - const { metricsEvent } = this.context - - return ( - { - history.push(ADD_TOKEN_ROUTE) - metricsEvent({ - eventOpts: { - category: 'Navigation', - action: 'Token Menu', - name: 'Clicked "Add Token"', - }, - }) - if (sidebarOpen) { - hideSidebar() - } - }} - /> - ) } showConnectedSites = () => { @@ -106,14 +41,10 @@ export default class WalletView extends Component { render () { const { - hideSidebar, identities, keyrings, responsiveDisplayClassname, selectedAddress, - selectedTokenAddress, - setSelectedToken, - sidebarOpen, } = this.props const checksummedAddress = checksumAddress(selectedAddress) @@ -143,21 +74,7 @@ export default class WalletView extends Component { name={identities[selectedAddress].name} showConnectedSites={this.showConnectedSites} /> - {this.renderWalletBalance()} - { - setSelectedToken(tokenAddress) - this.context.metricsEvent({ - eventOpts: { - category: 'Navigation', - action: 'Token Menu', - name: 'Clicked Token', - }, - }) - selectedTokenAddress !== tokenAddress && sidebarOpen && hideSidebar() - }} - /> - {this.renderAddToken()} + ) } 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 4ea4f8027..01fd7a1e1 100644 --- a/ui/app/components/app/wallet-view/wallet-view.container.js +++ b/ui/app/components/app/wallet-view/wallet-view.container.js @@ -2,8 +2,8 @@ import { connect } from 'react-redux' import { withRouter } from 'react-router-dom' import { compose } from 'redux' import WalletView from './wallet-view.component' -import { hideSidebar, setSelectedToken } from '../../../store/actions' -import { getSelectedAddress, getSelectedAccount } from '../../../selectors/selectors' +import { hideSidebar } from '../../../store/actions' +import { getSelectedAddress } from '../../../selectors/selectors' function mapStateToProps (state) { return { @@ -11,16 +11,12 @@ function mapStateToProps (state) { identities: state.metamask.identities, keyrings: state.metamask.keyrings, selectedAddress: getSelectedAddress(state), - selectedAccount: getSelectedAccount(state), - selectedTokenAddress: state.metamask.selectedTokenAddress, } } function mapDispatchToProps (dispatch) { return { hideSidebar: () => dispatch(hideSidebar()), - setSelectedToken: (tokenAddress) => dispatch(setSelectedToken(tokenAddress)), - unsetSelectedToken: () => dispatch(setSelectedToken()), } } diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss index 5e790fb53..36a703813 100644 --- a/ui/app/css/itcss/components/index.scss +++ b/ui/app/css/itcss/components/index.scss @@ -23,9 +23,6 @@ @import './loading-overlay.scss'; -// Balances -@import './wallet-balance.scss'; - // Tx List and Sections @import './transaction-list.scss';