Extract Add Token button into its own component

feature/default_network_editable
Whymarrh Whitby 6 years ago
parent 97b914abea
commit 42fa54678f
  1. 6
      app/_locales/en/messages.json
  2. 4
      test/e2e/beta/metamask-beta-ui.spec.js
  3. 34
      ui/app/components/add-token-button/add-token-button.component.js
  4. 1
      ui/app/components/add-token-button/index.js
  5. 26
      ui/app/components/add-token-button/index.scss
  6. 2
      ui/app/components/index.scss
  7. 30
      ui/app/components/wallet-view.js
  8. 12
      ui/app/css/itcss/components/newui-sections.scss

@ -140,6 +140,9 @@
"clickCopy": {
"message": "Click to Copy"
},
"clickToAdd": {
"message": "Click on $1 to add them to your account"
},
"close": {
"message": "Close"
},
@ -641,6 +644,9 @@
"min": {
"message": "Minimum"
},
"missingYourTokens": {
"message": "Don't see your tokens?"
},
"myAccounts": {
"message": "My Accounts"
},

@ -662,7 +662,7 @@ describe('MetaMask', function () {
})
it('clicks on the Add Token button', async () => {
const addToken = await driver.findElement(By.css('.wallet-view__add-token-button'))
const addToken = await driver.findElement(By.xpath(`//div[contains(text(), 'Add Token')]`))
await addToken.click()
await delay(regularDelayMs)
})
@ -1002,7 +1002,7 @@ describe('MetaMask', function () {
describe('Add existing token using search', () => {
it('clicks on the Add Token button', async () => {
const addToken = await findElement(driver, By.xpath(`//button[contains(text(), 'Add Token')]`))
const addToken = await findElement(driver, By.xpath(`//div[contains(text(), 'Add Token')]`))
await addToken.click()
await delay(regularDelayMs)
})

@ -0,0 +1,34 @@
import PropTypes from 'prop-types'
import React, {PureComponent} from 'react'
export default class AddTokenButton extends PureComponent {
static contextTypes = {
t: PropTypes.func.isRequired,
}
static defaultProps = {
onClick: () => {},
}
static propTypes = {
onClick: PropTypes.func,
}
render () {
const { t } = this.context
const { onClick } = this.props
return (
<div className="add-token-button">
<h1 className="add-token-button__help-header">{t('missingYourTokens')}</h1>
<p className="add-token-button__help-desc">{t('clickToAdd', [t('addToken')])}</p>
<div
className="add-token-button__button"
onClick={onClick}
>
{t('addToken')}
</div>
</div>
)
}
}

@ -0,0 +1 @@
export { default } from './add-token-button.component'

@ -0,0 +1,26 @@
.add-token-button {
display: flex;
flex-direction: column;
color: lighten($scorpion, 25%);
width: 185px;
margin: 36px auto;
text-align: center;
&__help-header {
font-weight: bold;
font-size: 1rem;
}
&__help-desc {
font-size: 0.75rem;
margin-top: 1rem;
}
&__button {
font-size: 0.75rem;
margin: 1rem;
text-transform: uppercase;
color: $curious-blue;
cursor: pointer;
}
}

@ -1,5 +1,7 @@
@import './app-header/index';
@import './add-token-button/index';
@import './button-group/index';
@import './card/index';

@ -17,7 +17,7 @@ const TokenList = require('./token-list')
const selectors = require('../selectors')
const { ADD_TOKEN_ROUTE } = require('../routes')
import Button from './button'
import AddTokenButton from './add-token-button'
module.exports = compose(
withRouter,
@ -100,15 +100,30 @@ WalletView.prototype.renderWalletBalance = function () {
])
}
WalletView.prototype.renderAddToken = function () {
const {
sidebarOpen,
hideSidebar,
history,
} = this.props
return h(AddTokenButton, {
onClick () {
history.push(ADD_TOKEN_ROUTE)
if (sidebarOpen) {
hideSidebar()
}
},
})
}
WalletView.prototype.render = function () {
const {
responsiveDisplayClassname,
selectedAddress,
keyrings,
showAccountDetailModal,
sidebarOpen,
hideSidebar,
history,
identities,
} = this.props
// temporary logs + fake extra wallets
@ -201,14 +216,7 @@ WalletView.prototype.render = function () {
h(TokenList),
h(Button, {
type: 'primary',
className: 'wallet-view__add-token-button',
onClick: () => {
history.push(ADD_TOKEN_ROUTE)
sidebarOpen && hideSidebar()
},
}, this.context.t('addToken')),
this.renderAddToken(),
])
}

@ -120,18 +120,6 @@ $wallet-view-bg: $alabaster;
}
}
}
&__add-token-button {
flex: 0 0 auto;
margin: 36px auto;
background: none;
transition: border-color .3s ease;
width: 150px;
&:hover {
border-color: $curious-blue;
}
}
}
@media screen and (min-width: 576px) {

Loading…
Cancel
Save