From e842113fbbd9a4594997587ae96731b32c42a765 Mon Sep 17 00:00:00 2001 From: Amaury Martiny Date: Wed, 27 Jun 2018 16:21:03 +0200 Subject: [PATCH 1/6] Add debug logs --- packages/fether-react/package.json | 1 + packages/fether-react/src/index.js | 5 +++++ packages/fether-react/src/stores/sendStore.js | 8 ++++++++ packages/fether-react/src/utils/debug.js | 12 ++++++++++++ 4 files changed, 26 insertions(+) create mode 100644 packages/fether-react/src/utils/debug.js diff --git a/packages/fether-react/package.json b/packages/fether-react/package.json index e25b12fd..a42cf022 100644 --- a/packages/fether-react/package.json +++ b/packages/fether-react/package.json @@ -39,6 +39,7 @@ "@parity/light.js": "https://github.com/parity-js/light.js#9646ce15d9dd9c4cf11776ddd613d5bd86016f94", "@parity/shared": "^3.0.2", "bignumber.js": "^4.1.0", + "debug": "^3.1.0", "fether-ui": "^0.1.0", "is-electron": "^2.1.0", "light-hoc": "^0.1.0", diff --git a/packages/fether-react/src/index.js b/packages/fether-react/src/index.js index 567713aa..bf2105d7 100644 --- a/packages/fether-react/src/index.js +++ b/packages/fether-react/src/index.js @@ -11,6 +11,11 @@ import App from './App'; import rootStore from './stores'; import './index.css'; +// Show debug logs in dev environment +if (process.env.NODE_ENV === 'development') { + localStorage.debug = 'fether*'; // https://github.com/visionmedia/debug#browser-support +} + ReactDOM.render( diff --git a/packages/fether-react/src/stores/sendStore.js b/packages/fether-react/src/stores/sendStore.js index 264c91ce..bd6175e9 100644 --- a/packages/fether-react/src/stores/sendStore.js +++ b/packages/fether-react/src/stores/sendStore.js @@ -11,9 +11,11 @@ import memoize from 'lodash/memoize'; import noop from 'lodash/noop'; import { toWei } from '@parity/api/lib/util/wei'; +import Debug from '../utils/debug'; import parityStore from './parityStore'; import tokensStore from './tokensStore'; +const debug = Debug('sendStore'); const DEFAULT_GAS = new BigNumber(21000); // Default gas amount to show const GAS_MULT_FACTOR = 1.2; // Since estimateGas is not always accurate, we add a 120% factor for buffer. @@ -109,6 +111,11 @@ class SendStore { this.txForErc20.options ); + debug( + 'Sending tx.', + this.tokenAddress === 'ETH' ? this.txForEth : this.txForErc20 + ); + return new Promise((resolve, reject) => { send$.subscribe(txStatus => { // When we arrive to the `requested` stage, we accept the request @@ -118,6 +125,7 @@ class SendStore { .catch(reject); } this.setTxStatus(txStatus); + debug('Tx status updated.', txStatus); }); }); }; diff --git a/packages/fether-react/src/utils/debug.js b/packages/fether-react/src/utils/debug.js new file mode 100644 index 00000000..6f832c59 --- /dev/null +++ b/packages/fether-react/src/utils/debug.js @@ -0,0 +1,12 @@ +// Copyright 2015-2018 Parity Technologies (UK) Ltd. +// This file is part of Parity. +// +// SPDX-License-Identifier: BSD-3-Clause + +import debug from 'debug'; + +import { name } from '../../package.json'; + +const Debug = namespace => debug(`${name}:${namespace}`); + +export default Debug; -- GitLab From c57111825990eb30dc1e00c008eab4290d6fbada Mon Sep 17 00:00:00 2001 From: Amaury Martiny Date: Wed, 27 Jun 2018 17:35:18 +0200 Subject: [PATCH 2/6] Add ClickToCopy component --- .../src/AccountHeader/AccountHeader.js | 17 ++--- .../fether-ui/src/ClickToCopy/ClickToCopy.js | 65 +++++++++++++++++++ packages/fether-ui/src/ClickToCopy/index.js | 8 +++ 3 files changed, 77 insertions(+), 13 deletions(-) create mode 100644 packages/fether-ui/src/ClickToCopy/ClickToCopy.js create mode 100644 packages/fether-ui/src/ClickToCopy/index.js diff --git a/packages/fether-ui/src/AccountHeader/AccountHeader.js b/packages/fether-ui/src/AccountHeader/AccountHeader.js index 7bf9d2df..efc342ef 100644 --- a/packages/fether-ui/src/AccountHeader/AccountHeader.js +++ b/packages/fether-ui/src/AccountHeader/AccountHeader.js @@ -5,27 +5,18 @@ import React from 'react'; import Blockies from 'react-blockies'; -import { CopyToClipboard } from 'react-copy-to-clipboard'; import PropTypes from 'prop-types'; -import ReactTooltip from 'react-tooltip'; +import ClickToCopy from '../ClickToCopy'; import Header from '../Header'; const NormalContainer = ({ children }) => (

