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:
parent
392d0d020c
commit
062e67bff8
@ -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",
|
||||||
|
@ -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(),
|
|
||||||
])
|
])
|
||||||
}
|
}
|
||||||
|
@ -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
|
||||||
}
|
}
|
||||||
|
@ -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' ])]
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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;
|
||||||
|
}
|
||||||
|
@ -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;
|
||||||
|
@ -141,6 +141,7 @@ table {
|
|||||||
|
|
||||||
button {
|
button {
|
||||||
border-style: none;
|
border-style: none;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* stylelint-enable */
|
/* stylelint-enable */
|
||||||
|
@ -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)
|
||||||
|
Loading…
Reference in New Issue
Block a user