diff --git a/web/cashtab/src/components/Common/QRCode.js b/web/cashtab/src/components/Common/QRCode.js index 4499c9da5..dd4d79246 100644 --- a/web/cashtab/src/components/Common/QRCode.js +++ b/web/cashtab/src/components/Common/QRCode.js @@ -1,254 +1,235 @@ import React, { useState } from 'react'; import PropTypes from 'prop-types'; import styled from 'styled-components'; import RawQRCode from 'qrcode.react'; import { currency } from 'components/Common/Ticker.js'; import { Event } from 'utils/GoogleAnalytics'; import { convertToEcashPrefix } from 'utils/cashMethods'; import CopyToClipboard from './CopyToClipboard'; + export const StyledRawQRCode = styled(RawQRCode)` cursor: pointer; border-radius: 10px; background: ${props => props.theme.qr.background}; - margin-bottom: 10px; + margin: 24px; path:first-child { fill: ${props => props.theme.qr.background}; } :hover { - border-color: ${({ xec = 0, ...props }) => - xec === 1 ? props.theme.eCashBlue : props.theme.eCashPurple}; + border-color: ${props => props.theme.qr.eCashBlue}; } @media (max-width: 768px) { border-radius: 18px; width: 170px; height: 170px; } `; const Copied = styled.div` font-size: 18px; font-weight: bold; width: 100%; text-align: center; - background-color: ${({ xec = 0, ...props }) => - xec === 1 ? props.theme.eCashBlue : props.theme.eCashPurple}; + background-color: ${props => props.theme.eCashBlue}; border: 1px solid; - border-color: ${({ xec = 0, ...props }) => - xec === 1 ? props.theme.eCashBlue : props.theme.eCashPurple}; + border-color: ${props => props.theme.eCashBlue}; color: ${props => props.theme.contrast}; position: absolute; top: 65px; padding: 30px 0; @media (max-width: 768px) { top: 52px; padding: 20px 0; } `; const PrefixLabel = styled.span` text-align: right; font-weight: bold; - color: ${({ xec = 0, ...props }) => - xec === 1 ? props.theme.eCashBlue : props.theme.eCashPurple}; + color: ${props => props.theme.eCashBlue}; @media (max-width: 768px) { font-size: 12px; } @media (max-width: 400px) { font-size: 10px; } -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; `; const AddressHighlightTrim = styled.span` font-weight: bold; color: ${props => props.theme.contrast}; @media (max-width: 768px) { font-size: 12px; } @media (max-width: 400px) { font-size: 10px; } -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; `; const CustomInput = styled.div` font-size: 14px; color: ${props => props.theme.lightWhite}; text-align: center; cursor: pointer; margin-bottom: 10px; - padding: 6px 0; + padding: 0; font-family: 'Roboto Mono', monospace; border-radius: 5px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; input { border: none; width: 100%; text-align: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; color: ${props => props.theme.contrast}; padding: 10px 0; background: transparent; margin-bottom: 15px; display: none; } input:focus { outline: none; } input::selection { background: transparent; color: ${props => props.theme.contrast}; } @media (max-width: 768px) { font-size: 10px; input { font-size: 10px; margin-bottom: 10px; } } @media (max-width: 400px) { font-size: 7px; input { font-size: 10px; margin-bottom: 10px; } } `; -export const QRCode = ({ - address, - isCashAddress, - size = 210, - onClick = () => null, -}) => { +export const QRCode = ({ address, size = 210, onClick = () => null }) => { address = address ? convertToEcashPrefix(address) : ''; const [visible, setVisible] = useState(false); const trimAmount = 8; const address_trim = address ? address.length - trimAmount : ''; const addressSplit = address ? address.split(':') : ['']; const addressPrefix = addressSplit[0]; const prefixLength = addressPrefix.length + 1; const txtRef = React.useRef(null); const handleOnClick = evt => { setVisible(true); setTimeout(() => { setVisible(false); }, 1500); onClick(evt); }; const handleOnCopy = () => { // Event.("Category", "Action", "Label") // xec or etoken? 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); setTimeout(() => { txtRef.current.select(); }, 100); }; return (
- + Copied
{address}
{address && ( - + {address.slice(0, prefixLength)} {address.slice( prefixLength, prefixLength + trimAmount, )} {address.slice( prefixLength + trimAmount, address_trim, )} {address.slice(-trimAmount)} )}
); }; QRCode.propTypes = { address: PropTypes.string, - isCashAddress: PropTypes.bool, size: PropTypes.number, onClick: PropTypes.func, }; diff --git a/web/cashtab/src/components/Receive/Receive.js b/web/cashtab/src/components/Receive/Receive.js index 874ef557c..b3ee1e862 100644 --- a/web/cashtab/src/components/Receive/Receive.js +++ b/web/cashtab/src/components/Receive/Receive.js @@ -1,204 +1,137 @@ import React from 'react'; import styled from 'styled-components'; import PropTypes from 'prop-types'; import { WalletContext } from 'utils/context'; import OnBoarding from 'components/OnBoarding/OnBoarding'; import { QRCode } from 'components/Common/QRCode'; import { currency } from 'components/Common/Ticker.js'; import { LoadingCtn } from 'components/Common/Atoms'; import BalanceHeader from 'components/Common/BalanceHeader'; import BalanceHeaderFiat from 'components/Common/BalanceHeaderFiat'; import { WalletInfoCtn, ZeroBalanceHeader } from 'components/Common/Atoms'; import WalletLabel from 'components/Common/WalletLabel'; import { getWalletState } from 'utils/cashMethods'; export const ReceiveCtn = styled.div` width: 100%; h2 { color: ${props => props.theme.contrast}; margin: 0 0 20px; margin-top: 10px; } `; -export const SwitchBtnCtn = styled.div` - display: flex; - align-items: center; - justify-content: center; - align-content: space-between; - margin-bottom: 15px; - .nonactiveBtn { - color: ${props => props.theme.walletBackground}; - background: ${props => props.theme.contrast} !important; - opacity: 0.7; - box-shadow: none !important; - } - .slpActive { - background: ${props => props.theme.eCashPurple} !important; - } -`; - -export const SwitchBtn = styled.div` - font-weight: bold; - display: inline-block; - cursor: pointer; - color: ${props => props.theme.switchButtonActiveText}; - font-size: 14px; - padding: 6px 0; - width: 100px; - margin: 0 1px; - text-decoration: none; - background: ${props => props.theme.eCashBlue}; - user-select: none; - :first-child { - border-radius: 100px 0 0 100px; - } - :nth-child(2) { - border-radius: 0 100px 100px 0; - } -`; - const ReceiveWithWalletPresent = ({ wallet, cashtabSettings, balances, fiatPrice, changeCashtabSettings, }) => { - const [isCashAddress, setIsCashAddress] = React.useState(true); - const handleChangeAddress = () => { - setIsCashAddress(!isCashAddress); - }; return ( {!balances.totalBalance ? ( You currently have 0 {currency.ticker}
Deposit some funds to use this feature
) : ( <> )}
-

Receive {isCashAddress ? 'XEC' : 'eToken'}

{wallet && ((wallet.Path245 && wallet.Path145) || wallet.Path1899) && ( <> {wallet.Path1899 ? ( <> ) : ( <> )} )} - - - handleChangeAddress()} - className={isCashAddress ? null : 'nonactiveBtn'} - > - {currency.ticker} - - handleChangeAddress()} - className={isCashAddress ? 'nonactiveBtn' : 'slpActive'} - > - {currency.tokenTicker} - -
); }; const Receive = () => { const ContextValue = React.useContext(WalletContext); const { wallet, previousWallet, loading, cashtabSettings, changeCashtabSettings, fiatPrice, } = ContextValue; const walletState = getWalletState(wallet); const { balances } = walletState; return ( <> {loading ? ( ) : ( <> {(wallet && wallet.Path1899) || (previousWallet && previousWallet.path1899) ? ( ) : ( )} )} ); }; ReceiveWithWalletPresent.propTypes = { balances: PropTypes.oneOfType([PropTypes.string, PropTypes.object]), fiatPrice: PropTypes.number, wallet: PropTypes.object, cashtabSettings: PropTypes.oneOfType([ PropTypes.shape({ fiatCurrency: PropTypes.string, sendModal: PropTypes.bool, autoCameraOn: PropTypes.bool, hideMessagesFromUnknownSender: PropTypes.bool, toggleShowHideBalance: PropTypes.bool, }), PropTypes.bool, ]), changeCashtabSettings: PropTypes.func, }; export default Receive; diff --git a/web/cashtab/src/components/Receive/__tests__/__snapshots__/Receive.test.js.snap b/web/cashtab/src/components/Receive/__tests__/__snapshots__/Receive.test.js.snap index 30b34231f..f73938415 100644 --- a/web/cashtab/src/components/Receive/__tests__/__snapshots__/Receive.test.js.snap +++ b/web/cashtab/src/components/Receive/__tests__/__snapshots__/Receive.test.js.snap @@ -1,819 +1,735 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP @generated exports[`Wallet with BCH balances 1`] = `

MigrationTestAlpha

edit.svg
You currently have 0 XEC
Deposit some funds to use this feature
-

- Receive - XEC -

Copied
ecash:qzagy47mvh6qxkvcn3acjnz73rkhkc6y7ccxkrr6zd
ecash: qzagy47m vh6qxkvcn3acjnz73rkhkc6y7c cxkrr6zd
-
-
- XEC -
-
- eToken -
-
`; exports[`Wallet with BCH balances and tokens 1`] = `

MigrationTestAlpha

edit.svg
You currently have 0 XEC
Deposit some funds to use this feature
-

- Receive - XEC -

Copied
ecash:qzagy47mvh6qxkvcn3acjnz73rkhkc6y7ccxkrr6zd
ecash: qzagy47m vh6qxkvcn3acjnz73rkhkc6y7c cxkrr6zd
-
-
- XEC -
-
- eToken -
-
`; exports[`Wallet with BCH balances and tokens and state field 1`] = `

MigrationTestAlpha

edit.svg
0.06 XEC
-

- Receive - XEC -

Copied
ecash:qzagy47mvh6qxkvcn3acjnz73rkhkc6y7ccxkrr6zd
ecash: qzagy47m vh6qxkvcn3acjnz73rkhkc6y7c cxkrr6zd
-
-
- XEC -
-
- eToken -
-
`; exports[`Wallet without BCH balance 1`] = `

MigrationTestAlpha

edit.svg
You currently have 0 XEC
Deposit some funds to use this feature
-

- Receive - XEC -

Copied
ecash:qzagy47mvh6qxkvcn3acjnz73rkhkc6y7ccxkrr6zd
ecash: qzagy47m vh6qxkvcn3acjnz73rkhkc6y7c cxkrr6zd
-
-
- XEC -
-
- eToken -
-
`; exports[`Without wallet defined 1`] = `

Welcome to Cashtab!

Cashtab is an open source, non-custodial web wallet for eCash .

Want to learn more? Check out the Cashtab documentation.

`;