aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app/components
diff options
context:
space:
mode:
Diffstat (limited to 'ui/app/components')
-rw-r--r--ui/app/components/coinbase-form.js8
-rw-r--r--ui/app/components/copyButton.js4
-rw-r--r--ui/app/components/drop-menu-item.js6
-rw-r--r--ui/app/components/eth-balance.js4
-rw-r--r--ui/app/components/identicon.js30
-rw-r--r--ui/app/components/network.js8
-rw-r--r--ui/app/components/notice.js110
-rw-r--r--ui/app/components/pending-msg-details.js2
-rw-r--r--ui/app/components/pending-tx-details.js39
-rw-r--r--ui/app/components/shapeshift-form.js4
-rw-r--r--ui/app/components/shift-list-item.js1
-rw-r--r--ui/app/components/tooltip.js2
-rw-r--r--ui/app/components/transaction-list-item-icon.js39
-rw-r--r--ui/app/components/transaction-list-item.js20
-rw-r--r--ui/app/components/transaction-list.js9
15 files changed, 199 insertions, 87 deletions
diff --git a/ui/app/components/coinbase-form.js b/ui/app/components/coinbase-form.js
index 32e3066fd..430a3eead 100644
--- a/ui/app/components/coinbase-form.js
+++ b/ui/app/components/coinbase-form.js
@@ -7,7 +7,7 @@ const actions = require('../actions')
const isValidAddress = require('../util').isValidAddress
module.exports = connect(mapStateToProps)(CoinbaseForm)
-function mapStateToProps(state) {
+function mapStateToProps (state) {
return {
selectedAccount: state.selectedAccount,
warning: state.appState.warning,
@@ -16,7 +16,7 @@ function mapStateToProps(state) {
inherits(CoinbaseForm, Component)
-function CoinbaseForm() {
+function CoinbaseForm () {
Component.call(this)
}
@@ -124,7 +124,6 @@ CoinbaseForm.prototype.toCoinbase = function () {
}
CoinbaseForm.prototype.renderLoading = function () {
-
return h('img', {
style: {
width: '27px',
@@ -134,9 +133,8 @@ CoinbaseForm.prototype.renderLoading = function () {
})
}
-function isValidAmountforCoinBase(amount) {
+function isValidAmountforCoinBase (amount) {
amount = parseFloat(amount)
-
if (amount) {
if (amount <= 15 && amount > 0) {
return {
diff --git a/ui/app/components/copyButton.js b/ui/app/components/copyButton.js
index a01603585..a25d0719c 100644
--- a/ui/app/components/copyButton.js
+++ b/ui/app/components/copyButton.js
@@ -50,12 +50,10 @@ CopyButton.prototype.render = function () {
])
}
-CopyButton.prototype.debounceRestore = function() {
-
+CopyButton.prototype.debounceRestore = function () {
this.setState({ copied: true })
clearTimeout(this.timeout)
this.timeout = setTimeout(() => {
this.setState({ copied: false })
}, 850)
-
}
diff --git a/ui/app/components/drop-menu-item.js b/ui/app/components/drop-menu-item.js
index ac0aecadd..9f002234e 100644
--- a/ui/app/components/drop-menu-item.js
+++ b/ui/app/components/drop-menu-item.js
@@ -32,9 +32,9 @@ DropMenuItem.prototype.render = function () {
}
DropMenuItem.prototype.activeNetworkRender = function () {
- let activeNetwork = this.props.activeNetworkRender
- let { provider } = this.props
- let providerType = provider ? provider.type : null
+ const activeNetwork = this.props.activeNetworkRender
+ const { provider } = this.props
+ const providerType = provider ? provider.type : null
if (activeNetwork === undefined) return
switch (this.props.label) {
diff --git a/ui/app/components/eth-balance.js b/ui/app/components/eth-balance.js
index 46127bed5..57ca84564 100644
--- a/ui/app/components/eth-balance.js
+++ b/ui/app/components/eth-balance.js
@@ -15,9 +15,10 @@ function EthBalanceComponent () {
EthBalanceComponent.prototype.render = function () {
var props = this.props
+ let { value } = props
var style = props.style
var needsParse = this.props.needsParse !== undefined ? this.props.needsParse : true
- const value = formatBalance(props.value, 6, needsParse)
+ value = value ? formatBalance(value, 6, needsParse) : '...'
var width = props.width
return (
@@ -38,6 +39,7 @@ EthBalanceComponent.prototype.render = function () {
EthBalanceComponent.prototype.renderBalance = function (value) {
var props = this.props
if (value === 'None') return value
+ if (value === '...') return value
var balanceObj = generateBalanceObject(value, props.shorten ? 1 : 3)
var balance
var splitBalance = value.split(' ')
diff --git a/ui/app/components/identicon.js b/ui/app/components/identicon.js
index 4b2bf899e..6d4871d02 100644
--- a/ui/app/components/identicon.js
+++ b/ui/app/components/identicon.js
@@ -16,8 +16,8 @@ function IdenticonComponent () {
}
IdenticonComponent.prototype.render = function () {
- var state = this.props
- var diameter = state.diameter || this.defaultDiameter
+ var props = this.props
+ var diameter = props.diameter || this.defaultDiameter
return (
h('div', {
key: 'identicon-' + this.props.address,
@@ -33,15 +33,31 @@ IdenticonComponent.prototype.render = function () {
}
IdenticonComponent.prototype.componentDidMount = function () {
- var state = this.props
- var address = state.address
+ var props = this.props
+ var address = props.address
if (!address) return
var container = findDOMNode(this)
- var diameter = state.diameter || this.defaultDiameter
- var imageify = state.imageify === undefined ? true : state.imageify
- var img = iconFactory.iconForAddress(address, diameter, imageify)
+ var diameter = props.diameter || this.defaultDiameter
+ var img = iconFactory.iconForAddress(address, diameter, false)
container.appendChild(img)
}
+IdenticonComponent.prototype.componentDidUpdate = function () {
+ var props = this.props
+ var address = props.address
+
+ if (!address) return
+
+ var container = findDOMNode(this)
+
+ var children = container.children
+ for (var i = 0; i < children.length; i++) {
+ container.removeChild(children[i])
+ }
+
+ var diameter = props.diameter || this.defaultDiameter
+ var img = iconFactory.iconForAddress(address, diameter, false)
+ container.appendChild(img)
+}
diff --git a/ui/app/components/network.js b/ui/app/components/network.js
index 1f61ef73f..77805fd57 100644
--- a/ui/app/components/network.js
+++ b/ui/app/components/network.js
@@ -22,7 +22,6 @@ Network.prototype.render = function () {
let iconName, hoverText
if (networkNumber === 'loading') {
-
return h('img.network-indicator', {
title: 'Attempting to connect to blockchain.',
onClick: (event) => this.props.onClick(event),
@@ -32,7 +31,6 @@ Network.prototype.render = function () {
},
src: 'images/loading.svg',
})
-
} else if (providerName === 'mainnet') {
hoverText = 'Main Ethereum Network'
iconName = 'ethereum-network'
@@ -48,11 +46,7 @@ Network.prototype.render = function () {
}
return (
- h('#network_component.flex-center.pointer', {
- style: {
- marginRight: '-27px',
- marginLeft: '-3px',
- },
+ h('#network_component.pointer', {
title: hoverText,
onClick: (event) => this.props.onClick(event),
}, [
diff --git a/ui/app/components/notice.js b/ui/app/components/notice.js
new file mode 100644
index 000000000..00db734d7
--- /dev/null
+++ b/ui/app/components/notice.js
@@ -0,0 +1,110 @@
+const inherits = require('util').inherits
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const ReactMarkdown = require('react-markdown')
+const linker = require('extension-link-enabler')
+const findDOMNode = require('react-dom').findDOMNode
+
+module.exports = Notice
+
+inherits(Notice, Component)
+function Notice () {
+ Component.call(this)
+}
+
+Notice.prototype.render = function () {
+ const { notice, onConfirm } = this.props
+ const { title, date, body } = notice
+
+ return (
+ h('.flex-column.flex-center.flex-grow', [
+ h('h3.flex-center.text-transform-uppercacse.terms-header', {
+ style: {
+ background: '#EBEBEB',
+ color: '#AEAEAE',
+ width: '100%',
+ fontSize: '20px',
+ textAlign: 'center',
+ padding: 6,
+ },
+ }, [
+ title,
+ ]),
+
+ h('h5.flex-center.text-transform-uppercacse.terms-header', {
+ style: {
+ background: '#EBEBEB',
+ color: '#AEAEAE',
+ marginBottom: 24,
+ width: '100%',
+ fontSize: '20px',
+ textAlign: 'center',
+ padding: 6,
+ },
+ }, [
+ date,
+ ]),
+
+ h('style', `
+
+ .markdown {
+ overflow-x: hidden;
+ }
+
+ .markdown h1, .markdown h2, .markdown h3 {
+ margin: 10px 0;
+ font-weight: bold;
+ }
+
+ .markdown strong {
+ font-weight: bold;
+ }
+ .markdown em {
+ font-style: italic;
+ }
+
+ .markdown p {
+ margin: 10px 0;
+ }
+
+ .markdown a {
+ color: #df6b0e;
+ }
+
+ `),
+
+ h('div.markdown', {
+ style: {
+ background: 'rgb(235, 235, 235)',
+ height: '310px',
+ padding: '6px',
+ width: '90%',
+ overflowY: 'scroll',
+ scroll: 'auto',
+ },
+ }, [
+ h(ReactMarkdown, {
+ source: body,
+ skipHtml: true,
+ }),
+ ]),
+
+ h('button', {
+ onClick: onConfirm,
+ style: {
+ marginTop: '18px',
+ },
+ }, 'Continue'),
+ ])
+ )
+}
+
+Notice.prototype.componentDidMount = function () {
+ var node = findDOMNode(this)
+ linker.setupListener(node)
+}
+
+Notice.prototype.componentWillUnmount = function () {
+ var node = findDOMNode(this)
+ linker.teardownListener(node)
+}
diff --git a/ui/app/components/pending-msg-details.js b/ui/app/components/pending-msg-details.js
index 16308d121..404cb8ae2 100644
--- a/ui/app/components/pending-msg-details.js
+++ b/ui/app/components/pending-msg-details.js
@@ -16,7 +16,7 @@ PendingMsgDetails.prototype.render = function () {
var msgData = state.txData
var msgParams = msgData.msgParams || {}
- var address = msgParams.from || state.selectedAddress
+ var address = msgParams.from || state.selectedAccount
var identity = state.identities[address] || { address: address }
var account = state.accounts[address] || { address: address }
diff --git a/ui/app/components/pending-tx-details.js b/ui/app/components/pending-tx-details.js
index 545302098..286931f6f 100644
--- a/ui/app/components/pending-tx-details.js
+++ b/ui/app/components/pending-tx-details.js
@@ -7,8 +7,6 @@ const EthBalance = require('./eth-balance')
const util = require('../util')
const addressSummary = util.addressSummary
const nameForAddress = require('../../lib/contract-namer')
-const ethUtil = require('ethereumjs-util')
-const BN = ethUtil.BN
module.exports = PendingTxDetails
@@ -24,20 +22,14 @@ PTXP.render = function () {
var txData = props.txData
var txParams = txData.txParams || {}
- var address = txParams.from || props.selectedAddress
+ var address = txParams.from || props.selectedAccount
var identity = props.identities[address] || { address: address }
var account = props.accounts[address]
var balance = account ? account.balance : '0x0'
- var gasMultiplier = txData.gasMultiplier
- var gasCost = new BN(ethUtil.stripHexPrefix(txParams.gas || txData.estimatedGas), 16)
- var gasPrice = new BN(ethUtil.stripHexPrefix(txParams.gasPrice || '0x4a817c800'), 16)
- gasPrice = gasPrice.mul(new BN(gasMultiplier * 100), 10).div(new BN(100, 10))
- var txFee = gasCost.mul(gasPrice)
- var txValue = new BN(ethUtil.stripHexPrefix(txParams.value || '0x0'), 16)
- var maxCost = txValue.add(txFee)
+ var txFee = txData.txFee || ''
+ var maxCost = txData.maxCost || ''
var dataLength = txParams.data ? (txParams.data.length - 2) / 2 : 0
-
var imageify = props.imageifyIdenticons === undefined ? true : props.imageifyIdenticons
return (
@@ -154,8 +146,6 @@ PTXP.render = function () {
]),
]), // End of Table
- this.warnIfNeeded(),
-
])
)
}
@@ -201,29 +191,6 @@ PTXP.miniAccountPanelForRecipient = function () {
}
}
-// Should analyze if there is a DELEGATECALL opcode
-// in the recipient contract, and show a warning if so.
-PTXP.warnIfNeeded = function () {
- const containsDelegateCall = !!this.props.txData.containsDelegateCall
-
- if (!containsDelegateCall) {
- return null
- }
-
- return h('span.error', {
- style: {
- fontFamily: 'Montserrat Light',
- fontSize: '13px',
- display: 'flex',
- justifyContent: 'center',
- },
- }, [
- h('i.fa.fa-lg.fa-info-circle', { style: { margin: '5px' } }),
- h('span', ' Your identity may be used in other contracts!'),
- ])
-}
-
-
function forwardCarrat () {
return (
diff --git a/ui/app/components/shapeshift-form.js b/ui/app/components/shapeshift-form.js
index 1da549288..383d5b623 100644
--- a/ui/app/components/shapeshift-form.js
+++ b/ui/app/components/shapeshift-form.js
@@ -8,7 +8,7 @@ const Qr = require('./qr-code')
const isValidAddress = require('../util').isValidAddress
module.exports = connect(mapStateToProps)(ShapeshiftForm)
-function mapStateToProps(state) {
+function mapStateToProps (state) {
return {
selectedAccount: state.selectedAccount,
warning: state.appState.warning,
@@ -25,7 +25,6 @@ function ShapeshiftForm () {
}
ShapeshiftForm.prototype.render = function () {
-
return h(ReactCSSTransitionGroup, {
className: 'css-transition-group',
transitionName: 'main',
@@ -34,7 +33,6 @@ ShapeshiftForm.prototype.render = function () {
}, [
this.props.qrRequested ? h(Qr, {key: 'qr'}) : this.renderMain(),
])
-
}
ShapeshiftForm.prototype.renderMain = function () {
diff --git a/ui/app/components/shift-list-item.js b/ui/app/components/shift-list-item.js
index 38c19eb28..e0243e247 100644
--- a/ui/app/components/shift-list-item.js
+++ b/ui/app/components/shift-list-item.js
@@ -26,7 +26,6 @@ function ShiftListItem () {
}
ShiftListItem.prototype.render = function () {
-
return (
h('.transaction-list-item.flex-row', {
style: {
diff --git a/ui/app/components/tooltip.js b/ui/app/components/tooltip.js
index 757ad0cd6..edbc074bb 100644
--- a/ui/app/components/tooltip.js
+++ b/ui/app/components/tooltip.js
@@ -11,7 +11,6 @@ function Tooltip () {
}
Tooltip.prototype.render = function () {
-
const props = this.props
const { position, title, children } = props
@@ -20,5 +19,4 @@ Tooltip.prototype.render = function () {
title,
fixed: false,
}, children)
-
}
diff --git a/ui/app/components/transaction-list-item-icon.js b/ui/app/components/transaction-list-item-icon.js
index 8b118b1d4..eca0d693a 100644
--- a/ui/app/components/transaction-list-item-icon.js
+++ b/ui/app/components/transaction-list-item-icon.js
@@ -13,13 +13,40 @@ function TransactionIcon () {
TransactionIcon.prototype.render = function () {
const { transaction, txParams, isMsg } = this.props
+ switch (transaction.status) {
+ case 'unapproved':
+ return h('.unapproved-tx', {
+ style: {
+ width: '24px',
+ height: '24px',
+ background: '#4dffff',
+ border: 'solid',
+ borderColor: '#AEAEAE',
+ borderWidth: '0.5px',
+ borderRadius: '13px',
+ },
+ })
- if (transaction.status === 'rejected') {
- return h('i.fa.fa-exclamation-triangle.fa-lg.warning', {
- style: {
- width: '24px',
- },
- })
+ case 'rejected':
+ return h('i.fa.fa-exclamation-triangle.fa-lg.warning', {
+ style: {
+ width: '24px',
+ },
+ })
+
+ case 'failed':
+ return h('i.fa.fa-exclamation-triangle.fa-lg.error', {
+ style: {
+ width: '24px',
+ },
+ })
+
+ case 'signed':
+ return h('i.fa.fa-ellipsis-h', {
+ style: {
+ fontSize: '27px',
+ },
+ })
}
if (isMsg) {
diff --git a/ui/app/components/transaction-list-item.js b/ui/app/components/transaction-list-item.js
index f92a4ab2e..95e850264 100644
--- a/ui/app/components/transaction-list-item.js
+++ b/ui/app/components/transaction-list-item.js
@@ -8,6 +8,7 @@ const explorerLink = require('../../lib/explorer-link')
const CopyButton = require('./copyButton')
const vreme = new (require('vreme'))
const extension = require('../../../app/scripts/lib/extension')
+const Tooltip = require('./tooltip')
const TransactionIcon = require('./transaction-list-item-icon')
const ShiftListItem = require('./shift-list-item')
@@ -31,7 +32,7 @@ TransactionListItem.prototype.render = function () {
var isMsg = ('msgParams' in transaction)
var isTx = ('txParams' in transaction)
- var isPending = transaction.status === 'unconfirmed'
+ var isPending = transaction.status === 'unapproved'
let txParams
if (isTx) {
@@ -58,11 +59,7 @@ TransactionListItem.prototype.render = function () {
}, [
h('.identicon-wrapper.flex-column.flex-center.select-none', [
- transaction.status === 'unconfirmed' ? h('i.fa.fa-ellipsis-h', {
- style: {
- fontSize: '27px',
- },
- }) : h( '.pop-hover', {
+ h('.pop-hover', {
onClick: (event) => {
event.stopPropagation()
if (!isTx || isPending) return
@@ -138,7 +135,14 @@ function failIfFailed (transaction) {
if (transaction.status === 'rejected') {
return h('span.error', ' (Rejected)')
}
- if (transaction.status === 'failed') {
- return h('span.error', ' (Failed)')
+ if (transaction.err) {
+
+ return h(Tooltip, {
+ title: transaction.err.message,
+ position: 'bottom',
+ }, [
+ h('span.error', ' (Failed)'),
+ ])
}
+
}
diff --git a/ui/app/components/transaction-list.js b/ui/app/components/transaction-list.js
index 7e1bedb05..b055ca9d5 100644
--- a/ui/app/components/transaction-list.js
+++ b/ui/app/components/transaction-list.js
@@ -13,12 +13,13 @@ function TransactionList () {
}
TransactionList.prototype.render = function () {
- const { txsToRender, network, unconfMsgs } = this.props
+ const { transactions, network, unconfMsgs } = this.props
+
var shapeShiftTxList
if (network === '1') {
shapeShiftTxList = this.props.shapeShiftTxList
}
- const transactions = !shapeShiftTxList ? txsToRender.concat(unconfMsgs) : txsToRender.concat(unconfMsgs, shapeShiftTxList)
+ const txsToRender = !shapeShiftTxList ? transactions.concat(unconfMsgs) : transactions.concat(unconfMsgs, shapeShiftTxList)
.sort((a, b) => b.time - a.time)
return (
@@ -55,8 +56,8 @@ TransactionList.prototype.render = function () {
},
}, [
- transactions.length
- ? transactions.map((transaction, i) => {
+ txsToRender.length
+ ? txsToRender.map((transaction, i) => {
let key
switch (transaction.key) {
case 'shapeshift':
generated by cgit v1.2.3 (git 2.25.1) at 2025-01-08 08:14:28 +0800