{children}

); const CopyContainer = ({ address, children, ...otherProps }) => ( - - - {children} - - - + + {children} + ); const AccountHeader = ({ address, copyAddress, name, ...otherProps }) => { diff --git a/packages/fether-ui/src/ClickToCopy/ClickToCopy.js b/packages/fether-ui/src/ClickToCopy/ClickToCopy.js new file mode 100644 index 00000000..29c43f71 --- /dev/null +++ b/packages/fether-ui/src/ClickToCopy/ClickToCopy.js @@ -0,0 +1,65 @@ +// Copyright 2015-2018 Parity Technologies (UK) Ltd. +// This file is part of Parity. +// +// SPDX-License-Identifier: BSD-3-Clause + +import React, { PureComponent } from 'react'; +import PropTypes from 'prop-types'; +import ReactTooltip from 'react-tooltip'; + +class ClickToCopy extends PureComponent { + static defaultProps = { + label: 'Click to copy' + }; + + static propTypes = { + children: PropTypes.node, + label: PropTypes.string.isRequired + }; + + state = { + copied: false + }; + + handleCopy = () => { + // https://hackernoon.com/copying-text-to-clipboard-with-javascript-df4d4988697f + // Note react-copy-to-clipboard created a bug, https://github.com/nkbt/react-copy-to-clipboard/issues/92 + const el = document.createElement('textarea'); + el.value = this.props.textToCopy; + document.body.appendChild(el); + el.select(); + document.execCommand('copy'); + document.body.removeChild(el); + + this.setState({ copied: true }); + }; + + handleResetCopied = () => { + this.setState({ copied: false }); + }; + + render () { + const { children, label, ...otherProps } = this.props; + const { copied } = this.state; + + return ( +
+ {children} + +
+ ); + } +} + +export default ClickToCopy; diff --git a/packages/fether-ui/src/ClickToCopy/index.js b/packages/fether-ui/src/ClickToCopy/index.js new file mode 100644 index 00000000..4aed4db0 --- /dev/null +++ b/packages/fether-ui/src/ClickToCopy/index.js @@ -0,0 +1,8 @@ +// Copyright 2015-2018 Parity Technologies (UK) Ltd. +// This file is part of Parity. +// +// SPDX-License-Identifier: BSD-3-Clause + +import ClickToCopy from './ClickToCopy'; + +export default ClickToCopy; -- GitLab From e818d8433a92432201803d51c098d97a81f8b59d Mon Sep 17 00:00:00 2001 From: Amaury Martiny Date: Wed, 27 Jun 2018 17:35:55 +0200 Subject: [PATCH 3/6] Rename Settings to Whitelist --- packages/fether-react/src/App/App.js | 4 +- packages/fether-react/src/Tokens/Tokens.js | 20 +++++----- .../NewTokenItem/NewTokenItem.js | 4 -- .../NewTokenItem/index.js | 0 .../Settings.js => Whitelist/Whitelist.js} | 40 +++++++++---------- .../src/{Settings => Whitelist}/index.js | 4 +- packages/fether-react/src/index.js | 2 +- .../fether-react/src/stores/healthStore.js | 1 - 8 files changed, 35 insertions(+), 40 deletions(-) rename packages/fether-react/src/{Settings => Whitelist}/NewTokenItem/NewTokenItem.js (89%) rename packages/fether-react/src/{Settings => Whitelist}/NewTokenItem/index.js (100%) rename packages/fether-react/src/{Settings/Settings.js => Whitelist/Whitelist.js} (79%) rename packages/fether-react/src/{Settings => Whitelist}/index.js (67%) diff --git a/packages/fether-react/src/App/App.js b/packages/fether-react/src/App/App.js index 9b47d973..fc8a44f5 100644 --- a/packages/fether-react/src/App/App.js +++ b/packages/fether-react/src/App/App.js @@ -17,9 +17,9 @@ import Accounts from '../Accounts'; import Onboarding from '../Onboarding'; import Overlay from '../Overlay'; import Send from '../Send'; -import Settings from '../Settings'; import { STATUS } from '../stores/healthStore'; import Tokens from '../Tokens'; +import Whitelist from '../Whitelist'; // Use MemoryRouter for production viewing in file:// protocol // https://github.com/facebook/create-react-app/issues/3591 @@ -67,7 +67,7 @@ class App extends Component { - + diff --git a/packages/fether-react/src/Tokens/Tokens.js b/packages/fether-react/src/Tokens/Tokens.js index 3d54b14c..360ccdbc 100644 --- a/packages/fether-react/src/Tokens/Tokens.js +++ b/packages/fether-react/src/Tokens/Tokens.js @@ -17,11 +17,11 @@ import TokensList from './TokensList'; defaultAccount: defaultAccount$ }) class Tokens extends PureComponent { - handleGoToSettings = () => { - this.props.history.push('/settings'); + handleGoToWhitelist = () => { + this.props.history.push('/whitelist'); }; - render () { + render() { const { accountsInfo, defaultAccount, @@ -31,7 +31,7 @@ class Tokens extends PureComponent { // If the accountsInfo object is empty (i.e. no accounts), then we redirect // to the accounts page to create an account if (accountsInfo && !Object.keys(accountsInfo).length) { - return ; + return ; } // The address is defaultAccount, but if we are coming from the accounts @@ -51,7 +51,7 @@ class Tokens extends PureComponent { accountsInfo[myAddress].name } left={ - + Back } @@ -59,13 +59,13 @@ class Tokens extends PureComponent { -