diff --git a/web/cashtab-v2/extension/src/components/App.js b/web/cashtab-v2/extension/src/components/App.js
index 18aaf7362..225f6dd21 100644
--- a/web/cashtab-v2/extension/src/components/App.js
+++ b/web/cashtab-v2/extension/src/components/App.js
@@ -1,358 +1,363 @@
 import React, { useState } from 'react';
 import 'antd/dist/antd.less';
+import PropTypes from 'prop-types';
 import { Spin } from 'antd';
 import {
     CashLoadingIcon,
     HomeIcon,
     SendIcon,
     ReceiveIcon,
     SettingsIcon,
     AirdropIcon,
 } from 'components/Common/CustomIcons';
 import '../index.css';
 import styled, { ThemeProvider, createGlobalStyle } from 'styled-components';
 import { theme } from 'assets/styles/theme';
 import Home from 'components/Home/Home';
 import Receive from 'components/Receive/Receive';
 import Tokens from 'components/Tokens/Tokens';
 import Send from 'components/Send/Send';
 import SendToken from 'components/Send/SendToken';
 import Airdrop from 'components/Airdrop/Airdrop';
 import Configure from 'components/Configure/Configure';
 import NotFound from 'components/NotFound';
 import CashTab from 'assets/cashtab_xec.png';
 import './App.css';
 import { WalletContext } from 'utils/context';
 import { isValidStoredWallet } from 'utils/cashMethods';
 import {
     Route,
     Redirect,
     Switch,
     useLocation,
     useHistory,
 } from 'react-router-dom';
 // Extension-only import used for open in new tab link
 import PopOut from 'assets/popout.svg';
 
 const GlobalStyle = createGlobalStyle`    
     *::placeholder {
         color: ${props => props.theme.forms.placeholder} !important;
     }
     *::selection {
     background: ${props => props.theme.eCashBlue} !important;
     }
     .ant-modal-content, .ant-modal-header, .ant-modal-title {
         background-color: ${props => props.theme.modal.background} !important;
         color: ${props => props.theme.modal.color} !important;
     }
     .ant-modal-content svg {
         fill: ${props => props.theme.modal.color};
     }   
     .ant-modal-footer button {
         background-color: ${props =>
             props.theme.modal.buttonBackground} !important;
         color: ${props => props.theme.modal.color} !important;
         border-color: ${props => props.theme.modal.border} !important;
         :hover {
             background-color: ${props => props.theme.eCashBlue} !important;
         }
     }    
     .ant-modal-wrap > div > div.ant-modal-content > div > div > div.ant-modal-confirm-btns > button, .ant-modal > button, .ant-modal-confirm-btns > button, .ant-modal-footer > button, #cropControlsConfirm{
         border-radius: 3px;
         border-radius: 3px;
         background-color: ${props =>
             props.theme.modal.buttonBackground} !important;
         color: ${props => props.theme.modal.color} !important;
         border-color: ${props => props.theme.modal.border} !important;
         :hover {
             background-color: ${props => props.theme.eCashBlue} !important;
         }
         text-shadow: none !important;
         text-shadow: none !important;
     }    
     
     .ant-modal-wrap > div > div.ant-modal-content > div > div > div.ant-modal-confirm-btns > button:hover,.ant-modal-confirm-btns > button:hover, .ant-modal-footer > button:hover, #cropControlsConfirm:hover {
         color: ${props => props.theme.contrast};	
         transition: all 0.3s;	
         background-color: ${props => props.theme.eCashBlue};	
         border-color: ${props => props.theme.eCashBlue};
     }   
     .selectedCurrencyOption, .ant-select-dropdown {
         text-align: left;
         color: ${props => props.theme.contrast} !important;
         background-color: ${props =>
             props.theme.collapses.expandedBackground} !important;
     }
     .cashLoadingIcon {
         color: ${props => props.theme.eCashBlue} !important;
         font-size: 48px !important;
     }
     .selectedCurrencyOption:hover {
         color: ${props => props.theme.contrast} !important;
         background-color: ${props => props.theme.eCashBlue} !important;
     }
     #addrSwitch, #cropSwitch {
         .ant-switch-checked {
             background-color: white !important;
         }
     }
     #addrSwitch.ant-switch-checked, #cropSwitch.ant-switch-checked {
         background-image: ${props =>
             props.theme.buttons.primary.backgroundImage} !important;
     }
 
     .ant-slider-rail {
         background-color: ${props => props.theme.forms.border} !important;
     }
     .ant-slider-track {
         background-color: ${props => props.theme.eCashBlue} !important;
     }
     .ant-descriptions-bordered .ant-descriptions-row {	
     background: ${props => props.theme.contrast};	
     }	
     .ant-modal-confirm-content, .ant-modal-confirm-title {	
         color: ${props => props.theme.contrast} !important;	
     }
 `;
 
 const CustomApp = styled.div`
     text-align: center;
     font-family: 'Gilroy', sans-serif;
     font-family: 'Poppins', sans-serif;
     background-color: ${props => props.theme.backgroundColor};
     background-size: 100px 171px;
     background-image: ${props => props.theme.backgroundImage};
     background-attachment: fixed;
 `;
 
 const Footer = styled.div`
     z-index: 2;
     height: 80px;
     border-top: 1px solid rgba(255, 255, 255, 0.5);
     background-color: ${props => props.theme.footerBackground};
     position: fixed;
     bottom: 0;
     width: 500px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 0 50px;
     @media (max-width: 768px) {
         width: 100%;
         padding: 0 20px;
     }
 `;
 
 export const NavButton = styled.button`
     :focus,
     :active {
         outline: none;
     }
     cursor: pointer;
     padding: 0;
     background: none;
     border: none;
     font-size: 10px;
     svg {
         fill: ${props => props.theme.contrast};
         width: 26px;
         height: auto;
     }
     ${({ active, ...props }) =>
         active &&
         `    	
         color: ${props.theme.navActive};	
         svg {	
             fill: ${props.theme.navActive};	
         }	
   `}
 `;
 
 export const WalletBody = styled.div`
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
     min-height: 100vh;
 `;
 
 export const WalletCtn = styled.div`
     position: relative;
     width: 500px;
     min-height: 100vh;
     padding: 0 0 100px;
     background: ${props => props.theme.walletBackground};
     -webkit-box-shadow: 0px 0px 24px 1px ${props => props.theme.shadow};
     -moz-box-shadow: 0px 0px 24px 1px ${props => props.theme.shadow};
     box-shadow: 0px 0px 24px 1px ${props => props.theme.shadow};
     @media (max-width: 768px) {
         width: 100%;
         -webkit-box-shadow: none;
         -moz-box-shadow: none;
         box-shadow: none;
     }
 `;
 
 export const HeaderCtn = styled.div`
     display: flex;
     align-items: center;
     justify-content: space-between;
     width: 100%;
     padding: 15px;
 `;
 
 export const CashTabLogo = styled.img`
     width: 120px;
     @media (max-width: 768px) {
         width: 110px;
     }
 `;
 
 // Extension only styled components
 const OpenInTabBtn = styled.button`
     background: none;
     border: none;
 `;
 
 const ExtTabImg = styled.img`
     max-width: 20px;
 `;
 
 const App = () => {
     const ContextValue = React.useContext(WalletContext);
     const { wallet, loading } = ContextValue;
     const [loadingUtxosAfterSend, setLoadingUtxosAfterSend] = useState(false);
     // If wallet is unmigrated, do not show page until it has migrated
     // An invalid wallet will be validated/populated after the next API call, ETA 10s
     const validWallet = isValidStoredWallet(wallet);
     const location = useLocation();
     const history = useHistory();
     const selectedKey =
         location && location.pathname ? location.pathname.substr(1) : '';
     // openInTab is an extension-only method
     const openInTab = () => {
         window.open(`index.html#/${selectedKey}`);
     };
 
     return (
         <ThemeProvider theme={theme}>
             <GlobalStyle />
             <Spin
                 spinning={
                     loading || loadingUtxosAfterSend || (wallet && !validWallet)
                 }
                 indicator={CashLoadingIcon}
             >
                 <CustomApp>
                     <WalletBody>
                         <WalletCtn>
                             <HeaderCtn>
                                 <CashTabLogo src={CashTab} alt="cashtab" />
                                 {/*Begin extension-only components*/}
                                 <OpenInTabBtn
                                     data-tip="Open in tab"
                                     onClick={() => openInTab()}
                                 >
                                     <ExtTabImg src={PopOut} alt="Open in tab" />
                                 </OpenInTabBtn>
                                 {/*End extension-only components*/}
                             </HeaderCtn>
                             {/*Note that the extension does not support biometric security*/}
                             {/*Hence <ProtectableComponentWrapper> is not pulled in*/}
                             <Switch>
                                 <Route path="/wallet">
                                     <Home />
                                 </Route>
                                 <Route path="/receive">
                                     <Receive
                                         passLoadingStatus={
                                             setLoadingUtxosAfterSend
                                         }
                                     />
                                 </Route>
                                 <Route path="/tokens">
                                     <Tokens
                                         passLoadingStatus={
                                             setLoadingUtxosAfterSend
                                         }
                                     />
                                 </Route>
                                 <Route path="/send">
                                     <Send
                                         passLoadingStatus={
                                             setLoadingUtxosAfterSend
                                         }
                                     />
                                 </Route>
                                 <Route
                                     path="/send-token/:tokenId"
                                     render={props => (
                                         <SendToken
                                             tokenId={props.match.params.tokenId}
                                             passLoadingStatus={
                                                 setLoadingUtxosAfterSend
                                             }
                                         />
                                     )}
                                 />
                                 <Route path="/airdrop">
                                     <Airdrop
                                         passLoadingStatus={
                                             setLoadingUtxosAfterSend
                                         }
                                     />
                                 </Route>
                                 <Route path="/configure">
                                     <Configure />
                                 </Route>
                                 <Redirect exact from="/" to="/wallet" />
                                 <Route component={NotFound} />
                             </Switch>
                         </WalletCtn>
                         {wallet ? (
                             <Footer>
                                 <NavButton
                                     active={selectedKey === 'wallet'}
                                     onClick={() => history.push('/wallet')}
                                 >
                                     <HomeIcon />
                                 </NavButton>
 
                                 <NavButton
                                     active={selectedKey === 'send'}
                                     onClick={() => history.push('/send')}
                                 >
                                     <SendIcon
                                         style={{
                                             marginTop: '-9px',
                                         }}
                                     />
                                 </NavButton>
                                 <NavButton
                                     active={selectedKey === 'receive'}
                                     onClick={() => history.push('receive')}
                                 >
                                     <ReceiveIcon />
                                 </NavButton>
                                 <NavButton
                                     active={selectedKey === 'airdrop'}
                                     onClick={() => history.push('/airdrop')}
                                 >
                                     <AirdropIcon />
                                 </NavButton>
                                 <NavButton
                                     active={selectedKey === 'configure'}
                                     onClick={() => history.push('/configure')}
                                 >
                                     <SettingsIcon />
                                 </NavButton>
                             </Footer>
                         ) : null}
                     </WalletBody>
                 </CustomApp>
             </Spin>
         </ThemeProvider>
     );
 };
 
+App.propTypes = {
+    match: PropTypes.string,
+};
+
 export default App;
diff --git a/web/cashtab-v2/src/components/Airdrop/Airdrop.js b/web/cashtab-v2/src/components/Airdrop/Airdrop.js
index fb99599c7..58f1ec2a8 100644
--- a/web/cashtab-v2/src/components/Airdrop/Airdrop.js
+++ b/web/cashtab-v2/src/components/Airdrop/Airdrop.js
@@ -1,468 +1,475 @@
 import React, { useState, useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import BigNumber from 'bignumber.js';
 import styled from 'styled-components';
 import { WalletContext } from 'utils/context';
 import { AntdFormWrapper } from 'components/Common/EnhancedInputs';
 import { AdvancedCollapse } from 'components/Common/StyledCollapse';
 import { Form, Alert, Collapse, Input, Modal, Spin, Progress } from 'antd';
 const { Panel } = Collapse;
 const { TextArea } = Input;
 import { Row, Col } from 'antd';
 import { SmartButton } from 'components/Common/PrimaryButton';
 import useBCH from 'hooks/useBCH';
 import {
     errorNotification,
     generalNotification,
 } from 'components/Common/Notifications';
 import { currency } from 'components/Common/Ticker.js';
 import BalanceHeader from 'components/Common/BalanceHeader';
 import BalanceHeaderFiat from 'components/Common/BalanceHeaderFiat';
 import {
     getWalletState,
     convertEtokenToEcashAddr,
     fromSmallestDenomination,
 } from 'utils/cashMethods';
 import {
     isValidTokenId,
     isValidXecAirdrop,
     isValidAirdropOutputsArray,
 } from 'utils/validation';
 import { CustomSpinner } from 'components/Common/CustomIcons';
 import * as etokenList from 'etoken-list';
 import {
     ZeroBalanceHeader,
     SidePaddingCtn,
     WalletInfoCtn,
 } from 'components/Common/Atoms';
 import WalletLabel from 'components/Common/WalletLabel.js';
 import { Link } from 'react-router-dom';
 
 const AirdropActions = styled.div`
     text-align: center;
     width: 100%;
     padding: 10px;
     border-radius: 5px;
     a {
         color: ${props => props.theme.contrast};
         margin: 0;
         font-size: 11px;
         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};
     `}
 `;
 
 // Note jestBCH is only used for unit tests; BCHJS must be mocked for jest
 const Airdrop = ({ jestBCH, passLoadingStatus }) => {
     const ContextValue = React.useContext(WalletContext);
     const { wallet, fiatPrice, cashtabSettings } = ContextValue;
     const location = useLocation();
     const walletState = getWalletState(wallet);
     const { balances } = walletState;
 
     const [bchObj, setBchObj] = useState(false);
     const [isAirdropCalcModalVisible, setIsAirdropCalcModalVisible] =
         useState(false);
     const [airdropCalcModalProgress, setAirdropCalcModalProgress] = useState(0); // the dynamic % progress bar
 
     useEffect(() => {
         // jestBCH is only ever specified for unit tests, otherwise app will use getBCH();
         const BCH = jestBCH ? jestBCH : getBCH();
 
         // set the BCH instance to state, for other functions to reference
         setBchObj(BCH);
 
         if (location && location.state && location.state.airdropEtokenId) {
             setFormData({
                 ...formData,
                 tokenId: location.state.airdropEtokenId,
             });
             handleTokenIdInput({
                 target: {
                     value: location.state.airdropEtokenId,
                 },
             });
         }
     }, []);
 
     const [formData, setFormData] = useState({
         tokenId: '',
         totalAirdrop: '',
     });
 
     const [tokenIdIsValid, setTokenIdIsValid] = useState(null);
     const [totalAirdropIsValid, setTotalAirdropIsValid] = useState(null);
     const [airdropRecipients, setAirdropRecipients] = useState('');
     const [airdropOutputIsValid, setAirdropOutputIsValid] = useState(true);
     const [etokenHolders, setEtokenHolders] = useState(new BigNumber(0));
     const [showAirdropOutputs, setShowAirdropOutputs] = useState(false);
 
     const { getBCH } = useBCH();
 
     const handleTokenIdInput = e => {
         const { name, value } = e.target;
         setTokenIdIsValid(isValidTokenId(value));
         setFormData(p => ({
             ...p,
             [name]: value,
         }));
     };
 
     const handleTotalAirdropInput = e => {
         const { name, value } = e.target;
         setTotalAirdropIsValid(isValidXecAirdrop(value));
         setFormData(p => ({
             ...p,
             [name]: value,
         }));
     };
 
     const calculateXecAirdrop = async () => {
         // display airdrop calculation message modal
         setIsAirdropCalcModalVisible(true);
         setShowAirdropOutputs(false); // hide any previous airdrop outputs
         passLoadingStatus(true);
         setAirdropCalcModalProgress(25); // updated progress bar to 25%
 
         let latestBlock;
         try {
             latestBlock = await bchObj.Blockchain.getBlockCount();
         } catch (err) {
             errorNotification(
                 err,
                 'Error retrieving latest block height',
                 'bchObj.Blockchain.getBlockCount() error',
             );
             setIsAirdropCalcModalVisible(false);
             passLoadingStatus(false);
             return;
         }
 
         setAirdropCalcModalProgress(50);
 
         etokenList.Config.SetUrl(currency.tokenDbUrl);
 
         let airdropList;
         try {
             airdropList = await etokenList.List.GetAddressListFor(
                 formData.tokenId,
                 latestBlock,
                 true,
             );
         } catch (err) {
             errorNotification(
                 err,
                 'Error retrieving airdrop recipients',
                 'etokenList.List.GetAddressListFor() error',
             );
             setIsAirdropCalcModalVisible(false);
             passLoadingStatus(false);
             return;
         }
 
         if (!airdropList) {
             errorNotification(
                 null,
                 'No recipients found for tokenId ' + formData.tokenId,
                 'Airdrop Calculation Error',
             );
             setIsAirdropCalcModalVisible(false);
             passLoadingStatus(false);
             return;
         }
 
         setAirdropCalcModalProgress(75);
 
         let totalTokenAmongstRecipients = new BigNumber(0);
         let totalHolders = new BigNumber(airdropList.size); // amount of addresses that hold this eToken
         setEtokenHolders(totalHolders);
 
         // keep a cumulative total of each eToken holding in each address in airdropList
         airdropList.forEach(
             index =>
                 (totalTokenAmongstRecipients = totalTokenAmongstRecipients.plus(
                     new BigNumber(index),
                 )),
         );
 
         let circToAirdropRatio = new BigNumber(formData.totalAirdrop).div(
             totalTokenAmongstRecipients,
         );
 
         let resultString = '';
 
         airdropList.forEach(
             (element, index) =>
                 (resultString +=
                     convertEtokenToEcashAddr(index) +
                     ',' +
                     new BigNumber(element)
                         .multipliedBy(circToAirdropRatio)
                         .decimalPlaces(currency.cashDecimals) +
                     '\n'),
         );
 
         resultString = resultString.substring(0, resultString.length - 1); // remove the final newline
         setAirdropRecipients(resultString);
 
         setAirdropCalcModalProgress(100);
 
         if (!resultString) {
             errorNotification(
                 null,
                 'No holders found for eToken ID: ' + formData.tokenId,
                 'Airdrop Calculation Error',
             );
             return;
         }
 
         // validate the airdrop values for each recipient
         // Note: addresses are not validated as they are retrieved directly from onchain
         setAirdropOutputIsValid(isValidAirdropOutputsArray(resultString));
         setShowAirdropOutputs(true); // display the airdrop outputs TextArea
         setIsAirdropCalcModalVisible(false);
         passLoadingStatus(false);
     };
 
     const handleAirdropCalcModalCancel = () => {
         setIsAirdropCalcModalVisible(false);
         passLoadingStatus(false);
     };
 
     let airdropCalcInputIsValid = tokenIdIsValid && totalAirdropIsValid;
 
     return (
         <>
             <WalletInfoCtn>
                 <WalletLabel name={wallet.name}></WalletLabel>
                 {!balances.totalBalance ? (
                     <ZeroBalanceHeader>
                         You currently have 0 {currency.ticker}
                         <br />
                         Deposit some funds to use this feature
                     </ZeroBalanceHeader>
                 ) : (
                     <>
                         <BalanceHeader
                             balance={balances.totalBalance}
                             ticker={currency.ticker}
                         />
                         {fiatPrice !== null && (
                             <BalanceHeaderFiat
                                 balance={balances.totalBalance}
                                 settings={cashtabSettings}
                                 fiatPrice={fiatPrice}
                             />
                         )}
                     </>
                 )}
             </WalletInfoCtn>
             <Modal
                 title="Querying the eCash blockchain"
                 visible={isAirdropCalcModalVisible}
                 okButtonProps={{ style: { display: 'none' } }}
                 onCancel={handleAirdropCalcModalCancel}
             >
                 <Spin indicator={CustomSpinner} />
                 <Progress percent={airdropCalcModalProgress} />
             </Modal>
             <br />
             <SidePaddingCtn>
                 <Row type="flex">
                     <Col span={24}>
                         <AdvancedCollapse
                             style={{
                                 marginBottom: '24px',
                             }}
                             defaultActiveKey={
                                 location &&
                                 location.state &&
                                 location.state.airdropEtokenId
                                     ? ['1']
                                     : ['0']
                             }
                         >
                             <Panel header="XEC Airdrop Calculator" key="1">
                                 <Alert
                                     message={`Please ensure the qualifying eToken transactions to airdrop recipients have at least one confirmation. The airdrop calculator will not detect unconfirmed token balances.`}
                                     type="warning"
                                 />
                                 <br />
                                 <AntdFormWrapper>
                                     <Form
                                         style={{
                                             width: 'auto',
                                         }}
                                     >
                                         <Form.Item
                                             validateStatus={
                                                 tokenIdIsValid === null ||
                                                 tokenIdIsValid
                                                     ? ''
                                                     : 'error'
                                             }
                                             help={
                                                 tokenIdIsValid === null ||
                                                 tokenIdIsValid
                                                     ? ''
                                                     : 'Invalid eToken ID'
                                             }
                                         >
                                             <Input
                                                 addonBefore="eToken ID"
                                                 placeholder="Enter the eToken ID"
                                                 name="tokenId"
                                                 value={formData.tokenId}
                                                 onChange={e =>
                                                     handleTokenIdInput(e)
                                                 }
                                             />
                                         </Form.Item>
                                         <Form.Item
                                             validateStatus={
                                                 totalAirdropIsValid === null ||
                                                 totalAirdropIsValid
                                                     ? ''
                                                     : 'error'
                                             }
                                             help={
                                                 totalAirdropIsValid === null ||
                                                 totalAirdropIsValid
                                                     ? ''
                                                     : 'Invalid total XEC airdrop'
                                             }
                                         >
                                             <Input
                                                 addonBefore="Total XEC airdrop"
                                                 placeholder="Enter the total XEC airdrop"
                                                 name="totalAirdrop"
                                                 type="number"
                                                 value={formData.totalAirdrop}
                                                 onChange={e =>
                                                     handleTotalAirdropInput(e)
                                                 }
                                             />
                                         </Form.Item>
                                         <Form.Item>
                                             <SmartButton
                                                 onClick={() =>
                                                     calculateXecAirdrop()
                                                 }
                                                 disabled={
                                                     !airdropCalcInputIsValid ||
                                                     !tokenIdIsValid
                                                 }
                                             >
                                                 Calculate Airdrop
                                             </SmartButton>
                                         </Form.Item>
                                         {showAirdropOutputs && (
                                             <>
                                                 {!airdropOutputIsValid &&
                                                     etokenHolders > 0 && (
                                                         <>
                                                             <Alert
                                                                 description={
                                                                     'At least one airdrop is below the minimum ' +
                                                                     fromSmallestDenomination(
                                                                         currency.dustSats,
                                                                     ) +
                                                                     ' XEC dust. Please increase the total XEC airdrop.'
                                                                 }
                                                                 type="error"
                                                                 showIcon
                                                             />
                                                             <br />
                                                         </>
                                                     )}
                                                 <Form.Item>
                                                     One to Many Airdrop Payment
                                                     Outputs
                                                     <TextArea
                                                         name="airdropRecipients"
                                                         placeholder="Please input parameters above."
                                                         value={
                                                             airdropRecipients
                                                         }
                                                         rows="10"
                                                         readOnly
                                                     />
                                                 </Form.Item>
                                                 <Form.Item>
                                                     <AirdropActions>
                                                         <Link
                                                             type="text"
                                                             to={{
                                                                 pathname: `/send`,
                                                                 state: {
                                                                     airdropRecipients:
                                                                         airdropRecipients,
                                                                 },
                                                             }}
                                                             disabled={
                                                                 !airdropRecipients
                                                             }
                                                         >
                                                             Copy to Send screen
                                                         </Link>
                                                         &nbsp;&nbsp;
                                                         <Link
                                                             type="text"
                                                             disabled={
                                                                 !airdropRecipients
                                                             }
                                                             to={'#'}
                                                             onClick={() => {
                                                                 navigator.clipboard.writeText(
                                                                     airdropRecipients,
                                                                 );
                                                                 generalNotification(
                                                                     'Airdrop recipients copied to clipboard',
                                                                     'Copied',
                                                                 );
                                                             }}
                                                         >
                                                             Copy to Clipboard
                                                         </Link>
                                                     </AirdropActions>
                                                 </Form.Item>
                                             </>
                                         )}
                                     </Form>
                                 </AntdFormWrapper>
                             </Panel>
                         </AdvancedCollapse>
                     </Col>
                 </Row>
             </SidePaddingCtn>
         </>
     );
 };
 
+/*
+passLoadingStatus must receive a default prop that is a function
+in order to pass the rendering unit test in Airdrop.test.js
+
+status => {console.log(status)} is an arbitrary stub function
+*/
+
 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/App.js b/web/cashtab-v2/src/components/App.js
index 41b1fd4aa..4ab5db3b4 100644
--- a/web/cashtab-v2/src/components/App.js
+++ b/web/cashtab-v2/src/components/App.js
@@ -1,378 +1,383 @@
 import React, { useState } from 'react';
 import 'antd/dist/antd.less';
+import PropTypes from 'prop-types';
 import { Spin } from 'antd';
 import {
     CashLoadingIcon,
     HomeIcon,
     SendIcon,
     ReceiveIcon,
     SettingsIcon,
     AirdropIcon,
 } from 'components/Common/CustomIcons';
 import '../index.css';
 import styled, { ThemeProvider, createGlobalStyle } from 'styled-components';
 import { theme } from 'assets/styles/theme';
 import Home from 'components/Home/Home';
 import Receive from 'components/Receive/Receive';
 import Tokens from 'components/Tokens/Tokens';
 import Send from 'components/Send/Send';
 import SendToken from 'components/Send/SendToken';
 import Airdrop from 'components/Airdrop/Airdrop';
 import Configure from 'components/Configure/Configure';
 import NotFound from 'components/NotFound';
 import CashTab from 'assets/cashtab_xec.png';
 import './App.css';
 import { WalletContext } from 'utils/context';
 import { isValidStoredWallet } from 'utils/cashMethods';
 import {
     Route,
     Redirect,
     Switch,
     useLocation,
     useHistory,
 } from 'react-router-dom';
 // Easter egg imports not used in extension/src/components/App.js
 import TabCash from 'assets/tabcash.png';
 import { checkForTokenById } from 'utils/tokenMethods.js';
 // Biometric security import not used in extension/src/components/App.js
 import ProtectableComponentWrapper from './Authentication/ProtectableComponentWrapper';
 
 const GlobalStyle = createGlobalStyle`
     *::placeholder {
         color: ${props => props.theme.forms.placeholder} !important;
     }
     *::selection {
     background: ${props => props.theme.eCashBlue} !important;
     }
     .ant-modal-content, .ant-modal-header, .ant-modal-title {
         background-color: ${props => props.theme.modal.background} !important;
         color: ${props => props.theme.modal.color} !important;
     }
     .ant-modal-content svg {
         fill: ${props => props.theme.modal.color};
     }   
     .ant-modal-footer button {
         background-color: ${props =>
             props.theme.modal.buttonBackground} !important;
         color: ${props => props.theme.modal.color} !important;
         border-color: ${props => props.theme.modal.border} !important;
         :hover {
             background-color: ${props => props.theme.eCashBlue} !important;
         }
     }    
     .ant-modal-wrap > div > div.ant-modal-content > div > div > div.ant-modal-confirm-btns > button, .ant-modal > button, .ant-modal-confirm-btns > button, .ant-modal-footer > button, #cropControlsConfirm {
         border-radius: 3px;
         background-color: ${props =>
             props.theme.modal.buttonBackground} !important;
         color: ${props => props.theme.modal.color} !important;
         border-color: ${props => props.theme.modal.border} !important;
         :hover {
             background-color: ${props => props.theme.eCashBlue} !important;
         }
         text-shadow: none !important;
     }    
     
     .ant-modal-wrap > div > div.ant-modal-content > div > div > div.ant-modal-confirm-btns > button:hover,.ant-modal-confirm-btns > button:hover, .ant-modal-footer > button:hover, #cropControlsConfirm:hover {
         color: ${props => props.theme.contrast};
         transition: all 0.3s;
         background-color: ${props => props.theme.eCashBlue};
         border-color: ${props => props.theme.eCashBlue};
     }   
     .selectedCurrencyOption, .ant-select-dropdown {
         text-align: left;
         color: ${props => props.theme.contrast} !important;
         background-color: ${props =>
             props.theme.collapses.expandedBackground} !important;
     }
     .cashLoadingIcon {
         color: ${props => props.theme.eCashBlue} !important;
         font-size: 48px !important;
     }
     .selectedCurrencyOption:hover {
         color: ${props => props.theme.contrast} !important;
         background-color: ${props => props.theme.eCashBlue} !important;
     }
     #addrSwitch, #cropSwitch {
         .ant-switch-checked {
             background-color: white !important;
         }
     }
     #addrSwitch.ant-switch-checked, #cropSwitch.ant-switch-checked {
         background-image: ${props =>
             props.theme.buttons.primary.backgroundImage} !important;
     }
 
     .ant-slider-rail {
         background-color: ${props => props.theme.forms.border} !important;
     }
     .ant-slider-track {
         background-color: ${props => props.theme.eCashBlue} !important;
     }
     .ant-descriptions-bordered .ant-descriptions-row {
     background: ${props => props.theme.contrast};
     }
     .ant-modal-confirm-content, .ant-modal-confirm-title {
         color: ${props => props.theme.contrast} !important;
     }
 `;
 
 const CustomApp = styled.div`
     text-align: center;
     font-family: 'Poppins', sans-serif;
     background-color: ${props => props.theme.backgroundColor};
     background-size: 100px 171px;
     background-image: ${props => props.theme.backgroundImage};
     background-attachment: fixed;
 `;
 
 const Footer = styled.div`
     z-index: 2;
     height: 80px;
     border-top: 1px solid rgba(255, 255, 255, 0.5);
     background-color: ${props => props.theme.footerBackground};
     position: fixed;
     bottom: 0;
     width: 500px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 0 50px;
     @media (max-width: 768px) {
         width: 100%;
         padding: 0 20px;
     }
 `;
 
 export const NavButton = styled.button`
     :focus,
     :active {
         outline: none;
     }
     cursor: pointer;
     padding: 0;
     background: none;
     border: none;
     font-size: 10px;
     svg {
         fill: ${props => props.theme.contrast};
         width: 26px;
         height: auto;
     }
     ${({ active, ...props }) =>
         active &&
         `    
         color: ${props.theme.navActive};
         svg {
             fill: ${props.theme.navActive};
         }
   `}
 `;
 
 export const WalletBody = styled.div`
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
     min-height: 100vh;
 `;
 
 export const WalletCtn = styled.div`
     position: relative;
     width: 500px;
     min-height: 100vh;
     padding: 0 0 100px;
     background: ${props => props.theme.walletBackground};
     -webkit-box-shadow: 0px 0px 24px 1px ${props => props.theme.shadow};
     -moz-box-shadow: 0px 0px 24px 1px ${props => props.theme.shadow};
     box-shadow: 0px 0px 24px 1px ${props => props.theme.shadow};
     @media (max-width: 768px) {
         width: 100%;
         -webkit-box-shadow: none;
         -moz-box-shadow: none;
         box-shadow: none;
     }
 `;
 
 export const HeaderCtn = styled.div`
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
     padding: 15px 0;
 `;
 
 export const CashTabLogo = styled.img`
     width: 120px;
     @media (max-width: 768px) {
         width: 110px;
     }
 `;
 
 // AbcLogo styled component not included in extension, replaced by open in new tab link
 export const AbcLogo = styled.img`
     width: 150px;
     @media (max-width: 768px) {
         width: 120px;
     }
 `;
 
 // Easter egg styled component not used in extension/src/components/App.js
 export const EasterEgg = styled.img`
     position: fixed;
     bottom: -195px;
     margin: 0;
     right: 10%;
     transition-property: bottom;
     transition-duration: 1.5s;
     transition-timing-function: ease-out;
 
     :hover {
         bottom: 0;
     }
 
     @media screen and (max-width: 1250px) {
         display: none;
     }
 `;
 
 const App = () => {
     const ContextValue = React.useContext(WalletContext);
     const { wallet, loading } = ContextValue;
     const [loadingUtxosAfterSend, setLoadingUtxosAfterSend] = useState(false);
     // If wallet is unmigrated, do not show page until it has migrated
     // An invalid wallet will be validated/populated after the next API call, ETA 10s
     const validWallet = isValidStoredWallet(wallet);
     const location = useLocation();
     const history = useHistory();
     const selectedKey =
         location && location.pathname ? location.pathname.substr(1) : '';
 
     // Easter egg boolean not used in extension/src/components/App.js
     const hasTab = validWallet
         ? checkForTokenById(
               wallet.state.tokens,
               '50d8292c6255cda7afc6c8566fed3cf42a2794e9619740fe8f4c95431271410e',
           )
         : false;
 
     return (
         <ThemeProvider theme={theme}>
             <GlobalStyle />
             <Spin
                 spinning={
                     loading || loadingUtxosAfterSend || (wallet && !validWallet)
                 }
                 indicator={CashLoadingIcon}
             >
                 <CustomApp>
                     <WalletBody>
                         <WalletCtn>
                             <HeaderCtn>
                                 <CashTabLogo src={CashTab} alt="cashtab" />
                                 {/*Begin component not included in extension as desktop only*/}
                                 {hasTab && (
                                     <EasterEgg src={TabCash} alt="tabcash" />
                                 )}
                                 {/*End component not included in extension as desktop only*/}
                             </HeaderCtn>
                             <ProtectableComponentWrapper>
                                 <Switch>
                                     <Route path="/wallet">
                                         <Home />
                                     </Route>
                                     <Route path="/receive">
                                         <Receive
                                             passLoadingStatus={
                                                 setLoadingUtxosAfterSend
                                             }
                                         />
                                     </Route>
                                     <Route path="/tokens">
                                         <Tokens
                                             passLoadingStatus={
                                                 setLoadingUtxosAfterSend
                                             }
                                         />
                                     </Route>
                                     <Route path="/send">
                                         <Send
                                             passLoadingStatus={
                                                 setLoadingUtxosAfterSend
                                             }
                                         />
                                     </Route>
                                     <Route
                                         path="/send-token/:tokenId"
                                         render={props => (
                                             <SendToken
                                                 tokenId={
                                                     props.match.params.tokenId
                                                 }
                                                 passLoadingStatus={
                                                     setLoadingUtxosAfterSend
                                                 }
                                             />
                                         )}
                                     />
                                     <Route path="/airdrop">
                                         <Airdrop
                                             passLoadingStatus={
                                                 setLoadingUtxosAfterSend
                                             }
                                         />
                                     </Route>
                                     <Route path="/configure">
                                         <Configure />
                                     </Route>
                                     <Redirect exact from="/" to="/wallet" />
                                     <Route component={NotFound} />
                                 </Switch>
                             </ProtectableComponentWrapper>
                         </WalletCtn>
                         {wallet ? (
                             <Footer>
                                 <NavButton
                                     active={selectedKey === 'wallet'}
                                     onClick={() => history.push('/wallet')}
                                 >
                                     <HomeIcon />
                                 </NavButton>
 
                                 <NavButton
                                     active={selectedKey === 'send'}
                                     onClick={() => history.push('/send')}
                                 >
                                     <SendIcon
                                         style={{
                                             marginTop: '-9px',
                                         }}
                                     />
                                 </NavButton>
                                 <NavButton
                                     active={selectedKey === 'receive'}
                                     onClick={() => history.push('receive')}
                                 >
                                     <ReceiveIcon />
                                 </NavButton>
                                 <NavButton
                                     active={selectedKey === 'airdrop'}
                                     onClick={() => history.push('/airdrop')}
                                 >
                                     <AirdropIcon />
                                 </NavButton>
                                 <NavButton
                                     active={selectedKey === 'configure'}
                                     onClick={() => history.push('/configure')}
                                 >
                                     <SettingsIcon />
                                 </NavButton>
                             </Footer>
                         ) : null}
                     </WalletBody>
                 </CustomApp>
             </Spin>
         </ThemeProvider>
     );
 };
 
+App.propTypes = {
+    match: PropTypes.string,
+};
+
 export default App;
diff --git a/web/cashtab-v2/src/components/Authentication/ProtectableComponentWrapper.js b/web/cashtab-v2/src/components/Authentication/ProtectableComponentWrapper.js
index 54a2603db..08d0daeae 100644
--- a/web/cashtab-v2/src/components/Authentication/ProtectableComponentWrapper.js
+++ b/web/cashtab-v2/src/components/Authentication/ProtectableComponentWrapper.js
@@ -1,32 +1,36 @@
 import React, { useContext } from 'react';
 import { AuthenticationContext } from 'utils/context';
+import PropTypes from 'prop-types';
 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 <p>Loading authenticaion data...</p>;
         }
 
         // prompt if user would like to enable biometric lock when the app first run
         if (isAuthenticationRequired === undefined) {
             return <SignUp />;
         }
 
         // prompt user to sign in
         if (isAuthenticationRequired && !isSignedIn) {
             return <SignIn />;
         }
     }
 
     // authentication = null  => authentication is not supported
     return <>{children}</>;
 };
 
+ProtectableComponentWrapper.propTypes = {
+    children: PropTypes.objectOf(PropTypes.node),
+};
+
 export default ProtectableComponentWrapper;
diff --git a/web/cashtab-v2/src/components/Common/QRCode.js b/web/cashtab-v2/src/components/Common/QRCode.js
index 8cd7c6485..0907b3378 100644
--- a/web/cashtab-v2/src/components/Common/QRCode.js
+++ b/web/cashtab-v2/src/components/Common/QRCode.js
@@ -1,244 +1,251 @@
 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 { CopyToClipboard } from 'react-copy-to-clipboard';
 import { Event } from 'utils/GoogleAnalytics';
 import { convertToEcashPrefix } from 'utils/cashMethods';
 
 export const StyledRawQRCode = styled(RawQRCode)`
     cursor: pointer;
     border-radius: 10px;
     background: ${props => props.theme.qr.background};
     margin-bottom: 10px;
     path:first-child {
         fill: ${props => props.theme.qr.background};
     }
     :hover {
         border-color: ${({ xec = 0, ...props }) =>
             xec === 1 ? props.theme.eCashBlue : props.theme.eCashPurple};
     }
     @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};
     border: 1px solid;
     border-color: ${({ xec = 0, ...props }) =>
         xec === 1 ? props.theme.eCashBlue : props.theme.eCashPurple};
     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};
     @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;
     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,
