Changeset View
Changeset View
Standalone View
Standalone View
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 { CopyToClipboard } from 'react-copy-to-clipboard'; | |||||
import { Event } from 'utils/GoogleAnalytics'; | import { Event } from 'utils/GoogleAnalytics'; | ||||
import { convertToEcashPrefix } from 'utils/cashMethods'; | import { convertToEcashPrefix } from 'utils/cashMethods'; | ||||
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-bottom: 10px; | ||||
path:first-child { | path:first-child { | ||||
fill: ${props => props.theme.qr.background}; | fill: ${props => props.theme.qr.background}; | ||||
} | } | ||||
▲ Show 20 Lines • Show All 153 Lines • ▼ Show 20 Lines | const handleOnCopy = () => { | ||||
setVisible(true); | setVisible(true); | ||||
setTimeout(() => { | setTimeout(() => { | ||||
txtRef.current.select(); | txtRef.current.select(); | ||||
}, 100); | }, 100); | ||||
}; | }; | ||||
return ( | return ( | ||||
<CopyToClipboard | <CopyToClipboard data={address}> | ||||
<div | |||||
style={{ | style={{ | ||||
display: 'inline-block', | display: 'inline-block', | ||||
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 | ||||
xec={address && isCashAddress ? 1 : 0} | xec={address && isCashAddress ? 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} | ||||
xec={address && isCashAddress ? 1 : 0} | xec={address && isCashAddress ? 1 : 0} | ||||
renderAs={'svg'} | renderAs={'svg'} | ||||
includeMargin | includeMargin | ||||
imageSettings={{ | imageSettings={{ | ||||
src: | src: | ||||
address && isCashAddress | address && isCashAddress | ||||
? 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 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 xec={address && isCashAddress ? 1 : 0}> | ||||
{address.slice(0, prefixLength)} | {address.slice(0, prefixLength)} | ||||
</PrefixLabel> | </PrefixLabel> | ||||
<AddressHighlightTrim> | <AddressHighlightTrim> | ||||
{address.slice( | {address.slice( | ||||
prefixLength, | prefixLength, | ||||
prefixLength + trimAmount, | prefixLength + trimAmount, | ||||
)} | )} | ||||
</AddressHighlightTrim> | </AddressHighlightTrim> | ||||
{address.slice(prefixLength + trimAmount, address_trim)} | {address.slice( | ||||
prefixLength + trimAmount, | |||||
address_trim, | |||||
)} | |||||
<AddressHighlightTrim> | <AddressHighlightTrim> | ||||
{address.slice(-trimAmount)} | {address.slice(-trimAmount)} | ||||
</AddressHighlightTrim> | </AddressHighlightTrim> | ||||
</CustomInput> | </CustomInput> | ||||
)} | )} | ||||
</div> | </div> | ||||
</div> | |||||
</CopyToClipboard> | </CopyToClipboard> | ||||
); | ); | ||||
}; | }; | ||||
QRCode.propTypes = { | QRCode.propTypes = { | ||||
address: PropTypes.string, | address: PropTypes.string, | ||||
isCashAddress: PropTypes.bool, | isCashAddress: PropTypes.bool, | ||||
size: PropTypes.number, | size: PropTypes.number, | ||||
onClick: PropTypes.func, | onClick: PropTypes.func, | ||||
}; | }; |