From 3b408715c745030aed6e720e6f19dc8f2aa511d1 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Tue, 24 Jul 2018 11:40:05 -0700 Subject: Refactor home screen and remove unused files --- ui/app/components/pages/home.js | 239 ------------------------- ui/app/components/pages/home/home.component.js | 73 ++++++++ ui/app/components/pages/home/home.container.js | 34 ++++ ui/app/components/pages/home/index.js | 1 + 4 files changed, 108 insertions(+), 239 deletions(-) delete mode 100644 ui/app/components/pages/home.js create mode 100644 ui/app/components/pages/home/home.component.js create mode 100644 ui/app/components/pages/home/home.container.js create mode 100644 ui/app/components/pages/home/index.js (limited to 'ui/app/components/pages') diff --git a/ui/app/components/pages/home.js b/ui/app/components/pages/home.js deleted file mode 100644 index 5e3fdc9af..000000000 --- a/ui/app/components/pages/home.js +++ /dev/null @@ -1,239 +0,0 @@ -const { Component } = require('react') -const { connect } = require('react-redux') -const PropTypes = require('prop-types') -const { Redirect, withRouter } = require('react-router-dom') -const { compose } = require('recompose') -const h = require('react-hyperscript') -const actions = require('../../actions') -const log = require('loglevel') - -// init -const NewKeyChainScreen = require('../../new-keychain') -// mascara -const MascaraBuyEtherScreen = require('../../../../mascara/src/app/first-time/buy-ether-screen').default - -// accounts -const MainContainer = require('../../main-container') - -// other views -const BuyView = require('../../components/buy-button-subview') -const QrView = require('../../components/qr-code') - -// Routes -const { - INITIALIZE_BACKUP_PHRASE_ROUTE, - RESTORE_VAULT_ROUTE, - CONFIRM_TRANSACTION_ROUTE, - NOTICE_ROUTE, -} = require('../../routes') - -const { unconfirmedTransactionsCountSelector } = require('../../selectors/confirm-transaction') - -class Home extends Component { - componentDidMount () { - const { - history, - unconfirmedTransactionsCount = 0, - } = this.props - - // unapprovedTxs and unapproved messages - if (unconfirmedTransactionsCount > 0) { - history.push(CONFIRM_TRANSACTION_ROUTE) - } - } - - render () { - log.debug('rendering primary') - const { - noActiveNotices, - lostAccounts, - forgottenPassword, - currentView, - activeAddress, - seedWords, - } = this.props - - // notices - if (!noActiveNotices || (lostAccounts && lostAccounts.length > 0)) { - return h(Redirect, { - to: { - pathname: NOTICE_ROUTE, - }, - }) - } - - // seed words - if (seedWords) { - log.debug('rendering seed words') - return h(Redirect, { - to: { - pathname: INITIALIZE_BACKUP_PHRASE_ROUTE, - }, - }) - } - - if (forgottenPassword) { - log.debug('rendering restore vault screen') - return h(Redirect, { - to: { - pathname: RESTORE_VAULT_ROUTE, - }, - }) - } - - // show current view - switch (currentView.name) { - - case 'accountDetail': - log.debug('rendering main container') - return h(MainContainer, {key: 'account-detail'}) - - case 'newKeychain': - log.debug('rendering new keychain screen') - return h(NewKeyChainScreen, {key: 'new-keychain'}) - - case 'buyEth': - log.debug('rendering buy ether screen') - return h(BuyView, {key: 'buyEthView'}) - - case 'onboardingBuyEth': - log.debug('rendering onboarding buy ether screen') - return h(MascaraBuyEtherScreen, {key: 'buyEthView'}) - - case 'qr': - log.debug('rendering show qr screen') - return h('div', { - style: { - position: 'absolute', - height: '100%', - top: '0px', - left: '0px', - }, - }, [ - h('i.fa.fa-arrow-left.fa-lg.cursor-pointer.color-orange', { - onClick: () => this.props.dispatch(actions.backToAccountDetail(activeAddress)), - style: { - marginLeft: '10px', - marginTop: '50px', - }, - }), - h('div', { - style: { - position: 'absolute', - left: '44px', - width: '285px', - }, - }, [ - h(QrView, {key: 'qr'}), - ]), - ]) - - default: - log.debug('rendering default, account detail screen') - return h(MainContainer, {key: 'account-detail'}) - } - } -} - -Home.propTypes = { - currentCurrency: PropTypes.string, - isLoading: PropTypes.bool, - loadingMessage: PropTypes.string, - network: PropTypes.string, - provider: PropTypes.object, - frequentRpcList: PropTypes.array, - currentView: PropTypes.object, - sidebarOpen: PropTypes.bool, - isMascara: PropTypes.bool, - isOnboarding: PropTypes.bool, - isUnlocked: PropTypes.bool, - networkDropdownOpen: PropTypes.bool, - history: PropTypes.object, - dispatch: PropTypes.func, - selectedAddress: PropTypes.string, - noActiveNotices: PropTypes.bool, - lostAccounts: PropTypes.array, - isInitialized: PropTypes.bool, - forgottenPassword: PropTypes.bool, - activeAddress: PropTypes.string, - unapprovedTxs: PropTypes.object, - seedWords: PropTypes.string, - unapprovedMsgCount: PropTypes.number, - unapprovedPersonalMsgCount: PropTypes.number, - unapprovedTypedMessagesCount: PropTypes.number, - welcomeScreenSeen: PropTypes.bool, - isPopup: PropTypes.bool, - isMouseUser: PropTypes.bool, - t: PropTypes.func, - unconfirmedTransactionsCount: PropTypes.number, -} - -function mapStateToProps (state) { - const { appState, metamask } = state - const { - networkDropdownOpen, - sidebarOpen, - isLoading, - loadingMessage, - } = appState - - const { - accounts, - address, - isInitialized, - noActiveNotices, - seedWords, - unapprovedTxs, - nextUnreadNotice, - lostAccounts, - unapprovedMsgCount, - unapprovedPersonalMsgCount, - unapprovedTypedMessagesCount, - } = metamask - const selected = address || Object.keys(accounts)[0] - - return { - // state from plugin - networkDropdownOpen, - sidebarOpen, - isLoading, - loadingMessage, - noActiveNotices, - isInitialized, - isUnlocked: state.metamask.isUnlocked, - selectedAddress: state.metamask.selectedAddress, - currentView: state.appState.currentView, - activeAddress: state.appState.activeAddress, - transForward: state.appState.transForward, - isMascara: state.metamask.isMascara, - isOnboarding: Boolean(!noActiveNotices || seedWords || !isInitialized), - isPopup: state.metamask.isPopup, - seedWords: state.metamask.seedWords, - unapprovedTxs, - unapprovedMsgs: state.metamask.unapprovedMsgs, - unapprovedMsgCount, - unapprovedPersonalMsgCount, - unapprovedTypedMessagesCount, - menuOpen: state.appState.menuOpen, - network: state.metamask.network, - provider: state.metamask.provider, - forgottenPassword: state.appState.forgottenPassword, - nextUnreadNotice, - lostAccounts, - frequentRpcList: state.metamask.frequentRpcList || [], - currentCurrency: state.metamask.currentCurrency, - isMouseUser: state.appState.isMouseUser, - isRevealingSeedWords: state.metamask.isRevealingSeedWords, - Qr: state.appState.Qr, - welcomeScreenSeen: state.metamask.welcomeScreenSeen, - - // state needed to get account dropdown temporarily rendering from app bar - selected, - unconfirmedTransactionsCount: unconfirmedTransactionsCountSelector(state), - } -} - -module.exports = compose( - withRouter, - connect(mapStateToProps) -)(Home) diff --git a/ui/app/components/pages/home/home.component.js b/ui/app/components/pages/home/home.component.js new file mode 100644 index 000000000..0ab6f77f8 --- /dev/null +++ b/ui/app/components/pages/home/home.component.js @@ -0,0 +1,73 @@ +import React, { PureComponent } from 'react' +import PropTypes from 'prop-types' +import { Redirect } from 'react-router-dom' +import WalletView from '../../wallet-view' +import TxView from '../../tx-view' +import { + INITIALIZE_BACKUP_PHRASE_ROUTE, + RESTORE_VAULT_ROUTE, + CONFIRM_TRANSACTION_ROUTE, + NOTICE_ROUTE, +} from '../../../routes' + +export default class Home extends PureComponent { + static propTypes = { + history: PropTypes.object, + unapprovedTxs: PropTypes.object, + unapprovedMsgCount: PropTypes.number, + unapprovedPersonalMsgCount: PropTypes.number, + unapprovedTypedMessagesCount: PropTypes.number, + noActiveNotices: PropTypes.bool, + lostAccounts: PropTypes.array, + forgottenPassword: PropTypes.bool, + seedWords: PropTypes.string, + } + + componentDidMount () { + const { + history, + unapprovedTxs = {}, + unapprovedMsgCount = 0, + unapprovedPersonalMsgCount = 0, + unapprovedTypedMessagesCount = 0, + } = this.props + + // unapprovedTxs and unapproved messages + if (Object.keys(unapprovedTxs).length || + unapprovedTypedMessagesCount + unapprovedMsgCount + unapprovedPersonalMsgCount > 0) { + history.push(CONFIRM_TRANSACTION_ROUTE) + } + } + + render () { + const { + noActiveNotices, + lostAccounts, + forgottenPassword, + seedWords, + } = this.props + + // notices + if (!noActiveNotices || (lostAccounts && lostAccounts.length > 0)) { + return + } + + // seed words + if (seedWords) { + return + } + + if (forgottenPassword) { + return + } + + return ( +
+
+ + +
+
+ ) + } +} diff --git a/ui/app/components/pages/home/home.container.js b/ui/app/components/pages/home/home.container.js new file mode 100644 index 000000000..96a45a69b --- /dev/null +++ b/ui/app/components/pages/home/home.container.js @@ -0,0 +1,34 @@ +import Home from './home.component' +import { compose } from 'recompose' +import { connect } from 'react-redux' +import { withRouter } from 'react-router-dom' + +const mapStateToProps = state => { + const { metamask, appState } = state + const { + unapprovedTxs = {}, + unapprovedMsgCount = 0, + unapprovedPersonalMsgCount = 0, + unapprovedTypedMessagesCount = 0, + noActiveNotices, + lostAccounts, + seedWords, + } = metamask + const { forgottenPassword } = appState + + return { + unapprovedTxs, + unapprovedMsgCount, + unapprovedPersonalMsgCount, + unapprovedTypedMessagesCount, + noActiveNotices, + lostAccounts, + forgottenPassword, + seedWords, + } +} + +export default compose( + withRouter, + connect(mapStateToProps) +)(Home) diff --git a/ui/app/components/pages/home/index.js b/ui/app/components/pages/home/index.js new file mode 100644 index 000000000..4474ba5b8 --- /dev/null +++ b/ui/app/components/pages/home/index.js @@ -0,0 +1 @@ +export { default } from './home.container' -- cgit v1.2.3 From d1de5ae94f1662f35a7b031ac59b4bb9bd719695 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Tue, 24 Jul 2018 11:40:22 -0700 Subject: Add react-media package to prevent rendering wallet-view twice in the popup view --- ui/app/components/pages/home/home.component.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'ui/app/components/pages') diff --git a/ui/app/components/pages/home/home.component.js b/ui/app/components/pages/home/home.component.js index 0ab6f77f8..20ba44484 100644 --- a/ui/app/components/pages/home/home.component.js +++ b/ui/app/components/pages/home/home.component.js @@ -1,5 +1,6 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' +import Media from 'react-media' import { Redirect } from 'react-router-dom' import WalletView from '../../wallet-view' import TxView from '../../tx-view' @@ -64,7 +65,10 @@ export default class Home extends PureComponent { return (
- + } + />
-- cgit v1.2.3 From 4e0693eaff0107d11bf93042db50cbb022cfeed8 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Mon, 30 Jul 2018 12:02:55 -0700 Subject: Add withMethodData HOC, add higher-order-component folder --- .../confirm-add-token/confirm-add-token.component.js | 4 ++-- .../pages/confirm-add-token/token-balance/index.js | 2 -- .../token-balance/token-balance.component.js | 16 ---------------- .../token-balance/token-balance.container.js | 16 ---------------- 4 files changed, 2 insertions(+), 36 deletions(-) delete mode 100644 ui/app/components/pages/confirm-add-token/token-balance/index.js delete mode 100644 ui/app/components/pages/confirm-add-token/token-balance/token-balance.component.js delete mode 100644 ui/app/components/pages/confirm-add-token/token-balance/token-balance.container.js (limited to 'ui/app/components/pages') diff --git a/ui/app/components/pages/confirm-add-token/confirm-add-token.component.js b/ui/app/components/pages/confirm-add-token/confirm-add-token.component.js index 65d654b92..3dcc8cda9 100644 --- a/ui/app/components/pages/confirm-add-token/confirm-add-token.component.js +++ b/ui/app/components/pages/confirm-add-token/confirm-add-token.component.js @@ -2,8 +2,8 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import { DEFAULT_ROUTE, ADD_TOKEN_ROUTE } from '../../../routes' import Button from '../../button' -import Identicon from '../../../components/identicon' -import TokenBalance from './token-balance' +import Identicon from '../../identicon' +import TokenBalance from '../../token-balance' export default class ConfirmAddToken extends Component { static contextTypes = { diff --git a/ui/app/components/pages/confirm-add-token/token-balance/index.js b/ui/app/components/pages/confirm-add-token/token-balance/index.js deleted file mode 100644 index 6fb5c8223..000000000 --- a/ui/app/components/pages/confirm-add-token/token-balance/index.js +++ /dev/null @@ -1,2 +0,0 @@ -import TokenBalance from './token-balance.container' -module.exports = TokenBalance diff --git a/ui/app/components/pages/confirm-add-token/token-balance/token-balance.component.js b/ui/app/components/pages/confirm-add-token/token-balance/token-balance.component.js deleted file mode 100644 index 976788d4c..000000000 --- a/ui/app/components/pages/confirm-add-token/token-balance/token-balance.component.js +++ /dev/null @@ -1,16 +0,0 @@ -import React, { Component } from 'react' -import PropTypes from 'prop-types' - -export default class TokenBalance extends Component { - static propTypes = { - string: PropTypes.string, - symbol: PropTypes.string, - error: PropTypes.string, - } - - render () { - return ( -
{ this.props.string }
- ) - } -} diff --git a/ui/app/components/pages/confirm-add-token/token-balance/token-balance.container.js b/ui/app/components/pages/confirm-add-token/token-balance/token-balance.container.js deleted file mode 100644 index bc1289ce1..000000000 --- a/ui/app/components/pages/confirm-add-token/token-balance/token-balance.container.js +++ /dev/null @@ -1,16 +0,0 @@ -import { connect } from 'react-redux' -import { compose } from 'recompose' -import withTokenTracker from '../../../../helpers/with-token-tracker' -import TokenBalance from './token-balance.component' -import selectors from '../../../../selectors' - -const mapStateToProps = state => { - return { - userAddress: selectors.getSelectedAddress(state), - } -} - -export default compose( - connect(mapStateToProps), - withTokenTracker -)(TokenBalance) -- cgit v1.2.3 From 5ee40675b9f986a9ff2e5d15a271d7de2145d0e9 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Mon, 30 Jul 2018 22:03:20 -0700 Subject: Refactor transactions list views. Add redesign components --- .../confirm-transaction-switch.component.js | 4 ++-- .../confirm-transaction-switch.constants.js | 3 --- ui/app/components/pages/home/home.component.js | 21 ++++++--------------- ui/app/components/pages/home/home.container.js | 10 ++-------- 4 files changed, 10 insertions(+), 28 deletions(-) delete mode 100644 ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.constants.js (limited to 'ui/app/components/pages') diff --git a/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.component.js b/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.component.js index d494977cd..2c44b6094 100644 --- a/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.component.js +++ b/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.component.js @@ -12,12 +12,12 @@ import { CONFIRM_TOKEN_METHOD_PATH, SIGNATURE_REQUEST_PATH, } from '../../../routes' -import { isConfirmDeployContract } from './confirm-transaction-switch.util' +import { isConfirmDeployContract } from '../../../helpers/transactions.util' import { TOKEN_METHOD_TRANSFER, TOKEN_METHOD_APPROVE, TOKEN_METHOD_TRANSFER_FROM, -} from './confirm-transaction-switch.constants' +} from '../../../constants/transactions' export default class ConfirmTransactionSwitch extends Component { static propTypes = { diff --git a/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.constants.js b/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.constants.js deleted file mode 100644 index 9db4a2f96..000000000 --- a/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.constants.js +++ /dev/null @@ -1,3 +0,0 @@ -export const TOKEN_METHOD_TRANSFER = 'transfer' -export const TOKEN_METHOD_APPROVE = 'approve' -export const TOKEN_METHOD_TRANSFER_FROM = 'transferfrom' diff --git a/ui/app/components/pages/home/home.component.js b/ui/app/components/pages/home/home.component.js index 20ba44484..dae9790de 100644 --- a/ui/app/components/pages/home/home.component.js +++ b/ui/app/components/pages/home/home.component.js @@ -4,6 +4,7 @@ import Media from 'react-media' import { Redirect } from 'react-router-dom' import WalletView from '../../wallet-view' import TxView from '../../tx-view' +import TokenView from '../../token-view' import { INITIALIZE_BACKUP_PHRASE_ROUTE, RESTORE_VAULT_ROUTE, @@ -14,28 +15,17 @@ import { export default class Home extends PureComponent { static propTypes = { history: PropTypes.object, - unapprovedTxs: PropTypes.object, - unapprovedMsgCount: PropTypes.number, - unapprovedPersonalMsgCount: PropTypes.number, - unapprovedTypedMessagesCount: PropTypes.number, noActiveNotices: PropTypes.bool, lostAccounts: PropTypes.array, forgottenPassword: PropTypes.bool, seedWords: PropTypes.string, + unconfirmedTransactionsCount: PropTypes.number, } componentDidMount () { - const { - history, - unapprovedTxs = {}, - unapprovedMsgCount = 0, - unapprovedPersonalMsgCount = 0, - unapprovedTypedMessagesCount = 0, - } = this.props + const { history, unconfirmedTransactionsCount = 0 } = this.props - // unapprovedTxs and unapproved messages - if (Object.keys(unapprovedTxs).length || - unapprovedTypedMessagesCount + unapprovedMsgCount + unapprovedPersonalMsgCount > 0) { + if (unconfirmedTransactionsCount > 0) { history.push(CONFIRM_TRANSACTION_ROUTE) } } @@ -69,7 +59,8 @@ export default class Home extends PureComponent { query="(min-width: 576px)" render={() => } /> - + + {/* */} ) diff --git a/ui/app/components/pages/home/home.container.js b/ui/app/components/pages/home/home.container.js index 96a45a69b..b0e34f832 100644 --- a/ui/app/components/pages/home/home.container.js +++ b/ui/app/components/pages/home/home.container.js @@ -2,14 +2,11 @@ import Home from './home.component' import { compose } from 'recompose' import { connect } from 'react-redux' import { withRouter } from 'react-router-dom' +import { unconfirmedTransactionsCountSelector } from '../../../selectors/confirm-transaction' const mapStateToProps = state => { const { metamask, appState } = state const { - unapprovedTxs = {}, - unapprovedMsgCount = 0, - unapprovedPersonalMsgCount = 0, - unapprovedTypedMessagesCount = 0, noActiveNotices, lostAccounts, seedWords, @@ -17,14 +14,11 @@ const mapStateToProps = state => { const { forgottenPassword } = appState return { - unapprovedTxs, - unapprovedMsgCount, - unapprovedPersonalMsgCount, - unapprovedTypedMessagesCount, noActiveNotices, lostAccounts, forgottenPassword, seedWords, + unconfirmedTransactionsCount: unconfirmedTransactionsCountSelector(state), } } -- cgit v1.2.3 From e104744d3b29af518bc60c45339d4d4458baaa68 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Mon, 6 Aug 2018 13:45:56 -0700 Subject: Fix shapeshift transactions. Delete unused files --- ui/app/components/pages/home/home.component.js | 2 -- 1 file changed, 2 deletions(-) (limited to 'ui/app/components/pages') diff --git a/ui/app/components/pages/home/home.component.js b/ui/app/components/pages/home/home.component.js index dae9790de..65273ec8e 100644 --- a/ui/app/components/pages/home/home.component.js +++ b/ui/app/components/pages/home/home.component.js @@ -3,7 +3,6 @@ import PropTypes from 'prop-types' import Media from 'react-media' import { Redirect } from 'react-router-dom' import WalletView from '../../wallet-view' -import TxView from '../../tx-view' import TokenView from '../../token-view' import { INITIALIZE_BACKUP_PHRASE_ROUTE, @@ -60,7 +59,6 @@ export default class Home extends PureComponent { render={() => } /> - {/* */} ) -- cgit v1.2.3 From 342522c6cf23670f931e69ba822eedfd2d6ee252 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Thu, 23 Aug 2018 16:44:38 -0700 Subject: Fix naming, add eth.getCode check for actions, fix translations for statuses --- ui/app/components/pages/home/home.component.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'ui/app/components/pages') diff --git a/ui/app/components/pages/home/home.component.js b/ui/app/components/pages/home/home.component.js index 65273ec8e..404f42361 100644 --- a/ui/app/components/pages/home/home.component.js +++ b/ui/app/components/pages/home/home.component.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types' import Media from 'react-media' import { Redirect } from 'react-router-dom' import WalletView from '../../wallet-view' -import TokenView from '../../token-view' +import TransactionView from '../../transaction-view' import { INITIALIZE_BACKUP_PHRASE_ROUTE, RESTORE_VAULT_ROUTE, @@ -58,7 +58,7 @@ export default class Home extends PureComponent { query="(min-width: 576px)" render={() => } /> - + ) -- cgit v1.2.3