1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
metamask-extension/ui/app/app.js

565 lines
16 KiB
JavaScript
Raw Normal View History

const inherits = require('util').inherits
const Component = require('react').Component
const connect = require('react-redux').connect
const h = require('react-hyperscript')
const actions = require('./actions')
const ReactCSSTransitionGroup = require('react-addons-css-transition-group')
// init
const InitializeMenuScreen = require('./first-time/init-menu')
2016-10-20 20:33:18 +02:00
const NewKeyChainScreen = require('./new-keychain')
// unlock
const UnlockScreen = require('./unlock')
// accounts
const AccountsScreen = require('./accounts')
const AccountDetailScreen = require('./account-detail')
const SendTransactionScreen = require('./send')
const ConfirmTxScreen = require('./conf-tx')
// notice
2016-12-21 00:54:59 +01:00
const NoticeScreen = require('./components/notice')
2016-12-22 23:09:10 +01:00
const generateLostAccountsNotice = require('../lib/lost-accounts-notice')
// other views
const ConfigScreen = require('./config')
const Import = require('./accounts/import')
const InfoScreen = require('./info')
const LoadingIndicator = require('./components/loading')
2016-05-18 21:30:03 +02:00
const SandwichExpando = require('sandwich-expando')
const MenuDroppo = require('menu-droppo')
2016-05-18 23:36:35 +02:00
const DropMenuItem = require('./components/drop-menu-item')
const NetworkIndicator = require('./components/network')
const Tooltip = require('./components/tooltip')
const BuyView = require('./components/buy-button-subview')
2016-08-18 19:40:35 +02:00
const QrView = require('./components/qr-code')
const HDCreateVaultComplete = require('./keychains/hd/create-vault-complete')
const HDRestoreVaultScreen = require('./keychains/hd/restore-vault')
2016-11-02 06:19:04 +01:00
const RevealSeedConfirmation = require('./keychains/hd/recover-seed/confirmation')
module.exports = connect(mapStateToProps)(App)
inherits(App, Component)
2016-06-21 22:18:32 +02:00
function App () { Component.call(this) }
2016-06-21 22:18:32 +02:00
function mapStateToProps (state) {
return {
// state from plugin
isLoading: state.appState.isLoading,
loadingMessage: state.appState.loadingMessage,
noActiveNotices: state.metamask.noActiveNotices,
isInitialized: state.metamask.isInitialized,
isUnlocked: state.metamask.isUnlocked,
currentView: state.appState.currentView,
activeAddress: state.appState.activeAddress,
transForward: state.appState.transForward,
seedWords: state.metamask.seedWords,
unapprovedTxs: state.metamask.unapprovedTxs,
unapprovedMsgs: state.metamask.unapprovedMsgs,
2016-05-18 21:30:03 +02:00
menuOpen: state.appState.menuOpen,
network: state.metamask.network,
2016-06-29 03:06:10 +02:00
provider: state.metamask.provider,
forgottenPassword: state.appState.forgottenPassword,
lastUnreadNotice: state.metamask.lastUnreadNotice,
lostAccounts: state.metamask.lostAccounts,
frequentRpcList: state.metamask.frequentRpcList || [],
}
}
2016-06-21 22:18:32 +02:00
App.prototype.render = function () {
var props = this.props
const { isLoading, loadingMessage, transForward } = props
log.debug('Main ui render function')
return (
h('.flex-column.flex-grow.full-height', {
style: {
// Windows was showing a vertical scroll bar:
overflow: 'hidden',
2016-07-01 08:50:20 +02:00
position: 'relative',
2016-06-21 22:18:32 +02:00
},
2016-05-14 03:07:47 +02:00
}, [
h(LoadingIndicator, { isLoading, loadingMessage }),
2016-05-13 23:56:29 +02:00
// app bar
2016-05-14 03:07:47 +02:00
this.renderAppBar(),
this.renderNetworkDropdown(),
this.renderDropdown(),
// panel content
h('.app-primary.flex-grow' + (transForward ? '.from-right' : '.from-left'), {
style: {
height: '380px',
width: '360px',
2016-06-21 22:18:32 +02:00
},
}, [
h(ReactCSSTransitionGroup, {
className: 'css-transition-group',
transitionName: 'main',
transitionEnterTimeout: 300,
transitionLeaveTimeout: 300,
}, [
this.renderPrimary(),
]),
]),
])
)
}
2016-06-21 22:18:32 +02:00
App.prototype.renderAppBar = function () {
if (window.METAMASK_UI_TYPE === 'notification') {
return null
}
const props = this.props
const state = this.state || {}
const isNetworkMenuOpen = state.isNetworkMenuOpen || false
2016-05-14 03:07:47 +02:00
return (
2016-05-18 23:36:35 +02:00
h('div', [
2016-05-14 03:07:47 +02:00
2016-05-18 23:36:35 +02:00
h('.app-header.flex-row.flex-space-between', {
style: {
alignItems: 'center',
visibility: props.isUnlocked ? 'visible' : 'none',
background: props.isUnlocked ? 'white' : 'none',
2016-12-16 19:04:57 +01:00
height: '36px',
position: 'relative',
2017-02-16 00:35:56 +01:00
zIndex: 10,
2016-05-18 23:36:35 +02:00
},
2017-02-16 00:35:56 +01:00
}, [
2016-05-18 23:36:35 +02:00
h('div', {
style: {
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
2016-06-21 22:18:32 +02:00
},
}, [
2016-12-16 19:04:57 +01:00
// mini logo
h('img', {
height: 24,
width: 24,
src: '/images/icon-128.png',
}),
h('#network-spacer.flex-center', {
style: {
marginRight: '-72px',
2017-01-05 00:04:51 +01:00
},
}, [
h(NetworkIndicator, {
network: this.props.network,
provider: this.props.provider,
onClick: (event) => {
event.preventDefault()
event.stopPropagation()
this.setState({ isNetworkMenuOpen: !isNetworkMenuOpen })
},
}),
]),
]),
2016-05-18 23:36:35 +02:00
2016-05-19 02:47:30 +02:00
// metamask name
2017-02-16 00:35:56 +01:00
props.isUnlocked && h('h1', {
style: {
2016-12-16 19:04:57 +01:00
position: 'relative',
left: '9px',
},
}, 'MetaMask'),
2017-02-16 00:35:56 +01:00
props.isUnlocked && h('div', {
style: {
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
2016-05-18 23:36:35 +02:00
},
}, [
// small accounts nav
2017-02-16 00:35:56 +01:00
props.isUnlocked && h(Tooltip, { title: 'Switch Accounts' }, [
h('img.cursor-pointer.color-orange', {
src: 'images/switch_acc.svg',
style: {
width: '23.5px',
marginRight: '8px',
},
onClick: (event) => {
event.stopPropagation()
this.props.dispatch(actions.showAccountsPage())
},
}),
]),
// hamburger
2017-02-16 00:35:56 +01:00
props.isUnlocked && h(SandwichExpando, {
width: 16,
barHeight: 2,
padding: 0,
2016-07-11 20:33:12 +02:00
isOpen: state.isMainMenuOpen,
color: 'rgb(247,146,30)',
onClick: (event) => {
event.preventDefault()
event.stopPropagation()
2016-07-11 20:33:12 +02:00
this.setState({ isMainMenuOpen: !state.isMainMenuOpen })
},
}),
]),
2016-05-18 23:36:35 +02:00
]),
])
2016-05-14 03:07:47 +02:00
)
}
2016-06-21 22:18:32 +02:00
App.prototype.renderNetworkDropdown = function () {
const props = this.props
const rpcList = props.frequentRpcList
const state = this.state || {}
const isOpen = state.isNetworkMenuOpen
return h(MenuDroppo, {
isOpen,
2016-06-21 22:18:32 +02:00
onClickOutside: (event) => {
this.setState({ isNetworkMenuOpen: !isOpen })
},
2016-07-07 05:11:49 +02:00
zIndex: 1,
style: {
2016-07-01 08:50:20 +02:00
position: 'absolute',
left: 0,
top: '36px',
},
innerStyle: {
background: 'white',
boxShadow: '1px 1px 2px rgba(0,0,0,0.1)',
},
}, [ // DROP MENU ITEMS
h('style', `
.drop-menu-item:hover { background:rgb(235, 235, 235); }
.drop-menu-item i { margin: 11px; }
`),
h(DropMenuItem, {
label: 'Main Ethereum Network',
2016-06-21 22:18:32 +02:00
closeMenu: () => this.setState({ isNetworkMenuOpen: false }),
action: () => props.dispatch(actions.setProviderType('mainnet')),
icon: h('.menu-icon.diamond'),
activeNetworkRender: props.network,
2016-07-28 19:53:51 +02:00
provider: props.provider,
}),
h(DropMenuItem, {
label: 'Ropsten Test Network',
2016-06-21 22:18:32 +02:00
closeMenu: () => this.setState({ isNetworkMenuOpen: false }),
action: () => props.dispatch(actions.setProviderType('testnet')),
icon: h('.menu-icon.red-dot'),
activeNetworkRender: props.network,
2016-10-25 23:16:04 +02:00
provider: props.provider,
}),
h(DropMenuItem, {
label: 'Kovan Test Network',
closeMenu: () => this.setState({ isNetworkMenuOpen: false}),
action: () => props.dispatch(actions.setProviderType('kovan')),
icon: h('.menu-icon.hollow-diamond'),
activeNetworkRender: props.network,
provider: props.provider,
}),
2017-04-25 22:10:33 +02:00
2017-04-25 23:44:25 +02:00
h(DropMenuItem, {
2017-04-25 22:10:33 +02:00
label: 'Rinkeby Test Network',
closeMenu: () => this.setState({ isNetworkMenuOpen: false}),
action: () => props.dispatch(actions.setProviderType('rinkeby')),
icon: h('.menu-icon.golden-square'),
2017-04-25 22:10:33 +02:00
activeNetworkRender: props.network,
provider: props.provider,
}),
h(DropMenuItem, {
label: 'Localhost 8545',
2016-06-21 22:18:32 +02:00
closeMenu: () => this.setState({ isNetworkMenuOpen: false }),
action: () => props.dispatch(actions.setDefaultRpcTarget(rpcList)),
icon: h('i.fa.fa-question-circle.fa-lg'),
activeNetworkRender: props.provider.rpcTarget,
}),
2016-07-28 19:53:51 +02:00
2016-11-23 01:34:02 +01:00
this.renderCustomOption(props.provider),
this.renderCommonRpc(rpcList, props.provider),
2017-03-14 00:41:25 +01:00
h(DropMenuItem, {
label: 'Custom RPC',
closeMenu: () => this.setState({ isNetworkMenuOpen: false }),
action: () => this.props.dispatch(actions.showConfigPage()),
icon: h('i.fa.fa-question-circle.fa-lg'),
}),
])
}
2016-06-21 22:18:32 +02:00
App.prototype.renderDropdown = function () {
const state = this.state || {}
const isOpen = state.isMainMenuOpen
return h(MenuDroppo, {
isOpen: isOpen,
2016-07-07 05:11:49 +02:00
zIndex: 1,
onClickOutside: (event) => {
this.setState({ isMainMenuOpen: !isOpen })
},
style: {
2016-07-01 08:50:20 +02:00
position: 'absolute',
right: 0,
2016-08-04 04:43:54 +02:00
top: '36px',
},
innerStyle: {
background: 'white',
boxShadow: '1px 1px 2px rgba(0,0,0,0.1)',
},
}, [ // DROP MENU ITEMS
h('style', `
.drop-menu-item:hover { background:rgb(235, 235, 235); }
.drop-menu-item i { margin: 11px; }
`),
h(DropMenuItem, {
label: 'Settings',
closeMenu: () => this.setState({ isMainMenuOpen: !isOpen }),
2016-06-21 22:18:32 +02:00
action: () => this.props.dispatch(actions.showConfigPage()),
icon: h('i.fa.fa-gear.fa-lg'),
}),
h(DropMenuItem, {
label: 'Import Account',
closeMenu: () => this.setState({ isMainMenuOpen: !isOpen }),
action: () => this.props.dispatch(actions.showImportPage()),
icon: h('i.fa.fa-arrow-circle-o-up.fa-lg'),
}),
h(DropMenuItem, {
2016-06-14 21:59:34 +02:00
label: 'Lock',
closeMenu: () => this.setState({ isMainMenuOpen: !isOpen }),
2016-06-21 22:18:32 +02:00
action: () => this.props.dispatch(actions.lockMetamask()),
icon: h('i.fa.fa-lock.fa-lg'),
}),
h(DropMenuItem, {
label: 'Info',
closeMenu: () => this.setState({ isMainMenuOpen: !isOpen }),
2016-06-21 22:18:32 +02:00
action: () => this.props.dispatch(actions.showInfoPage()),
icon: h('i.fa.fa-question.fa-lg'),
}),
])
}
2016-11-01 23:00:28 +01:00
2016-08-26 20:30:07 +02:00
App.prototype.renderBackButton = function (style, justArrow = false) {
var props = this.props
return (
h('.flex-row', {
key: 'leftArrow',
style: style,
onClick: () => props.dispatch(actions.goBackToInitView()),
}, [
h('i.fa.fa-arrow-left.cursor-pointer'),
justArrow ? null : h('div.cursor-pointer', {
style: {
marginLeft: '3px',
},
onClick: () => props.dispatch(actions.goBackToInitView()),
}, 'BACK'),
])
)
}
2016-11-01 23:00:28 +01:00
2016-06-21 22:18:32 +02:00
App.prototype.renderPrimary = function () {
log.debug('rendering primary')
var props = this.props
// notices
2017-02-20 21:59:12 +01:00
if (!props.noActiveNotices) {
2017-02-20 21:59:44 +01:00
log.debug('rendering notice screen for unread notices.')
return h(NoticeScreen, {
notice: props.lastUnreadNotice,
key: 'NoticeScreen',
onConfirm: () => props.dispatch(actions.markNoticeRead(props.lastUnreadNotice)),
})
} else if (props.lostAccounts && props.lostAccounts.length > 0) {
2017-02-20 21:59:44 +01:00
log.debug('rendering notice screen for lost accounts view.')
return h(NoticeScreen, {
notice: generateLostAccountsNotice(props.lostAccounts),
key: 'LostAccountsNotice',
onConfirm: () => props.dispatch(actions.markAccountsFound()),
})
2016-06-17 01:55:32 +02:00
}
if (props.seedWords) {
2017-02-20 21:59:44 +01:00
log.debug('rendering seed words')
return h(HDCreateVaultComplete, {key: 'HDCreateVaultComplete'})
}
// show initialize screen
if (!props.isInitialized || props.forgottenPassword) {
// show current view
2017-02-20 21:59:44 +01:00
log.debug('rendering an initialize screen')
switch (props.currentView.name) {
case 'restoreVault':
2017-02-20 21:59:44 +01:00
log.debug('rendering restore vault screen')
return h(HDRestoreVaultScreen, {key: 'HDRestoreVaultScreen'})
2016-05-12 07:21:10 +02:00
default:
2017-02-20 21:59:44 +01:00
log.debug('rendering menu screen')
return h(InitializeMenuScreen, {key: 'menuScreenInit'})
}
}
// show unlock screen
if (!props.isUnlocked) {
2016-11-01 23:00:28 +01:00
switch (props.currentView.name) {
case 'restoreVault':
2017-02-20 21:59:44 +01:00
log.debug('rendering restore vault screen')
2016-11-01 23:00:28 +01:00
return h(HDRestoreVaultScreen, {key: 'HDRestoreVaultScreen'})
2017-03-14 00:43:34 +01:00
case 'config':
log.debug('rendering config screen from unlock screen.')
return h(ConfigScreen, {key: 'config'})
2016-11-01 23:00:28 +01:00
default:
2017-02-20 21:59:44 +01:00
log.debug('rendering locked screen')
2016-11-01 23:00:28 +01:00
return h(UnlockScreen, {key: 'locked'})
}
}
// show current view
switch (props.currentView.name) {
case 'accounts':
2017-02-20 21:59:44 +01:00
log.debug('rendering accounts screen')
return h(AccountsScreen, {key: 'accounts'})
case 'accountDetail':
2017-02-20 21:59:44 +01:00
log.debug('rendering account detail screen')
return h(AccountDetailScreen, {key: 'account-detail'})
case 'sendTransaction':
2017-02-20 21:59:44 +01:00
log.debug('rendering send tx screen')
return h(SendTransactionScreen, {key: 'send-transaction'})
2016-10-15 19:48:12 +02:00
case 'newKeychain':
2017-02-20 21:59:44 +01:00
log.debug('rendering new keychain screen')
2016-10-15 19:48:12 +02:00
return h(NewKeyChainScreen, {key: 'new-keychain'})
case 'confTx':
2017-02-20 21:59:44 +01:00
log.debug('rendering confirm tx screen')
return h(ConfirmTxScreen, {key: 'confirm-tx'})
case 'config':
2017-02-20 21:59:44 +01:00
log.debug('rendering config screen')
return h(ConfigScreen, {key: 'config'})
case 'import-menu':
2017-02-20 21:59:44 +01:00
log.debug('rendering import screen')
return h(Import, {key: 'import-menu'})
case 'reveal-seed-conf':
2017-02-20 21:59:44 +01:00
log.debug('rendering reveal seed confirmation screen')
return h(RevealSeedConfirmation, {key: 'reveal-seed-conf'})
case 'info':
2017-02-20 21:59:44 +01:00
log.debug('rendering info screen')
return h(InfoScreen, {key: 'info'})
case 'buyEth':
2017-02-20 21:59:44 +01:00
log.debug('rendering buy ether screen')
return h(BuyView, {key: 'buyEthView'})
2016-08-18 19:40:35 +02:00
case 'qr':
2017-02-20 21:59:44 +01:00
log.debug('rendering show qr screen')
2016-08-18 19:40:35 +02:00
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: () => props.dispatch(actions.backToAccountDetail(props.activeAddress)),
style: {
marginLeft: '10px',
marginTop: '50px',
},
}),
h('div', {
style: {
position: 'absolute',
left: '44px',
width: '285px',
},
}, [
h(QrView, {key: 'qr'}),
]),
])
default:
2017-02-20 21:59:44 +01:00
log.debug('rendering default, account detail screen')
return h(AccountDetailScreen, {key: 'account-detail'})
2016-06-21 22:18:32 +02:00
}
}
2016-06-21 22:18:32 +02:00
App.prototype.toggleMetamaskActive = function () {
2016-05-14 03:07:47 +02:00
if (!this.props.isUnlocked) {
// currently inactive: redirect to password box
var passwordBox = document.querySelector('input[type=password]')
if (!passwordBox) return
passwordBox.focus()
} else {
// currently active: deactivate
this.props.dispatch(actions.lockMetamask(false))
}
}
2016-06-29 02:57:53 +02:00
2016-11-23 01:34:02 +01:00
App.prototype.renderCustomOption = function (provider) {
const { rpcTarget, type } = provider
if (type !== 'rpc') return null
// Concatenate long URLs
let label = rpcTarget
if (rpcTarget.length > 31) {
label = label.substr(0, 34) + '...'
}
2016-06-29 03:06:10 +02:00
switch (rpcTarget) {
2016-08-29 21:36:47 +02:00
case 'http://localhost:8545':
2016-10-22 00:19:16 +02:00
return null
2016-06-29 02:57:53 +02:00
default:
return h(DropMenuItem, {
label,
key: rpcTarget,
2016-06-29 02:57:53 +02:00
closeMenu: () => this.setState({ isNetworkMenuOpen: false }),
icon: h('i.fa.fa-question-circle.fa-lg'),
2016-06-30 01:31:27 +02:00
activeNetworkRender: 'custom',
2016-06-29 03:06:10 +02:00
})
2016-06-29 02:57:53 +02:00
}
}
App.prototype.renderCommonRpc = function (rpcList, provider) {
const { rpcTarget } = provider
const props = this.props
return rpcList.map((rpc) => {
if ((rpc === 'http://localhost:8545') || (rpc === rpcTarget)) {
return null
} else {
return h(DropMenuItem, {
label: rpc,
key: rpc,
closeMenu: () => this.setState({ isNetworkMenuOpen: false }),
action: () => props.dispatch(actions.setRpcTarget(rpc)),
icon: h('i.fa.fa-question-circle.fa-lg'),
activeNetworkRender: rpc,
})
}
})
}