Final version of Confirm transaction screen
This commit is contained in:
parent
ca2d5154c1
commit
00e53f0d43
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14">
|
||||
<path fill="#FFF" fill-rule="evenodd" d="M13 8H3.46l4.256 4.256c.366.367.337.99-.066 1.394-.404.403-1.027.432-1.394.066L.284 7.744a.855.855 0 0 1-.21-.378A.992.992 0 0 1 0 7c0-.13.029-.252.074-.366a.855.855 0 0 1 .21-.378L6.256.284c.367-.366.99-.337 1.394.066.403.404.432 1.027.066 1.394L3.46 6H13a1 1 0 0 1 0 2z"/>
|
||||
</svg>
|
After Width: | Height: | Size: 391 B |
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14">
|
||||
<path fill="#FFF" fill-rule="evenodd" d="M13.926 7.366a.855.855 0 0 1-.21.378l-5.972 5.972c-.367.366-.99.337-1.394-.066-.403-.404-.432-1.027-.066-1.394L10.54 8H1a1 1 0 0 1 0-2h9.54L6.284 1.744c-.366-.367-.337-.99.066-1.394.404-.403 1.027-.432 1.394-.066l5.972 5.972c.107.107.17.239.21.378A.992.992 0 0 1 14 7c0 .13-.029.252-.074.366z"/>
|
||||
</svg>
|
After Width: | Height: | Size: 412 B |
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="64">
|
||||
<path fill="#60DB97" fill-rule="evenodd" d="M19.996 32c0 .031 0 .062-.003.093-.003.03-.009.059-.015.089-.007.032-.013.064-.023.095a1.023 1.023 0 0 1-.077.179c-.005.008-.007.017-.012.026l-18 30.061a1.02 1.02 0 0 1-1.366.353.947.947 0 0 1-.366-1.318L17.845 32 .134 2.422A.947.947 0 0 1 .5 1.104a1.02 1.02 0 0 1 1.366.353l18 30.061c.005.009.007.018.012.026a1.023 1.023 0 0 1 .077.179c.01.031.016.063.023.095.006.03.012.059.015.089a.963.963 0 0 1 .003.093z"/>
|
||||
</svg>
|
After Width: | Height: | Size: 531 B |
|
@ -165,7 +165,7 @@ App.prototype.renderAppBar = function () {
|
|||
height: '38px',
|
||||
position: 'relative',
|
||||
zIndex: 12,
|
||||
/*borderBottom: (
|
||||
/* borderBottom: (
|
||||
props.currentView.name === 'config' ||
|
||||
props.currentView.name === 'add-token' ||
|
||||
props.currentView.name === 'info' ||
|
||||
|
|
|
@ -120,7 +120,7 @@ BuyButtonSubview.prototype.headerSubview = function () {
|
|||
width: '100vw',
|
||||
background: '#ffffff',
|
||||
color: '#333333',
|
||||
paddingTop: '4px',
|
||||
paddingTop: '30px',
|
||||
paddingBottom: '4px',
|
||||
},
|
||||
}, 'Select Service'),
|
||||
|
@ -240,8 +240,8 @@ BuyButtonSubview.prototype.mainnetSubview = function () {
|
|||
paddingLeft: '15px',
|
||||
fontFamily: 'Nunito Light',
|
||||
width: '100vw',
|
||||
background: 'rgb(235, 235, 235)',
|
||||
color: 'rgb(174, 174, 174)',
|
||||
background: '#6729a8',
|
||||
color: '#ffffff',
|
||||
paddingTop: '4px',
|
||||
paddingBottom: '4px',
|
||||
},
|
||||
|
|
|
@ -57,12 +57,12 @@ EthBalanceComponent.prototype.renderBalance = function (value) {
|
|||
const valueStyle = props.valueStyle ? props.valueStyle : {
|
||||
color: '#ffffff',
|
||||
width: '100%',
|
||||
fontSize: '14px',
|
||||
fontSize: props.fontSize || '14px',
|
||||
textAlign: 'right',
|
||||
}
|
||||
const dimStyle = props.dimStyle ? props.dimStyle : {
|
||||
color: ' #60db97',
|
||||
fontSize: '14px',
|
||||
fontSize: props.fontSize || '14px',
|
||||
marginLeft: '5px',
|
||||
}
|
||||
|
||||
|
|
|
@ -18,7 +18,7 @@ AccountPanel.prototype.render = function () {
|
|||
|
||||
return (
|
||||
|
||||
h('.identity-panel.flex-row.flex-left', {
|
||||
h('.identity-panel.flex-row.flex-center.flex-left', {
|
||||
style: {
|
||||
cursor: props.onClick ? 'pointer' : undefined,
|
||||
},
|
||||
|
@ -66,7 +66,7 @@ AccountPanel.prototype.genIcon = function (seed, picOrder) {
|
|||
},
|
||||
}, [
|
||||
h(Identicon, {
|
||||
diameter: 60,
|
||||
diameter: 40,
|
||||
address: seed,
|
||||
imageify: props.imageifyIdenticons,
|
||||
}),
|
||||
|
|
|
@ -13,6 +13,7 @@ const MiniAccountPanel = require('./mini-account-panel')
|
|||
const Copyable = require('./copyable')
|
||||
const EthBalance = require('./eth-balance')
|
||||
const addressSummary = util.addressSummary
|
||||
const accountSummary = util.accountSummary
|
||||
const nameForAddress = require('../../lib/contract-namer')
|
||||
const BNInput = require('./bn-as-decimal-input')
|
||||
const { getEnvironmentType } = require('../../../app/scripts/lib/util')
|
||||
|
@ -125,6 +126,8 @@ PendingTx.prototype.render = function () {
|
|||
fontSize: '14px',
|
||||
}
|
||||
|
||||
const isError = txMeta.simulationFails || !isValidAddress || insufficientBalance || (dangerousGasLimit && !gasLimitSpecified)
|
||||
|
||||
return (
|
||||
|
||||
h('div', {
|
||||
|
@ -139,57 +142,63 @@ PendingTx.prototype.render = function () {
|
|||
// tx info
|
||||
h('div', [
|
||||
|
||||
h('div', {
|
||||
style: {
|
||||
position: 'absolute',
|
||||
top: '45px',
|
||||
width: '100%',
|
||||
textAlign: 'center',
|
||||
color: '#ffffff',
|
||||
},
|
||||
}, [
|
||||
h('h3', {
|
||||
style: {
|
||||
alignSelf: 'center',
|
||||
display: props.unconfTxListLength > 1 ? 'block' : 'none',
|
||||
},
|
||||
}, [
|
||||
h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', {
|
||||
style: {
|
||||
display: props.index === 0 ? 'none' : 'inline-block',
|
||||
},
|
||||
onClick: () => props.dispatch(actions.previousTx()),
|
||||
}),
|
||||
` ${props.index + 1} of ${props.unconfTxListLength} `,
|
||||
h('i.fa.fa-arrow-right.fa-lg.cursor-pointer', {
|
||||
style: {
|
||||
display: props.index + 1 === props.unconfTxListLength ? 'none' : 'inline-block',
|
||||
},
|
||||
onClick: () => props.dispatch(actions.nextTx()),
|
||||
}),
|
||||
])]
|
||||
),
|
||||
|
||||
h('.flex-row.flex-center', {
|
||||
style: {
|
||||
maxWidth: '100%',
|
||||
padding: '0 20px 20px 20px',
|
||||
padding: showRejectAll ? '20px 20px 50px 20px' : '20px 20px 20px 20px',
|
||||
background: 'linear-gradient(rgb(84, 36, 147), rgb(104, 45, 182))',
|
||||
position: 'relative',
|
||||
},
|
||||
}, [
|
||||
|
||||
h('div', [
|
||||
h(MiniAccountPanel, {
|
||||
imageSeed: address,
|
||||
picOrder: 'left',
|
||||
}),
|
||||
h('div', [
|
||||
h('div.font-medium', {
|
||||
h('div', {
|
||||
style: {
|
||||
position: 'absolute',
|
||||
bottom: '20px',
|
||||
width: '100%',
|
||||
textAlign: 'center',
|
||||
color: '#ffffff',
|
||||
},
|
||||
}, [
|
||||
h('h3', {
|
||||
style: {
|
||||
alignSelf: 'center',
|
||||
display: props.unconfTxListLength > 1 ? 'block' : 'none',
|
||||
fontSize: '14px',
|
||||
},
|
||||
}, [
|
||||
h('i.fa.white-arrow-left.fa-lg.cursor-pointer', {
|
||||
style: {
|
||||
display: props.index === 0 ? 'none' : 'inline-block',
|
||||
},
|
||||
onClick: () => props.dispatch(actions.previousTx()),
|
||||
}),
|
||||
` ${props.index + 1} of ${props.unconfTxListLength} `,
|
||||
h('i.fa.white-arrow-right.fa-lg.cursor-pointer', {
|
||||
style: {
|
||||
display: props.index + 1 === props.unconfTxListLength ? 'none' : 'inline-block',
|
||||
},
|
||||
onClick: () => props.dispatch(actions.nextTx()),
|
||||
}),
|
||||
])]
|
||||
),
|
||||
|
||||
h(MiniAccountPanel, {
|
||||
imageSeed: address,
|
||||
picOrder: 'left',
|
||||
}, [
|
||||
h('div', {
|
||||
style: {
|
||||
marginLeft: '10px',
|
||||
},
|
||||
}, [
|
||||
h('div.font-pre-medium', {
|
||||
style: {
|
||||
fontFamily: 'Nunito SemiBold',
|
||||
color: '#ffffff',
|
||||
whiteSpace: 'nowrap',
|
||||
},
|
||||
}, identity.name),
|
||||
}, accountSummary(identity.name, 6, 4)),
|
||||
|
||||
h(Copyable, {
|
||||
value: ethUtil.toChecksumAddress(address),
|
||||
|
@ -208,6 +217,7 @@ PendingTx.prototype.render = function () {
|
|||
},
|
||||
}, [
|
||||
h(EthBalance, {
|
||||
fontSize: '12px',
|
||||
value: balance,
|
||||
conversionRate,
|
||||
currentCurrency,
|
||||
|
@ -228,6 +238,7 @@ PendingTx.prototype.render = function () {
|
|||
.table-box {
|
||||
margin: 7px 0px 0px 0px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.table-box .row {
|
||||
margin: 0px;
|
||||
|
@ -236,7 +247,7 @@ PendingTx.prototype.render = function () {
|
|||
justify-content: space-between;
|
||||
font-family: Nunito Regular;
|
||||
font-size: 14px;
|
||||
padding: 5px 25px;
|
||||
padding: 5px 30px;
|
||||
}
|
||||
.table-box .row .value {
|
||||
font-family: Nunito Regular;
|
||||
|
@ -245,7 +256,12 @@ PendingTx.prototype.render = function () {
|
|||
|
||||
h('.table-box', [
|
||||
|
||||
h('.flex-row.flex-center', [
|
||||
h('.flex-row.flex-center', {
|
||||
style: {
|
||||
marginTop: '20px',
|
||||
marginBottom: '30px',
|
||||
},
|
||||
}, [
|
||||
!isNotification ? h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', {
|
||||
onClick: this.goHome.bind(this),
|
||||
style: {
|
||||
|
@ -260,6 +276,49 @@ PendingTx.prototype.render = function () {
|
|||
}) : null,
|
||||
]),
|
||||
|
||||
isError ? h('div', {
|
||||
style: {
|
||||
textAlign: 'center',
|
||||
position: 'absolute',
|
||||
top: '25px',
|
||||
background: 'rgba(255, 255, 255, 0.85)',
|
||||
border: '2px solid rgb(226, 2, 2)',
|
||||
width: '100%',
|
||||
},
|
||||
}, [
|
||||
txMeta.simulationFails ?
|
||||
h('.error', {
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
},
|
||||
}, 'Transaction Error. Exception thrown in contract code.')
|
||||
: null,
|
||||
|
||||
!isValidAddress ?
|
||||
h('.error', {
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
},
|
||||
}, 'Recipient address is invalid. Sending this transaction will result in a loss of ETH. ')
|
||||
: null,
|
||||
|
||||
insufficientBalance ?
|
||||
h('span.error', {
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
},
|
||||
}, 'Insufficient balance for transaction. ')
|
||||
: null,
|
||||
|
||||
(dangerousGasLimit && !gasLimitSpecified) ?
|
||||
h('span.error', {
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
},
|
||||
}, 'Gas limit set dangerously high. Approving this transaction is liable to fail. ')
|
||||
: null,
|
||||
]) : null,
|
||||
|
||||
// Ether Value
|
||||
// Currently not customizable, but easily modified
|
||||
// in the way that gas and gasLimit currently are.
|
||||
|
@ -322,8 +381,6 @@ PendingTx.prototype.render = function () {
|
|||
h('.cell.row', {
|
||||
style: {
|
||||
fontFamily: 'Nunito Regular',
|
||||
background: 'white',
|
||||
padding: '10px 25px',
|
||||
},
|
||||
}, [
|
||||
h('.cell.label', 'Max Total'),
|
||||
|
@ -357,7 +414,7 @@ PendingTx.prototype.render = function () {
|
|||
h('.cell.label'),
|
||||
h('.cell.value', {
|
||||
style: {
|
||||
fontFamily: 'Nunito Bold',
|
||||
fontFamily: 'Nunito Regular',
|
||||
fontSize: '14px',
|
||||
},
|
||||
}, `Data included: ${dataLength} bytes`),
|
||||
|
@ -371,51 +428,13 @@ PendingTx.prototype.render = function () {
|
|||
margin-left: 10px;
|
||||
}
|
||||
`),
|
||||
h('.cell.row', {
|
||||
style: {
|
||||
textAlign: 'center',
|
||||
},
|
||||
}, [
|
||||
txMeta.simulationFails ?
|
||||
h('.error', {
|
||||
style: {
|
||||
fontSize: '0.9em',
|
||||
},
|
||||
}, 'Transaction Error. Exception thrown in contract code.')
|
||||
: null,
|
||||
|
||||
!isValidAddress ?
|
||||
h('.error', {
|
||||
style: {
|
||||
fontSize: '0.9em',
|
||||
},
|
||||
}, 'Recipient address is invalid. Sending this transaction will result in a loss of ETH.')
|
||||
: null,
|
||||
|
||||
insufficientBalance ?
|
||||
h('span.error', {
|
||||
style: {
|
||||
fontSize: '0.9em',
|
||||
},
|
||||
}, 'Insufficient balance for transaction')
|
||||
: null,
|
||||
|
||||
(dangerousGasLimit && !gasLimitSpecified) ?
|
||||
h('span.error', {
|
||||
style: {
|
||||
fontSize: '0.9em',
|
||||
},
|
||||
}, 'Gas limit set dangerously high. Approving this transaction is liable to fail.')
|
||||
: null,
|
||||
]),
|
||||
|
||||
|
||||
// send + cancel
|
||||
h('.flex-row.flex-space-around.conf-buttons', {
|
||||
style: {
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-end',
|
||||
margin: '14px 25px',
|
||||
margin: '14px 30px',
|
||||
},
|
||||
}, [
|
||||
h('button.btn-violet', {
|
||||
|
@ -442,7 +461,7 @@ PendingTx.prototype.render = function () {
|
|||
style: {
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-end',
|
||||
margin: '14px 25px',
|
||||
margin: '14px 30px',
|
||||
},
|
||||
}, [
|
||||
h('button.cancel.btn-red', {
|
||||
|
@ -462,36 +481,36 @@ PendingTx.prototype.miniAccountPanelForRecipient = function () {
|
|||
|
||||
// If it's not a contract deploy, send to the account
|
||||
if (!isContractDeploy) {
|
||||
return h('div', [
|
||||
h(MiniAccountPanel, {
|
||||
return h(MiniAccountPanel, {
|
||||
imageSeed: txParams.to,
|
||||
picOrder: 'left',
|
||||
}),
|
||||
|
||||
h('div.font-medium', {
|
||||
style: {
|
||||
fontFamily: 'Nunito SemiBold',
|
||||
color: '#ffffff',
|
||||
},
|
||||
}, nameForAddress(txParams.to, props.identities)),
|
||||
|
||||
h(Copyable, {
|
||||
value: ethUtil.toChecksumAddress(txParams.to),
|
||||
}, [
|
||||
h('span.font-small', {
|
||||
style: {
|
||||
fontFamily: 'Nunito Regular',
|
||||
color: 'rgba(255, 255, 255, 0.7)',
|
||||
},
|
||||
}, addressSummary(txParams.to, 6, 4, false)),
|
||||
]),
|
||||
|
||||
picOrder: 'right',
|
||||
}, [
|
||||
h('div', {
|
||||
style: {
|
||||
height: 34,
|
||||
marginRight: '10px',
|
||||
},
|
||||
}),
|
||||
])
|
||||
}, [
|
||||
h('span.font-pre-medium', {
|
||||
style: {
|
||||
fontFamily: 'Nunito SemiBold',
|
||||
color: '#ffffff',
|
||||
display: 'inline-block',
|
||||
whiteSpace: 'nowrap',
|
||||
},
|
||||
}, accountSummary(nameForAddress(txParams.to, props.identities)), 6, 4),
|
||||
|
||||
h(Copyable, {
|
||||
value: ethUtil.toChecksumAddress(txParams.to),
|
||||
}, [
|
||||
h('span.font-small', {
|
||||
style: {
|
||||
fontFamily: 'Nunito Regular',
|
||||
color: 'rgba(255, 255, 255, 0.7)',
|
||||
},
|
||||
}, addressSummary(txParams.to, 6, 4, false)),
|
||||
]),
|
||||
]),
|
||||
])
|
||||
} else {
|
||||
return h(MiniAccountPanel, {
|
||||
picOrder: 'left',
|
||||
|
@ -614,10 +633,10 @@ PendingTx.prototype.stopPropagation = function (event) {
|
|||
function forwardCarrat () {
|
||||
return (
|
||||
h('img', {
|
||||
src: 'images/forward-carrat.svg',
|
||||
src: 'images/forward-carrat-light.svg',
|
||||
style: {
|
||||
padding: '5px 30px 0px 30px',
|
||||
height: '64px',
|
||||
height: '62px',
|
||||
},
|
||||
})
|
||||
)
|
||||
|
|
|
@ -461,6 +461,18 @@ input.large-input {
|
|||
margin: 0px -8px 0px 8px;
|
||||
}
|
||||
|
||||
.white-arrow-left {
|
||||
content: url('../images/arrow-left-white.svg');
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.white-arrow-right {
|
||||
content: url('../images/arrow-right-white.svg');
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
/* identity panel */
|
||||
|
||||
.identity-panel {
|
||||
|
@ -469,7 +481,7 @@ input.large-input {
|
|||
|
||||
.identity-panel .identicon-wrapper {
|
||||
margin-bottom: 10px;
|
||||
margin-top: 8px;
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
@ -568,6 +580,7 @@ input.large-input {
|
|||
.cell.label {
|
||||
font-family: 'Nunito Regular';
|
||||
font-size: 14px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.cell.value {
|
||||
|
|
|
@ -167,6 +167,10 @@
|
|||
font-size: 12px;
|
||||
}
|
||||
|
||||
.font-pre-medium {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.font-medium {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
|
|
@ -27,7 +27,7 @@ RevealSeedConfirmation.prototype.render = function () {
|
|||
style: { maxWidth: '420px' },
|
||||
}, [
|
||||
|
||||
h('h3.flex-center', {
|
||||
h('h3.flex-center.section-title', {
|
||||
style: {
|
||||
background: '#ffffff',
|
||||
color: '#333333',
|
||||
|
@ -37,7 +37,7 @@ RevealSeedConfirmation.prototype.render = function () {
|
|||
fontFamily: 'Nunito Semibold',
|
||||
},
|
||||
}, [
|
||||
'Reveal Seed Words',
|
||||
h('h2.page-subtitle', 'Reveal Seed Words'),
|
||||
]),
|
||||
|
||||
h('.div', {
|
||||
|
|
|
@ -21,6 +21,7 @@ for (var currency in valueTable) {
|
|||
module.exports = {
|
||||
valuesFor: valuesFor,
|
||||
addressSummary: addressSummary,
|
||||
accountSummary: accountSummary,
|
||||
miniAddressSummary: miniAddressSummary,
|
||||
isAllOneCase: isAllOneCase,
|
||||
isValidAddress: isValidAddress,
|
||||
|
@ -55,6 +56,14 @@ function addressSummary (address, firstSegLength = 10, lastSegLength = 4, includ
|
|||
return checked ? checked.slice(0, firstSegLength) + '...' + checked.slice(checked.length - lastSegLength) : '...'
|
||||
}
|
||||
|
||||
function accountSummary (acc, firstSegLength = 6, lastSegLength = 4) {
|
||||
if (!acc) return ''
|
||||
if (acc.length < 12) return acc
|
||||
let posOfLastPart = acc.length - lastSegLength
|
||||
if (posOfLastPart < (firstSegLength + 1)) posOfLastPart += (firstSegLength + 1) - posOfLastPart
|
||||
return acc ? acc.slice(0, firstSegLength) + '...' + acc.slice(posOfLastPart) : '...'
|
||||
}
|
||||
|
||||
function miniAddressSummary (address) {
|
||||
if (!address) return ''
|
||||
var checked = ethUtil.toChecksumAddress(address)
|
||||
|
|
Loading…
Reference in New Issue