-    ...otherProps
 }) => {
     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);
         }
 
         setVisible(true);
         setTimeout(() => {
             txtRef.current.select();
         }, 100);
     };
 
     return (
         <CopyToClipboard
             style={{
                 display: 'inline-block',
                 width: '100%',
                 position: 'relative',
             }}
             text={address}
             onCopy={handleOnCopy}
         >
             <div style={{ position: 'relative' }} onClick={handleOnClick}>
                 <Copied
                     xec={address && isCashAddress ? 1 : 0}
                     style={{ display: visible ? null : 'none' }}
                 >
                     Copied <br />
                     <span style={{ fontSize: '12px' }}>{address}</span>
                 </Copied>
 
                 <StyledRawQRCode
                     id="borderedQRCode"
                     value={address || ''}
                     size={size}
                     xec={address && isCashAddress ? 1 : 0}
                     renderAs={'svg'}
                     includeMargin
                     imageSettings={{
                         src:
                             address && isCashAddress
                                 ? currency.logo
                                 : currency.tokenLogo,
                         x: null,
                         y: null,
                         height: 24,
                         width: 24,
                         excavate: true,
                     }}
                 />
 
                 {address && (
                     <CustomInput className="notranslate">
                         <input
                             ref={txtRef}
                             readOnly
                             value={address}
                             spellCheck="false"
                             type="text"
                         />
                         <PrefixLabel xec={address && isCashAddress ? 1 : 0}>
                             {address.slice(0, prefixLength)}
                         </PrefixLabel>
                         <AddressHighlightTrim>
                             {address.slice(
                                 prefixLength,
                                 prefixLength + trimAmount,
                             )}
                         </AddressHighlightTrim>
                         {address.slice(prefixLength + trimAmount, address_trim)}
                         <AddressHighlightTrim>
                             {address.slice(-trimAmount)}
                         </AddressHighlightTrim>
                     </CustomInput>
                 )}
             </div>
         </CopyToClipboard>
     );
 };
+
+QRCode.propTypes = {
+    address: PropTypes.string,
+    isCashAddress: PropTypes.func,
+    size: PropTypes.number,
+    onClick: PropTypes.func,
+};
diff --git a/web/cashtab-v2/src/components/Common/ScanQRCode.js b/web/cashtab-v2/src/components/Common/ScanQRCode.js
index d51d0e810..da1b25750 100644
--- a/web/cashtab-v2/src/components/Common/ScanQRCode.js
+++ b/web/cashtab-v2/src/components/Common/ScanQRCode.js
@@ -1,187 +1,186 @@
 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 (
         <>
             <StyledScanQRCode
                 {...otherProps}
                 onClick={() => setVisible(!visible)}
             >
                 <ThemedQrcodeOutlined />
             </StyledScanQRCode>
             <StyledModal
                 title="Scan QR code"
                 visible={visible}
                 onCancel={() => setVisible(false)}
                 footer={null}
             >
                 {visible ? (
                     <div>
                         {error ? (
                             <>
                                 <Alert
                                     message="Error"
                                     description="Error in QR scanner. Please ensure your camera is not in use. Due to Apple restrictions on third-party browsers, you must use Safari browser for QR code scanning on an iPhone."
                                     type="error"
                                     showIcon
                                     style={{ textAlign: 'left' }}
                                 />
                                 {/*
                 <p>{mobileError}</p>
                 <p>{mobileErrorMsg}</p>
                 */}
                             </>
                         ) : (
                             <QRPreview id="test-area-qr-code-webcam"></QRPreview>
                         )}
                     </div>
                 ) : null}
             </StyledModal>
         </>
     );
 };
 
 ScanQRCode.propTypes = {
     loadWithCameraOpen: PropTypes.bool,
     onScan: PropTypes.func,
 };
 
 export default ScanQRCode;
diff --git a/web/cashtab-v2/src/components/Configure/Configure.js b/web/cashtab-v2/src/components/Configure/Configure.js
index 662bbb49d..5411800e4 100644
--- a/web/cashtab-v2/src/components/Configure/Configure.js
+++ b/web/cashtab-v2/src/components/Configure/Configure.js
@@ -1,809 +1,808 @@
-/* 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};
         }
     }
     .SendConfirm {
         color: ${props => props.theme.lightWhite};
     }
 `;
 
 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) => {
+    const handleAppLockToggle = checked => {
         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 (
         <SidePaddingCtn>
             <StyledConfigure>
                 {walletToBeRenamed !== null && (
                     <Modal
                         title={`Rename Wallet ${walletToBeRenamed.name}`}
                         visible={showRenameWalletModal}
                         onOk={changeWalletName}
                         onCancel={() => cancelRenameWallet()}
                     >
                         <AntdFormWrapper>
                             <Form style={{ width: 'auto' }}>
                                 <Form.Item
                                     validateStatus={
                                         newWalletNameIsValid === null ||
                                         newWalletNameIsValid
                                             ? ''
                                             : 'error'
                                     }
                                     help={
                                         newWalletNameIsValid === null ||
                                         newWalletNameIsValid
                                             ? ''
                                             : 'Wallet name must be a string between 1 and 24 characters long'
                                     }
                                 >
                                     <Input
                                         prefix={<WalletFilled />}
                                         placeholder="Enter new wallet name"
                                         name="newName"
                                         value={newWalletName}
                                         onChange={e => handleWalletNameInput(e)}
                                     />
                                 </Form.Item>
                             </Form>
                         </AntdFormWrapper>
                     </Modal>
                 )}
                 {walletToBeDeleted !== null && (
                     <Modal
                         title={`Are you sure you want to delete wallet "${walletToBeDeleted.name}"?`}
                         visible={showDeleteWalletModal}
                         onOk={deleteSelectedWallet}
                         onCancel={() => cancelDeleteWallet()}
                     >
                         <AntdFormWrapper>
                             <Form style={{ width: 'auto' }}>
                                 <Form.Item
                                     validateStatus={
                                         walletDeleteValid === null ||
                                         walletDeleteValid
                                             ? ''
                                             : 'error'
                                     }
                                     help={
                                         walletDeleteValid === null ||
                                         walletDeleteValid
                                             ? ''
                                             : 'Your confirmation phrase must match exactly'
                                     }
                                 >
                                     <Input
                                         prefix={<WalletFilled />}
                                         placeholder={`Type "delete ${walletToBeDeleted.name}" to confirm`}
                                         name="walletToBeDeletedInput"
                                         value={confirmationOfWalletToBeDeleted}
                                         onChange={e =>
                                             handleWalletToDeleteInput(e)
                                         }
                                     />
                                 </Form.Item>
                             </Form>
                         </AntdFormWrapper>
                     </Modal>
                 )}
                 <h2>
                     <ThemedCopyOutlined /> Backup your wallet
                 </h2>
                 <Alert
                     style={{ marginBottom: '12px' }}
                     description="Your seed phrase is the only way to restore your wallet. Write it down. Keep it safe."
                     type="warning"
                     showIcon
                 />
                 {showTranslationWarning && (
                     <Alert
                         style={{ marginBottom: '12px' }}
                         description="Please do not translate your seed phrase. Store your seed phrase in English. You must re-enter these exact English words to restore your wallet from seed."
                         type="warning"
                         showIcon
                     />
                 )}
                 {wallet && wallet.mnemonic && (
                     <StyledCollapse>
                         <Panel header="Click to reveal seed phrase" key="1">
                             <p
                                 className="notranslate"
                                 style={{ userSelect: 'text' }}
                             >
                                 {wallet && wallet.mnemonic
                                     ? wallet.mnemonic
                                     : ''}
                             </p>
                         </Panel>
                     </StyledCollapse>
                 )}
                 <StyledSpacer />
                 <h2>
                     <ThemedWalletOutlined /> Manage Wallets
                 </h2>
                 {apiError ? (
                     <ApiError />
                 ) : (
                     <>
                         <PrimaryButton
                             onClick={() => updateSavedWalletsOnCreate()}
                         >
                             <PlusSquareOutlined /> New Wallet
                         </PrimaryButton>
                         <SecondaryButton
                             onClick={() => openSeedInput(!seedInput)}
                         >
                             <ImportOutlined /> Import Wallet
                         </SecondaryButton>
                         {seedInput && (
                             <>
                                 <p style={{ color: '#fff' }}>
                                     Copy and paste your mnemonic seed phrase
                                     below to import an existing wallet
                                 </p>
                                 <AntdFormWrapper>
                                     <Form style={{ width: 'auto' }}>
                                         <Form.Item
                                             validateStatus={
                                                 isValidMnemonic === null ||
                                                 isValidMnemonic
                                                     ? ''
                                                     : 'error'
                                             }
                                             help={
                                                 isValidMnemonic === null ||
                                                 isValidMnemonic
                                                     ? ''
                                                     : 'Valid mnemonic seed phrase required'
                                             }
                                         >
                                             <Input
                                                 prefix={<LockOutlined />}
                                                 type="email"
                                                 placeholder="mnemonic (seed phrase)"
                                                 name="mnemonic"
                                                 autoComplete="off"
                                                 onChange={e => handleChange(e)}
                                                 required
                                             />
                                         </Form.Item>
                                         <SmartButton
                                             disabled={!isValidMnemonic}
                                             onClick={() => submit()}
                                         >
                                             Import
                                         </SmartButton>
                                     </Form>
                                 </AntdFormWrapper>
                             </>
                         )}
                     </>
                 )}
                 {savedWallets && savedWallets.length > 0 && (
                     <>
                         <StyledCollapse>
                             <Panel header="Saved wallets" key="2">
                                 <AWRow>
                                     <h3 className="notranslate">
                                         {wallet.name}
                                     </h3>
                                     <h4>Currently active</h4>
                                 </AWRow>
                                 <div>
                                     {savedWallets.map(sw => (
                                         <SWRow key={sw.name}>
                                             <SWName>
                                                 <h3 className="overflow notranslate">
                                                     {sw.name}
                                                 </h3>
                                             </SWName>
                                             <SWBalance>
                                                 <div className="overflow">
                                                     [
                                                     {sw && sw.state
                                                         ? formatSavedBalance(
                                                               sw.state.balances
                                                                   .totalBalance,
                                                           )
                                                         : 'N/A'}{' '}
                                                     XEC]
                                                 </div>
                                             </SWBalance>
                                             <SWButtonCtn>
                                                 <Edit
                                                     onClick={() =>
                                                         showPopulatedRenameWalletModal(
                                                             sw,
                                                         )
                                                     }
                                                 />
                                                 <Trashcan
                                                     onClick={() =>
                                                         showPopulatedDeleteWalletModal(
                                                             sw,
                                                         )
                                                     }
                                                 />
                                                 <button
                                                     onClick={() =>
                                                         updateSavedWalletsOnLoad(
                                                             sw,
                                                         )
                                                     }
                                                 >
                                                     Activate
                                                 </button>
                                             </SWButtonCtn>
                                         </SWRow>
                                     ))}
                                 </div>
                             </Panel>
                         </StyledCollapse>
                     </>
                 )}
                 <StyledSpacer />
                 <h2>
                     <ThemedDollarOutlined /> Fiat Currency
                 </h2>
                 <AntdFormWrapper>
                     <CurrencySelectDropdown
                         defaultValue={
                             cashtabSettings && cashtabSettings.fiatCurrency
                                 ? cashtabSettings.fiatCurrency
                                 : 'usd'
                         }
                         onChange={fiatCode =>
                             changeCashtabSettings('fiatCurrency', fiatCode)
                         }
                     />
                 </AntdFormWrapper>
                 <StyledSpacer />
                 <h2>
                     <ThemedSettingOutlined /> General Settings
                 </h2>
                 <GeneralSettingsItem>
                     <div className="title">
                         <LockFilled /> Lock App
                     </div>
                     {authentication ? (
                         <Switch
                             size="small"
                             checkedChildren={<CheckOutlined />}
                             unCheckedChildren={<CloseOutlined />}
                             checked={
                                 authentication.isAuthenticationRequired &&
                                 authentication.credentialId
                                     ? true
                                     : false
                             }
                             // checked={false}
                             onChange={handleAppLockToggle}
                         />
                     ) : (
                         <Tag color="warning" icon={<ExclamationCircleFilled />}>
                             Not Supported
                         </Tag>
                     )}
                 </GeneralSettingsItem>
                 <GeneralSettingsItem>
                     <div className="SendConfirm">
                         <LockFilled /> Send Confirmations
                     </div>
                     <Switch
                         size="small"
                         checkedChildren={<CheckOutlined />}
                         unCheckedChildren={<CloseOutlined />}
                         checked={
                             cashtabSettings ? cashtabSettings.sendModal : false
                         }
                         onChange={handleSendModalToggle}
                     />
                 </GeneralSettingsItem>
                 <StyledSpacer />[
                 <SettingsLink
                     type="link"
                     href="https://docs.cashtab.com/docs/"
                     target="_blank"
                     rel="noreferrer"
                 >
                     Documentation
                 </SettingsLink>
                 ]
             </StyledConfigure>
         </SidePaddingCtn>
     );
 };
 
 export default Configure;
diff --git a/web/cashtab-v2/src/components/Home/Tx.js b/web/cashtab-v2/src/components/Home/Tx.js
index b23f4e60d..73677769d 100644
--- a/web/cashtab-v2/src/components/Home/Tx.js
+++ b/web/cashtab-v2/src/components/Home/Tx.js
@@ -1,708 +1,687 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
-import styled, { css } from 'styled-components';
+import styled 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;
     width: 100%;
 `;
 
 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 ? (
                 <TxWrapper>
                     <UnparsedTx>
                         <UnparsedIcon />
                     </UnparsedTx>
 
                     <DateType>
                         <ReceivedLabel>Unparsed</ReceivedLabel>
                         <br />
                         {txDate}
                     </DateType>
                     <TxInfo>Open in Explorer</TxInfo>
                 </TxWrapper>
             ) : (
                 <AntdContextCollapseWrapper className="antd-collapse">
                     <Collapse bordered={false}>
                         <Panel
                             showArrow={false}
                             header={
                                 <>
                                     <TxWrapper>
                                         {data.outgoingTx ? (
                                             <>
                                                 {data.tokenTx &&
                                                 data.tokenInfo
                                                     .transactionType ===
                                                     'GENESIS' ? (
                                                     <GenesisTx>
                                                         <GenesisIcon />
                                                     </GenesisTx>
                                                 ) : (
                                                     <SentTx>
                                                         <SendIcon />
                                                     </SentTx>
                                                 )}
                                             </>
                                         ) : (
                                             <ReceivedTx>
                                                 <ReceiveIcon />
                                             </ReceivedTx>
                                         )}
 
                                         <LeftTextCtn>
                                             {data.outgoingTx ? (
                                                 <>
                                                     {data.tokenTx &&
                                                     data.tokenInfo
                                                         .transactionType ===
                                                         'GENESIS' ? (
                                                         <h3 className="genesis">
                                                             Genesis
                                                         </h3>
                                                     ) : (
                                                         <h3 className="sent">
                                                             Sent
                                                         </h3>
                                                     )}
                                                 </>
                                             ) : (
                                                 <h3 className="received">
                                                     Received
                                                 </h3>
                                             )}
                                             <h4>{txDate}</h4>
                                         </LeftTextCtn>
                                         {data.tokenTx ? (
                                             <TokenInfo
                                                 outgoing={data.outgoingTx}
                                             >
                                                 {data.tokenTx &&
                                                 data.tokenInfo ? (
                                                     <>
                                                         <TxTokenIcon>
                                                             <TokenIcon
                                                                 size={32}
                                                                 tokenId={
                                                                     data
                                                                         .tokenInfo
                                                                         .tokenId
                                                                 }
                                                             />
                                                         </TxTokenIcon>
                                                         {data.outgoingTx ? (
                                                             <RightTextCtn>
                                                                 {data.tokenInfo
                                                                     .transactionType ===
                                                                 'GENESIS' ? (
                                                                     <>
                                                                         <TokenTxAmt className="genesis">
                                                                             +{' '}
                                                                             {data.tokenInfo.qtyReceived.toString()}
                                                                             &nbsp;
                                                                             {
                                                                                 data
                                                                                     .tokenInfo
                                                                                     .tokenTicker
                                                                             }
                                                                         </TokenTxAmt>
                                                                         <TokenName>
                                                                             {
                                                                                 data
                                                                                     .tokenInfo
                                                                                     .tokenName
                                                                             }
                                                                         </TokenName>
                                                                     </>
                                                                 ) : (
                                                                     <>
                                                                         <TokenTxAmt>
                                                                             -{' '}
                                                                             {data.tokenInfo.qtySent.toString()}
                                                                             &nbsp;
                                                                             {
                                                                                 data
                                                                                     .tokenInfo
                                                                                     .tokenTicker
                                                                             }
                                                                         </TokenTxAmt>
                                                                         <TokenName>
                                                                             {
                                                                                 data
                                                                                     .tokenInfo
                                                                                     .tokenName
                                                                             }
                                                                         </TokenName>
                                                                     </>
                                                                 )}
                                                             </RightTextCtn>
                                                         ) : (
                                                             <RightTextCtn>
                                                                 <TokenTxAmt className="received">
                                                                     +{' '}
                                                                     {data.tokenInfo.qtyReceived.toString()}
                                                                     &nbsp;
                                                                     {
                                                                         data
                                                                             .tokenInfo
                                                                             .tokenTicker
                                                                     }
                                                                 </TokenTxAmt>
                                                                 <TokenName>
                                                                     {
                                                                         data
                                                                             .tokenInfo
                                                                             .tokenName
                                                                     }
                                                                 </TokenName>
                                                             </RightTextCtn>
                                                         )}
                                                     </>
                                                 ) : (
                                                     <span>Token Tx</span>
                                                 )}
                                             </TokenInfo>
                                         ) : (
                                             <>
                                                 <TxInfo
                                                     outgoing={data.outgoingTx}
                                                 >
                                                     {data.outgoingTx ? (
                                                         <>
                                                             <h3>
                                                                 -
                                                                 {formatBalance(
                                                                     fromLegacyDecimals(
                                                                         data.amountSent,
                                                                     ),
                                                                 )}{' '}
                                                                 {
                                                                     currency.ticker
                                                                 }
                                                             </h3>
                                                             {fiatPrice !==
                                                                 null &&
                                                                 !isNaN(
                                                                     data.amountSent,
                                                                 ) && (
                                                                     <h4>
                                                                         -
                                                                         {
                                                                             currency
                                                                                 .fiatCurrencies[
                                                                                 fiatCurrency
                                                                             ]
                                                                                 .symbol
                                                                         }
                                                                         {(
                                                                             fromLegacyDecimals(
                                                                                 data.amountSent,
                                                                             ) *
                                                                             fiatPrice
                                                                         ).toFixed(
                                                                             2,
                                                                         )}{' '}
                                                                         {
                                                                             currency
                                                                                 .fiatCurrencies
                                                                                 .fiatCurrency
                                                                         }
                                                                     </h4>
                                                                 )}
                                                         </>
                                                     ) : (
                                                         <>
                                                             <h3 className="received">
                                                                 +
                                                                 {formatBalance(
                                                                     fromLegacyDecimals(
                                                                         data.amountReceived,
                                                                     ),
                                                                 )}{' '}
                                                                 {
                                                                     currency.ticker
                                                                 }
                                                             </h3>
                                                             {fiatPrice !==
                                                                 null &&
                                                                 !isNaN(
                                                                     data.amountReceived,
                                                                 ) && (
                                                                     <h4>
                                                                         +
                                                                         {
                                                                             currency
                                                                                 .fiatCurrencies[
                                                                                 fiatCurrency
                                                                             ]
                                                                                 .symbol
                                                                         }
                                                                         {(
                                                                             fromLegacyDecimals(
                                                                                 data.amountReceived,
                                                                             ) *
                                                                             fiatPrice
                                                                         ).toFixed(
                                                                             2,
                                                                         )}{' '}
                                                                         {
                                                                             currency
                                                                                 .fiatCurrencies
                                                                                 .fiatCurrency
                                                                         }
                                                                     </h4>
                                                                 )}
                                                         </>
                                                     )}
                                                 </TxInfo>
                                             </>
                                         )}
                                         {data.opReturnMessage && (
                                             <>
                                                 <OpReturnType
                                                     received={!data.outgoingTx}
                                                 >
                                                     {data.isCashtabMessage ? (
                                                         <h4>Cashtab Message</h4>
                                                     ) : (
                                                         <h4>
                                                             External Message
                                                         </h4>
                                                     )}
                                                     {data.isEncryptedMessage ? (
                                                         <EncryptionMessageLabel>
                                                             &nbsp;-&nbsp;Encrypted
                                                         </EncryptionMessageLabel>
                                                     ) : (
                                                         ''
                                                     )}
                                                     <br />
                                                     {/*unencrypted OP_RETURN Message*/}
                                                     {data.opReturnMessage &&
                                                     !data.isEncryptedMessage ? (
                                                         <p>
                                                             {
                                                                 data.opReturnMessage
                                                             }
                                                         </p>
                                                     ) : (
                                                         ''
                                                     )}
                                                     {/*encrypted and wallet is authorized to view OP_RETURN Message*/}
                                                     {data.opReturnMessage &&
                                                     data.isEncryptedMessage &&
                                                     data.decryptionSuccess ? (
                                                         <p>
                                                             {
                                                                 data.opReturnMessage
                                                             }
                                                         </p>
                                                     ) : (
                                                         ''
                                                     )}
                                                     {/*encrypted but wallet is not authorized to view OP_RETURN Message*/}
                                                     {data.opReturnMessage &&
                                                     data.isEncryptedMessage &&
                                                     !data.decryptionSuccess ? (
                                                         <UnauthorizedDecryptionMessage>
                                                             {
                                                                 data.opReturnMessage
                                                             }
                                                         </UnauthorizedDecryptionMessage>
                                                     ) : (
                                                         ''
                                                     )}
                                                     {!data.outgoingTx &&
                                                     data.replyAddress ? (
                                                         <Link
                                                             to={{
                                                                 pathname: `/send`,
                                                                 state: {
                                                                     replyAddress:
                                                                         data.replyAddress,
                                                                 },
                                                             }}
                                                         >
                                                             Reply To Message
                                                         </Link>
                                                     ) : (
                                                         ''
                                                     )}
                                                 </OpReturnType>
                                             </>
                                         )}
                                     </TxWrapper>
                                 </>
                             }
                         >
                             <PanelCtn>
                                 <CopyToClipboard text={data.txid}>
                                     <DropdownButton
                                         onClick={() => {
                                             generalNotification(
                                                 data.txid,
                                                 'Tx ID copied to clipboard',
                                             );
                                         }}
                                     >
                                         <DropdownIconWrapper>
                                             <TextLayer>Copy Tx ID</TextLayer>
 
                                             <ThemedCopySolid />
                                         </DropdownIconWrapper>
                                     </DropdownButton>
                                 </CopyToClipboard>
                                 <TxLink
                                     key={data.txid}
                                     href={`${currency.tokenExplorerUrl}/tx/${data.txid}`}
                                     target="_blank"
                                     rel="noreferrer"
                                 >
                                     <DropdownButton>
                                         <DropdownIconWrapper>
                                             <TextLayer>
                                                 View on be.cash
                                             </TextLayer>
 
                                             <ThemedLinkSolid />
                                         </DropdownIconWrapper>
                                     </DropdownButton>
                                 </TxLink>
                             </PanelCtn>
                         </Panel>
                     </Collapse>
                 </AntdContextCollapseWrapper>
             )}
         </>
     );
 };
 
 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
