m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-23 02:10:12 +01:00
Code

new confirm add suggested token component

Browse Source
This commit is contained in:
Esteban MIno 2018-08-06 20:03:49 -04:00
parent 88933f3a66
commit af35b415ab
8 changed files with 164 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/_locales/en/messages.json
View File

@ -26,6 +26,9 @@
"addTokens": {
"message": "Add Tokens"
},
"addSuggestedTokens": {
"message": "Add Suggested Tokens"
},
"addAcquiredTokens": {
"message": "Add the tokens you've acquired using MetaMask"
},

19
ui/app/actions.js
View File

@ -1616,16 +1616,15 @@ function addTokens (tokens) {
function removeSuggestedTokens () {
return (dispatch) => {
dispatch(actions.showLoadingIndication())
return new Promise((resolve, reject) => {
background.removeSuggestedTokens((err) => {
dispatch(actions.hideLoadingIndication())
if (err) {
dispatch(actions.displayWarning(err.message))
reject(err)
}
dispatch(actions.clearPendingTokens())
resolve()
})
background.removeSuggestedTokens((err) => {
dispatch(actions.hideLoadingIndication())
if (err) {
dispatch(actions.displayWarning(err.message))
}
dispatch(actions.clearPendingTokens())
if (global.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_NOTIFICATION) {
return global.platform.closeCurrentWindow()
}
})
}
}

3
ui/app/app.js
View File

@ -26,6 +26,7 @@ const RestoreVaultPage = require('./components/pages/keychains/restore-vault').d
const RevealSeedConfirmation = require('./components/pages/keychains/reveal-seed')
const AddTokenPage = require('./components/pages/add-token')
const ConfirmAddTokenPage = require('./components/pages/confirm-add-token')
const ConfirmAddSuggestedTokenPage = require('./components/pages/confirm-add-suggested-token')
const CreateAccountPage = require('./components/pages/create-account')
const NoticeScreen = require('./components/pages/notice')
@ -52,6 +53,7 @@ const {
RESTORE_VAULT_ROUTE,
ADD_TOKEN_ROUTE,
CONFIRM_ADD_TOKEN_ROUTE,
CONFIRM_ADD_SUGGESTED_TOKEN_ROUTE,
NEW_ACCOUNT_ROUTE,
SEND_ROUTE,
CONFIRM_TRANSACTION_ROUTE,
@ -86,6 +88,7 @@ class App extends Component {
h(Authenticated, { path: SEND_ROUTE, exact, component: SendTransactionScreen }),
h(Authenticated, { path: ADD_TOKEN_ROUTE, exact, component: AddTokenPage }),
h(Authenticated, { path: CONFIRM_ADD_TOKEN_ROUTE, exact, component: ConfirmAddTokenPage }),
h(Authenticated, { path: CONFIRM_ADD_SUGGESTED_TOKEN_ROUTE, exact, component: ConfirmAddSuggestedTokenPage }),
h(Authenticated, { path: NEW_ACCOUNT_ROUTE, component: CreateAccountPage }),
h(Authenticated, { path: DEFAULT_ROUTE, exact, component: Home }),
])

118
ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js Normal file
View File

@ -0,0 +1,118 @@
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { DEFAULT_ROUTE } from '../../../routes'
import Button from '../../button'
import Identicon from '../../../components/identicon'
import TokenBalance from '../confirm-add-token/token-balance'
export default class ConfirmAddSuggestedToken extends Component {
static contextTypes = {
t: PropTypes.func,
}
static propTypes = {
history: PropTypes.object,
clearPendingTokens: PropTypes.func,
addTokens: PropTypes.func,
pendingTokens: PropTypes.object,
removeSuggestedTokens: PropTypes.func,
}
componentDidMount () {
const { pendingTokens = {}, history } = this.props
if (Object.keys(pendingTokens).length === 0) {
history.push(DEFAULT_ROUTE)
}
}
getTokenName (name, symbol) {
return typeof name === 'undefined'
? symbol
: `${name} (${symbol})`
}
render () {
const { addTokens, clearPendingTokens, pendingTokens, removeSuggestedTokens } = this.props
return (
<div className="page-container">
<div className="page-container__header">
<div className="page-container__title">
{ this.context.t('addSuggestedTokens') }
</div>
<div className="page-container__subtitle">
{ this.context.t('likeToAddTokens') }
</div>
</div>
<div className="page-container__content">
<div className="confirm-add-token">
<div className="confirm-add-token__header">
<div className="confirm-add-token__token">
{ this.context.t('token') }
</div>
<div className="confirm-add-token__balance">
{ this.context.t('balance') }
</div>
</div>
<div className="confirm-add-token__token-list">
{
Object.entries(pendingTokens)
.map(([ address, token ]) => {
const { name, symbol } = token
return (
<div
className="confirm-add-token__token-list-item"
key={address}
>
<div className="confirm-add-token__token confirm-add-token__data">
<Identicon
className="confirm-add-token__token-icon"
diameter={48}
address={address}
/>
<div className="confirm-add-token__name">
{ this.getTokenName(name, symbol) }
</div>
</div>
<div className="confirm-add-token__balance">
<TokenBalance token={token} />
</div>
</div>
)
})
}
</div>
</div>
</div>
<div className="page-container__footer">
<Button
type="default"
large
className="page-container__footer-button"
onClick={() => {
removeSuggestedTokens()
}}
>
{ this.context.t('cancel') }
</Button>
<Button
type="primary"
large
className="page-container__footer-button"
onClick={() => {
addTokens(pendingTokens)
.then(() => {
clearPendingTokens()
removeSuggestedTokens()
})
}}
>
{ this.context.t('addTokens') }
</Button>
</div>
</div>
)
}
}

25
ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.container.js Normal file
View File

@ -0,0 +1,25 @@
import { connect } from 'react-redux'
import ConfirmAddSuggestedToken from './confirm-add-suggested-token.component'
const extend = require('xtend')
const { addTokens, clearPendingTokens, removeSuggestedTokens } = require('../../../actions')
const mapStateToProps = ({ metamask }) => {
const { pendingTokens, suggestedTokens } = metamask
const params = extend(pendingTokens, suggestedTokens)
return {
pendingTokens: params,
}
}
const mapDispatchToProps = dispatch => {
return {
addTokens: tokens => dispatch(addTokens(tokens)),
clearPendingTokens: () => dispatch(clearPendingTokens()),
removeSuggestedTokens: () => dispatch(removeSuggestedTokens()),
}
}
export default connect(mapStateToProps, mapDispatchToProps)(ConfirmAddSuggestedToken)

2
ui/app/components/pages/confirm-add-suggested-token/index.js Normal file
View File

@ -0,0 +1,2 @@
import ConfirmAddSuggestedToken from './confirm-add-suggested-token.container'
module.exports = ConfirmAddSuggestedToken

4
ui/app/components/pages/home.js
View File

@ -25,7 +25,7 @@ const {
RESTORE_VAULT_ROUTE,
CONFIRM_TRANSACTION_ROUTE,
NOTICE_ROUTE,
CONFIRM_ADD_TOKEN_ROUTE,
CONFIRM_ADD_SUGGESTED_TOKEN_ROUTE,
} = require('../../routes')
const { unconfirmedTransactionsCountSelector } = require('../../selectors/confirm-transaction')
@ -40,7 +40,7 @@ class Home extends Component {
// suggested new tokens
if (Object.keys(suggestedTokens).length > 0) {
history.push(CONFIRM_ADD_TOKEN_ROUTE)
history.push(CONFIRM_ADD_SUGGESTED_TOKEN_ROUTE)
}
// unapprovedTxs and unapproved messages

2
ui/app/routes.js
View File

@ -7,6 +7,7 @@ const CONFIRM_SEED_ROUTE = '/confirm-seed'
const RESTORE_VAULT_ROUTE = '/restore-vault'
const ADD_TOKEN_ROUTE = '/add-token'
const CONFIRM_ADD_TOKEN_ROUTE = '/confirm-add-token'
const CONFIRM_ADD_SUGGESTED_TOKEN_ROUTE = '/confirm-add-suggested-token'
const NEW_ACCOUNT_ROUTE = '/new-account'
const IMPORT_ACCOUNT_ROUTE = '/new-account/import'
const CONNECT_HARDWARE_ROUTE = '/new-account/connect'
@ -41,6 +42,7 @@ module.exports = {
RESTORE_VAULT_ROUTE,
ADD_TOKEN_ROUTE,
CONFIRM_ADD_TOKEN_ROUTE,
CONFIRM_ADD_SUGGESTED_TOKEN_ROUTE,
NEW_ACCOUNT_ROUTE,
IMPORT_ACCOUNT_ROUTE,
CONNECT_HARDWARE_ROUTE,