mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
Add layout and props for send screen inputs
This commit is contained in:
parent
65d2762346
commit
97a6a8e4f6
@ -44,14 +44,7 @@ EnsInput.prototype.render = function () {
|
||||
return h('div', {
|
||||
style: { width: '100%' },
|
||||
}, [
|
||||
h('span', {
|
||||
style: {
|
||||
textAlign: 'left',
|
||||
}
|
||||
}, [
|
||||
'To:'
|
||||
]),
|
||||
h('input.large-input', opts),
|
||||
h('input.large-input.send-screen-input', opts),
|
||||
// The address book functionality.
|
||||
h('datalist#addresses',
|
||||
[
|
||||
@ -132,7 +125,7 @@ EnsInput.prototype.componentDidUpdate = function (prevProps, prevState) {
|
||||
|
||||
EnsInput.prototype.ensIcon = function (recipient) {
|
||||
const { hoverText } = this.state || {}
|
||||
return h('span', {
|
||||
return h('span.#ensIcon', {
|
||||
title: hoverText,
|
||||
style: {
|
||||
position: 'absolute',
|
||||
|
@ -41,4 +41,24 @@
|
||||
height: 45px;
|
||||
border: 1px solid $alto;
|
||||
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.08);
|
||||
}
|
||||
}
|
||||
|
||||
.send-screen-input-wrapper {
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
.send-screen-input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.send-screen-amount-labels {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.send-screen-gas-labels {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
@ -11,6 +11,7 @@ const isHex = require('./util').isHex
|
||||
const EthBalance = require('./components/eth-balance')
|
||||
const EnsInput = require('./components/ens-input')
|
||||
const ethUtil = require('ethereumjs-util')
|
||||
const { getSelectedIdentity } = require('./selectors')
|
||||
|
||||
const ARAGON = '960b236A07cf122663c4303350609A66A7B288C0'
|
||||
|
||||
@ -18,6 +19,7 @@ module.exports = connect(mapStateToProps)(SendTransactionScreen)
|
||||
|
||||
function mapStateToProps (state) {
|
||||
var result = {
|
||||
selectedIdentity: getSelectedIdentity(state),
|
||||
address: state.metamask.selectedAddress,
|
||||
accounts: state.metamask.accounts,
|
||||
identities: state.metamask.identities,
|
||||
@ -47,6 +49,7 @@ SendTransactionScreen.prototype.render = function () {
|
||||
|
||||
const props = this.props
|
||||
const {
|
||||
selectedIdentity,
|
||||
address,
|
||||
account,
|
||||
identity,
|
||||
@ -75,26 +78,42 @@ SendTransactionScreen.prototype.render = function () {
|
||||
|
||||
h('div', {}, [
|
||||
'Send'
|
||||
])
|
||||
]),
|
||||
|
||||
h('div', {}, [
|
||||
h('div', {
|
||||
style: {
|
||||
textAlign: 'center',
|
||||
},
|
||||
}, [
|
||||
'Send Ethereum to anyone with an Ethereum account'
|
||||
])
|
||||
]),
|
||||
|
||||
h('div', {}, [
|
||||
h('div.send-screen-input-wrapper', {}, [
|
||||
|
||||
h('div', {}, [
|
||||
'From:'
|
||||
]),
|
||||
|
||||
h('input', {
|
||||
placeholder: '(Placeholder) - My Account 1 - 5924 - Available ETH 2.0'.
|
||||
h('input.large-input.send-screen-input', {
|
||||
list: 'accounts',
|
||||
value: selectedIdentity.address
|
||||
}, [
|
||||
])
|
||||
]),
|
||||
|
||||
])
|
||||
h('datalist#accounts', {}, [
|
||||
Object.keys(props.identities).map((key) => {
|
||||
const identity = props.identities[key]
|
||||
return h('option', {
|
||||
value: identity.address,
|
||||
label: identity.name,
|
||||
key: identity.address,
|
||||
})
|
||||
}),
|
||||
]),
|
||||
|
||||
h('div', {}, [
|
||||
]),
|
||||
|
||||
h('div.send-screen-input-wrapper', {}, [
|
||||
|
||||
h('div', {}, [
|
||||
'To:'
|
||||
@ -109,9 +128,45 @@ SendTransactionScreen.prototype.render = function () {
|
||||
addressBook,
|
||||
}),
|
||||
|
||||
])
|
||||
]),
|
||||
|
||||
// [WIP] - Styling Send Screen - Need to bring in data contract for signTx
|
||||
h('div.send-screen-input-wrapper', {}, [
|
||||
|
||||
h('div.send-screen-amount-labels', {}, [
|
||||
h('span', {}, ['Amount']),
|
||||
h('span', {}, ['ETH <> USD'])
|
||||
]),
|
||||
|
||||
h('input.large-input.send-screen-input', {
|
||||
placeholder: '$0 USD',
|
||||
}, []),
|
||||
|
||||
]),
|
||||
|
||||
h('div.send-screen-input-wrapper', {}, [
|
||||
|
||||
h('div.send-screen-gas-labels', {}, [
|
||||
h('span', {}, [
|
||||
h('i.fa.fa-bolt', {}, []),
|
||||
'Gas fee:',
|
||||
]),
|
||||
h('span', {}, ['What\'s this?']),
|
||||
]),
|
||||
|
||||
h('input.large-input.send-screen-input', {
|
||||
placeholder: '0',
|
||||
}, []),
|
||||
|
||||
]),
|
||||
|
||||
h('div.send-screen-input-wrapper', {}, [
|
||||
|
||||
h('div', {}, ['Transaction memo (optional)']),
|
||||
|
||||
h('input.large-input.send-screen-input', {}, [
|
||||
]),
|
||||
|
||||
]),
|
||||
|
||||
]),
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user