index 21364d613..ad30fb662 100644
--- a/web/cashtab-v2/src/components/Home/TxHistory.js
+++ b/web/cashtab-v2/src/components/Home/TxHistory.js
@@ -1,27 +1,26 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
 import Tx from './Tx';
 
 const TxHistory = ({ txs, fiatPrice, fiatCurrency }) => {
     return (
         <div>
             {txs.map(tx => (
                 <Tx
                     key={tx.txid}
                     data={tx}
                     fiatPrice={fiatPrice}
                     fiatCurrency={fiatCurrency}
                 />
             ))}
         </div>
     );
 };
 
 TxHistory.propTypes = {
     txs: PropTypes.array,
     fiatPrice: PropTypes.number,
     fiatCurrency: PropTypes.string,
 };
 
 export default TxHistory;
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
index 75257b8bb..2a62a6c87 100644
--- 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
@@ -1,449 +1,449 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP @generated
 
 exports[`Wallet with BCH balances 1`] = `
 Array [
   <div
-    className="sc-hmzhuo cYAKWr"
+    className="sc-cHGsZl hVnbsR"
   >
     <h4
-      className="sc-gGBfsJ ZgQrz"
+      className="sc-jbKcbu hzeiL"
     >
       MigrationTestAlpha
     </h4>
     <div
-      className="sc-kvZOFW cxOlCC"
+      className="sc-kgAjT duALJk"
     >
       0
        
       XEC
     </div>
   </div>,
   <div
-    className="sc-cJSrbW hStxoF"
+    className="sc-gisBJw kvMXiK"
   >
     <div
-      className="sc-jnlKLf loFZIX"
+      className="sc-dNLxif fHesDD"
     >
       <button
-        className="sc-fYxtnH gnEKHM"
+        className="sc-jqCOkK iIgnrK"
         onClick={[Function]}
       >
         Transactions
       </button>
       <button
-        className="sc-fYxtnH bYcRiT"
+        className="sc-jqCOkK eRXVap"
         onClick={[Function]}
       >
         eTokens
       </button>
     </div>
     <div
-      className="sc-tilXH gcpRYy"
+      className="sc-uJMKN cJDvdW"
     >
       <div />
       <span
         aria-label="party emoji"
         role="img"
       >
         🎉
       </span>
       Congratulations on your new wallet!
        
       <span
         aria-label="party emoji"
         role="img"
       >
         🎉
       </span>
       <br />
        Start using the wallet immediately to receive
        
       XEC
        payments, or load it up with
        
       XEC
        to send to others
     </div>
     <div
-      className="sc-tilXH boVOvg"
+      className="sc-uJMKN kYtMAo"
     >
       <a
-        className="sc-kafWEX ekuTxS"
+        className="sc-fYxtnH bPDqwb"
         href="/tokens"
         onClick={[Function]}
       >
         Create eToken
       </a>
       <p>
         Tokens sent to your 
         eToken
          address will appear here
       </p>
     </div>
   </div>,
 ]
 `;
 
 exports[`Wallet with BCH balances and tokens 1`] = `
 Array [
   <div
-    className="sc-hmzhuo cYAKWr"
+    className="sc-cHGsZl hVnbsR"
   >
     <h4
-      className="sc-gGBfsJ ZgQrz"
+      className="sc-jbKcbu hzeiL"
     >
       MigrationTestAlpha
     </h4>
     <div
-      className="sc-kvZOFW cxOlCC"
+      className="sc-kgAjT duALJk"
     >
       0
        
       XEC
     </div>
   </div>,
   <div
-    className="sc-cJSrbW hStxoF"
+    className="sc-gisBJw kvMXiK"
   >
     <div
-      className="sc-jnlKLf loFZIX"
+      className="sc-dNLxif fHesDD"
     >
       <button
-        className="sc-fYxtnH gnEKHM"
+        className="sc-jqCOkK iIgnrK"
         onClick={[Function]}
       >
         Transactions
       </button>
       <button
-        className="sc-fYxtnH bYcRiT"
+        className="sc-jqCOkK eRXVap"
         onClick={[Function]}
       >
         eTokens
       </button>
     </div>
     <div
-      className="sc-tilXH gcpRYy"
+      className="sc-uJMKN cJDvdW"
     >
       <div />
       <span
         aria-label="party emoji"
         role="img"
       >
         🎉
       </span>
       Congratulations on your new wallet!
        
       <span
         aria-label="party emoji"
         role="img"
       >
         🎉
       </span>
       <br />
        Start using the wallet immediately to receive
        
       XEC
        payments, or load it up with
        
       XEC
        to send to others
     </div>
     <div
-      className="sc-tilXH boVOvg"
+      className="sc-uJMKN kYtMAo"
     >
       <a
-        className="sc-kafWEX ekuTxS"
+        className="sc-fYxtnH bPDqwb"
         href="/tokens"
         onClick={[Function]}
       >
         Create eToken
       </a>
       <p>
         Tokens sent to your 
         eToken
          address will appear here
       </p>
     </div>
   </div>,
 ]
 `;
 
 exports[`Wallet with BCH balances and tokens and state field 1`] = `
 Array [
   <div
-    className="sc-hmzhuo cYAKWr"
+    className="sc-cHGsZl hVnbsR"
   >
     <h4
-      className="sc-gGBfsJ ZgQrz"
+      className="sc-jbKcbu hzeiL"
     >
       MigrationTestAlpha
     </h4>
     <div
-      className="sc-kvZOFW cxOlCC"
+      className="sc-kgAjT duALJk"
     >
       0.06
        
       XEC
     </div>
   </div>,
   <div
-    className="sc-cJSrbW hStxoF"
+    className="sc-gisBJw kvMXiK"
   >
     <div
-      className="sc-jnlKLf loFZIX"
+      className="sc-dNLxif fHesDD"
     >
       <button
-        className="sc-fYxtnH gnEKHM"
+        className="sc-jqCOkK iIgnrK"
         onClick={[Function]}
       >
         Transactions
       </button>
       <button
-        className="sc-fYxtnH bYcRiT"
+        className="sc-jqCOkK eRXVap"
         onClick={[Function]}
       >
         eTokens
       </button>
     </div>
     <div
-      className="sc-tilXH gcpRYy"
+      className="sc-uJMKN cJDvdW"
     >
       <div />
       <span
         aria-label="party emoji"
         role="img"
       >
         🎉
       </span>
       Congratulations on your new wallet!
        
       <span
         aria-label="party emoji"
         role="img"
       >
         🎉
       </span>
       <br />
        Start using the wallet immediately to receive
        
       XEC
        payments, or load it up with
        
       XEC
        to send to others
     </div>
     <div
-      className="sc-tilXH boVOvg"
+      className="sc-uJMKN kYtMAo"
     >
       <a
-        className="sc-kafWEX ekuTxS"
+        className="sc-fYxtnH bPDqwb"
         href="/tokens"
         onClick={[Function]}
       >
         Create eToken
       </a>
       <div>
         <a
           href="/send-token/bd1acc4c986de57af8d6d2a64aecad8c30ee80f37ae9d066d758923732ddc9ba"
           onClick={[Function]}
         >
           <div
             className="sc-ckVGcZ fPvBhX"
           >
             <div
               className="sc-dxgOiQ CHiNn"
             >
               <div
                 className="sc-kpOJdX kKjisQ"
               />
               <h4>
                 TBS
               </h4>
             </div>
             <h4>
               6.001
             </h4>
           </div>
         </a>
       </div>
     </div>
   </div>,
 ]
 `;
 
 exports[`Wallet without BCH balance 1`] = `
 Array [
   <div
-    className="sc-hmzhuo cYAKWr"
+    className="sc-cHGsZl hVnbsR"
   >
     <h4
-      className="sc-gGBfsJ ZgQrz"
+      className="sc-jbKcbu hzeiL"
     >
       MigrationTestAlpha
     </h4>
     <div
-      className="sc-kvZOFW cxOlCC"
+      className="sc-kgAjT duALJk"
     >
       0
        
       XEC
     </div>
   </div>,
   <div
-    className="sc-cJSrbW hStxoF"
+    className="sc-gisBJw kvMXiK"
   >
     <div
-      className="sc-jnlKLf loFZIX"
+      className="sc-dNLxif fHesDD"
     >
       <button
-        className="sc-fYxtnH gnEKHM"
+        className="sc-jqCOkK iIgnrK"
         onClick={[Function]}
       >
         Transactions
       </button>
       <button
-        className="sc-fYxtnH bYcRiT"
+        className="sc-jqCOkK eRXVap"
         onClick={[Function]}
       >
         eTokens
       </button>
     </div>
     <div
-      className="sc-tilXH gcpRYy"
+      className="sc-uJMKN cJDvdW"
     >
       <div />
       <span
         aria-label="party emoji"
         role="img"
       >
         🎉
       </span>
       Congratulations on your new wallet!
        
       <span
         aria-label="party emoji"
         role="img"
       >
         🎉
       </span>
       <br />
        Start using the wallet immediately to receive
        
       XEC
        payments, or load it up with
        
       XEC
        to send to others
     </div>
     <div
-      className="sc-tilXH boVOvg"
+      className="sc-uJMKN kYtMAo"
     >
       <a
-        className="sc-kafWEX ekuTxS"
+        className="sc-fYxtnH bPDqwb"
         href="/tokens"
         onClick={[Function]}
       >
         Create eToken
       </a>
       <p>
         Tokens sent to your 
         eToken
          address will appear here
       </p>
     </div>
   </div>,
 ]
 `;
 
 exports[`Without wallet defined 1`] = `
 <div
   className="sc-chPdSV cOYtDU"
 >
   <h2>
     Welcome to Cashtab!
   </h2>
   <p
     className="sc-kgoBCf iXiIML"
   >
     Cashtab is an
      
     <a
       className="sc-kGXeez dlhNKT"
       href="https://github.com/bitcoin-abc/bitcoin-abc"
       rel="noreferrer"
       target="_blank"
     >
       open source,
     </a>
      
     non-custodial web wallet for 
     eCash
     .
     <br />
     <br />
     Want to learn more?
      
     <a
       className="sc-kGXeez dlhNKT"
       href="https://docs.cashtabapp.com/docs/"
       rel="noreferrer"
       target="_blank"
     >
       Check out the Cashtab documentation.
     </a>
   </p>
   <button
     className="sc-jzJRlG lltaza"
     onClick={[Function]}
   >
     <span
       aria-label="plus-square"
       className="anticon anticon-plus-square"
       role="img"
     >
       <svg
         aria-hidden="true"
         data-icon="plus-square"
         fill="currentColor"
         focusable="false"
         height="1em"
         viewBox="64 64 896 896"
         width="1em"
       >
         <path
           d="M328 544h152v152c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V544h152c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H544V328c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v152H328c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8z"
         />
         <path
           d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-40 728H184V184h656v656z"
         />
       </svg>
     </span>
      New Wallet
   </button>
   <button
     className="sc-cSHVUG fQByuZ"
     onClick={[Function]}
   >
     <span
       aria-label="import"
       className="anticon anticon-import"
       role="img"
     >
       <svg
         aria-hidden="true"
         data-icon="import"
         fill="currentColor"
         focusable="false"
         height="1em"
         viewBox="64 64 896 896"
         width="1em"
       >
         <path
           d="M888.3 757.4h-53.8c-4.2 0-7.7 3.5-7.7 7.7v61.8H197.1V197.1h629.8v61.8c0 4.2 3.5 7.7 7.7 7.7h53.8c4.2 0 7.7-3.4 7.7-7.7V158.7c0-17-13.7-30.7-30.7-30.7H158.7c-17 0-30.7 13.7-30.7 30.7v706.6c0 17 13.7 30.7 30.7 30.7h706.6c17 0 30.7-13.7 30.7-30.7V765.1c0-4.3-3.5-7.7-7.7-7.7zM902 476H588v-76c0-6.7-7.8-10.5-13-6.3l-141.9 112a8 8 0 000 12.6l141.9 112c5.3 4.2 13 .4 13-6.3v-76h314c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8z"
         />
       </svg>
     </span>
      Import Wallet
   </button>
 </div>
 `;
