diff --git a/web/cashtab/src/components/Common/QRCode.js b/web/cashtab/src/components/Common/QRCode.js index 0907b3378..f7047b6c1 100644 --- a/web/cashtab/src/components/Common/QRCode.js +++ b/web/cashtab/src/components/Common/QRCode.js @@ -1,251 +1,251 @@ import React, { useState } from 'react'; import PropTypes from 'prop-types'; 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'; export const StyledRawQRCode = styled(RawQRCode)` cursor: pointer; border-radius: 10px; background: ${props => props.theme.qr.background}; margin-bottom: 10px; path:first-child { fill: ${props => props.theme.qr.background}; } :hover { border-color: ${({ xec = 0, ...props }) => xec === 1 ? props.theme.eCashBlue : props.theme.eCashPurple}; } @media (max-width: 768px) { border-radius: 18px; width: 170px; height: 170px; } `; const Copied = styled.div` font-size: 18px; font-weight: bold; width: 100%; text-align: center; background-color: ${({ xec = 0, ...props }) => xec === 1 ? props.theme.eCashBlue : props.theme.eCashPurple}; border: 1px solid; border-color: ${({ xec = 0, ...props }) => xec === 1 ? props.theme.eCashBlue : props.theme.eCashPurple}; color: ${props => props.theme.contrast}; position: absolute; top: 65px; padding: 30px 0; @media (max-width: 768px) { top: 52px; padding: 20px 0; } `; const PrefixLabel = styled.span` text-align: right; font-weight: bold; color: ${({ xec = 0, ...props }) => xec === 1 ? props.theme.eCashBlue : props.theme.eCashPurple}; @media (max-width: 768px) { font-size: 12px; } @media (max-width: 400px) { font-size: 10px; } -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; `; const AddressHighlightTrim = styled.span` font-weight: bold; color: ${props => props.theme.contrast}; @media (max-width: 768px) { font-size: 12px; } @media (max-width: 400px) { font-size: 10px; } -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; `; const CustomInput = styled.div` font-size: 14px; color: ${props => props.theme.lightWhite}; text-align: center; cursor: pointer; margin-bottom: 10px; padding: 6px 0; font-family: 'Roboto Mono', monospace; border-radius: 5px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; input { border: none; width: 100%; text-align: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; color: ${props => props.theme.contrast}; padding: 10px 0; background: transparent; margin-bottom: 15px; display: none; } input:focus { outline: none; } input::selection { background: transparent; color: ${props => props.theme.contrast}; } @media (max-width: 768px) { font-size: 10px; input { font-size: 10px; margin-bottom: 10px; } } @media (max-width: 400px) { font-size: 7px; input { font-size: 10px; margin-bottom: 10px; } } `; export const QRCode = ({ address, isCashAddress, size = 210, onClick = () => null, }) => { address = address ? convertToEcashPrefix(address) : ''; const [visible, setVisible] = useState(false); const trimAmount = 8; const address_trim = address ? address.length - trimAmount : ''; const addressSplit = address ? address.split(':') : ['']; const addressPrefix = addressSplit[0]; const prefixLength = addressPrefix.length + 1; const txtRef = React.useRef(null); const handleOnClick = evt => { setVisible(true); setTimeout(() => { setVisible(false); }, 1500); onClick(evt); }; const handleOnCopy = () => { // Event.("Category", "Action", "Label") // xec or etoken? let eventLabel = currency.ticker; if (address && !isCashAddress) { eventLabel = currency.tokenTicker; // Event('Category', 'Action', 'Label') Event('Wallet', 'Copy Address', eventLabel); } setVisible(true); setTimeout(() => { txtRef.current.select(); }, 100); }; return (
Copied
{address}
{address && ( {address.slice(0, prefixLength)} {address.slice( prefixLength, prefixLength + trimAmount, )} {address.slice(prefixLength + trimAmount, address_trim)} {address.slice(-trimAmount)} )}
); }; QRCode.propTypes = { address: PropTypes.string, - isCashAddress: PropTypes.func, + isCashAddress: PropTypes.bool, size: PropTypes.number, onClick: PropTypes.func, };