1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 01:39:44 +01:00

[New-UI] Confirm Screen restyle and connect to state (#2042)

* Adds utility for converting currencies (WIP)

* Implements confirm screen

* Style tweaks.

* Confirm screen total ammount now uses real data.

* Confirm screen total ammount now uses real data.

* Replace content divider with sibling css.

* Replace section divider with scss.
This commit is contained in:
Dan J Miller 2017-09-12 02:49:05 -02:30 committed by Chi Kei Chan
parent 062e67bff8
commit 1e83835ba8
6 changed files with 430 additions and 198 deletions

View File

@ -1,23 +1,23 @@
const Component = require('react').Component
const { connect } = require('react-redux')
const h = require('react-hyperscript')
const inherits = require('util').inherits
const actions = require('../actions')
const clone = require('clone')
const FiatValue = require('./fiat-value')
const Identicon = require('./identicon')
const { setCurrentCurrency } = require('../actions')
const ethUtil = require('ethereumjs-util')
const BN = ethUtil.BN
const hexToBn = require('../../../app/scripts/lib/hex-to-bn')
const util = require('../util')
const { conversionUtil } = require('../conversion-util')
const MIN_GAS_PRICE_GWEI_BN = new BN(1)
const GWEI_FACTOR = new BN(1e9)
const MIN_GAS_PRICE_BN = MIN_GAS_PRICE_GWEI_BN.mul(GWEI_FACTOR)
// Faked, for Icon
const Identicon = require('./identicon')
const ARAGON = '960b236A07cf122663c4303350609A66A7B288C0'
// Next: create separate react components
// roughly 5 components:
// heroIcon
@ -25,23 +25,27 @@ const ARAGON = '960b236A07cf122663c4303350609A66A7B288C0'
// divider
// contentBox
// actionButtons
const sectionDivider = h('div', {
style: {
height: '1px',
background: '#E7E7E7',
},
})
const contentDivider = h('div', {
style: {
marginLeft: '16px',
marginRight: '16px',
height: '1px',
background: '#E7E7E7',
},
})
module.exports = connect(mapStateToProps, mapDispatchToProps)(PendingTx)
function mapStateToProps (state) {
const {
conversionRate,
identities,
} = state.metamask
return {
conversionRate,
identities,
}
}
function mapDispatchToProps (dispatch) {
return {
setCurrentCurrencyToUSD: () => dispatch(setCurrentCurrency('USD'))
}
}
module.exports = PendingTx
inherits(PendingTx, Component)
function PendingTx () {
Component.call(this)
@ -52,9 +56,13 @@ function PendingTx () {
}
}
PendingTx.prototype.componentWillMount = function () {
this.props.setCurrentCurrencyToUSD()
}
PendingTx.prototype.render = function () {
const props = this.props
const { blockGasLimit } = props
const { blockGasLimit, conversionRate, identities } = props
const txMeta = this.gatherTxMeta()
const txParams = txMeta.txParams || {}
@ -76,16 +84,48 @@ PendingTx.prototype.render = function () {
const gasPriceBn = hexToBn(gasPrice)
const txFeeBn = gasBn.mul(gasPriceBn)
const valueBn = hexToBn(txParams.value)
const maxCost = txFeeBn.add(valueBn)
const balanceBn = hexToBn(balance)
const insufficientBalance = balanceBn.lt(maxCost)
const amountBn = hexToBn(txParams.value)
// TODO: insufficient balance should be handled on send screen
// const maxCost = txFeeBn.add(amountBn)
// const balanceBn = hexToBn(balance)
// const insufficientBalance = balanceBn.lt(maxCost)
const fromName = identities[txParams.from].name;
const toName = identities[txParams.to].name;
const endOfFromAddress = txParams.from.slice(txParams.from.length - 4)
const endOfToAddress = txParams.to.slice(txParams.to.length - 4)
const gasFeeInUSD = conversionUtil(txFeeBn, {
fromFormat: 'BN',
fromCurrency: 'GWEI',
toCurrency: 'USD',
conversionRate,
})
const gasFeeInETH = conversionUtil(txFeeBn, {
fromFormat: 'BN',
fromCurrency: 'GWEI',
toCurrency: 'ETH',
conversionRate,
})
const totalInUSD = conversionUtil(amountBn, {
fromFormat: 'BN',
toCurrency: 'USD',
conversionRate,
})
const totalInETH = conversionUtil(amountBn, {
fromFormat: 'BN',
toCurrency: 'ETH',
conversionRate,
})
this.inputs = []
return (
h('div.flex-column.flex-grow', {
h('div.flex-column.flex-grow.confirm-screen-container', {
style: {
// overflow: 'scroll',
minWidth: '355px', // TODO: maxWidth TBD, use home.html
@ -93,86 +133,79 @@ PendingTx.prototype.render = function () {
}, [
// 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('div.confirm-screen-wrapper.flex-column.flex-grow', {}, [
h('h3.flex-center.confirm-screen-header', {}, [
h('button.confirm-screen-back-button', {}, 'BACK'),
h('div.confirm-screen-title', {}, 'Confirm Transaction'),
]),
//
// Required Fields
//
h('div.flex-row.flex-center.confirm-screen-identicons', {}, [
h('h3.flex-center', {
h('div.confirm-screen-account-wrapper', {}, [
h(
Identicon,
{
address: txParams.from,
diameter: 64,
style: {},
},
),
h('span.confirm-screen-account-name', {}, fromName),
h('span.confirm-screen-account-number', {}, endOfFromAddress),
]),
h('i.fa.fa-arrow-right.fa-lg'),
h('div.confirm-screen-account-wrapper', {}, [
h(
Identicon,
{
address: txParams.to,
diameter: 64,
style: {},
},
),
h('span.confirm-screen-account-name', {}, toName),
h('span.confirm-screen-account-number', {}, endOfToAddress),
])
]),
h('h3.flex-center.confirm-screen-sending-to-message', {
style: {
marginTop: '-18px',
textAlign: 'center',
fontSize: '16px',
},
}
}, [
'Confirm Transaction',
`You're sending to Recipient ...${endOfToAddress}`
]),
h('h3.flex-center', {
style: {
textAlign: 'center',
fontSize: '12px',
},
}, [
'You\'re sending to Recipient ...5924',
h('h3.flex-center.confirm-screen-send-amount', {}, [`$${totalInUSD}`]),
h('h3.flex-center.confirm-screen-send-amount-currency', {}, [
'USD',
]),
h('h3.flex-center', {
style: {
textAlign: 'center',
fontSize: '36px',
marginTop: '8px',
},
}, [
'0.24',
]),
h('div.flex-center.confirm-memo-wrapper', {}, h(
'h3.confirm-screen-send-memo', {}, txParams.memo || 'Fake memo'
)),
h('h3.flex-center', {
style: {
textAlign: 'center',
fontSize: '12px',
marginTop: '4px',
},
}, [
'ANT',
]),
// TODO: put this error message in the right place
// props.error && h('span.error.flex-center', props.error),
// error message
props.error && h('span.error.flex-center', props.error),
sectionDivider,
h('section.flex-row.flex-center', {
h('section.flex-row.flex-center.confirm-screen-row', {
}, [
h('div', {
style: {
width: '50%',
},
}, [
h('span', {
style: {
textAlign: 'left',
fontSize: '12px',
},
}, [
h('span.confirm-screen-label', {}, [
'From',
]),
]),
@ -182,38 +215,21 @@ PendingTx.prototype.render = function () {
width: '50%',
},
}, [
h('div', {
style: {
textAlign: 'left',
fontSize: '10px',
marginBottom: '-10px',
},
}, 'Aragon Token'),
h('div.confirm-screen-row-info', {}, fromName),
h('div', {
style: {
textAlign: 'left',
fontSize: '8px',
},
}, 'Your Balance 2.34 ANT'),
h('div.confirm-screen-row-detail', {}, `...${endOfFromAddress}`),
]),
]),
contentDivider,
h('section.flex-row.flex-center', {
h('section.flex-row.flex-center.confirm-screen-row', {
}, [
h('div', {
style: {
width: '50%',
},
}, [
h('span', {
style: {
textAlign: 'left',
fontSize: '12px',
},
}, [
h('span.confirm-screen-label', {}, [
'To',
]),
]),
@ -223,38 +239,21 @@ PendingTx.prototype.render = function () {
width: '50%',
},
}, [
h('div', {
style: {
textAlign: 'left',
fontSize: '10px',
marginBottom: '-10px',
},
}, 'Ethereum Address'),
h('div.confirm-screen-row-info', {}, toName),
h('div', {
style: {
textAlign: 'left',
fontSize: '8px',
},
}, '...5924'),
h('div.confirm-screen-row-detail', {}, `...${endOfToAddress}`),
]),
]),
contentDivider,
h('section.flex-row.flex-center', {
h('section.flex-row.flex-center.confirm-screen-row', {
}, [
h('div', {
style: {
width: '50%',
},
}, [
h('span', {
style: {
textAlign: 'left',
fontSize: '12px',
},
}, [
h('span.confirm-screen-label', {}, [
'Gas Fee',
]),
]),
@ -264,49 +263,21 @@ PendingTx.prototype.render = function () {
width: '50%',
},
}, [
h('div', {
style: {
textAlign: 'left',
fontSize: '10px',
marginBottom: '-10px',
},
}, '$0.04 USD'),
h('div.confirm-screen-row-info', {}, `$${gasFeeInUSD} USD`),
h('div', {
style: {
textAlign: 'left',
fontSize: '8px',
},
}, '0.001575 ETH'),
h('div.confirm-screen-row-detail', {}, `${gasFeeInETH} ETH`),
]),
]),
contentDivider,
h('section.flex-row.flex-center', {
style: {
backgroundColor: '#F6F6F6', // $wild-sand
borderRadius: '8px',
marginLeft: '10px',
marginRight: '10px',
paddingLeft: '6px',
paddingRight: '6px',
marginBottom: '10px',
},
}, [
h('section.flex-row.flex-center.confirm-screen-total-box ', {}, [
h('div', {
style: {
width: '50%',
},
}, [
h('div', {
style: {
textAlign: 'left',
fontSize: '12px',
marginBottom: '-10px',
},
}, [
'Total Tokens',
h('span.confirm-screen-label', {}, [
'Total ',
]),
h('div', {
@ -315,7 +286,7 @@ PendingTx.prototype.render = function () {
fontSize: '8px',
},
}, [
'Total Gas',
'Amount + Gas',
]),
]),
@ -325,20 +296,9 @@ PendingTx.prototype.render = function () {
width: '50%',
},
}, [
h('div', {
style: {
textAlign: 'left',
fontSize: '10px',
marginBottom: '-10px',
},
}, '0.24 ANT (127.00 USD)'),
h('div.confirm-screen-row-info', {}, `$${totalInUSD} USD`),
h('div', {
style: {
textAlign: 'left',
fontSize: '8px',
},
}, '0.249 ETH'),
h('div.confirm-screen-row-detail', {}, `${totalInETH} ETH`),
]),
]),
@ -356,32 +316,14 @@ PendingTx.prototype.render = function () {
// }, 'Reset'),
// Accept Button
h('input.confirm.btn-green', {
h('input.confirm-screen-confirm-button', {
type: 'submit',
value: 'CONFIRM',
style: {
marginTop: '8px',
width: '8em',
color: '#FFFFFF',
borderRadius: '2px',
fontSize: '12px',
lineHeight: '20px',
textAlign: 'center',
borderStyle: 'none',
},
disabled: insufficientBalance || !this.state.valid || !isValidAddress || this.state.submitting,
// disabled: insufficientBalance || !this.state.valid || !isValidAddress || this.state.submitting,
}),
// Cancel Button
h('button.cancel.btn-light', {
style: {
background: '#F7F7F7', // $alabaster
border: 'none',
opacity: 1,
width: '8em',
},
onClick: props.cancelTransaction,
}, 'CANCEL'),
h('button.cancel.btn-light.confirm-screen-cancel-button', {}, 'CANCEL'),
]),
]) // end of minwidth wrapper
)

50
ui/app/conversion-util.js Normal file
View File

@ -0,0 +1,50 @@
const {
numericBalance,
parseBalance,
formatBalance,
normalizeToWei,
valueTable,
} = require('./util')
const hexToBn = require('../../app/scripts/lib/hex-to-bn')
const { BN } = require('ethereumjs-util')
const GWEI_MULTIPLIER = normalizeToWei(hexToBn(valueTable.gwei.toString(16)), 'gwei');
const conversionUtil = (value, {
fromCurrency,
toCurrency,
fromFormat,
toFormat,
precision = 2,
conversionRate,
}) => {
let result;
if (fromFormat === 'BN') {
if (fromCurrency !== 'GWEI') {
result = normalizeToWei(value, 'gwei')
}
else {
result = value
}
result = result.toString(16)
result = formatBalance(result, 9)
result = result.split(' ')
result = Number(result[0]) * 1000000000
}
if (fromCurrency === 'GWEI') {
result = result / 1000000000
}
if (toCurrency === 'USD') {
result = result * conversionRate
result = result.toFixed(precision)
}
return result
};
module.exports = {
conversionUtil,
}

View File

@ -0,0 +1,223 @@
.confirm-screen-container {
position: absolute;
@media screen and (max-width: 575px) {
margin-top: 35px;
}
@media screen and (min-width: 576px) {
margin-top: 6.9vh;
}
}
.confirm-screen-wrapper {
display: flex;
flex-direction: column;
min-width: 320px;
min-height: 753px;
z-index: 100;
top: 5%;
font-family: 'DIN NEXT';
margin-left: 3.5%;
margin-right: 3.5%;
background: $white;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .08);
padding-top: 20px;
padding-bottom: 31px;
@media screen and (min-width: $break-large) {
width: 498px;
}
}
.confirm-screen-wrapper > h3,
.confirm-screen-wrapper > div,
.confirm-screen-wrapper > section {
margin-left: 23px;
margin-right: 23px;
}
.confirm-screen-wrapper > .confirm-screen-total-box {
margin-left: 10px;
margin-right: 10px;
}
.confirm-screen-wrapper > .confirm-memo-wrapper {
margin: 0;
}
.confirm-screen-wrapper > .confirm-screen-header {
@media screen and (max-width: $break-small) {
margin-left: 8px;
}
}
.confirm-screen-header {
font-size: 26px;
position: relative;
@media screen and (max-width: $break-small) {
font-size: 22px;
}
}
.confirm-screen-title {
@media screen and (max-width: $break-small) {
margin-left: 22px;
margin-right: 8px;
}
}
.confirm-screen-back-button {
background: $white;
border: 1px solid $dusty-gray;
left: 0;
position: absolute;
text-align: center;
color: $black;
padding: 6px 13px 7px 12px;
border-radius: 2px;
height: 30px;
width: 54px;
@media screen and (max-width: $break-small) {
margin-right: 12px;
}
}
.confirm-screen-account-wrapper {
display: flex;
flex-direction: column;
}
.confirm-screen-account-name, .confirm-screen-row-info {
font-size: 16px;
line-height: 24px;
color: $scorpion;
text-align: center;
}
.confirm-screen-account-number {
font-size: 10px;
line-height: 16px;
color: $dusty-gray;
text-align: center;
}
.confirm-screen-identicons {
margin-top: 48px;
i {
align-self: start;
margin: 20px 14px 0 14px;
}
}
.confirm-screen-sending-to-message {
text-align: center;
font-size: 16px;
margin-top: 30px;
}
.confirm-screen-send-amount {
font-size: 64px;
color: $scorpion;
margin-top: 12px;
line-height: 60px;
text-align: center;
font-family: 'DIN NEXT Light';
}
.confirm-screen-send-amount-currency {
font-size: 20px;
line-height: 20px;
text-align: center;
}
.confirm-memo-wrapper {
width: 100%;
border-bottom: 1px solid $gallery;
}
.confirm-screen-send-memo {
color: $dusty-gray;
font-size: 16px;
line-height: 24px;
text-align: center;
margin-top: 21px;
margin-bottom: 18px;
}
.confirm-screen-label {
font-size: 18px;
line-height: 25px;
color: $scorpion;
text-align: left;
}
section .confirm-screen-account-name,
section .confirm-screen-account-number,
.confirm-screen-row-info,
.confirm-screen-row-detail {
text-align: left;
}
.confirm-screen-row {
margin-top: 15px;
margin-bottom: 11.5px;
}
.confirm-screen-row-detail {
font-size: 12px;
line-height: 16px;
color: $dusty-gray;
}
.confirm-screen-total-box {
background-color: $wild-sand;
border-radius: 8px;
margin-left: 10px;
margin-right: 10px;
padding: 22px 14px 22px;
margin-bottom: 10px;
margin-top: 13px;
}
.confirm-screen-confirm-button {
height: 62px;
width: 216.88px;
border-radius: 2px;
background-color: #02C9B1;
font-size: 16px;
color: $white;
text-align: center;
font-family: 'DIN NEXT';
padding-top: 15px;
padding-bottom: 15px;
margin-top: 23px;
border-width: 0;
box-shadow: none;
}
.btn-light.confirm-screen-cancel-button {
height: 62px;
width: 216.88px;
background: none;
border: none;
opacity: 1;
width: 8em;
font-family: 'DIN NEXT';
border-width: 0;
padding-top: 15px;
padding-bottom: 15px;
font-size: 16px;
box-shadow: none;
}
#pending-tx-form {
flex: 1 0 auto;
}
.confirm-screen-row + .confirm-screen-row {
border-top: 1px solid $gallery;
}

View File

@ -14,6 +14,8 @@
@import './send.scss';
@import './confirm.scss';
// Balances
@import './hero-balance.scss';

View File

@ -49,6 +49,20 @@
font-style: normal;
}
@font-face {
font-family: 'DIN NEXT';
src: url('/fonts/DIN NEXT/DIN NEXT W01 Regular.otf') format('opentype');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'DIN NEXT Light';
src: url('/fonts/DIN NEXT/DIN NEXT W10 Light.otf') format('opentype');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Lato';
src: url('/fonts/Lato/Lato-Regular.ttf') format('truetype');

View File

@ -30,6 +30,7 @@ $concrete: #f3f3f3;
$tundora: #4d4d4d;
$nile-blue: #1b344d;
$scorpion: #5d5d5d;
$caribbean-green: #02C9B1;
$silver: #cdcdcd;
$crimson: #e91550;
$blue-lagoon: #038789;