diff options
Diffstat (limited to 'ui')
-rw-r--r-- | ui/app/account-detail.js | 1 | ||||
-rw-r--r-- | ui/app/accounts/index.js | 14 | ||||
-rw-r--r-- | ui/app/actions.js | 208 | ||||
-rw-r--r-- | ui/app/app.js | 87 | ||||
-rw-r--r-- | ui/app/components/identicon.js | 30 | ||||
-rw-r--r-- | ui/app/components/network.js | 3 | ||||
-rw-r--r-- | ui/app/eth-store-warning.js | 89 | ||||
-rw-r--r-- | ui/app/first-time/create-vault.js | 129 | ||||
-rw-r--r-- | ui/app/first-time/init-menu.js | 131 | ||||
-rw-r--r-- | ui/app/keychains/hd/create-vault-complete.js (renamed from ui/app/first-time/create-vault-complete.js) | 3 | ||||
-rw-r--r-- | ui/app/keychains/hd/recover-seed/confirmation.js (renamed from ui/app/recover-seed/confirmation.js) | 4 | ||||
-rw-r--r-- | ui/app/keychains/hd/restore-vault.js (renamed from ui/app/first-time/restore-vault.js) | 16 | ||||
-rw-r--r-- | ui/app/new-keychain.js | 29 | ||||
-rw-r--r-- | ui/app/reducers/app.js | 17 | ||||
-rw-r--r-- | ui/app/reducers/metamask.js | 6 | ||||
-rw-r--r-- | ui/app/unlock.js | 16 | ||||
-rw-r--r-- | ui/index.js | 2 |
17 files changed, 329 insertions, 456 deletions
diff --git a/ui/app/account-detail.js b/ui/app/account-detail.js index 01c7e8781..c41ba61fd 100644 --- a/ui/app/account-detail.js +++ b/ui/app/account-detail.js @@ -30,7 +30,6 @@ function mapStateToProps (state) { network: state.metamask.network, unconfTxs: valuesFor(state.metamask.unconfTxs), unconfMsgs: valuesFor(state.metamask.unconfMsgs), - isEthWarningConfirmed: state.metamask.isEthConfirmed, shapeShiftTxList: state.metamask.shapeShiftTxList, } } diff --git a/ui/app/accounts/index.js b/ui/app/accounts/index.js index 7551c498e..2e8321a77 100644 --- a/ui/app/accounts/index.js +++ b/ui/app/accounts/index.js @@ -34,11 +34,7 @@ AccountsScreen.prototype.render = function () { var state = this.props var identityList = valuesFor(state.identities) var unconfTxList = valuesFor(state.unconfTxs) - var actions = { - onSelect: this.onSelect.bind(this), - onShowDetail: this.onShowDetail.bind(this), - goHome: this.goHome.bind(this), - } + return ( h('.accounts-section.flex-grow', [ @@ -46,7 +42,7 @@ AccountsScreen.prototype.render = function () { // subtitle and nav h('.section-title.flex-center', [ h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', { - onClick: actions.goHome, + onClick: this.goHome.bind(this), }), h('h2.page-subtitle', 'Select Account'), ]), @@ -87,7 +83,7 @@ AccountsScreen.prototype.render = function () { h('div.footer.hover-white.pointer', { key: 'reveal-account-bar', onClick: () => { - this.onRevealAccount() + this.addNewAccount() }, style: { display: 'flex', @@ -146,8 +142,8 @@ AccountsScreen.prototype.onShowDetail = function (address, event) { this.props.dispatch(actions.showAccountDetail(address)) } -AccountsScreen.prototype.onRevealAccount = function () { - this.props.dispatch(actions.revealAccount()) +AccountsScreen.prototype.addNewAccount = function () { + this.props.dispatch(actions.addNewAccount(0)) } AccountsScreen.prototype.goHome = function () { diff --git a/ui/app/actions.js b/ui/app/actions.js index 1f0d8fc78..070ba2da0 100644 --- a/ui/app/actions.js +++ b/ui/app/actions.js @@ -1,4 +1,6 @@ var actions = { + _setBackgroundConnection: _setBackgroundConnection, + GO_HOME: 'GO_HOME', goHome: goHome, // menu state @@ -16,17 +18,16 @@ var actions = { SHOW_INIT_MENU: 'SHOW_INIT_MENU', SHOW_NEW_VAULT_SEED: 'SHOW_NEW_VAULT_SEED', SHOW_INFO_PAGE: 'SHOW_INFO_PAGE', - RECOVER_FROM_SEED: 'RECOVER_FROM_SEED', - CLEAR_SEED_WORD_CACHE: 'CLEAR_SEED_WORD_CACHE', - clearSeedWordCache: clearSeedWordCache, - recoverFromSeed: recoverFromSeed, unlockMetamask: unlockMetamask, unlockFailed: unlockFailed, showCreateVault: showCreateVault, showRestoreVault: showRestoreVault, showInitializeMenu: showInitializeMenu, - createNewVault: createNewVault, + createNewVaultAndKeychain: createNewVaultAndKeychain, + createNewVaultAndRestore: createNewVaultAndRestore, createNewVaultInProgress: createNewVaultInProgress, + addNewKeyring, + addNewAccount, showNewVaultSeed: showNewVaultSeed, showInfoPage: showInfoPage, // seed recovery actions @@ -53,8 +54,6 @@ var actions = { SHOW_ACCOUNTS_PAGE: 'SHOW_ACCOUNTS_PAGE', SHOW_CONF_TX_PAGE: 'SHOW_CONF_TX_PAGE', SHOW_CONF_MSG_PAGE: 'SHOW_CONF_MSG_PAGE', - REVEAL_ACCOUNT: 'REVEAL_ACCOUNT', - revealAccount: revealAccount, SET_CURRENT_FIAT: 'SET_CURRENT_FIAT', setCurrentFiat: setCurrentFiat, // account detail screen @@ -68,10 +67,6 @@ var actions = { showPrivateKey: showPrivateKey, SAVE_ACCOUNT_LABEL: 'SAVE_ACCOUNT_LABEL', saveAccountLabel: saveAccountLabel, - AGREE_TO_ETH_WARNING: 'AGREE_TO_ETH_WARNING', - agreeToEthWarning: agreeToEthWarning, - SHOW_ETH_WARNING: 'SHOW_ETH_WARNING', - showEthWarning: showEthWarning, // tx conf screen COMPLETED_TX: 'COMPLETED_TX', TRANSACTION_ERROR: 'TRANSACTION_ERROR', @@ -90,12 +85,12 @@ var actions = { viewPendingTx: viewPendingTx, VIEW_PENDING_TX: 'VIEW_PENDING_TX', // app messages + confirmSeedWords: confirmSeedWords, showAccountDetail: showAccountDetail, BACK_TO_ACCOUNT_DETAIL: 'BACK_TO_ACCOUNT_DETAIL', backToAccountDetail: backToAccountDetail, showAccountsPage: showAccountsPage, showConfTxPage: showConfTxPage, - confirmSeedWords: confirmSeedWords, // config screen SHOW_CONFIG_PAGE: 'SHOW_CONFIG_PAGE', SET_RPC_TARGET: 'SET_RPC_TARGET', @@ -105,8 +100,6 @@ var actions = { showConfigPage: showConfigPage, setRpcTarget: setRpcTarget, setProviderType: setProviderType, - // hacky - need a way to get a reference to account manager - _setAccountManager: _setAccountManager, // loading overlay SHOW_LOADING: 'SHOW_LOADING_INDICATION', HIDE_LOADING: 'HIDE_LOADING_INDICATION', @@ -143,13 +136,18 @@ var actions = { RECOVERY_IN_PROGRESS: 'RECOVERY_IN_PROGRESS', BACK_TO_UNLOCK_VIEW: 'BACK_TO_UNLOCK_VIEW', backToUnlockView: backToUnlockView, + // SHOWING KEYCHAIN + SHOW_NEW_KEYCHAIN: 'SHOW_NEW_KEYCHAIN', + showNewKeychain: showNewKeychain, + + } module.exports = actions -var _accountManager = null -function _setAccountManager (accountManager) { - _accountManager = accountManager +var background = null +function _setBackgroundConnection(backgroundConnection) { + background = backgroundConnection } function goHome () { @@ -164,25 +162,57 @@ function tryUnlockMetamask (password) { return (dispatch) => { dispatch(actions.showLoadingIndication()) dispatch(actions.unlockInProgress()) - _accountManager.submitPassword(password, (err, selectedAccount) => { + background.submitPassword(password, (err, newState) => { dispatch(actions.hideLoadingIndication()) if (err) { - dispatch(actions.unlockFailed()) + dispatch(actions.unlockFailed(err.message)) } else { + dispatch(this.updateMetamaskState(newState)) + let selectedAccount + try { + selectedAccount = newState.metamask.selectedAccount + } catch (e) {} dispatch(actions.unlockMetamask(selectedAccount)) } }) } } -function createNewVault (password, entropy) { +function confirmSeedWords () { return (dispatch) => { - dispatch(actions.createNewVaultInProgress()) - _accountManager.createNewVault(password, entropy, (err, result) => { + dispatch(actions.showLoadingIndication()) + background.clearSeedWordCache((err, account) => { + dispatch(actions.hideLoadingIndication()) if (err) { return dispatch(actions.showWarning(err.message)) } - dispatch(actions.showNewVaultSeed(result)) + + console.log('Seed word cache cleared. ' + account) + dispatch(actions.showAccountDetail(account)) + }) + } +} + +function createNewVaultAndRestore (password, seed) { + return (dispatch) => { + dispatch(actions.showLoadingIndication()) + background.createNewVaultAndRestore(password, seed, (err, newState) => { + dispatch(actions.hideLoadingIndication()) + if (err) return dispatch(actions.displayWarning(err.message)) + dispatch(this.updateMetamaskState(newState)) + }) + } +} + +function createNewVaultAndKeychain (password, entropy) { + return (dispatch) => { + background.createNewVaultAndKeychain(password, entropy, (err, newState) => { + if (err) { + return dispatch(actions.showWarning(err.message)) + } + + dispatch(this.updateMetamaskState(newState)) + dispatch(this.showNewVaultSeed()) }) } } @@ -196,27 +226,39 @@ function revealSeedConfirmation () { function requestRevealSeed (password) { return (dispatch) => { dispatch(actions.showLoadingIndication()) - _accountManager.tryPassword(password, (err, seed) => { + background.submitPassword(password, (err, newState) => { dispatch(actions.hideLoadingIndication()) if (err) return dispatch(actions.displayWarning(err.message)) - _accountManager.recoverSeed((err, seed) => { - if (err) return dispatch(actions.displayWarning(err.message)) - dispatch(actions.showNewVaultSeed(seed)) - }) + background.placeSeedWords() + dispatch(actions.showNewVaultSeed()) }) } } -function recoverFromSeed (password, seed) { + +function addNewKeyring (type, opts) { return (dispatch) => { - // dispatch(actions.createNewVaultInProgress()) dispatch(actions.showLoadingIndication()) - _accountManager.recoverFromSeed(password, seed, (err, metamaskState) => { - dispatch(actions.hideLoadingIndication()) - if (err) return dispatch(actions.displayWarning(err.message)) + background.addNewKeyring(type, opts, (err, newState) => { + dispatch(this.hideLoadingIndication()) + if (err) { + return dispatch(actions.showWarning(err)) + } + dispatch(this.updateMetamaskState(newState)) + dispatch(this.showAccountsPage()) + }) + } +} - var account = Object.keys(metamaskState.identities)[0] - dispatch(actions.unlockMetamask(account)) +function addNewAccount (ringNumber = 0) { + return (dispatch) => { + dispatch(actions.showLoadingIndication()) + background.addNewAccount(ringNumber, (err, newState) => { + dispatch(this.hideLoadingIndication()) + if (err) { + return dispatch(actions.showWarning(err)) + } + dispatch(this.updateMetamaskState(newState)) }) } } @@ -229,27 +271,14 @@ function showInfoPage () { function setSelectedAddress (address) { return (dispatch) => { - _accountManager.setSelectedAddress(address) - } -} - -function revealAccount () { - return (dispatch) => { - dispatch(actions.showLoadingIndication()) - _accountManager.revealAccount((err) => { - dispatch(actions.hideLoadingIndication()) - if (err) return dispatch(actions.displayWarning(err.message)) - dispatch({ - type: actions.REVEAL_ACCOUNT, - }) - }) + background.setSelectedAddress(address) } } function setCurrentFiat (fiat) { return (dispatch) => { dispatch(this.showLoadingIndication()) - _accountManager.setCurrentFiat(fiat, (data, err) => { + background.setCurrentFiat(fiat, (data, err) => { dispatch(this.hideLoadingIndication()) dispatch({ type: this.SET_CURRENT_FIAT, @@ -267,7 +296,7 @@ function signMsg (msgData) { return (dispatch) => { dispatch(actions.showLoadingIndication()) - _accountManager.signMessage(msgData, (err) => { + background.signMessage(msgData, (err) => { dispatch(actions.hideLoadingIndication()) if (err) return dispatch(actions.displayWarning(err.message)) @@ -278,7 +307,7 @@ function signMsg (msgData) { function signTx (txData) { return (dispatch) => { - _accountManager.setGasMultiplier(txData.gasMultiplier, (err) => { + background.setGasMultiplier(txData.gasMultiplier, (err) => { if (err) return dispatch(actions.displayWarning(err.message)) web3.eth.sendTransaction(txData, (err, data) => { dispatch(actions.hideLoadingIndication()) @@ -293,7 +322,7 @@ function signTx (txData) { function sendTx (txData) { return (dispatch) => { - _accountManager.approveTransaction(txData.id, (err) => { + background.approveTransaction(txData.id, (err) => { if (err) { alert(err.message) dispatch(actions.txError(err)) @@ -319,12 +348,12 @@ function txError (err) { } function cancelMsg (msgData) { - _accountManager.cancelMessage(msgData.id) + background.cancelMessage(msgData.id) return actions.completedTx(msgData.id) } function cancelTx (txData) { - _accountManager.cancelTransaction(txData.id) + background.cancelTransaction(txData.id) return actions.completedTx(txData.id) } @@ -353,7 +382,7 @@ function showInitializeMenu () { function agreeToDisclaimer () { return (dispatch) => { dispatch(this.showLoadingIndication()) - _accountManager.agreeToDisclaimer((err) => { + background.agreeToDisclaimer((err) => { if (err) { return dispatch(actions.showWarning(err.message)) } @@ -385,6 +414,12 @@ function backToUnlockView () { } } +function showNewKeychain () { + return { + type: actions.SHOW_NEW_KEYCHAIN, + } +} + // // unlock screen // @@ -395,9 +430,10 @@ function unlockInProgress () { } } -function unlockFailed () { +function unlockFailed (message) { return { type: actions.UNLOCK_FAILED, + value: message, } } @@ -417,7 +453,7 @@ function updateMetamaskState (newState) { function lockMetamask () { return (dispatch) => { - _accountManager.setLocked((err) => { + background.setLocked((err) => { dispatch(actions.hideLoadingIndication()) if (err) { return dispatch(actions.showWarning(err.message)) @@ -433,7 +469,7 @@ function lockMetamask () { function showAccountDetail (address) { return (dispatch) => { dispatch(actions.showLoadingIndication()) - _accountManager.setSelectedAddress(address, (err, address) => { + background.setSelectedAddress(address, (err, address) => { dispatch(actions.hideLoadingIndication()) if (err) { return dispatch(actions.showWarning(err.message)) @@ -453,27 +489,6 @@ function backToAccountDetail (address) { value: address, } } -function clearSeedWordCache (account) { - return { - type: actions.CLEAR_SEED_WORD_CACHE, - value: account, - } -} - -function confirmSeedWords () { - return (dispatch) => { - dispatch(actions.showLoadingIndication()) - _accountManager.clearSeedWordCache((err, account) => { - dispatch(actions.hideLoadingIndication()) - if (err) { - return dispatch(actions.showWarning(err.message)) - } - - console.log('Seed word cache cleared. ' + account) - dispatch(actions.showAccountDetail(account)) - }) - } -} function showAccountsPage () { return { @@ -525,7 +540,7 @@ function goBackToInitView () { // function setRpcTarget (newRpc) { - _accountManager.setRpcTarget(newRpc) + background.setRpcTarget(newRpc) return { type: actions.SET_RPC_TARGET, value: newRpc, @@ -533,7 +548,7 @@ function setRpcTarget (newRpc) { } function setProviderType (type) { - _accountManager.setProviderType(type) + background.setProviderType(type) return { type: actions.SET_PROVIDER_TYPE, value: type, @@ -541,7 +556,7 @@ function setProviderType (type) { } function useEtherscanProvider () { - _accountManager.useEtherscanProvider() + background.useEtherscanProvider() return { type: actions.USE_ETHERSCAN_PROVIDER, } @@ -600,7 +615,7 @@ function exportAccount (address) { return function (dispatch) { dispatch(self.showLoadingIndication()) - _accountManager.exportAccount(address, function (err, result) { + background.exportAccount(address, function (err, result) { dispatch(self.hideLoadingIndication()) if (err) { @@ -623,7 +638,7 @@ function showPrivateKey (key) { function saveAccountLabel (account, label) { return (dispatch) => { dispatch(actions.showLoadingIndication()) - _accountManager.saveAccountLabel(account, label, (err) => { + background.saveAccountLabel(account, label, (err) => { dispatch(actions.hideLoadingIndication()) if (err) { return dispatch(actions.showWarning(err.message)) @@ -642,28 +657,9 @@ function showSendPage () { } } -function agreeToEthWarning () { - return (dispatch) => { - _accountManager.agreeToEthWarning((err) => { - if (err) { - return dispatch(actions.showEthWarning(err.message)) - } - dispatch({ - type: actions.AGREE_TO_ETH_WARNING, - }) - }) - } -} - -function showEthWarning () { - return { - type: actions.SHOW_ETH_WARNING, - } -} - function buyEth (address, amount) { return (dispatch) => { - _accountManager.buyEth(address, amount) + background.buyEth(address, amount) dispatch({ type: actions.BUY_ETH, }) @@ -741,7 +737,7 @@ function coinShiftRquest (data, marketData) { if (response.error) return dispatch(actions.showWarning(response.error)) var message = ` Deposit your ${response.depositType} to the address bellow:` - _accountManager.createShapeShiftTx(response.deposit, response.depositType) + background.createShapeShiftTx(response.deposit, response.depositType) dispatch(actions.showQrView(response.deposit, [message].concat(marketData))) }) } diff --git a/ui/app/app.js b/ui/app/app.js index ae6fe7071..a2532c153 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -7,9 +7,7 @@ const ReactCSSTransitionGroup = require('react-addons-css-transition-group') // init const DisclaimerScreen = require('./first-time/disclaimer') const InitializeMenuScreen = require('./first-time/init-menu') -const CreateVaultScreen = require('./first-time/create-vault') -const CreateVaultCompleteScreen = require('./first-time/create-vault-complete') -const RestoreVaultScreen = require('./first-time/restore-vault') +const NewKeyChainScreen = require('./new-keychain') // unlock const UnlockScreen = require('./unlock') // accounts @@ -19,7 +17,6 @@ const SendTransactionScreen = require('./send') const ConfirmTxScreen = require('./conf-tx') // other views const ConfigScreen = require('./config') -const RevealSeedConfirmation = require('./recover-seed/confirmation') const InfoScreen = require('./info') const LoadingIndicator = require('./components/loading') const SandwichExpando = require('sandwich-expando') @@ -27,9 +24,12 @@ const MenuDroppo = require('menu-droppo') const DropMenuItem = require('./components/drop-menu-item') const NetworkIndicator = require('./components/network') const Tooltip = require('./components/tooltip') -const EthStoreWarning = require('./eth-store-warning') const BuyView = require('./components/buy-button-subview') const QrView = require('./components/qr-code') +const HDCreateVaultComplete = require('./keychains/hd/create-vault-complete') +const HDRestoreVaultScreen = require('./keychains/hd/restore-vault') +const RevealSeedConfirmation = require('./keychains/hd/recover-seed/confirmation') + module.exports = connect(mapStateToProps)(App) inherits(App, Component) @@ -40,7 +40,6 @@ function mapStateToProps (state) { // state from plugin isLoading: state.appState.isLoading, isConfirmed: state.metamask.isConfirmed, - isEthConfirmed: state.metamask.isEthConfirmed, isInitialized: state.metamask.isInitialized, isUnlocked: state.metamask.isUnlocked, currentView: state.appState.currentView, @@ -302,6 +301,7 @@ App.prototype.renderDropdown = function () { }), ]) } + App.prototype.renderBackButton = function (style, justArrow = false) { var props = this.props return ( @@ -319,12 +319,13 @@ App.prototype.renderBackButton = function (style, justArrow = false) { }, 'BACK'), ]) ) - } + App.prototype.renderBackToInitButton = function () { var props = this.props var button = null if (!props.isConfirmed) return button + if (!props.isUnlocked) { if (props.currentView.name === 'InitMenu') { button = props.forgottenPassword ? h('.flex-row', { @@ -348,42 +349,6 @@ App.prototype.renderBackToInitButton = function () { }, 'LOGIN'), h('i.fa.fa-arrow-right.cursor-pointer'), ]) : null - } else if (props.isInitialized) { - var style - switch (props.currentView.name) { - case 'createVault': - style = { - position: 'absolute', - top: '41px', - left: '80px', - fontSize: '21px', - fontFamily: 'Montserrat Bold', - color: 'rgb(174, 174, 174)', - } - return this.renderBackButton(style, true) - case 'restoreVault': - style = { - position: 'absolute', - top: '41px', - left: '70px', - fontSize: '21px', - fontFamily: 'Montserrat Bold', - color: 'rgb(174, 174, 174)', - } - return this.renderBackButton(style, true) - default: - style = { - position: 'absolute', - bottom: '10px', - left: '15px', - fontSize: '21px', - fontFamily: 'Montserrat Light', - color: '#7F8082', - width: '71.969px', - alignItems: 'flex-end', - } - return this.renderBackButton(style) - } } } return button @@ -397,38 +362,37 @@ App.prototype.renderPrimary = function () { } if (props.seedWords) { - return h(CreateVaultCompleteScreen, {key: 'createVaultComplete'}) + return h(HDCreateVaultComplete, {key: 'HDCreateVaultComplete'}) } // show initialize screen if (!props.isInitialized || props.forgottenPassword) { + // show current view switch (props.currentView.name) { - case 'createVault': - return h(CreateVaultScreen, {key: 'createVault'}) - case 'restoreVault': - return h(RestoreVaultScreen, {key: 'restoreVault'}) - - case 'createVaultComplete': - return h(CreateVaultCompleteScreen, {key: 'createVaultComplete'}) + return h(HDRestoreVaultScreen, {key: 'HDRestoreVaultScreen'}) default: return h(InitializeMenuScreen, {key: 'menuScreenInit'}) - } } // show unlock screen if (!props.isUnlocked) { - return h(UnlockScreen, {key: 'locked'}) + switch (props.currentView.name) { + + case 'restoreVault': + return h(HDRestoreVaultScreen, {key: 'HDRestoreVaultScreen'}) + + default: + return h(UnlockScreen, {key: 'locked'}) + } } // show current view switch (props.currentView.name) { - case 'EthStoreWarning': - return h(EthStoreWarning, {key: 'ethWarning'}) case 'accounts': return h(AccountsScreen, {key: 'accounts'}) @@ -439,6 +403,9 @@ App.prototype.renderPrimary = function () { case 'sendTransaction': return h(SendTransactionScreen, {key: 'send-transaction'}) + case 'newKeychain': + return h(NewKeyChainScreen, {key: 'new-keychain'}) + case 'confTx': return h(ConfirmTxScreen, {key: 'confirm-tx'}) @@ -451,10 +418,9 @@ App.prototype.renderPrimary = function () { case 'info': return h(InfoScreen, {key: 'info'}) - case 'createVault': - return h(CreateVaultScreen, {key: 'createVault'}) case 'buyEth': return h(BuyView, {key: 'buyEthView'}) + case 'qr': return h('div', { style: { @@ -510,12 +476,7 @@ App.prototype.renderCustomOption = function (rpcTarget) { }) case 'http://localhost:8545': - return 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'), - }) + return null default: return h(DropMenuItem, { diff --git a/ui/app/components/identicon.js b/ui/app/components/identicon.js index 4b2bf899e..6d4871d02 100644 --- a/ui/app/components/identicon.js +++ b/ui/app/components/identicon.js @@ -16,8 +16,8 @@ function IdenticonComponent () { } IdenticonComponent.prototype.render = function () { - var state = this.props - var diameter = state.diameter || this.defaultDiameter + var props = this.props + var diameter = props.diameter || this.defaultDiameter return ( h('div', { key: 'identicon-' + this.props.address, @@ -33,15 +33,31 @@ IdenticonComponent.prototype.render = function () { } IdenticonComponent.prototype.componentDidMount = function () { - var state = this.props - var address = state.address + var props = this.props + var address = props.address if (!address) return var container = findDOMNode(this) - var diameter = state.diameter || this.defaultDiameter - var imageify = state.imageify === undefined ? true : state.imageify - var img = iconFactory.iconForAddress(address, diameter, imageify) + var diameter = props.diameter || this.defaultDiameter + var img = iconFactory.iconForAddress(address, diameter, false) container.appendChild(img) } +IdenticonComponent.prototype.componentDidUpdate = function () { + var props = this.props + var address = props.address + + if (!address) return + + var container = findDOMNode(this) + + var children = container.children + for (var i = 0; i < children.length; i++) { + container.removeChild(children[i]) + } + + var diameter = props.diameter || this.defaultDiameter + var img = iconFactory.iconForAddress(address, diameter, false) + container.appendChild(img) +} diff --git a/ui/app/components/network.js b/ui/app/components/network.js index 845861396..ff5aefd41 100644 --- a/ui/app/components/network.js +++ b/ui/app/components/network.js @@ -36,13 +36,14 @@ Network.prototype.render = function () { } else if (providerName === 'mainnet') { hoverText = 'Main Ethereum Network' iconName = 'ethereum-network' - } else if (parseInt(networkNumber) === 2) { + } else if (providerName === 'testnet') { hoverText = 'Morden Test Network' iconName = 'morden-test-network' } else { hoverText = 'Unknown Private Network' iconName = 'unknown-private-network' } + return ( h('#network_component.flex-center.pointer', { style: { diff --git a/ui/app/eth-store-warning.js b/ui/app/eth-store-warning.js deleted file mode 100644 index fe3c7ce5d..000000000 --- a/ui/app/eth-store-warning.js +++ /dev/null @@ -1,89 +0,0 @@ -const connect = require('react-redux').connect -const Component = require('react').Component -const h = require('react-hyperscript') -const inherits = require('util').inherits -const actions = require('./actions') - -module.exports = connect(mapStateToProps)(EthStoreWarning) - -inherits(EthStoreWarning, Component) -function EthStoreWarning () { - Component.call(this) -} - -function mapStateToProps (state) { - return { - selectedAccount: state.metamask.selectedAccount, - } -} - -EthStoreWarning.prototype.render = function () { - - return ( - - h('.flex-column', { - key: 'ethWarning', - style: { - paddingTop: '25px', - marginRight: '30px', - marginLeft: '30px', - alignItems: 'center', - }, - }, [ - h('.warning', { - style: { - margin: '10px 10px 10px 10px', - }, - }, - `MetaMask is currently in beta; use - caution in storing large - amounts of ether. - `), - - h('i.fa.fa-exclamation-triangle.fa-4', { - style: { - fontSize: '152px', - color: '#AEAEAE', - textAlign: 'center', - }, - }), - - h('.flex-row', { - style: { - marginTop: '25px', - marginBottom: '10px', - }, - }, [ - h('input', { - type: 'checkbox', - onChange: this.toggleShowWarning.bind(this), - }), - h('.warning', { - style: { - fontSize: '11px', - }, - - }, 'Don\'t show me this message again'), - ]), - h('.flex-row', { - style: { - width: '100%', - justifyContent: 'space-around', - }, - }, [ - h('button', { - onClick: this.toAccounts.bind(this), - }, - 'Continue to MetaMask'), - ]), - ]) - ) -} - -EthStoreWarning.prototype.toggleShowWarning = function () { - this.props.dispatch(actions.agreeToEthWarning()) -} - -EthStoreWarning.prototype.toAccounts = function () { - this.props.dispatch(actions.showAccountDetail(this.props.account)) -} diff --git a/ui/app/first-time/create-vault.js b/ui/app/first-time/create-vault.js deleted file mode 100644 index 33ae62179..000000000 --- a/ui/app/first-time/create-vault.js +++ /dev/null @@ -1,129 +0,0 @@ -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') - -module.exports = connect(mapStateToProps)(CreateVaultScreen) - -inherits(CreateVaultScreen, Component) -function CreateVaultScreen () { - Component.call(this) -} - -function mapStateToProps (state) { - return { - warning: state.appState.warning, - } -} - -CreateVaultScreen.prototype.render = function () { - var state = this.props - return ( - - h('.initialize-screen.flex-column.flex-center.flex-grow', [ - - h('h3.flex-center.text-transform-uppercase', { - style: { - background: '#EBEBEB', - color: '#AEAEAE', - marginBottom: 24, - width: '100%', - fontSize: '20px', - padding: 6, - }, - }, [ - 'Create Vault', - ]), - - // password - h('input.large-input.letter-spacey', { - type: 'password', - id: 'password-box', - placeholder: 'New Password (min 8 chars)', - style: { - width: 260, - marginTop: 12, - }, - }), - - // confirm password - h('input.large-input.letter-spacey', { - type: 'password', - id: 'password-box-confirm', - placeholder: 'Confirm Password', - onKeyPress: this.createVaultOnEnter.bind(this), - style: { - width: 260, - marginTop: 16, - }, - }), - - h('.flex-row.flex-space-between', { - style: { - marginTop: 30, - width: '50%', - }, - }, [ - - // cancel - h('button.primary', { - onClick: this.showInitializeMenu.bind(this), - }, 'CANCEL'), - - // submit - h('button.primary', { - onClick: this.createNewVault.bind(this), - }, 'OK'), - - ]), - - (!state.inProgress && state.warning) && ( - h('span.in-progress-notification', state.warning) - ), - - state.inProgress && ( - h('span.in-progress-notification', 'Generating Seed...') - ), - ]) - ) -} - -CreateVaultScreen.prototype.componentDidMount = function () { - document.getElementById('password-box').focus() -} - -CreateVaultScreen.prototype.showInitializeMenu = function () { - this.props.dispatch(actions.showInitializeMenu()) -} - -// create vault - -CreateVaultScreen.prototype.createVaultOnEnter = function (event) { - if (event.key === 'Enter') { - event.preventDefault() - this.createNewVault() - } -} - -CreateVaultScreen.prototype.createNewVault = function () { - var passwordBox = document.getElementById('password-box') - var password = passwordBox.value - var passwordConfirmBox = document.getElementById('password-box-confirm') - var passwordConfirm = passwordConfirmBox.value - // var entropy = document.getElementById('entropy-text-entry').value - - if (password.length < 8) { - this.warning = 'password not long enough' - this.props.dispatch(actions.displayWarning(this.warning)) - return - } - if (password !== passwordConfirm) { - this.warning = 'passwords don\'t match' - this.props.dispatch(actions.displayWarning(this.warning)) - return - } - - this.props.dispatch(actions.createNewVault(password, ''/* entropy*/)) -} diff --git a/ui/app/first-time/init-menu.js b/ui/app/first-time/init-menu.js index 94a9d3df6..14a89b988 100644 --- a/ui/app/first-time/init-menu.js +++ b/ui/app/first-time/init-menu.js @@ -5,6 +5,8 @@ const connect = require('react-redux').connect const h = require('react-hyperscript') const Mascot = require('../components/mascot') const actions = require('../actions') +const Tooltip = require('../components/tooltip') +const getCaretCoordinates = require('textarea-caret') module.exports = connect(mapStateToProps)(InitializeMenuScreen) @@ -18,6 +20,7 @@ function mapStateToProps (state) { return { // state from plugin currentView: state.appState.currentView, + warning: state.appState.warning, } } @@ -27,7 +30,7 @@ InitializeMenuScreen.prototype.render = function () { switch (state.currentView.name) { default: - return this.renderMenu() + return this.renderMenu(state) } } @@ -36,7 +39,7 @@ InitializeMenuScreen.prototype.render = function () { // document.getElementById('password-box').focus() // } -InitializeMenuScreen.prototype.renderMenu = function () { +InitializeMenuScreen.prototype.renderMenu = function (state) { return ( h('.initialize-screen.flex-column.flex-center.flex-grow', [ @@ -47,49 +50,131 @@ InitializeMenuScreen.prototype.renderMenu = function () { h('h1', { style: { - fontSize: '1.4em', + fontSize: '1.3em', textTransform: 'uppercase', color: '#7F8082', - marginBottom: 20, + marginBottom: 10, }, }, 'MetaMask'), - h('button.primary', { - onClick: this.showCreateVault.bind(this), + + h('div', [ + h('h3', { + style: { + fontSize: '0.8em', + color: '#7F8082', + display: 'inline', + }, + }, 'Encrypt your new DEN'), + + h(Tooltip, { + title: 'Your DEN is your password-encrypted storage within MetaMask.', + }, [ + h('i.fa.fa-question-circle.pointer', { + style: { + fontSize: '18px', + position: 'relative', + color: 'rgb(247, 134, 28)', + top: '2px', + marginLeft: '4px', + }, + }), + ]), + ]), + + h('span.in-progress-notification', state.warning), + + // password + h('input.large-input.letter-spacey', { + type: 'password', + id: 'password-box', + placeholder: 'New Password (min 8 chars)', + onInput: this.inputChanged.bind(this), style: { - margin: 12, + width: 260, + marginTop: 12, }, - }, 'Create New Vault'), + }), + + // confirm password + h('input.large-input.letter-spacey', { + type: 'password', + id: 'password-box-confirm', + placeholder: 'Confirm Password', + onKeyPress: this.createVaultOnEnter.bind(this), + onInput: this.inputChanged.bind(this), + style: { + width: 260, + marginTop: 16, + }, + }), - h('.flex-row.flex-center.flex-grow', [ - h('hr'), - h('div', 'OR'), - h('hr'), - ]), h('button.primary', { - onClick: this.showRestoreVault.bind(this), + onClick: this.createNewVaultAndKeychain.bind(this), style: { margin: 12, }, - }, 'Restore Existing Vault'), + }, 'Create'), + + h('.flex-row.flex-center.flex-grow', [ + h('p.pointer', { + onClick: this.showRestoreVault.bind(this), + style: { + fontSize: '0.8em', + color: 'rgb(247, 134, 28)', + textDecoration: 'underline', + }, + }, 'I already have a DEN that I would like to import'), + ]), + ]) ) } -// InitializeMenuScreen.prototype.splitWor = function() { -// this.props.dispatch(actions.showInitializeMenu()) -// } - -InitializeMenuScreen.prototype.showInitializeMenu = function () { - this.props.dispatch(actions.showInitializeMenu()) +InitializeMenuScreen.prototype.createVaultOnEnter = function (event) { + if (event.key === 'Enter') { + event.preventDefault() + this.createNewVaultAndKeychain() + } } -InitializeMenuScreen.prototype.showCreateVault = function () { - this.props.dispatch(actions.showCreateVault()) +InitializeMenuScreen.prototype.componentDidMount = function () { + document.getElementById('password-box').focus() } InitializeMenuScreen.prototype.showRestoreVault = function () { this.props.dispatch(actions.showRestoreVault()) } +InitializeMenuScreen.prototype.createNewVaultAndKeychain = function () { + var passwordBox = document.getElementById('password-box') + var password = passwordBox.value + var passwordConfirmBox = document.getElementById('password-box-confirm') + var passwordConfirm = passwordConfirmBox.value + // var entropy = document.getElementById('entropy-text-entry').value + + if (password.length < 8) { + this.warning = 'password not long enough' + this.props.dispatch(actions.displayWarning(this.warning)) + return + } + if (password !== passwordConfirm) { + this.warning = 'passwords don\'t match' + this.props.dispatch(actions.displayWarning(this.warning)) + return + } + + this.props.dispatch(actions.createNewVaultAndKeychain(password, ''/* entropy*/)) +} + +InitializeMenuScreen.prototype.inputChanged = function (event) { + // tell mascot to look at page action + var element = event.target + var boundingRect = element.getBoundingClientRect() + var coordinates = getCaretCoordinates(element, element.selectionEnd) + this.animationEventEmitter.emit('point', { + x: boundingRect.left + coordinates.left - element.scrollLeft, + y: boundingRect.top + coordinates.top - element.scrollTop, + }) +} diff --git a/ui/app/first-time/create-vault-complete.js b/ui/app/keychains/hd/create-vault-complete.js index 2b5413955..7272ebdbd 100644 --- a/ui/app/first-time/create-vault-complete.js +++ b/ui/app/keychains/hd/create-vault-complete.js @@ -2,7 +2,7 @@ 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 actions = require('../../actions') module.exports = connect(mapStateToProps)(CreateVaultCompleteScreen) @@ -71,4 +71,3 @@ CreateVaultCompleteScreen.prototype.render = function () { CreateVaultCompleteScreen.prototype.confirmSeedWords = function () { this.props.dispatch(actions.confirmSeedWords()) } - diff --git a/ui/app/recover-seed/confirmation.js b/ui/app/keychains/hd/recover-seed/confirmation.js index 55b18025f..83dbc270f 100644 --- a/ui/app/recover-seed/confirmation.js +++ b/ui/app/keychains/hd/recover-seed/confirmation.js @@ -3,7 +3,7 @@ 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 actions = require('../../../actions') module.exports = connect(mapStateToProps)(RevealSeedConfirmatoin) @@ -68,7 +68,7 @@ RevealSeedConfirmatoin.prototype.render = function () { style: { marginTop: '12px', }, - }, 'Enter the phrase "I understand" to proceed.'), + }, `Enter the phrase "${this.confirmationPhrase}" to proceed.`), // confirm confirmation h('input.large-input.letter-spacey', { diff --git a/ui/app/first-time/restore-vault.js b/ui/app/keychains/hd/restore-vault.js index 4c1f21008..3fa25a2eb 100644 --- a/ui/app/first-time/restore-vault.js +++ b/ui/app/keychains/hd/restore-vault.js @@ -1,8 +1,8 @@ const inherits = require('util').inherits -const PersistentForm = require('../../lib/persistent-form') +const PersistentForm = require('../../../lib/persistent-form') const connect = require('react-redux').connect const h = require('react-hyperscript') -const actions = require('../actions') +const actions = require('../../actions') module.exports = connect(mapStateToProps)(RestoreVaultScreen) @@ -66,7 +66,7 @@ RestoreVaultScreen.prototype.render = function () { type: 'password', id: 'password-box-confirm', placeholder: 'Confirm Password', - onKeyPress: this.onMaybeCreate.bind(this), + onKeyPress: this.createOnEnter.bind(this), dataset: { persistentFormId: 'password-confirmation', }, @@ -96,7 +96,7 @@ RestoreVaultScreen.prototype.render = function () { // submit h('button.primary', { - onClick: this.restoreVault.bind(this), + onClick: this.createNewVaultAndRestore.bind(this), }, 'OK'), ]), @@ -110,13 +110,13 @@ RestoreVaultScreen.prototype.showInitializeMenu = function () { this.props.dispatch(actions.showInitializeMenu()) } -RestoreVaultScreen.prototype.onMaybeCreate = function (event) { +RestoreVaultScreen.prototype.createOnEnter = function (event) { if (event.key === 'Enter') { - this.restoreVault() + this.createNewVaultAndRestore() } } -RestoreVaultScreen.prototype.restoreVault = function () { +RestoreVaultScreen.prototype.createNewVaultAndRestore = function () { // check password var passwordBox = document.getElementById('password-box') var password = passwordBox.value @@ -144,5 +144,5 @@ RestoreVaultScreen.prototype.restoreVault = function () { // submit this.warning = null this.props.dispatch(actions.displayWarning(this.warning)) - this.props.dispatch(actions.recoverFromSeed(password, seed)) + this.props.dispatch(actions.createNewVaultAndRestore(password, seed)) } diff --git a/ui/app/new-keychain.js b/ui/app/new-keychain.js new file mode 100644 index 000000000..cc9633166 --- /dev/null +++ b/ui/app/new-keychain.js @@ -0,0 +1,29 @@ +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!!!!`), + ]) + ) +} diff --git a/ui/app/reducers/app.js b/ui/app/reducers/app.js index c2ac099a6..49507eb30 100644 --- a/ui/app/reducers/app.js +++ b/ui/app/reducers/app.js @@ -29,13 +29,10 @@ function reduceApp (state, action) { name: 'createVaultComplete', seedWords, } - var ethStoreWarning = { - name: 'EthStoreWarning', - } var appState = extend({ menuOpen: false, - currentView: seedWords ? seedConfView : !state.metamask.isEthConfirmed ? ethStoreWarning : defaultView, + currentView: seedWords ? seedConfView : defaultView, accountDetail: { subview: 'transactions', }, @@ -119,6 +116,15 @@ function reduceApp (state, action) { warning: null, }) + case actions.SHOW_NEW_KEYCHAIN: + return extend(appState, { + currentView: { + name: 'newKeychain', + context: appState.currentView.context, + }, + transForward: true, + }) + // unlock case actions.UNLOCK_METAMASK: @@ -329,7 +335,7 @@ function reduceApp (state, action) { case actions.UNLOCK_FAILED: return extend(appState, { - warning: 'Incorrect password. Try again.', + warning: action.value || 'Incorrect password. Try again.', }) case actions.SHOW_LOADING: @@ -540,4 +546,3 @@ function indexForPending (state, txId) { }) return idx } - diff --git a/ui/app/reducers/metamask.js b/ui/app/reducers/metamask.js index 84953d734..aa809b333 100644 --- a/ui/app/reducers/metamask.js +++ b/ui/app/reducers/metamask.js @@ -10,7 +10,6 @@ function reduceMetamask (state, action) { var metamaskState = extend({ isInitialized: false, isUnlocked: false, - isEthConfirmed: false, rpcTarget: 'https://rawtestrpc.metamask.io/', identities: {}, unconfTxs: {}, @@ -34,11 +33,6 @@ function reduceMetamask (state, action) { isConfirmed: true, }) - case actions.AGREE_TO_ETH_WARNING: - return extend(metamaskState, { - isEthConfirmed: !metamaskState.isEthConfirmed, - }) - case actions.UNLOCK_METAMASK: return extend(metamaskState, { isUnlocked: true, diff --git a/ui/app/unlock.js b/ui/app/unlock.js index b82e46d02..ec467f483 100644 --- a/ui/app/unlock.js +++ b/ui/app/unlock.js @@ -55,6 +55,8 @@ UnlockScreen.prototype.render = function () { h('.error', { style: { display: warning ? 'block' : 'none', + padding: '0 20px', + textAlign: 'center', }, }, warning), @@ -65,6 +67,17 @@ UnlockScreen.prototype.render = function () { }, }, 'Unlock'), ]), + + h('.flex-row.flex-center.flex-grow', [ + h('p.pointer', { + onClick: () => this.props.dispatch(actions.showRestoreVault()), + style: { + fontSize: '0.8em', + color: 'rgb(247, 134, 28)', + textDecoration: 'underline', + }, + }, 'I forgot my password.'), + ]), ]) ) } @@ -104,6 +117,3 @@ UnlockScreen.prototype.inputChanged = function (event) { }) } -UnlockScreen.prototype.emitAnim = function (name, a, b, c) { - this.animationEventEmitter.emit(name, a, b, c) -} diff --git a/ui/index.js b/ui/index.js index a6905b639..dedfd8c8c 100644 --- a/ui/index.js +++ b/ui/index.js @@ -8,7 +8,7 @@ module.exports = launchApp function launchApp (opts) { var accountManager = opts.accountManager - actions._setAccountManager(accountManager) + actions._setBackgroundConnection(accountManager) // check if we are unlocked first accountManager.getState(function (err, metamaskState) { |