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 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 { 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'; | ||||
export const StyledRawQRCode = styled(RawQRCode)` | export const StyledRawQRCode = styled(RawQRCode)` | ||||
cursor: pointer; | cursor: pointer; | ||||
border-radius: 26px; | border-radius: 10px; | ||||
background: ${props => props.theme.qr.background}; | background: ${props => props.theme.qr.background}; | ||||
box-shadow: ${props => props.theme.qr.shadow}; | |||||
margin-bottom: 10px; | margin-bottom: 10px; | ||||
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: ${({ xec = 0, ...props }) => | ||||
xec === 1 ? props.theme.primary : props.theme.qr.token}; | 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: ${({ xec = 0, ...props }) => | ||||
xec === 1 ? props.theme.primary : props.theme.qr.token}; | xec === 1 ? props.theme.eCashBlue : props.theme.eCashPurple}; | ||||
border: 1px solid; | border: 1px solid; | ||||
border-color: ${({ xec = 0, ...props }) => | border-color: ${({ xec = 0, ...props }) => | ||||
xec === 1 | xec === 1 ? props.theme.eCashBlue : props.theme.eCashPurple}; | ||||
? props.theme.qr.copyBorderCash | |||||
: 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` | const PrefixLabel = styled.span` | ||||
text-align: right; | text-align: right; | ||||
font-size: 14px; | |||||
font-weight: bold; | font-weight: bold; | ||||
color: ${({ xec = 0, ...props }) => | |||||
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; | ||||
-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; | ||||
`; | `; | ||||
const AddressHighlightTrim = styled.span` | const AddressHighlightTrim = styled.span` | ||||
font-weight: bold; | font-weight: bold; | ||||
font-size: 14px; | color: ${props => props.theme.contrast}; | ||||
@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; | ||||
-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; | ||||
`; | `; | ||||
const CustomInput = styled.div` | const CustomInput = styled.div` | ||||
font-size: 12px; | font-size: 14px; | ||||
color: ${({ xec = 0, ...props }) => | color: ${props => props.theme.lightWhite}; | ||||
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: 10px; | ||||
padding: 6px 0; | padding: 6px 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; | ||||
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.contrast}; | ||||
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.contrast}; | ||||
} | } | ||||
@media (max-width: 768px) { | @media (max-width: 768px) { | ||||
font-size: 10px; | font-size: 10px; | ||||
input { | input { | ||||
font-size: 10px; | font-size: 10px; | ||||
margin-bottom: 10px; | margin-bottom: 10px; | ||||
} | } | ||||
} | } | ||||
▲ Show 20 Lines • Show All 83 Lines • ▼ Show 20 Lines | return ( | ||||
y: null, | y: null, | ||||
height: 24, | height: 24, | ||||
width: 24, | width: 24, | ||||
excavate: true, | excavate: true, | ||||
}} | }} | ||||
/> | /> | ||||
{address && ( | {address && ( | ||||
<CustomInput | <CustomInput className="notranslate"> | ||||
className="notranslate" | |||||
xec={address && isCashAddress ? 1 : 0} | |||||
> | |||||
<input | <input | ||||
ref={txtRef} | ref={txtRef} | ||||
readOnly | readOnly | ||||
value={address} | value={address} | ||||
spellCheck="false" | spellCheck="false" | ||||
type="text" | type="text" | ||||
/> | /> | ||||
<PrefixLabel> | <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> | ||||
Show All 10 Lines |