mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
[WIP] - Styling Send Screen - Need to bring in data contract for signTx
This commit is contained in:
parent
5900cc8522
commit
d1bc7111b5
@ -16,6 +16,8 @@
|
|||||||
.send-screen-card {
|
.send-screen-card {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
margin-left: 3.5%;
|
margin-left: 3.5%;
|
||||||
margin-right: 3.5%;
|
margin-right: 3.5%;
|
||||||
background: $white;
|
background: $white;
|
||||||
@ -32,3 +34,11 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.send-eth-icon {
|
||||||
|
border-radius: 25px;
|
||||||
|
width: 45px;
|
||||||
|
height: 45px;
|
||||||
|
border: 1px solid $alto;
|
||||||
|
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.08);
|
||||||
|
}
|
170
ui/app/send.js
170
ui/app/send.js
@ -67,75 +67,39 @@ SendTransactionScreen.prototype.render = function () {
|
|||||||
h('div.send-screen-card', {
|
h('div.send-screen-card', {
|
||||||
style: {}
|
style: {}
|
||||||
}, [
|
}, [
|
||||||
h('section.flex-center.flex-row', {
|
|
||||||
style: {
|
|
||||||
zIndex: 15, // $token-icon-z-index
|
|
||||||
marginTop: '-35px',
|
|
||||||
}
|
|
||||||
}, [
|
|
||||||
h(Identicon, {
|
|
||||||
address: ARAGON,
|
|
||||||
diameter: 76,
|
|
||||||
}),
|
|
||||||
]),
|
|
||||||
|
|
||||||
h('h3.flex-center', {
|
h('img.send-eth-icon', {
|
||||||
style: {
|
src: '../images/eth_logo.svg',
|
||||||
marginTop: '-18px',
|
style: {},
|
||||||
fontSize: '16px',
|
}),
|
||||||
},
|
|
||||||
}, [
|
|
||||||
'Send Tokens',
|
|
||||||
]),
|
|
||||||
|
|
||||||
h('h3.flex-center', {
|
h('div', {}, [
|
||||||
style: {
|
'Send'
|
||||||
textAlign: 'center',
|
])
|
||||||
fontSize: '12px',
|
|
||||||
},
|
|
||||||
}, [
|
|
||||||
'Send Tokens to anyone with an Ethereum account',
|
|
||||||
]),
|
|
||||||
|
|
||||||
h('h3.flex-center', {
|
h('div', {}, [
|
||||||
style: {
|
'Send Ethereum to anyone with an Ethereum account'
|
||||||
textAlign: 'center',
|
])
|
||||||
marginTop: '2px',
|
|
||||||
fontSize: '12px',
|
|
||||||
},
|
|
||||||
}, [
|
|
||||||
'Your Aragon Token Balance is:',
|
|
||||||
]),
|
|
||||||
|
|
||||||
h('h3.flex-center', {
|
h('div', {}, [
|
||||||
style: {
|
|
||||||
textAlign: 'center',
|
|
||||||
fontSize: '36px',
|
|
||||||
marginTop: '8px',
|
|
||||||
},
|
|
||||||
}, [
|
|
||||||
'2.34',
|
|
||||||
]),
|
|
||||||
|
|
||||||
h('h3.flex-center', {
|
h('div', {}, [
|
||||||
style: {
|
'From:'
|
||||||
textAlign: 'center',
|
]),
|
||||||
fontSize: '12px',
|
|
||||||
marginTop: '4px',
|
|
||||||
},
|
|
||||||
}, [
|
|
||||||
'ANT',
|
|
||||||
]),
|
|
||||||
|
|
||||||
// error message
|
h('input', {
|
||||||
props.error && h('span.error.flex-center', props.error),
|
placeholder: '(Placeholder) - My Account 1 - 5924 - Available ETH 2.0'.
|
||||||
|
}, [
|
||||||
|
])
|
||||||
|
|
||||||
|
])
|
||||||
|
|
||||||
|
h('div', {}, [
|
||||||
|
|
||||||
|
h('div', {}, [
|
||||||
|
'To:'
|
||||||
|
]),
|
||||||
|
|
||||||
// 'to' field
|
|
||||||
h('section.flex-row.flex-center', {
|
|
||||||
style: {
|
|
||||||
fontSize: '12px',
|
|
||||||
},
|
|
||||||
}, [
|
|
||||||
h(EnsInput, {
|
h(EnsInput, {
|
||||||
name: 'address',
|
name: 'address',
|
||||||
placeholder: 'Recipient Address',
|
placeholder: 'Recipient Address',
|
||||||
@ -144,87 +108,11 @@ SendTransactionScreen.prototype.render = function () {
|
|||||||
identities,
|
identities,
|
||||||
addressBook,
|
addressBook,
|
||||||
}),
|
}),
|
||||||
]),
|
|
||||||
|
|
||||||
// 'amount' and send button
|
])
|
||||||
h('section.flex-column.flex-center', [
|
|
||||||
h('div.flex-row.flex-center', {
|
|
||||||
style: {
|
|
||||||
fontSize: '12px',
|
|
||||||
width: '100%',
|
|
||||||
justifyContent: 'space-between',
|
|
||||||
}
|
|
||||||
},[
|
|
||||||
h('span', { style: {} }, ['Amount']),
|
|
||||||
h('span', { style: {} }, ['Token <> USD']),
|
|
||||||
]),
|
|
||||||
|
|
||||||
h('input.large-input', {
|
// [WIP] - Styling Send Screen - Need to bring in data contract for signTx
|
||||||
name: 'amount',
|
|
||||||
placeholder: '0',
|
|
||||||
type: 'number',
|
|
||||||
style: {
|
|
||||||
marginRight: '6px',
|
|
||||||
fontSize: '12px',
|
|
||||||
},
|
|
||||||
dataset: {
|
|
||||||
persistentFormId: 'tx-amount',
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
|
|
||||||
]),
|
|
||||||
|
|
||||||
h('section.flex-column.flex-center', [
|
|
||||||
h('div.flex-row.flex-center', {
|
|
||||||
style: {
|
|
||||||
fontSize: '12px',
|
|
||||||
width: '100%',
|
|
||||||
justifyContent: 'space-between',
|
|
||||||
}
|
|
||||||
},[
|
|
||||||
h('span', { style: {} }, ['Gas Fee:']),
|
|
||||||
h('span', { style: { fontSize: '8px' } }, ['What\'s this?']),
|
|
||||||
]),
|
|
||||||
|
|
||||||
h('input.large-input', {
|
|
||||||
name: 'Gas Fee',
|
|
||||||
placeholder: '0',
|
|
||||||
type: 'number',
|
|
||||||
style: {
|
|
||||||
fontSize: '12px',
|
|
||||||
marginRight: '6px',
|
|
||||||
},
|
|
||||||
// dataset: {
|
|
||||||
// persistentFormId: 'tx-amount',
|
|
||||||
// },
|
|
||||||
}),
|
|
||||||
|
|
||||||
]),
|
|
||||||
|
|
||||||
h('section.flex-column.flex-center', {
|
|
||||||
style: {
|
|
||||||
marginBottom: '10px',
|
|
||||||
},
|
|
||||||
}, [
|
|
||||||
h('div.flex-row.flex-center', {
|
|
||||||
style: {
|
|
||||||
fontSize: '12px',
|
|
||||||
width: '100%',
|
|
||||||
justifyContent: 'flex-start',
|
|
||||||
}
|
|
||||||
},[
|
|
||||||
h('span', { style: {} }, ['Transaction Memo (optional)']),
|
|
||||||
]),
|
|
||||||
|
|
||||||
h('input.large-input', {
|
|
||||||
name: 'memo',
|
|
||||||
placeholder: '',
|
|
||||||
type: 'string',
|
|
||||||
style: {
|
|
||||||
marginRight: '6px',
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
]),
|
|
||||||
]),
|
]),
|
||||||
|
|
||||||
// Buttons underneath card
|
// Buttons underneath card
|
||||||
@ -254,7 +142,7 @@ SendTransactionScreen.prototype.render = function () {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
// WIP - hyperscript for renderSendToken - hook up later
|
// WIP - hyperscript for renderSendToken - hook up later - can take pieces to re-implement
|
||||||
SendTransactionScreen.prototype.renderSendToken = function () {
|
SendTransactionScreen.prototype.renderSendToken = function () {
|
||||||
this.persistentFormParentId = 'send-tx-form'
|
this.persistentFormParentId = 'send-tx-form'
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user