Refactor home screen and remove unused files
This commit is contained in:
parent
dae07b32e5
commit
3b408715c7
|
@ -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: {
|
|
||||||
},
|
|
||||||
}, [
|
|
||||||
]),
|
|
||||||
])
|
|
||||||
}
|
|
||||||
|
|
|
@ -18,7 +18,7 @@ const ConfirmTransaction = require('./components/pages/confirm-transaction')
|
||||||
const WalletView = require('./components/wallet-view')
|
const WalletView = require('./components/wallet-view')
|
||||||
|
|
||||||
// other views
|
// other views
|
||||||
const Home = require('./components/pages/home')
|
import Home from './components/pages/home'
|
||||||
const Authenticated = require('./components/pages/authenticated')
|
const Authenticated = require('./components/pages/authenticated')
|
||||||
const Initialized = require('./components/pages/initialized')
|
const Initialized = require('./components/pages/initialized')
|
||||||
const Settings = require('./components/pages/settings')
|
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
|
// A second instance of Walletview is used for non-mobile viewports
|
||||||
this.props.sidebarOpen ? h(WalletView, {
|
this.props.sidebarOpen ? h(WalletView, {
|
||||||
responsiveDisplayClassname: '.sidebar',
|
responsiveDisplayClassname: 'sidebar',
|
||||||
style: {},
|
style: {},
|
||||||
}) : undefined,
|
}) : undefined,
|
||||||
|
|
||||||
|
|
|
@ -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))
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -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)
|
|
|
@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
|
@ -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)
|
|
@ -0,0 +1 @@
|
||||||
|
export { default } from './home.container'
|
|
@ -26,6 +26,10 @@ WalletView.contextTypes = {
|
||||||
t: PropTypes.func,
|
t: PropTypes.func,
|
||||||
}
|
}
|
||||||
|
|
||||||
|
WalletView.defaultProps = {
|
||||||
|
responsiveDisplayClassname: '',
|
||||||
|
}
|
||||||
|
|
||||||
function mapStateToProps (state) {
|
function mapStateToProps (state) {
|
||||||
|
|
||||||
return {
|
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: {},
|
style: {},
|
||||||
|
className: responsiveDisplayClassname,
|
||||||
}, [
|
}, [
|
||||||
|
|
||||||
// TODO: Separate component: wallet account details
|
// TODO: Separate component: wallet account details
|
||||||
|
|
|
@ -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,
|
|
||||||
}, []),
|
|
||||||
])
|
|
||||||
}
|
|
||||||
|
|
|
@ -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!!!!`),
|
|
||||||
])
|
|
||||||
)
|
|
||||||
}
|
|
Loading…
Reference in New Issue