aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app/components
diff options
context:
space:
mode:
Diffstat (limited to 'ui/app/components')
-rw-r--r--ui/app/components/account-eth-balance.js17
-rw-r--r--ui/app/components/buy-button-subview.js4
-rw-r--r--ui/app/components/eth-balance.js15
-rw-r--r--ui/app/components/qr-code.js13
-rw-r--r--ui/app/components/shapeshift-form.js2
-rw-r--r--ui/app/components/shift-list-item.js202
-rw-r--r--ui/app/components/transaction-list-item.js6
-rw-r--r--ui/app/components/transaction-list.js6
8 files changed, 244 insertions, 21 deletions
diff --git a/ui/app/components/account-eth-balance.js b/ui/app/components/account-eth-balance.js
index 6cdb33b73..8d693685f 100644
--- a/ui/app/components/account-eth-balance.js
+++ b/ui/app/components/account-eth-balance.js
@@ -46,16 +46,17 @@ EthBalanceComponent.prototype.render = function () {
EthBalanceComponent.prototype.renderBalance = function (value, state) {
if (value === 'None') return value
var balanceObj = generateBalanceObject(value, state.shorten ? 1 : 3)
- var balance, fiatNumber
+ var balance, fiatDisplayNumber, fiatTooltipNumber
var splitBalance = value.split(' ')
var ethNumber = splitBalance[0]
var ethSuffix = splitBalance[1]
if (state.conversionRate !== 0) {
- fiatNumber = (Number(splitBalance[0]) * state.conversionRate).toFixed(2)
+ fiatTooltipNumber = Number(splitBalance[0]) * state.conversionRate
+ fiatDisplayNumber = fiatTooltipNumber.toFixed(2)
} else {
- fiatNumber = 'N/A'
+ fiatDisplayNumber = 'N/A'
}
var fiatSuffix = state.currentFiat
@@ -99,16 +100,16 @@ EthBalanceComponent.prototype.renderBalance = function (value, state) {
]),
h(Tooltip, {
position: 'bottom',
- title: `${fiatNumber} ${fiatSuffix}`,
+ title: `${fiatTooltipNumber} ${fiatSuffix}`,
}, [
- fiatDisplay(fiatNumber, fiatSuffix),
+ fiatDisplay(fiatDisplayNumber, fiatSuffix),
]),
])
)
}
-function fiatDisplay (fiatNumber, fiatSuffix) {
- if (fiatNumber !== 'N/A') {
+function fiatDisplay (fiatDisplayNumber, fiatSuffix) {
+ if (fiatDisplayNumber !== 'N/A') {
return h('.flex-row', {
style: {
alignItems: 'flex-end',
@@ -124,7 +125,7 @@ function fiatDisplay (fiatNumber, fiatSuffix) {
fontSize: '12px',
color: '#333333',
},
- }, fiatNumber),
+ }, fiatDisplayNumber),
h('div', {
style: {
color: '#AEAEAE',
diff --git a/ui/app/components/buy-button-subview.js b/ui/app/components/buy-button-subview.js
index cebb8f3f6..742241e5b 100644
--- a/ui/app/components/buy-button-subview.js
+++ b/ui/app/components/buy-button-subview.js
@@ -54,7 +54,7 @@ BuyButtonSubview.prototype.render = function () {
justifyContent: 'space-around',
},
}, [
- h(currentForm.coinbase ? '.activeForm' : '.inactiveForm', {
+ h(currentForm.coinbase ? '.activeForm' : '.inactiveForm.pointer', {
onClick: () => props.dispatch(actions.coinBaseSubview()),
}, 'Coinbase'),
h('a', {
@@ -67,7 +67,7 @@ BuyButtonSubview.prototype.render = function () {
},
}),
]),
- h(currentForm.shapeshift ? '.activeForm' : '.inactiveForm', {
+ h(currentForm.shapeshift ? '.activeForm' : '.inactiveForm.pointer', {
onClick: () => props.dispatch(actions.shapeShiftSubview(props.provider.type)),
}, 'Shapeshift'),
diff --git a/ui/app/components/eth-balance.js b/ui/app/components/eth-balance.js
index 6c324c947..498873faa 100644
--- a/ui/app/components/eth-balance.js
+++ b/ui/app/components/eth-balance.js
@@ -15,26 +15,27 @@ function EthBalanceComponent () {
EthBalanceComponent.prototype.render = function () {
var state = this.props
var style = state.style
-
- const value = formatBalance(state.value, 6)
+ var needsParse = this.props.needsParse !== undefined ? this.props.needsParse : true
+ const value = formatBalance(state.value, 6, needsParse)
var width = state.width
return (
- h('.ether-balance', {
+ h('.ether-balance.ether-balance-amount', {
style: style,
}, [
- h('.ether-balance-amount', {
+ h('div', {
style: {
display: 'inline',
width: width,
},
- }, this.renderBalance(value, state)),
+ }, this.renderBalance(value)),
])
)
}
-EthBalanceComponent.prototype.renderBalance = function (value, state) {
+EthBalanceComponent.prototype.renderBalance = function (value) {
+ var state = this.props
if (value === 'None') return value
var balanceObj = generateBalanceObject(value, state.shorten ? 1 : 3)
var balance
@@ -68,7 +69,7 @@ EthBalanceComponent.prototype.renderBalance = function (value, state) {
width: '100%',
textAlign: 'right',
},
- }, balance),
+ }, this.props.incoming ? `+${balance}` : balance),
h('div', {
style: {
color: ' #AEAEAE',
diff --git a/ui/app/components/qr-code.js b/ui/app/components/qr-code.js
index f8cace4e0..c26b02b94 100644
--- a/ui/app/components/qr-code.js
+++ b/ui/app/components/qr-code.js
@@ -10,6 +10,7 @@ function mapStateToProps (state) {
return {
Qr: state.appState.Qr,
buyView: state.appState.buyView,
+ warning: state.appState.warning,
}
}
@@ -23,6 +24,7 @@ QrCodeView.prototype.render = function () {
var props = this.props
var Qr = props.Qr
return h('.main-container.flex-column', {
+ key: 'qr',
style: {
justifyContent: 'center',
padding: '45px',
@@ -30,8 +32,17 @@ QrCodeView.prototype.render = function () {
},
}, [
Array.isArray(Qr.message) ? h('.message-container', this.renderMultiMessage()) : h('h3', Qr.message),
+
+ this.props.warning ? this.props.warning && h('span.error.flex-center', {
+ style: {
+ textAlign: 'center',
+ width: '229px',
+ height: '82px',
+ },
+ },
+ this.props.warning) : null,
+
h('#qr-container.flex-column', {
- key: 'qr',
style: {
marginTop: '25px',
marginBottom: '15px',
diff --git a/ui/app/components/shapeshift-form.js b/ui/app/components/shapeshift-form.js
index 48d220693..b8650f7d5 100644
--- a/ui/app/components/shapeshift-form.js
+++ b/ui/app/components/shapeshift-form.js
@@ -202,6 +202,8 @@ ShapeshiftForm.prototype.shift = function () {
'withdrawal': withdrawal,
'pair': pair,
'returnAddress': returnAddress,
+ // Public api key
+ 'apiKey': '803d1f5df2ed1b1476e4b9e6bcd089e34d8874595dda6a23b67d93c56ea9cc2445e98a6748b219b2b6ad654d9f075f1f1db139abfa93158c04e825db122c14b6',
}
var message = [
`Deposit Limit: ${props.buyView.formView.marketinfo.limit}`,
diff --git a/ui/app/components/shift-list-item.js b/ui/app/components/shift-list-item.js
new file mode 100644
index 000000000..11e11cd37
--- /dev/null
+++ b/ui/app/components/shift-list-item.js
@@ -0,0 +1,202 @@
+const inherits = require('util').inherits
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const connect = require('react-redux').connect
+const vreme = new (require('vreme'))
+const explorerLink = require('../../lib/explorer-link')
+const extension = require('../../../app/scripts/lib/extension')
+const actions = require('../actions')
+const addressSummary = require('../util').addressSummary
+
+const CopyButton = require('./copyButton')
+const EtherBalance = require('./eth-balance')
+const Tooltip = require('./tooltip')
+
+
+module.exports = connect(mapStateToProps)(ShiftListItem)
+
+function mapStateToProps (state) {
+ return {}
+}
+
+inherits(ShiftListItem, Component)
+
+function ShiftListItem () {
+ Component.call(this)
+}
+
+ShiftListItem.prototype.render = function () {
+ return (
+ h('.transaction-list-item.flex-row', {
+ style: {
+ paddingTop: '20px',
+ paddingBottom: '20px',
+ justifyContent: 'space-around',
+ alignItems: 'center',
+ },
+ }, [
+ h('div', {
+ style: {
+ width: '0px',
+ position: 'relative',
+ bottom: '19px',
+ },
+ }, [
+ h('img', {
+ src: 'https://info.shapeshift.io/sites/default/files/logo.png',
+ style: {
+ height: '35px',
+ width: '132px',
+ position: 'absolute',
+ clip: 'rect(0px,23px,34px,0px)',
+ },
+ }),
+ ]),
+
+ this.renderInfo(),
+ this.renderUtilComponents(),
+ ])
+ )
+}
+
+function formatDate (date) {
+ return vreme.format(new Date(date), 'March 16 2014 14:30')
+}
+
+ShiftListItem.prototype.renderUtilComponents = function () {
+ var props = this.props
+
+ switch (props.response.status) {
+ case 'no_deposits':
+ return h('.flex-row', [
+ h(CopyButton, {
+ value: this.props.depositAddress,
+ }),
+ h(Tooltip, {
+ title: 'QR Code',
+ }, [
+ h('i.fa.fa-qrcode.pointer.pop-hover', {
+ onClick: () => props.dispatch(actions.reshowQrCode(props.depositAddress, props.depositType)),
+ style: {
+ margin: '5px',
+ marginLeft: '23px',
+ marginRight: '12px',
+ fontSize: '20px',
+ color: '#F7861C',
+ },
+ }),
+ ]),
+ ])
+ case 'received':
+ return h('.flex-row')
+
+ case 'complete':
+ return h('.flex-row', [
+ h(CopyButton, {
+ value: this.props.response.transaction,
+ }),
+ h(EtherBalance, {
+ value: `${props.response.outgoingCoin}`,
+ width: '55px',
+ shorten: true,
+ needsParse: false,
+ incoming: true,
+ style: {
+ fontSize: '15px',
+ color: '#01888C',
+ },
+ }),
+ ])
+
+ case 'failed':
+ return ''
+ default:
+ return ''
+ }
+
+}
+
+ShiftListItem.prototype.renderInfo = function () {
+ var props = this.props
+ switch (props.response.status) {
+ case 'no_deposits':
+ return h('.flex-column', {
+ style: {
+ width: '200px',
+ overflow: 'hidden',
+ },
+ }, [
+ h('div', {
+ style: {
+ fontSize: 'x-small',
+ color: '#ABA9AA',
+ width: '100%',
+ },
+ }, `${props.depositType} to ETH via ShapeShift`),
+ h('div', 'No deposits received'),
+ h('div', {
+ style: {
+ fontSize: 'x-small',
+ color: '#ABA9AA',
+ width: '100%',
+ },
+ }, formatDate(props.time)),
+ ])
+ case 'received':
+ return h('.flex-column', {
+ style: {
+ width: '200px',
+ overflow: 'hidden',
+ },
+ }, [
+ h('div', {
+ style: {
+ fontSize: 'x-small',
+ color: '#ABA9AA',
+ width: '100%',
+ },
+ }, `${props.depositType} to ETH via ShapeShift`),
+ h('div', 'Conversion in progress'),
+ h('div', {
+ style: {
+ fontSize: 'x-small',
+ color: '#ABA9AA',
+ width: '100%',
+ },
+ }, formatDate(props.time)),
+ ])
+ case 'complete':
+ var url = explorerLink(props.response.transaction, parseInt('1'))
+
+ return h('.flex-column.pointer', {
+ style: {
+ width: '200px',
+ overflow: 'hidden',
+ },
+ onClick: () => extension.tabs.create({
+ url,
+ }),
+ }, [
+ h('div', {
+ style: {
+ fontSize: 'x-small',
+ color: '#ABA9AA',
+ width: '100%',
+ },
+ }, 'From ShapeShift'),
+ h('div', formatDate(props.time)),
+ h('div', {
+ style: {
+ fontSize: 'x-small',
+ color: '#ABA9AA',
+ width: '100%',
+ },
+ }, addressSummary(props.response.transaction)),
+ ])
+
+ case 'failed':
+ return h('span.error', '(Failed)')
+ default:
+ return ''
+ }
+}
diff --git a/ui/app/components/transaction-list-item.js b/ui/app/components/transaction-list-item.js
index 796ba61ae..b03ca11ad 100644
--- a/ui/app/components/transaction-list-item.js
+++ b/ui/app/components/transaction-list-item.js
@@ -10,7 +10,7 @@ const vreme = new (require('vreme'))
const extension = require('../../../app/scripts/lib/extension')
const TransactionIcon = require('./transaction-list-item-icon')
-
+const ShiftListItem = require('./shift-list-item')
module.exports = TransactionListItem
inherits(TransactionListItem, Component)
@@ -20,7 +20,9 @@ function TransactionListItem () {
TransactionListItem.prototype.render = function () {
const { transaction, i, network } = this.props
-
+ if (transaction.key === 'shapeshift') {
+ if (network === '1') return h(ShiftListItem, transaction)
+ }
var date = formatDate(transaction.time)
let isLinkable = false
diff --git a/ui/app/components/transaction-list.js b/ui/app/components/transaction-list.js
index 886aa7c00..9bf0f6d81 100644
--- a/ui/app/components/transaction-list.js
+++ b/ui/app/components/transaction-list.js
@@ -14,7 +14,11 @@ function TransactionList () {
TransactionList.prototype.render = function () {
const { txsToRender, network, unconfMsgs } = this.props
- const transactions = txsToRender.concat(unconfMsgs)
+ var shapeShiftTxList
+ if (network === '1'){
+ shapeShiftTxList = this.props.shapeShiftTxList
+ }
+ const transactions = !shapeShiftTxList ? txsToRender.concat(unconfMsgs) : txsToRender.concat(unconfMsgs, shapeShiftTxList)
.sort((a, b) => b.time - a.time)
return (
generated by cgit (git 2.34.1) at 2024-10-20 05:24:23 +0800