diff --git a/web/cashtab/src/components/Common/QRCode.js b/web/cashtab/src/components/Common/QRCode.js index e572f580b..712a1391c 100644 --- a/web/cashtab/src/components/Common/QRCode.js +++ b/web/cashtab/src/components/Common/QRCode.js @@ -1,243 +1,261 @@ import React, { useState } from 'react'; import styled from 'styled-components'; import RawQRCode from 'qrcode.react'; import { currency, isValidCashPrefix, isValidTokenPrefix, } 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: 23px; background: ${props => props.theme.qr.background}; box-shadow: ${props => props.theme.qr.shadow}; margin-bottom: 10px; border: 1px solid ${props => props.theme.wallet.borders.color}; path:first-child { fill: ${props => props.theme.qr.background}; } :hover { border-color: ${({ xec = 0, ...props }) => xec === 1 ? props.theme.primary : props.theme.qr.token}; } @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.primary : props.theme.qr.token}; border: 1px solid; border-color: ${({ xec = 0, ...props }) => xec === 1 ? props.theme.qr.copyBorderCash : props.theme.qr.copyBorderToken}; 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-size: 14px; font-weight: bold; @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; font-size: 14px; @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: 12px; color: ${({ xec = 0, ...props }) => xec === 1 ? props.theme.wallet.text.secondary : props.theme.brandSecondary}; text-align: center; cursor: pointer; margin-bottom: 0px; 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.wallet.text.primary}; padding: 10px 0; background: transparent; margin-bottom: 15px; display: none; } input:focus { outline: none; } input::selection { background: transparent; color: ${props => props.theme.wallet.text.primary}; } @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, size = 210, onClick = () => null, ...otherProps }) => { 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 isCash = isValidCashPrefix(address); 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) { const isToken = isValidTokenPrefix(address); if (isToken) { 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)} )}
); }; diff --git a/web/cashtab/src/components/Wallet/__tests__/__snapshots__/Wallet.test.js.snap b/web/cashtab/src/components/Wallet/__tests__/__snapshots__/Wallet.test.js.snap index 873b37926..b94a95a98 100644 --- a/web/cashtab/src/components/Wallet/__tests__/__snapshots__/Wallet.test.js.snap +++ b/web/cashtab/src/components/Wallet/__tests__/__snapshots__/Wallet.test.js.snap @@ -1,622 +1,622 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP @generated exports[`Wallet with BCH balances 1`] = ` Array [
🎉 Congratulations on your new wallet! 🎉
Start using the wallet immediately to receive XEC payments, or load it up with XEC to send to others
,
0 XEC
,
Copied
ecash:qzagy47mvh6qxkvcn3acjnz73rkhkc6y7ccxkrr6zd
ecash: qzagy47m vh6qxkvcn3acjnz73rkhkc6y7c cxkrr6zd
,
XEC
eToken
, ] `; exports[`Wallet with BCH balances and tokens 1`] = ` Array [
🎉 Congratulations on your new wallet! 🎉
Start using the wallet immediately to receive XEC payments, or load it up with XEC to send to others
,
0 XEC
,
Copied
ecash:qzagy47mvh6qxkvcn3acjnz73rkhkc6y7ccxkrr6zd
ecash: qzagy47m vh6qxkvcn3acjnz73rkhkc6y7c cxkrr6zd
,
XEC
eToken
, ] `; exports[`Wallet with BCH balances and tokens and state field 1`] = ` Array [
0.06047469 XEC
,
$ NaN USD
,
Copied
ecash:qzagy47mvh6qxkvcn3acjnz73rkhkc6y7ccxkrr6zd
ecash: qzagy47m vh6qxkvcn3acjnz73rkhkc6y7c cxkrr6zd
,
XEC
eToken
, ] `; exports[`Wallet without BCH balance 1`] = ` Array [
🎉 Congratulations on your new wallet! 🎉
Start using the wallet immediately to receive XEC payments, or load it up with XEC to send to others
,
0 XEC
,
Copied
ecash:qzagy47mvh6qxkvcn3acjnz73rkhkc6y7ccxkrr6zd
ecash: qzagy47m vh6qxkvcn3acjnz73rkhkc6y7c cxkrr6zd
,
XEC
eToken
, ] `; exports[`Without wallet defined 1`] = ` Array [

Welcome to Cashtab!

,

Cashtab is an open source, non-custodial web wallet for eCash .

Want to learn more? Check out the Cashtab documentation.

, , , ] `;