aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app/components
diff options
context:
space:
mode:
Diffstat (limited to 'ui/app/components')
-rw-r--r--ui/app/components/eth-balance.js69
-rw-r--r--ui/app/components/fiat-value.js20
-rw-r--r--ui/app/components/gas-tooltip.js102
-rw-r--r--ui/app/components/input-number.js57
-rw-r--r--ui/app/components/tooltip.js2
5 files changed, 213 insertions, 37 deletions
diff --git a/ui/app/components/eth-balance.js b/ui/app/components/eth-balance.js
index 4f538fd31..32ff4efdf 100644
--- a/ui/app/components/eth-balance.js
+++ b/ui/app/components/eth-balance.js
@@ -37,7 +37,17 @@ EthBalanceComponent.prototype.render = function () {
}
EthBalanceComponent.prototype.renderBalance = function (value) {
var props = this.props
- const { conversionRate, shorten, incoming, currentCurrency } = props
+ const {
+ conversionRate,
+ shorten,
+ incoming,
+ currentCurrency,
+ hideTooltip,
+ styleOveride,
+ } = props
+
+ const { fontSize, color, fontFamily, lineHeight } = styleOveride
+
if (value === 'None') return value
if (value === '...') return value
var balanceObj = generateBalanceObject(value, shorten ? 1 : 3)
@@ -54,36 +64,41 @@ EthBalanceComponent.prototype.renderBalance = function (value) {
}
var label = balanceObj.label
+ const tooltipProps = hideTooltip ? {} : {
+ position: 'bottom',
+ title: `${ethNumber} ${ethSuffix}`,
+ };
return (
- h(Tooltip, {
- position: 'bottom',
- title: `${ethNumber} ${ethSuffix}`,
- }, h('div.flex-column', [
- h('.flex-row', {
- style: {
- alignItems: 'flex-end',
- lineHeight: '13px',
- fontFamily: 'Montserrat Light',
- textRendering: 'geometricPrecision',
- },
- }, [
- h('div', {
- style: {
- width: '100%',
- textAlign: 'right',
- },
- }, incoming ? `+${balance}` : balance),
- h('div', {
+ h(hideTooltip ? 'div' : Tooltip,
+ tooltipProps,
+ h('div.flex-column', [
+ h('.flex-row', {
style: {
- color: ' #AEAEAE',
- fontSize: '12px',
- marginLeft: '5px',
+ alignItems: 'flex-end',
+ lineHeight: lineHeight || '13px',
+ fontFamily: fontFamily || 'Montserrat Light',
+ textRendering: 'geometricPrecision',
},
- }, label),
- ]),
+ }, [
+ h('div', {
+ style: {
+ width: '100%',
+ textAlign: 'right',
+ fontSize: fontSize || 'inherit',
+ color: color || 'inherit',
+ },
+ }, incoming ? `+${balance}` : balance),
+ h('div', {
+ style: {
+ color: color || '#AEAEAE',
+ fontSize: fontSize || '12px',
+ marginLeft: '5px',
+ },
+ }, label),
+ ]),
- showFiat ? h(FiatValue, { value: props.value, conversionRate, currentCurrency }) : null,
- ]))
+ showFiat ? h(FiatValue, { value: props.value, conversionRate, currentCurrency }) : null,
+ ]))
)
}
diff --git a/ui/app/components/fiat-value.js b/ui/app/components/fiat-value.js
index 8a64a1cfc..665789353 100644
--- a/ui/app/components/fiat-value.js
+++ b/ui/app/components/fiat-value.js
@@ -12,7 +12,7 @@ function FiatValue () {
FiatValue.prototype.render = function () {
const props = this.props
- const { conversionRate, currentCurrency } = props
+ const { conversionRate, currentCurrency, style } = props
const value = formatBalance(props.value, 6)
@@ -28,16 +28,18 @@ FiatValue.prototype.render = function () {
fiatTooltipNumber = 'Unknown'
}
- return fiatDisplay(fiatDisplayNumber, currentCurrency)
+ return fiatDisplay(fiatDisplayNumber, currentCurrency, style)
}
-function fiatDisplay (fiatDisplayNumber, fiatSuffix) {
+function fiatDisplay (fiatDisplayNumber, fiatSuffix, styleOveride = {}) {
+ const { fontSize, color, fontFamily, lineHeight } = styleOveride
+
if (fiatDisplayNumber !== 'N/A') {
return h('.flex-row', {
style: {
alignItems: 'flex-end',
- lineHeight: '13px',
- fontFamily: 'Montserrat Light',
+ lineHeight: lineHeight || '13px',
+ fontFamily: fontFamily || 'Montserrat Light',
textRendering: 'geometricPrecision',
},
}, [
@@ -45,15 +47,15 @@ function fiatDisplay (fiatDisplayNumber, fiatSuffix) {
style: {
width: '100%',
textAlign: 'right',
- fontSize: '12px',
- color: '#333333',
+ fontSize: fontSize || '12px',
+ color: color || '#333333',
},
}, fiatDisplayNumber),
h('div', {
style: {
- color: '#AEAEAE',
+ color: color || '#AEAEAE',
marginLeft: '5px',
- fontSize: '12px',
+ fontSize: fontSize || '12px',
},
}, fiatSuffix),
])
diff --git a/ui/app/components/gas-tooltip.js b/ui/app/components/gas-tooltip.js
new file mode 100644
index 000000000..68b7aea61
--- /dev/null
+++ b/ui/app/components/gas-tooltip.js
@@ -0,0 +1,102 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const InputNumber = require('./input-number.js')
+const findDOMNode = require('react-dom').findDOMNode
+
+module.exports = GasTooltip
+
+inherits(GasTooltip, Component)
+function GasTooltip () {
+ Component.call(this)
+ this.state = {
+ gasLimit: 0,
+ gasPrice: 0,
+ }
+
+ this.updateGasPrice = this.updateGasPrice.bind(this);
+ this.updateGasLimit = this.updateGasLimit.bind(this);
+ this.onClose = this.onClose.bind(this);
+}
+
+GasTooltip.prototype.componentWillMount = function () {
+ const { gasPrice = 0, gasLimit = 0} = this.props
+
+ this.setState({
+ gasPrice: parseInt(gasPrice, 16) / 1000000000,
+ gasLimit: parseInt(gasLimit, 16),
+ })
+}
+
+GasTooltip.prototype.updateGasPrice = function (newPrice) {
+ const { onFeeChange } = this.props
+ const { gasLimit } = this.state
+
+ this.setState({ gasPrice: newPrice })
+ onFeeChange({
+ gasLimit: gasLimit.toString(16),
+ gasPrice: (newPrice * 1000000000).toString(16)
+ })
+}
+
+GasTooltip.prototype.updateGasLimit = function (newLimit) {
+ const { onFeeChange } = this.props
+ const { gasPrice } = this.state
+
+ this.setState({ gasLimit: newLimit })
+ onFeeChange({
+ gasLimit: newLimit.toString(16),
+ gasPrice: (gasPrice * 1000000000).toString(16)
+ })
+}
+
+GasTooltip.prototype.onClose = function (e) {
+ e.stopPropagation();
+ this.props.onClose();
+}
+
+GasTooltip.prototype.render = function () {
+ const { position, title, children, className } = this.props
+ const { gasPrice, gasLimit } = this.state
+
+ return h('div.gas-tooltip', {}, [
+ h('div.gas-tooltip-close-area', {
+ onClick: this.onClose
+ }),
+ h('div.customize-gas-tooltip-container', {}, [
+ h('div.customize-gas-tooltip', {}, [
+ h('div.gas-tooltip-header.gas-tooltip-label', {}, ['Customize Gas']),
+ h('div.gas-tooltip-input-label', {}, [
+ h('span.gas-tooltip-label', {}, ['Gas Price']),
+ h('i.fa.fa-info-circle')
+ ]),
+ h(InputNumber, {
+ unitLabel: 'GWEI',
+ step: 1,
+ min: 0,
+ placeholder: '0',
+ initValue: gasPrice,
+ onChange: (newPrice) => this.updateGasPrice(newPrice),
+ }),
+ h('div.gas-tooltip-input-label', {
+ style: {
+ 'marginTop': '81px',
+ },
+ }, [
+ h('span.gas-tooltip-label', {}, ['Gas Limit']),
+ h('i.fa.fa-info-circle')
+ ]),
+ h(InputNumber, {
+ unitLabel: 'UNITS',
+ step: 1,
+ min: 0,
+ placeholder: '0',
+ initValue: gasLimit,
+ onChange: (newLimit) => this.updateGasLimit(newLimit),
+ }),
+ ]),
+ h('div.gas-tooltip-arrow', {}),
+ ])
+ ])
+}
+
diff --git a/ui/app/components/input-number.js b/ui/app/components/input-number.js
new file mode 100644
index 000000000..c8bdd5ec5
--- /dev/null
+++ b/ui/app/components/input-number.js
@@ -0,0 +1,57 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const findDOMNode = require('react-dom').findDOMNode
+
+module.exports = InputNumber
+
+inherits(InputNumber, Component)
+function InputNumber () {
+ Component.call(this)
+
+ this.state = {
+ value: 0,
+ }
+
+ this.setValue = this.setValue.bind(this);
+}
+
+InputNumber.prototype.componentWillMount = function () {
+ const { initValue = 0 } = this.props
+
+ this.setState({ value: initValue });
+}
+
+InputNumber.prototype.setValue = function (newValue) {
+ const { fixed, min, onChange } = this.props
+
+ if (fixed) newValue = Number(newValue.toFixed(4))
+
+ if (newValue >= min) {
+ this.setState({ value: newValue })
+ onChange(newValue)
+ }
+}
+
+InputNumber.prototype.render = function () {
+ const { unitLabel, step = 1, min, placeholder } = this.props
+ const { value } = this.state
+
+ return h('div.customize-gas-input-wrapper', {}, [
+ h('input.customize-gas-input', {
+ placeholder,
+ type: 'number',
+ value,
+ onChange: (e) => this.setValue(Number(e.target.value))
+ }),
+ h('span.gas-tooltip-input-detail', {}, [unitLabel]),
+ h('div.gas-tooltip-input-arrows', {}, [
+ h('i.fa.fa-angle-up', {
+ onClick: () => this.setValue(value + step)
+ }),
+ h('i.fa.fa-angle-down', {
+ onClick: () => this.setValue(value - step)
+ }),
+ ]),
+ ])
+}
diff --git a/ui/app/components/tooltip.js b/ui/app/components/tooltip.js
index edbc074bb..74cf1ae43 100644
--- a/ui/app/components/tooltip.js
+++ b/ui/app/components/tooltip.js
@@ -12,7 +12,7 @@ function Tooltip () {
Tooltip.prototype.render = function () {
const props = this.props
- const { position, title, children } = props
+ const { position, title, children, show = true } = props
return h(ReactTooltip, {
position: position || 'left',
generated by cgit v1.2.3 (git 2.25.1) at 2025-02-15 13:23:18 +0800