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

Add buttons; handle back; add yarn.lock

This commit is contained in:
Chi Kei Chan 2017-09-11 22:14:09 -07:00
parent 392d0d020c
commit 062e67bff8
9 changed files with 9861 additions and 41 deletions

View File

@ -58,6 +58,7 @@
"boron": "^0.2.3", "boron": "^0.2.3",
"browser-passworder": "^2.0.3", "browser-passworder": "^2.0.3",
"browserify-derequire": "^0.9.4", "browserify-derequire": "^0.9.4",
"classnames": "^2.2.5",
"client-sw-ready-event": "^3.3.0", "client-sw-ready-event": "^3.3.0",
"clone": "^2.1.1", "clone": "^2.1.1",
"copy-to-clipboard": "^3.0.8", "copy-to-clipboard": "^3.0.8",

View File

@ -23,16 +23,16 @@ function mapStateToProps (state) {
const addressBook = state.metamask.addressBook const addressBook = state.metamask.addressBook
const conversionRate = state.metamask.conversionRate const conversionRate = state.metamask.conversionRate
const currentBlockGasLimit = state.metamask.currentBlockGasLimit const currentBlockGasLimit = state.metamask.currentBlockGasLimit
// const accounts = state.metamask.accounts const accounts = state.metamask.accounts
// const network = state.metamask.network // const network = state.metamask.network
const selectedTokenAddress = state.metamask.selectedTokenAddress const selectedTokenAddress = state.metamask.selectedTokenAddress
// const selectedAddress = state.metamask.selectedAddress || Object.keys(accounts)[0] const selectedAddress = state.metamask.selectedAddress || Object.keys(accounts)[0]
// const checksumAddress = selectedAddress && ethUtil.toChecksumAddress(selectedAddress) // const checksumAddress = selectedAddress && ethUtil.toChecksumAddress(selectedAddress)
// const identity = identities[selectedAddress] // const identity = identities[selectedAddress]
return { return {
// sidebarOpen, // sidebarOpen,
// selectedAddress, selectedAddress,
// checksumAddress, // checksumAddress,
selectedTokenAddress, selectedTokenAddress,
identities, identities,
@ -48,6 +48,7 @@ function mapStateToProps (state) {
function mapDispatchToProps (dispatch) { function mapDispatchToProps (dispatch) {
return { return {
backToAccountDetail: address => dispatch(actions.backToAccountDetail(address)),
// showSidebar: () => { dispatch(actions.showSidebar()) }, // showSidebar: () => { dispatch(actions.showSidebar()) },
// hideSidebar: () => { dispatch(actions.hideSidebar()) }, // hideSidebar: () => { dispatch(actions.hideSidebar()) },
// showModal: (payload) => { dispatch(actions.showModal(payload)) }, // showModal: (payload) => { dispatch(actions.showModal(payload)) },
@ -121,6 +122,7 @@ SendTokenScreen.prototype.renderAmountInput = function () {
h('span', ['Amount']), h('span', ['Amount']),
h(CurrencyToggle, { h(CurrencyToggle, {
selectedCurrency, selectedCurrency,
currencies: [ symbol, 'USD' ],
onClick: currency => this.setState({ selectedCurrency: currency }), onClick: currency => this.setState({ selectedCurrency: currency }),
}), }),
]), ]),
@ -178,7 +180,7 @@ SendTokenScreen.prototype.renderGasInput = function () {
} }
SendTokenScreen.prototype.renderMemoInput = function () { SendTokenScreen.prototype.renderMemoInput = function () {
return h('div.send-screen-input-wrapper', {}, [ return h('div.send-screen-input-wrapper', [
h('div', {}, ['Transaction memo (optional)']), h('div', {}, ['Transaction memo (optional)']),
h( h(
'input.large-input.send-screen-input', 'input.large-input.send-screen-input',
@ -187,6 +189,19 @@ SendTokenScreen.prototype.renderMemoInput = function () {
]) ])
} }
SendTokenScreen.prototype.renderButtons = function () {
const { selectedAddress, backToAccountDetail } = this.props
return h('div.send-token__button-group', [
h('button.send-token__button-next.btn-secondary', {
}, ['Next']),
h('button.send-token__button-cancel.btn-tertiary', {
onClick: () => backToAccountDetail(selectedAddress),
}, ['Cancel']),
])
}
SendTokenScreen.prototype.render = function () { SendTokenScreen.prototype.render = function () {
const { const {
selectedTokenAddress, selectedTokenAddress,
@ -194,20 +209,23 @@ SendTokenScreen.prototype.render = function () {
} = this.props } = this.props
return h('div.send-token', [ return h('div.send-token', [
h(Identicon, { h('div.send-token__content', [
diameter: 75, h(Identicon, {
address: selectedTokenAddress, diameter: 75,
}), address: selectedTokenAddress,
h('div.send-token__title', ['Send Tokens']), }),
h('div.send-token__description', ['Send Tokens to anyone with an Ethereum account']), h('div.send-token__title', ['Send Tokens']),
h('div.send-token__balance-text', ['Your Token Balance is:']), h('div.send-token__description', ['Send Tokens to anyone with an Ethereum account']),
h('div.send-token__token-balance', [ h('div.send-token__balance-text', ['Your Token Balance is:']),
h(TokenBalance, { token: selectedToken, balanceOnly: true }), h('div.send-token__token-balance', [
h(TokenBalance, { token: selectedToken, balanceOnly: true }),
]),
h('div.send-token__token-symbol', [selectedToken.symbol]),
this.renderToAddressInput(),
this.renderAmountInput(),
this.renderGasInput(),
this.renderMemoInput(),
]), ]),
h('div.send-token__token-symbol', [selectedToken.symbol]), this.renderButtons(),
this.renderToAddressInput(),
this.renderAmountInput(),
this.renderGasInput(),
this.renderMemoInput(),
]) ])
} }

View File

@ -1,6 +1,8 @@
const Component = require('react').Component const Component = require('react').Component
const h = require('react-hyperscript') const h = require('react-hyperscript')
const inherits = require('util').inherits const inherits = require('util').inherits
const classnames = require('classnames')
module.exports = CurrencyToggle module.exports = CurrencyToggle
inherits(CurrencyToggle, Component) inherits(CurrencyToggle, Component)
@ -8,18 +10,25 @@ function CurrencyToggle () {
Component.call(this) Component.call(this)
} }
const defaultCurrencies = [ 'ETH', 'USD' ]
CurrencyToggle.prototype.render = function () { CurrencyToggle.prototype.render = function () {
const { onClick, currentCurrency } = this.props const { onClick, currentCurrency } = this.props
const [currencyA, currencyB] = this.props.currencies || defaultCurrencies
return h('span', {}, [ return h('span.currency-toggle', {}, [
h('span', { h('span', {
className: currentCurrency === 'ETH' ? 'selected-currency' : 'unselected-currency', className: classnames('currency-toggle__item', {
onClick: () => onClick('ETH'), 'currency-toggle__item--selected': currencyA === currentCurrency,
}),
onClick: () => onClick(currencyA),
}, ['ETH']), }, ['ETH']),
'<>', '<>',
h('span', { h('span', {
className: currentCurrency === 'USD' ? 'selected-currency' : 'unselected-currency', className: classnames('currency-toggle__item', {
onClick: () => onClick('USD'), 'currency-toggle__item--selected': currencyB === currentCurrency,
}),
onClick: () => onClick(currencyB),
}, ['USD']), }, ['USD']),
]) // holding on icon from design ]) // holding on icon from design
} }

View File

@ -49,9 +49,7 @@ TxList.prototype.renderTranstions = function () {
const { txsToRender } = this.props const { txsToRender } = this.props
return txsToRender.length return txsToRender.length
? txsToRender.map((transaction) => { ? txsToRender.map((transaction) => this.renderTransactionListItem(transaction))
return this.renderTransactionListItem(transaction)
})
: [h('div.tx-list-item.tx-list-item--empty', [ 'No Transactions' ])] : [h('div.tx-list-item.tx-list-item--empty', [ 'No Transactions' ])]
} }

View File

@ -82,3 +82,21 @@ button.btn-thin {
padding: 6px; padding: 6px;
font-size: 13px; font-size: 13px;
} }
.btn-secondary {
border: 1px solid #979797;
border-radius: 2px;
background-color: $white;
font-size: 16px;
line-height: 24px;
padding: 16px 42px;
}
.btn-tertiary {
border: 1px solid transparent;
border-radius: 2px;
background-color: transparent;
font-size: 16px;
line-height: 24px;
padding: 16px 42px;
}

View File

@ -80,12 +80,16 @@
justify-content: space-between; justify-content: space-between;
} }
.selected-currency { .currency-toggle {
color: $curious-blue; &__item {
} color: $curious-blue;
cursor: pointer;
.unselected-currency { &--selected {
cursor: pointer; color: $black;
cursor: default;
}
}
} }
.send-screen-gas-input-customize { .send-screen-gas-input-customize {
@ -115,7 +119,7 @@
padding: 13px 19px; padding: 13px 19px;
font-size: 16px; font-size: 16px;
border-radius: 4px; border-radius: 4px;
font-family: 'Lato'; font-family: "Lato";
font-weight: 500; font-weight: 500;
} }
@ -205,19 +209,24 @@
} }
.send-token { .send-token {
width: 498px;
height: 605px;
background-color: #fff;
display: flex; display: flex;
flex-flow: column nowrap; flex-flow: column nowrap;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .08);
padding: 46px 40.5px 26px;
position: relative;
top: -26px;
z-index: 25; z-index: 25;
align-items: center;
font-family: "Montserrat Light"; font-family: "Montserrat Light";
&__content {
width: 498px;
height: 605px;
background-color: #fff;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .08);
padding: 46px 40.5px 26px;
position: relative;
top: -26px;
align-items: center;
display: flex;
flex-flow: column nowrap;
}
.identicon { .identicon {
position: absolute; position: absolute;
top: -35px; top: -35px;
@ -244,6 +253,16 @@
margin-top: 13px; margin-top: 13px;
} }
&__button-group {
display: flex;
flex-flow: column nowrap;
align-items: center;
button {
width: 163px;
}
}
.send-screen-input-wrapper { .send-screen-input-wrapper {
.fa-bolt { .fa-bolt {
padding-right: 4px; padding-right: 4px;

View File

@ -141,6 +141,7 @@ table {
button { button {
border-style: none; border-style: none;
cursor: pointer;
} }
/* stylelint-enable */ /* stylelint-enable */

View File

@ -674,7 +674,7 @@ SendTransactionScreen.prototype.onSubmit = function () {
// New: gas will now be specified on this step // New: gas will now be specified on this step
gas: this.state.newTx.gas, gas: this.state.newTx.gas,
gasPrice: this.state.newTx.gasPrice gasPrice: this.state.newTx.gasPrice,
} }
if (recipient) txParams.to = addHexPrefix(recipient) if (recipient) txParams.to = addHexPrefix(recipient)

9756
yarn.lock Normal file

File diff suppressed because it is too large Load Diff