diff --git a/.gitignore b/.gitignore index a540c898..39d2702e 100644 --- a/.gitignore +++ b/.gitignore @@ -56,3 +56,5 @@ webpack_config/server.csr v8-compile-cache-0/ package-lock.json + +yarn.lock \ No newline at end of file diff --git a/common/components/BalanceSidebar/AccountInfo.scss b/common/components/BalanceSidebar/AccountInfo.scss index a0309d9d..fde80af6 100644 --- a/common/components/BalanceSidebar/AccountInfo.scss +++ b/common/components/BalanceSidebar/AccountInfo.scss @@ -2,6 +2,24 @@ @import 'common/sass/mixins'; .AccountInfo { + &-copy-icon{ + display: inline; + color: $gray-light; + .fa{ + margin-right: 3px; + } + &-copied{ + color: $brand-success; + cursor: pointer; + .fa{ + margin-right: 3px; + } + } + &:hover{ + cursor: pointer; + color: $text-color; + } + } &-section { margin-top: $space * 1.5; diff --git a/common/components/BalanceSidebar/AccountInfo.tsx b/common/components/BalanceSidebar/AccountInfo.tsx index 9716644e..9080c541 100644 --- a/common/components/BalanceSidebar/AccountInfo.tsx +++ b/common/components/BalanceSidebar/AccountInfo.tsx @@ -9,6 +9,7 @@ import { AppState } from 'reducers'; import { connect } from 'react-redux'; import { NetworkConfig } from 'types/network'; import { TSetAccountBalance, setAccountBalance } from 'actions/wallet'; +import { CopyToClipboard } from 'react-copy-to-clipboard'; interface OwnProps { wallet: IWallet; @@ -24,6 +25,7 @@ interface State { showLongBalance: boolean; address: string; confirmAddr: boolean; + copied: boolean; } interface DispatchProps { @@ -36,7 +38,8 @@ class AccountInfo extends React.Component { public state = { showLongBalance: false, address: '', - confirmAddr: false + confirmAddr: false, + copied: false }; public setAddressFromWallet() { @@ -69,6 +72,17 @@ class AccountInfo extends React.Component { }); }; + public onCopy = () => { + this.setState(state => { + return { + copied: !state.copied + }; + }); + setTimeout(() => { + this.setState({ copied: false }); + }, 2000); + }; + public render() { const { network, balance, isOffline } = this.props; const { address, showLongBalance, confirmAddr } = this.state; @@ -90,6 +104,15 @@ class AccountInfo extends React.Component {
{address}
+ +
+ + {this.state.copied ? 'copied!' : 'copy address'} +
+
diff --git a/package.json b/package.json index 8eace217..776a44bb 100644 --- a/package.json +++ b/package.json @@ -35,6 +35,7 @@ "query-string": "5.1.0", "rc-slider": "8.6.0", "react": "16.2.0", + "react-copy-to-clipboard": "5.0.1", "react-dom": "16.2.0", "react-markdown": "3.2.1", "react-redux": "5.0.7", @@ -130,8 +131,8 @@ "webpack-hot-middleware": "2.21.0", "webpack-sources": "1.0.1", "webpack-subresource-integrity": "1.0.4", - "worker-loader": "1.1.0", - "what-input": "5.0.5" + "what-input": "5.0.5", + "worker-loader": "1.1.0" }, "scripts": { "freezer": "webpack --config=./webpack_config/webpack.freezer.js && node ./dist/freezer.js", @@ -141,14 +142,10 @@ "prebuild": "check-node-version --package", "build:downloadable": "webpack --config webpack_config/webpack.html.js", "prebuild:downloadable": "check-node-version --package", - "build:electron": - "webpack --config webpack_config/webpack.electron-prod.js && node webpack_config/buildElectron.js", - "build:electron:osx": - "webpack --config webpack_config/webpack.electron-prod.js && ELECTRON_OS=osx node webpack_config/buildElectron.js", - "build:electron:windows": - "webpack --config webpack_config/webpack.electron-prod.js && ELECTRON_OS=windows node webpack_config/buildElectron.js", - "build:electron:linux": - "webpack --config webpack_config/webpack.electron-prod.js && ELECTRON_OS=linux node webpack_config/buildElectron.js", + "build:electron": "webpack --config webpack_config/webpack.electron-prod.js && node webpack_config/buildElectron.js", + "build:electron:osx": "webpack --config webpack_config/webpack.electron-prod.js && ELECTRON_OS=osx node webpack_config/buildElectron.js", + "build:electron:windows": "webpack --config webpack_config/webpack.electron-prod.js && ELECTRON_OS=windows node webpack_config/buildElectron.js", + "build:electron:linux": "webpack --config webpack_config/webpack.electron-prod.js && ELECTRON_OS=linux node webpack_config/buildElectron.js", "prebuild:electron": "check-node-version --package", "test:coverage": "jest --config=jest_config/jest.config.json --coverage", "test": "jest --config=jest_config/jest.config.json", @@ -160,18 +157,14 @@ "predev": "check-node-version --package", "dev:https": "HTTPS=true node webpack_config/devServer.js", "predev:https": "check-node-version --package", - "dev:electron": - "concurrently --kill-others --names 'webpack,electron' 'BUILD_ELECTRON=true node webpack_config/devServer.js' 'webpack --config webpack_config/webpack.electron-dev.js && electron dist/electron-js/main.js'", - "dev:electron:https": - "concurrently --kill-others --names 'webpack,electron' 'BUILD_ELECTRON=true HTTPS=true node webpack_config/devServer.js' 'HTTPS=true webpack --config webpack_config/webpack.electron-dev.js && electron dist/electron-js/main.js'", + "dev:electron": "concurrently --kill-others --names 'webpack,electron' 'BUILD_ELECTRON=true node webpack_config/devServer.js' 'webpack --config webpack_config/webpack.electron-dev.js && electron dist/electron-js/main.js'", + "dev:electron:https": "concurrently --kill-others --names 'webpack,electron' 'BUILD_ELECTRON=true HTTPS=true node webpack_config/devServer.js' 'HTTPS=true webpack --config webpack_config/webpack.electron-dev.js && electron dist/electron-js/main.js'", "tslint": "tslint --project . --exclude common/vendor/**/*", "tscheck": "tsc --noEmit", "start": "npm run dev", "precommit": "lint-staged", - "formatAll": - "find ./common/ -name '*.ts*' | xargs prettier --write --config ./.prettierrc --config-precedence file-override", - "prettier:diff": - "prettier --write --config ./.prettierrc --list-different \"common/**/*.ts\" \"common/**/*.tsx\"", + "formatAll": "find ./common/ -name '*.ts*' | xargs prettier --write --config ./.prettierrc --config-precedence file-override", + "prettier:diff": "prettier --write --config ./.prettierrc --list-different \"common/**/*.ts\" \"common/**/*.tsx\"", "prepush": "npm run tslint && npm run tscheck" }, "lint-staged": {