aboutsummaryrefslogtreecommitdiffstats
path: root/ui
diff options
context:
space:
mode:
Diffstat (limited to 'ui')
-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/buy-button-subview.js83
-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
-rw-r--r--ui/app/unlock.js2
9 files changed, 173 insertions, 38 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/buy-button-subview.js b/ui/app/components/buy-button-subview.js
index b564733b1..4e2d3739c 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)
@@ -53,43 +54,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(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(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('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 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: {
diff --git a/ui/app/unlock.js b/ui/app/unlock.js
index ec467f483..b2c693493 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, {
generated by cgit v1.2.3 (git 2.25.1) at 2025-02-04 10:46:12 +0800