aboutsummaryrefslogtreecommitdiffstats
path: root/old-ui/app/components
diff options
context:
space:
mode:
Diffstat (limited to 'old-ui/app/components')
-rw-r--r--old-ui/app/components/account-dropdowns.js5
-rw-r--r--old-ui/app/components/coinbase-form.js2
-rw-r--r--old-ui/app/components/dropdown.js2
-rw-r--r--old-ui/app/components/loading.js12
-rw-r--r--old-ui/app/components/network.js20
-rw-r--r--old-ui/app/components/pending-tx.js3
-rw-r--r--old-ui/app/components/token-list.js5
-rw-r--r--old-ui/app/components/transaction-list-item.js129
8 files changed, 123 insertions, 55 deletions
diff --git a/old-ui/app/components/account-dropdowns.js b/old-ui/app/components/account-dropdowns.js
index a3908f45d..7a2357921 100644
--- a/old-ui/app/components/account-dropdowns.js
+++ b/old-ui/app/components/account-dropdowns.js
@@ -1,5 +1,5 @@
const Component = require('react').Component
-const PropTypes = require('react').PropTypes
+const PropTypes = require('prop-types')
const h = require('react-hyperscript')
const actions = require('../../../ui/app/actions')
const genAccountLink = require('etherscan-link').createAccountLink
@@ -173,7 +173,7 @@ class AccountDropdowns extends Component {
minWidth: '180px',
},
isOpen: optionsMenuActive,
- onClickOutside: () => {
+ onClickOutside: (event) => {
const { classList } = event.target
const isNotToggleElement = !classList.contains(this.optionsMenuToggleClassName)
if (optionsMenuActive && isNotToggleElement) {
@@ -268,6 +268,7 @@ class AccountDropdowns extends Component {
'i.fa.fa-ellipsis-h',
{
style: {
+ margin: '0.5em',
fontSize: '1.8em',
},
onClick: (event) => {
diff --git a/old-ui/app/components/coinbase-form.js b/old-ui/app/components/coinbase-form.js
index 35b2111ff..1a1b77b50 100644
--- a/old-ui/app/components/coinbase-form.js
+++ b/old-ui/app/components/coinbase-form.js
@@ -40,7 +40,7 @@ CoinbaseForm.prototype.render = function () {
}, 'Continue to Coinbase'),
h('button.btn-red', {
- onClick: () => props.dispatch(actions.backTobuyView(props.accounts.address)),
+ onClick: () => props.dispatch(actions.goHome()),
}, 'Cancel'),
]),
])
diff --git a/old-ui/app/components/dropdown.js b/old-ui/app/components/dropdown.js
index cdd864cc3..fb606d2c5 100644
--- a/old-ui/app/components/dropdown.js
+++ b/old-ui/app/components/dropdown.js
@@ -1,5 +1,5 @@
const Component = require('react').Component
-const PropTypes = require('react').PropTypes
+const PropTypes = require('prop-types')
const h = require('react-hyperscript')
const MenuDroppo = require('./menu-droppo')
const extend = require('xtend')
diff --git a/old-ui/app/components/loading.js b/old-ui/app/components/loading.js
index 163792584..b8e2eb599 100644
--- a/old-ui/app/components/loading.js
+++ b/old-ui/app/components/loading.js
@@ -11,7 +11,7 @@ function LoadingIndicator () {
}
LoadingIndicator.prototype.render = function () {
- const { isLoading, loadingMessage } = this.props
+ const { isLoading, loadingMessage, canBypass, bypass } = this.props
return (
isLoading ? h('.full-flex-height', {
@@ -28,6 +28,16 @@ LoadingIndicator.prototype.render = function () {
background: 'rgba(255, 255, 255, 0.8)',
},
}, [
+ canBypass ? h( 'i.fa.fa-close.cursor-pointer.close-loading', {
+ style: {
+ position: 'absolute',
+ top: '1px',
+ right: '15px',
+ color: '#AEAEAE',
+ },
+ onClick: bypass,
+ }) : null,
+
h('img', {
src: 'images/loading.svg',
}),
diff --git a/old-ui/app/components/network.js b/old-ui/app/components/network.js
index 0dbe37cdd..59596dabd 100644
--- a/old-ui/app/components/network.js
+++ b/old-ui/app/components/network.js
@@ -23,14 +23,15 @@ Network.prototype.render = function () {
if (networkNumber === 'loading') {
return h('span.pointer', {
+ className: props.onClick && 'pointer',
style: {
display: 'flex',
alignItems: 'center',
flexDirection: 'row',
},
- onClick: (event) => this.props.onClick(event),
+ onClick: (event) => props.onClick && props.onClick(event),
}, [
- h('img', {
+ props.onClick && h('img', {
title: 'Attempting to connect to blockchain.',
style: {
width: '27px',
@@ -60,9 +61,10 @@ Network.prototype.render = function () {
}
return (
- h('#network_component.pointer', {
+ h('#network_component', {
+ className: props.onClick && 'pointer',
title: hoverText,
- onClick: (event) => this.props.onClick(event),
+ onClick: (event) => props.onClick && props.onClick(event),
}, [
(function () {
switch (iconName) {
@@ -74,7 +76,7 @@ Network.prototype.render = function () {
color: '#039396',
}},
'Main Network'),
- h('i.fa.fa-caret-down.fa-lg'),
+ props.onClick && h('i.fa.fa-caret-down.fa-lg'),
])
case 'ropsten-test-network':
return h('.network-indicator', [
@@ -84,7 +86,7 @@ Network.prototype.render = function () {
color: '#ff6666',
}},
'Ropsten Test Net'),
- h('i.fa.fa-caret-down.fa-lg'),
+ props.onClick && h('i.fa.fa-caret-down.fa-lg'),
])
case 'kovan-test-network':
return h('.network-indicator', [
@@ -94,7 +96,7 @@ Network.prototype.render = function () {
color: '#690496',
}},
'Kovan Test Net'),
- h('i.fa.fa-caret-down.fa-lg'),
+ props.onClick && h('i.fa.fa-caret-down.fa-lg'),
])
case 'rinkeby-test-network':
return h('.network-indicator', [
@@ -104,7 +106,7 @@ Network.prototype.render = function () {
color: '#e7a218',
}},
'Rinkeby Test Net'),
- h('i.fa.fa-caret-down.fa-lg'),
+ props.onClick && h('i.fa.fa-caret-down.fa-lg'),
])
default:
return h('.network-indicator', [
@@ -120,7 +122,7 @@ Network.prototype.render = function () {
color: '#AEAEAE',
}},
'Private Network'),
- h('i.fa.fa-caret-down.fa-lg'),
+ props.onClick && h('i.fa.fa-caret-down.fa-lg'),
])
}
})(),
diff --git a/old-ui/app/components/pending-tx.js b/old-ui/app/components/pending-tx.js
index 10208b5ce..720df2243 100644
--- a/old-ui/app/components/pending-tx.js
+++ b/old-ui/app/components/pending-tx.js
@@ -60,7 +60,8 @@ PendingTx.prototype.render = function () {
// Gas
const gas = txParams.gas
const gasBn = hexToBn(gas)
- const gasLimit = new BN(parseInt(blockGasLimit))
+ // default to 8MM gas limit
+ const gasLimit = new BN(parseInt(blockGasLimit) || '8000000')
const safeGasLimitBN = this.bnMultiplyByFraction(gasLimit, 19, 20)
const saferGasLimitBN = this.bnMultiplyByFraction(gasLimit, 18, 20)
const safeGasLimit = safeGasLimitBN.toString(10)
diff --git a/old-ui/app/components/token-list.js b/old-ui/app/components/token-list.js
index 998ec901d..149733b89 100644
--- a/old-ui/app/components/token-list.js
+++ b/old-ui/app/components/token-list.js
@@ -194,10 +194,7 @@ TokenList.prototype.componentWillUpdate = function (nextProps) {
}
TokenList.prototype.updateBalances = function (tokens) {
- const heldTokens = tokens.filter(token => {
- return token.balance !== '0' && token.string !== '0.000'
- })
- this.setState({ tokens: heldTokens, isLoading: false })
+ this.setState({ tokens, isLoading: false })
}
TokenList.prototype.componentWillUnmount = function () {
diff --git a/old-ui/app/components/transaction-list-item.js b/old-ui/app/components/transaction-list-item.js
index 76a456d3f..e7251df8d 100644
--- a/old-ui/app/components/transaction-list-item.js
+++ b/old-ui/app/components/transaction-list-item.js
@@ -1,6 +1,7 @@
const Component = require('react').Component
const h = require('react-hyperscript')
const inherits = require('util').inherits
+const connect = require('react-redux').connect
const EthBalance = require('./eth-balance')
const addressSummary = require('../util').addressSummary
@@ -9,18 +10,33 @@ const CopyButton = require('./copyButton')
const vreme = new (require('vreme'))()
const Tooltip = require('./tooltip')
const numberToBN = require('number-to-bn')
+const actions = require('../../../ui/app/actions')
const TransactionIcon = require('./transaction-list-item-icon')
const ShiftListItem = require('./shift-list-item')
-module.exports = TransactionListItem
+
+const mapDispatchToProps = dispatch => {
+ return {
+ retryTransaction: transactionId => dispatch(actions.retryTransaction(transactionId)),
+ }
+}
+
+module.exports = connect(null, mapDispatchToProps)(TransactionListItem)
inherits(TransactionListItem, Component)
function TransactionListItem () {
Component.call(this)
}
+TransactionListItem.prototype.showRetryButton = function () {
+ const { transaction = {} } = this.props
+ const { status, time } = transaction
+ return status === 'submitted' && Date.now() - time > 30000
+}
+
TransactionListItem.prototype.render = function () {
const { transaction, network, conversionRate, currentCurrency } = this.props
+ const { status } = transaction
if (transaction.key === 'shapeshift') {
if (network === '1') return h(ShiftListItem, transaction)
}
@@ -32,7 +48,7 @@ TransactionListItem.prototype.render = function () {
var isMsg = ('msgParams' in transaction)
var isTx = ('txParams' in transaction)
- var isPending = transaction.status === 'unapproved'
+ var isPending = status === 'unapproved'
let txParams
if (isTx) {
txParams = transaction.txParams
@@ -44,7 +60,7 @@ TransactionListItem.prototype.render = function () {
const isClickable = ('hash' in transaction && isLinkable) || isPending
return (
- h(`.transaction-list-item.flex-row.flex-space-between${isClickable ? '.pointer' : ''}`, {
+ h('.transaction-list-item.flex-column', {
onClick: (event) => {
if (isPending) {
this.props.showTx(transaction.id)
@@ -56,51 +72,92 @@ TransactionListItem.prototype.render = function () {
},
style: {
padding: '20px 0',
- display: 'flex',
- justifyContent: 'space-between',
+ alignItems: 'center',
},
}, [
+ h(`.flex-row.flex-space-between${isClickable ? '.pointer' : ''}`, {
+ style: {
+ width: '100%',
+ },
+ }, [
+ h('.identicon-wrapper.flex-column.flex-center.select-none', [
+ h(TransactionIcon, { txParams, transaction, isTx, isMsg }),
+ ]),
- h('.identicon-wrapper.flex-column.flex-center.select-none', [
- h(TransactionIcon, { txParams, transaction, isTx, isMsg }),
+ h(Tooltip, {
+ title: 'Transaction Number',
+ position: 'right',
+ }, [
+ h('span', {
+ style: {
+ display: 'flex',
+ cursor: 'normal',
+ flexDirection: 'column',
+ alignItems: 'center',
+ justifyContent: 'center',
+ padding: '10px',
+ },
+ }, nonce),
+ ]),
+
+ h('.flex-column', {style: {width: '200px', overflow: 'hidden'}}, [
+ domainField(txParams),
+ h('div', date),
+ recipientField(txParams, transaction, isTx, isMsg),
+ ]),
+
+ // Places a copy button if tx is successful, else places a placeholder empty div.
+ transaction.hash ? h(CopyButton, { value: transaction.hash }) : h('div', {style: { display: 'flex', alignItems: 'center', width: '26px' }}),
+
+ isTx ? h(EthBalance, {
+ value: txParams.value,
+ conversionRate,
+ currentCurrency,
+ width: '55px',
+ shorten: true,
+ showFiat: false,
+ style: {fontSize: '15px'},
+ }) : h('.flex-column'),
]),
- h(Tooltip, {
- title: 'Transaction Number',
- position: 'right',
+ this.showRetryButton() && h('.transition-list-item__retry.grow-on-hover', {
+ onClick: event => {
+ event.stopPropagation()
+ this.resubmit()
+ },
+ style: {
+ height: '22px',
+ borderRadius: '22px',
+ color: '#F9881B',
+ padding: '0 20px',
+ backgroundColor: '#FFE3C9',
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+ fontSize: '8px',
+ cursor: 'pointer',
+ },
}, [
- h('span', {
+ h('div', {
style: {
- display: 'flex',
- cursor: 'normal',
- flexDirection: 'column',
- alignItems: 'center',
- justifyContent: 'center',
+ paddingRight: '2px',
},
- }, nonce),
- ]),
-
- h('.flex-column', {style: {width: '150px', overflow: 'hidden'}}, [
- domainField(txParams),
- h('div', date),
- recipientField(txParams, transaction, isTx, isMsg),
+ }, 'Taking too long?'),
+ h('div', {
+ style: {
+ textDecoration: 'underline',
+ },
+ }, 'Retry with a higher gas price here'),
]),
-
- // Places a copy button if tx is successful, else places a placeholder empty div.
- transaction.hash ? h(CopyButton, { value: transaction.hash }) : h('div', {style: { display: 'flex', alignItems: 'center', width: '26px' }}),
-
- isTx ? h(EthBalance, {
- value: txParams.value,
- conversionRate,
- currentCurrency,
- shorten: true,
- showFiat: false,
- style: {fontSize: '15px'},
- }) : h('.flex-column'),
])
)
}
+TransactionListItem.prototype.resubmit = function () {
+ const { transaction } = this.props
+ this.props.retryTransaction(transaction.id)
+}
+
function domainField (txParams) {
return h('div', {
style: {
@@ -123,7 +180,7 @@ function recipientField (txParams, transaction, isTx, isMsg) {
} else if (txParams.to) {
message = addressSummary(txParams.to)
} else {
- message = 'Contract Published'
+ message = 'Contract Deployment'
}
return h('div', {
generated by cgit (git 2.34.1) at 2024-10-15 14:12:33 +0800