Refactor home screen and remove unused files

6 years ago · 3b408715c7
parent dae07b32e5
commit 3b408715c7
10 changed files with 116 additions and 620 deletions
--- a/ui/app/account-and-transaction-details.js
+++ b/ui/app/account-and-transaction-details.js
@ -1,33 +0,0 @@
-const Component = require('react').Component
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-// Main Views
-const TxView = require('./components/tx-view')
-const WalletView = require('./components/wallet-view')
-
-module.exports = AccountAndTransactionDetails
-
-inherits(AccountAndTransactionDetails, Component)
-function AccountAndTransactionDetails () {
-  Component.call(this)
-}
-
-AccountAndTransactionDetails.prototype.render = function () {
-  return h('div.account-and-transaction-details', [
-    // wallet
-    h(WalletView, {
-      style: {
-      },
-      responsiveDisplayClassname: '.lap-visible',
-    }, [
-    ]),
-
-    // transaction
-    h(TxView, {
-      style: {
-      },
-    }, [
-    ]),
-  ])
-}
-
--- a/ui/app/app.js
+++ b/ui/app/app.js
@ -18,7 +18,7 @@ const ConfirmTransaction = require('./components/pages/confirm-transaction')
 const WalletView = require('./components/wallet-view')

 // other views
-const Home = require('./components/pages/home')
+import Home from './components/pages/home'
 const Authenticated = require('./components/pages/authenticated')
 const Initialized = require('./components/pages/initialized')
 const Settings = require('./components/pages/settings')
