Differential D9881 Diff 29423 web/cashtab/src/components/Common/QRCode.js

Changeset View

Standalone View

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

Show All 15 Lines	export const StyledRawQRCode = styled(RawQRCode)`
background: ${props => props.theme.qr.background};		background: ${props => props.theme.qr.background};
box-shadow: ${props => props.theme.qr.shadow};		box-shadow: ${props => props.theme.qr.shadow};
margin-bottom: 10px;		margin-bottom: 10px;
border: 1px solid ${props => props.theme.wallet.borders.color};		border: 1px solid ${props => props.theme.wallet.borders.color};
path:first-child {		path:first-child {
fill: ${props => props.theme.qr.background};		fill: ${props => props.theme.qr.background};
}		}
:hover {		:hover {
border-color: ${({ bch = 0, ...props }) =>		border-color: ${({ xec = 0, ...props }) =>
bch === 1 ? props.theme.primary : props.theme.qr.token};		xec === 1 ? props.theme.primary : props.theme.qr.token};
}		}
@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: ${({ bch = 0, ...props }) =>		xec === 1 ? props.theme.primary : props.theme.qr.token};
bch === 1 ? props.theme.primary : props.theme.qr.token};
border: 1px solid;		border: 1px solid;
border-color: ${({ bch = 0, ...props }) =>		border-color: ${({ xec = 0, ...props }) =>
bch === 1		xec === 1
? props.theme.qr.copyBorderCash		? props.theme.qr.copyBorderCash
: props.theme.qr.copyBorderToken};		: props.theme.qr.copyBorderToken};
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`
		text-align: right;
		font-size: 14px;
		font-weight: bold;
		@media (max-width: 768px) {
		font-size: 12px;
		}
		@media (max-width: 400px) {
		font-size: 10px;
		}
		`;
		const AddressHighlightTrim = styled.span`
		font-weight: bold;
		font-size: 14px;
		@media (max-width: 768px) {
		font-size: 12px;
		}
		@media (max-width: 400px) {
		font-size: 10px;
		}
		`;

const CustomInput = styled.div`		const CustomInput = styled.div`
font-size: 15px;		font-size: 12px;
color: ${props => props.theme.wallet.text.secondary};		color: ${({ xec = 0, ...props }) =>
		xec === 1
		? props.theme.wallet.text.secondary
		: props.theme.brandSecondary};
text-align: center;		text-align: center;
cursor: pointer;		cursor: pointer;
margin-bottom: 0px;		margin-bottom: 0px;
padding: 6px 0;		padding: 6px 0;
font-family: 'Roboto Mono', monospace;		font-family: 'Roboto Mono', monospace;
border-radius: 5px;		border-radius: 5px;

span {
font-weight: bold;
color: ${props => props.theme.wallet.text.primary};
font-size: 16px;
}
input {		input {
border: none;		border: none;
width: 100%;		width: 100%;
text-align: center;		text-align: center;
-webkit-user-select: none;		-webkit-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;
cursor: pointer;		cursor: pointer;
color: ${props => props.theme.wallet.text.primary};		color: ${props => props.theme.wallet.text.primary};
padding: 10px 0;		padding: 10px 0;
background: transparent;		background: transparent;
margin-bottom: 15px;		margin-bottom: 15px;
display: none;		display: none;
}		}
input:focus {		input:focus {
outline: none;		outline: none;
}		}
input::selection {		input::selection {
background: transparent;		background: transparent;
color: ${props => props.theme.wallet.text.primary};		color: ${props => props.theme.wallet.text.primary};
}		}
@media (max-width: 768px) {		@media (max-width: 768px) {
font-size: 11px;		font-size: 10px;
span {
font-size: 12px;
}
input {		input {
font-size: 11px;		font-size: 10px;
margin-bottom: 10px;		margin-bottom: 10px;
}		}
}		}
@media (max-width: 340px) {		@media (max-width: 400px) {
font-size: 10px;		font-size: 7px;
span {
font-size: 11px;
}
input {		input {
font-size: 11px;		font-size: 10px;
margin-bottom: 10px;		margin-bottom: 10px;
}		}
}		}
`;		`;

export const QRCode = ({		export const QRCode = ({
address,		address,
legacy,
size = 210,		size = 210,
onClick = () => null,		onClick = () => null,
...otherProps		...otherProps
}) => {		}) => {
		address = address ? convertToEcashPrefix(address) : '';

const [visible, setVisible] = useState(false);		const [visible, setVisible] = useState(false);
const trimAmount = 8;		const trimAmount = 8;
// Set address format to legacy or not		const address_trim = address ? address.length - trimAmount : '';

if (!legacy) {
address = address ? convertToEcashPrefix(address) : '';
}
// get the prefix
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 isCash = isValidCashPrefix(address);		const isCash = isValidCashPrefix(address);

const address_trim = address ? address.length - trimAmount : '';

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")
// BCH or slp?		// xec or etoken?
let eventLabel = currency.ticker;		let eventLabel = currency.ticker;
if (address) {		if (address) {
const isToken = isValidTokenPrefix(address);		const isToken = isValidTokenPrefix(address);
if (isToken) {		if (isToken) {
eventLabel = currency.tokenTicker;		eventLabel = currency.tokenTicker;
}		}
// Event('Category', 'Action', 'Label')		// Event('Category', 'Action', 'Label')
Event('Wallet', 'Copy Address', eventLabel);		Event('Wallet', 'Copy Address', eventLabel);
Show All 12 Lines	return (
width: '100%',		width: '100%',
position: 'relative',		position: 'relative',
}}		}}
text={address}		text={address}
onCopy={handleOnCopy}		onCopy={handleOnCopy}
>		>
<div style={{ position: 'relative' }} onClick={handleOnClick}>		<div style={{ position: 'relative' }} onClick={handleOnClick}>
<Copied		<Copied
bch={address && isCash ? 1 : 0}		xec={address && isCash ? 1 : 0}
style={{ display: visible ? null : 'none' }}		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}
bch={address && isCash ? 1 : 0}		xec={address && isCash ? 1 : 0}
renderAs={'svg'}		renderAs={'svg'}
includeMargin		includeMargin
imageSettings={{		imageSettings={{
src:		src:
address && isCash		address && isCash
? currency.logo		? currency.logo
: currency.tokenLogo,		: 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>		<CustomInput xec={address && isCash ? 1 : 0}>
<input		<input
ref={txtRef}		ref={txtRef}
readOnly		readOnly
value={address}		value={address}
spellCheck="false"		spellCheck="false"
type="text"		type="text"
/>		/>
<span>		<PrefixLabel>
		{address.slice(0, prefixLength)}
		</PrefixLabel>
		<AddressHighlightTrim>
{address.slice(		{address.slice(
prefixLength,		prefixLength,
prefixLength + trimAmount,		prefixLength + trimAmount,
)}		)}
</span>		</AddressHighlightTrim>
{address.slice(prefixLength + trimAmount, address_trim)}		{address.slice(trimAmount, address_trim)}
<span>{address.slice(-trimAmount)}</span>		<AddressHighlightTrim>
		{address.slice(-trimAmount)}
		</AddressHighlightTrim>
</CustomInput>		</CustomInput>
)}		)}
</div>		</div>
</CopyToClipboard>		</CopyToClipboard>
);		);
};		};