diff --git a/.eslintrc b/.eslintrc index ffa4cd574..84f65bea4 100644 --- a/.eslintrc +++ b/.eslintrc @@ -1,5 +1,6 @@ { "parserOptions": { + "sourceType": "module", "ecmaVersion": 6, "ecmaFeatures": { "experimentalObjectRestSpread": true, diff --git a/CHANGELOG.md b/CHANGELOG.md index 968fedffb..5ea70e966 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ ## Current Master +- Add ability to import accounts by private key. - Fixed bug that returned the wrong transaction hashes on private networks that had not implemented EIP 155 replay protection (like TestRPC). ## 3.0.1 2017-1-17 diff --git a/app/scripts/keyring-controller.js b/app/scripts/keyring-controller.js index 4be00a5a5..e609403cc 100644 --- a/app/scripts/keyring-controller.js +++ b/app/scripts/keyring-controller.js @@ -234,7 +234,10 @@ module.exports = class KeyringController extends EventEmitter { addNewKeyring (type, opts) { const Keyring = this.getKeyringClassForType(type) const keyring = new Keyring(opts) - return keyring.getAccounts() + return keyring.deserialize(opts) + .then(() => { + return keyring.getAccounts() + }) .then((accounts) => { this.keyrings.push(keyring) return this.setupAccounts(accounts) diff --git a/app/scripts/keyrings/simple.js b/app/scripts/keyrings/simple.js index d604430b8..46687fcaf 100644 --- a/app/scripts/keyrings/simple.js +++ b/app/scripts/keyrings/simple.js @@ -20,13 +20,19 @@ class SimpleKeyring extends EventEmitter { } deserialize (privateKeys = []) { - this.wallets = privateKeys.map((privateKey) => { - const stripped = ethUtil.stripHexPrefix(privateKey) - const buffer = new Buffer(stripped, 'hex') - const wallet = Wallet.fromPrivateKey(buffer) - return wallet + return new Promise((resolve, reject) => { + try { + this.wallets = privateKeys.map((privateKey) => { + const stripped = ethUtil.stripHexPrefix(privateKey) + const buffer = new Buffer(stripped, 'hex') + const wallet = Wallet.fromPrivateKey(buffer) + return wallet + }) + } catch (e) { + reject(e) + } + resolve() }) - return Promise.resolve() } addAccounts (n = 1) { diff --git a/app/scripts/metamask-controller.js b/app/scripts/metamask-controller.js index b94b98eac..629216e42 100644 --- a/app/scripts/metamask-controller.js +++ b/app/scripts/metamask-controller.js @@ -115,7 +115,12 @@ module.exports = class MetamaskController extends EventEmitter { .then((newState) => { cb(null, newState) }) .catch((reason) => { cb(reason) }) }, - addNewKeyring: nodeify(keyringController.addNewKeyring).bind(keyringController), + addNewKeyring: (type, opts, cb) => { + keyringController.addNewKeyring(type, opts) + .then(() => keyringController.fullUpdate()) + .then((newState) => { cb(null, newState) }) + .catch((reason) => { cb(reason) }) + }, addNewAccount: nodeify(keyringController.addNewAccount).bind(keyringController), setSelectedAccount: nodeify(keyringController.setSelectedAccount).bind(keyringController), saveAccountLabel: nodeify(keyringController.saveAccountLabel).bind(keyringController), diff --git a/development/states/account-list-with-imported.json b/development/states/account-list-with-imported.json new file mode 100644 index 000000000..e32327743 --- /dev/null +++ b/development/states/account-list-with-imported.json @@ -0,0 +1,84 @@ +{ + "metamask": { + "isInitialized": true, + "isUnlocked": true, + "rpcTarget": "https://rawtestrpc.metamask.io/", + "identities": { + "0x58bda1f9d87dc7d2bcc6f7c2513efc9d03fca683": { + "address": "0x58bda1f9d87dc7d2bcc6f7c2513efc9d03fca683", + "name": "Account 1" + }, + "0x9858e7d8b79fc3e6d989636721584498926da38a": { + "address": "0x9858e7d8b79fc3e6d989636721584498926da38a", + "name": "Imported Account" + } + }, + "unconfTxs": {}, + "currentFiat": "USD", + "conversionRate": 10.19458075, + "conversionDate": 1484696373, + "noActiveNotices": true, + "network": "3", + "accounts": { + "0x58bda1f9d87dc7d2bcc6f7c2513efc9d03fca683": { + "code": "0x", + "balance": "0x0", + "nonce": "0x0", + "address": "0x58bda1f9d87dc7d2bcc6f7c2513efc9d03fca683" + }, + "0x9858e7d8b79fc3e6d989636721584498926da38a": { + "code": "0x", + "balance": "0x0", + "nonce": "0x0", + "address": "0x9858e7d8b79fc3e6d989636721584498926da38a" + } + }, + "transactions": [], + "provider": { + "type": "testnet" + }, + "selectedAccount": "0x9858e7d8b79fc3e6d989636721584498926da38a", + "selectedAccountTxList": [], + "isDisclaimerConfirmed": true, + "unconfMsgs": {}, + "messages": [], + "shapeShiftTxList": [], + "keyringTypes": [ + "Simple Key Pair", + "HD Key Tree" + ], + "keyrings": [ + { + "type": "HD Key Tree", + "accounts": [ + "58bda1f9d87dc7d2bcc6f7c2513efc9d03fca683" + ] + }, + { + "type": "Simple Key Pair", + "accounts": [ + "0x9858e7d8b79fc3e6d989636721584498926da38a" + ] + } + ], + "lostAccounts": [], + "seedWords": null + }, + "appState": { + "menuOpen": false, + "currentView": { + "name": "accounts" + }, + "accountDetail": { + "subview": "transactions", + "accountExport": "none", + "privateKey": "" + }, + "transForward": true, + "isLoading": false, + "warning": null, + "scrollToBottom": false, + "forgottenPassword": false + }, + "identities": {} +} \ No newline at end of file diff --git a/development/states/compilation-bug.json b/development/states/compilation-bug.json new file mode 100644 index 000000000..a9dfc4d4e --- /dev/null +++ b/development/states/compilation-bug.json @@ -0,0 +1,124 @@ +{ + "metamask": { + "isInitialized": true, + "isUnlocked": true, + "rpcTarget": "https://rawtestrpc.metamask.io/", + "identities": { + "0xac39b311dceb2a4b2f5d8461c1cdaf756f4f7ae9": { + "address": "0xac39b311dceb2a4b2f5d8461c1cdaf756f4f7ae9", + "name": "Account 1" + }, + "0xd7c0cd9e7d2701c710d64fc492c7086679bdf7b4": { + "address": "0xd7c0cd9e7d2701c710d64fc492c7086679bdf7b4", + "name": "Account 2" + }, + "0x1acfb961c5a8268eac8e09d6241a26cbeff42241": { + "address": "0x1acfb961c5a8268eac8e09d6241a26cbeff42241", + "name": "Account 3" + }, + "0xabc2bca51709b8615147352c62420f547a63a00c": { + "address": "0xabc2bca51709b8615147352c62420f547a63a00c", + "name": "Account 4" + } + }, + "unconfTxs": { + "7992944905869041": { + "id": 7992944905869041, + "txParams": { + "from": "0xac39b311dceb2a4b2f5d8461c1cdaf756f4f7ae9", + "value": "0x0", + "data": "0x606060405234610000575b60da806100186000396000f30060606040526000357c0100000000000000000000000000000000000000000000000000000000900463ffffffff1680630dbe671f14603c575b6000565b3460005760466088565b604051808273ffffffffffffffffffffffffffffffffffffffff1673ffffffffffffffffffffffffffffffffffffffff16815260200191505060405180910390f35b600060009054906101000a900473ffffffffffffffffffffffffffffffffffffffff16815600a165627a7a72305820a99dfa6091771f518dd1ae8d1ee347bae3304dffd98fd24b1b99a8380bc60a750029", + "gas": "0x1af75", + "metamaskId": 7992944905869041, + "metamaskNetworkId": "3" + }, + "time": 1482279685589, + "status": "unconfirmed", + "gasMultiplier": 1, + "metamaskNetworkId": "3", + "gasLimitSpecified": true, + "estimatedGas": "0x1af75", + "simulationFails": true + } + }, + "currentFiat": "USD", + "conversionRate": 7.69158136, + "conversionDate": 1482279663, + "noActiveNotices": true, + "network": "3", + "accounts": { + "0xac39b311dceb2a4b2f5d8461c1cdaf756f4f7ae9": { + "code": "0x", + "nonce": "0x3", + "balance": "0x11f646fe14c9c000", + "address": "0xac39b311dceb2a4b2f5d8461c1cdaf756f4f7ae9" + }, + "0xd7c0cd9e7d2701c710d64fc492c7086679bdf7b4": { + "code": "0x", + "nonce": "0x0", + "balance": "0x0", + "address": "0xd7c0cd9e7d2701c710d64fc492c7086679bdf7b4" + }, + "0x1acfb961c5a8268eac8e09d6241a26cbeff42241": { + "code": "0x", + "balance": "0x0", + "nonce": "0x0", + "address": "0x1acfb961c5a8268eac8e09d6241a26cbeff42241" + }, + "0xabc2bca51709b8615147352c62420f547a63a00c": { + "code": "0x", + "balance": "0x0", + "nonce": "0x0", + "address": "0xabc2bca51709b8615147352c62420f547a63a00c" + } + }, + "transactions": [ + { + "id": 7992944905869041, + "txParams": { + "from": "0xac39b311dceb2a4b2f5d8461c1cdaf756f4f7ae9", + "value": "0x0", + "data": "0x606060405234610000575b60da806100186000396000f30060606040526000357c0100000000000000000000000000000000000000000000000000000000900463ffffffff1680630dbe671f14603c575b6000565b3460005760466088565b604051808273ffffffffffffffffffffffffffffffffffffffff1673ffffffffffffffffffffffffffffffffffffffff16815260200191505060405180910390f35b600060009054906101000a900473ffffffffffffffffffffffffffffffffffffffff16815600a165627a7a72305820a99dfa6091771f518dd1ae8d1ee347bae3304dffd98fd24b1b99a8380bc60a750029", + "gas": "0x1af75", + "metamaskId": 7992944905869041, + "metamaskNetworkId": "3" + }, + "time": 1482279685589, + "status": "unconfirmed", + "gasMultiplier": 1, + "metamaskNetworkId": "3", + "gasLimitSpecified": true, + "estimatedGas": "0x1af75", + "simulationFails": true + } + ], + "provider": { + "type": "testnet" + }, + "selectedAccount": "0xac39b311dceb2a4b2f5d8461c1cdaf756f4f7ae9", + "seedWords": false, + "isDisclaimerConfirmed": true, + "unconfMsgs": {}, + "messages": [], + "shapeShiftTxList": [], + "keyringTypes": [ + "Simple Key Pair", + "HD Key Tree" + ], + "lostAccounts": [] + }, + "appState": { + "menuOpen": false, + "currentView": { + "name": "confTx", + "context": 0 + }, + "accountDetail": { + "subview": "transactions" + }, + "transForward": true, + "isLoading": false, + "warning": null + }, + "identities": {} +} \ No newline at end of file diff --git a/development/states/import-private-key-warning.json b/development/states/import-private-key-warning.json new file mode 100644 index 000000000..f4ac99b05 --- /dev/null +++ b/development/states/import-private-key-warning.json @@ -0,0 +1,92 @@ +{ + "metamask": { + "isInitialized": true, + "isUnlocked": true, + "rpcTarget": "https://rawtestrpc.metamask.io/", + "identities": { + "0x01208723ba84e15da2e71656544a2963b0c06d40": { + "address": "0x01208723ba84e15da2e71656544a2963b0c06d40", + "name": "Account 1" + } + }, + "unconfTxs": {}, + "currentFiat": "USD", + "conversionRate": 10.1219126, + "conversionDate": 1484695442, + "noActiveNotices": true, + "network": "3", + "accounts": { + "0x01208723ba84e15da2e71656544a2963b0c06d40": { + "nonce": "0x0", + "balance": "0x0", + "code": "0x", + "address": "0x01208723ba84e15da2e71656544a2963b0c06d40" + } + }, + "transactions": [], + "provider": { + "type": "testnet" + }, + "selectedAccount": "0x01208723ba84e15da2e71656544a2963b0c06d40", + "selectedAccountTxList": [], + "seedWords": false, + "isDisclaimerConfirmed": true, + "unconfMsgs": {}, + "messages": [], + "shapeShiftTxList": [], + "keyringTypes": [ + "Simple Key Pair", + "HD Key Tree" + ], + "keyrings": [ + { + "type": "Simple Key Pair", + "accounts": [] + }, + { + "type": "Simple Key Pair", + "accounts": [] + }, + { + "type": "Simple Key Pair", + "accounts": [] + }, + { + "type": "Simple Key Pair", + "accounts": [] + }, + { + "type": "Simple Key Pair", + "accounts": [] + }, + { + "type": "Simple Key Pair", + "accounts": [] + }, + { + "type": "Simple Key Pair", + "accounts": [] + }, + { + "type": "HD Key Tree", + "accounts": [ + "01208723ba84e15da2e71656544a2963b0c06d40" + ] + } + ], + "lostAccounts": [] + }, + "appState": { + "menuOpen": false, + "currentView": { + "name": "import-menu" + }, + "accountDetail": { + "subview": "transactions" + }, + "transForward": true, + "isLoading": false, + "warning": "Invalid hex string" + }, + "identities": {} +} \ No newline at end of file diff --git a/development/states/import-private-key.json b/development/states/import-private-key.json new file mode 100644 index 000000000..c70f02a36 --- /dev/null +++ b/development/states/import-private-key.json @@ -0,0 +1,64 @@ +{ + "metamask": { + "isInitialized": true, + "isUnlocked": true, + "rpcTarget": "https://rawtestrpc.metamask.io/", + "identities": { + "0x01208723ba84e15da2e71656544a2963b0c06d40": { + "address": "0x01208723ba84e15da2e71656544a2963b0c06d40", + "name": "Account 1" + } + }, + "unconfTxs": {}, + "currentFiat": "USD", + "conversionRate": 10.10788584, + "conversionDate": 1484694362, + "noActiveNotices": true, + "network": "3", + "accounts": { + "0x01208723ba84e15da2e71656544a2963b0c06d40": { + "balance": "0x0", + "code": "0x", + "nonce": "0x0", + "address": "0x01208723ba84e15da2e71656544a2963b0c06d40" + } + }, + "transactions": [], + "provider": { + "type": "testnet" + }, + "selectedAccount": "0x01208723ba84e15da2e71656544a2963b0c06d40", + "selectedAccountTxList": [], + "seedWords": null, + "isDisclaimerConfirmed": true, + "unconfMsgs": {}, + "messages": [], + "shapeShiftTxList": [], + "keyringTypes": [ + "Simple Key Pair", + "HD Key Tree" + ], + "keyrings": [ + { + "type": "HD Key Tree", + "accounts": [ + "01208723ba84e15da2e71656544a2963b0c06d40" + ] + } + ], + "lostAccounts": [] + }, + "appState": { + "menuOpen": false, + "currentView": { + "name": "import-menu" + }, + "accountDetail": { + "subview": "transactions" + }, + "transForward": true, + "isLoading": false, + "warning": null + }, + "identities": {} +} \ No newline at end of file diff --git a/development/states/new-account.json b/development/states/new-account.json new file mode 100644 index 000000000..8c9be3654 --- /dev/null +++ b/development/states/new-account.json @@ -0,0 +1,66 @@ +{ + "metamask": { + "isInitialized": true, + "isUnlocked": true, + "rpcTarget": "https://rawtestrpc.metamask.io/", + "identities": { + "0xa6ef573d60594731178b7f85d80da13cc2af52dd": { + "address": "0xa6ef573d60594731178b7f85d80da13cc2af52dd", + "name": "Dan! 1" + }, + "0xf9f52e84ad2c9122caa87478d27041ddaa215666": { + "address": "0xf9f52e84ad2c9122caa87478d27041ddaa215666", + "name": "Account 2" + } + }, + "unconfTxs": {}, + "currentFiat": "USD", + "conversionRate": 10.92067835, + "conversionDate": 1478282884, + "network": null, + "accounts": { + "0xa6ef573d60594731178b7f85d80da13cc2af52dd": { + "balance": "0x00", + "nonce": "0x100000", + "code": "0x", + "address": "0xa6ef573d60594731178b7f85d80da13cc2af52dd" + }, + "0xf9f52e84ad2c9122caa87478d27041ddaa215666": { + "balance": "0x00", + "nonce": "0x100000", + "code": "0x", + "address": "0xf9f52e84ad2c9122caa87478d27041ddaa215666" + } + }, + "transactions": [], + "provider": { + "type": "testnet" + }, + "selectedAccount": "0xa6ef573d60594731178b7f85d80da13cc2af52dd", + "isConfirmed": true, + "unconfMsgs": {}, + "messages": [], + "selectedAddress": "0xa6ef573d60594731178b7f85d80da13cc2af52dd", + "shapeShiftTxList": [], + "keyringTypes": [ + "Simple Key Pair", + "HD Key Tree" + ] + }, + "appState": { + "menuOpen": false, + "currentView": { + "name": "new-account" + }, + "accountDetail": { + "subview": "transactions" + }, + "transForward": true, + "isLoading": false, + "warning": null, + "forgottenPassword": null, + "detailView": {}, + "scrollToBottom": false + }, + "identities": {} +} \ No newline at end of file diff --git a/package.json b/package.json index 52708fdab..2c0c30523 100644 --- a/package.json +++ b/package.json @@ -83,6 +83,7 @@ "react-hyperscript": "^2.2.2", "react-markdown": "^2.3.0", "react-redux": "^4.4.5", + "react-select": "^1.0.0-rc.2", "react-tooltip-component": "^0.3.0", "readable-stream": "^2.1.2", "redux": "^3.0.5", diff --git a/test/integration/lib/first-time.js b/test/integration/lib/first-time.js index 1811ccbd4..777fcbb7e 100644 --- a/test/integration/lib/first-time.js +++ b/test/integration/lib/first-time.js @@ -66,7 +66,8 @@ QUnit.test('agree to terms', function (assert) { }).then(function() { var sandwich = app.find('.menu-droppo')[0] - var lock = sandwich.children[2] + var children = sandwich.children + var lock = children[children.length - 2] assert.ok(lock, 'Lock menu item found') lock.click() diff --git a/ui/app/accounts/import/index.js b/ui/app/accounts/import/index.js new file mode 100644 index 000000000..18a6b985c --- /dev/null +++ b/ui/app/accounts/import/index.js @@ -0,0 +1,91 @@ +const inherits = require('util').inherits +const Component = require('react').Component +const h = require('react-hyperscript') +const connect = require('react-redux').connect +import Select from 'react-select' + +// Subviews +const JsonImportView = require('./json.js') +const SeedImportView = require('./seed.js') +const PrivateKeyImportView = require('./private-key.js') + +const menuItems = [ + 'Private Key', +] + +module.exports = connect(mapStateToProps)(AccountImportSubview) + +function mapStateToProps (state) { + return { + menuItems, + } +} + +inherits(AccountImportSubview, Component) +function AccountImportSubview () { + Component.call(this) +} + +AccountImportSubview.prototype.render = function () { + const props = this.props + const state = this.state || {} + const { menuItems } = props + const { type } = state + + return ( + h('div', { + style: { + }, + }, [ + h('div', { + style: { + padding: '10px', + color: 'rgb(174, 174, 174)', + }, + }, [ + + h('h3', { style: { padding: '3px' } }, 'SELECT TYPE'), + + h('style', ` + .has-value.Select--single > .Select-control .Select-value .Select-value-label, .Select-value-label { + color: rgb(174,174,174); + } + `), + + h(Select, { + name: 'import-type-select', + clearable: false, + value: type || menuItems[0], + options: menuItems.map((type) => { + return { + value: type, + label: type, + } + }), + onChange: (opt) => { + this.setState({ type: opt.value }) + }, + }), + ]), + + this.renderImportView(), + ]) + ) +} + +AccountImportSubview.prototype.renderImportView = function() { + const props = this.props + const state = this.state || {} + const { type } = state + const { menuItems } = props + const current = type || menuItems[0] + + switch (current) { + case 'HD Key Tree': + return h(SeedImportView) + case 'Private Key': + return h(PrivateKeyImportView) + default: + return h(JsonImportView) + } +} diff --git a/ui/app/accounts/import/json.js b/ui/app/accounts/import/json.js new file mode 100644 index 000000000..22cf95cfd --- /dev/null +++ b/ui/app/accounts/import/json.js @@ -0,0 +1,27 @@ +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)(JsonImportSubview) + +function mapStateToProps (state) { + return {} +} + +inherits(JsonImportSubview, Component) +function JsonImportSubview () { + Component.call(this) +} + +JsonImportSubview.prototype.render = function () { + return ( + h('div', { + style: { + }, + }, [ + `Upload your json file here!`, + ]) + ) +} + diff --git a/ui/app/accounts/import/private-key.js b/ui/app/accounts/import/private-key.js new file mode 100644 index 000000000..6b988a76b --- /dev/null +++ b/ui/app/accounts/import/private-key.js @@ -0,0 +1,69 @@ +const inherits = require('util').inherits +const Component = require('react').Component +const h = require('react-hyperscript') +const connect = require('react-redux').connect +const type = 'Simple Key Pair' +const actions = require('../../actions') + +module.exports = connect(mapStateToProps)(PrivateKeyImportView) + +function mapStateToProps (state) { + return { + error: state.appState.warning, + } +} + +inherits(PrivateKeyImportView, Component) +function PrivateKeyImportView () { + Component.call(this) +} + +PrivateKeyImportView.prototype.render = function () { + const { error } = this.props + + return ( + h('div', { + style: { + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + padding: '5px 15px 0px 15px', + }, + }, [ + h('span', 'Paste your private key string here'), + + h('input.large-input.letter-spacey', { + type: 'password', + id: 'private-key-box', + onKeyPress: this.createKeyringOnEnter.bind(this), + style: { + width: 260, + marginTop: 12, + }, + }), + + h('button.primary', { + onClick: this.createNewKeychain.bind(this), + style: { + margin: 12, + }, + }, 'Import'), + + error ? h('span.warning', error) : null, + ]) + ) +} + +PrivateKeyImportView.prototype.createKeyringOnEnter = function (event) { + if (event.key === 'Enter') { + event.preventDefault() + this.createNewKeychain() + } +} + +PrivateKeyImportView.prototype.createNewKeychain = function () { + const input = document.getElementById('private-key-box') + const privateKey = input.value + this.props.dispatch(actions.addNewKeyring(type, [ privateKey ])) +} + diff --git a/ui/app/accounts/import/seed.js b/ui/app/accounts/import/seed.js new file mode 100644 index 000000000..b4a7c0afa --- /dev/null +++ b/ui/app/accounts/import/seed.js @@ -0,0 +1,30 @@ +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)(SeedImportSubview) + +function mapStateToProps (state) { + return {} +} + +inherits(SeedImportSubview, Component) +function SeedImportSubview () { + Component.call(this) +} + +SeedImportSubview.prototype.render = function () { + return ( + h('div', { + style: { + }, + }, [ + `Paste your seed phrase here!`, + h('textarea'), + h('br'), + h('button', 'Submit'), + ]) + ) +} + diff --git a/ui/app/accounts/index.js b/ui/app/accounts/index.js index edb15eafe..e6f376735 100644 --- a/ui/app/accounts/index.js +++ b/ui/app/accounts/index.js @@ -73,7 +73,8 @@ AccountsScreen.prototype.render = function () { const simpleAddress = identity.address.substring(2).toLowerCase() const keyring = keyrings.find((kr) => { - return kr.accounts.includes(simpleAddress) + return kr.accounts.includes(simpleAddress) || + kr.accounts.includes(identity.address) }) return h(AccountListItem, { @@ -154,6 +155,13 @@ AccountsScreen.prototype.addNewAccount = function () { this.props.dispatch(actions.addNewAccount(0)) } +/* An optional view proposed in this design: + * https://consensys.quip.com/zZVrAysM5znY +AccountsScreen.prototype.addNewAccount = function () { + this.props.dispatch(actions.navigateToNewAccountScreen()) +} +*/ + AccountsScreen.prototype.goHome = function () { this.props.dispatch(actions.goHome()) } diff --git a/ui/app/actions.js b/ui/app/actions.js index 5a3968f82..7934a329a 100644 --- a/ui/app/actions.js +++ b/ui/app/actions.js @@ -32,16 +32,20 @@ var actions = { SHOW_INIT_MENU: 'SHOW_INIT_MENU', SHOW_NEW_VAULT_SEED: 'SHOW_NEW_VAULT_SEED', SHOW_INFO_PAGE: 'SHOW_INFO_PAGE', + SHOW_IMPORT_PAGE: 'SHOW_IMPORT_PAGE', unlockMetamask: unlockMetamask, unlockFailed: unlockFailed, showCreateVault: showCreateVault, showRestoreVault: showRestoreVault, showInitializeMenu: showInitializeMenu, + showImportPage, createNewVaultAndKeychain: createNewVaultAndKeychain, createNewVaultAndRestore: createNewVaultAndRestore, createNewVaultInProgress: createNewVaultInProgress, addNewKeyring, addNewAccount, + NEW_ACCOUNT_SCREEN: 'NEW_ACCOUNT_SCREEN', + navigateToNewAccountScreen, showNewVaultSeed: showNewVaultSeed, showInfoPage: showInfoPage, // seed recovery actions @@ -249,7 +253,21 @@ function requestRevealSeed (password) { } function addNewKeyring (type, opts) { - return callBackgroundThenUpdate(background.addNewKeyring, type, opts) + return (dispatch) => { + dispatch(actions.showLoadingIndication()) + background.addNewKeyring(type, opts, (err, newState) => { + dispatch(actions.hideLoadingIndication()) + if (err) return dispatch(actions.displayWarning(err.message)) + dispatch(actions.updateMetamaskState(newState)) + dispatch(actions.showAccountsPage()) + }) + } +} + +function navigateToNewAccountScreen() { + return { + type: this.NEW_ACCOUNT_SCREEN, + } } function addNewAccount (ringNumber = 0) { @@ -376,6 +394,12 @@ function showInitializeMenu () { } } +function showImportPage () { + return { + type: actions.SHOW_IMPORT_PAGE, + } +} + function agreeToDisclaimer () { return (dispatch) => { dispatch(this.showLoadingIndication()) diff --git a/ui/app/app.js b/ui/app/app.js index 9efe95874..0e04c334c 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -20,6 +20,7 @@ const NoticeScreen = require('./components/notice') 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') const SandwichExpando = require('sandwich-expando') @@ -304,6 +305,13 @@ App.prototype.renderDropdown = function () { 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, { label: 'Lock', closeMenu: () => this.setState({ isMainMenuOpen: !isOpen }), @@ -411,6 +419,9 @@ App.prototype.renderPrimary = function () { case 'config': return h(ConfigScreen, {key: 'config'}) + case 'import-menu': + return h(Import, {key: 'import-menu'}) + case 'reveal-seed-conf': return h(RevealSeedConfirmation, {key: 'reveal-seed-conf'}) diff --git a/ui/app/components/buy-button-subview.js b/ui/app/components/buy-button-subview.js index 35eda647e..afda5bf59 100644 --- a/ui/app/components/buy-button-subview.js +++ b/ui/app/components/buy-button-subview.js @@ -7,6 +7,7 @@ const CoinbaseForm = require('./coinbase-form') const ShapeshiftForm = require('./shapeshift-form') const extension = require('../../../app/scripts/lib/extension') const Loading = require('./loading') +const TabBar = require('./tab-bar') module.exports = connect(mapStateToProps)(BuyButtonSubview) @@ -29,7 +30,6 @@ function BuyButtonSubview () { BuyButtonSubview.prototype.render = function () { const props = this.props - const currentForm = props.buyView.formView const isLoading = props.isSubLoading return ( @@ -53,43 +53,53 @@ BuyButtonSubview.prototype.render = function () { h(Loading, { isLoading }), - h('h3.flex-row.text-transform-uppercase', { - style: { - background: '#EBEBEB', - color: '#AEAEAE', - paddingTop: '4px', - justifyContent: 'space-around', + h(TabBar, { + tabs: [ + { + content: [ + 'Coinbase', + h('a', { + onClick: (event) => this.navigateTo('https://github.com/MetaMask/faq/blob/master/COINBASE.md'), + }, [ + h('i.fa.fa-question-circle', { + style: { + margin: '0px 5px', + }, + }), + ]), + ], + key: 'coinbase', + }, + { + content: [ + 'Shapeshift', + h('a', { + href: 'https://github.com/MetaMask/faq/blob/master/COINBASE.md', + onClick: (event) => this.navigateTo('https://info.shapeshift.io/about'), + }, [ + h('i.fa.fa-question-circle', { + style: { + margin: '0px 5px', + }, + }), + ]), + ], + key: 'shapeshift', + }, + ], + defaultTab: 'coinbase', + tabSelected: (key) => { + switch (key) { + case 'coinbase': + props.dispatch(actions.coinBaseSubview()) + break + case 'shapeshift': + props.dispatch(actions.shapeShiftSubview(props.provider.type)) + break + } }, - }, [ - h(currentForm.coinbase ? '.activeForm' : '.inactiveForm.pointer', { - onClick: () => props.dispatch(actions.coinBaseSubview()), - }, 'Coinbase'), - h('a', { - onClick: (event) => this.navigateTo('https://github.com/MetaMask/faq/blob/master/COINBASE.md'), - }, [ - h('i.fa.fa-question-circle', { - style: { - position: 'relative', - right: '33px', - }, - }), - ]), - h(currentForm.shapeshift ? '.activeForm' : '.inactiveForm.pointer', { - onClick: () => props.dispatch(actions.shapeShiftSubview(props.provider.type)), - }, 'Shapeshift'), + }), - h('a', { - href: 'https://github.com/MetaMask/faq/blob/master/COINBASE.md', - onClick: (event) => this.navigateTo('https://info.shapeshift.io/about'), - }, [ - h('i.fa.fa-question-circle', { - style: { - position: 'relative', - right: '28px', - }, - }), - ]), - ]), this.formVersionSubview(), ]) ) diff --git a/ui/app/components/tab-bar.js b/ui/app/components/tab-bar.js new file mode 100644 index 000000000..65078e0a4 --- /dev/null +++ b/ui/app/components/tab-bar.js @@ -0,0 +1,35 @@ +const Component = require('react').Component +const h = require('react-hyperscript') +const inherits = require('util').inherits + +module.exports = TabBar + +inherits(TabBar, Component) +function TabBar () { + Component.call(this) +} + +TabBar.prototype.render = function () { + const props = this.props + const state = this.state || {} + const { tabs = [], defaultTab, tabSelected } = props + const { subview = defaultTab } = state + + return ( + h('.flex-row.space-around.text-transform-uppercase', { + style: { + background: '#EBEBEB', + color: '#AEAEAE', + paddingTop: '4px', + }, + }, tabs.map((tab) => { + const { key, content } = tab + return h(subview === key ? '.activeForm' : '.inactiveForm.pointer', { + onClick: () => { + this.setState({ subview: key }) + tabSelected(key) + }, + }, content) + })) + ) +} diff --git a/ui/app/css/lib.css b/ui/app/css/lib.css index abbf8667e..a8df1d115 100644 --- a/ui/app/css/lib.css +++ b/ui/app/css/lib.css @@ -23,6 +23,14 @@ flex-direction: column; } +.space-between { + justify-content: space-between; +} + +.space-around { + justify-content: space-around; +} + .flex-column-bottom { display: flex; flex-direction: column-reverse; diff --git a/ui/app/info.js b/ui/app/info.js index cc753b2ea..e79580be4 100644 --- a/ui/app/info.js +++ b/ui/app/info.js @@ -110,7 +110,7 @@ InfoScreen.prototype.render = function () { onClick (event) { this.navigateTo(event.target.href) }, }, [ h('img.icon-size', { - src: manifest.icons[128], + src: manifest.icons['128'], style: { filter: 'grayscale(100%)', /* IE6-9 */ WebkitFilter: 'grayscale(100%)', /* Microsoft Edge and Firefox 35+ */ diff --git a/ui/app/reducers/app.js b/ui/app/reducers/app.js index dc7344b3e..ae91272cc 100644 --- a/ui/app/reducers/app.js +++ b/ui/app/reducers/app.js @@ -99,6 +99,14 @@ function reduceApp (state, action) { transForward: action.value, }) + case actions.SHOW_IMPORT_PAGE: + return extend(appState, { + currentView: { + name: 'import-menu', + }, + transForward: true, + }) + case actions.SHOW_INFO_PAGE: return extend(appState, { currentView: { @@ -128,6 +136,15 @@ function reduceApp (state, action) { isLoading: false, }) + case actions.NEW_ACCOUNT_SCREEN: + return extend(appState, { + currentView: { + name: 'new-account', + context: appState.currentView.context, + }, + transForward: true, + }) + case actions.SHOW_SEND_PAGE: return extend(appState, { currentView: { diff --git a/ui/app/unlock.js b/ui/app/unlock.js index 19f5eaec2..1aee3c5d0 100644 --- a/ui/app/unlock.js +++ b/ui/app/unlock.js @@ -26,7 +26,7 @@ UnlockScreen.prototype.render = function () { const state = this.props const warning = state.warning return ( - h('.flex-column.hey-im-here', [ + h('.flex-column', [ h('.unlock-screen.flex-column.flex-center.flex-grow', [ h(Mascot, { diff --git a/ui/css.js b/ui/css.js index 01f317acd..043363cd7 100644 --- a/ui/css.js +++ b/ui/css.js @@ -10,6 +10,7 @@ var cssFiles = { 'index.css': fs.readFileSync(path.join(__dirname, '/app/css/index.css'), 'utf8'), 'transitions.css': fs.readFileSync(path.join(__dirname, '/app/css/transitions.css'), 'utf8'), 'react-tooltip-component.css': fs.readFileSync(path.join(__dirname, '..', 'node_modules', 'react-tooltip-component', 'dist', 'react-tooltip-component.css'), 'utf8'), + 'react-css': fs.readFileSync(path.join(__dirname, '..', 'node_modules', 'react-select', 'dist', 'react-select.css'), 'utf8'), } function bundleCss () {