mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 01:39:44 +01:00
Style send ether screen
This commit is contained in:
Chi Kei Chan
parent
93a1089e08
commit
4bcc62500f
@ -1,11 +1,7 @@
|
||||
.send-screen-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 320px;
|
||||
min-height: 500px;
|
||||
z-index: $send-card-z-index;
|
||||
position: absolute;
|
||||
top: 5%;
|
||||
flex-flow: column nowrap;
|
||||
z-index: 25;
|
||||
font-family: 'DIN OT';
|
||||
|
||||
@media screen and (max-width: $break-small) {
|
||||
@ -14,14 +10,15 @@
|
||||
}
|
||||
|
||||
.send-screen-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
margin-left: 3.5%;
|
||||
margin-right: 3.5%;
|
||||
background: $white;
|
||||
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;
|
||||
width: 498px;
|
||||
}
|
||||
|
||||
/* Send Screen */
|
||||
@ -36,17 +33,39 @@
|
||||
}
|
||||
|
||||
.send-eth-icon {
|
||||
border-radius: 25px;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
border-radius: 50%;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
border: 1px solid $alto;
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .08);
|
||||
box-shadow: 0 0 4px 0 rgba(0, 0, 0, .2);
|
||||
position: absolute;
|
||||
top: -35px;
|
||||
z-index: 25;
|
||||
padding: 4px;
|
||||
background-color: $white;
|
||||
}
|
||||
|
||||
.send-screen-input-wrapper {
|
||||
width: 95%;
|
||||
position: relative;
|
||||
|
||||
.fa-bolt {
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
.large-input {
|
||||
border: 1px solid $dusty-gray;
|
||||
border-radius: 4px;
|
||||
margin: 4px 0 20px;
|
||||
font-size: 16px;
|
||||
line-height: 22.4px;
|
||||
font-family: "DIN OT";
|
||||
}
|
||||
|
||||
.send-screen-gas-input {
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
&__error-message {
|
||||
display: none;
|
||||
}
|
||||
@ -240,6 +259,26 @@
|
||||
}
|
||||
}
|
||||
|
||||
.send-screen {
|
||||
&__title {
|
||||
color: $scorpion;
|
||||
font-size: 18px;
|
||||
line-height: 29px;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
margin: 10px 0 20px;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
&__send-button,
|
||||
&__cancel-button {
|
||||
width: 163px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.send-token {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
@ -294,23 +333,4 @@
|
||||
width: 163px;
|
||||
}
|
||||
}
|
||||
|
||||
.send-screen-input-wrapper {
|
||||
.fa-bolt {
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
.large-input {
|
||||
border: 1px solid $dusty-gray;
|
||||
border-radius: 4px;
|
||||
margin: 4px 0 20px;
|
||||
font-size: 16px;
|
||||
line-height: 22.4px;
|
||||
font-family: "DIN OT";
|
||||
}
|
||||
|
||||
.send-screen-gas-input {
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
341
ui/app/send.js
341
ui/app/send.js
@ -91,52 +91,34 @@ SendTransactionScreen.prototype.render = function () {
|
||||
|
||||
const props = this.props
|
||||
const {
|
||||
selectedIdentity,
|
||||
network,
|
||||
identities,
|
||||
addressBook,
|
||||
// selectedIdentity,
|
||||
// network,
|
||||
// identities,
|
||||
// addressBook,
|
||||
conversionRate,
|
||||
} = props
|
||||
|
||||
const { blockGasLimit, newTx, activeCurrency } = this.state
|
||||
const { gas, gasPrice } = newTx
|
||||
console.log(`activeCurrency`, activeCurrency);
|
||||
console.log({ selectedIdentity, identities })
|
||||
console.log('SendTransactionScreen state:', this.state)
|
||||
// console.log(`activeCurrency`, activeCurrency)
|
||||
// console.log({ selectedIdentity, identities })
|
||||
// console.log('SendTransactionScreen state:', this.state)
|
||||
|
||||
return (
|
||||
|
||||
h('div.send-screen-wrapper', {
|
||||
style: {},
|
||||
}, [
|
||||
|
||||
h('div.send-screen-wrapper', [
|
||||
// Main Send token Card
|
||||
h('div.send-screen-card', {
|
||||
style: {},
|
||||
}, [
|
||||
h('div.send-screen-card', [
|
||||
|
||||
h('img.send-eth-icon', {
|
||||
src: '../images/eth_logo.svg',
|
||||
style: {},
|
||||
}),
|
||||
h('img.send-eth-icon', { src: '../images/eth_logo.svg' }),
|
||||
|
||||
h('div', {}, [
|
||||
'Send',
|
||||
]),
|
||||
h('div.send-screen__title', 'Send'),
|
||||
|
||||
h('div', {
|
||||
style: {
|
||||
textAlign: 'center',
|
||||
},
|
||||
}, [
|
||||
'Send Ethereum to anyone with an Ethereum account',
|
||||
]),
|
||||
h('div.send-screen__subtitle', 'Send Ethereum to anyone with an Ethereum account'),
|
||||
|
||||
h('div.send-screen-input-wrapper', {}, [
|
||||
h('div.send-screen-input-wrapper', [
|
||||
|
||||
h('div', {}, [
|
||||
'From:',
|
||||
]),
|
||||
h('div', 'From:'),
|
||||
|
||||
h('input.large-input.send-screen-input', {
|
||||
list: 'accounts',
|
||||
@ -151,10 +133,9 @@ SendTransactionScreen.prototype.render = function () {
|
||||
},
|
||||
})
|
||||
},
|
||||
}, [
|
||||
]),
|
||||
}),
|
||||
|
||||
h('datalist#accounts', {}, [
|
||||
h('datalist#accounts', [
|
||||
Object.keys(props.identities).map((key) => {
|
||||
const identity = props.identities[key]
|
||||
return h('option', {
|
||||
@ -167,11 +148,9 @@ SendTransactionScreen.prototype.render = function () {
|
||||
|
||||
]),
|
||||
|
||||
h('div.send-screen-input-wrapper', {}, [
|
||||
h('div.send-screen-input-wrapper', [
|
||||
|
||||
h('div', {}, [
|
||||
'To:',
|
||||
]),
|
||||
h('div', 'To:'),
|
||||
|
||||
h('input.large-input.send-screen-input', {
|
||||
name: 'address',
|
||||
@ -187,10 +166,9 @@ SendTransactionScreen.prototype.render = function () {
|
||||
},
|
||||
})
|
||||
},
|
||||
}, [
|
||||
]),
|
||||
}),
|
||||
|
||||
h('datalist#addresses', {}, [
|
||||
h('datalist#addresses', [
|
||||
// Corresponds to the addresses owned.
|
||||
Object.entries(props.identities).map(([key, { address, name }]) => {
|
||||
return h('option', {
|
||||
@ -230,10 +208,10 @@ SendTransactionScreen.prototype.render = function () {
|
||||
|
||||
]),
|
||||
|
||||
h('div.send-screen-input-wrapper', {}, [
|
||||
h('div.send-screen-input-wrapper', [
|
||||
|
||||
h('div.send-screen-amount-labels', {}, [
|
||||
h('span', {}, ['Amount']),
|
||||
h('div.send-screen-amount-labels', [
|
||||
h('span', 'Amount'),
|
||||
h(CurrencyToggle, {
|
||||
activeCurrency,
|
||||
onClick: (newCurrency) => this.setActiveCurrency(newCurrency),
|
||||
@ -253,11 +231,11 @@ SendTransactionScreen.prototype.render = function () {
|
||||
),
|
||||
})
|
||||
},
|
||||
}, []),
|
||||
}),
|
||||
|
||||
]),
|
||||
|
||||
h('div.send-screen-input-wrapper', {}, [
|
||||
h('div.send-screen-input-wrapper', [
|
||||
this.state.tooltipIsOpen && h(GasTooltip, {
|
||||
className: 'send-tooltip',
|
||||
gasPrice,
|
||||
@ -271,23 +249,15 @@ SendTransactionScreen.prototype.render = function () {
|
||||
gasPrice,
|
||||
},
|
||||
})
|
||||
}
|
||||
},
|
||||
}),
|
||||
|
||||
h('div.send-screen-gas-labels', {}, [
|
||||
h('span', {}, [
|
||||
h('i.fa.fa-bolt', {}, []),
|
||||
|
||||
// not working ATM.
|
||||
// Ship with fa-bolt if it's slowing us down...
|
||||
// h('img.send-screen-bolt-icon', {
|
||||
// src: '../images/mm_bolt.svg',
|
||||
// style: {},
|
||||
// }, []),
|
||||
|
||||
h('div.send-screen-gas-labels', [
|
||||
h('span', [
|
||||
h('i.fa.fa-bolt'),
|
||||
'Gas fee:',
|
||||
]),
|
||||
h('span', {}, ['What\'s this?']),
|
||||
h('span', 'What\'s this?'),
|
||||
]),
|
||||
|
||||
// TODO: handle loading time when switching to USD
|
||||
@ -305,13 +275,11 @@ SendTransactionScreen.prototype.render = function () {
|
||||
'Customize',
|
||||
]),
|
||||
]),
|
||||
|
||||
|
||||
]),
|
||||
|
||||
h('div.send-screen-input-wrapper', {}, [
|
||||
|
||||
h('div', {}, ['Transaction memo (optional)']),
|
||||
|
||||
h('div.send-screen-input-wrapper', [
|
||||
h('div', 'Transaction memo (optional)'),
|
||||
h('input.large-input.send-screen-input', {
|
||||
onChange: () => {
|
||||
this.setState({
|
||||
@ -323,15 +291,11 @@ SendTransactionScreen.prototype.render = function () {
|
||||
),
|
||||
})
|
||||
},
|
||||
}, [
|
||||
]),
|
||||
|
||||
}),
|
||||
]),
|
||||
|
||||
h('div.send-screen-input-wrapper', {}, [
|
||||
|
||||
h('div', {}, ['Data (optional)']),
|
||||
|
||||
h('input.large-input.send-screen-input', {
|
||||
onChange: () => {
|
||||
this.setState({
|
||||
@ -343,248 +307,17 @@ SendTransactionScreen.prototype.render = function () {
|
||||
),
|
||||
})
|
||||
},
|
||||
}, [
|
||||
]),
|
||||
|
||||
}),
|
||||
]),
|
||||
|
||||
]),
|
||||
|
||||
// Buttons underneath card
|
||||
h('section.flex-column.flex-center', [
|
||||
|
||||
h('div.btn-light.send-screen-send-button', {
|
||||
h('button.btn-secondary.send-screen__send-button', {
|
||||
onClick: (event) => this.onSubmit(event),
|
||||
style: {
|
||||
marginTop: '8px',
|
||||
width: '8em',
|
||||
background: '#FFFFFF',
|
||||
},
|
||||
}, 'Next'),
|
||||
|
||||
h('button.btn-light', {
|
||||
h('button.btn-tertiary.send-screen__cancel-button', {
|
||||
onClick: this.back,
|
||||
style: {
|
||||
background: '#F7F7F7', // $alabaster
|
||||
border: 'none',
|
||||
opacity: 1,
|
||||
width: '8em',
|
||||
},
|
||||
}, 'Cancel'),
|
||||
]),
|
||||
])
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
// WIP - hyperscript for renderSendToken - hook up later - can take pieces to re-implement
|
||||
SendTransactionScreen.prototype.renderSendToken = function () {
|
||||
this.persistentFormParentId = 'send-tx-form'
|
||||
|
||||
const props = this.props
|
||||
const {
|
||||
network,
|
||||
identities,
|
||||
addressBook,
|
||||
} = props
|
||||
|
||||
return (
|
||||
|
||||
h('div.flex-column.flex-grow', {
|
||||
style: {
|
||||
minWidth: '355px', // TODO: maxWidth TBD, use home.html
|
||||
},
|
||||
}, [
|
||||
|
||||
// Main Send token Card
|
||||
h('div.send-screen.flex-column.flex-grow', {
|
||||
style: {
|
||||
marginLeft: '3.5%',
|
||||
marginRight: '3.5%',
|
||||
background: '#FFFFFF', // $background-white
|
||||
boxShadow: '0 2px 4px 0 rgba(0,0,0,0.08)',
|
||||
},
|
||||
}, [
|
||||
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', {
|
||||
style: {
|
||||
marginTop: '-18px',
|
||||
fontSize: '16px',
|
||||
},
|
||||
}, [
|
||||
'Send Tokens',
|
||||
]),
|
||||
|
||||
h('h3.flex-center', {
|
||||
style: {
|
||||
textAlign: 'center',
|
||||
fontSize: '12px',
|
||||
},
|
||||
}, [
|
||||
'Send Tokens to anyone with an Ethereum account',
|
||||
]),
|
||||
|
||||
h('h3.flex-center', {
|
||||
style: {
|
||||
textAlign: 'center',
|
||||
marginTop: '2px',
|
||||
fontSize: '12px',
|
||||
},
|
||||
}, [
|
||||
'Your Aragon Token Balance is:',
|
||||
]),
|
||||
|
||||
h('h3.flex-center', {
|
||||
style: {
|
||||
textAlign: 'center',
|
||||
fontSize: '36px',
|
||||
marginTop: '8px',
|
||||
},
|
||||
}, [
|
||||
'2.34',
|
||||
]),
|
||||
|
||||
h('h3.flex-center', {
|
||||
style: {
|
||||
textAlign: 'center',
|
||||
fontSize: '12px',
|
||||
marginTop: '4px',
|
||||
},
|
||||
}, [
|
||||
'ANT',
|
||||
]),
|
||||
|
||||
// error message
|
||||
props.error && h('span.error.flex-center', props.error),
|
||||
|
||||
// 'to' field
|
||||
h('section.flex-row.flex-center', {
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
},
|
||||
}, [
|
||||
h(EnsInput, {
|
||||
name: 'address',
|
||||
placeholder: 'Recipient Address',
|
||||
onChange: this.recipientDidChange,
|
||||
network,
|
||||
identities,
|
||||
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', {
|
||||
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
|
||||
h('section.flex-column.flex-center', [
|
||||
|
||||
h('button.btn-light', {
|
||||
onClick: this.onSubmit,
|
||||
style: {
|
||||
marginTop: '8px',
|
||||
width: '8em',
|
||||
background: '#FFFFFF',
|
||||
},
|
||||
}, 'Next'),
|
||||
|
||||
h('button.btn-light', {
|
||||
onClick: this.back,
|
||||
style: {
|
||||
background: '#F7F7F7', // $alabaster
|
||||
border: 'none',
|
||||
opacity: 1,
|
||||
width: '8em',
|
||||
},
|
||||
}, 'Cancel'),
|
||||
]),
|
||||
])
|
||||
|
||||
Loading…
Reference in New Issue
Block a user