poanetwork
/
nifty-wallet
mirror of https://github.com/poanetwork/nifty-wallet.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Final version of Confirm transaction screen

This commit is contained in:
viktor 2018-08-01 17:53:36 +03:00
parent ca2d5154c1
commit 00e53f0d43
12 changed files with 178 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/images/arrow-left-white.svg Executable file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 391 B

3
app/images/arrow-right-white.svg Executable file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 412 B

3
app/images/forward-carrat-light.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 531 B

2
old-ui/app/app.js
View File

@ -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' ||

6
old-ui/app/components/buy-button-subview.js
View File

@ -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',
},

4
old-ui/app/components/eth-balance.js
View File

@ -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',
}

4
old-ui/app/components/mini-account-panel.js
View File

@ -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,
}),

245
old-ui/app/components/pending-tx.js
View File

@ -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',
},
})
)

15
old-ui/app/css/index.css
View File

@ -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 {

4
old-ui/app/css/lib.css
View File

@ -167,6 +167,10 @@
font-size: 12px;
}
.font-pre-medium {
font-size: 14px;
}
.font-medium {
font-size: 20px;
}

4
old-ui/app/keychains/hd/recover-seed/confirmation.js
View File

@ -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', {

9
old-ui/app/util.js
View File

@ -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)