Page MenuHomePhabricator
Differential D12680 Diff 36765 web/cashtab/src/components/Common/QRCode.js

Changeset View

Standalone View

View Options

web/cashtab/src/components/Common/QRCode.js

import React, { useState } from 'react'; import React, { useState } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import styled from 'styled-components'; import styled from 'styled-components';
import RawQRCode from 'qrcode.react'; import RawQRCode from 'qrcode.react';
import { currency } from 'components/Common/Ticker.js'; import { currency } from 'components/Common/Ticker.js';
import { Event } from 'utils/GoogleAnalytics'; import { Event } from 'utils/GoogleAnalytics';
import { convertToEcashPrefix } from 'utils/cashMethods'; import { convertToEcashPrefix } from 'utils/cashMethods';
import CopyToClipboard from './CopyToClipboard'; import CopyToClipboard from './CopyToClipboard';
export const StyledRawQRCode = styled(RawQRCode)` export const StyledRawQRCode = styled(RawQRCode)`
cursor: pointer; cursor: pointer;
border-radius: 10px; border-radius: 10px;
background: ${props => props.theme.qr.background}; background: ${props => props.theme.qr.background};
margin-bottom: 10px; margin: 24px;
path:first-child { path:first-child {
fill: ${props => props.theme.qr.background}; fill: ${props => props.theme.qr.background};
} }
:hover { :hover {
border-color: ${({ xec = 0, ...props }) => border-color: ${props => props.theme.qr.eCashBlue};
xec === 1 ? props.theme.eCashBlue : props.theme.eCashPurple};
} }
@media (max-width: 768px) { @media (max-width: 768px) {
border-radius: 18px; border-radius: 18px;
width: 170px; width: 170px;
height: 170px; height: 170px;
} }
`; `;
const Copied = styled.div` const Copied = styled.div`
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
width: 100%; width: 100%;
text-align: center; text-align: center;
background-color: ${({ xec = 0, ...props }) => background-color: ${props => props.theme.eCashBlue};
xec === 1 ? props.theme.eCashBlue : props.theme.eCashPurple};
border: 1px solid; border: 1px solid;
border-color: ${({ xec = 0, ...props }) => border-color: ${props => props.theme.eCashBlue};
xec === 1 ? props.theme.eCashBlue : props.theme.eCashPurple};
color: ${props => props.theme.contrast}; color: ${props => props.theme.contrast};
position: absolute; position: absolute;
top: 65px; top: 65px;
padding: 30px 0; padding: 30px 0;
@media (max-width: 768px) { @media (max-width: 768px) {
top: 52px; top: 52px;
padding: 20px 0; padding: 20px 0;
} }
`; `;
const PrefixLabel = styled.span` const PrefixLabel = styled.span`
text-align: right; text-align: right;
font-weight: bold; font-weight: bold;
color: ${({ xec = 0, ...props }) => color: ${props => props.theme.eCashBlue};
xec === 1 ? props.theme.eCashBlue : props.theme.eCashPurple};
@media (max-width: 768px) { @media (max-width: 768px) {
font-size: 12px; font-size: 12px;
} }
@media (max-width: 400px) { @media (max-width: 400px) {
font-size: 10px; font-size: 10px;
} }
-webkit-touch-callout: none; -webkit-touch-callout: none;
-webkit-user-select: none; -webkit-user-select: none;
Show All 20 Lines
`; `;
const CustomInput = styled.div` const CustomInput = styled.div`
font-size: 14px; font-size: 14px;
color: ${props => props.theme.lightWhite}; color: ${props => props.theme.lightWhite};
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
margin-bottom: 10px; margin-bottom: 10px;
padding: 6px 0; padding: 0;
font-family: 'Roboto Mono', monospace; font-family: 'Roboto Mono', monospace;
border-radius: 5px; border-radius: 5px;
-webkit-touch-callout: none; -webkit-touch-callout: none;
-webkit-user-select: none; -webkit-user-select: none;
-khtml-user-select: none; -khtml-user-select: none;
-moz-user-select: none; -moz-user-select: none;
-ms-user-select: none; -ms-user-select: none;
user-select: none; user-select: none;
Show All 31 Lines @media (max-width: 400px) {
font-size: 7px; font-size: 7px;
input { input {
font-size: 10px; font-size: 10px;
margin-bottom: 10px; margin-bottom: 10px;
} }
} }
`; `;
export const QRCode = ({ export const QRCode = ({ address, size = 210, onClick = () => null }) => {
address,
isCashAddress,
size = 210,
onClick = () => null,
}) => {
address = address ? convertToEcashPrefix(address) : ''; address = address ? convertToEcashPrefix(address) : '';
const [visible, setVisible] = useState(false); const [visible, setVisible] = useState(false);
const trimAmount = 8; const trimAmount = 8;
const address_trim = address ? address.length - trimAmount : ''; const address_trim = address ? address.length - trimAmount : '';
const addressSplit = address ? address.split(':') : ['']; const addressSplit = address ? address.split(':') : [''];
const addressPrefix = addressSplit[0]; const addressPrefix = addressSplit[0];
const prefixLength = addressPrefix.length + 1; const prefixLength = addressPrefix.length + 1;
const txtRef = React.useRef(null); const txtRef = React.useRef(null);
const handleOnClick = evt => { const handleOnClick = evt => {
setVisible(true); setVisible(true);
setTimeout(() => { setTimeout(() => {
setVisible(false); setVisible(false);
}, 1500); }, 1500);
onClick(evt); onClick(evt);
}; };
const handleOnCopy = () => { const handleOnCopy = () => {
// Event.("Category", "Action", "Label") // Event.("Category", "Action", "Label")
// xec or etoken? // xec or etoken?
let eventLabel = currency.ticker; let eventLabel = currency.ticker;
if (address && !isCashAddress) {
eventLabel = currency.tokenTicker;
// Event('Category', 'Action', 'Label')
Event('Wallet', 'Copy Address', eventLabel); Event('Wallet', 'Copy Address', eventLabel);
}
setVisible(true); setVisible(true);
setTimeout(() => { setTimeout(() => {
txtRef.current.select(); txtRef.current.select();
}, 100); }, 100);
}; };
return ( return (
<CopyToClipboard data={address}> <CopyToClipboard data={address}>
<div <div
style={{ style={{
display: 'inline-block', display: 'inline-block',
width: '100%', width: '100%',
position: 'relative', position: 'relative',
}} }}
onCopy={handleOnCopy} onCopy={handleOnCopy}
> >
<div style={{ position: 'relative' }} onClick={handleOnClick}> <div style={{ position: 'relative' }} onClick={handleOnClick}>
<Copied <Copied style={{ display: visible ? null : 'none' }}>
xec={address && isCashAddress ? 1 : 0}
style={{ display: visible ? null : 'none' }}
>
Copied <br /> Copied <br />
<span style={{ fontSize: '12px' }}>{address}</span> <span style={{ fontSize: '12px' }}>{address}</span>
</Copied> </Copied>
<StyledRawQRCode <StyledRawQRCode
id="borderedQRCode" id="borderedQRCode"
value={address || ''} value={address || ''}
size={size} size={size}
xec={address && isCashAddress ? 1 : 0}
renderAs={'svg'} renderAs={'svg'}
includeMargin includeMargin
imageSettings={{ imageSettings={{
src: src: currency.logo,
address && isCashAddress
? currency.logo
: currency.tokenLogo,
x: null, x: null,
y: null, y: null,
height: 24, height: 24,
width: 24, width: 24,
excavate: true, excavate: true,
}} }}
/> />
{address && ( {address && (
<CustomInput className="notranslate"> <CustomInput className="notranslate">
<input <input
ref={txtRef} ref={txtRef}
readOnly readOnly
value={address} value={address}
spellCheck="false" spellCheck="false"
type="text" type="text"
/> />
<PrefixLabel xec={address && isCashAddress ? 1 : 0}> <PrefixLabel>
{address.slice(0, prefixLength)} {address.slice(0, prefixLength)}
</PrefixLabel> </PrefixLabel>
<AddressHighlightTrim> <AddressHighlightTrim>
{address.slice( {address.slice(
prefixLength, prefixLength,
prefixLength + trimAmount, prefixLength + trimAmount,
)} )}
</AddressHighlightTrim> </AddressHighlightTrim>
Show All 9 Lines return (
</div> </div>
</div> </div>
</CopyToClipboard> </CopyToClipboard>
); );
}; };
QRCode.propTypes = { QRCode.propTypes = {
address: PropTypes.string, address: PropTypes.string,
isCashAddress: PropTypes.bool,
size: PropTypes.number, size: PropTypes.number,
onClick: PropTypes.func, onClick: PropTypes.func,
}; };