aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app
diff options
context:
space:
mode:
Diffstat (limited to 'ui/app')
-rw-r--r--ui/app/accounts/index.js2
-rw-r--r--ui/app/accounts/new.js60
-rw-r--r--ui/app/actions.js8
-rw-r--r--ui/app/app.js4
-rw-r--r--ui/app/components/tab-bar.js35
-rw-r--r--ui/app/css/lib.css8
-rw-r--r--ui/app/reducers/app.js9
7 files changed, 125 insertions, 1 deletions
diff --git a/ui/app/accounts/index.js b/ui/app/accounts/index.js
index 2e8321a77..65cf82b2c 100644
--- a/ui/app/accounts/index.js
+++ b/ui/app/accounts/index.js
@@ -143,7 +143,7 @@ AccountsScreen.prototype.onShowDetail = function (address, event) {
}
AccountsScreen.prototype.addNewAccount = function () {
- this.props.dispatch(actions.addNewAccount(0))
+ this.props.dispatch(actions.navigateToNewAccountScreen())
}
AccountsScreen.prototype.goHome = function () {
diff --git a/ui/app/accounts/new.js b/ui/app/accounts/new.js
new file mode 100644
index 000000000..0356bb313
--- /dev/null
+++ b/ui/app/accounts/new.js
@@ -0,0 +1,60 @@
+const inherits = require('util').inherits
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const connect = require('react-redux').connect
+const TabBar = require('../components/tab-bar')
+
+module.exports = connect(mapStateToProps)(NewAccountScreen)
+
+function mapStateToProps (state) {
+ return {}
+}
+
+inherits(NewAccountScreen, Component)
+function NewAccountScreen () {
+ Component.call(this)
+}
+
+NewAccountScreen.prototype.render = function () {
+ const props = this.props
+ const state = this.state || {}
+ const subview = state.subview || 'new'
+
+ return (
+ h('.flex-column', {
+ style: {
+ },
+ }, [
+
+ // title and nav
+ h('.flex-row.space-between', {
+ style: {
+ alignItems: 'center',
+ padding: '0px 20px',
+ }
+ }, [
+ h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', {
+ onClick: this.goHome.bind(this),
+ }),
+ h('h2.page-subtitle', 'Add Account'),
+ h('i', { style: { width: '18px' } }),
+ ]),
+
+ h(TabBar, {
+ tabs: [
+ { content: 'Create New', key: 'new' },
+ { content: 'Import', key: 'import' },
+ ],
+ defaultTab: 'new',
+ tabSelected: (key) => {
+ console.log('selected ' + key)
+ }
+ }),
+
+ ])
+ )
+}
+
+NewAccountScreen.prototype.goHome = function() {
+ this.props.dispatch(actions.showAccountPage())
+}
diff --git a/ui/app/actions.js b/ui/app/actions.js
index 070ba2da0..0a0a24725 100644
--- a/ui/app/actions.js
+++ b/ui/app/actions.js
@@ -28,6 +28,8 @@ var actions = {
createNewVaultInProgress: createNewVaultInProgress,
addNewKeyring,
addNewAccount,
+ NEW_ACCOUNT_SCREEN: 'NEW_ACCOUNT_SCREEN',
+ navigateToNewAccountScreen,
showNewVaultSeed: showNewVaultSeed,
showInfoPage: showInfoPage,
// seed recovery actions
@@ -250,6 +252,12 @@ function addNewKeyring (type, opts) {
}
}
+function navigateToNewAccountScreen() {
+ return {
+ type: this.NEW_ACCOUNT_SCREEN
+ }
+}
+
function addNewAccount (ringNumber = 0) {
return (dispatch) => {
dispatch(actions.showLoadingIndication())
diff --git a/ui/app/app.js b/ui/app/app.js
index a2532c153..1651442e9 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -29,6 +29,7 @@ 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')
+const NewAccountScreen = require('./accounts/new')
module.exports = connect(mapStateToProps)(App)
@@ -400,6 +401,9 @@ App.prototype.renderPrimary = function () {
case 'accountDetail':
return h(AccountDetailScreen, {key: 'account-detail'})
+ case 'new-account':
+ return h(NewAccountScreen, {key: 'new-account'})
+
case 'sendTransaction':
return h(SendTransactionScreen, {key: 'send-transaction'})
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 bcd6a4a67..95764c2b8 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/reducers/app.js b/ui/app/reducers/app.js
index 49507eb30..7f4537510 100644
--- a/ui/app/reducers/app.js
+++ b/ui/app/reducers/app.js
@@ -106,6 +106,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: {