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

Fix tooltip component

This commit is contained in:
Victor Baranov 2019-06-18 22:51:14 +03:00
parent 130c9b38e5
commit 5118715952
14 changed files with 80 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
old-ui/app/add-suggested-token.js
View File

@ -58,13 +58,16 @@ AddSuggestedTokenScreen.prototype.render = function () {
h('div', [
h(Tooltip, {
position: 'top',
title: 'The contract of the actual token contract. Click for more info.',
position: 'top',
id: 'addSuggestedToken',
}, [
h('a', {
style: { fontWeight: 'bold', paddingRight: '10px'},
href: 'https://support.metamask.io/kb/article/24-what-is-a-token-contract-address',
target: '_blank',
'data-tip': '',
'data-for': 'addSuggestedToken',
}, [
h('span', 'Token Contract Address '),
h('i.fa.fa-question-circle'),

5
old-ui/app/components/add-token/add-token.component.js
View File

@ -175,11 +175,14 @@ class AddTokenScreen extends Component {
h('div', [
h(Tooltip, {
position: 'top',
title: 'The contract of the actual token contract.',
position: 'top',
id: 'addToken',
}, [
h('span', {
style: { fontWeight: 'bold'},
'data-tip': '',
'data-for': 'addToken',
}, 'Token Address' /* this.context.t('tokenAddress')*/),
]),
]),

8
old-ui/app/components/add-token/token-list/token-list.component.js
View File

@ -42,7 +42,10 @@ export default class InfoBox extends Component {
'token-list__token--disabled': tokenAlreadyAdded,
})}
onClick={() => !tokenAlreadyAdded && onToggleToken(results[i])}
key={key || 'tokenRow'}>
key={key || 'tokenRow'}
data-tip=""
data-for={`addToken{key}`}
>
<div
className="token-list__token-icon"
style={{
@ -60,8 +63,9 @@ export default class InfoBox extends Component {
position="top"
title={title}
key={i}
id={`addToken{i}`}
>
{tokenRow()}
{tokenRow(i)}
</Tooltip> : tokenRow(i)
)
})

88
old-ui/app/components/balance.js
View File

@ -1,88 +0,0 @@
const Component = require('react').Component
const h = require('react-hyperscript')
const inherits = require('util').inherits
const formatBalance = require('../util').formatBalance
const generateBalanceObject = require('../util').generateBalanceObject
const Tooltip = require('./tooltip.js')
const FiatValue = require('./fiat-value.js')
module.exports = EthBalanceComponent
inherits(EthBalanceComponent, Component)
function EthBalanceComponent () {
Component.call(this)
}
EthBalanceComponent.prototype.render = function () {
var props = this.props
let { value } = props
const { style, width, network } = props
var needsParse = this.props.needsParse !== undefined ? this.props.needsParse : true
value = value ? formatBalance(value, 6, needsParse, network) : '...'
return (
h('.ether-balance.ether-balance-amount', {
style: style,
}, [
h('div', {
style: {
display: 'inline',
width: width,
},
}, this.renderBalance(value)),
])
)
}
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(' ')
var ethNumber = splitBalance[0]
var ethSuffix = splitBalance[1]
const showFiat = 'showFiat' in props ? props.showFiat : true
if (props.shorten) {
balance = balanceObj.shortBalance
} else {
balance = balanceObj.balance
}
var label = balanceObj.label
return (
h(Tooltip, {
position: 'bottom',
title: `${ethNumber} ${ethSuffix}`,
}, h('div.flex-column', [
h('.flex-row', {
style: {
alignItems: 'flex-end',
lineHeight: '14px',
fontFamily: 'Nunito Bold',
textRendering: 'geometricPrecision',
},
}, [
h('div', {
style: {
width: '100%',
textAlign: 'right',
},
}, this.props.incoming ? `+${balance}` : balance),
h('div', {
style: {
color: ' #AEAEAE',
fontSize: '12px',
marginLeft: '5px',
},
}, label),
]),
showFiat ? h(FiatValue, { value: props.value, network: props.network }) : null,
]))
)
}

12
old-ui/app/components/copy/copy-button.js
View File

@ -30,11 +30,13 @@ class CopyButton extends CopyComponent {
)
return (
<div className="copy-button"
style={fullStyle}
>
{this.renderTooltip(message, tooltipPosition, tooltipChild)}
</div>
<div className="copy-button"
style={fullStyle}
data-tip
data-for="copyButton"
>
{this.renderTooltip(message, tooltipPosition, tooltipChild, 'copyButton')}
</div>
)
}
}

3
old-ui/app/components/copy/copy-component.js
View File

@ -28,11 +28,12 @@ class CopyComponent extends Component {
clearTimeout(this.timerID)
}
renderTooltip (message, position, children) {
renderTooltip (message, position, children, id) {
return (
<Tooltip
title={message}
position={position}
id={id}
>
{children}
</Tooltip>

4
old-ui/app/components/copy/copyable.js
View File

@ -14,13 +14,15 @@ class Copyable extends CopyComponent {
style={{
cursor: 'pointer',
}}
data-tip
data-for="copyable"
onClick={(event) => this.onClick(event, value)}
>{children}
</span>
)
return (
this.renderTooltip(message, position, tooltipChild)
this.renderTooltip(message, position, tooltipChild, 'copyable')
)
}

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

@ -68,8 +68,9 @@ EthBalanceComponent.prototype.renderBalance = function (value) {
return (
h(Tooltip, {
position: 'bottom',
title: `${ethNumber} ${ethSuffix}`,
position: 'bottom',
id: 'ethBalance',
}, h('div.flex-column', [
h('.flex-row', {
style: {
@ -77,6 +78,8 @@ EthBalanceComponent.prototype.renderBalance = function (value) {
lineHeight: '20px',
textRendering: 'geometricPrecision',
},
'data-tip': '',
'data-for': 'ethBalance',
}, [
h('div', {
style: valueStyle,

3
old-ui/app/components/shift-list-item.js
View File

@ -88,6 +88,7 @@ ShiftListItem.prototype.renderUtilComponents = function () {
return h('.flex-row', [
h(Tooltip, {
title: 'QR Code',
id: 'shiftListItem',
}, [
h('i.fa.fa-qrcode.pointer.pop-hover', {
onClick: () => props.dispatch(actions.reshowQrCode(props.depositAddress, props.depositType)),
@ -98,6 +99,8 @@ ShiftListItem.prototype.renderUtilComponents = function () {
fontSize: '20px',
color: '#6729a8',
},
'data-tip': '',
'data-for': 'shiftListItem',
}),
]),
])

42
old-ui/app/components/tooltip.js
View File

@ -1,22 +1,24 @@
const Component = require('react').Component
const h = require('react-hyperscript')
const inherits = require('util').inherits
const ReactTooltip = require('react-tooltip')
import React, { Component } from 'react'
import ReactTooltip from 'react-tooltip'
class Tooltip extends Component {
render () {
const props = this.props
const { position, title, children, id } = props
return (<React.Fragment>
{children}
<ReactTooltip
id={id}
place={position || 'left'}
type="dark"
>
{title}
</ReactTooltip>
</React.Fragment>)
}
}
module.exports = Tooltip
inherits(Tooltip, Component)
function Tooltip () {
Component.call(this)
}
Tooltip.prototype.render = function () {
const props = this.props
const { position, title, children } = props
return h(ReactTooltip, {
position: position || 'left',
title,
fixed: true,
}, children)
}

3
old-ui/app/components/transaction-list-item-icon.js
View File

@ -26,11 +26,14 @@ TransactionIcon.prototype.render = function () {
return h(Tooltip, {
title: 'Pending',
position: 'right',
id: 'transactionIcon',
}, [
h('i.new-tx', {
style: {
marginLeft: '10px',
},
'data-tip': '',
'data-for': 'transactionIcon',
}),
])
}

9
old-ui/app/components/transaction-list-item.js
View File

@ -144,6 +144,7 @@ TransactionListItem.prototype.render = function () {
h(Tooltip, {
title: 'Transaction Number',
position: 'right',
id: 'transactionListItem',
}, [
h('span', {
style: {
@ -155,6 +156,8 @@ TransactionListItem.prototype.render = function () {
justifyContent: 'center',
padding: '10px',
},
'data-tip': '',
'data-for': 'transactionListItem',
}, nonce),
]),
@ -288,8 +291,12 @@ function renderErrorOrWarning (transaction, network) {
h(Tooltip, {
title: message,
position: 'bottom',
id: 'transactionListErrorItem',
}, [
h(`div`, ` (Failed)`),
h(`div`, {
'data-tip': '',
'data-for': 'transactionListErrorItem',
}, ` (Failed)`),
])
)
}

25
old-ui/app/first-time/init-menu.js
View File

@ -70,17 +70,20 @@ InitializeMenuScreen.prototype.renderMenu = function (state) {
h(Tooltip, {
title: 'Your DEN is your password-encrypted storage within Nifty Wallet.',
}, [
h('i.fa.fa-question-circle.pointer', {
style: {
fontSize: '18px',
position: 'relative',
color: '#60db97',
top: '2px',
marginLeft: '4px',
},
}),
]),
id: 'initMenu',
},
h('i.fa.fa-question-circle.pointer', {
style: {
fontSize: '18px',
position: 'relative',
color: '#60db97',
top: '2px',
marginLeft: '4px',
},
'data-tip': '',
'data-for': 'initMenu',
})),
]),
state.warning ? h('div', {

1
old-ui/css.js
View File

@ -15,7 +15,6 @@ var cssFiles = {
'index.css': fs.readFileSync(path.join(__dirname, '/app/css/index.css'), 'utf8'),
'transitions.css': fs.readFileSync(path.join(__dirname, '/app/css/transitions.css'), 'utf8'),
'first-time.css': fs.readFileSync(path.join(__dirname, '../mascara/src/app/first-time/index.css'), 'utf8'),
// 'react-tooltip.css': fs.readFileSync(path.join(__dirname, '..', 'node_modules', 'react-tooltip', 'dist', 'style.css'), 'utf8'),
'react-css': fs.readFileSync(path.join(__dirname, '..', 'node_modules', 'react-select', 'dist', 'react-select.css'), 'utf8'),
'dropdowns.css': fs.readFileSync(path.join(__dirname, '/app/css/dropdowns.css'), 'utf8'),
'app-bar.css': fs.readFileSync(path.join(__dirname, '/app/css/app-bar.css'), 'utf8'),