@ -182,7 +182,7 @@ class App extends Component {
      }, [
        // A second instance of Walletview is used for non-mobile viewports
        this.props.sidebarOpen ? h(WalletView, {
-          responsiveDisplayClassname: '.sidebar',
+          responsiveDisplayClassname: 'sidebar',
          style: {},
        }) : undefined,

--- a/ui/app/components/buy-button-subview.js
+++ b/ui/app/components/buy-button-subview.js
@ -1,267 +0,0 @@
-const Component = require('react').Component
-const PropTypes = require('prop-types')
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const connect = require('react-redux').connect
-const actions = require('../actions')
-const CoinbaseForm = require('./coinbase-form')
-const ShapeshiftForm = require('./shapeshift-form')
-const Loading = require('./loading-screen')
-const AccountPanel = require('./account-panel')
-const RadioList = require('./custom-radio-list')
-const { getNetworkDisplayName } = require('../../../app/scripts/controllers/network/util')
-
-BuyButtonSubview.contextTypes = {
-  t: PropTypes.func,
-}
-
-module.exports = connect(mapStateToProps)(BuyButtonSubview)
-
-
-function mapStateToProps (state) {
-  return {
-    identity: state.appState.identity,
-    account: state.metamask.accounts[state.appState.buyView.buyAddress],
-    warning: state.appState.warning,
-    buyView: state.appState.buyView,
-    network: state.metamask.network,
-    provider: state.metamask.provider,
-    context: state.appState.currentView.context,
-    isSubLoading: state.appState.isSubLoading,
-  }
-}
-
-inherits(BuyButtonSubview, Component)
-function BuyButtonSubview () {
-  Component.call(this)
-}
-
-BuyButtonSubview.prototype.render = function () {
-  return (
-    h('div', {
-      style: {
-        width: '100%',
-      },
-    }, [
-      this.headerSubview(),
-      this.primarySubview(),
-    ])
-  )
-}
-
-BuyButtonSubview.prototype.headerSubview = function () {
-  const props = this.props
-  const isLoading = props.isSubLoading
-  return (
-
-    h('.flex-column', {
-      style: {
-        alignItems: 'center',
-      },
-    }, [
-
-      // header bar (back button, label)
-      h('.flex-row', {
-        style: {
-          alignItems: 'center',
-          justifyContent: 'center',
-        },
-      }, [
-        h('i.fa.fa-arrow-left.fa-lg.cursor-pointer.color-orange', {
-          onClick: this.backButtonContext.bind(this),
-          style: {
-            position: 'absolute',
-            left: '10px',
-          },
-        }),
-        h('h2.text-transform-uppercase.flex-center', {
-          style: {
-            width: '100vw',
-            background: 'rgb(235, 235, 235)',
-            color: 'rgb(174, 174, 174)',
-            paddingTop: '4px',
-            paddingBottom: '4px',
-          },
-        }, this.context.t('depositEth')),
-      ]),
-
-      // loading indication
-      h('div', {
-        style: {
-          position: 'absolute',
-          top: '57vh',
-          left: '49vw',
-        },
-      }, [
-        isLoading && h(Loading),
-      ]),
-
-      // account panel
-      h('div', {
-        style: {
-          width: '80%',
-        },
-      }, [
-        h(AccountPanel, {
-          showFullAddress: true,
-          identity: props.identity,
-          account: props.account,
-        }),
-      ]),
-
-      h('.flex-row', {
-        style: {
-          alignItems: 'center',
-          justifyContent: 'center',
-        },
-      }, [
-        h('h3.text-transform-uppercase.flex-center', {
-          style: {
-            paddingLeft: '15px',
-            width: '100vw',
-            background: 'rgb(235, 235, 235)',
-            color: 'rgb(174, 174, 174)',
-            paddingTop: '4px',
-            paddingBottom: '4px',
-          },
-        }, this.context.t('selectService')),
-      ]),
-
-    ])
-
-  )
-}
-
-
-BuyButtonSubview.prototype.primarySubview = function () {
-  const props = this.props
-  const network = props.network
-
-  switch (network) {
-    case 'loading':
-      return
-
-    case '1':
-      return this.mainnetSubview()
-
-    // Ropsten, Rinkeby, Kovan
-    case '3':
-    case '4':
-    case '42':
-      const networkName = getNetworkDisplayName(network)
-      const label = `${networkName} ${this.context.t('testFaucet')}`
-      return (
-        h('div.flex-column', {
-          style: {
-            alignItems: 'center',
-            margin: '20px 50px',
-          },
-        }, [
-          h('button.text-transform-uppercase', {
-            onClick: () => this.props.dispatch(actions.buyEth({ network })),
-            style: {
-              marginTop: '15px',
-            },
-          }, label),
-          // Kovan only: Dharma loans beta
-          network === '42' ? (
-            h('button.text-transform-uppercase', {
-              onClick: () => this.navigateTo('https://borrow.dharma.io/'),
-              style: {
-                marginTop: '15px',
-              },
-            }, this.context.t('borrowDharma'))
-          ) : null,
-      ])
-    )
-
-    default:
-      return (
-        h('h2.error', this.context.t('unknownNetworkId'))
-      )
-
-  }
-}
-
-BuyButtonSubview.prototype.mainnetSubview = function () {
-  const props = this.props
-
-  return (
-
-    h('.flex-column', {
-      style: {
-        alignItems: 'center',
-      },
-    }, [
-
-      h('.flex-row.selected-exchange', {
-        style: {
-          position: 'relative',
-          right: '35px',
-          marginTop: '20px',
-          marginBottom: '20px',
-        },
-      }, [
-        h(RadioList, {
-          defaultFocus: props.buyView.subview,
-          labels: [
-            'Coinbase',
-            'ShapeShift',
-          ],
-          subtext: {
-            'Coinbase': `${this.context.t('crypto')}/${this.context.t('fiat')} (${this.context.t('usaOnly')})`,
-            'ShapeShift': this.context.t('crypto'),
-          },
-          onClick: this.radioHandler.bind(this),
-        }),
-      ]),
-
-      h('h3.text-transform-uppercase', {
-        style: {
-          paddingLeft: '15px',
-          fontFamily: 'Montserrat Light',
-          width: '100vw',
-          background: 'rgb(235, 235, 235)',
-          color: 'rgb(174, 174, 174)',
-          paddingTop: '4px',
-          paddingBottom: '4px',
-        },
-      }, props.buyView.subview),
-
-      this.formVersionSubview(),
-    ])
-
-  )
-}
-
-BuyButtonSubview.prototype.formVersionSubview = function () {
-  const network = this.props.network
-  if (network === '1') {
-    if (this.props.buyView.formView.coinbase) {
-      return h(CoinbaseForm, this.props)
-    } else if (this.props.buyView.formView.shapeshift) {
-      return h(ShapeshiftForm, this.props)
-    }
-  }
-}
-
-BuyButtonSubview.prototype.navigateTo = function (url) {
-  global.platform.openWindow({ url })
-}
-
-BuyButtonSubview.prototype.backButtonContext = function () {
-  if (this.props.context === 'confTx') {
-    this.props.dispatch(actions.showConfTxPage({transForward: false}))
-  } else {
-    this.props.dispatch(actions.goHome())
-  }
-}
-
-BuyButtonSubview.prototype.radioHandler = function (event) {
-  switch (event.target.title) {
-    case 'Coinbase':
-      return this.props.dispatch(actions.coinBaseSubview())
-    case 'ShapeShift':
-      return this.props.dispatch(actions.shapeShiftSubview(this.props.provider.type))
-  }
-}
--- a/ui/app/components/pages/home.js
+++ b/ui/app/components/pages/home.js
@ -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)
--- a/ui/app/components/pages/home/home.component.js
+++ 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 <Redirect to={{ pathname: NOTICE_ROUTE }} />
+    }
+
+    // seed words
+    if (seedWords) {
+      return <Redirect to={{ pathname: INITIALIZE_BACKUP_PHRASE_ROUTE }}/>
+    }
+
+    if (forgottenPassword) {
+      return <Redirect to={{ pathname: RESTORE_VAULT_ROUTE }} />
+    }
+
+    return (
+      <div className="main-container">
+        <div className="account-and-transaction-details">
+          <WalletView responsiveDisplayClassname="lap-visible" />
+          <TxView />
+        </div>
+      </div>
+    )
+  }
+}
--- a/ui/app/components/pages/home/home.container.js
+++ 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)
--- a/ui/app/components/pages/home/index.js
+++ b/ui/app/components/pages/home/index.js
@ -0,0 +1 @@
+export { default } from './home.container'
--- a/ui/app/components/wallet-view.js
+++ b/ui/app/components/wallet-view.js
@ -26,6 +26,10 @@ WalletView.contextTypes = {
  t: PropTypes.func,
 }

