Delete
+
+ You currently have 0 {currency.ticker}
+
+ ) : (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+Airdrop.defaultProps = {
+ passLoadingStatus: status => {
+ console.log(status);
+ },
+};
+
+Airdrop.propTypes = {
+ jestBCH: PropTypes.object,
+ passLoadingStatus: PropTypes.func,
+};
+
+export default Airdrop;
diff --git a/web/cashtab-v2/src/components/Airdrop/__tests__/Airdrop.test.js b/web/cashtab-v2/src/components/Airdrop/__tests__/Airdrop.test.js
new file mode 100644
--- /dev/null
+++ b/web/cashtab-v2/src/components/Airdrop/__tests__/Airdrop.test.js
@@ -0,0 +1,115 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { ThemeProvider } from 'styled-components';
+import { theme } from '@assets/styles/theme';
+import Airdrop from '@components/Airdrop/Airdrop';
+import BCHJS from '@psf/bch-js';
+import {
+ walletWithBalancesAndTokens,
+ walletWithBalancesMock,
+ walletWithoutBalancesMock,
+ walletWithBalancesAndTokensWithCorrectState,
+} from '../../Home/__mocks__/walletAndBalancesMock';
+import { BrowserRouter as Router } from 'react-router-dom';
+
+let realUseContext;
+let useContextMock;
+
+beforeEach(() => {
+ realUseContext = React.useContext;
+ useContextMock = React.useContext = jest.fn();
+
+ // Mock method not implemented in JSDOM
+ // See reference at https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
+ Object.defineProperty(window, 'matchMedia', {
+ writable: true,
+ value: jest.fn().mockImplementation(query => ({
+ matches: false,
+ media: query,
+ onchange: null,
+ addListener: jest.fn(), // Deprecated
+ removeListener: jest.fn(), // Deprecated
+ addEventListener: jest.fn(),
+ removeEventListener: jest.fn(),
+ dispatchEvent: jest.fn(),
+ })),
+ });
+});
+
+afterEach(() => {
+ React.useContext = realUseContext;
+});
+
+test('Wallet without BCH balance', () => {
+ useContextMock.mockReturnValue(walletWithoutBalancesMock);
+ const testBCH = new BCHJS();
+ const component = renderer.create(
+
+
+
+ ,
+ );
+ let tree = component.toJSON();
+ expect(tree).toMatchSnapshot();
+});
+
+test('Wallet with BCH balances', () => {
+ useContextMock.mockReturnValue(walletWithBalancesMock);
+ const testBCH = new BCHJS();
+ const component = renderer.create(
+
+
+
+ ,
+ );
+ let tree = component.toJSON();
+ expect(tree).toMatchSnapshot();
+});
+
+test('Wallet with BCH balances and tokens', () => {
+ useContextMock.mockReturnValue(walletWithBalancesAndTokens);
+ const testBCH = new BCHJS();
+ const component = renderer.create(
+
+
+
+ ,
+ );
+ let tree = component.toJSON();
+ expect(tree).toMatchSnapshot();
+});
+
+test('Wallet with BCH balances and tokens and state field', () => {
+ useContextMock.mockReturnValue(walletWithBalancesAndTokensWithCorrectState);
+ const testBCH = new BCHJS();
+ const component = renderer.create(
+
+
+
+ ,
+ );
+ let tree = component.toJSON();
+ expect(tree).toMatchSnapshot();
+});
+
+test('Without wallet defined', () => {
+ useContextMock.mockReturnValue({
+ wallet: {},
+ balances: { totalBalance: 0 },
+ loading: false,
+ });
+ const testBCH = new BCHJS();
+ const component = renderer.create(
+
+
+
+ ,
+ );
+ let tree = component.toJSON();
+ expect(tree).toMatchSnapshot();
+});
diff --git a/web/cashtab-v2/src/components/Airdrop/__tests__/__snapshots__/Airdrop.test.js.snap b/web/cashtab-v2/src/components/Airdrop/__tests__/__snapshots__/Airdrop.test.js.snap
new file mode 100644
--- /dev/null
+++ b/web/cashtab-v2/src/components/Airdrop/__tests__/__snapshots__/Airdrop.test.js.snap
@@ -0,0 +1,400 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP @generated
+
+exports[`Wallet with BCH balances 1`] = `
+Array [
+
+
+ MigrationTestAlpha
+
+
+ You currently have 0
+ XEC
+
+
+
+
+
+
+
+
+
+
+
+ XEC Airdrop Calculator
+
+
+
+
+
+
+
+ MigrationTestAlpha
+
+
+ You currently have 0
+ XEC
+
+
+
+
+
+
+
+
+
+
+
+ XEC Airdrop Calculator
+
+
+
+
+
+
+
+ MigrationTestAlpha
+
+
+ 0.06
+
+ XEC
+
+
+
+
+
+
+
+
+
+
+
+ XEC Airdrop Calculator
+
+
+
+
+
+
+
+ MigrationTestAlpha
+
+
+ You currently have 0
+ XEC
+
+
+
+
+
+
+
+
+
+
+
+ XEC Airdrop Calculator
+
+
+
+
+
+
+
+ You currently have 0
+ XEC
+
+
+
+
+
+
+
+
+
+
+
+ XEC Airdrop Calculator
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ (
+
+
+
+
+
+
+
+ {wallet ? (
+
+ history.push('/wallet')}
+ >
+
+
+ history.push('/send')}
+ >
+
+ history.push('receive')}
+ >
+
+ history.push('/airdrop')}
+ >
+
+ history.push('/configure')}
+ >
+
+
+ ) : null}
+
+
+
+
+ );
+};
+
+export default App;
diff --git a/web/cashtab-v2/src/components/Authentication/ProtectableComponentWrapper.js b/web/cashtab-v2/src/components/Authentication/ProtectableComponentWrapper.js
new file mode 100644
--- /dev/null
+++ b/web/cashtab-v2/src/components/Authentication/ProtectableComponentWrapper.js
@@ -0,0 +1,32 @@
+import React, { useContext } from 'react';
+import { AuthenticationContext } from '@utils/context';
+import SignUp from './SignUp';
+import SignIn from './SignIn';
+
+const ProtectableComponentWrapper = ({ children }) => {
+ const authentication = useContext(AuthenticationContext);
+
+ if (authentication) {
+ const { loading, isAuthenticationRequired, isSignedIn } =
+ authentication;
+
+ if (loading) {
+ return Loading authenticaion data...
;
+ }
+
+ // prompt if user would like to enable biometric lock when the app first run
+ if (isAuthenticationRequired === undefined) {
+ return
+ This wallet can be unlocked with your{' '}
+ fingerprint / device pin
+
+
+
+
+ Unlock
+
+
+ {isLoading ?
+
+ );
+ } else {
+ signInBody = Authentication is not supported
;
+ }
+
+ return (
+
+
+
+ {signInBody}
+
+ );
+};
+
+export default SignIn;
diff --git a/web/cashtab-v2/src/components/Authentication/SignUp.js b/web/cashtab-v2/src/components/Authentication/SignUp.js
new file mode 100644
--- /dev/null
+++ b/web/cashtab-v2/src/components/Authentication/SignUp.js
@@ -0,0 +1,76 @@
+import React, { useContext } from 'react';
+import { Modal } from 'antd';
+import styled from 'styled-components';
+import { AuthenticationContext } from '@utils/context';
+import { ThemedLockOutlined } from '@components/Common/CustomIcons';
+import PrimaryButton, {
+ SecondaryButton,
+} from '@components/Common/PrimaryButton';
+
+const StyledSignUp = styled.div`
+ padding: 0px 30px;
+ margin-top: 20px;
+ h2 {
+ color: ${props => props.theme.contrast};
+ font-size: 25px;
+ }
+ p {
+ color: ${props => props.theme.contrast};
+ }
+`;
+
+const SignUp = () => {
+ const authentication = useContext(AuthenticationContext);
+
+ const handleSignUp = async () => {
+ try {
+ await authentication.signUp();
+ } catch (err) {
+ Modal.error({
+ title: 'Registration Error',
+ content: 'Cannot create Credential on your device',
+ centered: true,
+ });
+ }
+ };
+
+ let signUpBody;
+ if (authentication) {
+ signUpBody = (
+
+
Enable wallet lock to protect your funds.
+
+ You will need to unlock with your{' '}
+ fingerprint / device pin in order to access
+ the wallet.
+
+
+ This lock can also be enabled / disabled under
+ Settings / General Settings / App Lock
+
+
+ Enable Lock
+
+
authentication.turnOffAuthentication()}
+ >
+ Skip
+
+
Authentication is not supported
;
+ }
+
+ return (
+
+
+
+ {signUpBody}
+
+ );
+};
+
+export default SignUp;
diff --git a/web/cashtab-v2/src/components/Common/ApiError.js b/web/cashtab-v2/src/components/Common/ApiError.js
new file mode 100644
--- /dev/null
+++ b/web/cashtab-v2/src/components/Common/ApiError.js
@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { CashLoader } from '@components/Common/CustomIcons';
+import { AlertMsg } from '@components/Common/Atoms';
+
+const ApiError = () => {
+ return (
+ <>
+
+ API connection lost.
+
+
+ {formatBalance(balance)} {ticker}
+
+ );
+};
+
+// balance may be a number (XEC balance) or a BigNumber object (token balance)
+BalanceHeader.propTypes = {
+ balance: PropTypes.oneOfType([PropTypes.number, PropTypes.object]),
+ ticker: PropTypes.string,
+};
+
+export default BalanceHeader;
diff --git a/web/cashtab-v2/src/components/Common/BalanceHeaderFiat.js b/web/cashtab-v2/src/components/Common/BalanceHeaderFiat.js
new file mode 100644
--- /dev/null
+++ b/web/cashtab-v2/src/components/Common/BalanceHeaderFiat.js
@@ -0,0 +1,49 @@
+import * as React from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import { BalanceHeaderFiatWrap } from '@components/Common/Atoms';
+import { currency } from '@components/Common/Ticker.js';
+const FiatCurrencyToXEC = styled.p`
+ margin: 0 auto;
+ padding: 0;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ color: ${props => props.theme.lightWhite};
+`;
+const BalanceHeaderFiat = ({ balance, settings, fiatPrice }) => {
+ return (
+ <>
+ {fiatPrice && (
+
+ {settings
+ ? `${
+ currency.fiatCurrencies[settings.fiatCurrency]
+ .symbol
+ }`
+ : '$'}
+ {parseFloat(
+ (balance * fiatPrice).toFixed(2),
+ ).toLocaleString()}{' '}
+ {settings
+ ? `${currency.fiatCurrencies[
+ settings.fiatCurrency
+ ].slug.toUpperCase()} `
+ : 'USD'}
+
+ 1 {currency.ticker} ={' '}
+ {fiatPrice.toFixed(9).toLocaleString()}{' '}
+ {settings.fiatCurrency.toUpperCase()}
+
+
+ )}
+
+ );
+};
+
+BalanceHeaderFiat.propTypes = {
+ balance: PropTypes.number,
+ settings: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
+ fiatPrice: PropTypes.number,
+};
+
+export default BalanceHeaderFiat;
diff --git a/web/cashtab-v2/src/components/Common/CropControlModal.js b/web/cashtab-v2/src/components/Common/CropControlModal.js
new file mode 100644
--- /dev/null
+++ b/web/cashtab-v2/src/components/Common/CropControlModal.js
@@ -0,0 +1,59 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { Card, Modal } from 'antd';
+
+const CropModal = styled(Modal)`
+ .ant-modal-close-x {
+ font-size: 2px;
+ }
+`;
+
+export const CropperContainer = styled.div`
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 175px;
+`;
+export const ControlsContainer = styled.div`
+ position: absolute;
+ padding: 12px;
+ bottom: 0;
+ left: 50%;
+ width: 50%;
+ transform: translateX(-50%);
+ height: 175px;
+ display: block;
+ align-items: center;
+`;
+
+export const CropControlModal = ({
+ expand,
+ renderExpanded = () => null,
+ onClose,
+ style,
+ ...otherProps
+}) => {
+ return (
+
+
+ {renderExpanded()}
+
+
+ );
+};
+CropControlModal.propTypes = {
+ expand: PropTypes.bool,
+ renderExpanded: PropTypes.func,
+ onClose: PropTypes.func,
+ style: PropTypes.object,
+};
diff --git a/web/cashtab-v2/src/components/Common/CustomIcons.js b/web/cashtab-v2/src/components/Common/CustomIcons.js
new file mode 100644
--- /dev/null
+++ b/web/cashtab-v2/src/components/Common/CustomIcons.js
@@ -0,0 +1,110 @@
+import * as React from 'react';
+import styled from 'styled-components';
+import {
+ CopyOutlined,
+ DollarOutlined,
+ LoadingOutlined,
+ WalletOutlined,
+ QrcodeOutlined,
+ SettingOutlined,
+ LockOutlined,
+} from '@ant-design/icons';
+import { Image } from 'antd';
+import { currency } from '@components/Common/Ticker';
+import { ReactComponent as Send } from '@assets/send.svg';
+import { ReactComponent as Receive } from '@assets/receive.svg';
+import { ReactComponent as Genesis } from '@assets/flask.svg';
+import { ReactComponent as Unparsed } from '@assets/alert-circle.svg';
+import { ReactComponent as Home } from '@assets/home.svg';
+import { ReactComponent as Settings } from '@assets/cog.svg';
+import { ReactComponent as CopySolid } from '@assets/copy.svg';
+import { ReactComponent as LinkSolid } from '@assets/external-link-square-alt.svg';
+import { ReactComponent as Airdrop } from '@assets/airdrop-icon.svg';
+
+export const CashLoadingIcon =
+
+);
+
+export const ReceiveIcon = () =>
+ {currency.label}
+
+ );
+ });
+
+ const CurrencySelect = (
+
+ {currencyOptions}
+
+ );
+ return (
+
+
+
+
+ max
+
+
+
+
+ );
+};
+
+SendBchInput.propTypes = {
+ onMax: PropTypes.func,
+ inputProps: PropTypes.object,
+ selectProps: PropTypes.object,
+ activeFiatCode: PropTypes.string,
+};
+
+export const DestinationAmount = ({ onMax, inputProps, ...otherProps }) => {
+ return (
+
+
+
+ max
+
+ }
+ {...inputProps}
+ />
+
+
+ );
+};
+
+DestinationAmount.propTypes = {
+ onMax: PropTypes.func,
+ inputProps: PropTypes.object,
+};
+
+// loadWithCameraOpen prop: if true, load page with camera scanning open
+export const DestinationAddressSingle = ({
+ onScan,
+ loadWithCameraOpen,
+ inputProps,
+ ...otherProps
+}) => {
+ return (
+
+
+
+
+ );
+};
+
+DestinationAddressSingle.propTypes = {
+ onScan: PropTypes.func,
+ loadWithCameraOpen: PropTypes.bool,
+ inputProps: PropTypes.object,
+};
+
+export const DestinationAddressMulti = ({ inputProps, ...otherProps }) => {
+ return (
+
+
+ }
+ autoComplete="off"
+ {...inputProps}
+ />
+
+
+ );
+};
+
+DestinationAddressMulti.propTypes = {
+ inputProps: PropTypes.object,
+};
+
+export const CurrencySelectDropdown = selectProps => {
+ const { Option } = Select;
+
+ // Build select dropdown from currency.fiatCurrencies
+ const currencyMenuOptions = [];
+ const currencyKeys = Object.keys(currency.fiatCurrencies);
+ for (let i = 0; i < currencyKeys.length; i += 1) {
+ const currencyMenuOption = {};
+ currencyMenuOption.value =
+ currency.fiatCurrencies[currencyKeys[i]].slug;
+ currencyMenuOption.label = `${
+ currency.fiatCurrencies[currencyKeys[i]].name
+ } (${currency.fiatCurrencies[currencyKeys[i]].symbol})`;
+ currencyMenuOptions.push(currencyMenuOption);
+ }
+ const currencyOptions = currencyMenuOptions.map(currencyMenuOption => {
+ return (
+
+ {currencyMenuOption.label}
+
+ );
+ });
+
+ return (
+
+ {currencyOptions}
+
+ );
+};
+
+export const AddressValidators = () => {
+ const { BCH } = useBCH();
+
+ return {
+ safelyDetectAddressFormat: value => {
+ try {
+ return BCH.Address.detectAddressFormat(value);
+ } catch (error) {
+ return null;
+ }
+ },
+ isSLPAddress: value =>
+ AddressValidators.safelyDetectAddressFormat(value) === 'slpaddr',
+ isBCHAddress: value =>
+ AddressValidators.safelyDetectAddressFormat(value) === 'cashaddr',
+ isLegacyAddress: value =>
+ AddressValidators.safelyDetectAddressFormat(value) === 'legacy',
+ }();
+};
diff --git a/web/cashtab-v2/src/components/Common/Notifications.js b/web/cashtab-v2/src/components/Common/Notifications.js
new file mode 100644
--- /dev/null
+++ b/web/cashtab-v2/src/components/Common/Notifications.js
@@ -0,0 +1,210 @@
+import * as React from 'react';
+import { notification } from 'antd';
+import {
+ CashReceivedNotificationIcon,
+ TokenReceivedNotificationIcon,
+} from '@components/Common/CustomIcons';
+import Paragraph from 'antd/lib/typography/Paragraph';
+import { currency } from '@components/Common/Ticker';
+import { MessageSignedNotificationIcon } from '@components/Common/CustomIcons';
+import { isMobile } from 'react-device-detect';
+
+const getDeviceNotificationStyle = () => {
+ if (isMobile) {
+ const notificationStyle = {
+ width: '100%',
+ marginTop: '10%',
+ };
+ return notificationStyle;
+ }
+ if (!isMobile) {
+ const notificationStyle = {
+ width: '100%',
+ };
+ return notificationStyle;
+ }
+};
+
+// Success Notifications:
+const sendXecNotification = link => {
+ const notificationStyle = getDeviceNotificationStyle();
+ notification.success({
+ message: 'Success',
+ description: (
+
+
+ Transaction successful. Click to view in block explorer.
+
+
+ ),
+ duration: currency.notificationDurationShort,
+ icon:
+
+ Token created! Click to view in block explorer.
+
+
+ ),
+ icon: Your eToken icon was successfully submitted.
+ ),
+ icon:
+
+ Transaction successful. Click to view in block explorer.
+
+
+ ),
+ duration: currency.notificationDurationShort,
+ icon:
+
+ eToken burn successful. Click to view in block explorer.
+
+
+ ),
+ duration: currency.notificationDurationLong,
+ icon:
+ +{' '}
+ {parseFloat(
+ Number(
+ balances.totalBalance - previousBalances.totalBalance,
+ ).toFixed(currency.cashDecimals),
+ ).toLocaleString()}{' '}
+ {currency.ticker}{' '}
+ {cashtabSettings &&
+ cashtabSettings.fiatCurrency &&
+ `(${
+ currency.fiatCurrencies[cashtabSettings.fiatCurrency]
+ .symbol
+ }${(
+ Number(
+ balances.totalBalance -
+ previousBalances.totalBalance,
+ ) * fiatPrice
+ ).toFixed(
+ currency.cashDecimals,
+ )} ${cashtabSettings.fiatCurrency.toUpperCase()})`}
+
+ ),
+ duration: currency.notificationDurationShort,
+ icon:
+ You received {receivedSlpQty.toString()} {receivedSlpName}
+
+ ),
+ duration: currency.notificationDurationShort,
+ icon: {msgSignature} ,
+ icon:
+
+
+ Copied {address}
+
+
+
+
+ {address && (
+
+
+ {address.slice(0, prefixLength)}
+
+
+ {address.slice(
+ prefixLength,
+ prefixLength + trimAmount,
+ )}
+
+ {address.slice(prefixLength + trimAmount, address_trim)}
+
+ {address.slice(-trimAmount)}
+
+
+ )}
+
+ );
+};
diff --git a/web/cashtab-v2/src/components/Common/ScanQRCode.js b/web/cashtab-v2/src/components/Common/ScanQRCode.js
new file mode 100644
--- /dev/null
+++ b/web/cashtab-v2/src/components/Common/ScanQRCode.js
@@ -0,0 +1,187 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Alert, Modal } from 'antd';
+import { ThemedQrcodeOutlined } from '@components/Common/CustomIcons';
+import { errorNotification } from './Notifications';
+import styled from 'styled-components';
+import { BrowserQRCodeReader } from '@zxing/library';
+import { currency, parseAddressForParams } from '@components/Common/Ticker.js';
+import { Event } from '@utils/GoogleAnalytics';
+import { isValidXecAddress, isValidEtokenAddress } from '@utils/validation';
+
+const StyledScanQRCode = styled.span`
+ display: block;
+`;
+
+const StyledModal = styled(Modal)`
+ width: 400px !important;
+ height: 400px !important;
+
+ .ant-modal-close {
+ top: 0 !important;
+ right: 0 !important;
+ }
+`;
+
+const QRPreview = styled.video`
+ width: 100%;
+`;
+
+const ScanQRCode = ({
+ loadWithCameraOpen,
+ onScan = () => null,
+ ...otherProps
+}) => {
+ const [visible, setVisible] = useState(loadWithCameraOpen);
+ const [error, setError] = useState(false);
+ // Use these states to debug video errors on mobile
+ // Note: iOS chrome/brave/firefox does not support accessing camera, will throw error
+ // iOS users can use safari
+ // todo only show scanner with safari
+ //const [mobileError, setMobileError] = useState(false);
+ //const [mobileErrorMsg, setMobileErrorMsg] = useState(false);
+ const [activeCodeReader, setActiveCodeReader] = useState(null);
+
+ const teardownCodeReader = codeReader => {
+ if (codeReader !== null) {
+ codeReader.reset();
+ codeReader.stop();
+ codeReader = null;
+ setActiveCodeReader(codeReader);
+ }
+ };
+
+ const parseContent = content => {
+ let type = 'unknown';
+ let values = {};
+ const addressInfo = parseAddressForParams(content);
+
+ // If what scanner reads from QR code is a valid eCash or eToken address
+ if (
+ isValidXecAddress(addressInfo.address) ||
+ isValidEtokenAddress(content)
+ ) {
+ type = 'address';
+ values = {
+ address: content,
+ };
+ // Event("Category", "Action", "Label")
+ // Track number of successful QR code scans
+ // BCH or slp?
+ let eventLabel = currency.ticker;
+ const isToken = content.split(currency.tokenPrefix).length > 1;
+ if (isToken) {
+ eventLabel = currency.tokenTicker;
+ }
+ Event('ScanQRCode.js', 'Address Scanned', eventLabel);
+ }
+ return { type, values };
+ };
+
+ const scanForQrCode = async () => {
+ const codeReader = new BrowserQRCodeReader();
+ setActiveCodeReader(codeReader);
+
+ try {
+ // Need to execute this before you can decode input
+ // eslint-disable-next-line no-unused-vars
+ const videoInputDevices = await codeReader.getVideoInputDevices();
+ //console.log(`videoInputDevices`, videoInputDevices);
+ //setMobileError(JSON.stringify(videoInputDevices));
+
+ // choose your media device (webcam, frontal camera, back camera, etc.)
+ // TODO implement if necessary
+ //const selectedDeviceId = videoInputDevices[0].deviceId;
+
+ //const previewElem = document.querySelector("#test-area-qr-code-webcam");
+
+ let result = { type: 'unknown', values: {} };
+
+ while (result.type !== 'address') {
+ const content = await codeReader.decodeFromInputVideoDevice(
+ undefined,
+ 'test-area-qr-code-webcam',
+ );
+ result = parseContent(content.text);
+ if (result.type !== 'address') {
+ errorNotification(
+ content.text,
+ `${content.text} is not a valid eCash address`,
+ `${content.text} is not a valid eCash address`,
+ );
+ }
+ }
+ // When you scan a valid address, stop scanning and fill form
+ // Hide the scanner
+ setVisible(false);
+ onScan(result.values.address);
+ return teardownCodeReader(codeReader);
+ } catch (err) {
+ console.log(`Error in QR scanner:`);
+ console.log(err);
+ console.log(JSON.stringify(err.message));
+ //setMobileErrorMsg(JSON.stringify(err.message));
+ setError(err);
+ return teardownCodeReader(codeReader);
+ }
+ };
+
+ React.useEffect(() => {
+ if (!visible) {
+ setError(false);
+ // Stop the camera if user closes modal
+ if (activeCodeReader !== null) {
+ teardownCodeReader(activeCodeReader);
+ }
+ } else {
+ scanForQrCode();
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [visible]);
+
+ return (
+ <>
+ setVisible(!visible)}
+ >
+
+ setVisible(false)}
+ footer={null}
+ >
+ {visible ? (
+
+ {error ? (
+ <>
+
+ {/*
+
{mobileError}
+
{mobileErrorMsg}
+ */}
+
+ ) : (
+
+ )}
+
+
+ );
+};
+
+ScanQRCode.propTypes = {
+ loadWithCameraOpen: PropTypes.bool,
+ onScan: PropTypes.func,
+};
+
+export default ScanQRCode;
diff --git a/web/cashtab-v2/src/components/Common/StyledCollapse.js b/web/cashtab-v2/src/components/Common/StyledCollapse.js
new file mode 100644
--- /dev/null
+++ b/web/cashtab-v2/src/components/Common/StyledCollapse.js
@@ -0,0 +1,114 @@
+import styled from 'styled-components';
+import { Collapse } from 'antd';
+
+export const StyledCollapse = styled(Collapse)`
+ background: ${props => props.theme.collapses.background} !important;
+ border: 1px solid ${props => props.theme.collapses.border} !important;
+
+ .ant-collapse-content {
+ border-top: none;
+ background-color: ${props =>
+ props.theme.collapses.expandedBackground} !important;
+ }
+
+ .ant-collapse-item {
+ border-bottom: none !important;
+ }
+
+ *:not(button) {
+ color: ${props => props.theme.collapses.color} !important;
+ }
+`;
+
+export const TokenCollapse = styled(Collapse)`
+ ${({ disabled = false, ...props }) =>
+ disabled === true
+ ? `
+ background: ${props.theme.buttons.secondary.background} !important;
+ .ant-collapse-header {
+ font-size: 18px;
+ font-weight: bold;
+ color: ${props.theme.buttons.secondary.color} !important;
+ svg {
+ color: ${props.theme.buttons.secondary.color} !important;
+ }
+ }
+ .ant-collapse-arrow {
+ font-size: 18px;
+ }
+ `
+ : `
+ background: ${props.theme.eCashBlue} !important;
+ .ant-collapse-header {
+ font-size: 18px;
+ font-weight: bold;
+ color: ${props.theme.contrast} !important;
+ svg {
+ color: ${props.theme.contrast} !important;
+ }
+ }
+ .ant-collapse-arrow {
+ font-size: 18px;
+ }
+ `}
+`;
+
+export const AdvancedCollapse = styled(Collapse)`
+ .ant-collapse-content {
+ background-color: ${props =>
+ props.theme.advancedCollapse.expandedBackground} !important;
+ }
+ ${({ disabled = false, ...props }) =>
+ disabled === true
+ ? `
+ background: ${props.theme.buttons.secondary.background} !important;
+ .ant-collapse-header {
+ font-size: 18px;
+ font-weight: normal;
+ color: ${props.theme.buttons.secondary.color} !important;
+ svg {
+ color: ${props.theme.buttons.secondary.color} !important;
+ }
+ }
+ .ant-collapse-arrow {
+ font-size: 18px;
+ }
+ `
+ : `
+ background: ${props.theme.advancedCollapse.background} !important;
+ .ant-collapse-header {
+ font-size: 18px;
+ font-weight: bold;
+ color: ${props.theme.advancedCollapse.color} !important;
+ svg {
+ color: ${props.theme.advancedCollapse.icon} !important;
+ }
+ }
+ .ant-collapse-arrow {
+ font-size: 18px;
+ }
+
+ `}
+`;
+
+export const AntdContextCollapseWrapper = styled.div`
+ .ant-collapse {
+ border: none !important;
+ background-color: transparent !important;
+ }
+ .ant-collapse-item {
+ border: none !important;
+ }
+ .ant-collapse-header {
+ padding: 0 !important;
+ color: ${props => props.theme.forms.text} !important;
+ }
+ border-radius: 16px;
+ .ant-collapse-content-box {
+ padding-right: 0 !important;
+ }
+
+ @media screen and (max-width: 500px) {
+ grid-template-columns: 24px 30% 50%;
+ }
+`;
diff --git a/web/cashtab-v2/src/components/Common/Ticker.js b/web/cashtab-v2/src/components/Common/Ticker.js
new file mode 100644
--- /dev/null
+++ b/web/cashtab-v2/src/components/Common/Ticker.js
@@ -0,0 +1,140 @@
+import mainLogo from '@assets/logo_primary.png';
+import tokenLogo from '@assets/logo_secondary.png';
+import BigNumber from 'bignumber.js';
+
+export const currency = {
+ name: 'eCash',
+ ticker: 'XEC',
+ logo: mainLogo,
+ legacyPrefix: 'bitcoincash',
+ prefixes: ['ecash'],
+ coingeckoId: 'ecash',
+ defaultFee: 2.01,
+ dustSats: 550,
+ etokenSats: 546,
+ cashDecimals: 2,
+ blockExplorerUrl: 'https://explorer.bitcoinabc.org',
+ tokenExplorerUrl: 'https://explorer.be.cash',
+ blockExplorerUrlTestnet: 'https://texplorer.bitcoinabc.org',
+ tokenName: 'eToken',
+ tokenTicker: 'eToken',
+ tokenIconSubmitApi: 'https://icons.etokens.cash/new',
+ tokenLogo: tokenLogo,
+ tokenPrefixes: ['etoken'],
+ tokenIconsUrl: 'https://etoken-icons.s3.us-west-2.amazonaws.com',
+ tokenDbUrl: 'https://tokendb.kingbch.com',
+ txHistoryCount: 10,
+ xecApiBatchSize: 20,
+ defaultSettings: { fiatCurrency: 'usd', sendModal: false },
+ notificationDurationShort: 3,
+ notificationDurationLong: 5,
+ newTokenDefaultUrl: 'https://cashtab.com/',
+ opReturn: {
+ opReturnPrefixHex: '6a',
+ opReturnAppPrefixLengthHex: '04',
+ opPushDataOne: '4c',
+ appPrefixesHex: {
+ eToken: '534c5000',
+ cashtab: '00746162',
+ cashtabEncrypted: '65746162',
+ },
+ encryptedMsgCharLimit: 94,
+ unencryptedMsgCharLimit: 160,
+ },
+ settingsValidation: {
+ fiatCurrency: [
+ 'usd',
+ 'idr',
+ 'krw',
+ 'cny',
+ 'zar',
+ 'vnd',
+ 'cad',
+ 'nok',
+ 'eur',
+ 'gbp',
+ 'jpy',
+ 'try',
+ 'rub',
+ 'inr',
+ 'brl',
+ 'php',
+ 'ils',
+ 'clp',
+ 'twd',
+ 'hkd',
+ 'bhd',
+ 'sar',
+ 'aud',
+ 'nzd',
+ 'chf',
+ ],
+ sendModal: [true, false],
+ },
+ fiatCurrencies: {
+ usd: { name: 'US Dollar', symbol: '$', slug: 'usd' },
+ aud: { name: 'Australian Dollar', symbol: '$', slug: 'aud' },
+ bhd: { name: 'Bahraini Dinar', symbol: 'BD', slug: 'bhd' },
+ brl: { name: 'Brazilian Real', symbol: 'R$', slug: 'brl' },
+ gbp: { name: 'British Pound', symbol: '£', slug: 'gbp' },
+ cad: { name: 'Canadian Dollar', symbol: '$', slug: 'cad' },
+ clp: { name: 'Chilean Peso', symbol: '$', slug: 'clp' },
+ cny: { name: 'Chinese Yuan', symbol: '元', slug: 'cny' },
+ eur: { name: 'Euro', symbol: '€', slug: 'eur' },
+ hkd: { name: 'Hong Kong Dollar', symbol: 'HK$', slug: 'hkd' },
+ inr: { name: 'Indian Rupee', symbol: '₹', slug: 'inr' },
+ idr: { name: 'Indonesian Rupiah', symbol: 'Rp', slug: 'idr' },
+ ils: { name: 'Israeli Shekel', symbol: '₪', slug: 'ils' },
+ jpy: { name: 'Japanese Yen', symbol: '¥', slug: 'jpy' },
+ krw: { name: 'Korean Won', symbol: '₩', slug: 'krw' },
+ nzd: { name: 'New Zealand Dollar', symbol: '$', slug: 'nzd' },
+ nok: { name: 'Norwegian Krone', symbol: 'kr', slug: 'nok' },
+ php: { name: 'Philippine Peso', symbol: '₱', slug: 'php' },
+ rub: { name: 'Russian Ruble', symbol: 'р.', slug: 'rub' },
+ twd: { name: 'New Taiwan Dollar', symbol: 'NT$', slug: 'twd' },
+ sar: { name: 'Saudi Riyal', symbol: 'SAR', slug: 'sar' },
+ zar: { name: 'South African Rand', symbol: 'R', slug: 'zar' },
+ chf: { name: 'Swiss Franc', symbol: 'Fr.', slug: 'chf' },
+ try: { name: 'Turkish Lira', symbol: '₺', slug: 'try' },
+ vnd: { name: 'Vietnamese đồng', symbol: 'đ', slug: 'vnd' },
+ },
+};
+
+export function parseAddressForParams(addressString) {
+ // Build return obj
+ const addressInfo = {
+ address: '',
+ queryString: null,
+ amount: null,
+ };
+ // Parse address string for parameters
+ const paramCheck = addressString.split('?');
+
+ let cleanAddress = paramCheck[0];
+ addressInfo.address = cleanAddress;
+
+ // Check for parameters
+ // only the amount param is currently supported
+ let queryString = null;
+ let amount = null;
+ if (paramCheck.length > 1) {
+ queryString = paramCheck[1];
+ addressInfo.queryString = queryString;
+
+ const addrParams = new URLSearchParams(queryString);
+
+ if (addrParams.has('amount')) {
+ // Amount in satoshis
+ try {
+ amount = new BigNumber(parseInt(addrParams.get('amount')))
+ .div(10 ** currency.cashDecimals)
+ .toString();
+ } catch (err) {
+ amount = null;
+ }
+ }
+ }
+
+ addressInfo.amount = amount;
+ return addressInfo;
+}
diff --git a/web/cashtab-v2/src/components/Common/WalletLabel.js b/web/cashtab-v2/src/components/Common/WalletLabel.js
new file mode 100644
--- /dev/null
+++ b/web/cashtab-v2/src/components/Common/WalletLabel.js
@@ -0,0 +1,29 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+
+const WalletName = styled.h4`
+ font-size: 16px;
+ display: inline-block;
+ color: ${props => props.theme.lightWhite};
+ margin-bottom: 0px;
+ @media (max-width: 400px) {
+ font-size: 16px;
+ }
+`;
+
+const WalletLabel = ({ name }) => {
+ return (
+ <>
+ {name && typeof name === 'string' && (
+ {name}
+ )}
+
+ );
+};
+
+WalletLabel.propTypes = {
+ name: PropTypes.string,
+};
+
+export default WalletLabel;
diff --git a/web/cashtab-v2/src/components/Common/__mocks__/copy-to-clipboard.js b/web/cashtab-v2/src/components/Common/__mocks__/copy-to-clipboard.js
new file mode 100644
--- /dev/null
+++ b/web/cashtab-v2/src/components/Common/__mocks__/copy-to-clipboard.js
@@ -0,0 +1,2 @@
+const copy = jest.fn();
+export default copy;
diff --git a/web/cashtab-v2/src/components/Common/__tests__/QRCode.test.js b/web/cashtab-v2/src/components/Common/__tests__/QRCode.test.js
new file mode 100644
--- /dev/null
+++ b/web/cashtab-v2/src/components/Common/__tests__/QRCode.test.js
@@ -0,0 +1,62 @@
+import React from 'react';
+import { render, fireEvent, act } from '@testing-library/react';
+import { QRCode } from '../QRCode';
+import { ThemeProvider } from 'styled-components';
+import { theme } from '@assets/styles/theme';
+
+describe('
+ ,
+ );
+
+ const qrCodeElement = container.querySelector('#borderedQRCode');
+ fireEvent.click(qrCodeElement);
+
+ act(() => {
+ jest.runAllTimers();
+ });
+ expect(OnClick).toHaveBeenCalled();
+ expect(setTimeout).toHaveBeenCalled();
+ });
+
+ it('QRCode copying eToken address', () => {
+ const OnClick = jest.fn();
+ const { container } = render(
+
+ ,
+ );
+ const qrCodeElement = container.querySelector('#borderedQRCode');
+ fireEvent.click(qrCodeElement);
+ expect(OnClick).toHaveBeenCalled();
+ });
+
+ it('QRCode without address', () => {
+ const { container } = render(
+
+ ,
+ );
+
+ const qrCodeElement = container.querySelector('#borderedQRCode');
+ fireEvent.click(qrCodeElement);
+ expect(setTimeout).toHaveBeenLastCalledWith(expect.any(Function), 1500);
+ expect(setTimeout).toHaveBeenCalled();
+ });
+});
diff --git a/web/cashtab-v2/src/components/Common/__tests__/StyledCollapse.test.js b/web/cashtab-v2/src/components/Common/__tests__/StyledCollapse.test.js
new file mode 100644
--- /dev/null
+++ b/web/cashtab-v2/src/components/Common/__tests__/StyledCollapse.test.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { StyledCollapse } from '../StyledCollapse';
+import { ThemeProvider } from 'styled-components';
+import { theme } from '@assets/styles/theme';
+
+test('Render StyledCollapse component', () => {
+ const component = renderer.create(
+
+ ,
+ );
+ let tree = component.toJSON();
+ expect(tree).toMatchSnapshot();
+});
diff --git a/web/cashtab-v2/src/components/Common/__tests__/__snapshots__/StyledCollapse.test.js.snap b/web/cashtab-v2/src/components/Common/__tests__/__snapshots__/StyledCollapse.test.js.snap
new file mode 100644
--- /dev/null
+++ b/web/cashtab-v2/src/components/Common/__tests__/__snapshots__/StyledCollapse.test.js.snap
@@ -0,0 +1,8 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP @generated
+
+exports[`Render StyledCollapse component 1`] = `
+
+`;
diff --git a/web/cashtab-v2/src/components/Configure/Configure.js b/web/cashtab-v2/src/components/Configure/Configure.js
new file mode 100644
--- /dev/null
+++ b/web/cashtab-v2/src/components/Configure/Configure.js
@@ -0,0 +1,806 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import React, { useState, useEffect } from 'react';
+import styled from 'styled-components';
+import { Collapse, Form, Input, Modal, Alert, Switch, Tag } from 'antd';
+import {
+ PlusSquareOutlined,
+ WalletFilled,
+ ImportOutlined,
+ LockOutlined,
+ CheckOutlined,
+ CloseOutlined,
+ LockFilled,
+ ExclamationCircleFilled,
+} from '@ant-design/icons';
+import { WalletContext, AuthenticationContext } from '@utils/context';
+import { SidePaddingCtn } from '@components/Common/Atoms';
+import { StyledCollapse } from '@components/Common/StyledCollapse';
+import {
+ AntdFormWrapper,
+ CurrencySelectDropdown,
+} from '@components/Common/EnhancedInputs';
+import PrimaryButton, {
+ SecondaryButton,
+ SmartButton,
+} from '@components/Common/PrimaryButton';
+import {
+ ThemedCopyOutlined,
+ ThemedWalletOutlined,
+ ThemedDollarOutlined,
+ ThemedSettingOutlined,
+} from '@components/Common/CustomIcons';
+import { ReactComponent as Trashcan } from '@assets/trashcan.svg';
+import { ReactComponent as Edit } from '@assets/edit.svg';
+import { Event } from '@utils/GoogleAnalytics';
+import ApiError from '@components/Common/ApiError';
+import { formatSavedBalance } from '@utils/formatting';
+
+const { Panel } = Collapse;
+
+const SettingsLink = styled.a`
+ text-decoration: underline;
+ color: ${props => props.theme.eCashBlue};
+ :visited {
+ text-decoration: underline;
+ color: ${props => props.theme.eCashBlue};
+ }
+ :hover {
+ color: ${props => props.theme.eCashPurple};
+ }
+`;
+
+const SWRow = styled.div`
+ border-radius: 3px;
+ padding: 10px 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-bottom: 6px;
+ @media (max-width: 500px) {
+ flex-direction: column;
+ margin-bottom: 12px;
+ }
+`;
+
+const SWName = styled.div`
+ width: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ word-wrap: break-word;
+ hyphens: auto;
+
+ @media (max-width: 500px) {
+ width: 100%;
+ justify-content: center;
+ margin-bottom: 15px;
+ }
+
+ h3 {
+ font-size: 16px;
+ color: ${props => props.theme.darkBlue};
+ margin: 0;
+ text-align: center;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ h3.overflow {
+ width: 100px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ h3.overflow:hover {
+ background-color: ${props => props.theme.settings.background};
+ overflow: visible;
+ inline-size: 100px;
+ white-space: normal;
+ }
+`;
+
+const SWBalance = styled.div`
+ width: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ word-wrap: break-word;
+ hyphens: auto;
+ @media (max-width: 500px) {
+ width: 100%;
+ justify-content: center;
+ margin-bottom: 15px;
+ }
+ div {
+ font-size: 13px;
+ color: ${props => props.theme.darkBlue};
+ margin: 0;
+ text-align: center;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ div.overflow {
+ width: 150px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ div.overflow:hover {
+ background-color: ${props => props.theme.settings.background};
+ overflow: visible;
+ inline-size: 150px;
+ white-space: normal;
+ }
+`;
+
+const SWButtonCtn = styled.div`
+ width: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ @media (max-width: 500px) {
+ width: 100%;
+ justify-content: center;
+ }
+
+ button {
+ cursor: pointer;
+ background: transparent;
+ border: 1px solid #fff;
+ box-shadow: none;
+ color: #fff;
+ border-radius: 3px;
+ opacity: 0.6;
+ transition: all 200ms ease-in-out;
+
+ :hover {
+ opacity: 1;
+ background: ${props => props.theme.eCashBlue};
+ border-color: ${props => props.theme.eCashBlue};
+ }
+
+ @media (max-width: 768px) {
+ font-size: 14px;
+ }
+ }
+
+ svg {
+ stroke: ${props => props.theme.eCashBlue};
+ fill: ${props => props.theme.eCashBlue};
+ width: 25px;
+ height: 25px;
+ margin-right: 20px;
+ cursor: pointer;
+
+ :first-child:hover {
+ stroke: ${props => props.theme.eCashBlue};
+ fill: ${props => props.theme.eCashBlue};
+ }
+ :hover {
+ stroke: ${props => props.theme.settings.delete};
+ fill: ${props => props.theme.settings.delete};
+ }
+ }
+`;
+
+const AWRow = styled.div`
+ padding: 10px 0;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 6px;
+ h3 {
+ font-size: 16px;
+ display: inline-block;
+ color: ${props => props.theme.darkBlue};
+ margin: 0;
+ text-align: left;
+ font-weight: bold;
+ @media (max-width: 500px) {
+ font-size: 14px;
+ }
+ }
+ h4 {
+ font-size: 16px;
+ display: inline-block;
+ color: ${props => props.theme.eCashBlue} !important;
+ margin: 0;
+ text-align: right;
+ }
+ @media (max-width: 500px) {
+ flex-direction: column;
+ margin-bottom: 12px;
+ }
+`;
+
+const StyledConfigure = styled.div`
+ h2 {
+ color: ${props => props.theme.contrast};
+ font-size: 25px;
+ }
+ svg {
+ fill: ${props => props.theme.eCashBlue};
+ }
+ p {
+ color: ${props => props.theme.darkBlue};
+ }
+`;
+
+const StyledSpacer = styled.div`
+ height: 1px;
+ width: 100%;
+ background-color: ${props => props.theme.lightWhite};
+ margin: 60px 0 50px;
+`;
+
+const GeneralSettingsItem = styled.div`
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ .ant-switch svg {
+ fill: #717171;
+ }
+ .title {
+ color: ${props => props.theme.contrast};
+ }
+ .anticon {
+ color: ${props => props.theme.contrast};
+ }
+ .ant-switch {
+ background-color: #bdbdbd;
+ }
+ .ant-switch-checked {
+ background-color: ${props => props.theme.eCashBlue};
+ svg {
+ fill: ${props => props.theme.contrast};
+ }
+ }
+`;
+
+const Configure = () => {
+ const ContextValue = React.useContext(WalletContext);
+ const authentication = React.useContext(AuthenticationContext);
+ const { wallet, apiError } = ContextValue;
+
+ const {
+ addNewSavedWallet,
+ activateWallet,
+ renameWallet,
+ deleteWallet,
+ validateMnemonic,
+ getSavedWallets,
+ cashtabSettings,
+ changeCashtabSettings,
+ } = ContextValue;
+ const [savedWallets, setSavedWallets] = useState([]);
+ const [formData, setFormData] = useState({
+ dirty: true,
+ mnemonic: '',
+ });
+ const [showRenameWalletModal, setShowRenameWalletModal] = useState(false);
+ const [showDeleteWalletModal, setShowDeleteWalletModal] = useState(false);
+ const [walletToBeRenamed, setWalletToBeRenamed] = useState(null);
+ const [walletToBeDeleted, setWalletToBeDeleted] = useState(null);
+ const [newWalletName, setNewWalletName] = useState('');
+ const [
+ confirmationOfWalletToBeDeleted,
+ setConfirmationOfWalletToBeDeleted,
+ ] = useState('');
+ const [newWalletNameIsValid, setNewWalletNameIsValid] = useState(null);
+ const [walletDeleteValid, setWalletDeleteValid] = useState(null);
+ const [seedInput, openSeedInput] = useState(false);
+ const [showTranslationWarning, setShowTranslationWarning] = useState(false);
+
+ const showPopulatedDeleteWalletModal = walletInfo => {
+ setWalletToBeDeleted(walletInfo);
+ setShowDeleteWalletModal(true);
+ };
+
+ const showPopulatedRenameWalletModal = walletInfo => {
+ setWalletToBeRenamed(walletInfo);
+ setShowRenameWalletModal(true);
+ };
+ const cancelRenameWallet = () => {
+ // Delete form value
+ setNewWalletName('');
+ setShowRenameWalletModal(false);
+ };
+ const cancelDeleteWallet = () => {
+ setWalletToBeDeleted(null);
+ setConfirmationOfWalletToBeDeleted('');
+ setShowDeleteWalletModal(false);
+ };
+ const updateSavedWallets = async activeWallet => {
+ if (activeWallet) {
+ let savedWallets;
+ try {
+ savedWallets = await getSavedWallets(activeWallet);
+ setSavedWallets(savedWallets);
+ } catch (err) {
+ console.log(`Error in getSavedWallets()`);
+ console.log(err);
+ }
+ }
+ };
+
+ const [isValidMnemonic, setIsValidMnemonic] = useState(null);
+
+ useEffect(() => {
+ // Update savedWallets every time the active wallet changes
+ updateSavedWallets(wallet);
+ }, [wallet]);
+
+ useEffect(() => {
+ const detectedBrowserLang = navigator.language;
+ if (!detectedBrowserLang.includes('en-')) {
+ setShowTranslationWarning(true);
+ }
+ }, []);
+
+ // Need this function to ensure that savedWallets are updated on new wallet creation
+ const updateSavedWalletsOnCreate = async importMnemonic => {
+ // Event("Category", "Action", "Label")
+ // Track number of times a different wallet is activated
+ Event('Configure.js', 'Create Wallet', 'New');
+ const walletAdded = await addNewSavedWallet(importMnemonic);
+ if (!walletAdded) {
+ Modal.error({
+ title: 'This wallet already exists!',
+ content: 'Wallet not added',
+ });
+ } else {
+ Modal.success({
+ content: 'Wallet added to your saved wallets',
+ });
+ }
+ await updateSavedWallets(wallet);
+ };
+ // Same here
+ // TODO you need to lock UI here until this is complete
+ // Otherwise user may try to load an already-loading wallet, wreak havoc with indexedDB
+ const updateSavedWalletsOnLoad = async walletToActivate => {
+ // Event("Category", "Action", "Label")
+ // Track number of times a different wallet is activated
+ Event('Configure.js', 'Activate', '');
+ await activateWallet(walletToActivate);
+ };
+
+ async function submit() {
+ setFormData({
+ ...formData,
+ dirty: false,
+ });
+
+ // Exit if no user input
+ if (!formData.mnemonic) {
+ return;
+ }
+
+ // Exit if mnemonic is invalid
+ if (!isValidMnemonic) {
+ return;
+ }
+ // Event("Category", "Action", "Label")
+ // Track number of times a different wallet is activated
+ Event('Configure.js', 'Create Wallet', 'Imported');
+ updateSavedWalletsOnCreate(formData.mnemonic);
+ }
+
+ const handleChange = e => {
+ const { value, name } = e.target;
+
+ // Validate mnemonic on change
+ // Import button should be disabled unless mnemonic is valid
+ setIsValidMnemonic(validateMnemonic(value));
+
+ setFormData(p => ({ ...p, [name]: value }));
+ };
+
+ const changeWalletName = async () => {
+ if (newWalletName === '' || newWalletName.length > 24) {
+ setNewWalletNameIsValid(false);
+ return;
+ }
+ // Hide modal
+ setShowRenameWalletModal(false);
+ // Change wallet name
+ console.log(
+ `Changing wallet ${walletToBeRenamed.name} name to ${newWalletName}`,
+ );
+ const renameSuccess = await renameWallet(
+ walletToBeRenamed.name,
+ newWalletName,
+ );
+
+ if (renameSuccess) {
+ Modal.success({
+ content: `Wallet "${walletToBeRenamed.name}" renamed to "${newWalletName}"`,
+ });
+ } else {
+ Modal.error({
+ content: `Rename failed. All wallets must have a unique name.`,
+ });
+ }
+ await updateSavedWallets(wallet);
+ // Clear wallet name for form
+ setNewWalletName('');
+ };
+
+ const deleteSelectedWallet = async () => {
+ if (!walletDeleteValid && walletDeleteValid !== null) {
+ return;
+ }
+ if (
+ confirmationOfWalletToBeDeleted !==
+ `delete ${walletToBeDeleted.name}`
+ ) {
+ setWalletDeleteValid(false);
+ return;
+ }
+
+ // Hide modal
+ setShowDeleteWalletModal(false);
+ // Change wallet name
+ console.log(`Deleting wallet "${walletToBeDeleted.name}"`);
+ const walletDeletedSuccess = await deleteWallet(walletToBeDeleted);
+
+ if (walletDeletedSuccess) {
+ Modal.success({
+ content: `Wallet "${walletToBeDeleted.name}" successfully deleted`,
+ });
+ } else {
+ Modal.error({
+ content: `Error deleting ${walletToBeDeleted.name}.`,
+ });
+ }
+ await updateSavedWallets(wallet);
+ // Clear wallet delete confirmation from form
+ setConfirmationOfWalletToBeDeleted('');
+ };
+
+ const handleWalletNameInput = e => {
+ const { value } = e.target;
+ // validation
+ if (value && value.length && value.length < 24) {
+ setNewWalletNameIsValid(true);
+ } else {
+ setNewWalletNameIsValid(false);
+ }
+
+ setNewWalletName(value);
+ };
+
+ const handleWalletToDeleteInput = e => {
+ const { value } = e.target;
+
+ if (value && value === `delete ${walletToBeDeleted.name}`) {
+ setWalletDeleteValid(true);
+ } else {
+ setWalletDeleteValid(false);
+ }
+ setConfirmationOfWalletToBeDeleted(value);
+ };
+
+ const handleAppLockToggle = (checked, e) => {
+ if (checked) {
+ // if there is an existing credential, that means user has registered
+ // simply turn on the Authentication Required flag
+ if (authentication.credentialId) {
+ authentication.turnOnAuthentication();
+ } else {
+ // there is no existing credential, that means user has not registered
+ // user need to register
+ authentication.signUp();
+ }
+ } else {
+ authentication.turnOffAuthentication();
+ }
+ };
+
+ const handleSendModalToggle = checkedState => {
+ changeCashtabSettings('sendModal', checkedState);
+ };
+
+ return (
+
+
+ {walletToBeRenamed !== null && (
+ cancelRenameWallet()}
+ >
+
+
+
+
+ )}
+ {walletToBeDeleted !== null && (
+ cancelDeleteWallet()}
+ >
+
+
+
+
+ )}
+
+
+
+
+
+ {wallet && wallet.mnemonic
+ ? wallet.mnemonic
+ : ''}
+
+
+
+ )}
+
+
+ {apiError ? (
+ updateSavedWalletsOnCreate()}
+ >
+
+ openSeedInput(!seedInput)}
+ >
+
+ {seedInput && (
+ <>
+
+ Copy and paste your mnemonic seed phrase
+ below to import an existing wallet
+
+
+
+
+
+ )}
+
+ )}
+ {savedWallets && savedWallets.length > 0 && (
+ <>
+
+
+
+
+ {wallet.name}
+
+ Currently active
+
+
+ {savedWallets.map(sw => (
+
+
+
+ {sw.name}
+
+
+
+
+ [
+ {sw && sw.state
+ ? formatSavedBalance(
+ sw.state.balances
+ .totalBalance,
+ )
+ : 'N/A'}{' '}
+ XEC]
+
+
+
+
+ showPopulatedRenameWalletModal(
+ sw,
+ )
+ }
+ />
+
+ showPopulatedDeleteWalletModal(
+ sw,
+ )
+ }
+ />
+
+ updateSavedWalletsOnLoad(
+ sw,
+ )
+ }
+ >
+ Activate
+
+
+
+ ))}
+
+
+
+ )}
+
+
+
+
+ changeCashtabSettings('fiatCurrency', fiatCode)
+ }
+ />
+
+
+
+
+
+
+ {authentication ? (
+
+
+
+
+
+
+ Documentation
+
+ ]
+
+
+ );
+};
+
+export default Configure;
diff --git a/web/cashtab-v2/src/components/Configure/__tests__/Configure.test.js b/web/cashtab-v2/src/components/Configure/__tests__/Configure.test.js
new file mode 100644
--- /dev/null
+++ b/web/cashtab-v2/src/components/Configure/__tests__/Configure.test.js
@@ -0,0 +1,36 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import Configure from '../Configure';
+import { ThemeProvider } from 'styled-components';
+import { theme } from '@assets/styles/theme';
+let realUseContext;
+let useContextMock;
+beforeEach(() => {
+ realUseContext = React.useContext;
+ useContextMock = React.useContext = jest.fn();
+});
+afterEach(() => {
+ React.useContext = realUseContext;
+});
+
+test('Configure without a wallet', () => {
+ useContextMock.mockReturnValue({ wallet: undefined });
+ const component = renderer.create(
+
+ ,
+ );
+ let tree = component.toJSON();
+ expect(tree).toMatchSnapshot();
+});
+
+test('Configure with a wallet', () => {
+ useContextMock.mockReturnValue({ wallet: { mnemonic: 'test mnemonic' } });
+ const component = renderer.create(
+
+ ,
+ );
+ let tree = component.toJSON();
+ expect(tree).toMatchSnapshot();
+});
diff --git a/web/cashtab-v2/src/components/Configure/__tests__/__snapshots__/Configure.test.js.snap b/web/cashtab-v2/src/components/Configure/__tests__/__snapshots__/Configure.test.js.snap
new file mode 100644
--- /dev/null
+++ b/web/cashtab-v2/src/components/Configure/__tests__/__snapshots__/Configure.test.js.snap
@@ -0,0 +1,915 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP @generated
+
+exports[`Configure with a wallet 1`] = `
+
+
+
+
+
+
+
+ Backup your wallet
+
+
+
+
+
+
+
+
+
+ Your seed phrase is the only way to restore your wallet. Write it down. Keep it safe.
+
+
+
+
+
+
+
+
+
+
+ Click to reveal seed phrase
+
+
+
+
+
+
+
+
+
+ Manage Wallets
+
+
+
+
+
+
+ New Wallet
+
+
+
+
+
+
+ Import Wallet
+
+
+
+
+
+
+
+ Fiat Currency
+
+
+
+
+
+
+
+ US Dollar ($)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ General Settings
+
+
+
+
+
+
+
+
+ Send Confirmations
+
+
+
+
+
+
+
+
+
+
+
+
+ [
+
+ Documentation
+
+ ]
+
+
+
+
+
+
+
+
+ Backup your wallet
+
+
+
+
+
+
+
+
+
+ Your seed phrase is the only way to restore your wallet. Write it down. Keep it safe.
+
+
+
+
+
+
+
+
+
+ Manage Wallets
+
+
+
+
+
+
+ New Wallet
+
+
+
+
+
+
+ Import Wallet
+
+
+
+
+
+
+
+ Fiat Currency
+
+
+
+
+
+
+
+ US Dollar ($)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ General Settings
+
+
+
+
+
+
+
+
+ Send Confirmations
+
+
+
+
+
+
+
+
+
+
+
+
+ [
+
+ Documentation
+
+ ]
+
+
+
+ {apiError &&
+
+ setActiveTab('txHistory')}
+ >
+ Transactions
+
+ setActiveTab('tokens')}
+ >
+ eTokens
+
+
+
+
+
+ 🎉
+
+ Congratulations on your new wallet!{' '}
+
+ 🎉
+
+
+
+
+ Create eToken
+
+ {tokens && tokens.length > 0 ? (
+
+ Tokens sent to your {currency.tokenTicker} address
+ will appear here
+
+ )}
+
+
+
+ );
+};
+
+const Home = () => {
+ const ContextValue = React.useContext(WalletContext);
+ const { wallet, previousWallet, loading } = ContextValue;
+
+ return (
+ <>
+ {loading ? (
+
+ {tokens.map(token => (
+
+ );
+};
+
+TokenList.propTypes = {
+ tokens: PropTypes.array,
+};
+
+export default TokenList;
diff --git a/web/cashtab-v2/src/components/Home/TokenListItem.js b/web/cashtab-v2/src/components/Home/TokenListItem.js
new file mode 100644
--- /dev/null
+++ b/web/cashtab-v2/src/components/Home/TokenListItem.js
@@ -0,0 +1,56 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import TokenIcon from '@components/Tokens/TokenIcon';
+
+const TokenIconWrapper = styled.div`
+ margin-right: 10px;
+`;
+
+const TokenNameCtn = styled.div`
+ display: flex;
+ align-items: center;
+`;
+
+const Wrapper = styled.div`
+ display: flex;
+ align-items: center;
+ border-top: 1px solid rgba(255, 255, 255, 0.12);
+ color: ${props => props.theme.contrast};
+ padding: 10px 0;
+ justify-content: space-between;
+ h4 {
+ font-size: 16px;
+ color: ${props => props.theme.contrast};
+ margin: 0;
+ font-weight: bold;
+ }
+ :hover {
+ h4 {
+ color: ${props => props.theme.eCashPurple};
+ }
+ }
+`;
+
+const TokenListItem = ({ ticker, balance, tokenId }) => {
+ return (
+
+
+
+
+ {ticker}
+
+
+ {balance}
+
+ );
+};
+
+TokenListItem.propTypes = {
+ ticker: PropTypes.string,
+ balance: PropTypes.string,
+ tokenId: PropTypes.string,
+};
+
+export default TokenListItem;
diff --git a/web/cashtab-v2/src/components/Home/Tx.js b/web/cashtab-v2/src/components/Home/Tx.js
new file mode 100644
--- /dev/null
+++ b/web/cashtab-v2/src/components/Home/Tx.js
@@ -0,0 +1,707 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import PropTypes from 'prop-types';
+import styled, { css } from 'styled-components';
+import {
+ SendIcon,
+ ReceiveIcon,
+ GenesisIcon,
+ UnparsedIcon,
+} from '@components/Common/CustomIcons';
+import { currency } from '@components/Common/Ticker';
+import { fromLegacyDecimals } from '@utils/cashMethods';
+import { formatBalance, formatDate } from '@utils/formatting';
+import TokenIcon from '@components/Tokens/TokenIcon';
+import { Collapse } from 'antd';
+import { AntdContextCollapseWrapper } from '@components/Common/StyledCollapse';
+import { generalNotification } from '@components/Common/Notifications';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+import {
+ ThemedCopySolid,
+ ThemedLinkSolid,
+} from '@components/Common/CustomIcons';
+const TxIcon = styled.div`
+ svg {
+ width: 20px;
+ height: 20px;
+ }
+ height: 40px;
+ width: 40px;
+ border: 1px solid #fff;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 100px;
+`;
+
+const SentTx = styled(TxIcon)`
+ svg {
+ margin-right: -3px;
+ }
+ fill: ${props => props.theme.contrast};
+`;
+const ReceivedTx = styled(TxIcon)`
+ svg {
+ fill: ${props => props.theme.eCashBlue};
+ }
+ border-color: ${props => props.theme.eCashBlue};
+`;
+const GenesisTx = styled(TxIcon)`
+ border-color: ${props => props.theme.genesisGreen};
+ svg {
+ fill: ${props => props.theme.genesisGreen};
+ }
+`;
+const UnparsedTx = styled(TxIcon)`
+ color: ${props => props.theme.eCashBlue} !important;
+`;
+const DateType = styled.div`
+ text-align: left;
+ padding: 12px;
+ @media screen and (max-width: 500px) {
+ font-size: 0.8rem;
+ }
+`;
+
+const LeftTextCtn = styled.div`
+ text-align: left;
+ display: flex;
+ align-items: left;
+ flex-direction: column;
+ margin-left: 10px;
+ h3 {
+ color: ${props => props.theme.contrast};
+ font-size: 14px;
+ font-weight: 700;
+ margin: 0;
+ }
+ .genesis {
+ color: ${props => props.theme.genesisGreen};
+ }
+ .received {
+ color: ${props => props.theme.eCashBlue};
+ }
+ h4 {
+ font-size: 12px;
+ color: ${props => props.theme.lightWhite};
+ margin: 0;
+ }
+`;
+
+const RightTextCtn = styled.div`
+ text-align: right;
+ display: flex;
+ align-items: left;
+ flex-direction: column;
+ margin-left: 10px;
+ h3 {
+ color: ${props => props.theme.contrast};
+ font-size: 14px;
+ font-weight: 700;
+ margin: 0;
+ }
+ .genesis {
+ color: ${props => props.theme.genesisGreen};
+ }
+ .received {
+ color: ${props => props.theme.eCashBlue};
+ }
+ h4 {
+ font-size: 12px;
+ color: ${props => props.theme.lightWhite};
+ margin: 0;
+ }
+`;
+const OpReturnType = styled.div`
+ text-align: right;
+ width: 100%;
+ padding: 10px;
+ border-radius: 5px;
+ background: ${props => props.theme.sentMessage};
+ margin-top: 15px;
+ h4 {
+ color: ${props => props.theme.lightWhite};
+ margin: 0;
+ font-size: 12px;
+ display: inline-block;
+ }
+ p {
+ color: ${props => props.theme.contrast};
+ margin: 0;
+ font-size: 14px;
+ margin-bottom: 10px;
+ overflow-wrap: break-word;
+ }
+ a {
+ color: ${props => props.theme.contrast};
+ margin: 0;
+ font-size: 10px;
+ border: 1px solid ${props => props.theme.contrast};
+ border-radius: 5px;
+ padding: 2px 10px;
+ opacity: 0.6;
+ }
+ a:hover {
+ opacity: 1;
+ border-color: ${props => props.theme.eCashBlue};
+ color: ${props => props.theme.contrast};
+ background: ${props => props.theme.eCashBlue};
+ }
+ ${({ received, ...props }) =>
+ received &&
+ `
+ text-align: left;
+ background: ${props.theme.receivedMessage};
+ `}
+`;
+const SentLabel = styled.span`
+ font-weight: bold;
+ color: ${props => props.theme.secondary} !important;
+`;
+const ReceivedLabel = styled.span`
+ font-weight: bold;
+ color: ${props => props.theme.eCashBlue} !important;
+`;
+const GenesisLabel = styled.span`
+ font-weight: bold;
+ color: ${props => props.theme.genesisGreen} !important;
+`;
+const CashtabMessageLabel = styled.span`
+ text-align: left;
+ font-weight: bold;
+ color: ${props => props.theme.eCashBlue} !important;
+ white-space: nowrap;
+`;
+const EncryptionMessageLabel = styled.span`
+ font-weight: bold;
+ font-size: 12px;
+ color: ${props => props.theme.encryptionRed};
+ white-space: nowrap;
+`;
+const UnauthorizedDecryptionMessage = styled.span`
+ text-align: left;
+ color: ${props => props.theme.encryptionRed};
+ white-space: nowrap;
+ font-style: italic;
+`;
+const MessageLabel = styled.span`
+ text-align: left;
+ font-weight: bold;
+ color: ${props => props.theme.secondary} !important;
+ white-space: nowrap;
+`;
+const ReplyMessageLabel = styled.span`
+ color: ${props => props.theme.eCashBlue} !important;
+`;
+
+const TxInfo = styled.div`
+ text-align: right;
+ display: flex;
+ align-items: left;
+ flex-direction: column;
+ margin-left: 10px;
+ flex-grow: 2;
+ h3 {
+ color: ${props => props.theme.contrast};
+ font-size: 14px;
+ font-weight: 700;
+ margin: 0;
+ }
+ .genesis {
+ color: ${props => props.theme.genesisGreen};
+ }
+ .received {
+ color: ${props => props.theme.eCashBlue};
+ }
+ h4 {
+ font-size: 12px;
+ color: ${props => props.theme.lightWhite};
+ margin: 0;
+ }
+
+ @media screen and (max-width: 500px) {
+ font-size: 0.8rem;
+ }
+`;
+
+const TokenInfo = styled.div`
+ display: flex;
+ flex-grow: 1;
+ justify-content: flex-end;
+
+ color: ${props =>
+ props.outgoing ? props.theme.secondary : props.theme.eCashBlue};
+
+ @media screen and (max-width: 500px) {
+ font-size: 0.8rem;
+ grid-template-columns: 16px auto;
+ }
+`;
+const TxTokenIcon = styled.div`
+ img {
+ height: 24px;
+ width: 24px;
+ }
+ @media screen and (max-width: 500px) {
+ img {
+ height: 16px;
+ width: 16px;
+ }
+ }
+ grid-column-start: 1;
+ grid-column-end: span 1;
+ grid-row-start: 1;
+ grid-row-end: span 2;
+ align-self: center;
+`;
+const TokenTxAmt = styled.h3`
+ text-align: right;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+`;
+const TokenName = styled.h4`
+ text-align: right;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+`;
+
+const TxWrapper = styled.div`
+ display: flex;
+ align-items: center;
+ border-top: 1px solid rgba(255, 255, 255, 0.12);
+ color: ${props => props.theme.contrast};
+ padding: 10px 0;
+ flex-wrap: wrap;
+`;
+
+const Panel = Collapse.Panel;
+
+const DropdownIconWrapper = styled.div`
+ display: flex;
+ align-items: center;
+ gap: 4px;
+`;
+
+const TextLayer = styled.div`
+ font-size: 12px;
+ color: ${props => props.theme.contrast};
+`;
+
+const DropdownButton = styled.button`
+ display: flex;
+ justify-content: flex-end;
+ background-color: ${props => props.theme.walletBackground};
+ border: none;
+ cursor: pointer;
+ padding: 0;
+ &:hover {
+ div {
+ color: ${props => props.theme.eCashBlue}!important;
+ }
+ svg {
+ fill: ${props => props.theme.eCashBlue}!important;
+ }
+ }
+`;
+const PanelCtn = styled.div`
+ display: flex;
+ justify-content: flex-end;
+ right: 0;
+ gap: 8px;
+`;
+
+export const TxLink = styled.a`
+ color: ${props => props.theme.primary};
+`;
+
+const Tx = ({ data, fiatPrice, fiatCurrency }) => {
+ const txDate =
+ typeof data.blocktime === 'undefined'
+ ? formatDate()
+ : formatDate(data.blocktime, navigator.language);
+ // if data only includes height and txid, then the tx could not be parsed by cashtab
+ // render as such but keep link to block explorer
+ let unparsedTx = false;
+ if (!Object.keys(data).includes('outgoingTx')) {
+ unparsedTx = true;
+ }
+ return (
+ <>
+ {unparsedTx ? (
+
+
+
+
+
+ Unparsed
+
+ Open in Explorer
+
+ ) : (
+
+
+
+
+ {data.outgoingTx ? (
+ <>
+ {data.tokenTx &&
+ data.tokenInfo
+ .transactionType ===
+ 'GENESIS' ? (
+
+
+ ) : (
+
+
+ )}
+
+ ) : (
+
+
+ )}
+
+
+ {data.outgoingTx ? (
+ <>
+ {data.tokenTx &&
+ data.tokenInfo
+ .transactionType ===
+ 'GENESIS' ? (
+
+ Genesis
+
+ ) : (
+
+ Sent
+
+ )}
+
+ ) : (
+
+ Received
+
+ )}
+ {txDate}
+
+ {data.tokenTx ? (
+
+ {data.tokenTx &&
+ data.tokenInfo ? (
+ <>
+
+
+ {data.outgoingTx ? (
+
+ {data.tokenInfo
+ .transactionType ===
+ 'GENESIS' ? (
+ <>
+
+ +{' '}
+ {data.tokenInfo.qtyReceived.toString()}
+
+ {
+ data
+ .tokenInfo
+ .tokenTicker
+ }
+
+
+ {
+ data
+ .tokenInfo
+ .tokenName
+ }
+
+
+ ) : (
+ <>
+
+ -{' '}
+ {data.tokenInfo.qtySent.toString()}
+
+ {
+ data
+ .tokenInfo
+ .tokenTicker
+ }
+
+
+ {
+ data
+ .tokenInfo
+ .tokenName
+ }
+
+
+ )}
+
+ ) : (
+
+
+ +{' '}
+ {data.tokenInfo.qtyReceived.toString()}
+
+ {
+ data
+ .tokenInfo
+ .tokenTicker
+ }
+
+
+ {
+ data
+ .tokenInfo
+ .tokenName
+ }
+
+
+ )}
+
+ ) : (
+ Token Tx
+ )}
+
+ ) : (
+ <>
+
+ {data.outgoingTx ? (
+ <>
+
+ -
+ {formatBalance(
+ fromLegacyDecimals(
+ data.amountSent,
+ ),
+ )}{' '}
+ {
+ currency.ticker
+ }
+
+ {fiatPrice !==
+ null &&
+ !isNaN(
+ data.amountSent,
+ ) && (
+
+ -
+ {
+ currency
+ .fiatCurrencies[
+ fiatCurrency
+ ]
+ .symbol
+ }
+ {(
+ fromLegacyDecimals(
+ data.amountSent,
+ ) *
+ fiatPrice
+ ).toFixed(
+ 2,
+ )}{' '}
+ {
+ currency
+ .fiatCurrencies
+ .fiatCurrency
+ }
+
+ )}
+
+ ) : (
+ <>
+
+ +
+ {formatBalance(
+ fromLegacyDecimals(
+ data.amountReceived,
+ ),
+ )}{' '}
+ {
+ currency.ticker
+ }
+
+ {fiatPrice !==
+ null &&
+ !isNaN(
+ data.amountReceived,
+ ) && (
+
+ +
+ {
+ currency
+ .fiatCurrencies[
+ fiatCurrency
+ ]
+ .symbol
+ }
+ {(
+ fromLegacyDecimals(
+ data.amountReceived,
+ ) *
+ fiatPrice
+ ).toFixed(
+ 2,
+ )}{' '}
+ {
+ currency
+ .fiatCurrencies
+ .fiatCurrency
+ }
+
+ )}
+
+ )}
+
+
+ )}
+ {data.opReturnMessage && (
+ <>
+
+ {data.isCashtabMessage ? (
+ Cashtab Message
+ ) : (
+
+ External Message
+
+ )}
+ {data.isEncryptedMessage ? (
+
+ - Encrypted
+
+ ) : (
+ ''
+ )}
+
+ {
+ data.opReturnMessage
+ }
+
+ ) : (
+ ''
+ )}
+ {/*encrypted and wallet is authorized to view OP_RETURN Message*/}
+ {data.opReturnMessage &&
+ data.isEncryptedMessage &&
+ data.decryptionSuccess ? (
+
+ {
+ data.opReturnMessage
+ }
+
+ ) : (
+ ''
+ )}
+ {/*encrypted but wallet is not authorized to view OP_RETURN Message*/}
+ {data.opReturnMessage &&
+ data.isEncryptedMessage &&
+ !data.decryptionSuccess ? (
+
+ {
+ data.opReturnMessage
+ }
+
+ ) : (
+ ''
+ )}
+ {!data.outgoingTx &&
+ data.replyAddress ? (
+
+
+ )}
+
+
+ }
+ >
+
+
+ {
+ generalNotification(
+ data.txid,
+ 'Tx ID copied to clipboard',
+ );
+ }}
+ >
+
+ Copy Tx ID
+
+
+
+
+
+
+
+
+ View on be.cash
+
+
+
+
+
+
+
+
+
+ )}
+
+ );
+};
+
+Tx.propTypes = {
+ data: PropTypes.object,
+ fiatPrice: PropTypes.number,
+ fiatCurrency: PropTypes.string,
+};
+
+export default Tx;
diff --git a/web/cashtab-v2/src/components/Home/TxHistory.js b/web/cashtab-v2/src/components/Home/TxHistory.js
new file mode 100644
--- /dev/null
+++ b/web/cashtab-v2/src/components/Home/TxHistory.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import Tx from './Tx';
+
+const TxHistory = ({ txs, fiatPrice, fiatCurrency }) => {
+ return (
+
+ {txs.map(tx => (
+
+ );
+};
+
+TxHistory.propTypes = {
+ txs: PropTypes.array,
+ fiatPrice: PropTypes.number,
+ fiatCurrency: PropTypes.string,
+};
+
+export default TxHistory;
diff --git a/web/cashtab-v2/src/components/Home/__mocks__/walletAndBalancesMock.js b/web/cashtab-v2/src/components/Home/__mocks__/walletAndBalancesMock.js
new file mode 100644
--- /dev/null
+++ b/web/cashtab-v2/src/components/Home/__mocks__/walletAndBalancesMock.js
@@ -0,0 +1,268 @@
+// @generated
+
+export const walletWithBalancesMock = {
+ wallet: {
+ name: 'MigrationTestAlpha',
+ Path245: {
+ cashAddress:
+ 'bitcoincash:qztqe8k4v8ckn8cvfxt5659nhd7dcyvxy54hkry298',
+ slpAddress:
+ 'simpleledger:qztqe8k4v8ckn8cvfxt5659nhd7dcyvxy5evac32me',
+ fundingWif: 'KwgNkyijAaxFr5XQdnaYyNMXVSZobgHzSoKKfWiC3Q7Xr4n7iYMG',
+ fundingAddress:
+ 'simpleledger:qztqe8k4v8ckn8cvfxt5659nhd7dcyvxy5evac32me',
+ legacyAddress: '1EgPUfBgU7ekho3EjtGze87dRADnUE8ojP',
+ },
+ Path145: {
+ cashAddress:
+ 'bitcoincash:qq47pcxfn8n7w7jy86njd7pvgsv39l9f9v0lgx569z',
+ slpAddress:
+ 'simpleledger:qq47pcxfn8n7w7jy86njd7pvgsv39l9f9vryrap6mu',
+ fundingWif: 'L2xvTe6CdNxroR6pbdpGWNjAa55AZX5Wm59W5TXMuH31ihNJdDjt',
+ fundingAddress:
+ 'simpleledger:qq47pcxfn8n7w7jy86njd7pvgsv39l9f9vryrap6mu',
+ legacyAddress: '1511T3ynXKgCwXhFijCUWKuTfqbPxFV1AF',
+ },
+ Path1899: {
+ cashAddress:
+ 'bitcoincash:qzagy47mvh6qxkvcn3acjnz73rkhkc6y7cptzgcqy6',
+ slpAddress:
+ 'simpleledger:qzagy47mvh6qxkvcn3acjnz73rkhkc6y7cdsfndq6y',
+ fundingWif: 'Kx4FiBMvKK1iXjFk5QTaAK6E4mDGPjmwDZ2HDKGUZpE4gCXMaPe9',
+ fundingAddress:
+ 'simpleledger:qzagy47mvh6qxkvcn3acjnz73rkhkc6y7cdsfndq6y',
+ legacyAddress: '1J1Aq5tAAYxZgSDRo8soKM2Rb41z3xrYpm',
+ },
+ },
+ balances: {
+ totalBalanceInSatoshis: 6047469,
+ totalBalance: 0.06047469,
+ },
+ loading: false,
+};
+
+export const walletWithoutBalancesMock = {
+ wallet: {
+ name: 'MigrationTestAlpha',
+ Path245: {
+ cashAddress:
+ 'bitcoincash:qztqe8k4v8ckn8cvfxt5659nhd7dcyvxy54hkry298',
+ slpAddress:
+ 'simpleledger:qztqe8k4v8ckn8cvfxt5659nhd7dcyvxy5evac32me',
+ fundingWif: 'KwgNkyijAaxFr5XQdnaYyNMXVSZobgHzSoKKfWiC3Q7Xr4n7iYMG',
+ fundingAddress:
+ 'simpleledger:qztqe8k4v8ckn8cvfxt5659nhd7dcyvxy5evac32me',
+ legacyAddress: '1EgPUfBgU7ekho3EjtGze87dRADnUE8ojP',
+ },
+ Path145: {
+ cashAddress:
+ 'bitcoincash:qq47pcxfn8n7w7jy86njd7pvgsv39l9f9v0lgx569z',
+ slpAddress:
+ 'simpleledger:qq47pcxfn8n7w7jy86njd7pvgsv39l9f9vryrap6mu',
+ fundingWif: 'L2xvTe6CdNxroR6pbdpGWNjAa55AZX5Wm59W5TXMuH31ihNJdDjt',
+ fundingAddress:
+ 'simpleledger:qq47pcxfn8n7w7jy86njd7pvgsv39l9f9vryrap6mu',
+ legacyAddress: '1511T3ynXKgCwXhFijCUWKuTfqbPxFV1AF',
+ },
+ Path1899: {
+ cashAddress:
+ 'bitcoincash:qzagy47mvh6qxkvcn3acjnz73rkhkc6y7cptzgcqy6',
+ slpAddress:
+ 'simpleledger:qzagy47mvh6qxkvcn3acjnz73rkhkc6y7cdsfndq6y',
+ fundingWif: 'Kx4FiBMvKK1iXjFk5QTaAK6E4mDGPjmwDZ2HDKGUZpE4gCXMaPe9',
+ fundingAddress:
+ 'simpleledger:qzagy47mvh6qxkvcn3acjnz73rkhkc6y7cdsfndq6y',
+ legacyAddress: '1J1Aq5tAAYxZgSDRo8soKM2Rb41z3xrYpm',
+ },
+ },
+ tokens: [],
+ balances: {
+ totalBalance: 0,
+ },
+ loading: false,
+};
+
+export const walletWithBalancesAndTokens = {
+ wallet: {
+ name: 'MigrationTestAlpha',
+ Path245: {
+ cashAddress:
+ 'bitcoincash:qztqe8k4v8ckn8cvfxt5659nhd7dcyvxy54hkry298',
+ slpAddress:
+ 'simpleledger:qztqe8k4v8ckn8cvfxt5659nhd7dcyvxy5evac32me',
+ fundingWif: 'KwgNkyijAaxFr5XQdnaYyNMXVSZobgHzSoKKfWiC3Q7Xr4n7iYMG',
+ fundingAddress:
+ 'simpleledger:qztqe8k4v8ckn8cvfxt5659nhd7dcyvxy5evac32me',
+ legacyAddress: '1EgPUfBgU7ekho3EjtGze87dRADnUE8ojP',
+ },
+ Path145: {
+ cashAddress:
+ 'bitcoincash:qq47pcxfn8n7w7jy86njd7pvgsv39l9f9v0lgx569z',
+ slpAddress:
+ 'simpleledger:qq47pcxfn8n7w7jy86njd7pvgsv39l9f9vryrap6mu',
+ fundingWif: 'L2xvTe6CdNxroR6pbdpGWNjAa55AZX5Wm59W5TXMuH31ihNJdDjt',
+ fundingAddress:
+ 'simpleledger:qq47pcxfn8n7w7jy86njd7pvgsv39l9f9vryrap6mu',
+ legacyAddress: '1511T3ynXKgCwXhFijCUWKuTfqbPxFV1AF',
+ },
+ Path1899: {
+ cashAddress:
+ 'bitcoincash:qzagy47mvh6qxkvcn3acjnz73rkhkc6y7cptzgcqy6',
+ slpAddress:
+ 'simpleledger:qzagy47mvh6qxkvcn3acjnz73rkhkc6y7cdsfndq6y',
+ fundingWif: 'Kx4FiBMvKK1iXjFk5QTaAK6E4mDGPjmwDZ2HDKGUZpE4gCXMaPe9',
+ fundingAddress:
+ 'simpleledger:qzagy47mvh6qxkvcn3acjnz73rkhkc6y7cdsfndq6y',
+ legacyAddress: '1J1Aq5tAAYxZgSDRo8soKM2Rb41z3xrYpm',
+ },
+ },
+ balances: {
+ totalBalanceInSatoshis: 6047469,
+ totalBalance: 0.06047469,
+ },
+ tokens: [
+ {
+ info: {
+ height: 666987,
+ tx_hash:
+ 'e7d554c317db71fd5b50fcf0b2cb4cbdce54a09f1732cfaade0820659318e30a',
+ tx_pos: 2,
+ value: 546,
+ satoshis: 546,
+ txid: 'e7d554c317db71fd5b50fcf0b2cb4cbdce54a09f1732cfaade0820659318e30a',
+ vout: 2,
+ utxoType: 'token',
+ transactionType: 'send',
+ tokenId:
+ 'bd1acc4c986de57af8d6d2a64aecad8c30ee80f37ae9d066d758923732ddc9ba',
+ tokenTicker: 'TBS',
+ tokenName: 'TestBits',
+ tokenDocumentUrl: 'https://thecryptoguy.com/',
+ tokenDocumentHash: '',
+ decimals: 9,
+ tokenType: 1,
+ tokenQty: '6.001',
+ isValid: true,
+ address:
+ 'bitcoincash:qztqe8k4v8ckn8cvfxt5659nhd7dcyvxy54hkry298',
+ },
+ tokenId:
+ 'bd1acc4c986de57af8d6d2a64aecad8c30ee80f37ae9d066d758923732ddc9ba',
+ balance: '6.001',
+ hasBaton: false,
+ },
+ ],
+ loading: false,
+};
+
+export const walletWithBalancesAndTokensWithCorrectState = {
+ wallet: {
+ name: 'MigrationTestAlpha',
+ Path245: {
+ cashAddress:
+ 'bitcoincash:qztqe8k4v8ckn8cvfxt5659nhd7dcyvxy54hkry298',
+ slpAddress:
+ 'simpleledger:qztqe8k4v8ckn8cvfxt5659nhd7dcyvxy5evac32me',
+ fundingWif: 'KwgNkyijAaxFr5XQdnaYyNMXVSZobgHzSoKKfWiC3Q7Xr4n7iYMG',
+ fundingAddress:
+ 'simpleledger:qztqe8k4v8ckn8cvfxt5659nhd7dcyvxy5evac32me',
+ legacyAddress: '1EgPUfBgU7ekho3EjtGze87dRADnUE8ojP',
+ },
+ Path145: {
+ cashAddress:
+ 'bitcoincash:qq47pcxfn8n7w7jy86njd7pvgsv39l9f9v0lgx569z',
+ slpAddress:
+ 'simpleledger:qq47pcxfn8n7w7jy86njd7pvgsv39l9f9vryrap6mu',
+ fundingWif: 'L2xvTe6CdNxroR6pbdpGWNjAa55AZX5Wm59W5TXMuH31ihNJdDjt',
+ fundingAddress:
+ 'simpleledger:qq47pcxfn8n7w7jy86njd7pvgsv39l9f9vryrap6mu',
+ legacyAddress: '1511T3ynXKgCwXhFijCUWKuTfqbPxFV1AF',
+ },
+ Path1899: {
+ cashAddress:
+ 'bitcoincash:qzagy47mvh6qxkvcn3acjnz73rkhkc6y7cptzgcqy6',
+ slpAddress:
+ 'simpleledger:qzagy47mvh6qxkvcn3acjnz73rkhkc6y7cdsfndq6y',
+ fundingWif: 'Kx4FiBMvKK1iXjFk5QTaAK6E4mDGPjmwDZ2HDKGUZpE4gCXMaPe9',
+ fundingAddress:
+ 'simpleledger:qzagy47mvh6qxkvcn3acjnz73rkhkc6y7cdsfndq6y',
+ legacyAddress: '1J1Aq5tAAYxZgSDRo8soKM2Rb41z3xrYpm',
+ },
+ state: {
+ balances: {
+ totalBalanceInSatoshis: 6047469,
+ totalBalance: 0.06047469,
+ },
+ tokens: [
+ {
+ info: {
+ height: 666987,
+ tx_hash:
+ 'e7d554c317db71fd5b50fcf0b2cb4cbdce54a09f1732cfaade0820659318e30a',
+ tx_pos: 2,
+ value: 546,
+ satoshis: 546,
+ txid: 'e7d554c317db71fd5b50fcf0b2cb4cbdce54a09f1732cfaade0820659318e30a',
+ vout: 2,
+ utxoType: 'token',
+ transactionType: 'send',
+ tokenId:
+ 'bd1acc4c986de57af8d6d2a64aecad8c30ee80f37ae9d066d758923732ddc9ba',
+ tokenTicker: 'TBS',
+ tokenName: 'TestBits',
+ tokenDocumentUrl: 'https://thecryptoguy.com/',
+ tokenDocumentHash: '',
+ decimals: 9,
+ tokenType: 1,
+ tokenQty: '6.001',
+ isValid: true,
+ address:
+ 'bitcoincash:qztqe8k4v8ckn8cvfxt5659nhd7dcyvxy54hkry298',
+ },
+ tokenId:
+ 'bd1acc4c986de57af8d6d2a64aecad8c30ee80f37ae9d066d758923732ddc9ba',
+ balance: '6.001',
+ hasBaton: false,
+ },
+ ],
+ parsedTxHistory: [],
+ },
+ },
+ balances: {
+ totalBalanceInSatoshis: 6047469,
+ totalBalance: 0.06047469,
+ },
+ tokens: [
+ {
+ info: {
+ height: 666987,
+ tx_hash:
+ 'e7d554c317db71fd5b50fcf0b2cb4cbdce54a09f1732cfaade0820659318e30a',
+ tx_pos: 2,
+ value: 546,
+ satoshis: 546,
+ txid: 'e7d554c317db71fd5b50fcf0b2cb4cbdce54a09f1732cfaade0820659318e30a',
+ vout: 2,
+ utxoType: 'token',
+ transactionType: 'send',
+ tokenId:
+ 'bd1acc4c986de57af8d6d2a64aecad8c30ee80f37ae9d066d758923732ddc9ba',
+ tokenTicker: 'TBS',
+ tokenName: 'TestBits',
+ tokenDocumentUrl: 'https://thecryptoguy.com/',
+ tokenDocumentHash: '',
+ decimals: 9,
+ tokenType: 1,
+ tokenQty: '6.001',
+ isValid: true,
+ address:
+ 'bitcoincash:qztqe8k4v8ckn8cvfxt5659nhd7dcyvxy54hkry298',
+ },
+ tokenId:
+ 'bd1acc4c986de57af8d6d2a64aecad8c30ee80f37ae9d066d758923732ddc9ba',
+ balance: '6.001',
+ hasBaton: false,
+ },
+ ],
+ loading: false,
+};
diff --git a/web/cashtab-v2/src/components/Home/__tests__/Home.test.js b/web/cashtab-v2/src/components/Home/__tests__/Home.test.js
new file mode 100644
--- /dev/null
+++ b/web/cashtab-v2/src/components/Home/__tests__/Home.test.js
@@ -0,0 +1,92 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { ThemeProvider } from 'styled-components';
+import { theme } from '@assets/styles/theme';
+import Home from '../Home';
+import {
+ walletWithBalancesAndTokens,
+ walletWithBalancesMock,
+ walletWithoutBalancesMock,
+ walletWithBalancesAndTokensWithCorrectState,
+} from '../__mocks__/walletAndBalancesMock';
+import { BrowserRouter as Router } from 'react-router-dom';
+
+let realUseContext;
+let useContextMock;
+
+beforeEach(() => {
+ realUseContext = React.useContext;
+ useContextMock = React.useContext = jest.fn();
+});
+
+afterEach(() => {
+ React.useContext = realUseContext;
+});
+
+test('Wallet without BCH balance', () => {
+ useContextMock.mockReturnValue(walletWithoutBalancesMock);
+ const component = renderer.create(
+
+
+
+ ,
+ );
+ let tree = component.toJSON();
+ expect(tree).toMatchSnapshot();
+});
+
+test('Wallet with BCH balances', () => {
+ useContextMock.mockReturnValue(walletWithBalancesMock);
+ const component = renderer.create(
+
+
+
+ ,
+ );
+ let tree = component.toJSON();
+ expect(tree).toMatchSnapshot();
+});
+
+test('Wallet with BCH balances and tokens', () => {
+ useContextMock.mockReturnValue(walletWithBalancesAndTokens);
+ const component = renderer.create(
+
+
+
+ ,
+ );
+ let tree = component.toJSON();
+ expect(tree).toMatchSnapshot();
+});
+
+test('Wallet with BCH balances and tokens and state field', () => {
+ useContextMock.mockReturnValue(walletWithBalancesAndTokensWithCorrectState);
+ const component = renderer.create(
+
+
+
+ ,
+ );
+ let tree = component.toJSON();
+ expect(tree).toMatchSnapshot();
+});
+
+test('Without wallet defined', () => {
+ useContextMock.mockReturnValue({
+ wallet: {},
+ balances: { totalBalance: 0 },
+ });
+ const component = renderer.create(
+
+
+
+ ,
+ );
+ let tree = component.toJSON();
+ expect(tree).toMatchSnapshot();
+});
diff --git a/web/cashtab-v2/src/components/Home/__tests__/__snapshots__/Home.test.js.snap b/web/cashtab-v2/src/components/Home/__tests__/__snapshots__/Home.test.js.snap
new file mode 100644
--- /dev/null
+++ b/web/cashtab-v2/src/components/Home/__tests__/__snapshots__/Home.test.js.snap
@@ -0,0 +1,449 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP @generated
+
+exports[`Wallet with BCH balances 1`] = `
+Array [
+
+
+ MigrationTestAlpha
+
+
+ 0
+
+ XEC
+
+
+
+
+ Transactions
+
+
+ eTokens
+
+
+
+
+
+ 🎉
+
+ Congratulations on your new wallet!
+
+
+ 🎉
+
+
+ Start using the wallet immediately to receive
+
+ XEC
+ payments, or load it up with
+
+ XEC
+ to send to others
+
+
+
+
+ MigrationTestAlpha
+
+
+ 0
+
+ XEC
+
+
+
+
+ Transactions
+
+
+ eTokens
+
+
+
+
+
+ 🎉
+
+ Congratulations on your new wallet!
+
+
+ 🎉
+
+
+ Start using the wallet immediately to receive
+
+ XEC
+ payments, or load it up with
+
+ XEC
+ to send to others
+
+
+
+
+ MigrationTestAlpha
+
+
+ 0.06
+
+ XEC
+
+
+
+
+ Transactions
+
+
+ eTokens
+
+
+
+
+
+ 🎉
+
+ Congratulations on your new wallet!
+
+
+ 🎉
+
+
+ Start using the wallet immediately to receive
+
+ XEC
+ payments, or load it up with
+
+ XEC
+ to send to others
+
+
+
+
+ MigrationTestAlpha
+
+
+ 0
+
+ XEC
+
+
+
+
+ Transactions
+
+
+ eTokens
+
+
+
+
+
+ 🎉
+
+ Congratulations on your new wallet!
+
+
+ 🎉
+
+
+ Start using the wallet immediately to receive
+
+ XEC
+ payments, or load it up with
+
+ XEC
+ to send to others
+
+
+
+ Page not found
+
+
+);
+
+export default NotFound;
diff --git a/web/cashtab-v2/src/components/OnBoarding/OnBoarding.js b/web/cashtab-v2/src/components/OnBoarding/OnBoarding.js
new file mode 100644
--- /dev/null
+++ b/web/cashtab-v2/src/components/OnBoarding/OnBoarding.js
@@ -0,0 +1,168 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { WalletContext } from '@utils/context';
+import { Input, Form, Modal } from 'antd';
+import { AntdFormWrapper } from '@components/Common/EnhancedInputs';
+import {
+ ExclamationCircleOutlined,
+ PlusSquareOutlined,
+ ImportOutlined,
+ LockOutlined,
+} from '@ant-design/icons';
+import PrimaryButton, {
+ SecondaryButton,
+ SmartButton,
+} from '@components/Common/PrimaryButton';
+import { currency } from '@components/Common/Ticker.js';
+import { Event } from '@utils/GoogleAnalytics';
+
+export const WelcomeCtn = styled.div`
+ margin-top: 20px;
+ padding: 0px 30px;
+ color: ${props => props.theme.contrast};
+ h2 {
+ color: ${props => props.theme.contrast};
+ }
+`;
+
+export const WelcomeText = styled.p`
+ width: 100%;
+ font-size: 16px;
+ margin-bottom: 60px;
+ text-align: left;
+`;
+
+export const WelcomeLink = styled.a`
+ text-decoration: underline;
+ color: ${props => props.theme.eCashBlue};
+ :hover {
+ color: ${props => props.theme.eCashPurple} !important;
+ text-decoration: underline !important;
+ }
+`;
+
+const OnBoarding = () => {
+ const ContextValue = React.useContext(WalletContext);
+ const { createWallet, validateMnemonic } = ContextValue;
+ const [formData, setFormData] = useState({
+ dirty: true,
+ mnemonic: '',
+ });
+
+ const [seedInput, openSeedInput] = useState(false);
+ const [isValidMnemonic, setIsValidMnemonic] = useState(false);
+ const { confirm } = Modal;
+
+ async function submit() {
+ setFormData({
+ ...formData,
+ dirty: false,
+ });
+
+ if (!formData.mnemonic) {
+ return;
+ }
+ // Event("Category", "Action", "Label")
+ // Track number of created wallets from onboarding
+ Event('Onboarding.js', 'Create Wallet', 'Imported');
+ createWallet(formData.mnemonic);
+ }
+
+ const handleChange = e => {
+ const { value, name } = e.target;
+
+ // Validate mnemonic on change
+ // Import button should be disabled unless mnemonic is valid
+ setIsValidMnemonic(validateMnemonic(value));
+
+ setFormData(p => ({ ...p, [name]: value }));
+ };
+
+ function showBackupConfirmModal() {
+ confirm({
+ title: "Don't forget to back up your wallet",
+ icon:
+ Welcome to Cashtab!
+
+ Cashtab is an{' '}
+
+ open source,
+ {' '}
+ non-custodial web wallet for {currency.name}.
+
+ Check out the Cashtab documentation.
+
+
+
+ showBackupConfirmModal()}>
+
+
+ openSeedInput(!seedInput)}>
+
+ {seedInput && (
+
+
+
+ )}
+
+ );
+};
+
+export default OnBoarding;
diff --git a/web/cashtab-v2/src/components/Receive/Receive.js b/web/cashtab-v2/src/components/Receive/Receive.js
new file mode 100644
--- /dev/null
+++ b/web/cashtab-v2/src/components/Receive/Receive.js
@@ -0,0 +1,137 @@
+import React from 'react';
+import styled from 'styled-components';
+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';
+
+export const ReceiveCtn = styled.div`
+ width: 100%;
+ margin-top: 100px;
+ h2 {
+ color: ${props => props.theme.contrast};
+ margin: 0 0 20px;
+ }
+`;
+
+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 WalletInfo = () => {
+ const ContextValue = React.useContext(WalletContext);
+ const { wallet } = ContextValue;
+ const [isCashAddress, setIsCashAddress] = React.useState(true);
+
+ const handleChangeAddress = () => {
+ setIsCashAddress(!isCashAddress);
+ };
+
+ return (
+
+ 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 } = ContextValue;
+
+ return (
+ <>
+ {loading ? (
+
+
+
+ ,
+ );
+ let tree = component.toJSON();
+ expect(tree).toMatchSnapshot();
+});
+
+test('Wallet with BCH balances', () => {
+ useContextMock.mockReturnValue(walletWithBalancesMock);
+ const component = renderer.create(
+
+
+
+ ,
+ );
+ let tree = component.toJSON();
+ expect(tree).toMatchSnapshot();
+});
+
+test('Wallet with BCH balances and tokens', () => {
+ useContextMock.mockReturnValue(walletWithBalancesAndTokens);
+ const component = renderer.create(
+
+
+
+ ,
+ );
+ let tree = component.toJSON();
+ expect(tree).toMatchSnapshot();
+});
+
+test('Wallet with BCH balances and tokens and state field', () => {
+ useContextMock.mockReturnValue(walletWithBalancesAndTokensWithCorrectState);
+ const component = renderer.create(
+
+
+
+ ,
+ );
+ let tree = component.toJSON();
+ expect(tree).toMatchSnapshot();
+});
+
+test('Without wallet defined', () => {
+ useContextMock.mockReturnValue({
+ wallet: {},
+ balances: { totalBalance: 0 },
+ loading: false,
+ });
+ const component = renderer.create(
+
+
+
+ ,
+ );
+ let tree = component.toJSON();
+ expect(tree).toMatchSnapshot();
+});
diff --git a/web/cashtab-v2/src/components/Receive/__tests__/__snapshots__/Receive.test.js.snap b/web/cashtab-v2/src/components/Receive/__tests__/__snapshots__/Receive.test.js.snap
new file mode 100644
--- /dev/null
+++ b/web/cashtab-v2/src/components/Receive/__tests__/__snapshots__/Receive.test.js.snap
@@ -0,0 +1,534 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP @generated
+
+exports[`Wallet with BCH balances 1`] = `
+
+
+ Receive
+ XEC
+
+
+
+ Copied
+
+ ecash:qzagy47mvh6qxkvcn3acjnz73rkhkc6y7ccxkrr6zd
+
+
+
+
+
+
+ ecash:
+
+
+ qzagy47m
+
+ vh6qxkvcn3acjnz73rkhkc6y7c
+
+ cxkrr6zd
+
+
+
+
+
+
+ Receive
+ XEC
+
+
+
+ Copied
+
+ ecash:qzagy47mvh6qxkvcn3acjnz73rkhkc6y7ccxkrr6zd
+
+
+
+
+
+
+ ecash:
+
+
+ qzagy47m
+
+ vh6qxkvcn3acjnz73rkhkc6y7c
+
+ cxkrr6zd
+
+
+
+
+
+
+ Receive
+ XEC
+
+
+
+ Copied
+
+ ecash:qzagy47mvh6qxkvcn3acjnz73rkhkc6y7ccxkrr6zd
+
+
+
+
+
+
+ ecash:
+
+
+ qzagy47m
+
+ vh6qxkvcn3acjnz73rkhkc6y7c
+
+ cxkrr6zd
+
+
+
+
+
+
+ Receive
+ XEC
+
+
+
+ Copied
+
+ ecash:qzagy47mvh6qxkvcn3acjnz73rkhkc6y7ccxkrr6zd
+
+
+
+
+
+
+ ecash:
+
+
+ qzagy47m
+
+ vh6qxkvcn3acjnz73rkhkc6y7c
+
+ cxkrr6zd
+
+
+
+
+