1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00

Create add token button and template view

This commit is contained in:
Dan Finlay 2017-06-14 20:42:48 -07:00
parent a80945e730
commit 0e1e0aa323
6 changed files with 166 additions and 20 deletions

View File

@ -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()
}

View File

@ -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,

91
ui/app/add-token.js Normal file
View File

@ -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'),
]),
]),
])
)
}

View File

@ -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'})

View File

@ -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', `
}, [
h('style', `
li.token-cell {
display: flex;
flex-direction: row;
align-items: center;
padding: 10px;
}
li.token-cell {
display: flex;
flex-direction: row;
align-items: center;
padding: 10px;
}
li.token-cell > h3 {
margin-left: 12px;
}
li.token-cell > h3 {
margin-left: 12px;
}
li.token-cell:hover {
background: white;
cursor: pointer;
}
li.token-cell:hover {
background: white;
cursor: pointer;
}
`)].concat(tokenViews.length ? tokenViews : this.message('No Tokens Found.')))
)
`),
...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) {

View File

@ -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',