diff --git a/web/cashtab-v2/src/components/Send/Send.js b/web/cashtab-v2/src/components/Send/Send.js
index a0ce230be..001e1c985 100644
--- a/web/cashtab-v2/src/components/Send/Send.js
+++ b/web/cashtab-v2/src/components/Send/Send.js
@@ -1,1093 +1,1087 @@
 import React, { useState, useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import { WalletContext } from 'utils/context';
 import {
     AntdFormWrapper,
     SendBchInput,
     DestinationAddressSingle,
     DestinationAddressMulti,
 } from 'components/Common/EnhancedInputs';
 import { AdvancedCollapse } from 'components/Common/StyledCollapse';
-import { Form, message, Modal, Alert, Collapse, Input, Button } from 'antd';
+import { Form, message, Modal, Alert, Collapse, Input } from 'antd';
 import { Row, Col, Switch } from 'antd';
 import PrimaryButton, {
     SecondaryButton,
     SmartButton,
 } from 'components/Common/PrimaryButton';
 import useBCH from 'hooks/useBCH';
 import useWindowDimensions from 'hooks/useWindowDimensions';
 import {
     sendXecNotification,
     errorNotification,
     messageSignedNotification,
 } from 'components/Common/Notifications';
 import { isMobile, isIOS, isSafari } from 'react-device-detect';
 import { currency, parseAddressForParams } from 'components/Common/Ticker.js';
 import { Event } from 'utils/GoogleAnalytics';
 import {
     fiatToCrypto,
     shouldRejectAmountInput,
     isValidXecAddress,
     isValidEtokenAddress,
     isValidXecSendAmount,
 } from 'utils/validation';
 import BalanceHeader from 'components/Common/BalanceHeader';
 import BalanceHeaderFiat from 'components/Common/BalanceHeaderFiat';
 import {
     ZeroBalanceHeader,
     ConvertAmount,
     AlertMsg,
     WalletInfoCtn,
     SidePaddingCtn,
     FormLabel,
 } from 'components/Common/Atoms';
 import {
     getWalletState,
     convertToEcashPrefix,
     toLegacyCash,
     toLegacyCashArray,
     fromSmallestDenomination,
 } from 'utils/cashMethods';
 import ApiError from 'components/Common/ApiError';
 import { formatFiatBalance, formatBalance } from 'utils/formatting';
 import { TokenParamLabel } from 'components/Common/Atoms';
 import { PlusSquareOutlined } from '@ant-design/icons';
 import styled from 'styled-components';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import WalletLabel from 'components/Common/WalletLabel.js';
 
 const { Panel } = Collapse;
 const { TextArea } = Input;
 
 const SignMessageLabel = styled.div`
     text-align: left;
     color: ${props => props.theme.forms.text};
 `;
 
 const TextAreaLabel = styled.div`
     text-align: left;
     color: ${props => props.theme.forms.text};
     padding-left: 1px;
 `;
 
 const AmountPreviewCtn = styled.div`
     margin-top: -30px;
 `;
 
 const SendInputCtn = styled.div`
     .ant-form-item-with-help {
         margin-bottom: 32px;
     }
 `;
 
 const LocaleFormattedValue = styled.h3`
     color: ${props => props.theme.contrast};
     font-weight: bold;
     margin-bottom: 0;
 `;
 // Note jestBCH is only used for unit tests; BCHJS must be mocked for jest
 const SendBCH = ({ jestBCH, passLoadingStatus }) => {
     // use balance parameters from wallet.state object and not legacy balances parameter from walletState, if user has migrated wallet
     // this handles edge case of user with old wallet who has not opened latest Cashtab version yet
 
     // If the wallet object from ContextValue has a `state key`, then check which keys are in the wallet object
     // Else set it as blank
     const ContextValue = React.useContext(WalletContext);
     const location = useLocation();
     const { wallet, fiatPrice, apiError, cashtabSettings } = ContextValue;
     const walletState = getWalletState(wallet);
     const { balances, slpBalancesAndUtxos } = walletState;
     // Modal settings
     const [showConfirmMsgToSign, setShowConfirmMsgToSign] = useState(false);
     const [msgToSign, setMsgToSign] = useState('');
     const [signMessageIsValid, setSignMessageIsValid] = useState(null);
     const [isOneToManyXECSend, setIsOneToManyXECSend] = useState(false);
     const [opReturnMsg, setOpReturnMsg] = useState(false);
     const [isEncryptedOptionalOpReturnMsg, setIsEncryptedOptionalOpReturnMsg] =
         useState(false);
     const [bchObj, setBchObj] = useState(false);
 
     // Get device window width
     // If this is less than 769, the page will open with QR scanner open
     const { width } = useWindowDimensions();
     // Load with QR code open if device is mobile and NOT iOS + anything but safari
     const scannerSupported = width < 769 && isMobile && !(isIOS && !isSafari);
 
     const [formData, setFormData] = useState({
         value: '',
         address: '',
     });
     const [queryStringText, setQueryStringText] = useState(null);
     const [sendBchAddressError, setSendBchAddressError] = useState(false);
     const [sendBchAmountError, setSendBchAmountError] = useState(false);
     const [selectedCurrency, setSelectedCurrency] = useState(currency.ticker);
 
     // Support cashtab button from web pages
     const [txInfoFromUrl, setTxInfoFromUrl] = useState(false);
 
     // Show a confirmation modal on transactions created by populating form from web page button
     const [isModalVisible, setIsModalVisible] = useState(false);
 
     const [messageSignature, setMessageSignature] = useState('');
     const [sigCopySuccess, setSigCopySuccess] = useState('');
     const userLocale = navigator.language;
     const clearInputForms = () => {
         setFormData({
             value: '',
             address: '',
         });
         setOpReturnMsg(''); // OP_RETURN message has its own state field
     };
 
     const checkForConfirmationBeforeSendXec = () => {
         if (txInfoFromUrl) {
             setIsModalVisible(true);
         } else if (cashtabSettings.sendModal) {
             setIsModalVisible(cashtabSettings.sendModal);
         } else {
             // if the user does not have the send confirmation enabled in settings then send directly
             send();
         }
     };
 
     const handleOk = () => {
         setIsModalVisible(false);
         send();
     };
 
     const handleCancel = () => {
         setIsModalVisible(false);
     };
 
     const { getBCH, getRestUrl, sendXec, calcFee, signPkMessage } = useBCH();
 
     // If the balance has changed, unlock the UI
     // This is redundant, if backend has refreshed in 1.75s timeout below, UI will already be unlocked
     useEffect(() => {
         passLoadingStatus(false);
     }, [balances.totalBalance]);
 
     useEffect(() => {
         // jestBCH is only ever specified for unit tests, otherwise app will use getBCH();
         const BCH = jestBCH ? jestBCH : getBCH();
 
         // set the BCH instance to state, for other functions to reference
         setBchObj(BCH);
 
         // Manually parse for txInfo object on page load when Send.js is loaded with a query string
 
         // if this was routed from Wallet screen's Reply to message link then prepopulate the address and value field
         if (location && location.state && location.state.replyAddress) {
             setFormData({
                 address: location.state.replyAddress,
                 value: `${fromSmallestDenomination(currency.dustSats)}`,
             });
         }
 
         // if this was routed from the Airdrop screen's Airdrop Calculator then
         // switch to multiple recipient mode and prepopulate the recipients field
         if (location && location.state && location.state.airdropRecipients) {
             setIsOneToManyXECSend(true);
             setFormData({
                 address: location.state.airdropRecipients,
             });
 
             // validate the airdrop outputs from the calculator
             handleMultiAddressChange({
                 target: {
                     value: location.state.airdropRecipients,
                 },
             });
         }
 
         // Do not set txInfo in state if query strings are not present
         if (
             !window.location ||
             !window.location.hash ||
             window.location.hash === '#/send'
         ) {
             return;
         }
 
         const txInfoArr = window.location.hash.split('?')[1].split('&');
 
         // Iterate over this to create object
         const txInfo = {};
         for (let i = 0; i < txInfoArr.length; i += 1) {
             let txInfoKeyValue = txInfoArr[i].split('=');
             let key = txInfoKeyValue[0];
             let value = txInfoKeyValue[1];
             txInfo[key] = value;
         }
         console.log(`txInfo from page params`, txInfo);
         setTxInfoFromUrl(txInfo);
         populateFormsFromUrl(txInfo);
     }, []);
 
     function populateFormsFromUrl(txInfo) {
         if (txInfo && txInfo.address && txInfo.value) {
             setFormData({
                 address: txInfo.address,
                 value: txInfo.value,
             });
         }
     }
 
     function handleSendXecError(errorObj, oneToManyFlag) {
         // Set loading to false here as well, as balance may not change depending on where error occured in try loop
         passLoadingStatus(false);
         let message;
 
         if (!errorObj.error && !errorObj.message) {
             message = `Transaction failed: no response from ${getRestUrl()}.`;
         } else if (
             /Could not communicate with full node or other external service/.test(
                 errorObj.error,
             )
         ) {
             message = 'Could not communicate with API. Please try again.';
         } else if (
             errorObj.error &&
             errorObj.error.includes(
                 'too-long-mempool-chain, too many unconfirmed ancestors [limit: 50] (code 64)',
             )
         ) {
             message = `The ${currency.ticker} you are trying to send has too many unconfirmed ancestors to send (limit 50). Sending will be possible after a block confirmation. Try again in about 10 minutes.`;
         } else {
             message =
                 errorObj.message || errorObj.error || JSON.stringify(errorObj);
         }
 
         if (oneToManyFlag) {
             errorNotification(errorObj, message, 'Sending XEC one to many');
         } else {
             errorNotification(errorObj, message, 'Sending XEC');
         }
     }
 
     async function send() {
         setFormData({
             ...formData,
         });
 
         if (isOneToManyXECSend) {
             // this is a one to many XEC send transactions
 
             // ensure multi-recipient input is not blank
             if (!formData.address) {
                 return;
             }
 
             // Event("Category", "Action", "Label")
             // Track number of XEC send-to-many transactions
             Event('Send.js', 'SendToMany', selectedCurrency);
 
             passLoadingStatus(true);
             const { address } = formData;
 
             //convert each line from TextArea input
             let addressAndValueArray = address.split('\n');
 
             try {
                 // construct array of XEC->BCH addresses due to bch-api constraint
                 let cleanAddressAndValueArray =
                     toLegacyCashArray(addressAndValueArray);
 
                 const link = await sendXec(
                     bchObj,
                     wallet,
                     slpBalancesAndUtxos.nonSlpUtxos,
                     currency.defaultFee,
                     opReturnMsg,
                     true, // indicate send mode is one to many
                     cleanAddressAndValueArray,
                 );
                 sendXecNotification(link);
                 clearInputForms();
             } catch (e) {
                 handleSendXecError(e, isOneToManyXECSend);
             }
         } else {
             // standard one to one XEC send transaction
 
             if (
                 !formData.address ||
                 !formData.value ||
                 Number(formData.value) <= 0
             ) {
                 return;
             }
 
             // Event("Category", "Action", "Label")
             // Track number of BCHA send transactions and whether users
             // are sending BCHA or USD
             Event('Send.js', 'Send', selectedCurrency);
 
             passLoadingStatus(true);
             const { address, value } = formData;
 
             // Get the param-free address
             let cleanAddress = address.split('?')[0];
 
             // Ensure address has bitcoincash: prefix and checksum
             cleanAddress = toLegacyCash(cleanAddress);
 
             // Calculate the amount in BCH
             let bchValue = value;
 
             if (selectedCurrency !== 'XEC') {
                 bchValue = fiatToCrypto(value, fiatPrice);
             }
 
             // encrypted message limit truncation
             let optionalOpReturnMsg;
             if (isEncryptedOptionalOpReturnMsg) {
                 optionalOpReturnMsg = opReturnMsg.substring(
                     0,
                     currency.opReturn.encryptedMsgCharLimit,
                 );
             } else {
                 optionalOpReturnMsg = opReturnMsg;
             }
 
             try {
                 const link = await sendXec(
                     bchObj,
                     wallet,
                     slpBalancesAndUtxos.nonSlpUtxos,
                     currency.defaultFee,
                     optionalOpReturnMsg,
                     false, // sendToMany boolean flag
                     null, // address array not applicable for one to many tx
                     cleanAddress,
                     bchValue,
                     isEncryptedOptionalOpReturnMsg,
                 );
                 sendXecNotification(link);
                 clearInputForms();
             } catch (e) {
                 handleSendXecError(e, isOneToManyXECSend);
             }
         }
     }
 
     const handleAddressChange = e => {
         const { value, name } = e.target;
         let error = false;
         let addressString = value;
         // parse address for parameters
         const addressInfo = parseAddressForParams(addressString);
         // validate address
         const isValid = isValidXecAddress(addressInfo.address);
 
         /*
         Model
 
         addressInfo = 
         {
             address: '',
             queryString: '',
             amount: null,
         };
         */
 
         const { address, queryString, amount } = addressInfo;
 
         // If query string,
         // Show an alert that only amount and currency.ticker are supported
         setQueryStringText(queryString);
 
         // Is this valid address?
         if (!isValid) {
             error = `Invalid ${currency.ticker} address`;
             // If valid address but token format
             if (isValidEtokenAddress(address)) {
                 error = `eToken addresses are not supported for ${currency.ticker} sends`;
             }
         }
         setSendBchAddressError(error);
 
         // Set amount if it's in the query string
         if (amount !== null) {
             // Set currency to BCHA
             setSelectedCurrency(currency.ticker);
 
             // Use this object to mimic user input and get validation for the value
             let amountObj = {
                 target: {
                     name: 'value',
                     value: amount,
                 },
             };
             handleBchAmountChange(amountObj);
             setFormData({
                 ...formData,
                 value: amount,
             });
         }
 
         // Set address field to user input
         setFormData(p => ({
             ...p,
             [name]: value,
         }));
     };
 
     const handleMultiAddressChange = e => {
         const { value, name } = e.target;
         let error;
 
         if (!value) {
             error = 'Input must not be blank';
             setSendBchAddressError(error);
             return setFormData(p => ({
                 ...p,
                 [name]: value,
             }));
         }
 
         //convert each line from the <TextArea> input into array
         let addressStringArray = value.split('\n');
         const arrayLength = addressStringArray.length;
 
         // loop through each row in the <TextArea> input
         for (let i = 0; i < arrayLength; i++) {
             if (addressStringArray[i].trim() === '') {
                 // if this line is a line break or bunch of spaces
                 error = 'Empty spaces and rows must be removed';
                 setSendBchAddressError(error);
                 return setFormData(p => ({
                     ...p,
                     [name]: value,
                 }));
             }
 
             let addressString = addressStringArray[i].split(',')[0];
             let valueString = addressStringArray[i].split(',')[1];
 
             const validAddress = isValidXecAddress(addressString);
             const validValueString = isValidXecSendAmount(valueString);
 
             if (!validAddress) {
                 error = `Invalid XEC address: ${addressString}, ${valueString}`;
                 setSendBchAddressError(error);
                 return setFormData(p => ({
                     ...p,
                     [name]: value,
                 }));
             }
             if (!validValueString) {
                 error = `Amount must be at least ${fromSmallestDenomination(
                     currency.dustSats,
                 )} XEC: ${addressString}, ${valueString}`;
                 setSendBchAddressError(error);
                 return setFormData(p => ({
                     ...p,
                     [name]: value,
                 }));
             }
         }
 
         // If iterate to end of array with no errors, then there is no error msg
         setSendBchAddressError(false);
 
         // Set address field to user input
         setFormData(p => ({
             ...p,
             [name]: value,
         }));
     };
 
     const handleSelectedCurrencyChange = e => {
         setSelectedCurrency(e);
         // Clear input field to prevent accidentally sending 1 BCH instead of 1 USD
         setFormData(p => ({
             ...p,
             value: '',
         }));
     };
 
-    // true: renders the multi recipient <TextArea>
-    // false: renders the single recipient <Input>
-    const handleOneToManyXECSend = sendXecMode => {
-        setIsOneToManyXECSend(sendXecMode);
-    };
-
     const handleBchAmountChange = e => {
         const { value, name } = e.target;
         let bchValue = value;
         const error = shouldRejectAmountInput(
             bchValue,
             selectedCurrency,
             fiatPrice,
             balances.totalBalance,
         );
         setSendBchAmountError(error);
 
         setFormData(p => ({
             ...p,
             [name]: value,
         }));
     };
 
     const handleSignMsgChange = e => {
         const { value } = e.target;
         // validation
         if (value && value.length && value.length < 150) {
             setMsgToSign(value);
             setSignMessageIsValid(true);
         } else {
             setSignMessageIsValid(false);
         }
     };
 
     const signMessageByPk = async () => {
         try {
             const messageSignature = await signPkMessage(
                 bchObj,
                 wallet.Path1899.fundingWif,
                 msgToSign,
             );
             setMessageSignature(messageSignature);
             messageSignedNotification(messageSignature);
         } catch (err) {
             let message;
             if (!err.error && !err.message) {
                 message = err.message || err.error || JSON.stringify(err);
             }
             errorNotification(err, message, 'Message Signing Error');
             throw err;
         }
         // Hide the modal
         setShowConfirmMsgToSign(false);
         setSigCopySuccess('');
     };
 
     const handleOnSigCopy = () => {
         if (messageSignature != '') {
             setSigCopySuccess('Signature copied to clipboard');
         }
     };
 
     const onMax = async () => {
         // Clear amt error
         setSendBchAmountError(false);
         // Set currency to BCH
         setSelectedCurrency(currency.ticker);
         try {
             const txFeeSats = calcFee(bchObj, slpBalancesAndUtxos.nonSlpUtxos);
 
             const txFeeBch = txFeeSats / 10 ** currency.cashDecimals;
             let value =
                 balances.totalBalance - txFeeBch >= 0
                     ? (balances.totalBalance - txFeeBch).toFixed(
                           currency.cashDecimals,
                       )
                     : 0;
 
             setFormData({
                 ...formData,
                 value,
             });
         } catch (err) {
             console.log(`Error in onMax:`);
             console.log(err);
             message.error(
                 'Unable to calculate the max value due to network errors',
             );
         }
     };
     // Display price in USD below input field for send amount, if it can be calculated
     let fiatPriceString = '';
     if (fiatPrice !== null && !isNaN(formData.value)) {
         if (selectedCurrency === currency.ticker) {
             // calculate conversion to fiatPrice
             fiatPriceString = `${(fiatPrice * Number(formData.value)).toFixed(
                 2,
             )}`;
 
             // formats to fiat locale style
             fiatPriceString = formatFiatBalance(
                 Number(fiatPriceString),
                 userLocale,
             );
 
             // insert symbol and currency before/after the locale formatted fiat balance
             fiatPriceString = `${
                 cashtabSettings
                     ? `${
                           currency.fiatCurrencies[cashtabSettings.fiatCurrency]
                               .symbol
                       } `
                     : '$ '
             } ${fiatPriceString} ${
                 cashtabSettings && cashtabSettings.fiatCurrency
                     ? cashtabSettings.fiatCurrency.toUpperCase()
                     : 'USD'
             }`;
         } else {
             fiatPriceString = `${
                 formData.value
                     ? formatFiatBalance(
                           Number(fiatToCrypto(formData.value, fiatPrice)),
                           userLocale,
                       )
                     : formatFiatBalance(0, userLocale)
             } ${currency.ticker}`;
         }
     }
 
     const priceApiError = fiatPrice === null && selectedCurrency !== 'XEC';
 
     return (
         <>
             <Modal
                 title="Confirm Send"
                 visible={isModalVisible}
                 onOk={handleOk}
                 onCancel={handleCancel}
             >
                 <p>
                     {isOneToManyXECSend
                         ? `are you sure you want to send the following One to Many transaction?
                     ${formData.address}`
                         : `Are you sure you want to send ${formData.value}${' '}
                   ${currency.ticker} to ${formData.address}?`}
                 </p>
             </Modal>
             <WalletInfoCtn>
                 <WalletLabel name={wallet.name}></WalletLabel>
                 {!balances.totalBalance ? (
                     <ZeroBalanceHeader>
                         You currently have 0 {currency.ticker}
                         <br />
                         Deposit some funds to use this feature
                     </ZeroBalanceHeader>
                 ) : (
                     <>
                         <BalanceHeader
                             balance={balances.totalBalance}
                             ticker={currency.ticker}
                         />
 
                         <BalanceHeaderFiat
                             balance={balances.totalBalance}
                             settings={cashtabSettings}
                             fiatPrice={fiatPrice}
                         />
                     </>
                 )}
             </WalletInfoCtn>
             <SidePaddingCtn>
                 <Row type="flex">
                     <Col span={24}>
                         <Form
                             style={{
                                 width: 'auto',
                                 marginTop: '40px',
                             }}
                         >
                             {!isOneToManyXECSend ? (
                                 <SendInputCtn>
                                     <FormLabel>Send to</FormLabel>
                                     <DestinationAddressSingle
                                         style={{ marginBottom: '0px' }}
                                         loadWithCameraOpen={
                                             location &&
                                             location.state &&
                                             location.state.replyAddress
                                                 ? false
                                                 : scannerSupported
                                         }
                                         validateStatus={
                                             sendBchAddressError ? 'error' : ''
                                         }
                                         help={
                                             sendBchAddressError
                                                 ? sendBchAddressError
                                                 : ''
                                         }
                                         onScan={result =>
                                             handleAddressChange({
                                                 target: {
                                                     name: 'address',
                                                     value: result,
                                                 },
                                             })
                                         }
                                         inputProps={{
                                             placeholder: `${currency.ticker} Address`,
                                             name: 'address',
                                             onChange: e =>
                                                 handleAddressChange(e),
                                             required: true,
                                             value: formData.address,
                                         }}
                                     ></DestinationAddressSingle>
                                     <FormLabel>Amount</FormLabel>
                                     <SendBchInput
                                         activeFiatCode={
                                             cashtabSettings &&
                                             cashtabSettings.fiatCurrency
                                                 ? cashtabSettings.fiatCurrency.toUpperCase()
                                                 : 'USD'
                                         }
                                         validateStatus={
                                             sendBchAmountError ? 'error' : ''
                                         }
                                         help={
                                             sendBchAmountError
                                                 ? sendBchAmountError
                                                 : ''
                                         }
                                         onMax={onMax}
                                         inputProps={{
                                             name: 'value',
                                             dollar:
                                                 selectedCurrency === 'USD'
                                                     ? 1
                                                     : 0,
                                             placeholder: 'Amount',
                                             onChange: e =>
                                                 handleBchAmountChange(e),
                                             required: true,
                                             value: formData.value,
                                             disabled: priceApiError,
                                         }}
                                         selectProps={{
                                             value: selectedCurrency,
                                             disabled: queryStringText !== null,
                                             onChange: e =>
                                                 handleSelectedCurrencyChange(e),
                                         }}
                                     ></SendBchInput>
                                     {priceApiError && (
                                         <AlertMsg>
                                             Error fetching fiat price. Setting
                                             send by{' '}
                                             {currency.fiatCurrencies[
                                                 cashtabSettings.fiatCurrency
                                             ].slug.toUpperCase()}{' '}
                                             disabled
                                         </AlertMsg>
                                     )}
                                 </SendInputCtn>
                             ) : (
                                 <>
                                     <FormLabel>Send to</FormLabel>
                                     <DestinationAddressMulti
                                         validateStatus={
                                             sendBchAddressError ? 'error' : ''
                                         }
                                         help={
                                             sendBchAddressError
                                                 ? sendBchAddressError
                                                 : ''
                                         }
                                         inputProps={{
                                             placeholder: `One XEC address & value per line, separated by comma \ne.g. \necash:qpatql05s9jfavnu0tv6lkjjk25n6tmj9gkpyrlwu8,500 \necash:qzvydd4n3lm3xv62cx078nu9rg0e3srmqq0knykfed,700`,
                                             name: 'address',
                                             onChange: e =>
                                                 handleMultiAddressChange(e),
                                             required: true,
                                             value: formData.address,
                                         }}
                                     ></DestinationAddressMulti>
                                 </>
                             )}
                             {!priceApiError && !isOneToManyXECSend && (
                                 <AmountPreviewCtn>
                                     <LocaleFormattedValue>
                                         {formatBalance(
                                             formData.value,
                                             userLocale,
                                         )}{' '}
                                         {selectedCurrency}
                                     </LocaleFormattedValue>
                                     <ConvertAmount>
                                         {fiatPriceString !== '' && '='}{' '}
                                         {fiatPriceString}
                                     </ConvertAmount>
                                 </AmountPreviewCtn>
                             )}
 
                             {queryStringText && (
                                 <Alert
                                     message={`You are sending a transaction to an address including query parameters "${queryStringText}." Only the "amount" parameter, in units of ${currency.ticker} satoshis, is currently supported.`}
                                     type="warning"
                                 />
                             )}
                             <div
                                 style={{
                                     paddingTop: '12px',
                                 }}
                             >
                                 {!balances.totalBalance ||
                                 apiError ||
                                 sendBchAmountError ||
                                 sendBchAddressError ||
                                 priceApiError ? (
                                     <SecondaryButton>Send</SecondaryButton>
                                 ) : (
                                     <>
                                         {txInfoFromUrl ? (
                                             <PrimaryButton
                                                 onClick={() =>
                                                     checkForConfirmationBeforeSendXec()
                                                 }
                                             >
                                                 Send
                                             </PrimaryButton>
                                         ) : (
                                             <PrimaryButton
                                                 onClick={() => {
                                                     checkForConfirmationBeforeSendXec();
                                                 }}
                                             >
                                                 Send
                                             </PrimaryButton>
                                         )}
                                     </>
                                 )}
                             </div>
                             <div>
                                 <AdvancedCollapse
                                     style={{
                                         marginBottom: '12px',
                                     }}
                                     defaultActiveKey={
                                         location &&
                                         location.state &&
                                         location.state.replyAddress
                                             ? ['1']
                                             : ['0']
                                     }
                                 >
                                     <Panel header="Advanced" key="1">
                                         <AntdFormWrapper
                                             style={{
                                                 marginBottom: '20px',
                                             }}
                                         >
                                             <TextAreaLabel>
                                                 Multiple Recipients:&nbsp;&nbsp;
                                                 <Switch
                                                     defaultunchecked="true"
                                                     checked={isOneToManyXECSend}
                                                     onChange={() => {
                                                         setIsOneToManyXECSend(
                                                             !isOneToManyXECSend,
                                                         );
                                                         setIsEncryptedOptionalOpReturnMsg(
                                                             false,
                                                         );
                                                     }}
                                                     style={{
                                                         marginBottom: '7px',
                                                     }}
                                                 />
                                             </TextAreaLabel>
                                             <TextAreaLabel>
                                                 Message:&nbsp;&nbsp;
                                                 <Switch
                                                     disabled={
                                                         isOneToManyXECSend
                                                     }
                                                     style={{
                                                         marginBottom: '7px',
                                                     }}
                                                     checkedChildren="Private"
                                                     unCheckedChildren="Public"
                                                     defaultunchecked="true"
                                                     checked={
                                                         isEncryptedOptionalOpReturnMsg
                                                     }
                                                     onChange={() => {
                                                         setIsEncryptedOptionalOpReturnMsg(
                                                             prev => !prev,
                                                         );
                                                         setIsOneToManyXECSend(
                                                             false,
                                                         );
                                                     }}
                                                 />
                                             </TextAreaLabel>
                                             {isEncryptedOptionalOpReturnMsg ? (
                                                 <Alert
                                                     style={{
                                                         marginBottom: '10px',
                                                     }}
                                                     description="Please note encrypted messages can only be sent to wallets with at least 1 outgoing transaction."
                                                     type="warning"
                                                     showIcon
                                                 />
                                             ) : (
                                                 <Alert
                                                     style={{
                                                         marginBottom: '10px',
                                                     }}
                                                     description="Please note this message will be public."
                                                     type="warning"
                                                     showIcon
                                                 />
                                             )}
                                             <TextArea
                                                 name="opReturnMsg"
                                                 placeholder={
                                                     isEncryptedOptionalOpReturnMsg
                                                         ? `(max ${currency.opReturn.encryptedMsgCharLimit} characters)`
                                                         : `(max ${currency.opReturn.unencryptedMsgCharLimit} characters)`
                                                 }
                                                 value={
                                                     opReturnMsg
                                                         ? isEncryptedOptionalOpReturnMsg
                                                             ? opReturnMsg.substring(
                                                                   0,
                                                                   currency
                                                                       .opReturn
                                                                       .encryptedMsgCharLimit +
                                                                       1,
                                                               )
                                                             : opReturnMsg
                                                         : ''
                                                 }
                                                 onChange={e =>
                                                     setOpReturnMsg(
                                                         e.target.value,
                                                     )
                                                 }
                                                 showCount
                                                 maxLength={
                                                     isEncryptedOptionalOpReturnMsg
                                                         ? currency.opReturn
                                                               .encryptedMsgCharLimit
                                                         : currency.opReturn
                                                               .unencryptedMsgCharLimit
                                                 }
                                                 onKeyDown={e =>
                                                     e.keyCode == 13
                                                         ? e.preventDefault()
                                                         : ''
                                                 }
                                             />
                                         </AntdFormWrapper>
                                     </Panel>
                                 </AdvancedCollapse>
                             </div>
                             {apiError && <ApiError />}
                         </Form>
                     </Col>
                 </Row>
 
                 <Modal
                     title={`Please review and confirm your message to be signed using this wallet.`}
                     visible={showConfirmMsgToSign}
                     onOk={signMessageByPk}
                     onCancel={() => setShowConfirmMsgToSign(false)}
                 >
                     <TokenParamLabel>Message:</TokenParamLabel> {msgToSign}
                     <br />
                 </Modal>
                 <AdvancedCollapse
                     style={{
                         marginBottom: '24px',
                     }}
                 >
                     <Panel header="Sign Message" key="1">
                         <AntdFormWrapper>
                             <Form
                                 size="small"
                                 style={{
                                     width: 'auto',
                                 }}
                             >
                                 <Form.Item>
                                     <SignMessageLabel>
                                         Message:
                                     </SignMessageLabel>
                                     <TextArea
                                         name="signMessage"
                                         onChange={e => handleSignMsgChange(e)}
                                         showCount
                                         maxLength={150}
                                     />
                                 </Form.Item>
                                 <Form.Item>
                                     <SignMessageLabel>
                                         Address:
                                     </SignMessageLabel>
                                     <Input
                                         name="signMessageAddress"
                                         disabled={true}
                                         value={
                                             wallet &&
                                             wallet.Path1899 &&
                                             wallet.Path1899.cashAddress
                                                 ? convertToEcashPrefix(
                                                       wallet.Path1899
                                                           .cashAddress,
                                                   )
                                                 : ''
                                         }
                                     />
                                 </Form.Item>
                                 <SmartButton
                                     onClick={() =>
                                         setShowConfirmMsgToSign(true)
                                     }
                                     disabled={!signMessageIsValid}
                                 >
                                     <PlusSquareOutlined />
                                     &nbsp;Sign Message
                                 </SmartButton>
                                 <CopyToClipboard
                                     style={{
                                         display: 'inline-block',
                                         width: '100%',
                                         position: 'relative',
                                     }}
                                     text={messageSignature}
                                 >
                                     <Form.Item>
                                         <SignMessageLabel>
                                             Signature:
                                         </SignMessageLabel>
                                         <TextArea
                                             name="signMessageSignature"
                                             placeholder="The signature will be generated upon signing of the message"
                                             readOnly={true}
                                             value={messageSignature}
                                             onClick={() => handleOnSigCopy()}
                                         />
                                     </Form.Item>
                                 </CopyToClipboard>
                                 {sigCopySuccess}
                             </Form>
                         </AntdFormWrapper>
                     </Panel>
                 </AdvancedCollapse>
             </SidePaddingCtn>
         </>
     );
 };
 
 /*
 passLoadingStatus must receive a default prop that is a function
 in order to pass the rendering unit test in Send.test.js
 
 status => {console.log(status)} is an arbitrary stub function
 */
 
 SendBCH.defaultProps = {
     passLoadingStatus: status => {
         console.log(status);
     },
 };
 
 SendBCH.propTypes = {
     jestBCH: PropTypes.object,
     passLoadingStatus: PropTypes.func,
 };
 
 export default SendBCH;
diff --git a/web/cashtab-v2/src/components/Tokens/CreateTokenForm.js b/web/cashtab-v2/src/components/Tokens/CreateTokenForm.js
index 0548c8311..dcbc11ba4 100644
--- a/web/cashtab-v2/src/components/Tokens/CreateTokenForm.js
+++ b/web/cashtab-v2/src/components/Tokens/CreateTokenForm.js
@@ -1,813 +1,812 @@
 import React, { useState, useCallback } from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import { AntdFormWrapper } from 'components/Common/EnhancedInputs';
-import { TokenCollapse } from 'components/Common/StyledCollapse';
 import { currency } from 'components/Common/Ticker.js';
 import {
     CropControlModal,
     CropperContainer,
     ControlsContainer,
 } from '../Common/CropControlModal';
 import { WalletContext } from 'utils/context';
 import {
     isValidTokenName,
     isValidTokenTicker,
     isValidTokenDecimals,
     isValidTokenInitialQty,
     isValidTokenDocumentUrl,
 } from 'utils/validation';
 import {
     PlusSquareOutlined,
     UploadOutlined,
     PaperClipOutlined,
 } from '@ant-design/icons';
 import { SmartButton } from 'components/Common/PrimaryButton';
 import {
-    notification,
-    Collapse,
     Form,
     Input,
     Modal,
     Button,
     Slider,
     Tooltip,
     Upload,
     Typography,
     Switch,
 } from 'antd';
 import { TokenParamLabel, FormLabel } from 'components/Common/Atoms';
 import {
     createTokenNotification,
     tokenIconSubmitSuccess,
     errorNotification,
 } from 'components/Common/Notifications';
 import Cropper from 'react-easy-crop';
 import getCroppedImg from 'utils/icons/cropImage';
 import getRoundImg from 'utils/icons/roundImage';
 import getResizedImage from 'utils/icons/resizeImage';
 
 const { Dragger } = Upload;
 
 export const CreateTokenCtn = styled.div`
     margin-top: 20px;
     h3 {
         color: ${props => props.theme.contrast};
     }
     .ant-form-item {
         margin-bottom: 0px;
     }
 `;
 
 const CreateTokenForm = ({
     BCH,
     getRestUrl,
     createToken,
     disabled,
     passLoadingStatus,
 }) => {
     const { wallet } = React.useContext(WalletContext);
 
     // eToken icon adds
     const [tokenIcon, setTokenIcon] = useState('');
     const [loading, setLoading] = useState(false);
     const [fileName, setFileName] = useState('');
     const [tokenIconFileList, setTokenIconFileList] = useState();
     const [rawImageUrl, setRawImageUrl] = useState('');
     const [imageUrl, setImageUrl] = useState('');
     const [showCropModal, setShowCropModal] = useState(false);
     const [roundSelection, setRoundSelection] = useState(true);
 
     const [crop, setCrop] = useState({ x: 0, y: 0 });
     const [rotation, setRotation] = useState(0);
     const [zoom, setZoom] = useState(1);
     const [croppedAreaPixels, setCroppedAreaPixels] = useState(null);
 
     const onCropComplete = useCallback((croppedArea, croppedAreaPixels) => {
         setCroppedAreaPixels(croppedAreaPixels);
     }, []);
 
     const showCroppedImage = useCallback(async () => {
         setLoading(true);
 
         try {
             let imageToResize;
 
             const croppedResult = await getCroppedImg(
                 rawImageUrl,
                 croppedAreaPixels,
                 rotation,
                 fileName,
             );
 
             if (roundSelection) {
                 imageToResize = await getRoundImg(croppedResult.url, fileName);
             } else {
                 imageToResize = croppedResult;
             }
 
             await getResizedImage(
                 imageToResize.url,
                 resizedResult => {
                     setTokenIcon(resizedResult.file);
                     setImageUrl(resizedResult.url);
                 },
                 fileName,
             );
         } catch (e) {
             console.error(e);
         } finally {
             setLoading(false);
         }
     }, [croppedAreaPixels, fileName, rawImageUrl, rotation, roundSelection]);
 
     const onClose = useCallback(() => {
         setShowCropModal(false);
     }, []);
 
     const handleTokenIconImage = (imgFile, callback) =>
         new Promise((resolve, reject) => {
             setLoading(true);
             try {
                 const reader = new FileReader();
 
                 const width = 128;
                 const height = 128;
                 reader.readAsDataURL(imgFile);
 
                 reader.addEventListener('load', () =>
                     setRawImageUrl(reader.result),
                 );
 
                 reader.onload = event => {
                     const img = new Image();
                     img.src = event.target.result;
                     img.onload = () => {
                         const elem = document.createElement('canvas');
                         //console.log(`Canvas created`);
                         elem.width = width;
                         elem.height = height;
                         const ctx = elem.getContext('2d');
                         // img.width and img.height will contain the original dimensions
                         ctx.drawImage(img, 0, 0, width, height);
                         if (!HTMLCanvasElement.prototype.toBlob) {
                             Object.defineProperty(
                                 HTMLCanvasElement.prototype,
                                 'toBlob',
                                 {
                                     value: function (callback, type, quality) {
                                         var dataURL = this.toDataURL(
                                             type,
                                             quality,
                                         ).split(',')[1];
                                         setTimeout(function () {
                                             var binStr = atob(dataURL),
                                                 len = binStr.length,
                                                 arr = new Uint8Array(len);
                                             for (var i = 0; i < len; i++) {
                                                 arr[i] = binStr.charCodeAt(i);
                                             }
                                             callback(
                                                 new Blob([arr], {
                                                     type: type || 'image/png',
                                                 }),
                                             );
                                         });
                                     },
                                 },
                             );
                         }
 
                         ctx.canvas.toBlob(
                             blob => {
                                 console.log(imgFile.name);
 
                                 let fileNameParts = imgFile.name.split('.');
                                 fileNameParts.pop();
                                 let fileNamePng =
                                     fileNameParts.join('.') + '.png';
 
                                 const file = new File([blob], fileNamePng, {
                                     type: 'image/png',
                                 });
                                 setFileName(fileNamePng);
                                 const resultReader = new FileReader();
 
                                 resultReader.readAsDataURL(file);
                                 setTokenIcon(file);
                                 resultReader.addEventListener('load', () =>
                                     callback(resultReader.result),
                                 );
                                 setLoading(false);
                                 setShowCropModal(true);
                                 resolve();
                             },
                             'image/png',
                             1,
                         );
                     };
                 };
             } catch (err) {
                 console.log(`Error in handleTokenIconImage()`);
                 console.log(err);
                 reject(err);
             }
         });
 
     const transformTokenIconFile = file => {
         return new Promise((resolve, reject) => {
+            // Dragger requires this function to work properly with file as an input;
+            // linter requires file param to be used in the function.
+            console.log(file);
             reject();
-            // setLoading(false);
         });
     };
 
     const beforeTokenIconUpload = file => {
         const approvedFileTypes = ['image/png', 'image/jpg', 'image/jpeg'];
         try {
             if (!approvedFileTypes.includes(file.type)) {
                 throw new Error('Only jpg or png image files are accepted');
             } else {
                 setLoading(true);
                 handleTokenIconImage(file, imageUrl => setImageUrl(imageUrl));
             }
         } catch (e) {
             console.error('error', e);
 
             Modal.error({
                 title: 'Icon Upload Error',
                 content: e.message || e.error || JSON.stringify(e),
             });
             setTokenIconFileList(undefined);
             setTokenIcon(undefined);
             setImageUrl('');
             return false;
         }
     };
 
     const handleChangeTokenIconUpload = info => {
         let list = [...info.fileList];
 
         if (info.file.type.split('/')[0] !== 'image') {
             setTokenIconFileList(undefined);
             setImageUrl('');
         } else {
             setTokenIconFileList(list.slice(-1));
         }
     };
 
     //end eToken icon adds
 
     // New Token Name
     const [newTokenName, setNewTokenName] = useState('');
     const [newTokenNameIsValid, setNewTokenNameIsValid] = useState(null);
     const handleNewTokenNameInput = e => {
         const { value } = e.target;
         // validation
         setNewTokenNameIsValid(isValidTokenName(value));
         setNewTokenName(value);
     };
 
     // New Token Ticker
     const [newTokenTicker, setNewTokenTicker] = useState('');
     const [newTokenTickerIsValid, setNewTokenTickerIsValid] = useState(null);
     const handleNewTokenTickerInput = e => {
         const { value } = e.target;
         // validation
         setNewTokenTickerIsValid(isValidTokenTicker(value));
         setNewTokenTicker(value);
     };
 
     // New Token Decimals
     const [newTokenDecimals, setNewTokenDecimals] = useState(0);
     const [newTokenDecimalsIsValid, setNewTokenDecimalsIsValid] =
         useState(true);
     const handleNewTokenDecimalsInput = e => {
         const { value } = e.target;
         // validation
         setNewTokenDecimalsIsValid(isValidTokenDecimals(value));
         // Also validate the supply here if it has not yet been set
         if (newTokenInitialQtyIsValid !== null) {
             setNewTokenInitialQtyIsValid(
                 isValidTokenInitialQty(value, newTokenDecimals),
             );
         }
 
         setNewTokenDecimals(value);
     };
 
     // New Token Initial Quantity
     const [newTokenInitialQty, setNewTokenInitialQty] = useState('');
     const [newTokenInitialQtyIsValid, setNewTokenInitialQtyIsValid] =
         useState(null);
     const handleNewTokenInitialQtyInput = e => {
         const { value } = e.target;
         // validation
         setNewTokenInitialQtyIsValid(
             isValidTokenInitialQty(value, newTokenDecimals),
         );
         setNewTokenInitialQty(value);
     };
     // New Token document URL
     const [newTokenDocumentUrl, setNewTokenDocumentUrl] = useState('');
     // Start with this as true, field is not required
     const [newTokenDocumentUrlIsValid, setNewTokenDocumentUrlIsValid] =
         useState(true);
 
     const handleNewTokenDocumentUrlInput = e => {
         const { value } = e.target;
         // validation
         setNewTokenDocumentUrlIsValid(isValidTokenDocumentUrl(value));
         setNewTokenDocumentUrl(value);
     };
 
     // New Token fixed supply
     // Only allow creation of fixed supply tokens until Minting support is added
 
     // New Token document hash
     // Do not include this; questionable value to casual users and requires significant complication
 
     // Only enable CreateToken button if all form entries are valid
     let tokenGenesisDataIsValid =
         newTokenNameIsValid &&
         newTokenTickerIsValid &&
         newTokenDecimalsIsValid &&
         newTokenInitialQtyIsValid &&
         newTokenDocumentUrlIsValid;
 
     // Modal settings
     const [showConfirmCreateToken, setShowConfirmCreateToken] = useState(false);
 
     const submitTokenIcon = async link => {
         // Get the tokenId from link
         const newlyMintedTokenId = link.substr(link.length - 64);
 
         let formData = new FormData();
 
         const data = {
             newTokenName,
             newTokenTicker,
             newTokenDecimals,
             newTokenDocumentUrl,
             newTokenInitialQty,
             tokenIcon,
         };
         for (let key in data) {
             formData.append(key, data[key]);
         }
         // Would get tokenId here
         //formData.append('tokenId', link.substr(link.length - 64));
         // for now, hard code it
         formData.append('tokenId', newlyMintedTokenId);
 
         console.log(formData);
 
         try {
             const tokenIconApprovalResponse = await fetch(
                 currency.tokenIconSubmitApi,
                 {
                     method: 'POST',
                     //Note: fetch automatically assigns correct header for multipart form based on formData obj
                     headers: {
                         Accept: 'application/json',
                     },
                     body: formData,
                 },
             );
 
             const tokenIconApprovalResponseJson =
                 await tokenIconApprovalResponse.json();
 
             if (!tokenIconApprovalResponseJson.approvalRequested) {
                 // If the backend returns a specific error msg along with "approvalRequested = false", throw that error
                 // You may want to customize how the app reacts to different cases
                 if (tokenIconApprovalResponseJson.msg) {
                     throw new Error(tokenIconApprovalResponseJson.msg);
                 } else {
                     throw new Error('Error in uploading token icon');
                 }
             }
 
             tokenIconSubmitSuccess();
         } catch (err) {
             console.error(err.message);
             errorNotification(
                 err,
                 err.message,
                 'Submitting icon for approval while creating a new eToken',
             );
         }
     };
     const createPreviewedToken = async () => {
         passLoadingStatus(true);
         // If data is for some reason not valid here, bail out
         if (!tokenGenesisDataIsValid) {
             return;
         }
 
         // data must be valid and user reviewed to get here
         const configObj = {
             name: newTokenName,
             ticker: newTokenTicker,
             documentUrl:
                 newTokenDocumentUrl === ''
                     ? currency.newTokenDefaultUrl
                     : newTokenDocumentUrl,
             decimals: newTokenDecimals,
             initialQty: newTokenInitialQty,
             documentHash: '',
         };
 
         // create token with data in state fields
         try {
             const link = await createToken(
                 BCH,
                 wallet,
                 currency.defaultFee,
                 configObj,
             );
             createTokenNotification(link);
 
             // If this eToken has an icon, upload to server
             if (tokenIcon !== '') {
                 submitTokenIcon(link);
             }
         } catch (e) {
             // Set loading to false here as well, as balance may not change depending on where error occured in try loop
             passLoadingStatus(false);
             let message;
 
             if (!e.error && !e.message) {
                 message = `Transaction failed: no response from ${getRestUrl()}.`;
             } else if (
                 /Could not communicate with full node or other external service/.test(
                     e.error,
                 )
             ) {
                 message = 'Could not communicate with API. Please try again.';
             } else if (
                 e.error &&
                 e.error.includes(
                     'too-long-mempool-chain, too many unconfirmed ancestors [limit: 50] (code 64)',
                 )
             ) {
                 message = `The ${currency.ticker} you are trying to send has too many unconfirmed ancestors to send (limit 50). Sending will be possible after a block confirmation. Try again in about 10 minutes.`;
             } else {
                 message = e.message || e.error || JSON.stringify(e);
             }
             errorNotification(e, message, 'Creating eToken');
         }
         // Hide the modal
         setShowConfirmCreateToken(false);
         // Stop spinner
         passLoadingStatus(false);
     };
     return (
         <>
             <Modal
                 title={`Please review and confirm your token settings.`}
                 visible={showConfirmCreateToken}
                 onOk={createPreviewedToken}
                 onCancel={() => setShowConfirmCreateToken(false)}
             >
                 <TokenParamLabel>Name:</TokenParamLabel> {newTokenName}
                 <br />
                 <TokenParamLabel>Ticker:</TokenParamLabel> {newTokenTicker}
                 <br />
                 <TokenParamLabel>Decimals:</TokenParamLabel> {newTokenDecimals}
                 <br />
                 <TokenParamLabel>Supply:</TokenParamLabel> {newTokenInitialQty}
                 <br />
                 <TokenParamLabel>Document URL:</TokenParamLabel>{' '}
                 {newTokenDocumentUrl === ''
                     ? currency.newTokenDefaultUrl
                     : newTokenDocumentUrl}
                 <br />
             </Modal>
             <CreateTokenCtn>
                 <h3>Create a Token</h3>
                 {!disabled && (
                     <>
                         <AntdFormWrapper>
                             <Form
                                 size="small"
                                 style={{
                                     width: 'auto',
                                 }}
                             >
                                 <FormLabel>Token Name</FormLabel>
                                 <Form.Item
                                     validateStatus={
                                         newTokenNameIsValid === null ||
                                         newTokenNameIsValid
                                             ? ''
                                             : 'error'
                                     }
                                     help={
                                         newTokenNameIsValid === null ||
                                         newTokenNameIsValid
                                             ? ''
                                             : 'Token name must be a string between 1 and 68 characters long'
                                     }
                                 >
                                     <Input
                                         placeholder="Enter a name for your token"
                                         name="newTokenName"
                                         value={newTokenName}
                                         onChange={e =>
                                             handleNewTokenNameInput(e)
                                         }
                                     />
                                 </Form.Item>
                                 <FormLabel>Ticker</FormLabel>
                                 <Form.Item
                                     validateStatus={
                                         newTokenTickerIsValid === null ||
                                         newTokenTickerIsValid
                                             ? ''
                                             : 'error'
                                     }
                                     help={
                                         newTokenTickerIsValid === null ||
                                         newTokenTickerIsValid
                                             ? ''
                                             : 'Ticker must be a string between 1 and 12 characters long'
                                     }
                                 >
                                     <Input
                                         placeholder="Enter a ticker for your token"
                                         name="newTokenTicker"
                                         value={newTokenTicker}
                                         onChange={e =>
                                             handleNewTokenTickerInput(e)
                                         }
                                     />
                                 </Form.Item>
                                 <FormLabel>Decimals</FormLabel>
                                 <Form.Item
                                     validateStatus={
                                         newTokenDecimalsIsValid === null ||
                                         newTokenDecimalsIsValid
                                             ? ''
                                             : 'error'
                                     }
                                     help={
                                         newTokenDecimalsIsValid === null ||
                                         newTokenDecimalsIsValid
                                             ? ''
                                             : 'Token decimals must be an integer between 0 and 9'
                                     }
                                 >
                                     <Input
                                         placeholder="Enter number of decimal places"
                                         name="newTokenDecimals"
                                         type="number"
                                         value={newTokenDecimals}
                                         onChange={e =>
                                             handleNewTokenDecimalsInput(e)
                                         }
                                     />
                                 </Form.Item>
                                 <FormLabel>Supply</FormLabel>
                                 <Form.Item
                                     validateStatus={
                                         newTokenInitialQtyIsValid === null ||
                                         newTokenInitialQtyIsValid
                                             ? ''
                                             : 'error'
                                     }
                                     help={
                                         newTokenInitialQtyIsValid === null ||
                                         newTokenInitialQtyIsValid
                                             ? ''
                                             : 'Token supply must be greater than 0 and less than 100,000,000,000. Token supply decimal places cannot exceed token decimal places.'
                                     }
                                 >
                                     <Input
                                         placeholder="Enter the fixed supply of your token"
                                         name="newTokenInitialQty"
                                         type="number"
                                         value={newTokenInitialQty}
                                         onChange={e =>
                                             handleNewTokenInitialQtyInput(e)
                                         }
                                     />
                                 </Form.Item>
                                 <FormLabel>Document URL</FormLabel>
                                 <Form.Item
                                     validateStatus={
                                         newTokenDocumentUrlIsValid === null ||
                                         newTokenDocumentUrlIsValid
                                             ? ''
                                             : 'error'
                                     }
                                     help={
                                         newTokenDocumentUrlIsValid === null ||
                                         newTokenDocumentUrlIsValid
                                             ? ''
                                             : 'Must be valid URL. Cannot exceed 68 characters.'
                                     }
                                 >
                                     <Input
                                         placeholder="Enter a website for your token"
                                         name="newTokenDocumentUrl"
                                         value={newTokenDocumentUrl}
                                         onChange={e =>
                                             handleNewTokenDocumentUrlInput(e)
                                         }
                                     />
                                 </Form.Item>
                                 <FormLabel>Add Image</FormLabel>
                                 <Form.Item>
                                     <Dragger
                                         multiple={false}
                                         transformFile={transformTokenIconFile}
                                         beforeUpload={beforeTokenIconUpload}
                                         onChange={handleChangeTokenIconUpload}
                                         onRemove={() => false}
                                         fileList={tokenIconFileList}
                                         name="tokenIcon"
                                         style={{
                                             backgroundColor: '#f4f4f4',
                                         }}
                                     >
                                         {imageUrl ? (
                                             <img
                                                 src={imageUrl}
                                                 alt="avatar"
                                                 style={{ width: '128px' }}
                                             />
                                         ) : (
                                             <>
                                                 {' '}
                                                 <UploadOutlined />
                                                 <p>
                                                     Click, or drag file to this
                                                     area to upload
                                                 </p>
                                                 <p style={{ fontSize: '12px' }}>
                                                     Only jpg or png accepted
                                                 </p>
                                             </>
                                         )}
                                     </Dragger>
 
                                     {!loading && tokenIcon && (
                                         <>
                                             <Tooltip title={tokenIcon.name}>
                                                 <Typography.Paragraph
                                                     ellipsis
                                                     style={{
                                                         lineHeight: 'normal',
                                                         textAlign: 'center',
                                                         cursor: 'pointer',
                                                     }}
                                                     onClick={() =>
                                                         setShowCropModal(true)
                                                     }
                                                 >
                                                     <PaperClipOutlined />
                                                     {tokenIcon.name}
                                                 </Typography.Paragraph>
                                                 <Typography.Paragraph
                                                     ellipsis
                                                     style={{
                                                         lineHeight: 'normal',
                                                         textAlign: 'center',
                                                         marginBottom: '10px',
                                                         cursor: 'pointer',
                                                     }}
                                                     onClick={() =>
                                                         setShowCropModal(true)
                                                     }
                                                 >
                                                     Click here to crop or zoom
                                                     your icon
                                                 </Typography.Paragraph>
                                             </Tooltip>{' '}
                                         </>
                                     )}
 
                                     <CropControlModal
                                         style={{
                                             textAlign: 'left',
                                         }}
                                         expand={showCropModal}
                                         onClick={() => null}
                                         renderExpanded={() => (
                                             <>
                                                 {' '}
                                                 <CropperContainer>
                                                     <Cropper
                                                         showGrid={false}
                                                         zoomWithScroll={false}
                                                         image={rawImageUrl}
                                                         crop={crop}
                                                         zoom={zoom}
                                                         rotation={rotation}
                                                         cropShape={
                                                             roundSelection
                                                                 ? 'round'
                                                                 : 'rect'
                                                         }
                                                         aspect={1 / 1}
                                                         onCropChange={setCrop}
                                                         onCropComplete={
                                                             onCropComplete
                                                         }
                                                         onZoomChange={setZoom}
                                                         onRotationChange={
                                                             setRotation
                                                         }
                                                         style={{ top: '80px' }}
                                                     />
                                                 </CropperContainer>
                                                 <ControlsContainer>
                                                     <Switch
                                                         id="cropSwitch"
                                                         checkedChildren="Square"
                                                         unCheckedChildren="Round"
                                                         name="cropShape"
                                                         onChange={checked =>
                                                             setRoundSelection(
                                                                 !checked,
                                                             )
                                                         }
                                                     />{' '}
                                                     <br />
                                                     {'Zoom:'}
                                                     <Slider
                                                         defaultValue={1}
                                                         onChange={zoom =>
                                                             setZoom(zoom)
                                                         }
                                                         min={1}
                                                         max={10}
                                                         step={0.1}
                                                     />
                                                     {'Rotation:'}
                                                     <Slider
                                                         defaultValue={0}
                                                         onChange={rotation =>
                                                             setRotation(
                                                                 rotation,
                                                             )
                                                         }
                                                         min={0}
                                                         max={360}
                                                         step={1}
                                                     />
                                                     <Button
                                                         id="cropControlsConfirm"
                                                         onClick={() =>
                                                             showCroppedImage() &&
                                                             onClose()
                                                         }
                                                     >
                                                         OK
                                                     </Button>
                                                 </ControlsContainer>
                                             </>
                                         )}
                                         onClose={onClose}
                                     />
                                 </Form.Item>
                             </Form>
                         </AntdFormWrapper>
 
                         <SmartButton
                             onClick={() => setShowConfirmCreateToken(true)}
                             disabled={!tokenGenesisDataIsValid}
                             style={{ marginTop: '30px' }}
                         >
                             <PlusSquareOutlined />
                             &nbsp;Create eToken
                         </SmartButton>
                     </>
                 )}
             </CreateTokenCtn>
         </>
     );
 };
 
 /*
 passLoadingStatus must receive a default prop that is a function
 in order to pass the rendering unit test in CreateTokenForm.test.js
 
 status => {console.log(status)} is an arbitrary stub function
 */
 
 CreateTokenForm.defaultProps = {
     passLoadingStatus: status => {
         console.log(status);
     },
 };
 
 CreateTokenForm.propTypes = {
     BCH: PropTypes.object,
     getRestUrl: PropTypes.func,
     createToken: PropTypes.func,
     disabled: PropTypes.bool,
     passLoadingStatus: PropTypes.func,
 };
 
 export default CreateTokenForm;
diff --git a/web/cashtab-v2/src/components/Tokens/__tests__/__snapshots__/CreateTokenForm.test.js.snap b/web/cashtab-v2/src/components/Tokens/__tests__/__snapshots__/CreateTokenForm.test.js.snap
index 709918391..b0cb7fc3b 100644
--- a/web/cashtab-v2/src/components/Tokens/__tests__/__snapshots__/CreateTokenForm.test.js.snap
+++ b/web/cashtab-v2/src/components/Tokens/__tests__/__snapshots__/CreateTokenForm.test.js.snap
@@ -1,380 +1,380 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP @generated
 
 exports[`Wallet with BCH balances and tokens and state field 1`] = `
 <div
-  className="sc-jDwBTQ yQqNZ"
+  className="sc-jWBwVP cCPCvI"
 >
   <h3>
     Create a Token
   </h3>
   <div
     className="sc-VigVT hPTEEJ"
   >
     <form
       className="ant-form ant-form-horizontal ant-form-small"
       onReset={[Function]}
       onSubmit={[Function]}
       style={
         Object {
           "width": "auto",
         }
       }
     >
       <label
-        className="sc-kkGfuU ekDVdV"
+        className="sc-jKJlTe biUgjm"
       >
         Token Name
       </label>
       <div
         className="ant-row ant-form-item ant-form-item-with-help"
         style={Object {}}
       >
         <div
           className="ant-col ant-form-item-control"
           style={Object {}}
         >
           <div
             className="ant-form-item-control-input"
           >
             <div
               className="ant-form-item-control-input-content"
             >
               <input
                 className="ant-input ant-input-sm"
                 name="newTokenName"
                 onBlur={[Function]}
                 onChange={[Function]}
                 onFocus={[Function]}
                 onKeyDown={[Function]}
                 placeholder="Enter a name for your token"
                 type="text"
                 value=""
               />
             </div>
           </div>
           <div
             className="ant-form-item-explain ant-form-item-explain-connected"
           >
             <div
               className=""
               role="alert"
             >
               
             </div>
           </div>
         </div>
       </div>
       <label
-        className="sc-kkGfuU ekDVdV"
+        className="sc-jKJlTe biUgjm"
       >
         Ticker
       </label>
       <div
         className="ant-row ant-form-item ant-form-item-with-help"
         style={Object {}}
       >
         <div
           className="ant-col ant-form-item-control"
           style={Object {}}
         >
           <div
             className="ant-form-item-control-input"
           >
             <div
               className="ant-form-item-control-input-content"
             >
               <input
                 className="ant-input ant-input-sm"
                 name="newTokenTicker"
                 onBlur={[Function]}
                 onChange={[Function]}
                 onFocus={[Function]}
                 onKeyDown={[Function]}
                 placeholder="Enter a ticker for your token"
                 type="text"
                 value=""
               />
             </div>
           </div>
           <div
             className="ant-form-item-explain ant-form-item-explain-connected"
           >
             <div
               className=""
               role="alert"
             >
               
             </div>
           </div>
         </div>
       </div>
       <label
-        className="sc-kkGfuU ekDVdV"
+        className="sc-jKJlTe biUgjm"
       >
         Decimals
       </label>
       <div
         className="ant-row ant-form-item ant-form-item-with-help"
         style={Object {}}
       >
         <div
           className="ant-col ant-form-item-control"
           style={Object {}}
         >
           <div
             className="ant-form-item-control-input"
           >
             <div
               className="ant-form-item-control-input-content"
             >
               <input
                 className="ant-input ant-input-sm"
                 name="newTokenDecimals"
                 onBlur={[Function]}
                 onChange={[Function]}
                 onFocus={[Function]}
                 onKeyDown={[Function]}
                 placeholder="Enter number of decimal places"
                 type="number"
                 value="0"
               />
             </div>
           </div>
           <div
             className="ant-form-item-explain ant-form-item-explain-connected"
           >
             <div
               className=""
               role="alert"
             >
               
             </div>
           </div>
         </div>
       </div>
       <label
-        className="sc-kkGfuU ekDVdV"
+        className="sc-jKJlTe biUgjm"
       >
         Supply
       </label>
       <div
         className="ant-row ant-form-item ant-form-item-with-help"
         style={Object {}}
       >
         <div
           className="ant-col ant-form-item-control"
           style={Object {}}
         >
           <div
             className="ant-form-item-control-input"
           >
             <div
               className="ant-form-item-control-input-content"
             >
               <input
                 className="ant-input ant-input-sm"
                 name="newTokenInitialQty"
                 onBlur={[Function]}
                 onChange={[Function]}
                 onFocus={[Function]}
                 onKeyDown={[Function]}
                 placeholder="Enter the fixed supply of your token"
                 type="number"
                 value=""
               />
             </div>
           </div>
           <div
             className="ant-form-item-explain ant-form-item-explain-connected"
           >
             <div
               className=""
               role="alert"
             >
               
             </div>
           </div>
         </div>
       </div>
       <label
-        className="sc-kkGfuU ekDVdV"
+        className="sc-jKJlTe biUgjm"
       >
         Document URL
       </label>
       <div
         className="ant-row ant-form-item ant-form-item-with-help"
         style={Object {}}
       >
         <div
           className="ant-col ant-form-item-control"
           style={Object {}}
         >
           <div
             className="ant-form-item-control-input"
           >
             <div
               className="ant-form-item-control-input-content"
             >
               <input
                 className="ant-input ant-input-sm"
                 name="newTokenDocumentUrl"
                 onBlur={[Function]}
                 onChange={[Function]}
                 onFocus={[Function]}
                 onKeyDown={[Function]}
                 placeholder="Enter a website for your token"
                 type="text"
                 value=""
               />
             </div>
           </div>
           <div
             className="ant-form-item-explain ant-form-item-explain-connected"
           >
             <div
               className=""
               role="alert"
             >
               
             </div>
           </div>
         </div>
       </div>
       <label
-        className="sc-kkGfuU ekDVdV"
+        className="sc-jKJlTe biUgjm"
       >
         Add Image
       </label>
       <div
         className="ant-row ant-form-item"
         style={Object {}}
       >
         <div
           className="ant-col ant-form-item-control"
           style={Object {}}
         >
           <div
             className="ant-form-item-control-input"
           >
             <div
               className="ant-form-item-control-input-content"
             >
               <span>
                 <div
                   className="ant-upload ant-upload-drag"
                   onDragLeave={[Function]}
                   onDragOver={[Function]}
                   onDrop={[Function]}
                   style={
                     Object {
                       "backgroundColor": "#f4f4f4",
                       "height": undefined,
                     }
                   }
                 >
                   <span
                     className="ant-upload ant-upload-btn"
                     onClick={[Function]}
                     onDragOver={[Function]}
                     onDrop={[Function]}
                     onKeyDown={[Function]}
                     role="button"
                     tabIndex="0"
                   >
                     <input
                       accept=""
                       multiple={false}
                       onChange={[Function]}
                       onClick={[Function]}
                       style={
                         Object {
                           "display": "none",
                         }
                       }
                       type="file"
                     />
                     <div
                       className="ant-upload-drag-container"
                     >
                        
                       <span
                         aria-label="upload"
                         className="anticon anticon-upload"
                         role="img"
                       >
                         <svg
                           aria-hidden="true"
                           data-icon="upload"
                           fill="currentColor"
                           focusable="false"
                           height="1em"
                           viewBox="64 64 896 896"
                           width="1em"
                         >
                           <path
                             d="M400 317.7h73.9V656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V317.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 163a8 8 0 00-12.6 0l-112 141.7c-4.1 5.3-.4 13 6.3 13zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
                           />
                         </svg>
                       </span>
                       <p>
                         Click, or drag file to this area to upload
                       </p>
                       <p
                         style={
                           Object {
                             "fontSize": "12px",
                           }
                         }
                       >
                         Only jpg or png accepted
                       </p>
                     </div>
                   </span>
                 </div>
                 <div
                   className="ant-upload-list ant-upload-list-text"
                 />
               </span>
               
             </div>
           </div>
         </div>
       </div>
     </form>
   </div>
   <button
-    className="sc-jKJlTe cxrKVk"
+    className="sc-kGXeez iklyQu"
     disabled={true}
     onClick={[Function]}
     style={
       Object {
         "marginTop": "30px",
       }
     }
   >
     <span
       aria-label="plus-square"
       className="anticon anticon-plus-square"
       role="img"
     >
       <svg
         aria-hidden="true"
         data-icon="plus-square"
         fill="currentColor"
         focusable="false"
         height="1em"
         viewBox="64 64 896 896"
         width="1em"
       >
         <path
           d="M328 544h152v152c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V544h152c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H544V328c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v152H328c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8z"
         />
         <path
           d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-40 728H184V184h656v656z"
         />
       </svg>
     </span>
      Create eToken
   </button>
 </div>
 `;
diff --git a/web/cashtab-v2/src/components/Tokens/__tests__/__snapshots__/Tokens.test.js.snap b/web/cashtab-v2/src/components/Tokens/__tests__/__snapshots__/Tokens.test.js.snap
index 61efa2a22..c4875fdb3 100644
--- a/web/cashtab-v2/src/components/Tokens/__tests__/__snapshots__/Tokens.test.js.snap
+++ b/web/cashtab-v2/src/components/Tokens/__tests__/__snapshots__/Tokens.test.js.snap
@@ -1,585 +1,585 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP @generated
 
 exports[`Wallet with BCH balances 1`] = `
 Array [
   <div
-    className="sc-iAyFgw chWhWK"
+    className="sc-eNQAEJ bPMOWW"
   >
     <h4
-      className="sc-iRbamj gCEMNU"
+      className="sc-cMljjf hTVzrw"
     >
       MigrationTestAlpha
     </h4>
     <div
-      className="sc-eHgmQL znFwg"
+      className="sc-kEYyzF eqAzMl"
     >
       0
        
       XEC
     </div>
   </div>,
   <div
-    className="sc-kEYyzF gZfJyA"
+    className="sc-ckVGcZ jBULtA"
   >
     <div
-      className="sc-jDwBTQ yQqNZ"
+      className="sc-jWBwVP cCPCvI"
     >
       <h3>
         Create a Token
       </h3>
     </div>
     <p
-      className="sc-brqgnP kPbEse"
+      className="sc-hSdWYo cGItMu"
     >
       You need at least
        
       5.5
        
       XEC
        (
       $
       NaN
        
       USD
       ) to create a token
     </p>
   </div>,
 ]
 `;
 
 exports[`Wallet with BCH balances and tokens 1`] = `
 Array [
   <div
-    className="sc-iAyFgw chWhWK"
+    className="sc-eNQAEJ bPMOWW"
   >
     <h4
-      className="sc-iRbamj gCEMNU"
+      className="sc-cMljjf hTVzrw"
     >
       MigrationTestAlpha
     </h4>
     <div
-      className="sc-eHgmQL znFwg"
+      className="sc-kEYyzF eqAzMl"
     >
       0
        
       XEC
     </div>
   </div>,
   <div
-    className="sc-kEYyzF gZfJyA"
+    className="sc-ckVGcZ jBULtA"
   >
     <div
-      className="sc-jDwBTQ yQqNZ"
+      className="sc-jWBwVP cCPCvI"
     >
       <h3>
         Create a Token
       </h3>
     </div>
     <p
-      className="sc-brqgnP kPbEse"
+      className="sc-hSdWYo cGItMu"
     >
       You need at least
        
       5.5
        
       XEC
        (
       $
       NaN
        
       USD
       ) to create a token
     </p>
   </div>,
 ]
 `;
 
 exports[`Wallet with BCH balances and tokens and state field 1`] = `
 Array [
   <div
-    className="sc-iAyFgw chWhWK"
+    className="sc-eNQAEJ bPMOWW"
   >
     <h4
-      className="sc-iRbamj gCEMNU"
+      className="sc-cMljjf hTVzrw"
     >
       MigrationTestAlpha
     </h4>
     <div
-      className="sc-eHgmQL znFwg"
+      className="sc-kEYyzF eqAzMl"
     >
       0.06
        
       XEC
     </div>
   </div>,
   <div
-    className="sc-kEYyzF gZfJyA"
+    className="sc-ckVGcZ jBULtA"
   >
     <div
-      className="sc-jDwBTQ yQqNZ"
+      className="sc-jWBwVP cCPCvI"
     >
       <h3>
         Create a Token
       </h3>
       <div
         className="sc-VigVT hPTEEJ"
       >
         <form
           className="ant-form ant-form-horizontal ant-form-small"
           onReset={[Function]}
           onSubmit={[Function]}
           style={
             Object {
               "width": "auto",
             }
           }
         >
           <label
-            className="sc-kkGfuU ekDVdV"
+            className="sc-jKJlTe biUgjm"
           >
             Token Name
           </label>
           <div
             className="ant-row ant-form-item ant-form-item-with-help"
             style={Object {}}
           >
             <div
               className="ant-col ant-form-item-control"
               style={Object {}}
             >
               <div
                 className="ant-form-item-control-input"
               >
                 <div
                   className="ant-form-item-control-input-content"
                 >
                   <input
                     className="ant-input ant-input-sm"
                     name="newTokenName"
                     onBlur={[Function]}
                     onChange={[Function]}
                     onFocus={[Function]}
                     onKeyDown={[Function]}
                     placeholder="Enter a name for your token"
                     type="text"
                     value=""
                   />
                 </div>
               </div>
               <div
                 className="ant-form-item-explain ant-form-item-explain-connected"
               >
                 <div
                   className=""
                   role="alert"
                 >
                   
                 </div>
               </div>
             </div>
           </div>
           <label
-            className="sc-kkGfuU ekDVdV"
+            className="sc-jKJlTe biUgjm"
           >
             Ticker
           </label>
           <div
             className="ant-row ant-form-item ant-form-item-with-help"
             style={Object {}}
           >
             <div
               className="ant-col ant-form-item-control"
               style={Object {}}
             >
               <div
                 className="ant-form-item-control-input"
               >
                 <div
                   className="ant-form-item-control-input-content"
                 >
                   <input
                     className="ant-input ant-input-sm"
                     name="newTokenTicker"
                     onBlur={[Function]}
                     onChange={[Function]}
                     onFocus={[Function]}
                     onKeyDown={[Function]}
                     placeholder="Enter a ticker for your token"
                     type="text"
                     value=""
                   />
                 </div>
               </div>
               <div
                 className="ant-form-item-explain ant-form-item-explain-connected"
               >
                 <div
                   className=""
                   role="alert"
                 >
                   
                 </div>
               </div>
             </div>
           </div>
           <label
-            className="sc-kkGfuU ekDVdV"
+            className="sc-jKJlTe biUgjm"
           >
             Decimals
           </label>
           <div
             className="ant-row ant-form-item ant-form-item-with-help"
             style={Object {}}
           >
             <div
               className="ant-col ant-form-item-control"
               style={Object {}}
             >
               <div
                 className="ant-form-item-control-input"
               >
                 <div
                   className="ant-form-item-control-input-content"
                 >
                   <input
                     className="ant-input ant-input-sm"
                     name="newTokenDecimals"
                     onBlur={[Function]}
                     onChange={[Function]}
                     onFocus={[Function]}
                     onKeyDown={[Function]}
                     placeholder="Enter number of decimal places"
                     type="number"
                     value="0"
                   />
                 </div>
               </div>
               <div
                 className="ant-form-item-explain ant-form-item-explain-connected"
               >
                 <div
                   className=""
                   role="alert"
                 >
                   
                 </div>
               </div>
             </div>
           </div>
           <label
-            className="sc-kkGfuU ekDVdV"
+            className="sc-jKJlTe biUgjm"
           >
             Supply
           </label>
           <div
             className="ant-row ant-form-item ant-form-item-with-help"
             style={Object {}}
           >
             <div
               className="ant-col ant-form-item-control"
               style={Object {}}
             >
               <div
                 className="ant-form-item-control-input"
               >
                 <div
                   className="ant-form-item-control-input-content"
                 >
                   <input
                     className="ant-input ant-input-sm"
                     name="newTokenInitialQty"
                     onBlur={[Function]}
                     onChange={[Function]}
                     onFocus={[Function]}
                     onKeyDown={[Function]}
                     placeholder="Enter the fixed supply of your token"
                     type="number"
                     value=""
                   />
                 </div>
               </div>
               <div
                 className="ant-form-item-explain ant-form-item-explain-connected"
               >
                 <div
                   className=""
                   role="alert"
                 >
                   
                 </div>
               </div>
             </div>
           </div>
           <label
-            className="sc-kkGfuU ekDVdV"
+            className="sc-jKJlTe biUgjm"
           >
             Document URL
           </label>
           <div
             className="ant-row ant-form-item ant-form-item-with-help"
             style={Object {}}
           >
             <div
               className="ant-col ant-form-item-control"
               style={Object {}}
             >
               <div
                 className="ant-form-item-control-input"
               >
                 <div
                   className="ant-form-item-control-input-content"
                 >
                   <input
                     className="ant-input ant-input-sm"
                     name="newTokenDocumentUrl"
                     onBlur={[Function]}
                     onChange={[Function]}
                     onFocus={[Function]}
                     onKeyDown={[Function]}
                     placeholder="Enter a website for your token"
                     type="text"
                     value=""
                   />
                 </div>
               </div>
               <div
                 className="ant-form-item-explain ant-form-item-explain-connected"
               >
                 <div
                   className=""
                   role="alert"
                 >
                   
                 </div>
               </div>
             </div>
           </div>
           <label
-            className="sc-kkGfuU ekDVdV"
+            className="sc-jKJlTe biUgjm"
           >
             Add Image
           </label>
           <div
             className="ant-row ant-form-item"
             style={Object {}}
           >
             <div
               className="ant-col ant-form-item-control"
               style={Object {}}
             >
               <div
                 className="ant-form-item-control-input"
               >
                 <div
                   className="ant-form-item-control-input-content"
                 >
                   <span>
                     <div
                       className="ant-upload ant-upload-drag"
                       onDragLeave={[Function]}
                       onDragOver={[Function]}
                       onDrop={[Function]}
                       style={
                         Object {
                           "backgroundColor": "#f4f4f4",
                           "height": undefined,
                         }
                       }
                     >
                       <span
                         className="ant-upload ant-upload-btn"
                         onClick={[Function]}
                         onDragOver={[Function]}
                         onDrop={[Function]}
                         onKeyDown={[Function]}
                         role="button"
                         tabIndex="0"
                       >
                         <input
                           accept=""
                           multiple={false}
                           onChange={[Function]}
                           onClick={[Function]}
                           style={
                             Object {
                               "display": "none",
                             }
                           }
                           type="file"
                         />
                         <div
                           className="ant-upload-drag-container"
                         >
                            
                           <span
                             aria-label="upload"
                             className="anticon anticon-upload"
                             role="img"
                           >
                             <svg
                               aria-hidden="true"
                               data-icon="upload"
                               fill="currentColor"
                               focusable="false"
                               height="1em"
                               viewBox="64 64 896 896"
                               width="1em"
                             >
                               <path
                                 d="M400 317.7h73.9V656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V317.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 163a8 8 0 00-12.6 0l-112 141.7c-4.1 5.3-.4 13 6.3 13zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
                               />
                             </svg>
                           </span>
                           <p>
                             Click, or drag file to this area to upload
                           </p>
                           <p
                             style={
                               Object {
                                 "fontSize": "12px",
                               }
                             }
                           >
                             Only jpg or png accepted
                           </p>
                         </div>
                       </span>
                     </div>
                     <div
                       className="ant-upload-list ant-upload-list-text"
                     />
                   </span>
                   
                 </div>
               </div>
             </div>
           </div>
         </form>
       </div>
       <button
-        className="sc-jKJlTe cxrKVk"
+        className="sc-kGXeez iklyQu"
         disabled={true}
         onClick={[Function]}
         style={
           Object {
             "marginTop": "30px",
           }
         }
       >
         <span
           aria-label="plus-square"
           className="anticon anticon-plus-square"
           role="img"
         >
           <svg
             aria-hidden="true"
             data-icon="plus-square"
             fill="currentColor"
             focusable="false"
             height="1em"
             viewBox="64 64 896 896"
             width="1em"
           >
             <path
               d="M328 544h152v152c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V544h152c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H544V328c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v152H328c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8z"
             />
             <path
               d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-40 728H184V184h656v656z"
             />
           </svg>
         </span>
          Create eToken
       </button>
     </div>
   </div>,
 ]
 `;
 
 exports[`Wallet without BCH balance 1`] = `
 Array [
   <div
-    className="sc-iAyFgw chWhWK"
+    className="sc-eNQAEJ bPMOWW"
   >
     <h4
-      className="sc-iRbamj gCEMNU"
+      className="sc-cMljjf hTVzrw"
     >
       MigrationTestAlpha
     </h4>
     <div
-      className="sc-eHgmQL znFwg"
+      className="sc-kEYyzF eqAzMl"
     >
       0
        
       XEC
     </div>
   </div>,
   <div
-    className="sc-kEYyzF gZfJyA"
+    className="sc-ckVGcZ jBULtA"
   >
     <div
-      className="sc-jDwBTQ yQqNZ"
+      className="sc-jWBwVP cCPCvI"
     >
       <h3>
         Create a Token
       </h3>
     </div>
     <p
-      className="sc-brqgnP kPbEse"
+      className="sc-hSdWYo cGItMu"
     >
       You need at least
        
       5.5
        
       XEC
        (
       $
       NaN
        
       USD
       ) to create a token
     </p>
   </div>,
 ]
 `;
 
 exports[`Without wallet defined 1`] = `
 Array [
   <div
-    className="sc-iAyFgw chWhWK"
+    className="sc-eNQAEJ bPMOWW"
   >
     <div
-      className="sc-eHgmQL znFwg"
+      className="sc-kEYyzF eqAzMl"
     >
       0
        
       XEC
     </div>
   </div>,
   <div
-    className="sc-kEYyzF gZfJyA"
+    className="sc-ckVGcZ jBULtA"
   >
     <div
-      className="sc-jDwBTQ yQqNZ"
+      className="sc-jWBwVP cCPCvI"
     >
       <h3>
         Create a Token
       </h3>
     </div>
     <p
-      className="sc-brqgnP kPbEse"
+      className="sc-hSdWYo cGItMu"
     >
       You need at least
        
       5.5
        
       XEC
        (
       $
       NaN
        
       USD
       ) to create a token
     </p>
   </div>,
 ]
 `;
diff --git a/web/cashtab-v2/src/hooks/useWallet.js b/web/cashtab-v2/src/hooks/useWallet.js
index 3adcd0a7d..f3a97c2b9 100644
--- a/web/cashtab-v2/src/hooks/useWallet.js
+++ b/web/cashtab-v2/src/hooks/useWallet.js
@@ -1,1211 +1,1209 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-
 import { useState, useEffect } from 'react';
 import useAsyncTimeout from 'hooks/useAsyncTimeout';
 import usePrevious from 'hooks/usePrevious';
 import useBCH from 'hooks/useBCH';
 import BigNumber from 'bignumber.js';
 import {
     fromSmallestDenomination,
     loadStoredWallet,
     isValidStoredWallet,
     isLegacyMigrationRequired,
     whichUtxosWereAdded,
     whichUtxosWereConsumed,
     addNewHydratedUtxos,
     removeConsumedUtxos,
     areAllUtxosIncludedInIncrementallyHydratedUtxos,
 } from 'utils/cashMethods';
 import { isValidCashtabSettings } from 'utils/validation';
 import localforage from 'localforage';
 import { currency } from 'components/Common/Ticker';
 import isEmpty from 'lodash.isempty';
 import isEqual from 'lodash.isequal';
 import {
     xecReceivedNotification,
     eTokenReceivedNotification,
 } from 'components/Common/Notifications';
 const useWallet = () => {
     const [wallet, setWallet] = useState(false);
     const [cashtabSettings, setCashtabSettings] = useState(false);
     const [fiatPrice, setFiatPrice] = useState(null);
     const [apiError, setApiError] = useState(false);
     const [checkFiatInterval, setCheckFiatInterval] = useState(null);
     const [hasUpdated, setHasUpdated] = useState(false);
     const {
         getBCH,
         getUtxos,
         getHydratedUtxoDetails,
         getSlpBalancesAndUtxos,
         getTxHistory,
         getTxData,
         addTokenTxData,
     } = useBCH();
     const [loading, setLoading] = useState(true);
     const [apiIndex, setApiIndex] = useState(0);
     const [BCH, setBCH] = useState(getBCH(apiIndex));
     const { balances, tokens, utxos } = isValidStoredWallet(wallet)
         ? wallet.state
         : {
               balances: {},
               tokens: [],
               utxos: null,
           };
     const previousBalances = usePrevious(balances);
     const previousTokens = usePrevious(tokens);
     const previousUtxos = usePrevious(utxos);
 
     // If you catch API errors, call this function
     const tryNextAPI = () => {
         let currentApiIndex = apiIndex;
         // How many APIs do you have?
         const apiString = process.env.REACT_APP_BCHA_APIS;
 
         const apiArray = apiString.split(',');
 
         console.log(`You have ${apiArray.length} APIs to choose from`);
         console.log(`Current selection: ${apiIndex}`);
         // If only one, exit
         if (apiArray.length === 0) {
             console.log(
                 `There are no backup APIs, you are stuck with this error`,
             );
             return;
         } else if (currentApiIndex < apiArray.length - 1) {
             currentApiIndex += 1;
             console.log(
                 `Incrementing API index from ${apiIndex} to ${currentApiIndex}`,
             );
         } else {
             // Otherwise use the first option again
             console.log(`Retrying first API index`);
             currentApiIndex = 0;
         }
         //return setApiIndex(currentApiIndex);
         console.log(`Setting Api Index to ${currentApiIndex}`);
         setApiIndex(currentApiIndex);
         return setBCH(getBCH(currentApiIndex));
         // If you have more than one, use the next one
         // If you are at the "end" of the array, use the first one
     };
 
     const normalizeSlpBalancesAndUtxos = (slpBalancesAndUtxos, wallet) => {
         const Accounts = [wallet.Path245, wallet.Path145, wallet.Path1899];
         slpBalancesAndUtxos.nonSlpUtxos.forEach(utxo => {
             const derivatedAccount = Accounts.find(
                 account => account.cashAddress === utxo.address,
             );
             utxo.wif = derivatedAccount.fundingWif;
         });
 
         return slpBalancesAndUtxos;
     };
 
     const normalizeBalance = slpBalancesAndUtxos => {
         const totalBalanceInSatoshis = slpBalancesAndUtxos.nonSlpUtxos.reduce(
             (previousBalance, utxo) => previousBalance + utxo.value,
             0,
         );
         return {
             totalBalanceInSatoshis,
             totalBalance: fromSmallestDenomination(totalBalanceInSatoshis),
         };
     };
 
     const deriveAccount = async (BCH, { masterHDNode, path }) => {
         const node = BCH.HDNode.derivePath(masterHDNode, path);
         const publicKey = BCH.HDNode.toPublicKey(node).toString('hex');
         const cashAddress = BCH.HDNode.toCashAddress(node);
         const slpAddress = BCH.SLP.Address.toSLPAddress(cashAddress);
 
         return {
             publicKey,
             cashAddress,
             slpAddress,
             fundingWif: BCH.HDNode.toWIF(node),
             fundingAddress: BCH.SLP.Address.toSLPAddress(cashAddress),
             legacyAddress: BCH.SLP.Address.toLegacyAddress(cashAddress),
         };
     };
 
     const loadWalletFromStorageOnStartup = async setWallet => {
         // get wallet object from localforage
         const wallet = await getWallet();
         // If wallet object in storage is valid, use it to set state on startup
         if (isValidStoredWallet(wallet)) {
             // Convert all the token balance figures to big numbers
             const liveWalletState = loadStoredWallet(wallet.state);
             wallet.state = liveWalletState;
 
             setWallet(wallet);
             return setLoading(false);
         }
         // Loading will remain true until API calls populate this legacy wallet
         setWallet(wallet);
     };
 
     const haveUtxosChanged = (wallet, utxos, previousUtxos) => {
         // Relevant points for this array comparing exercise
         // https://stackoverflow.com/questions/13757109/triple-equal-signs-return-false-for-arrays-in-javascript-why
         // https://stackoverflow.com/questions/7837456/how-to-compare-arrays-in-javascript
 
         // If this is initial state
         if (utxos === null) {
             // Then make sure to get slpBalancesAndUtxos
             return true;
         }
         // If this is the first time the wallet received utxos
         if (typeof utxos === 'undefined') {
             // Then they have certainly changed
             return true;
         }
         if (typeof previousUtxos === 'undefined') {
             // Compare to what you have in localStorage on startup
             // If previousUtxos are undefined, see if you have previousUtxos in wallet state
             // If you do, and it has everything you need, set wallet state with that instead of calling hydrateUtxos on all utxos
             if (isValidStoredWallet(wallet)) {
                 // Convert all the token balance figures to big numbers
                 const liveWalletState = loadStoredWallet(wallet.state);
                 wallet.state = liveWalletState;
 
                 return setWallet(wallet);
             }
             // If wallet in storage is a legacy wallet or otherwise does not have all state fields,
             // then assume utxos have changed
             return true;
         }
         // return true for empty array, since this means you definitely do not want to skip the next API call
         if (utxos && utxos.length === 0) {
             return true;
         }
 
         // If wallet is valid, compare what exists in written wallet state instead of former api call
         let utxosToCompare = previousUtxos;
         if (isValidStoredWallet(wallet)) {
             try {
                 utxosToCompare = wallet.state.utxos;
             } catch (err) {
                 console.log(`Error setting utxos to wallet.state.utxos`, err);
                 console.log(`Wallet at err`, wallet);
                 // If this happens, assume utxo set has changed
                 return true;
             }
         }
 
         // Compare utxo sets
         return !isEqual(utxos, utxosToCompare);
     };
 
     const update = async ({ wallet }) => {
         //console.log(`tick()`);
         //console.time("update");
         try {
             if (!wallet) {
                 return;
             }
             const cashAddresses = [
                 wallet.Path245.cashAddress,
                 wallet.Path145.cashAddress,
                 wallet.Path1899.cashAddress,
             ];
 
             const publicKeys = [
                 wallet.Path145.publicKey,
                 wallet.Path245.publicKey,
                 wallet.Path1899.publicKey,
             ];
 
             const utxos = await getUtxos(BCH, cashAddresses);
 
             // If an error is returned or utxos from only 1 address are returned
             if (!utxos || isEmpty(utxos) || utxos.error || utxos.length < 2) {
                 // Throw error here to prevent more attempted api calls
                 // as you are likely already at rate limits
                 throw new Error('Error fetching utxos');
             }
 
             // Need to call with wallet as a parameter rather than trusting it is in state, otherwise can sometimes get wallet=false from haveUtxosChanged
             const utxosHaveChanged = haveUtxosChanged(
                 wallet,
                 utxos,
                 previousUtxos,
             );
 
             // If the utxo set has not changed,
             if (!utxosHaveChanged) {
                 // remove api error here; otherwise it will remain if recovering from a rate
                 // limit error with an unchanged utxo set
                 setApiError(false);
                 // then wallet.state has not changed and does not need to be updated
                 //console.timeEnd("update");
                 return;
             }
 
             let incrementalHydratedUtxosValid;
             let incrementallyAdjustedHydratedUtxoDetails;
             try {
                 // Make sure you have all the required inputs to use this approach
                 if (
                     !wallet ||
                     !wallet.state ||
                     !wallet.state.utxos ||
                     !wallet.state.hydratedUtxoDetails ||
                     !utxos
                 ) {
                     throw new Error(
                         'Wallet does not have required state for incremental approach, hydrating full utxo set',
                     );
                 }
                 const utxosAdded = whichUtxosWereAdded(
                     wallet.state.utxos,
                     utxos,
                 );
                 const utxosConsumed = whichUtxosWereConsumed(
                     wallet.state.utxos,
                     utxos,
                 );
 
                 incrementallyAdjustedHydratedUtxoDetails =
                     wallet.state.hydratedUtxoDetails;
 
                 if (utxosConsumed) {
                     incrementallyAdjustedHydratedUtxoDetails =
                         removeConsumedUtxos(
                             utxosConsumed,
                             incrementallyAdjustedHydratedUtxoDetails,
                         );
                 }
 
                 if (utxosAdded) {
                     const addedHydratedUtxos = await getHydratedUtxoDetails(
                         BCH,
                         utxosAdded,
                     );
 
                     incrementallyAdjustedHydratedUtxoDetails =
                         addNewHydratedUtxos(
                             addedHydratedUtxos,
                             incrementallyAdjustedHydratedUtxoDetails,
                         );
                 }
 
                 incrementalHydratedUtxosValid =
                     areAllUtxosIncludedInIncrementallyHydratedUtxos(
                         utxos,
                         incrementallyAdjustedHydratedUtxoDetails,
                     );
             } catch (err) {
                 console.log(
                     `Error in incremental determination of hydratedUtxoDetails`,
                 );
                 console.log(err);
                 incrementalHydratedUtxosValid = false;
             }
 
             if (!incrementalHydratedUtxosValid) {
                 console.log(
                     `Incremental approach invalid, hydrating all utxos`,
                 );
                 incrementallyAdjustedHydratedUtxoDetails =
                     await getHydratedUtxoDetails(BCH, utxos);
             }
 
             const slpBalancesAndUtxos = await getSlpBalancesAndUtxos(
                 BCH,
                 incrementallyAdjustedHydratedUtxoDetails,
             );
             console.log(`slpBalancesAndUtxos`, slpBalancesAndUtxos);
             const txHistory = await getTxHistory(BCH, cashAddresses);
 
             // public keys are used to determined if a tx is incoming outgoing
             const parsedTxHistory = await getTxData(
                 BCH,
                 txHistory,
                 publicKeys,
                 wallet,
             );
 
             const parsedWithTokens = await addTokenTxData(BCH, parsedTxHistory);
 
             if (typeof slpBalancesAndUtxos === 'undefined') {
                 console.log(`slpBalancesAndUtxos is undefined`);
                 throw new Error('slpBalancesAndUtxos is undefined');
             }
             const { tokens } = slpBalancesAndUtxos;
 
             const newState = {
                 balances: {},
                 tokens: [],
                 slpBalancesAndUtxos: [],
             };
 
             newState.slpBalancesAndUtxos = normalizeSlpBalancesAndUtxos(
                 slpBalancesAndUtxos,
                 wallet,
             );
 
             newState.balances = normalizeBalance(slpBalancesAndUtxos);
 
             newState.tokens = tokens;
 
             newState.parsedTxHistory = parsedWithTokens;
 
             newState.utxos = utxos;
 
             newState.hydratedUtxoDetails =
                 incrementallyAdjustedHydratedUtxoDetails;
 
             // Set wallet with new state field
             wallet.state = newState;
             setWallet(wallet);
 
             // Write this state to indexedDb using localForage
             writeWalletState(wallet, newState);
             // If everything executed correctly, remove apiError
             setApiError(false);
         } catch (error) {
             console.log(`Error in update({wallet})`);
             console.log(error);
             // Set this in state so that transactions are disabled until the issue is resolved
             setApiError(true);
             //console.timeEnd("update");
             // Try another endpoint
             console.log(`Trying next API...`);
             tryNextAPI();
         }
         //console.timeEnd("update");
     };
 
     const getActiveWalletFromLocalForage = async () => {
         let wallet;
         try {
             wallet = await localforage.getItem('wallet');
         } catch (err) {
             console.log(`Error in getActiveWalletFromLocalForage`, err);
             wallet = null;
         }
         return wallet;
     };
 
     const getWallet = async () => {
         let wallet;
         let existingWallet;
         try {
             existingWallet = await getActiveWalletFromLocalForage();
             // existing wallet will be
             // 1 - the 'wallet' value from localForage, if it exists
             // 2 - false if it does not exist in localForage
             // 3 - null if error
 
             // If the wallet does not have Path1899, add it
             // or each Path1899, Path145, Path245 does not have a public key, add them
             if (existingWallet) {
                 if (isLegacyMigrationRequired(existingWallet)) {
                     console.log(
                         `Wallet does not have Path1899 or does not have public key`,
                     );
                     existingWallet = await migrateLegacyWallet(
                         BCH,
                         existingWallet,
                     );
                 }
             }
 
             // If not in localforage then existingWallet = false, check localstorage
             if (!existingWallet) {
                 console.log(`no existing wallet, checking local storage`);
                 existingWallet = JSON.parse(
                     window.localStorage.getItem('wallet'),
                 );
                 console.log(`existingWallet from localStorage`, existingWallet);
                 // If you find it here, move it to indexedDb
                 if (existingWallet !== null) {
                     wallet = await getWalletDetails(existingWallet);
                     await localforage.setItem('wallet', wallet);
                     return wallet;
                 }
             }
         } catch (err) {
             console.log(`Error in getWallet()`, err);
             /* 
             Error here implies problem interacting with localForage or localStorage API
             
             Have not seen this error in testing
 
             In this case, you still want to return 'wallet' using the logic below based on 
             the determination of 'existingWallet' from the logic above
             */
         }
 
         if (existingWallet === null || !existingWallet) {
             wallet = await getWalletDetails(existingWallet);
             await localforage.setItem('wallet', wallet);
         } else {
             wallet = existingWallet;
         }
         return wallet;
     };
 
     const migrateLegacyWallet = async (BCH, wallet) => {
         console.log(`migrateLegacyWallet`);
         console.log(`legacyWallet`, wallet);
         const NETWORK = process.env.REACT_APP_NETWORK;
         const mnemonic = wallet.mnemonic;
         const rootSeedBuffer = await BCH.Mnemonic.toSeed(mnemonic);
 
         let masterHDNode;
 
         if (NETWORK === `mainnet`) {
             masterHDNode = BCH.HDNode.fromSeed(rootSeedBuffer);
         } else {
             masterHDNode = BCH.HDNode.fromSeed(rootSeedBuffer, 'testnet');
         }
 
         const Path245 = await deriveAccount(BCH, {
             masterHDNode,
             path: "m/44'/245'/0'/0/0",
         });
         const Path145 = await deriveAccount(BCH, {
             masterHDNode,
             path: "m/44'/145'/0'/0/0",
         });
         const Path1899 = await deriveAccount(BCH, {
             masterHDNode,
             path: "m/44'/1899'/0'/0/0",
         });
 
         wallet.Path245 = Path245;
         wallet.Path145 = Path145;
         wallet.Path1899 = Path1899;
 
         try {
             await localforage.setItem('wallet', wallet);
         } catch (err) {
             console.log(
                 `Error setting wallet to wallet indexedDb in migrateLegacyWallet()`,
             );
             console.log(err);
         }
 
         return wallet;
     };
 
     const writeWalletState = async (wallet, newState) => {
         // Add new state as an object on the active wallet
         wallet.state = newState;
         try {
             await localforage.setItem('wallet', wallet);
         } catch (err) {
             console.log(`Error in writeWalletState()`);
             console.log(err);
         }
     };
 
     const getWalletDetails = async wallet => {
         if (!wallet) {
             return false;
         }
         // Since this info is in localforage now, only get the var
         const NETWORK = process.env.REACT_APP_NETWORK;
         const mnemonic = wallet.mnemonic;
         const rootSeedBuffer = await BCH.Mnemonic.toSeed(mnemonic);
         let masterHDNode;
 
         if (NETWORK === `mainnet`) {
             masterHDNode = BCH.HDNode.fromSeed(rootSeedBuffer);
         } else {
             masterHDNode = BCH.HDNode.fromSeed(rootSeedBuffer, 'testnet');
         }
 
         const Path245 = await deriveAccount(BCH, {
             masterHDNode,
             path: "m/44'/245'/0'/0/0",
         });
         const Path145 = await deriveAccount(BCH, {
             masterHDNode,
             path: "m/44'/145'/0'/0/0",
         });
         const Path1899 = await deriveAccount(BCH, {
             masterHDNode,
             path: "m/44'/1899'/0'/0/0",
         });
 
         let name = Path1899.cashAddress.slice(12, 17);
         // Only set the name if it does not currently exist
         if (wallet && wallet.name) {
             name = wallet.name;
         }
 
         return {
             mnemonic: wallet.mnemonic,
             name,
             Path245,
             Path145,
             Path1899,
         };
     };
 
     const getSavedWallets = async activeWallet => {
         let savedWallets;
         try {
             savedWallets = await localforage.getItem('savedWallets');
             if (savedWallets === null) {
                 savedWallets = [];
             }
         } catch (err) {
             console.log(`Error in getSavedWallets`);
             console.log(err);
             savedWallets = [];
         }
         // Even though the active wallet is still stored in savedWallets, don't return it in this function
         for (let i = 0; i < savedWallets.length; i += 1) {
             if (
                 typeof activeWallet !== 'undefined' &&
                 activeWallet.name &&
                 savedWallets[i].name === activeWallet.name
             ) {
                 savedWallets.splice(i, 1);
             }
         }
         return savedWallets;
     };
 
     const activateWallet = async walletToActivate => {
         /*
     If the user is migrating from old version to this version, make sure to save the activeWallet
 
     1 - check savedWallets for the previously active wallet
     2 - If not there, add it
     */
         setHasUpdated(false);
         let currentlyActiveWallet;
         try {
             currentlyActiveWallet = await localforage.getItem('wallet');
         } catch (err) {
             console.log(
                 `Error in localforage.getItem("wallet") in activateWallet()`,
             );
             return false;
         }
         // Get savedwallets
         let savedWallets;
         try {
             savedWallets = await localforage.getItem('savedWallets');
         } catch (err) {
             console.log(
                 `Error in localforage.getItem("savedWallets") in activateWallet()`,
             );
             return false;
         }
         /*
         When a legacy user runs cashtab.com/, their active wallet will be migrated to Path1899 by 
         the getWallet function. getWallet function also makes sure that each Path has a public key
 
         Wallets in savedWallets are migrated when they are activated, in this function
 
         Two cases to handle
 
         1 - currentlyActiveWallet has Path1899, but its stored keyvalue pair in savedWallets does not
             > Update savedWallets so that Path1899 is added to currentlyActiveWallet
         
         2 - walletToActivate does not have Path1899
             > Update walletToActivate with Path1899 before activation
 
         NOTE: since publicKey property is added later,
         wallet without public key in Path1899 is also considered legacy and required migration.
         */
 
         // Need to handle a similar situation with state
         // If you find the activeWallet in savedWallets but without state, resave active wallet with state
         // Note you do not have the Case 2 described above here, as wallet state is added in the update() function of useWallet.js
         // Also note, since state can be expected to change frequently (unlike path deriv), you will likely save it every time you activate a new wallet
         // Check savedWallets for currentlyActiveWallet
         let walletInSavedWallets = false;
         for (let i = 0; i < savedWallets.length; i += 1) {
             if (savedWallets[i].name === currentlyActiveWallet.name) {
                 walletInSavedWallets = true;
                 // Check savedWallets for unmigrated currentlyActiveWallet
                 if (isLegacyMigrationRequired(savedWallets[i])) {
                     // Case 1, described above
                     savedWallets[i].Path1899 = currentlyActiveWallet.Path1899;
                     savedWallets[i].Path145 = currentlyActiveWallet.Path145;
                     savedWallets[i].Path245 = currentlyActiveWallet.Path245;
                 }
 
                 /*
                 Update wallet state
                 Note, this makes previous `walletUnmigrated` variable redundant
                 savedWallets[i] should always be updated, since wallet state can be expected to change most of the time
                 */
                 savedWallets[i].state = currentlyActiveWallet.state;
             }
         }
 
         // resave savedWallets
         try {
             // Set walletName as the active wallet
             await localforage.setItem('savedWallets', savedWallets);
         } catch (err) {
             console.log(
                 `Error in localforage.setItem("savedWallets") in activateWallet() for unmigrated wallet`,
             );
         }
 
         if (!walletInSavedWallets) {
             console.log(`Wallet is not in saved Wallets, adding`);
             savedWallets.push(currentlyActiveWallet);
             // resave savedWallets
             try {
                 // Set walletName as the active wallet
                 await localforage.setItem('savedWallets', savedWallets);
             } catch (err) {
                 console.log(
                     `Error in localforage.setItem("savedWallets") in activateWallet()`,
                 );
             }
         }
         // If wallet does not have Path1899, add it
         // or each of the Path1899, Path145, Path245 does not have a public key, add them
         // by calling migrateLagacyWallet()
         if (isLegacyMigrationRequired(walletToActivate)) {
             // Case 2, described above
             console.log(
                 `Case 2: Wallet to activate does not have Path1899 or does not have public key in each Path`,
             );
             console.log(
                 `Wallet to activate from SavedWallets does not have Path1899 or does not have public key in each Path`,
             );
             console.log(`walletToActivate`, walletToActivate);
             walletToActivate = await migrateLegacyWallet(BCH, walletToActivate);
         } else {
             // Otherwise activate it as normal
             // Now that we have verified the last wallet was saved, we can activate the new wallet
             try {
                 await localforage.setItem('wallet', walletToActivate);
             } catch (err) {
                 console.log(
                     `Error in localforage.setItem("wallet", walletToActivate) in activateWallet()`,
                 );
                 return false;
             }
         }
         // Make sure stored wallet is in correct format to be used as live wallet
         if (isValidStoredWallet(walletToActivate)) {
             // Convert all the token balance figures to big numbers
             const liveWalletState = loadStoredWallet(walletToActivate.state);
             walletToActivate.state = liveWalletState;
         }
 
         return walletToActivate;
     };
 
     const renameWallet = async (oldName, newName) => {
         // Load savedWallets
         let savedWallets;
         try {
             savedWallets = await localforage.getItem('savedWallets');
         } catch (err) {
             console.log(
                 `Error in await localforage.getItem("savedWallets") in renameWallet`,
             );
             console.log(err);
             return false;
         }
         // Verify that no existing wallet has this name
         for (let i = 0; i < savedWallets.length; i += 1) {
             if (savedWallets[i].name === newName) {
                 // return an error
                 return false;
             }
         }
 
         // change name of desired wallet
         for (let i = 0; i < savedWallets.length; i += 1) {
             if (savedWallets[i].name === oldName) {
                 // Replace the name of this entry with the new name
                 savedWallets[i].name = newName;
             }
         }
         // resave savedWallets
         try {
             // Set walletName as the active wallet
             await localforage.setItem('savedWallets', savedWallets);
         } catch (err) {
             console.log(
                 `Error in localforage.setItem("savedWallets", savedWallets) in renameWallet()`,
             );
             return false;
         }
         return true;
     };
 
     const deleteWallet = async walletToBeDeleted => {
         // delete a wallet
         // returns true if wallet is successfully deleted
         // otherwise returns false
         // Load savedWallets
         let savedWallets;
         try {
             savedWallets = await localforage.getItem('savedWallets');
         } catch (err) {
             console.log(
                 `Error in await localforage.getItem("savedWallets") in deleteWallet`,
             );
             console.log(err);
             return false;
         }
         // Iterate over to find the wallet to be deleted
         // Verify that no existing wallet has this name
         let walletFoundAndRemoved = false;
         for (let i = 0; i < savedWallets.length; i += 1) {
             if (savedWallets[i].name === walletToBeDeleted.name) {
                 // Verify it has the same mnemonic too, that's a better UUID
                 if (savedWallets[i].mnemonic === walletToBeDeleted.mnemonic) {
                     // Delete it
                     savedWallets.splice(i, 1);
                     walletFoundAndRemoved = true;
                 }
             }
         }
         // If you don't find the wallet, return false
         if (!walletFoundAndRemoved) {
             return false;
         }
 
         // Resave savedWallets less the deleted wallet
         try {
             // Set walletName as the active wallet
             await localforage.setItem('savedWallets', savedWallets);
         } catch (err) {
             console.log(
                 `Error in localforage.setItem("savedWallets", savedWallets) in deleteWallet()`,
             );
             return false;
         }
         return true;
     };
 
     const addNewSavedWallet = async importMnemonic => {
         // Add a new wallet to savedWallets from importMnemonic or just new wallet
         const lang = 'english';
         // create 128 bit BIP39 mnemonic
         const Bip39128BitMnemonic = importMnemonic
             ? importMnemonic
             : BCH.Mnemonic.generate(128, BCH.Mnemonic.wordLists()[lang]);
         const newSavedWallet = await getWalletDetails({
             mnemonic: Bip39128BitMnemonic.toString(),
         });
         // Get saved wallets
         let savedWallets;
         try {
             savedWallets = await localforage.getItem('savedWallets');
             // If this doesn't exist yet, savedWallets === null
             if (savedWallets === null) {
                 savedWallets = [];
             }
         } catch (err) {
             console.log(
                 `Error in savedWallets = await localforage.getItem("savedWallets") in addNewSavedWallet()`,
             );
             console.log(err);
             console.log(`savedWallets in error state`, savedWallets);
         }
         // If this wallet is from an imported mnemonic, make sure it does not already exist in savedWallets
         if (importMnemonic) {
             for (let i = 0; i < savedWallets.length; i += 1) {
                 // Check for condition "importing new wallet that is already in savedWallets"
                 if (savedWallets[i].mnemonic === importMnemonic) {
                     // set this as the active wallet to keep name history
                     console.log(
                         `Error: this wallet already exists in savedWallets`,
                     );
                     console.log(`Wallet not being added.`);
                     return false;
                 }
             }
         }
         // add newSavedWallet
         savedWallets.push(newSavedWallet);
         // update savedWallets
         try {
             await localforage.setItem('savedWallets', savedWallets);
         } catch (err) {
             console.log(
                 `Error in localforage.setItem("savedWallets", activeWallet) called in createWallet with ${importMnemonic}`,
             );
             console.log(`savedWallets`, savedWallets);
             console.log(err);
         }
         return true;
     };
 
     const createWallet = async importMnemonic => {
         const lang = 'english';
         // create 128 bit BIP39 mnemonic
         const Bip39128BitMnemonic = importMnemonic
             ? importMnemonic
             : BCH.Mnemonic.generate(128, BCH.Mnemonic.wordLists()[lang]);
         const wallet = await getWalletDetails({
             mnemonic: Bip39128BitMnemonic.toString(),
         });
 
         try {
             await localforage.setItem('wallet', wallet);
         } catch (err) {
             console.log(
                 `Error setting wallet to wallet indexedDb in createWallet()`,
             );
             console.log(err);
         }
         // Since this function is only called from OnBoarding.js, also add this to the saved wallet
         try {
             await localforage.setItem('savedWallets', [wallet]);
         } catch (err) {
             console.log(
                 `Error setting wallet to savedWallets indexedDb in createWallet()`,
             );
             console.log(err);
         }
         return wallet;
     };
 
     const validateMnemonic = (
         mnemonic,
         wordlist = BCH.Mnemonic.wordLists().english,
     ) => {
         let mnemonicTestOutput;
 
         try {
             mnemonicTestOutput = BCH.Mnemonic.validate(mnemonic, wordlist);
 
             if (mnemonicTestOutput === 'Valid mnemonic') {
                 return true;
             } else {
                 return false;
             }
         } catch (err) {
             console.log(err);
             return false;
         }
     };
 
     const handleUpdateWallet = async setWallet => {
         await loadWalletFromStorageOnStartup(setWallet);
     };
 
     const loadCashtabSettings = async () => {
         // get settings object from localforage
         let localSettings;
         try {
             localSettings = await localforage.getItem('settings');
             // If there is no keyvalue pair in localforage with key 'settings'
             if (localSettings === null) {
                 // Create one with the default settings from Ticker.js
                 localforage.setItem('settings', currency.defaultSettings);
                 // Set state to default settings
                 setCashtabSettings(currency.defaultSettings);
                 return currency.defaultSettings;
             }
         } catch (err) {
             console.log(`Error getting cashtabSettings`, err);
             // TODO If they do not exist, write them
             // TODO add function to change them
             setCashtabSettings(currency.defaultSettings);
             return currency.defaultSettings;
         }
         // If you found an object in localforage at the settings key, make sure it's valid
         if (isValidCashtabSettings(localSettings)) {
             setCashtabSettings(localSettings);
             return localSettings;
         }
         // if not valid, also set cashtabSettings to default
         setCashtabSettings(currency.defaultSettings);
         return currency.defaultSettings;
     };
 
     // With different currency selections possible, need unique intervals for price checks
     // Must be able to end them and set new ones with new currencies
     const initializeFiatPriceApi = async selectedFiatCurrency => {
         // Update fiat price and confirm it is set to make sure ap keeps loading state until this is updated
         await fetchBchPrice(selectedFiatCurrency);
         // Set interval for updating the price with given currency
 
         const thisFiatInterval = setInterval(function () {
             fetchBchPrice(selectedFiatCurrency);
         }, 60000);
 
         // set interval in state
         setCheckFiatInterval(thisFiatInterval);
     };
 
     const clearFiatPriceApi = fiatPriceApi => {
         // Clear fiat price check interval of previously selected currency
         clearInterval(fiatPriceApi);
     };
 
     const changeCashtabSettings = async (key, newValue) => {
         // Set loading to true as you do not want to display the fiat price of the last currency
         // loading = true will lock the UI until the fiat price has updated
         setLoading(true);
         // Get settings from localforage
         let currentSettings;
         let newSettings;
         try {
             currentSettings = await localforage.getItem('settings');
         } catch (err) {
             console.log(`Error in changeCashtabSettings`, err);
             // Set fiat price to null, which disables fiat sends throughout the app
             setFiatPrice(null);
             // Unlock the UI
             setLoading(false);
             return;
         }
 
         // Make sure function was called with valid params
         if (currency.settingsValidation[key].includes(newValue)) {
             // Update settings
             newSettings = currentSettings;
             newSettings[key] = newValue;
         } else {
             // Set fiat price to null, which disables fiat sends throughout the app
             setFiatPrice(null);
             // Unlock the UI
             setLoading(false);
             return;
         }
         // Set new settings in state so they are available in context throughout the app
         setCashtabSettings(newSettings);
         // If this settings change adjusted the fiat currency, update fiat price
         if (key === 'fiatCurrency') {
             clearFiatPriceApi(checkFiatInterval);
             initializeFiatPriceApi(newValue);
         }
         // Write new settings in localforage
         try {
             await localforage.setItem('settings', newSettings);
         } catch (err) {
             console.log(
                 `Error writing newSettings object to localforage in changeCashtabSettings`,
                 err,
             );
             console.log(`newSettings`, newSettings);
             // do nothing. If this happens, the user will see default currency next time they load the app.
         }
         setLoading(false);
     };
 
     // Parse for incoming XEC transactions
     // hasUpdated is set to true in the useAsyncTimeout function, and re-sets to false during activateWallet
     if (
         previousBalances &&
         balances &&
         'totalBalance' in previousBalances &&
         'totalBalance' in balances &&
         new BigNumber(balances.totalBalance)
             .minus(previousBalances.totalBalance)
             .gt(0) &&
         hasUpdated
     ) {
         xecReceivedNotification(
             balances,
             previousBalances,
             cashtabSettings,
             fiatPrice,
         );
     }
 
     // Parse for incoming eToken transactions
     if (
         tokens &&
         tokens[0] &&
         tokens[0].balance &&
         previousTokens &&
         previousTokens[0] &&
         previousTokens[0].balance &&
         hasUpdated === true
     ) {
         // If tokens length is greater than previousTokens length, a new token has been received
         // Note, a user could receive a new token, AND more of existing tokens in between app updates
         // In this case, the app will only notify about the new token
         // TODO better handling for all possible cases to cover this
         // TODO handle with websockets for better response time, less complicated calc
         if (tokens.length > previousTokens.length) {
             // Find the new token
             const tokenIds = tokens.map(({ tokenId }) => tokenId);
             const previousTokenIds = previousTokens.map(
                 ({ tokenId }) => tokenId,
             );
             //console.log(`tokenIds`, tokenIds);
             //console.log(`previousTokenIds`, previousTokenIds);
 
             // An array with the new token Id
             const newTokenIdArr = tokenIds.filter(
                 tokenId => !previousTokenIds.includes(tokenId),
             );
             // It's possible that 2 new tokens were received
             // To do, handle this case
             const newTokenId = newTokenIdArr[0];
             //console.log(newTokenId);
 
             // How much of this tokenId did you get?
             // would be at
 
             // Find where the newTokenId is
             const receivedTokenObjectIndex = tokens.findIndex(
                 x => x.tokenId === newTokenId,
             );
             //console.log(`receivedTokenObjectIndex`, receivedTokenObjectIndex);
             // Calculate amount received
             //console.log(`receivedTokenObject:`, tokens[receivedTokenObjectIndex]);
 
             const receivedSlpQty =
                 tokens[receivedTokenObjectIndex].balance.toString();
             const receivedSlpTicker =
                 tokens[receivedTokenObjectIndex].info.tokenTicker;
             const receivedSlpName =
                 tokens[receivedTokenObjectIndex].info.tokenName;
             //console.log(`receivedSlpQty`, receivedSlpQty);
 
             // Notification if you received SLP
             if (receivedSlpQty > 0) {
                 eTokenReceivedNotification(
                     currency,
                     receivedSlpTicker,
                     receivedSlpQty,
                     receivedSlpName,
                 );
             }
             //
         } else {
             // If tokens[i].balance > previousTokens[i].balance, a new SLP tx of an existing token has been received
             // Note that tokens[i].balance is of type BigNumber
             for (let i = 0; i < tokens.length; i += 1) {
                 if (tokens[i].balance.gt(previousTokens[i].balance)) {
                     // Received this token
                     // console.log(`previousTokenId`, previousTokens[i].tokenId);
                     // console.log(`currentTokenId`, tokens[i].tokenId);
 
                     if (previousTokens[i].tokenId !== tokens[i].tokenId) {
                         console.log(
                             `TokenIds do not match, breaking from SLP notifications`,
                         );
                         // Then don't send the notification
                         // Also don't 'continue' ; this means you have sent a token, just stop iterating through
                         break;
                     }
                     const receivedSlpQty = tokens[i].balance.minus(
                         previousTokens[i].balance,
                     );
 
                     const receivedSlpTicker = tokens[i].info.tokenTicker;
                     const receivedSlpName = tokens[i].info.tokenName;
 
                     eTokenReceivedNotification(
                         currency,
                         receivedSlpTicker,
                         receivedSlpQty,
                         receivedSlpName,
                     );
                 }
             }
         }
     }
 
     // Update wallet every 10s
     useAsyncTimeout(async () => {
         const wallet = await getWallet();
         update({
             wallet,
         }).finally(() => {
             setLoading(false);
             if (!hasUpdated) {
                 setHasUpdated(true);
             }
         });
     }, 1000);
 
     const fetchBchPrice = async (
         fiatCode = cashtabSettings ? cashtabSettings.fiatCurrency : 'usd',
     ) => {
         // Split this variable out in case coingecko changes
         const cryptoId = currency.coingeckoId;
         // Keep this in the code, because different URLs will have different outputs require different parsing
         const priceApiUrl = `https://api.coingecko.com/api/v3/simple/price?ids=${cryptoId}&vs_currencies=${fiatCode}&include_last_updated_at=true`;
         let bchPrice;
         let bchPriceJson;
         try {
             bchPrice = await fetch(priceApiUrl);
             //console.log(`bchPrice`, bchPrice);
         } catch (err) {
             console.log(`Error fetching BCH Price`);
             console.log(err);
         }
         try {
             bchPriceJson = await bchPrice.json();
             //console.log(`bchPriceJson`, bchPriceJson);
             let bchPriceInFiat = bchPriceJson[cryptoId][fiatCode];
 
             const validEcashPrice = typeof bchPriceInFiat === 'number';
 
             if (validEcashPrice) {
                 setFiatPrice(bchPriceInFiat);
             } else {
                 // If API price looks fishy, do not allow app to send using fiat settings
                 setFiatPrice(null);
             }
         } catch (err) {
             console.log(`Error parsing price API response to JSON`);
             console.log(err);
         }
     };
 
     useEffect(async () => {
         handleUpdateWallet(setWallet);
         const initialSettings = await loadCashtabSettings();
         initializeFiatPriceApi(initialSettings.fiatCurrency);
     }, []);
 
     return {
         BCH,
         wallet,
         fiatPrice,
         loading,
         apiError,
         cashtabSettings,
         changeCashtabSettings,
         getActiveWalletFromLocalForage,
         getWallet,
         validateMnemonic,
         getWalletDetails,
         getSavedWallets,
         migrateLegacyWallet,
         createWallet: async importMnemonic => {
             setLoading(true);
             const newWallet = await createWallet(importMnemonic);
             setWallet(newWallet);
             update({
                 wallet: newWallet,
             }).finally(() => setLoading(false));
         },
         activateWallet: async walletToActivate => {
             setLoading(true);
             const newWallet = await activateWallet(walletToActivate);
             setWallet(newWallet);
             if (isValidStoredWallet(walletToActivate)) {
                 // If you have all state parameters needed in storage, immediately load the wallet
                 setLoading(false);
             } else {
                 // If the wallet is missing state parameters in storage, wait for API info
                 // This handles case of unmigrated legacy wallet
                 update({
                     wallet: newWallet,
                 }).finally(() => setLoading(false));
             }
         },
         addNewSavedWallet,
         renameWallet,
         deleteWallet,
     };
 };
 
 export default useWallet;
diff --git a/web/cashtab-v2/src/hooks/useWebAuthentication.js b/web/cashtab-v2/src/hooks/useWebAuthentication.js
index 877472373..9d9242900 100644
--- a/web/cashtab-v2/src/hooks/useWebAuthentication.js
+++ b/web/cashtab-v2/src/hooks/useWebAuthentication.js
@@ -1,238 +1,240 @@
 import { useState, useEffect } from 'react';
 import localforage from 'localforage';
 import { currency } from 'components/Common/Ticker';
 import {
     convertBase64ToArrayBuffer,
     convertArrayBufferToBase64,
 } from 'utils/convertArrBuffBase64';
 
 // return an Authentication Object
 // OR null if user device does not support Web Authentication
 const useWebAuthentication = () => {
     const [isWebAuthnSupported, setIsWebAuthnSupported] = useState(false);
     // Possible values of isAuthenticationRequired:
     //   true - YES, authentication is required
     //   false - NO, authentication is not required
     //   undefined - has not been set, this is the first time the app runs
     const [isAuthenticationRequired, setIsAuthenticationRequired] =
         useState(undefined);
     const [credentialId, setCredentialId] = useState(null);
     const [isSignedIn, setIsSignedIn] = useState(false);
     const [userId, setUserId] = useState(Date.now().toString(16));
     const [loading, setLoading] = useState(true);
 
     const loadAuthenticationConfigFromLocalStorage = async () => {
         // try to load authentication configuration from local storage
         try {
             return await localforage.getItem('authenticationConfig');
         } catch (err) {
             console.error(
                 'Error is localforange.getItem("authenticatonConfig") in loadAuthenticationConfigFromLocalStorage() in useWebAuthentication()',
             );
             // Should stop when attempting to read from localstorage failed
             // countinuing would prompt user to register new credential
             // that would risk overrididing existing credential
             throw err;
         }
     };
 
     const saveAuthenticationConfigToLocalStorage = () => {
         try {
             return localforage.setItem('authenticationConfig', {
                 isAuthenticationRequired,
                 userId,
                 credentialId,
             });
         } catch (err) {
             console.error(
                 'Error is localforange.setItem("authenticatonConfig") in saveAuthenticationConfigToLocalStorage() in useWebAuthentication()',
             );
             throw err;
         }
     };
 
     // Run Once
     useEffect(async () => {
         // check to see if user device supports User Verification
         const available =
             await window.PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable();
         // only attempt to save/load authentication configuration from local storage if web authetication is supported
         if (available) {
             const authenticationConfig =
                 await loadAuthenticationConfigFromLocalStorage();
             // if this is the first time the app is run, then save the default config value
             if (authenticationConfig === null) {
                 saveAuthenticationConfigToLocalStorage();
             } else {
                 setUserId(authenticationConfig.userId);
                 setCredentialId(authenticationConfig.credentialId);
                 setIsAuthenticationRequired(
                     authenticationConfig.isAuthenticationRequired,
                 );
             }
             // signout the user when the app is not visible (minimize the browser, switch tab, switch app window)
             const handleDocVisibilityChange = () => {
                 if (document.visibilityState !== 'visible')
                     setIsSignedIn(false);
             };
             document.addEventListener(
                 'visibilitychange',
                 handleDocVisibilityChange,
             );
 
             setIsWebAuthnSupported(available);
             setLoading(false);
 
             return () => {
                 document.removeEventListener(
                     'visibilitychange',
                     handleDocVisibilityChange,
                 );
             };
         }
     }, []);
 
     // save the config whenever it is changed
     useEffect(async () => {
         if (isAuthenticationRequired === undefined) return;
         await saveAuthenticationConfigToLocalStorage();
     }, [isAuthenticationRequired, credentialId]);
 
     // options for PublicKeyCredentialCreation
     const publicKeyCredentialCreationOptions = {
         // hardcode for now
         // consider generating random string and then verifying it against the reponse from authenticator
         challenge: Uint8Array.from('cashtab-wallet-for-ecash', c =>
             c.charCodeAt(0),
         ),
         rp: {
             name: currency.name,
             id: document.domain,
         },
         user: {
             id: Uint8Array.from(userId, c => c.charCodeAt(0)),
             name: `Local User`,
             displayName: 'Local User',
         },
         pubKeyCredParams: [
             { alg: -7, type: 'public-key' },
             { alg: -35, type: 'public-key' },
             { alg: -36, type: 'public-key' },
             { alg: -257, type: 'public-key' },
             { alg: -258, type: 'public-key' },
             { alg: -259, type: 'public-key' },
             { alg: -37, type: 'public-key' },
             { alg: -38, type: 'public-key' },
             { alg: -39, type: 'public-key' },
             { alg: -8, type: 'public-key' },
         ],
         authenticatorSelection: {
             userVerification: 'required',
             authenticatorAttachment: 'platform',
             requireResidentKey: false,
         },
         timeout: 60000,
         attestation: 'none',
         excludeCredentials: [],
         extensions: {},
     };
 
     // options for PublicKeyCredentialRequest
     const publickKeyRequestOptions = {
         // hardcode for now
         // consider generating random string and then verifying it against the reponse from authenticator
         challenge: Uint8Array.from('cashtab-wallet-for-ecash', c =>
             c.charCodeAt(0),
         ),
         timeout: 60000,
         // rpId: document.domain,
         allowCredentials: [
             {
                 type: 'public-key',
                 // the credentialId is stored as base64
                 // need to convert it to ArrayBuffer
                 id: convertBase64ToArrayBuffer(credentialId),
                 transports: ['internal'],
             },
         ],
         userVerification: 'required',
         extensions: {},
     };
 
     const authentication = {
         isAuthenticationRequired,
         credentialId,
         isSignedIn,
         loading,
         turnOnAuthentication: () => {
             // Need to make sure that the credetialId is set
             // before turning on the authentication requirement
             // otherwise, user will be locked out of the app
             // in other words, user must sign up / register first
             if (credentialId) {
                 setIsAuthenticationRequired(true);
             }
         },
         turnOffAuthentication: () => {
             setIsAuthenticationRequired(false);
         },
 
         signUp: async () => {
             try {
                 const publicKeyCredential = await navigator.credentials.create({
                     publicKey: publicKeyCredentialCreationOptions,
                 });
                 if (publicKeyCredential) {
                     // convert the rawId from ArrayBuffer to base64 String
                     const base64Id = convertArrayBufferToBase64(
                         publicKeyCredential.rawId,
                     );
                     setIsSignedIn(true);
                     setCredentialId(base64Id);
                     setIsAuthenticationRequired(true);
                 } else {
                     throw new Error(
                         'Error: navigator.credentials.create() returns null, in signUp()',
                     );
                 }
             } catch (err) {
+                console.log(err);
                 throw err;
             }
         },
 
         signIn: async () => {
             try {
                 const assertion = await navigator.credentials.get({
                     publicKey: publickKeyRequestOptions,
                 });
                 if (assertion) {
                     // convert rawId from ArrayBuffer to base64 String
                     const base64Id = convertArrayBufferToBase64(
                         assertion.rawId,
                     );
                     if (base64Id === credentialId) setIsSignedIn(true);
                 } else {
                     throw new Error(
                         'Error: navigator.credentials.get() returns null, signIn()',
                     );
                 }
             } catch (err) {
+                console.log(err);
                 throw err;
             }
         },
 
         signOut: () => {
             setIsSignedIn(false);
         },
     };
 
     // Web Authentication support on a user's device may become unavailable due to various reasons
     // (hardware failure, OS problems, the behaviour of some authenticators after several failed authentication attempts, etc)
     // If this is the case, and user has previous enabled the lock, the decision here is to lock up the wallet.
     // Otherwise, malicious user needs to simply disbale the platform authenticator to gain access to the wallet
     return !isWebAuthnSupported && !isAuthenticationRequired
         ? null
         : authentication;
 };
 
 export default useWebAuthentication;
diff --git a/web/cashtab-v2/src/utils/GoogleAnalytics.js b/web/cashtab-v2/src/utils/GoogleAnalytics.js
index c50d8386f..642803526 100644
--- a/web/cashtab-v2/src/utils/GoogleAnalytics.js
+++ b/web/cashtab-v2/src/utils/GoogleAnalytics.js
@@ -1,77 +1,76 @@
 // utils/GoogleAnalytics.js
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import * as ReactGA from 'react-ga';
 import { Route } from 'react-router-dom';
 
 class GoogleAnalytics extends Component {
     componentDidMount() {
         this.logPageChange(
             this.props.location.pathname,
             this.props.location.search,
         );
     }
 
     componentDidUpdate({ location: prevLocation }) {
         const {
             location: { pathname, search },
         } = this.props;
         const isDifferentPathname = pathname !== prevLocation.pathname;
         const isDifferentSearch = search !== prevLocation.search;
 
         if (isDifferentPathname || isDifferentSearch) {
             this.logPageChange(pathname, search);
         }
     }
 
     logPageChange(pathname, search = '') {
         const page = pathname + search;
         const { location } = window;
         ReactGA.set({
             page,
             location: `${location.origin}${page}`,
             ...this.props.options,
         });
         ReactGA.pageview(page);
     }
 
     render() {
         return null;
     }
 }
 
 GoogleAnalytics.propTypes = {
     location: PropTypes.shape({
         pathname: PropTypes.string,
         search: PropTypes.string,
     }).isRequired,
     options: PropTypes.object,
 };
 
 const RouteTracker = () => <Route component={GoogleAnalytics} />;
 
-const init = (options = {}) => {
+const init = () => {
     const isGAEnabled = process.env.NODE_ENV === 'production';
-
     if (isGAEnabled) {
         ReactGA.initialize('UA-183678810-1');
     }
 
     return isGAEnabled;
 };
 
 export const Event = (category, action, label) => {
     ReactGA.event({
         category: category,
         action: action,
         label: label,
     });
 };
 
 const GoogleAnalyticsDefault = {
     GoogleAnalytics,
     RouteTracker,
     init,
 };
 
 export default GoogleAnalyticsDefault;
diff --git a/web/cashtab-v2/src/utils/cashMethods.js b/web/cashtab-v2/src/utils/cashMethods.js
index bec6cd2ea..fdaf8c89a 100644
--- a/web/cashtab-v2/src/utils/cashMethods.js
+++ b/web/cashtab-v2/src/utils/cashMethods.js
@@ -1,930 +1,929 @@
 import { currency } from 'components/Common/Ticker';
 import {
     isValidXecAddress,
     isValidEtokenAddress,
-    isValidUtxo,
     isValidBchApiUtxoObject,
 } from 'utils/validation';
 import BigNumber from 'bignumber.js';
 import cashaddr from 'ecashaddrjs';
 
 export function parseOpReturn(hexStr) {
     if (
         !hexStr ||
         typeof hexStr !== 'string' ||
         hexStr.substring(0, 2) !== currency.opReturn.opReturnPrefixHex
     ) {
         return false;
     }
 
     hexStr = hexStr.slice(2); // remove the first byte i.e. 6a
 
     /*
      * @Return: resultArray is structured as follows:
      *  resultArray[0] is the transaction type i.e. eToken prefix, cashtab prefix, external message itself if unrecognized prefix
      *  resultArray[1] is the actual cashtab message or the 2nd part of an external message
      *  resultArray[2 - n] are the additional messages for future protcols
      */
     let resultArray = [];
     let message = '';
     let hexStrLength = hexStr.length;
 
     for (let i = 0; hexStrLength !== 0; i++) {
         // part 1: check the preceding byte value for the subsequent message
         let byteValue = hexStr.substring(0, 2);
         let msgByteSize = 0;
         if (byteValue === currency.opReturn.opPushDataOne) {
             // if this byte is 4c then the next byte is the message byte size - retrieve the message byte size only
             msgByteSize = parseInt(hexStr.substring(2, 4), 16); // hex base 16 to decimal base 10
             hexStr = hexStr.slice(4); // strip the 4c + message byte size info
         } else {
             // take the byte as the message byte size
             msgByteSize = parseInt(hexStr.substring(0, 2), 16); // hex base 16 to decimal base 10
             hexStr = hexStr.slice(2); // strip the message byte size info
         }
 
         // part 2: parse the subsequent message based on bytesize
         const msgCharLength = 2 * msgByteSize;
         message = hexStr.substring(0, msgCharLength);
         if (i === 0 && message === currency.opReturn.appPrefixesHex.eToken) {
             // add the extracted eToken prefix to array then exit loop
             resultArray[i] = currency.opReturn.appPrefixesHex.eToken;
             break;
         } else if (
             i === 0 &&
             message === currency.opReturn.appPrefixesHex.cashtab
         ) {
             // add the extracted Cashtab prefix to array
             resultArray[i] = currency.opReturn.appPrefixesHex.cashtab;
         } else if (
             i === 0 &&
             message === currency.opReturn.appPrefixesHex.cashtabEncrypted
         ) {
             // add the Cashtab encryption prefix to array
             resultArray[i] = currency.opReturn.appPrefixesHex.cashtabEncrypted;
         } else {
             // this is either an external message or a subsequent cashtab message loop to extract the message
             resultArray[i] = message;
         }
 
         // strip out the parsed message
         hexStr = hexStr.slice(msgCharLength);
         hexStrLength = hexStr.length;
     }
     return resultArray;
 }
 
 export const fromLegacyDecimals = (
     amount,
     cashDecimals = currency.cashDecimals,
 ) => {
     // Input 0.00000546 BCH
     // Output 5.46 XEC or 0.00000546 BCH, depending on currency.cashDecimals
     const amountBig = new BigNumber(amount);
     const conversionFactor = new BigNumber(10 ** (8 - cashDecimals));
     const amountSmallestDenomination = amountBig
         .times(conversionFactor)
         .toNumber();
     return amountSmallestDenomination;
 };
 
 export const fromSmallestDenomination = (
     amount,
     cashDecimals = currency.cashDecimals,
 ) => {
     const amountBig = new BigNumber(amount);
     const multiplier = new BigNumber(10 ** (-1 * cashDecimals));
     const amountInBaseUnits = amountBig.times(multiplier);
     return amountInBaseUnits.toNumber();
 };
 
 export const toSmallestDenomination = (
     sendAmount,
     cashDecimals = currency.cashDecimals,
 ) => {
     // Replace the BCH.toSatoshi method with an equivalent function that works for arbitrary decimal places
     // Example, for an 8 decimal place currency like Bitcoin
     // Input: a BigNumber of the amount of Bitcoin to be sent
     // Output: a BigNumber of the amount of satoshis to be sent, or false if input is invalid
 
     // Validate
     // Input should be a BigNumber with no more decimal places than cashDecimals
     const isValidSendAmount =
         BigNumber.isBigNumber(sendAmount) && sendAmount.dp() <= cashDecimals;
     if (!isValidSendAmount) {
         return false;
     }
     const conversionFactor = new BigNumber(10 ** cashDecimals);
     const sendAmountSmallestDenomination = sendAmount.times(conversionFactor);
     return sendAmountSmallestDenomination;
 };
 
 export const batchArray = (inputArray, batchSize) => {
     // take an array of n elements, return an array of arrays each of length batchSize
 
     const batchedArray = [];
     for (let i = 0; i < inputArray.length; i += batchSize) {
         const tempArray = inputArray.slice(i, i + batchSize);
         batchedArray.push(tempArray);
     }
     return batchedArray;
 };
 
 export const flattenBatchedHydratedUtxos = batchedHydratedUtxoDetails => {
     // Return same result as if only the bulk API call were made
     // to do this, just need to move all utxos under one slpUtxos
     /*
     given 
     [
       {
         slpUtxos: [
             {
                 utxos: [],
                 address: '',
             }
           ],
       },
       {
         slpUtxos: [
             {
                 utxos: [],
                 address: '',
             }
           ],
       }
     ]
   return [
     {
         slpUtxos: [
             {
             utxos: [],
             address: ''
             },
             {
             utxos: [],
             address: ''
             },
           ]
         }
   */
     const flattenedBatchedHydratedUtxos = { slpUtxos: [] };
     for (let i = 0; i < batchedHydratedUtxoDetails.length; i += 1) {
         const theseSlpUtxos = batchedHydratedUtxoDetails[i].slpUtxos[0];
         flattenedBatchedHydratedUtxos.slpUtxos.push(theseSlpUtxos);
     }
     return flattenedBatchedHydratedUtxos;
 };
 
 export const loadStoredWallet = walletStateFromStorage => {
     // Accept cached tokens array that does not save BigNumber type of BigNumbers
     // Return array with BigNumbers converted
     // See BigNumber.js api for how to create a BigNumber object from an object
     // https://mikemcl.github.io/bignumber.js/
     const liveWalletState = walletStateFromStorage;
     const { slpBalancesAndUtxos, tokens } = liveWalletState;
     for (let i = 0; i < tokens.length; i += 1) {
         const thisTokenBalance = tokens[i].balance;
         thisTokenBalance._isBigNumber = true;
         tokens[i].balance = new BigNumber(thisTokenBalance);
     }
 
     // Also confirm balance is correct
     // Necessary step in case currency.decimals changed since last startup
     const balancesRebased = normalizeBalance(slpBalancesAndUtxos);
     liveWalletState.balances = balancesRebased;
     return liveWalletState;
 };
 
 export const normalizeBalance = slpBalancesAndUtxos => {
     const totalBalanceInSatoshis = slpBalancesAndUtxos.nonSlpUtxos.reduce(
         (previousBalance, utxo) => previousBalance + utxo.value,
         0,
     );
     return {
         totalBalanceInSatoshis,
         totalBalance: fromSmallestDenomination(totalBalanceInSatoshis),
     };
 };
 
 export const isValidStoredWallet = walletStateFromStorage => {
     return (
         typeof walletStateFromStorage === 'object' &&
         'state' in walletStateFromStorage &&
         typeof walletStateFromStorage.state === 'object' &&
         'balances' in walletStateFromStorage.state &&
         'utxos' in walletStateFromStorage.state &&
         'hydratedUtxoDetails' in walletStateFromStorage.state &&
         'slpBalancesAndUtxos' in walletStateFromStorage.state &&
         'tokens' in walletStateFromStorage.state
     );
 };
 
 export const getWalletState = wallet => {
     if (!wallet || !wallet.state) {
         return {
             balances: { totalBalance: 0, totalBalanceInSatoshis: 0 },
             hydratedUtxoDetails: {},
             tokens: [],
             slpBalancesAndUtxos: {},
             parsedTxHistory: [],
             utxos: [],
         };
     }
 
     return wallet.state;
 };
 
 export function convertEtokenToEcashAddr(eTokenAddress) {
     if (!eTokenAddress) {
         return new Error(
             `cashMethods.convertToEcashAddr() error: No etoken address provided`,
         );
     }
 
     // Confirm input is a valid eToken address
     const isValidInput = isValidEtokenAddress(eTokenAddress);
     if (!isValidInput) {
         return new Error(
             `cashMethods.convertToEcashAddr() error: ${eTokenAddress} is not a valid etoken address`,
         );
     }
 
     // Check for etoken: prefix
     const isPrefixedEtokenAddress = eTokenAddress.slice(0, 7) === 'etoken:';
 
     // If no prefix, assume it is checksummed for an etoken: prefix
     const testedEtokenAddr = isPrefixedEtokenAddress
         ? eTokenAddress
         : `etoken:${eTokenAddress}`;
 
     let ecashAddress;
     try {
         const { type, hash } = cashaddr.decode(testedEtokenAddr);
         ecashAddress = cashaddr.encode('ecash', type, hash);
     } catch (err) {
         return err;
     }
 
     return ecashAddress;
 }
 
 export function convertToEcashPrefix(bitcoincashPrefixedAddress) {
     // Prefix-less addresses may be valid, but the cashaddr.decode function used below
     // will throw an error without a prefix. Hence, must ensure prefix to use that function.
     const hasPrefix = bitcoincashPrefixedAddress.includes(':');
     if (hasPrefix) {
         // Is it bitcoincash: or simpleledger:
         const { type, hash, prefix } = cashaddr.decode(
             bitcoincashPrefixedAddress,
         );
 
         let newPrefix;
         if (prefix === 'bitcoincash') {
             newPrefix = 'ecash';
         } else if (prefix === 'simpleledger') {
             newPrefix = 'etoken';
         } else {
             return bitcoincashPrefixedAddress;
         }
 
         const convertedAddress = cashaddr.encode(newPrefix, type, hash);
 
         return convertedAddress;
     } else {
         return bitcoincashPrefixedAddress;
     }
 }
 
 export function toLegacyCash(addr) {
     // Confirm input is a valid ecash address
     const isValidInput = isValidXecAddress(addr);
     if (!isValidInput) {
         return new Error(`${addr} is not a valid ecash address`);
     }
 
     // Check for ecash: prefix
     const isPrefixedXecAddress = addr.slice(0, 6) === 'ecash:';
 
     // If no prefix, assume it is checksummed for an ecash: prefix
     const testedXecAddr = isPrefixedXecAddress ? addr : `ecash:${addr}`;
 
     let legacyCashAddress;
     try {
         const { type, hash } = cashaddr.decode(testedXecAddr);
         legacyCashAddress = cashaddr.encode(currency.legacyPrefix, type, hash);
     } catch (err) {
         return err;
     }
     return legacyCashAddress;
 }
 
 export function toLegacyCashArray(addressArray) {
     let cleanArray = []; // array of bch converted addresses to be returned
 
     if (
         addressArray === null ||
         addressArray === undefined ||
         !addressArray.length ||
         addressArray === ''
     ) {
         return new Error('Invalid addressArray input');
     }
 
     const arrayLength = addressArray.length;
 
     for (let i = 0; i < arrayLength; i++) {
         let addressValueArr = addressArray[i].split(',');
         let address = addressValueArr[0];
         let value = addressValueArr[1];
 
         // NB that toLegacyCash() includes address validation; will throw error for invalid address input
         const legacyAddress = toLegacyCash(address);
         if (legacyAddress instanceof Error) {
             return legacyAddress;
         }
         let convertedArrayData = legacyAddress + ',' + value + '\n';
         cleanArray.push(convertedArrayData);
     }
 
     return cleanArray;
 }
 
 export function toLegacyToken(addr) {
     // Confirm input is a valid ecash address
     const isValidInput = isValidEtokenAddress(addr);
     if (!isValidInput) {
         return new Error(`${addr} is not a valid etoken address`);
     }
 
     // Check for ecash: prefix
     const isPrefixedEtokenAddress = addr.slice(0, 7) === 'etoken:';
 
     // If no prefix, assume it is checksummed for an ecash: prefix
     const testedEtokenAddr = isPrefixedEtokenAddress ? addr : `etoken:${addr}`;
 
     let legacyTokenAddress;
     try {
         const { type, hash } = cashaddr.decode(testedEtokenAddr);
         legacyTokenAddress = cashaddr.encode('simpleledger', type, hash);
     } catch (err) {
         return err;
     }
     return legacyTokenAddress;
 }
 
 export const confirmNonEtokenUtxos = (hydratedUtxos, nonEtokenUtxos) => {
     // scan through hydratedUtxoDetails
     for (let i = 0; i < hydratedUtxos.length; i += 1) {
         // Find utxos with txids matching nonEtokenUtxos
         if (nonEtokenUtxos.includes(hydratedUtxos[i].txid)) {
             // Confirm that such utxos are not eToken utxos
             hydratedUtxos[i].isValid = false;
         }
     }
     return hydratedUtxos;
 };
 
 export const checkNullUtxosForTokenStatus = txDataResults => {
     const nonEtokenUtxos = [];
     for (let j = 0; j < txDataResults.length; j += 1) {
         const thisUtxoTxid = txDataResults[j].txid;
         const thisUtxoVout = txDataResults[j].details.vout;
         // Iterate over outputs
         for (let k = 0; k < thisUtxoVout.length; k += 1) {
             const thisOutput = thisUtxoVout[k];
             if (thisOutput.scriptPubKey.type === 'nulldata') {
                 const asmOutput = thisOutput.scriptPubKey.asm;
                 if (asmOutput.includes('OP_RETURN 5262419')) {
                     // then it's an eToken tx that has not been properly validated
                     // Do not include it in nonEtokenUtxos
                     // App will ignore it until SLPDB is able to validate it
                     /*
                     console.log(
                         `utxo ${thisUtxoTxid} requires further eToken validation, ignoring`,
                     );*/
                 } else {
                     // Otherwise it's just an OP_RETURN tx that SLPDB has some issue with
                     // It should still be in the user's utxo set
                     // Include it in nonEtokenUtxos
                     /*
                     console.log(
                         `utxo ${thisUtxoTxid} is not an eToken tx, adding to nonSlpUtxos`,
                     );
                     */
                     nonEtokenUtxos.push(thisUtxoTxid);
                 }
             }
         }
     }
     return nonEtokenUtxos;
 };
 
 /* Converts a serialized buffer containing encrypted data into an object
  * that can be interpreted by the ecies-lite library.
  *
  * For reference on the parsing logic in this function refer to the link below on the segment of
  * ecies-lite's encryption function where the encKey, macKey, iv and cipher are sliced and concatenated
  * https://github.com/tibetty/ecies-lite/blob/8fd97e80b443422269d0223ead55802378521679/index.js#L46-L55
  *
  * A similar PSF implmentation can also be found at:
  * https://github.com/Permissionless-Software-Foundation/bch-encrypt-lib/blob/master/lib/encryption.js
  *
  * For more detailed overview on the ecies encryption scheme, see https://cryptobook.nakov.com/asymmetric-key-ciphers/ecies-public-key-encryption
  */
 export const convertToEncryptStruct = encryptionBuffer => {
     // based on ecies-lite's encryption logic, the encryption buffer is concatenated as follows:
     //  [ epk + iv + ct + mac ]  whereby:
     // - The first 32 or 64 chars of the encryptionBuffer is the epk
     // - Both iv and ct params are 16 chars each, hence their combined substring is 32 chars from the end of the epk string
     //    - within this combined iv/ct substring, the first 16 chars is the iv param, and ct param being the later half
     // - The mac param is appended to the end of the encryption buffer
 
     // validate input buffer
     if (!encryptionBuffer) {
         throw new Error(
             'cashmethods.convertToEncryptStruct() error: input must be a buffer',
         );
     }
 
     try {
         // variable tracking the starting char position for string extraction purposes
         let startOfBuf = 0;
 
         // *** epk param extraction ***
         // The first char of the encryptionBuffer indicates the type of the public key
         // If the first char is 4, then the public key is 64 chars
         // If the first char is 3 or 2, then the public key is 32 chars
         // Otherwise this is not a valid encryption buffer compatible with the ecies-lite library
         let publicKey;
         switch (encryptionBuffer[0]) {
             case 4:
                 publicKey = encryptionBuffer.slice(0, 65); //  extract first 64 chars as public key
                 break;
             case 3:
             case 2:
                 publicKey = encryptionBuffer.slice(0, 33); //  extract first 32 chars as public key
                 break;
             default:
                 throw new Error(`Invalid type: ${encryptionBuffer[0]}`);
         }
 
         // *** iv and ct param extraction ***
         startOfBuf += publicKey.length; // sets the starting char position to the end of the public key (epk) in order to extract subsequent iv and ct substrings
         const encryptionTagLength = 32; // the length of the encryption tag (i.e. mac param) computed from each block of ciphertext, and is used to verify no one has tampered with the encrypted data
         const ivCtSubstring = encryptionBuffer.slice(
             startOfBuf,
             encryptionBuffer.length - encryptionTagLength,
         ); // extract the substring containing both iv and ct params, which is after the public key but before the mac param i.e. the 'encryption tag'
         const ivbufParam = ivCtSubstring.slice(0, 16); // extract the first 16 chars of substring as the iv param
         const ctbufParam = ivCtSubstring.slice(16); // extract the last 16 chars as substring the ct param
 
         // *** mac param extraction ***
         const macParam = encryptionBuffer.slice(
             encryptionBuffer.length - encryptionTagLength,
             encryptionBuffer.length,
         ); // extract the mac param appended to the end of the buffer
 
         return {
             iv: ivbufParam,
             epk: publicKey,
             ct: ctbufParam,
             mac: macParam,
         };
     } catch (err) {
         console.error(`useBCH.convertToEncryptStruct() error: `, err);
         throw err;
     }
 };
 
 export const getPublicKey = async (BCH, address) => {
     try {
         const publicKey = await BCH.encryption.getPubKey(address);
         return publicKey.publicKey;
     } catch (err) {
         if (err['error'] === 'No transaction history.') {
             throw new Error(
                 'Cannot send an encrypted message to a wallet with no outgoing transactions',
             );
         } else {
             throw err;
         }
     }
 };
 
 export const isLegacyMigrationRequired = wallet => {
     // If the wallet does not have Path1899,
     // Or each Path1899, Path145, Path245 does not have a public key
     // Then it requires migration
     if (
         !wallet.Path1899 ||
         !wallet.Path1899.publicKey ||
         !wallet.Path145.publicKey ||
         !wallet.Path245.publicKey
     ) {
         return true;
     }
 
     return false;
 };
 
 export const isExcludedUtxo = (utxo, utxoArray) => {
     /*
     utxo is a single utxo of model
     {
         height: 724992
         tx_hash: "8d4bdedb7c4443412e0c2f316a330863aef54d9ba73560ca60cca6408527b247"
         tx_pos: 0
         value: 10200
     }
 
     utxoArray is an array of utxos
     */
     let isExcludedUtxo = true;
     const { tx_hash, tx_pos, value } = utxo;
     for (let i = 0; i < utxoArray.length; i += 1) {
         const thisUtxo = utxoArray[i];
         // NOTE
         // You can't match height, as this changes from 0 to blockheight after confirmation
         //const thisUtxoHeight = thisUtxo.height;
         const thisUtxoTxid = thisUtxo.tx_hash;
         const thisUtxoTxPos = thisUtxo.tx_pos;
         const thisUtxoValue = thisUtxo.value;
         // If you find a utxo such that each object key is identical
         if (
             tx_hash === thisUtxoTxid &&
             tx_pos === thisUtxoTxPos &&
             value === thisUtxoValue
         ) {
             // Then this utxo is not excluded from the array
             isExcludedUtxo = false;
         }
     }
 
     return isExcludedUtxo;
 };
 
 export const whichUtxosWereAdded = (previousUtxos, currentUtxos) => {
     let utxosAddedFlag = false;
     const utxosAdded = [];
 
     // Iterate over currentUtxos
     // For each currentUtxo -- does it exist in previousUtxos?
     // If no, it's added
 
     // Note that the inputs are arrays of arrays, model
     /*
     previousUtxos = [{address: 'string', utxos: []}, ...]
     */
 
     // Iterate over the currentUtxos array of {address: 'string', utxos: []} objects
     for (let i = 0; i < currentUtxos.length; i += 1) {
         // Take the first object
         const thisCurrentUtxoObject = currentUtxos[i];
         const thisCurrentUtxoObjectAddress = thisCurrentUtxoObject.address;
         const thisCurrentUtxoObjectUtxos = thisCurrentUtxoObject.utxos;
         // Iterate over the previousUtxos array of {address: 'string', utxos: []} objects
         for (let j = 0; j < previousUtxos.length; j += 1) {
             const thisPreviousUtxoObject = previousUtxos[j];
             const thisPreviousUtxoObjectAddress =
                 thisPreviousUtxoObject.address;
             // When you find the utxos object at the same address
             if (
                 thisCurrentUtxoObjectAddress === thisPreviousUtxoObjectAddress
             ) {
                 // Create a utxosAddedObject with the address
                 const utxosAddedObject = {
                     address: thisCurrentUtxoObjectAddress,
                     utxos: [],
                 };
                 utxosAdded.push(utxosAddedObject);
 
                 // Grab the previousUtxoObject utxos array. thisCurrentUtxoObjectUtxos has changed compared to thisPreviousUtxoObjectUtxos
                 const thisPreviousUtxoObjectUtxos =
                     thisPreviousUtxoObject.utxos;
                 // To see if any utxos exist in thisCurrentUtxoObjectUtxos that do not exist in thisPreviousUtxoObjectUtxos
                 // iterate over thisPreviousUtxoObjectUtxos for each utxo in thisCurrentUtxoObjectUtxos
                 for (let k = 0; k < thisCurrentUtxoObjectUtxos.length; k += 1) {
                     const thisCurrentUtxo = thisCurrentUtxoObjectUtxos[k];
 
                     if (
                         isExcludedUtxo(
                             thisCurrentUtxo,
                             thisPreviousUtxoObjectUtxos,
                         )
                     ) {
                         // If thisCurrentUtxo was not in the corresponding previous utxos
                         // Then it was added
                         utxosAdded[j].utxos.push(thisCurrentUtxo);
                         utxosAddedFlag = true;
                     }
                 }
             }
         }
     }
     // If utxos were added, return them
     if (utxosAddedFlag) {
         return utxosAdded;
     }
     // Else return false
     return utxosAddedFlag;
 };
 
 export const whichUtxosWereConsumed = (previousUtxos, currentUtxos) => {
     let utxosConsumedFlag = false;
     const utxosConsumed = [];
     // Iterate over previousUtxos
     // For each previousUtxo -- does it exist in currentUtxos?
     // If no, it's consumed
 
     // Note that the inputs are arrays of arrays, model
     /*
     previousUtxos = [{address: 'string', utxos: []}, ...]
     */
 
     // Iterate over the previousUtxos array of {address: 'string', utxos: []} objects
     for (let i = 0; i < previousUtxos.length; i += 1) {
         // Take the first object
         const thisPreviousUtxoObject = previousUtxos[i];
         const thisPreviousUtxoObjectAddress = thisPreviousUtxoObject.address;
         const thisPreviousUtxoObjectUtxos = thisPreviousUtxoObject.utxos;
         // Iterate over the currentUtxos array of {address: 'string', utxos: []} objects
         for (let j = 0; j < currentUtxos.length; j += 1) {
             const thisCurrentUtxoObject = currentUtxos[j];
             const thisCurrentUtxoObjectAddress = thisCurrentUtxoObject.address;
             // When you find the utxos object at the same address
             if (
                 thisCurrentUtxoObjectAddress === thisPreviousUtxoObjectAddress
             ) {
                 // Create a utxosConsumedObject with the address
                 const utxosConsumedObject = {
                     address: thisCurrentUtxoObjectAddress,
                     utxos: [],
                 };
                 utxosConsumed.push(utxosConsumedObject);
                 // Grab the currentUtxoObject utxos array. thisCurrentUtxoObjectUtxos has changed compared to thisPreviousUtxoObjectUtxos
                 const thisCurrentUtxoObjectUtxos = thisCurrentUtxoObject.utxos;
                 // To see if any utxos exist in thisPreviousUtxoObjectUtxos that do not exist in thisCurrentUtxoObjectUtxos
                 // iterate over thisCurrentUtxoObjectUtxos for each utxo in thisPreviousUtxoObjectUtxos
                 for (
                     let k = 0;
                     k < thisPreviousUtxoObjectUtxos.length;
                     k += 1
                 ) {
                     const thisPreviousUtxo = thisPreviousUtxoObjectUtxos[k];
                     // If thisPreviousUtxo was not in the corresponding current utxos
 
                     if (
                         isExcludedUtxo(
                             thisPreviousUtxo,
                             thisCurrentUtxoObjectUtxos,
                         )
                     ) {
                         // Then it was consumed
                         utxosConsumed[j].utxos.push(thisPreviousUtxo);
                         utxosConsumedFlag = true;
                     }
                 }
             }
         }
     }
     // If utxos were consumed, return them
     if (utxosConsumedFlag) {
         return utxosConsumed;
     }
     // Else return false
     return utxosConsumedFlag;
 };
 
 export const addNewHydratedUtxos = (
     addedHydratedUtxos,
     hydratedUtxoDetails,
 ) => {
     const theseAdditionalHydratedUtxos = addedHydratedUtxos.slpUtxos;
     for (let i = 0; i < theseAdditionalHydratedUtxos.length; i += 1) {
         const thisHydratedUtxoObj = theseAdditionalHydratedUtxos[i];
         hydratedUtxoDetails.slpUtxos.push(thisHydratedUtxoObj);
     }
     return hydratedUtxoDetails;
     // Add hydrateUtxos(addedUtxos) to hydratedUtxoDetails
     /*
     e.g. add this
     {
     "slpUtxos": 
         [
             {
                 "utxos": [
                     {
                         "height": 725886,
                         "tx_hash": "29985c01444bf80ade764e5d40d7ec2c12317e03301243170139c75f20c51f78",
                         "tx_pos": 0,
                         "value": 3300,
                         "txid": "29985c01444bf80ade764e5d40d7ec2c12317e03301243170139c75f20c51f78",
                         "vout": 0,
                         "isValid": false
                     }
                 ],
                 "address": "bitcoincash:qz2708636snqhsxu8wnlka78h6fdp77ar5ulhz04hr"
             }
         ]
     }
 
 to this
 
 {
     "slpUtxos": 
         [
             {
                 "utxos": [
                     {
                         "height": 725886,
                         "tx_hash": "29985c01444bf80ade764e5d40d7ec2c12317e03301243170139c75f20c51f78",
                         "tx_pos": 0,
                         "value": 3300,
                         "txid": "29985c01444bf80ade764e5d40d7ec2c12317e03301243170139c75f20c51f78",
                         "vout": 0,
                         "isValid": false
                     }
                     ... up to 20
                 ],
                 "address": "bitcoincash:qz2708636snqhsxu8wnlka78h6fdp77ar5ulhz04hr"
             },
             {
                 "utxos": [
                     {
                         "height": 725886,
                         "tx_hash": "29985c01444bf80ade764e5d40d7ec2c12317e03301243170139c75f20c51f78",
                         "tx_pos": 0,
                         "value": 3300,
                         "txid": "29985c01444bf80ade764e5d40d7ec2c12317e03301243170139c75f20c51f78",
                         "vout": 0,
                         "isValid": false
                     }
                     ... up to 20
                 ],
                 "address": "bitcoincash:qz2708636snqhsxu8wnlka78h6fdp77ar5ulhz04hr"
             }
             ,
             ... a bunch of these in batches of 20
         ]
     }
     */
 };
 
 export const removeConsumedUtxos = (consumedUtxos, hydratedUtxoDetails) => {
     let hydratedUtxoDetailsWithConsumedUtxosRemoved = hydratedUtxoDetails;
     const slpUtxosArray = hydratedUtxoDetails.slpUtxos;
     // Iterate over consumedUtxos
     // Every utxo in consumedUtxos must be removed from hydratedUtxoDetails
     for (let i = 0; i < consumedUtxos.length; i += 1) {
         const thisConsumedUtxoObject = consumedUtxos[i]; // {address: 'string', utxos: [{},{},...{}]}
         const thisConsumedUtxoObjectAddr = thisConsumedUtxoObject.address;
         const thisConsumedUtxoObjectUtxoArray = thisConsumedUtxoObject.utxos;
         for (let j = 0; j < thisConsumedUtxoObjectUtxoArray.length; j += 1) {
             const thisConsumedUtxo = thisConsumedUtxoObjectUtxoArray[j];
             // Iterate through slpUtxosArray to find thisConsumedUtxo
             slpUtxosArrayLoop: for (
                 let k = 0;
                 k < slpUtxosArray.length;
                 k += 1
             ) {
                 const thisSlpUtxosArrayUtxoObject = slpUtxosArray[k]; // {address: 'string', utxos: [{},{},...{}]}
                 const thisSlpUtxosArrayUtxoObjectAddr =
                     thisSlpUtxosArrayUtxoObject.address;
                 // If this address matches the address of the consumed utxo, check for a consumedUtxo match
                 // Note, slpUtxos may have many utxo objects with the same address, need to check them all until you find and remove this consumed utxo
                 if (
                     thisConsumedUtxoObjectAddr ===
                     thisSlpUtxosArrayUtxoObjectAddr
                 ) {
                     const thisSlpUtxosArrayUtxoObjectUtxoArray =
                         thisSlpUtxosArrayUtxoObject.utxos;
 
                     // Iterate to find it and remove it
                     for (
                         let m = 0;
                         m < thisSlpUtxosArrayUtxoObjectUtxoArray.length;
                         m += 1
                     ) {
                         const thisHydratedUtxo =
                             thisSlpUtxosArrayUtxoObjectUtxoArray[m];
                         if (
                             thisConsumedUtxo.tx_hash ===
                                 thisHydratedUtxo.tx_hash &&
                             thisConsumedUtxo.tx_pos ===
                                 thisHydratedUtxo.tx_pos &&
                             thisConsumedUtxo.value === thisHydratedUtxo.value
                         ) {
                             // remove it
                             hydratedUtxoDetailsWithConsumedUtxosRemoved.slpUtxos[
                                 k
                             ].utxos.splice(m, 1);
                             // go to the next consumedUtxo
                             break slpUtxosArrayLoop;
                         }
                     }
                 }
             }
         }
     }
     return hydratedUtxoDetailsWithConsumedUtxosRemoved;
 };
 
 export const getUtxoCount = utxos => {
     // return how many utxos
     // return false if input is invalid
     /*
     Both utxos and hydratedUtxoDetails.slpUtxos are build like so
     [
         {
             address: 'string',
             utxos: [{}, {}, {}...{}]
         },
         {
             address: 'string',
             utxos: [{}, {}, {}...{}]
         },
         {
             address: 'string',
             utxos: [{}, {}, {}...{}]
         },
     ]
 
     We want a function that quickly determines how many utxos are here
     */
 
     // First, validate that you are getting a valid bch-api utxo set
     // if you are not, then return false -- which would cause areAllUtxosIncludedInIncrementallyHydratedUtxos to return false and calculate utxo set the legacy way
     const isValidUtxoObject = isValidBchApiUtxoObject(utxos);
     if (!isValidUtxoObject) {
         return false;
     }
 
     let utxoCount = 0;
     for (let i = 0; i < utxos.length; i += 1) {
         const thisUtxoArrLength = utxos[i].utxos.length;
         utxoCount += thisUtxoArrLength;
     }
     return utxoCount;
 };
 
 export const areAllUtxosIncludedInIncrementallyHydratedUtxos = (
     utxos,
     incrementallyHydratedUtxos,
 ) => {
     let incrementallyHydratedUtxosIncludesAllUtxosInLatestUtxoApiFetch = false;
     // check
     const { slpUtxos } = incrementallyHydratedUtxos;
 
     // Iterate over utxos array
     for (let i = 0; i < utxos.length; i += 1) {
         const thisUtxoObject = utxos[i];
         const thisUtxoObjectAddr = thisUtxoObject.address;
         const thisUtxoObjectUtxos = thisUtxoObject.utxos;
         let utxoFound;
         for (let j = 0; j < thisUtxoObjectUtxos.length; j += 1) {
             const thisUtxo = thisUtxoObjectUtxos[j];
             utxoFound = false;
             // Now iterate over slpUtxos to find it
             slpUtxosLoop: for (let k = 0; k < slpUtxos.length; k += 1) {
                 const thisSlpUtxosObject = slpUtxos[k];
                 const thisSlpUtxosObjectAddr = thisSlpUtxosObject.address;
                 if (thisUtxoObjectAddr === thisSlpUtxosObjectAddr) {
                     const thisSlpUtxosObjectUtxos = thisSlpUtxosObject.utxos;
                     for (
                         let m = 0;
                         m < thisSlpUtxosObjectUtxos.length;
                         m += 1
                     ) {
                         const thisSlpUtxo = thisSlpUtxosObjectUtxos[m];
                         if (
                             thisUtxo.tx_hash === thisSlpUtxo.tx_hash &&
                             thisUtxo.tx_pos === thisSlpUtxo.tx_pos &&
                             thisUtxo.value === thisSlpUtxo.value
                         ) {
                             utxoFound = true;
                             // goto next utxo
                             break slpUtxosLoop;
                         }
                     }
                 }
                 if (k === slpUtxos.length - 1 && !utxoFound) {
                     // return false
                     return incrementallyHydratedUtxosIncludesAllUtxosInLatestUtxoApiFetch;
                 }
             }
         }
     }
     // It's possible that hydratedUtxoDetails includes every utxo from the utxos array, but for some reason also includes additional utxos
     const utxosInUtxos = getUtxoCount(utxos);
     const utxosInIncrementallyHydratedUtxos = getUtxoCount(slpUtxos);
     if (
         !utxosInUtxos ||
         !utxosInIncrementallyHydratedUtxos ||
         utxosInUtxos !== utxosInIncrementallyHydratedUtxos
     ) {
         return incrementallyHydratedUtxosIncludesAllUtxosInLatestUtxoApiFetch;
     }
     // If you make it here, good to go
     incrementallyHydratedUtxosIncludesAllUtxosInLatestUtxoApiFetch = true;
     return incrementallyHydratedUtxosIncludesAllUtxosInLatestUtxoApiFetch;
 };
diff --git a/web/cashtab-v2/src/utils/context.js b/web/cashtab-v2/src/utils/context.js
index ac70df9cd..eb76b9303 100644
--- a/web/cashtab-v2/src/utils/context.js
+++ b/web/cashtab-v2/src/utils/context.js
@@ -1,28 +1,36 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import useWallet from '../hooks/useWallet';
 import useWebAuthentication from '../hooks/useWebAuthentication';
 
 export const WalletContext = React.createContext();
 
 export const WalletProvider = ({ children }) => {
     const wallet = useWallet();
     return (
         <WalletContext.Provider value={wallet}>
             {children}
         </WalletContext.Provider>
     );
 };
 
 // Authentication Context
 
 export const AuthenticationContext = React.createContext();
 export const AuthenticationProvider = ({ children }) => {
     // useWebAuthentication returns null if Web Authn is not supported
     const authentication = useWebAuthentication();
-
     return (
         <AuthenticationContext.Provider value={authentication}>
             {children}
         </AuthenticationContext.Provider>
     );
 };
+
+WalletProvider.propTypes = {
+    children: PropTypes.objectOf(PropTypes.node),
+};
+
+AuthenticationProvider.propTypes = {
+    children: PropTypes.objectOf(PropTypes.node),
+};
diff --git a/web/cashtab-v2/src/utils/validation.js b/web/cashtab-v2/src/utils/validation.js
index 4c9576cda..b3328e2da 100644
--- a/web/cashtab-v2/src/utils/validation.js
+++ b/web/cashtab-v2/src/utils/validation.js
@@ -1,367 +1,369 @@
 import BigNumber from 'bignumber.js';
 import { currency } from 'components/Common/Ticker.js';
 import { fromSmallestDenomination } from 'utils/cashMethods';
 import cashaddr from 'ecashaddrjs';
 
 // Validate cash amount
 export const shouldRejectAmountInput = (
     cashAmount,
     selectedCurrency,
     fiatPrice,
     totalCashBalance,
 ) => {
     // Take cashAmount as input, a string from form input
     let error = false;
     let testedAmount = new BigNumber(cashAmount);
 
     if (selectedCurrency !== currency.ticker) {
         // Ensure no more than currency.cashDecimals decimal places
         testedAmount = new BigNumber(fiatToCrypto(cashAmount, fiatPrice));
     }
 
     // Validate value for > 0
     if (isNaN(testedAmount)) {
         error = 'Amount must be a number';
     } else if (testedAmount.lte(0)) {
         error = 'Amount must be greater than 0';
     } else if (
         testedAmount.lt(fromSmallestDenomination(currency.dustSats).toString())
     ) {
         error = `Send amount must be at least ${fromSmallestDenomination(
             currency.dustSats,
         ).toString()} ${currency.ticker}`;
     } else if (testedAmount.gt(totalCashBalance)) {
         error = `Amount cannot exceed your ${currency.ticker} balance`;
     } else if (!isNaN(testedAmount) && testedAmount.toString().includes('.')) {
         if (
             testedAmount.toString().split('.')[1].length > currency.cashDecimals
         ) {
             error = `${currency.ticker} transactions do not support more than ${currency.cashDecimals} decimal places`;
         }
     }
     // return false if no error, or string error msg if error
     return error;
 };
 
 export const fiatToCrypto = (
     fiatAmount,
     fiatPrice,
     cashDecimals = currency.cashDecimals,
 ) => {
     let cryptoAmount = new BigNumber(fiatAmount)
         .div(new BigNumber(fiatPrice))
         .toFixed(cashDecimals);
     return cryptoAmount;
 };
 
 export const isValidTokenName = tokenName => {
     return (
         typeof tokenName === 'string' &&
         tokenName.length > 0 &&
         tokenName.length < 68
     );
 };
 
 export const isValidTokenTicker = tokenTicker => {
     return (
         typeof tokenTicker === 'string' &&
         tokenTicker.length > 0 &&
         tokenTicker.length < 13
     );
 };
 
 export const isValidTokenDecimals = tokenDecimals => {
     return ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'].includes(
         tokenDecimals,
     );
 };
 
 export const isValidTokenInitialQty = (tokenInitialQty, tokenDecimals) => {
     const minimumQty = new BigNumber(1 / 10 ** tokenDecimals);
     const tokenIntialQtyBig = new BigNumber(tokenInitialQty);
     return (
         tokenIntialQtyBig.gte(minimumQty) &&
         tokenIntialQtyBig.lt(100000000000) &&
         tokenIntialQtyBig.dp() <= tokenDecimals
     );
 };
 
 export const isValidTokenDocumentUrl = tokenDocumentUrl => {
     const urlPattern = new RegExp(
         '^(https?:\\/\\/)?' + // protocol
             '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name
             '((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address
             '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
             '(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
             '(\\#[-a-z\\d_]*)?$',
         'i',
     ); // fragment locator
 
     const urlTestResult = urlPattern.test(tokenDocumentUrl);
     return (
         tokenDocumentUrl === '' ||
         (typeof tokenDocumentUrl === 'string' &&
             tokenDocumentUrl.length >= 0 &&
             tokenDocumentUrl.length < 68 &&
             urlTestResult)
     );
 };
 
 export const isValidTokenStats = tokenStats => {
     return (
         typeof tokenStats === 'object' &&
         'timestampUnix' in tokenStats &&
         'documentUri' in tokenStats &&
         'containsBaton' in tokenStats &&
         'initialTokenQty' in tokenStats &&
         'totalMinted' in tokenStats &&
         'totalBurned' in tokenStats &&
         'circulatingSupply' in tokenStats
     );
 };
 
 export const isValidCashtabSettings = settings => {
     try {
         let isValidSettingParams = true;
         for (let param in currency.defaultSettings) {
             if (
                 !Object.prototype.hasOwnProperty.call(settings, param) ||
                 !currency.settingsValidation[param].includes(settings[param])
             ) {
                 isValidSettingParams = false;
                 break;
             }
         }
         const isValid = typeof settings === 'object' && isValidSettingParams;
 
         return isValid;
     } catch (err) {
         return false;
     }
 };
 
 export const isValidXecAddress = addr => {
     /* 
     Returns true for a valid XEC address
 
     Valid XEC address:
     - May or may not have prefix `ecash:`
     - Checksum must validate for prefix `ecash:`
     
     An eToken address is not considered a valid XEC address
     */
 
     if (!addr) {
         return false;
     }
 
     let isValidXecAddress;
     let isPrefixedXecAddress;
 
     // Check for possible prefix
     if (addr.includes(':')) {
         // Test for 'ecash:' prefix
         isPrefixedXecAddress = addr.slice(0, 6) === 'ecash:';
         // Any address including ':' that doesn't start explicitly with 'ecash:' is invalid
         if (!isPrefixedXecAddress) {
             isValidXecAddress = false;
             return isValidXecAddress;
         }
     } else {
         isPrefixedXecAddress = false;
     }
 
     // If no prefix, assume it is checksummed for an ecash: prefix
     const testedXecAddr = isPrefixedXecAddress ? addr : `ecash:${addr}`;
 
     try {
         const decoded = cashaddr.decode(testedXecAddr);
         if (decoded.prefix === 'ecash') {
             isValidXecAddress = true;
         }
     } catch (err) {
         isValidXecAddress = false;
     }
     return isValidXecAddress;
 };
 
 export const isValidEtokenAddress = addr => {
     /* 
     Returns true for a valid eToken address
 
     Valid eToken address:
     - May or may not have prefix `etoken:`
     - Checksum must validate for prefix `etoken:`
     
     An XEC address is not considered a valid eToken address
     */
 
     if (!addr) {
         return false;
     }
 
     let isValidEtokenAddress;
     let isPrefixedEtokenAddress;
 
     // Check for possible prefix
     if (addr.includes(':')) {
         // Test for 'etoken:' prefix
         isPrefixedEtokenAddress = addr.slice(0, 7) === 'etoken:';
         // Any token address including ':' that doesn't start explicitly with 'etoken:' is invalid
         if (!isPrefixedEtokenAddress) {
             isValidEtokenAddress = false;
             return isValidEtokenAddress;
         }
     } else {
         isPrefixedEtokenAddress = false;
     }
 
     // If no prefix, assume it is checksummed for an etoken: prefix
     const testedEtokenAddr = isPrefixedEtokenAddress ? addr : `etoken:${addr}`;
 
     try {
         const decoded = cashaddr.decode(testedEtokenAddr);
         if (decoded.prefix === 'etoken') {
             isValidEtokenAddress = true;
         }
     } catch (err) {
         isValidEtokenAddress = false;
     }
     return isValidEtokenAddress;
 };
 
 export const isValidXecSendAmount = xecSendAmount => {
     // A valid XEC send amount must be a number higher than the app dust limit
     return (
         xecSendAmount !== null &&
         typeof xecSendAmount !== 'undefined' &&
         !isNaN(parseFloat(xecSendAmount)) &&
         parseFloat(xecSendAmount) >= fromSmallestDenomination(currency.dustSats)
     );
 };
 
 export const isValidUtxo = utxo => {
     let isValidUtxo = false;
     try {
         isValidUtxo =
             'height' in utxo &&
             typeof utxo.height === 'number' &&
             'tx_hash' in utxo &&
             typeof utxo.tx_hash === 'string' &&
             'tx_pos' in utxo &&
             typeof utxo.tx_pos === 'number' &&
             'value' in utxo &&
             typeof utxo.value === 'number';
     } catch (err) {
         return false;
     }
     return isValidUtxo;
 };
 
 export const isValidBchApiUtxoObject = bchApiUtxoObject => {
     /*
     [
         {
             address: 'string',
             utxos: [{}, {}, {}...{}]
         },
         {
             address: 'string',
             utxos: [{}, {}, {}...{}]
         },
         {
             address: 'string',
             utxos: [{}, {}, {}...{}]
         },
     ]
     */
     let isValidBchApiUtxoObject = false;
     // Must be an array
     if (!Array.isArray(bchApiUtxoObject)) {
         return isValidBchApiUtxoObject;
     }
     // Do not accept an empty array
     if (bchApiUtxoObject.length < 1) {
         return isValidBchApiUtxoObject;
     }
 
     for (let i = 0; i < bchApiUtxoObject.length; i += 1) {
         let thisUtxoObject = bchApiUtxoObject[i];
         if ('address' in thisUtxoObject && 'utxos' in thisUtxoObject) {
             const thisUtxoArray = thisUtxoObject.utxos;
             if (Array.isArray(thisUtxoArray)) {
                 // do not validate each individual utxo in the array
                 // we are only validating the object structure here
                 continue;
             } else {
                 return isValidBchApiUtxoObject;
             }
         } else {
             return isValidBchApiUtxoObject;
         }
     }
     isValidBchApiUtxoObject = true;
 
     return isValidBchApiUtxoObject;
 };
 
 export const isValidEtokenBurnAmount = (tokenBurnAmount, maxAmount) => {
     // A valid eToken burn amount must be between 1 and the wallet's token balance
     return (
         tokenBurnAmount !== null &&
         maxAmount !== null &&
         typeof tokenBurnAmount !== 'undefined' &&
         typeof maxAmount !== 'undefined' &&
         new BigNumber(tokenBurnAmount).gt(0) &&
         new BigNumber(tokenBurnAmount).lte(maxAmount)
     );
 };
 
 // XEC airdrop field validations
 export const isValidTokenId = tokenId => {
+    // disable no-useless-escape for regex
+    //eslint-disable-next-line
     const format = /[ `!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?~]/;
     const specialCharCheck = format.test(tokenId);
 
     return (
         typeof tokenId === 'string' &&
         tokenId.length === 64 &&
         tokenId.trim() != '' &&
         !specialCharCheck
     );
 };
 
 export const isValidXecAirdrop = xecAirdrop => {
     return (
         typeof xecAirdrop === 'string' &&
         xecAirdrop.length > 0 &&
         xecAirdrop.trim() != '' &&
         new BigNumber(xecAirdrop).gt(0)
     );
 };
 
 export const isValidAirdropOutputsArray = airdropOutputsArray => {
     if (!airdropOutputsArray) {
         return false;
     }
 
     let isValid = true;
 
     // split by individual rows
     const addressStringArray = airdropOutputsArray.split('\n');
 
     for (let i = 0; i < addressStringArray.length; i++) {
         const substring = addressStringArray[i].split(',');
         let valueString = substring[1];
         // if the XEC being sent is less than dust sats or contains extra values per line
         if (
             new BigNumber(valueString).lt(
                 fromSmallestDenomination(currency.dustSats),
             ) ||
             substring.length !== 2
         ) {
             isValid = false;
         }
     }
 
     return isValid;
 };