+WalletView.defaultProps = {
+  responsiveDisplayClassname: '',
+}
+
 function mapStateToProps (state) {

  return {
@ -131,8 +135,9 @@ WalletView.prototype.render = function () {
    }
  }

-  return h('div.wallet-view.flex-column' + (responsiveDisplayClassname || ''), {
+  return h('div.wallet-view.flex-column', {
    style: {},
+    className: responsiveDisplayClassname,
  }, [

    // TODO: Separate component: wallet account details
--- a/ui/app/main-container.js
+++ b/ui/app/main-container.js
@ -1,49 +0,0 @@
-const Component = require('react').Component
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const AccountAndTransactionDetails = require('./account-and-transaction-details')
-const Settings = require('./components/pages/settings')
-const log = require('loglevel')
-
-import UnlockScreen from './components/pages/unlock-page'
-
-module.exports = MainContainer
-
-inherits(MainContainer, Component)
-function MainContainer () {
-  Component.call(this)
-}
-
-MainContainer.prototype.render = function () {
-  // 3. summarize:
-  //  switch statement goes inside MainContainer,
-  //  or a method in renderPrimary
-  //    - pass resulting h() to MainContainer
-  //  - error checking in separate func
-  //  - router in separate func
-  const contents = {
-    component: AccountAndTransactionDetails,
-    key: 'account-detail',
-    style: {},
-  }
-
-  if (this.props.isUnlocked === false) {
-    switch (this.props.currentViewName) {
-      case 'config':
-        log.debug('rendering config screen from unlock screen.')
-        return h(Settings, {key: 'config'})
-      default:
-        log.debug('rendering locked screen')
-        return h('.unlock-screen-container', {}, h(UnlockScreen, { key: 'locked' }))
-    }
-  }
-
-  return h('div.main-container', {
-    style: contents.style,
-  }, [
-    h(contents.component, {
-      key: contents.key,
-    }, []),
-  ])
-}
-
--- a/ui/app/new-keychain.js
+++ b/ui/app/new-keychain.js
@ -1,29 +0,0 @@
-const inherits = require('util').inherits
-const Component = require('react').Component
-const h = require('react-hyperscript')
-const connect = require('react-redux').connect
-
-module.exports = connect(mapStateToProps)(NewKeychain)
-
-function mapStateToProps (state) {
-  return {}
-}
-
-inherits(NewKeychain, Component)
-function NewKeychain () {
-  Component.call(this)
-}
-
-NewKeychain.prototype.render = function () {
-  // const props = this.props
-
-  return (
-    h('div', {
-      style: {
-        background: 'blue',
-      },
-    }, [
-      h('h1', `Here's a list!!!!`),
-    ])
-  )
-}