aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app
diff options
context:
space:
mode:
Diffstat (limited to 'ui/app')
-rw-r--r--ui/app/components/ens-input.js11
-rw-r--r--ui/app/css/itcss/components/send.scss22
-rw-r--r--ui/app/send.js77
3 files changed, 89 insertions, 21 deletions
diff --git a/ui/app/components/ens-input.js b/ui/app/components/ens-input.js
index 93c07599d..fb8c8e579 100644
--- a/ui/app/components/ens-input.js
+++ b/ui/app/components/ens-input.js
@@ -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',
diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss
index d1987390d..6f124f053 100644
--- a/ui/app/css/itcss/components/send.scss
+++ b/ui/app/css/itcss/components/send.scss
@@ -41,4 +41,24 @@
height: 45px;
border: 1px solid $alto;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.08);
-} \ No newline at end of file
+}
+
+.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;
+}
diff --git a/ui/app/send.js b/ui/app/send.js
index 3b52c9500..4317fb3a2 100644
--- a/ui/app/send.js
+++ b/ui/app/send.js
@@ -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,
}),
- ])
+ ]),
+
+ 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', {}, [
- // [WIP] - Styling Send Screen - Need to bring in data contract for signTx
+ h('div', {}, ['Transaction memo (optional)']),
+
+ h('input.large-input.send-screen-input', {}, [
+ ]),
+
+ ]),
]),