diff --git a/web/cashtab/package-lock.json b/web/cashtab/package-lock.json --- a/web/cashtab/package-lock.json +++ b/web/cashtab/package-lock.json @@ -65,7 +65,6 @@ "qrcode.react": "^1.0.0", "react": "^17.0.2", "react-app-polyfill": "^3.0.0", - "react-copy-to-clipboard": "^5.0.3", "react-dev-utils": "^12.0.0", "react-device-detect": "^1.15.0", "react-dom": "^17.0.2", @@ -16498,18 +16497,6 @@ "node": ">=14" } }, - "node_modules/react-copy-to-clipboard": { - "version": "5.0.4", - "resolved": "https://registry.npmjs.org/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.4.tgz", - "integrity": "sha512-IeVAiNVKjSPeGax/Gmkqfa/+PuMTBhutEvFUaMQLwE2tS0EXrAdgOpWDX26bWTXF3HrioorR7lr08NqeYUWQCQ==", - "dependencies": { - "copy-to-clipboard": "^3", - "prop-types": "^15.5.8" - }, - "peerDependencies": { - "react": "^15.3.0 || ^16.0.0 || ^17.0.0" - } - }, "node_modules/react-dev-utils": { "version": "12.0.0", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.0.tgz", @@ -32203,15 +32190,6 @@ "whatwg-fetch": "^3.6.2" } }, - "react-copy-to-clipboard": { - "version": "5.0.4", - "resolved": "https://registry.npmjs.org/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.4.tgz", - "integrity": "sha512-IeVAiNVKjSPeGax/Gmkqfa/+PuMTBhutEvFUaMQLwE2tS0EXrAdgOpWDX26bWTXF3HrioorR7lr08NqeYUWQCQ==", - "requires": { - "copy-to-clipboard": "^3", - "prop-types": "^15.5.8" - } - }, "react-dev-utils": { "version": "12.0.0", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.0.tgz", diff --git a/web/cashtab/package.json b/web/cashtab/package.json --- a/web/cashtab/package.json +++ b/web/cashtab/package.json @@ -60,7 +60,6 @@ "qrcode.react": "^1.0.0", "react": "^17.0.2", "react-app-polyfill": "^3.0.0", - "react-copy-to-clipboard": "^5.0.3", "react-dev-utils": "^12.0.0", "react-device-detect": "^1.15.0", "react-dom": "^17.0.2", diff --git a/web/cashtab/src/components/Airdrop/Airdrop.js b/web/cashtab/src/components/Airdrop/Airdrop.js --- a/web/cashtab/src/components/Airdrop/Airdrop.js +++ b/web/cashtab/src/components/Airdrop/Airdrop.js @@ -15,13 +15,11 @@ import { Row, Col, Switch } from 'antd'; import { SmartButton } from 'components/Common/PrimaryButton'; import useBCH from 'hooks/useBCH'; -import { - errorNotification, - generalNotification, -} from 'components/Common/Notifications'; +import { errorNotification } from 'components/Common/Notifications'; import { currency } from 'components/Common/Ticker.js'; import BalanceHeader from 'components/Common/BalanceHeader'; import BalanceHeaderFiat from 'components/Common/BalanceHeaderFiat'; +import CopyToClipboard from 'components/Common/CopyToClipboard'; import { getWalletState, convertEtokenToEcashAddr, @@ -50,6 +48,8 @@ width: 100%; padding: 10px; border-radius: 5px; + display: flex; + justify-content: center; a { color: ${props => props.theme.contrast}; margin: 0; @@ -795,24 +795,23 @@ Copy to Send screen    - { - navigator.clipboard.writeText( - airdropRecipients, - ); - generalNotification( - 'Airdrop recipients copied to clipboard', - 'Copied', - ); + - Copy to Clipboard - + + Copy to Clipboard + + diff --git a/web/cashtab/src/components/Common/CopyToClipboard.js b/web/cashtab/src/components/Common/CopyToClipboard.js new file mode 100644 --- /dev/null +++ b/web/cashtab/src/components/Common/CopyToClipboard.js @@ -0,0 +1,45 @@ +import React from 'react'; +import { generalNotification } from './Notifications'; +import PropTypes from 'prop-types'; + +const CopyToClipboard = ({ data, optionalOnCopyNotification, children }) => { + return ( +
{ + let result = { title: '', msg: '' }; + + if (navigator.clipboard) { + navigator.clipboard.writeText(data); + } + if (optionalOnCopyNotification) { + if ( + optionalOnCopyNotification.msg && + optionalOnCopyNotification.msg.length > 0 + ) { + result.msg = optionalOnCopyNotification.msg; + } + if ( + optionalOnCopyNotification.title && + optionalOnCopyNotification.title.length > 0 + ) { + result.title = optionalOnCopyNotification.title; + } + generalNotification(result.msg, result.title); + } + }} + > + {children} +
+ ); +}; + +CopyToClipboard.propTypes = { + data: PropTypes.string, + optionalOnCopyNotification: PropTypes.shape({ + title: PropTypes.string, + msg: PropTypes.string, + }), + children: PropTypes.node, +}; + +export default CopyToClipboard; diff --git a/web/cashtab/src/components/Common/QRCode.js b/web/cashtab/src/components/Common/QRCode.js --- a/web/cashtab/src/components/Common/QRCode.js +++ b/web/cashtab/src/components/Common/QRCode.js @@ -3,10 +3,9 @@ import styled from 'styled-components'; import RawQRCode from 'qrcode.react'; import { currency } from 'components/Common/Ticker.js'; -import { CopyToClipboard } from 'react-copy-to-clipboard'; import { Event } from 'utils/GoogleAnalytics'; import { convertToEcashPrefix } from 'utils/cashMethods'; - +import CopyToClipboard from './CopyToClipboard'; export const StyledRawQRCode = styled(RawQRCode)` cursor: pointer; border-radius: 10px; @@ -176,68 +175,73 @@ }; return ( - -
- - Copied
- {address} -
+ +
+
+ + Copied
+ {address} +
- + - {address && ( - - - - {address.slice(0, prefixLength)} - - + {address && ( + + + + {address.slice(0, prefixLength)} + + + {address.slice( + prefixLength, + prefixLength + trimAmount, + )} + {address.slice( - prefixLength, prefixLength + trimAmount, + address_trim, )} - - {address.slice(prefixLength + trimAmount, address_trim)} - - {address.slice(-trimAmount)} - - - )} + + {address.slice(-trimAmount)} + + + )} +
); diff --git a/web/cashtab/src/components/Configure/Configure.js b/web/cashtab/src/components/Configure/Configure.js --- a/web/cashtab/src/components/Configure/Configure.js +++ b/web/cashtab/src/components/Configure/Configure.js @@ -2,8 +2,8 @@ import styled from 'styled-components'; import { useLocation, Link } from 'react-router-dom'; import { - generalNotification, errorNotification, + generalNotification, } from 'components/Common/Notifications'; import { Collapse, @@ -52,6 +52,7 @@ import { ReactComponent as Edit } from 'assets/edit.svg'; import { Event } from 'utils/GoogleAnalytics'; import ApiError from 'components/Common/ApiError'; +import CopyToClipboard from 'components/Common/CopyToClipboard'; import { formatSavedBalance } from 'utils/formatting'; import { isValidXecAddress } from 'utils/validation'; import { convertToEcashPrefix } from 'utils/cashMethods'; @@ -1673,20 +1674,7 @@ } > -
{ - navigator.clipboard.writeText( - element.address, - ); - generalNotification( - element.address + - ' copied to clipboard', - 'Copied', - 'Success', - ); - }} - > +
{ element.address } @@ -1694,19 +1682,17 @@ - { - navigator.clipboard.writeText( - element.address, - ); - generalNotification( - element.address + - ' copied to clipboard', - 'Copied', - 'Success', - ); + + > + + handleRenameContact( diff --git a/web/cashtab/src/components/Home/Tx.js b/web/cashtab/src/components/Home/Tx.js --- a/web/cashtab/src/components/Home/Tx.js +++ b/web/cashtab/src/components/Home/Tx.js @@ -14,8 +14,7 @@ import { formatBalance, formatDate } from 'utils/formatting'; import TokenIcon from 'components/Tokens/TokenIcon'; import { Collapse } from 'antd'; -import { generalNotification } from 'components/Common/Notifications'; -import { CopyToClipboard } from 'react-copy-to-clipboard'; +import CopyToClipboard from 'components/Common/CopyToClipboard'; import { ThemedCopySolid, ThemedLinkSolid, @@ -746,15 +745,14 @@ } > - - { - generalNotification( - data.txid, - 'Tx ID copied to clipboard', - ); - }} - > + + Txid @@ -764,16 +762,13 @@ {data.opReturnMessage && ( - { - generalNotification( - data.opReturnMessage, - 'Cashtab message copied to clipboard', - ); - }} - > + Msg diff --git a/web/cashtab/src/components/Receive/__tests__/__snapshots__/Receive.test.js.snap b/web/cashtab/src/components/Receive/__tests__/__snapshots__/Receive.test.js.snap --- a/web/cashtab/src/components/Receive/__tests__/__snapshots__/Receive.test.js.snap +++ b/web/cashtab/src/components/Receive/__tests__/__snapshots__/Receive.test.js.snap @@ -10,85 +10,99 @@
- Copied -
- - ecash:qzagy47mvh6qxkvcn3acjnz73rkhkc6y7ccxkrr6zd - -
- - - - - -
- - - ecash: - - - qzagy47m - - vh6qxkvcn3acjnz73rkhkc6y7c - - cxkrr6zd - +
+ Copied +
+ + ecash:qzagy47mvh6qxkvcn3acjnz73rkhkc6y7ccxkrr6zd + +
+ + + + + +
+ + + ecash: + + + qzagy47m + + vh6qxkvcn3acjnz73rkhkc6y7c + + cxkrr6zd + +
+
- Copied -
- - ecash:qzagy47mvh6qxkvcn3acjnz73rkhkc6y7ccxkrr6zd - -
- - - - - -
- - - ecash: - - - qzagy47m - - vh6qxkvcn3acjnz73rkhkc6y7c - - cxkrr6zd - +
+ Copied +
+ + ecash:qzagy47mvh6qxkvcn3acjnz73rkhkc6y7ccxkrr6zd + +
+ + + + + +
+ + + ecash: + + + qzagy47m + + vh6qxkvcn3acjnz73rkhkc6y7c + + cxkrr6zd + +
+
- Copied -
- - ecash:qzagy47mvh6qxkvcn3acjnz73rkhkc6y7ccxkrr6zd - -
- - - - - -
- - - ecash: - - - qzagy47m - - vh6qxkvcn3acjnz73rkhkc6y7c - - cxkrr6zd - +
+ Copied +
+ + ecash:qzagy47mvh6qxkvcn3acjnz73rkhkc6y7ccxkrr6zd + +
+ + + + + +
+ + + ecash: + + + qzagy47m + + vh6qxkvcn3acjnz73rkhkc6y7c + + cxkrr6zd + +
+
- Copied -
- - ecash:qzagy47mvh6qxkvcn3acjnz73rkhkc6y7ccxkrr6zd - -
- - - - - -
- - - ecash: - - - qzagy47m - - vh6qxkvcn3acjnz73rkhkc6y7c - - cxkrr6zd - +
+ Copied +
+ + ecash:qzagy47mvh6qxkvcn3acjnz73rkhkc6y7ccxkrr6zd + +
+ + + + + +
+ + + ecash: + + + qzagy47m + + vh6qxkvcn3acjnz73rkhkc6y7c + + cxkrr6zd + +
+
-
{ - const convertedAddress = - convertToEcashPrefix( - wallet.Path1899 - .cashAddress, - ); - navigator.clipboard.writeText( - convertedAddress, - ); - generalNotification( - convertedAddress + - ' copied to clipboard', - 'Copied', - 'Success', - ); + -
+ )} @@ -1191,12 +1185,11 @@  Sign Message