aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app/components
diff options
context:
space:
mode:
Diffstat (limited to 'ui/app/components')
-rw-r--r--ui/app/components/network.js2
-rw-r--r--ui/app/components/pages/add-token.js1
-rw-r--r--ui/app/components/pages/create-account/import-account/index.js2
-rw-r--r--ui/app/components/pages/create-account/import-account/private-key.js19
-rw-r--r--ui/app/components/pages/create-account/new-account.js12
-rw-r--r--ui/app/components/send/send-v2-container.js1
-rw-r--r--ui/app/components/tooltip-v2.js31
-rw-r--r--ui/app/components/wallet-view.js36
8 files changed, 78 insertions, 26 deletions
diff --git a/ui/app/components/network.js b/ui/app/components/network.js
index 3f147159b..3e91fa807 100644
--- a/ui/app/components/network.js
+++ b/ui/app/components/network.js
@@ -24,7 +24,7 @@ Network.prototype.render = function () {
let iconName, hoverText
if (networkNumber === 'loading') {
- return h('span.pointer', {
+ return h('span.pointer.network-indicator', {
style: {
display: 'flex',
alignItems: 'center',
diff --git a/ui/app/components/pages/add-token.js b/ui/app/components/pages/add-token.js
index 080f3eca5..40cfedafd 100644
--- a/ui/app/components/pages/add-token.js
+++ b/ui/app/components/pages/add-token.js
@@ -43,7 +43,6 @@ function mapStateToProps (state) {
function mapDispatchToProps (dispatch) {
return {
- goHome: () => dispatch(actions.goHome()),
addTokens: tokens => dispatch(actions.addTokens(tokens)),
}
}
diff --git a/ui/app/components/pages/create-account/import-account/index.js b/ui/app/components/pages/create-account/import-account/index.js
index 0c901c09b..71eb9ae23 100644
--- a/ui/app/components/pages/create-account/import-account/index.js
+++ b/ui/app/components/pages/create-account/import-account/index.js
@@ -37,7 +37,7 @@ AccountImportSubview.prototype.render = function () {
h('div.new-account-import-form__select-section', [
- h('div.new-account-import-form__select-label', 'SELECT TYPE'),
+ h('div.new-account-import-form__select-label', 'Select Type'),
h(Select, {
className: 'new-account-import-form__select',
diff --git a/ui/app/components/pages/create-account/import-account/private-key.js b/ui/app/components/pages/create-account/import-account/private-key.js
index 785bf2cb6..fb10bdb48 100644
--- a/ui/app/components/pages/create-account/import-account/private-key.js
+++ b/ui/app/components/pages/create-account/import-account/private-key.js
@@ -37,15 +37,20 @@ PrivateKeyImportView.prototype.render = function () {
return (
h('div.new-account-import-form__private-key', [
- h('span.new-account-create-form__instruction', 'Paste your private key string here:'),
- h('input.new-account-import-form__input-password', {
- type: 'password',
- id: 'private-key-box',
- onKeyPress: () => this.createKeyringOnEnter(),
- }),
+ h('div.new-account-import-form__private-key-password-container', [
- h('div.new-account-create-form__buttons', {}, [
+ h('span.new-account-import-form__instruction', 'Paste your private key string here:'),
+
+ h('input.new-account-import-form__input-password', {
+ type: 'password',
+ id: 'private-key-box',
+ onKeyPress: () => this.createKeyringOnEnter(),
+ }),
+
+ ]),
+
+ h('div.new-account-import-form__buttons', {}, [
h('button.new-account-create-form__button-cancel', {
onClick: () => this.props.history.push(DEFAULT_ROUTE),
diff --git a/ui/app/components/pages/create-account/new-account.js b/ui/app/components/pages/create-account/new-account.js
index a3bfefc84..fbd456a75 100644
--- a/ui/app/components/pages/create-account/new-account.js
+++ b/ui/app/components/pages/create-account/new-account.js
@@ -8,16 +8,18 @@ const { DEFAULT_ROUTE } = require('../../../routes')
class NewAccountCreateForm extends Component {
constructor (props) {
super(props)
+
const { numberOfExistingAccounts = 0 } = props
const newAccountNumber = numberOfExistingAccounts + 1
this.state = {
- newAccountName: `Account ${newAccountNumber}`,
+ newAccountName: '',
+ defaultAccountName: `Account ${newAccountNumber}`,
}
}
render () {
- const { newAccountName } = this.state
+ const { newAccountName, defaultAccountName } = this.state
const { history, createAccount } = this.props
return h('div.new-account-create-form', [
@@ -28,8 +30,8 @@ class NewAccountCreateForm extends Component {
h('div.new-account-create-form__input-wrapper', {}, [
h('input.new-account-create-form__input', {
- value: this.state.newAccountName,
- placeholder: 'E.g. My new account',
+ value: newAccountName,
+ placeholder: defaultAccountName,
onChange: event => this.setState({ newAccountName: event.target.value }),
}, []),
]),
@@ -44,7 +46,7 @@ class NewAccountCreateForm extends Component {
h('button.new-account-create-form__button-create', {
onClick: () => {
- createAccount(newAccountName)
+ createAccount(newAccountName || defaultAccountName)
.then(() => history.push(DEFAULT_ROUTE))
},
}, [
diff --git a/ui/app/components/send/send-v2-container.js b/ui/app/components/send/send-v2-container.js
index 1ebbe597c..b3c73f9b6 100644
--- a/ui/app/components/send/send-v2-container.js
+++ b/ui/app/components/send/send-v2-container.js
@@ -83,7 +83,6 @@ function mapDispatchToProps (dispatch) {
updateSendAmount: newAmount => dispatch(actions.updateSendAmount(newAmount)),
updateSendMemo: newMemo => dispatch(actions.updateSendMemo(newMemo)),
updateSendErrors: newError => dispatch(actions.updateSendErrors(newError)),
- goHome: () => dispatch(actions.goHome()),
clearSend: () => dispatch(actions.clearSend()),
setMaxModeTo: bool => dispatch(actions.setMaxModeTo(bool)),
}
diff --git a/ui/app/components/tooltip-v2.js b/ui/app/components/tooltip-v2.js
new file mode 100644
index 000000000..133a0f16a
--- /dev/null
+++ b/ui/app/components/tooltip-v2.js
@@ -0,0 +1,31 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const ReactTippy = require('react-tippy').Tooltip
+
+module.exports = Tooltip
+
+inherits(Tooltip, Component)
+function Tooltip () {
+ Component.call(this)
+}
+
+Tooltip.prototype.render = function () {
+ const props = this.props
+ const { position, title, children, wrapperClassName } = props
+
+ return h('div', {
+ className: wrapperClassName,
+ }, [
+
+ h(ReactTippy, {
+ title,
+ position: position || 'left',
+ trigger: 'mouseenter',
+ hideOnClick: false,
+ size: 'small',
+ arrow: true,
+ }, children),
+
+ ])
+}
diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js
index c7f81a305..ce0902a91 100644
--- a/ui/app/components/wallet-view.js
+++ b/ui/app/components/wallet-view.js
@@ -4,8 +4,10 @@ const h = require('react-hyperscript')
const { withRouter } = require('react-router-dom')
const { compose } = require('recompose')
const inherits = require('util').inherits
+const classnames = require('classnames')
const Identicon = require('./identicon')
// const AccountDropdowns = require('./dropdowns/index.js').AccountDropdowns
+const Tooltip = require('./tooltip-v2.js')
const copyToClipboard = require('copy-to-clipboard')
const actions = require('../actions')
const BalanceComponent = require('./balance-component')
@@ -51,6 +53,7 @@ function WalletView () {
Component.call(this)
this.state = {
hasCopied: false,
+ copyToClipboardPressed: false,
}
}
@@ -140,17 +143,30 @@ WalletView.prototype.render = function () {
]),
]),
-
- h('div.wallet-view__address', {
- onClick: () => {
- copyToClipboard(selectedAddress)
- this.setState({ hasCopied: true })
- setTimeout(() => this.setState({ hasCopied: false }), 3000)
- },
+ h(Tooltip, {
+ position: 'bottom',
+ title: this.state.hasCopied ? 'Copied!' : 'Copy to clipboard',
+ wrapperClassName: 'wallet-view__tooltip',
}, [
- this.state.hasCopied && 'Copied to Clipboard',
- !this.state.hasCopied && `${selectedAddress.slice(0, 4)}...${selectedAddress.slice(-4)}`,
- h('i.fa.fa-clipboard', { style: { marginLeft: '8px' } }),
+ h('button.wallet-view__address', {
+ className: classnames({
+ 'wallet-view__address__pressed': this.state.copyToClipboardPressed,
+ }),
+ onClick: () => {
+ copyToClipboard(selectedAddress)
+ this.setState({ hasCopied: true })
+ setTimeout(() => this.setState({ hasCopied: false }), 3000)
+ },
+ onMouseDown: () => {
+ this.setState({ copyToClipboardPressed: true })
+ },
+ onMouseUp: () => {
+ this.setState({ copyToClipboardPressed: false })
+ },
+ }, [
+ `${selectedAddress.slice(0, 4)}...${selectedAddress.slice(-4)}`,
+ h('i.fa.fa-clipboard', { style: { marginLeft: '8px' } }),
+ ]),
]),
this.renderWalletBalance(),
generated by cgit v1.2.3 (git 2.25.1) at 2025-01-12 07:45:05 +0800