diff --git a/web/cashtab/src/components/Common/QRCode.js b/web/cashtab/src/components/Common/QRCode.js --- a/web/cashtab/src/components/Common/QRCode.js +++ b/web/cashtab/src/components/Common/QRCode.js @@ -21,8 +21,8 @@ fill: ${props => props.theme.qr.background}; } :hover { - border-color: ${({ bch = 0, ...props }) => - bch === 1 ? props.theme.primary : props.theme.qr.token}; + border-color: ${({ xec = 0, ...props }) => + xec === 1 ? props.theme.primary : props.theme.qr.token}; } @media (max-width: 768px) { border-radius: 18px; @@ -36,12 +36,11 @@ font-weight: bold; width: 100%; text-align: center; - - background-color: ${({ bch = 0, ...props }) => - bch === 1 ? props.theme.primary : props.theme.qr.token}; + background-color: ${({ xec = 0, ...props }) => + xec === 1 ? props.theme.primary : props.theme.qr.token}; border: 1px solid; - border-color: ${({ bch = 0, ...props }) => - bch === 1 + border-color: ${({ xec = 0, ...props }) => + xec === 1 ? props.theme.qr.copyBorderCash : props.theme.qr.copyBorderToken}; color: ${props => props.theme.contrast}; @@ -53,10 +52,34 @@ 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` - font-size: 15px; - color: ${props => props.theme.wallet.text.secondary}; + 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; @@ -64,11 +87,6 @@ font-family: 'Roboto Mono', monospace; border-radius: 5px; - span { - font-weight: bold; - color: ${props => props.theme.wallet.text.primary}; - font-size: 16px; - } input { border: none; width: 100%; @@ -92,22 +110,16 @@ color: ${props => props.theme.wallet.text.primary}; } @media (max-width: 768px) { - font-size: 11px; - span { - font-size: 12px; - } + font-size: 10px; input { - font-size: 11px; + font-size: 10px; margin-bottom: 10px; } } - @media (max-width: 340px) { - font-size: 10px; - span { - font-size: 11px; - } + @media (max-width: 400px) { + font-size: 7px; input { - font-size: 11px; + font-size: 10px; margin-bottom: 10px; } } @@ -115,27 +127,21 @@ export const QRCode = ({ address, - legacy, size = 210, onClick = () => null, ...otherProps }) => { + address = address ? convertToEcashPrefix(address) : ''; + const [visible, setVisible] = useState(false); const trimAmount = 8; - // Set address format to legacy or not - - if (!legacy) { - address = address ? convertToEcashPrefix(address) : ''; - } - // get the prefix + 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 address_trim = address ? address.length - trimAmount : ''; - const txtRef = React.useRef(null); const handleOnClick = evt => { @@ -148,7 +154,7 @@ const handleOnCopy = () => { // Event.("Category", "Action", "Label") - // BCH or slp? + // xec or etoken? let eventLabel = currency.ticker; if (address) { const isToken = isValidTokenPrefix(address); @@ -177,7 +183,7 @@ >
Copied
@@ -188,7 +194,7 @@ id="borderedQRCode" value={address || ''} size={size} - bch={address && isCash ? 1 : 0} + xec={address && isCash ? 1 : 0} renderAs={'svg'} includeMargin imageSettings={{ @@ -205,7 +211,7 @@ /> {address && ( - + - + + {address.slice(0, prefixLength)} + + {address.slice( prefixLength, prefixLength + trimAmount, )} - - {address.slice(prefixLength + trimAmount, address_trim)} - {address.slice(-trimAmount)} + + {address.slice(trimAmount, address_trim)} + + {address.slice(-trimAmount)} + )}
diff --git a/web/cashtab/src/components/Common/__tests__/QRCode.test.js b/web/cashtab/src/components/Common/__tests__/QRCode.test.js --- a/web/cashtab/src/components/Common/__tests__/QRCode.test.js +++ b/web/cashtab/src/components/Common/__tests__/QRCode.test.js @@ -7,14 +7,14 @@ describe('', () => { jest.useFakeTimers(); - it('QRCode copying cash address', async () => { + it('QRCode copying ecash address', async () => { const OnClick = jest.fn(); const { container } = render( , @@ -30,14 +30,14 @@ expect(setTimeout).toHaveBeenCalled(); }); - it('QRCode copying SLP address', () => { + it('QRCode copying eToken address', () => { const OnClick = jest.fn(); const { container } = render( , diff --git a/web/cashtab/src/components/Wallet/Wallet.js b/web/cashtab/src/components/Wallet/Wallet.js --- a/web/cashtab/src/components/Wallet/Wallet.js +++ b/web/cashtab/src/components/Wallet/Wallet.js @@ -166,13 +166,6 @@ padding: 6px 0 12px 0; `; -export const AddrPrefixSwitch = styled(Switch)``; - -export const AddrPrefixLabel = styled.span` - color: ${props => props.theme.wallet.text.primary} - margin-right: 4px; -`; - const WalletInfo = () => { const ContextValue = React.useContext(WalletContext); const { wallet, fiatPrice, apiError, cashtabSettings } = ContextValue; @@ -270,37 +263,10 @@ ? wallet.Path1899.slpAddress : wallet.Path1899.cashAddress } - legacy={addressPrefix === 'bitcoincash'} /> - - - Address Format: - - - ) : ( <> - 0.06047469 XEC ,
$ NaN @@ -28,7 +28,7 @@ } >
- - qzagy47m + + ecash: - vh6qxkvcn3acjnz73rkhkc6y7c - - cxkrr6zd + + qzagy47m -
-
, -
- - Address Format: - - +
,
XEC
eToken @@ -140,14 +122,14 @@ exports[`Wallet with BCH balances and tokens 1`] = ` Array [
0.06047469 XEC
,
$ NaN @@ -165,7 +147,7 @@ } >
- - qzagy47m + + ecash: - vh6qxkvcn3acjnz73rkhkc6y7c - - cxkrr6zd + + qzagy47m -
-
, -
- - Address Format: - - +
,
XEC
eToken @@ -277,14 +241,14 @@ exports[`Wallet with BCH balances and tokens and state field 1`] = ` Array [
0.06047469 XEC
,
$ NaN @@ -302,7 +266,7 @@ } >
- - qzagy47m + + ecash: - vh6qxkvcn3acjnz73rkhkc6y7c - - cxkrr6zd + + qzagy47m -
-
, -
- - Address Format: - - +
,
XEC
eToken @@ -414,14 +360,14 @@ exports[`Wallet with BCH balances and tokens and state field, but no params in state 1`] = ` Array [
0.06047469 XEC
,
$ NaN @@ -439,7 +385,7 @@ } >
- - qzagy47m + + ecash: - vh6qxkvcn3acjnz73rkhkc6y7c - - cxkrr6zd + + qzagy47m -
-
, -
- - Address Format: - - +
,
XEC
eToken @@ -551,7 +479,7 @@ exports[`Wallet without BCH balance 1`] = ` Array [
,
0 @@ -594,7 +522,7 @@ } >
- - qzagy47m + + ecash: - vh6qxkvcn3acjnz73rkhkc6y7c - - cxkrr6zd + + qzagy47m -
-
, -
- - Address Format: - - +
,
XEC
eToken