diff options
| -rw-r--r-- | package.json | 1 | ||||
| -rw-r--r-- | ui/app/accounts/import.js | 30 | ||||
| -rw-r--r-- | ui/app/accounts/import/index.js | 70 | ||||
| -rw-r--r-- | ui/css.js | 1 |
4 files changed, 72 insertions, 30 deletions
diff --git a/package.json b/package.json index cbe1a7b55..36cc3f02a 100644 --- a/package.json +++ b/package.json @@ -74,6 +74,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/ui/app/accounts/import.js b/ui/app/accounts/import.js deleted file mode 100644 index d15b30fd2..000000000 --- a/ui/app/accounts/import.js +++ /dev/null @@ -1,30 +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)(COMPONENTNAME) - -function mapStateToProps (state) { - return {} -} - -inherits(COMPONENTNAME, Component) -function COMPONENTNAME () { - Component.call(this) -} - -COMPONENTNAME.prototype.render = function () { - const props = this.props - - return ( - h('div', { - style: { - background: 'blue', - }, - }, [ - `Hello, ${props.sender}`, - ]) - ) -} - diff --git a/ui/app/accounts/import/index.js b/ui/app/accounts/import/index.js new file mode 100644 index 000000000..a16b1c39d --- /dev/null +++ b/ui/app/accounts/import/index.js @@ -0,0 +1,70 @@ +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' + +module.exports = connect(mapStateToProps)(AccountImportSubview) + +function mapStateToProps (state) { + return { + types: state.metamask.keyringTypes, + } +} + +inherits(AccountImportSubview, Component) +function AccountImportSubview () { + Component.call(this) +} + +AccountImportSubview.prototype.render = function () { + const props = this.props + const state = this.state || {} + const { types } = props + const { type } = state + + return ( + h('div', { + style: { + }, + }, [ + h('div', { + style: { + padding: '10px', + background: 'rgb(242,242,242)', + color: 'rgb(174, 174, 174)', + }, + }, [ + h('h3', 'SELECT TYPE'), + ]), + + h('style', ` + .has-value.Select--single > .Select-control .Select-value .Select-value-label, .Select-value-label { + color: rgb(174,174,174); + } + `), + + h('div', { + style: { + padding: '10px', + }, + }, [ + h(Select, { + name: 'import-type-select', + clearable: false, + value: type || types[0], + options: types.map((type) => { + return { + value: type, + label: type, + } + }), + onChange: (opt) => { + this.setState({ type: opt.value }) + }, + }) + ]) + ]) + ) +} + @@ -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 () { |