aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--ui/app/account-detail.js6
-rw-r--r--ui/app/actions.js11
-rw-r--r--ui/app/add-token.js91
-rw-r--r--ui/app/app.js5
-rw-r--r--ui/app/components/token-list.js71
-rw-r--r--ui/app/reducers/app.js10
6 files changed, 170 insertions, 24 deletions
diff --git a/ui/app/account-detail.js b/ui/app/account-detail.js
index 836032b3c..19f2cba59 100644
--- a/ui/app/account-detail.js
+++ b/ui/app/account-detail.js
@@ -277,7 +277,11 @@ AccountDetailScreen.prototype.tabSwitchView = function () {
switch (currentAccountTab) {
case 'tokens':
- return h(TokenList, { userAddress: address, network })
+ return h(TokenList, {
+ userAddress: address,
+ network,
+ addToken: () => this.props.dispatch(actions.showAddTokenPage()),
+ })
default:
return this.transactionList()
}
diff --git a/ui/app/actions.js b/ui/app/actions.js
index b6b5d6eb1..d17d4610e 100644
--- a/ui/app/actions.js
+++ b/ui/app/actions.js
@@ -121,7 +121,9 @@ var actions = {
SET_PROVIDER_TYPE: 'SET_PROVIDER_TYPE',
USE_ETHERSCAN_PROVIDER: 'USE_ETHERSCAN_PROVIDER',
useEtherscanProvider: useEtherscanProvider,
- showConfigPage: showConfigPage,
+ showConfigPage,
+ SHOW_ADD_TOKEN_PAGE: 'SHOW_ADD_TOKEN_PAGE',
+ showAddTokenPage,
setRpcTarget: setRpcTarget,
setDefaultRpcTarget: setDefaultRpcTarget,
setProviderType: setProviderType,
@@ -627,6 +629,13 @@ function showConfigPage (transitionForward = true) {
}
}
+function showAddTokenPage (transitionForward = true) {
+ return {
+ type: actions.SHOW_ADD_TOKEN_PAGE,
+ value: transitionForward,
+ }
+}
+
function goBackToInitView () {
return {
type: actions.BACK_TO_INIT_MENU,
diff --git a/ui/app/add-token.js b/ui/app/add-token.js
new file mode 100644
index 000000000..5356b6a0b
--- /dev/null
+++ b/ui/app/add-token.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
+const actions = require('./actions')
+
+module.exports = connect(mapStateToProps)(AddTokenScreen)
+
+function mapStateToProps (state) {
+ return {}
+}
+
+inherits(AddTokenScreen, Component)
+function AddTokenScreen () {
+ this.state = { warning: null }
+ Component.call(this)
+}
+
+AddTokenScreen.prototype.render = function () {
+ const state = this.state
+ const { warning } = state
+ return (
+ h('.flex-column.flex-grow', [
+
+ // subtitle and nav
+ h('.section-title.flex-row.flex-center', [
+ h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', {
+ onClick: (event) => {
+ state.dispatch(actions.goHome())
+ },
+ }),
+ h('h2.page-subtitle', 'Add Token'),
+ ]),
+
+ h('.error', {
+ style: {
+ display: warning ? 'block' : 'none',
+ padding: '0 20px',
+ textAlign: 'center',
+ },
+ }, warning),
+
+ // conf view
+ h('.flex-column.flex-justify-center.flex-grow.select-none', [
+ h('.flex-space-around', {
+ style: {
+ padding: '20px',
+ },
+ }, [
+
+ h('div', [
+ h('span', {
+ style: { fontWeight: 'bold', paddingRight: '10px'},
+ }, 'Token Sybmol'),
+ ]),
+
+ h('div', { style: {display: 'flex'} }, [
+ h('input#token_symbol', {
+ placeholder: `Like "ETH"`,
+ style: {
+ width: 'inherit',
+ flex: '1 0 auto',
+ height: '30px',
+ margin: '8px',
+ },
+ onKeyPress (event) {
+ if (event.key === 'Enter') {
+ var element = event.target
+ var newRpc = element.value
+ }
+ },
+ }),
+ ]),
+
+ h('button', {
+ style: {
+ alignSelf: 'center',
+ },
+ onClick (event) {
+ event.preventDefault()
+ var tokenSymbolEl = document.querySelector('input#token_symbol')
+ var tokenSymbol = tokenSymbolEl.value
+ console.log(tokenSymbol)
+ },
+ }, 'Add'),
+ ]),
+ ]),
+ ])
+ )
+}
+
diff --git a/ui/app/app.js b/ui/app/app.js
index d444a8349..8bf69b5ad 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -19,6 +19,7 @@ const NoticeScreen = require('./components/notice')
const generateLostAccountsNotice = require('../lib/lost-accounts-notice')
// other views
const ConfigScreen = require('./config')
+const AddTokenScreen = require('./add-token')
const Import = require('./accounts/import')
const InfoScreen = require('./info')
const Loading = require('./components/loading')
@@ -458,6 +459,10 @@ App.prototype.renderPrimary = function () {
log.debug('rendering confirm tx screen')
return h(ConfirmTxScreen, {key: 'confirm-tx'})
+ case 'add-token':
+ log.debug('rendering add-token screen from unlock screen.')
+ return h(AddTokenScreen, {key: 'add-token'})
+
case 'config':
log.debug('rendering config screen')
return h(ConfigScreen, {key: 'config'})
diff --git a/ui/app/components/token-list.js b/ui/app/components/token-list.js
index c560a6072..d230ce74a 100644
--- a/ui/app/components/token-list.js
+++ b/ui/app/components/token-list.js
@@ -40,32 +40,59 @@ TokenList.prototype.render = function () {
return h(TokenCell, tokenData)
})
- return (
+ return h('div', [
h('ol', {
style: {
- height: '302px',
+ height: '260px',
overflowY: 'auto',
+ display: 'flex',
+ flexDirection: 'column',
},
- }, [h('style', `
-
- li.token-cell {
- display: flex;
- flex-direction: row;
- align-items: center;
- padding: 10px;
- }
-
- li.token-cell > h3 {
- margin-left: 12px;
- }
-
- li.token-cell:hover {
- background: white;
- cursor: pointer;
- }
-
- `)].concat(tokenViews.length ? tokenViews : this.message('No Tokens Found.')))
- )
+ }, [
+ h('style', `
+
+ li.token-cell {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding: 10px;
+ }
+
+ li.token-cell > h3 {
+ margin-left: 12px;
+ }
+
+ li.token-cell:hover {
+ background: white;
+ cursor: pointer;
+ }
+
+ `),
+ ...tokenViews,
+ tokenViews.length ? null : this.message('No Tokens Found.'),
+ ]),
+ this.addTokenButtonElement(),
+ ])
+}
+
+TokenList.prototype.addTokenButtonElement = function () {
+ return h('div', [
+ h('div.footer.hover-white.pointer', {
+ key: 'reveal-account-bar',
+ onClick: () => {
+ this.props.addToken()
+ },
+ style: {
+ display: 'flex',
+ height: '40px',
+ padding: '10px',
+ justifyContent: 'center',
+ alignItems: 'center',
+ },
+ }, [
+ h('i.fa.fa-plus.fa-lg'),
+ ]),
+ ])
}
TokenList.prototype.message = function (body) {
diff --git a/ui/app/reducers/app.js b/ui/app/reducers/app.js
index deacad0a7..2fcc9bfe0 100644
--- a/ui/app/reducers/app.js
+++ b/ui/app/reducers/app.js
@@ -103,7 +103,17 @@ function reduceApp (state, action) {
transForward: action.value,
})
+ case actions.SHOW_ADD_TOKEN_PAGE:
+ return extend(appState, {
+ currentView: {
+ name: 'add-token',
+ context: appState.currentView.context,
+ },
+ transForward: action.value,
+ })
+
case actions.SHOW_IMPORT_PAGE:
+
return extend(appState, {
currentView: {
name: 'import-menu',
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-10 15:02:17 +0800