Copy to clipboard (#1146)
* added code for copy to clipbaord svg * removed svg link * can copy clipboard to mouse * can copy clipboard to mouse * can copy clipboard to mouse * change copy svg to copy icon * updated css styling * locked in version number * removed css state color * scss updates coloring instead of additonal state * change colors to scss variables * changed p tag to span tag * final style updates * function to revert copied text
This commit is contained in:
parent
23deceeb05
commit
4576b8f325
|
@ -56,3 +56,5 @@ webpack_config/server.csr
|
||||||
|
|
||||||
v8-compile-cache-0/
|
v8-compile-cache-0/
|
||||||
package-lock.json
|
package-lock.json
|
||||||
|
|
||||||
|
yarn.lock
|
|
@ -2,6 +2,24 @@
|
||||||
@import 'common/sass/mixins';
|
@import 'common/sass/mixins';
|
||||||
|
|
||||||
.AccountInfo {
|
.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 {
|
&-section {
|
||||||
margin-top: $space * 1.5;
|
margin-top: $space * 1.5;
|
||||||
|
|
||||||
|
|
|
@ -9,6 +9,7 @@ import { AppState } from 'reducers';
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
import { NetworkConfig } from 'types/network';
|
import { NetworkConfig } from 'types/network';
|
||||||
import { TSetAccountBalance, setAccountBalance } from 'actions/wallet';
|
import { TSetAccountBalance, setAccountBalance } from 'actions/wallet';
|
||||||
|
import { CopyToClipboard } from 'react-copy-to-clipboard';
|
||||||
|
|
||||||
interface OwnProps {
|
interface OwnProps {
|
||||||
wallet: IWallet;
|
wallet: IWallet;
|
||||||
|
@ -24,6 +25,7 @@ interface State {
|
||||||
showLongBalance: boolean;
|
showLongBalance: boolean;
|
||||||
address: string;
|
address: string;
|
||||||
confirmAddr: boolean;
|
confirmAddr: boolean;
|
||||||
|
copied: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface DispatchProps {
|
interface DispatchProps {
|
||||||
|
@ -36,7 +38,8 @@ class AccountInfo extends React.Component<Props, State> {
|
||||||
public state = {
|
public state = {
|
||||||
showLongBalance: false,
|
showLongBalance: false,
|
||||||
address: '',
|
address: '',
|
||||||
confirmAddr: false
|
confirmAddr: false,
|
||||||
|
copied: false
|
||||||
};
|
};
|
||||||
|
|
||||||
public setAddressFromWallet() {
|
public setAddressFromWallet() {
|
||||||
|
@ -69,6 +72,17 @@ class AccountInfo extends React.Component<Props, State> {
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
public onCopy = () => {
|
||||||
|
this.setState(state => {
|
||||||
|
return {
|
||||||
|
copied: !state.copied
|
||||||
|
};
|
||||||
|
});
|
||||||
|
setTimeout(() => {
|
||||||
|
this.setState({ copied: false });
|
||||||
|
}, 2000);
|
||||||
|
};
|
||||||
|
|
||||||
public render() {
|
public render() {
|
||||||
const { network, balance, isOffline } = this.props;
|
const { network, balance, isOffline } = this.props;
|
||||||
const { address, showLongBalance, confirmAddr } = this.state;
|
const { address, showLongBalance, confirmAddr } = this.state;
|
||||||
|
@ -90,6 +104,15 @@ class AccountInfo extends React.Component<Props, State> {
|
||||||
</div>
|
</div>
|
||||||
<div className="AccountInfo-address-wrapper">
|
<div className="AccountInfo-address-wrapper">
|
||||||
<div className="AccountInfo-address-addr">{address}</div>
|
<div className="AccountInfo-address-addr">{address}</div>
|
||||||
|
<CopyToClipboard onCopy={this.onCopy} text={address}>
|
||||||
|
<div
|
||||||
|
className={`AccountInfo-copy-icon${this.state.copied ? '-copied' : ''}`}
|
||||||
|
title="Copy To Clipboard"
|
||||||
|
>
|
||||||
|
<i className="fa fa-copy" />
|
||||||
|
<span>{this.state.copied ? 'copied!' : 'copy address'}</span>
|
||||||
|
</div>
|
||||||
|
</CopyToClipboard>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
29
package.json
29
package.json
|
@ -35,6 +35,7 @@
|
||||||
"query-string": "5.1.0",
|
"query-string": "5.1.0",
|
||||||
"rc-slider": "8.6.0",
|
"rc-slider": "8.6.0",
|
||||||
"react": "16.2.0",
|
"react": "16.2.0",
|
||||||
|
"react-copy-to-clipboard": "5.0.1",
|
||||||
"react-dom": "16.2.0",
|
"react-dom": "16.2.0",
|
||||||
"react-markdown": "3.2.1",
|
"react-markdown": "3.2.1",
|
||||||
"react-redux": "5.0.7",
|
"react-redux": "5.0.7",
|
||||||
|
@ -130,8 +131,8 @@
|
||||||
"webpack-hot-middleware": "2.21.0",
|
"webpack-hot-middleware": "2.21.0",
|
||||||
"webpack-sources": "1.0.1",
|
"webpack-sources": "1.0.1",
|
||||||
"webpack-subresource-integrity": "1.0.4",
|
"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": {
|
"scripts": {
|
||||||
"freezer": "webpack --config=./webpack_config/webpack.freezer.js && node ./dist/freezer.js",
|
"freezer": "webpack --config=./webpack_config/webpack.freezer.js && node ./dist/freezer.js",
|
||||||
|
@ -141,14 +142,10 @@
|
||||||
"prebuild": "check-node-version --package",
|
"prebuild": "check-node-version --package",
|
||||||
"build:downloadable": "webpack --config webpack_config/webpack.html.js",
|
"build:downloadable": "webpack --config webpack_config/webpack.html.js",
|
||||||
"prebuild:downloadable": "check-node-version --package",
|
"prebuild:downloadable": "check-node-version --package",
|
||||||
"build:electron":
|
"build:electron": "webpack --config webpack_config/webpack.electron-prod.js && node webpack_config/buildElectron.js",
|
||||||
"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:osx":
|
"build:electron:windows": "webpack --config webpack_config/webpack.electron-prod.js && ELECTRON_OS=windows node webpack_config/buildElectron.js",
|
||||||
"webpack --config webpack_config/webpack.electron-prod.js && ELECTRON_OS=osx 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: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",
|
"prebuild:electron": "check-node-version --package",
|
||||||
"test:coverage": "jest --config=jest_config/jest.config.json --coverage",
|
"test:coverage": "jest --config=jest_config/jest.config.json --coverage",
|
||||||
"test": "jest --config=jest_config/jest.config.json",
|
"test": "jest --config=jest_config/jest.config.json",
|
||||||
|
@ -160,18 +157,14 @@
|
||||||
"predev": "check-node-version --package",
|
"predev": "check-node-version --package",
|
||||||
"dev:https": "HTTPS=true node webpack_config/devServer.js",
|
"dev:https": "HTTPS=true node webpack_config/devServer.js",
|
||||||
"predev:https": "check-node-version --package",
|
"predev:https": "check-node-version --package",
|
||||||
"dev:electron":
|
"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'",
|
||||||
"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: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/**/*",
|
"tslint": "tslint --project . --exclude common/vendor/**/*",
|
||||||
"tscheck": "tsc --noEmit",
|
"tscheck": "tsc --noEmit",
|
||||||
"start": "npm run dev",
|
"start": "npm run dev",
|
||||||
"precommit": "lint-staged",
|
"precommit": "lint-staged",
|
||||||
"formatAll":
|
"formatAll": "find ./common/ -name '*.ts*' | xargs prettier --write --config ./.prettierrc --config-precedence file-override",
|
||||||
"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\"",
|
||||||
"prettier:diff":
|
|
||||||
"prettier --write --config ./.prettierrc --list-different \"common/**/*.ts\" \"common/**/*.tsx\"",
|
|
||||||
"prepush": "npm run tslint && npm run tscheck"
|
"prepush": "npm run tslint && npm run tscheck"
|
||||||
},
|
},
|
||||||
"lint-staged": {
|
"lint-staged": {
|
||||||
|
|
Loading…
Reference in New Issue