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:
Amidou Kante
Daniel Ternyak
parent
23deceeb05
commit
4576b8f325
|
|
@ -56,3 +56,5 @@ webpack_config/server.csr
|
|||
|
||||
v8-compile-cache-0/
|
||||
package-lock.json
|
||||
|
||||
yarn.lock
|
||||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -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<Props, State> {
|
|||
public state = {
|
||||
showLongBalance: false,
|
||||
address: '',
|
||||
confirmAddr: false
|
||||
confirmAddr: false,
|
||||
copied: false
|
||||
};
|
||||
|
||||
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() {
|
||||
const { network, balance, isOffline } = this.props;
|
||||
const { address, showLongBalance, confirmAddr } = this.state;
|
||||
|
|
@ -90,6 +104,15 @@ class AccountInfo extends React.Component<Props, State> {
|
|||
</div>
|
||||
<div className="AccountInfo-address-wrapper">
|
||||
<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>
|
||||
|
||||
|
|
|
|||
29
package.json
29
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": {
|
||||
|
|
|
|||
Loading…
Reference in New Issue