diff --git a/web/cashtab/src/components/Airdrop/Airdrop.js b/web/cashtab/src/components/Airdrop/Airdrop.js
index 4483f1276..d91d48f84 100644
--- a/web/cashtab/src/components/Airdrop/Airdrop.js
+++ b/web/cashtab/src/components/Airdrop/Airdrop.js
@@ -1,843 +1,843 @@
 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,
     DestinationAddressMulti,
     InputAmountSingle,
 } from 'components/Common/EnhancedInputs';
 import { CustomCollapseCtn } from 'components/Common/StyledCollapse';
 import { Form, Alert, Input, Modal, Spin, Progress } from 'antd';
 const { TextArea } = Input;
 import { Row, Col, Switch } from 'antd';
 import { SmartButton } from 'components/Common/PrimaryButton';
 import { errorNotification } from 'components/Common/Notifications';
 import { currency } from 'components/Common/Ticker.js';
 import BalanceHeader from 'components/Common/BalanceHeader';
 import BalanceHeaderFiat from 'components/Common/BalanceHeaderFiat';
 import CopyToClipboard from 'components/Common/CopyToClipboard';
 import {
     getWalletState,
     convertEtokenToEcashAddr,
     fromSatoshisToXec,
     convertToEcashPrefix,
     convertEcashtoEtokenAddr,
 } from 'utils/cashMethods';
 import {
     isValidTokenId,
     isValidXecAirdrop,
     isValidAirdropOutputsArray,
     isValidAirdropExclusionArray,
 } 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;
     display: flex;
     justify-content: center;
     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};
     `}
 `;
 
 const AirdropOptions = styled.div`
     text-align: left;
     color: ${props => props.theme.contrast};
 `;
 
 const StyledModal = styled(Modal)`
     .ant-progress-text {
         color: ${props => props.theme.lightWhite} !important;
     }
 `;
 // Note jestBCH is only used for unit tests; BCHJS must be mocked for jest
 const Airdrop = ({ jestBCH, passLoadingStatus }) => {
     const ContextValue = React.useContext(WalletContext);
     const { BCH, 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 activeBCH = jestBCH ? jestBCH : BCH;
 
         // set the BCH instance to state, for other functions to reference
         setBchObj(activeBCH);
     }, [BCH]);
 
     useEffect(() => {
         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(parseInt(0));
     const [showAirdropOutputs, setShowAirdropOutputs] = useState(false);
     const [ignoreOwnAddress, setIgnoreOwnAddress] = useState(false);
 
     const [ignoreRecipientsBelowDust, setIgnoreRecipientsBelowDust] =
         useState(false);
 
     const [ignoreMintAddress, setIgnoreMintAddress] = useState(false);
 
     // flag to reflect the exclusion list checkbox
     const [ignoreCustomAddresses, setIgnoreCustomAddresses] = useState(false);
     // the exclusion list values
     const [ignoreCustomAddressesList, setIgnoreCustomAddressesList] =
         useState(false);
     const [
         ignoreCustomAddressesListIsValid,
         setIgnoreCustomAddressesListIsValid,
     ] = useState(false);
     const [ignoreCustomAddressListError, setIgnoreCustomAddressListError] =
         useState(false);
 
     // flag to reflect the ignore minimum etoken balance switch
     const [ignoreMinEtokenBalance, setIgnoreMinEtokenBalance] = useState(false);
     const [ignoreMinEtokenBalanceAmount, setIgnoreMinEtokenBalanceAmount] =
         useState(new BigNumber(0));
     const [
         ignoreMinEtokenBalanceAmountIsValid,
         setIgnoreMinEtokenBalanceAmountIsValid,
     ] = useState(false);
     const [
         ignoreMinEtokenBalanceAmountError,
         setIgnoreMinEtokenBalanceAmountError,
     ] = useState(false);
 
     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 handleMinEtokenBalanceChange = e => {
         const { value } = e.target;
 
         if (new BigNumber(value).gt(new BigNumber(0))) {
             setIgnoreMinEtokenBalanceAmountIsValid(true);
             setIgnoreMinEtokenBalanceAmountError(false);
         } else {
             setIgnoreMinEtokenBalanceAmountError(
                 'Minimum eToken balance must be greater than 0',
             );
             setIgnoreMinEtokenBalanceAmountIsValid(false);
         }
 
         setIgnoreMinEtokenBalanceAmount(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 Ignore Own Address option is checked, then filter out from recipients list
         if (ignoreOwnAddress) {
             const ownEtokenAddress = convertToEcashPrefix(
                 wallet.Path1899.slpAddress,
             );
             airdropList.delete(ownEtokenAddress);
         }
 
         // if Ignore eToken Minter option is checked, then filter out from recipients list
         if (ignoreMintAddress) {
             // extract the eToken mint address
             let genesisTx;
             try {
                 genesisTx = await bchObj.RawTransactions.getRawTransaction(
                     formData.tokenId,
                     true,
                 );
             } catch (err) {
                 errorNotification(
                     null,
                     'Unable to retrieve minting address for eToken ID: ' +
                         formData.tokenId,
                     'getRawTransaction Error',
                 );
                 setIsAirdropCalcModalVisible(false);
                 passLoadingStatus(false);
                 return;
             }
             const mintEcashAddress = convertToEcashPrefix(
                 genesisTx.vout[1].scriptPubKey.addresses[0],
             ); //vout[0] is always the OP_RETURN output
             const mintEtokenAddress =
                 convertEcashtoEtokenAddr(mintEcashAddress);
 
             // remove the mint address from the recipients list
             airdropList.delete(mintEtokenAddress);
         }
 
         // filter out addresses from the exclusion list if the option is checked
         if (ignoreCustomAddresses && ignoreCustomAddressesListIsValid) {
             const addressStringArray = ignoreCustomAddressesList.split(',');
             for (let i = 0; i < addressStringArray.length; i++) {
                 airdropList.delete(
                     convertEcashtoEtokenAddr(addressStringArray[i]),
                 );
             }
         }
 
         // if the minimum etoken balance option is enabled
         if (ignoreMinEtokenBalance) {
             const minEligibleBalance = ignoreMinEtokenBalanceAmount;
             // initial filtering of recipients with less than minimum eToken balance
             for (let [key, value] of airdropList) {
                 if (new BigNumber(value).isLessThan(minEligibleBalance)) {
                     airdropList.delete(key);
                 }
             }
         }
 
         if (!airdropList) {
             errorNotification(
                 null,
                 'No recipients found for tokenId ' + formData.tokenId,
                 'Airdrop Calculation Error',
             );
             setIsAirdropCalcModalVisible(false);
             passLoadingStatus(false);
             return;
         }
 
         // if the ignore minimum payment threshold option is enabled
         if (ignoreRecipientsBelowDust) {
             // minimum airdrop threshold
             const minEligibleAirdrop = fromSatoshisToXec(currency.dustSats);
             // first calculation on expected pro rata airdrops
             let initialTotalTokenAmongstRecipients = new BigNumber(0);
             let initialTotalHolders = new BigNumber(airdropList.size); // amount of addresses that hold this eToken
             setEtokenHolders(initialTotalHolders);
 
             // keep a cumulative total of each eToken holding in each address in airdropList
             airdropList.forEach(
                 index =>
                     (initialTotalTokenAmongstRecipients =
                         initialTotalTokenAmongstRecipients.plus(
                             new BigNumber(index),
                         )),
             );
 
             let initialCircToAirdropRatio = new BigNumber(
                 formData.totalAirdrop,
             ).div(initialTotalTokenAmongstRecipients);
 
             // initial filtering of recipients with less than minimum payout amount
             for (let [key, value] of airdropList) {
                 const proRataAirdrop = new BigNumber(value).multipliedBy(
                     initialCircToAirdropRatio,
                 );
                 if (proRataAirdrop.isLessThan(minEligibleAirdrop)) {
                     airdropList.delete(key);
                 }
             }
 
             // if the list becomes empty after initial filtering
             if (!airdropList) {
                 errorNotification(
                     null,
                     'No recipients after filtering minimum payouts',
                     'Airdrop Calculation Error',
                 );
                 setIsAirdropCalcModalVisible(false);
                 passLoadingStatus(false);
                 return;
             }
         }
 
         setAirdropCalcModalProgress(75);
 
         let totalTokenAmongstRecipients = new BigNumber(0);
         let totalHolders = parseInt(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',
             );
             setIsAirdropCalcModalVisible(false);
             passLoadingStatus(false);
             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 handleIgnoreMinEtokenBalanceAmt = e => {
         setIgnoreMinEtokenBalance(e);
     };
 
     const handleAirdropCalcModalCancel = () => {
         setIsAirdropCalcModalVisible(false);
         passLoadingStatus(false);
     };
 
     const handleIgnoreOwnAddress = e => {
         setIgnoreOwnAddress(e);
     };
 
     const handleIgnoreRecipientBelowDust = e => {
         setIgnoreRecipientsBelowDust(e);
     };
 
     const handleIgnoreMintAddress = e => {
         setIgnoreMintAddress(e);
     };
 
     const handleIgnoreCustomAddresses = e => {
         setIgnoreCustomAddresses(e);
     };
 
     const handleIgnoreCustomAddressesList = e => {
         // if the checkbox is not checked then skip the input validation
         if (!ignoreCustomAddresses) {
             return;
         }
 
         let customAddressList = e.target.value;
 
         // remove all whitespaces via regex
         customAddressList = customAddressList.replace(/ /g, '');
 
         // validate the exclusion list input
         const addressListIsValid =
             isValidAirdropExclusionArray(customAddressList);
         setIgnoreCustomAddressesListIsValid(addressListIsValid);
 
         if (!addressListIsValid) {
             setIgnoreCustomAddressListError(
                 'Invalid address detected in ignore list',
             );
         } else {
             setIgnoreCustomAddressListError(false); // needs to be explicitly set in order to refresh the error state from prior invalidation
         }
 
         // commit the ignore list to state
         setIgnoreCustomAddressesList(customAddressList);
     };
 
     let airdropCalcInputIsValid = tokenIdIsValid && totalAirdropIsValid;
 
     // if the ignore min etoken balance and exclusion list options are in use, add the relevant validation to the total pre-calculation validation
     if (ignoreMinEtokenBalance && ignoreCustomAddresses) {
         // both enabled
         airdropCalcInputIsValid =
             ignoreMinEtokenBalanceAmountIsValid &&
             tokenIdIsValid &&
             totalAirdropIsValid &&
             ignoreCustomAddressesListIsValid;
     } else if (ignoreMinEtokenBalance && !ignoreCustomAddresses) {
         // ignore minimum etoken balance option only
         airdropCalcInputIsValid =
             ignoreMinEtokenBalanceAmountIsValid &&
             tokenIdIsValid &&
             totalAirdropIsValid;
     } else if (!ignoreMinEtokenBalance && ignoreCustomAddresses) {
         // ignore custom addresses only
         airdropCalcInputIsValid =
             tokenIdIsValid &&
             totalAirdropIsValid &&
             ignoreCustomAddressesListIsValid;
     }
 
     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>
             <StyledModal
                 title="Querying the eCash blockchain"
-                visible={isAirdropCalcModalVisible}
+                open={isAirdropCalcModalVisible}
                 okButtonProps={{ style: { display: 'none' } }}
                 onCancel={handleAirdropCalcModalCancel}
             >
                 <Spin indicator={CustomSpinner} />
                 <Progress percent={airdropCalcModalProgress} />
             </StyledModal>
             <br />
             <SidePaddingCtn>
                 <Row type="flex">
                     <Col span={24}>
                         <CustomCollapseCtn
                             panelHeader="XEC Airdrop Calculator"
                             optionalDefaultActiveKey={
                                 location &&
                                 location.state &&
                                 location.state.airdropEtokenId
                                     ? ['1']
                                     : ['0']
                             }
                             optionalKey="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>
                                         <AirdropOptions>
                                             <Switch
                                                 onChange={() =>
                                                     handleIgnoreOwnAddress(
                                                         prev => !prev,
                                                     )
                                                 }
                                                 defaultunchecked="true"
                                                 checked={ignoreOwnAddress}
                                             />
                                             &ensp;Ignore my own address
                                         </AirdropOptions>
                                     </Form.Item>
                                     <Form.Item>
                                         <AirdropOptions>
                                             <Switch
                                                 onChange={() =>
                                                     handleIgnoreRecipientBelowDust(
                                                         prev => !prev,
                                                     )
                                                 }
                                                 defaultunchecked="true"
                                                 checked={
                                                     ignoreRecipientsBelowDust
                                                 }
                                             />
                                             &ensp;Ignore airdrops below min.
                                             payment (
                                             {fromSatoshisToXec(
                                                 currency.dustSats,
                                             ).toString()}{' '}
                                             XEC)
                                         </AirdropOptions>
                                     </Form.Item>
                                     <Form.Item>
                                         <AirdropOptions>
                                             <Switch
                                                 onChange={() =>
                                                     handleIgnoreMintAddress(
                                                         prev => !prev,
                                                     )
                                                 }
                                                 defaultunchecked="true"
                                                 checked={ignoreMintAddress}
                                             />
                                             &ensp;Ignore eToken minter address
                                         </AirdropOptions>
                                     </Form.Item>
                                     <Form.Item>
                                         <AirdropOptions>
                                             <Switch
                                                 onChange={() =>
                                                     handleIgnoreMinEtokenBalanceAmt(
                                                         prev => !prev,
                                                     )
                                                 }
                                                 defaultunchecked="true"
                                                 checked={ignoreMinEtokenBalance}
                                                 style={{
                                                     marginBottom: '5px',
                                                 }}
                                             />
                                             &ensp;Minimum eToken holder balance
                                             {ignoreMinEtokenBalance && (
                                                 <InputAmountSingle
                                                     validateStatus={
                                                         ignoreMinEtokenBalanceAmountError
                                                             ? 'error'
                                                             : ''
                                                     }
                                                     help={
                                                         ignoreMinEtokenBalanceAmountError
                                                             ? ignoreMinEtokenBalanceAmountError
                                                             : ''
                                                     }
                                                     inputProps={{
                                                         placeholder:
                                                             'Minimum eToken balance',
                                                         onChange: e =>
                                                             handleMinEtokenBalanceChange(
                                                                 e,
                                                             ),
                                                         value: ignoreMinEtokenBalanceAmount,
                                                     }}
                                                 />
                                             )}
                                         </AirdropOptions>
                                     </Form.Item>
                                     <Form.Item>
                                         <AirdropOptions>
                                             <Switch
                                                 onChange={() =>
                                                     handleIgnoreCustomAddresses(
                                                         prev => !prev,
                                                     )
                                                 }
                                                 defaultunchecked="true"
                                                 checked={ignoreCustomAddresses}
                                                 style={{
                                                     marginBottom: '5px',
                                                 }}
                                             />
                                             &ensp;Ignore custom addresses
                                             {ignoreCustomAddresses && (
                                                 <DestinationAddressMulti
                                                     validateStatus={
                                                         ignoreCustomAddressListError
                                                             ? 'error'
                                                             : ''
                                                     }
                                                     help={
                                                         ignoreCustomAddressListError
                                                             ? ignoreCustomAddressListError
                                                             : ''
                                                     }
                                                     inputProps={{
                                                         placeholder: `If more than one XEC address, separate them by comma \ne.g. \necash:qpatql05s9jfavnu0tv6lkjjk25n6tmj9gkpyrlwu8,ecash:qzvydd4n3lm3xv62cx078nu9rg0e3srmqq0knykfed`,
                                                         name: 'address',
                                                         onChange: e =>
                                                             handleIgnoreCustomAddressesList(
                                                                 e,
                                                             ),
                                                         required:
                                                             ignoreCustomAddresses,
                                                         disabled:
                                                             !ignoreCustomAddresses,
                                                     }}
                                                 />
                                             )}
                                         </AirdropOptions>
                                     </Form.Item>
                                     <Form.Item>
                                         <SmartButton
                                             onClick={() =>
                                                 calculateXecAirdrop()
                                             }
                                             disabled={
                                                 !airdropCalcInputIsValid ||
                                                 !tokenIdIsValid
                                             }
                                         >
                                             Calculate Airdrop
                                         </SmartButton>
                                     </Form.Item>
                                     {showAirdropOutputs && (
                                         <>
                                             {!ignoreRecipientsBelowDust &&
                                                 !airdropOutputIsValid &&
                                                 etokenHolders > 0 && (
                                                     <>
                                                         <Alert
                                                             description={
                                                                 'At least one airdrop is below the minimum ' +
                                                                 fromSatoshisToXec(
                                                                     currency.dustSats,
                                                                 ).toString() +
                                                                 ' 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,
                                                                 airdropTokenId:
                                                                     formData.tokenId,
                                                             },
                                                         }}
                                                         disabled={
                                                             !airdropRecipients
                                                         }
                                                     >
                                                         Copy to Send screen
                                                     </Link>
                                                     &nbsp;&nbsp;
                                                     <CopyToClipboard
                                                         data={airdropRecipients}
                                                         optionalOnCopyNotification={{
                                                             title: 'Copied',
                                                             msg: 'Airdrop recipients copied to clipboard',
                                                         }}
                                                     >
                                                         <Link
                                                             type="text"
                                                             disabled={
                                                                 !airdropRecipients
                                                             }
                                                             to={'#'}
                                                         >
                                                             Copy to Clipboard
                                                         </Link>
                                                     </CopyToClipboard>
                                                 </AirdropActions>
                                             </Form.Item>
                                         </>
                                     )}
                                 </Form>
                             </AntdFormWrapper>
                         </CustomCollapseCtn>
                     </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/src/components/Common/CropControlModal.js b/web/cashtab/src/components/Common/CropControlModal.js
index 01c8bedea..b375d40ee 100644
--- a/web/cashtab/src/components/Common/CropControlModal.js
+++ b/web/cashtab/src/components/Common/CropControlModal.js
@@ -1,59 +1,59 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { Card, Modal } from 'antd';
 
 const CropModal = styled(Modal)`
     .ant-modal-close-x {
         font-size: 2px;
     }
 `;
 
 export const CropperContainer = styled.div`
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 175px;
 `;
 export const ControlsContainer = styled.div`
     position: absolute;
     padding: 12px;
     bottom: 0;
     left: 50%;
     width: 50%;
     transform: translateX(-50%);
     height: 175px;
     display: block;
     align-items: center;
 `;
 
 export const CropControlModal = ({
     expand,
     renderExpanded = () => null,
     onClose,
     style,
     ...otherProps
 }) => {
     return (
         <CropModal
             width={'90vw'}
             height={600}
-            visible={expand}
+            open={expand}
             centered
             footer={null}
             onCancel={onClose}
             {...otherProps}
         >
             <Card style={{ ...style, width: '100%', height: 600 }}>
                 {renderExpanded()}
             </Card>
         </CropModal>
     );
 };
 CropControlModal.propTypes = {
     expand: PropTypes.bool,
     renderExpanded: PropTypes.func,
     onClose: PropTypes.func,
     style: PropTypes.object,
 };
diff --git a/web/cashtab/src/components/Common/ScanQRCode.js b/web/cashtab/src/components/Common/ScanQRCode.js
index d7f7e5dd4..7b63c9cea 100644
--- a/web/cashtab/src/components/Common/ScanQRCode.js
+++ b/web/cashtab/src/components/Common/ScanQRCode.js
@@ -1,176 +1,176 @@
 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 { parseAddressForParams } from 'components/Common/Ticker.js';
 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,
             };
         }
         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();
         }
     }, [visible]);
 
     return (
         <>
             <StyledScanQRCode
                 {...otherProps}
                 onClick={() => setVisible(!visible)}
             >
                 <ThemedQrcodeOutlined />
             </StyledScanQRCode>
             <StyledModal
                 title="Scan QR code"
-                visible={visible}
+                open={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/src/components/Configure/Configure.js b/web/cashtab/src/components/Configure/Configure.js
index 777d95156..54c5d0d1f 100644
--- a/web/cashtab/src/components/Configure/Configure.js
+++ b/web/cashtab/src/components/Configure/Configure.js
@@ -1,1950 +1,1950 @@
 import React, { useState, useEffect } from 'react';
 import styled from 'styled-components';
 import { useLocation, Link } from 'react-router-dom';
 import {
     errorNotification,
     generalNotification,
 } from 'components/Common/Notifications';
 import {
     Collapse,
     Form,
     Input,
     Modal,
     Alert,
     Switch,
     Tag,
     Tooltip,
 } from 'antd';
 import { Row, Col } from 'antd';
 import {
     PlusSquareOutlined,
     WalletFilled,
     ImportOutlined,
     LockOutlined,
     CheckOutlined,
     CloseOutlined,
     LockFilled,
     ExclamationCircleFilled,
 } from '@ant-design/icons';
 import { WalletContext, AuthenticationContext } from 'utils/context';
 import { SidePaddingCtn, FormLabel } 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,
     ThemedContactsOutlined,
     ThemedContactSendOutlined,
     ThemedPlusOutlined,
     ThemedDownloadOutlined,
     ThemedCopySolid,
     ThemedTrashcanOutlined,
     ThemedEditOutlined,
 } from 'components/Common/CustomIcons';
 import { Event } from 'utils/GoogleAnalytics';
 import ApiError from 'components/Common/ApiError';
 import CopyToClipboard from 'components/Common/CopyToClipboard';
 import { formatSavedBalance } from 'utils/formatting';
 import {
     isValidXecAddress,
     isValidNewWalletNameLength,
 } from 'utils/validation';
 import { convertToEcashPrefix } from 'utils/cashMethods';
 import useWindowDimensions from 'hooks/useWindowDimensions';
 import { isMobile, isIOS, isSafari } from 'react-device-detect';
 import { currency } from 'components/Common/Ticker.js';
 const { Panel } = Collapse;
 
 const SettingsLinkCtn = styled.div`
     color: ${props => props.theme.lightWhite};
 `;
 
 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;
     }
 `;
 
 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;
     }
 `;
 
 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: 20px;
         height: 25px;
         margin-right: 10px;
         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 ContactListRow = 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 ContactListAddress = styled.div`
     width: 40%;
     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: 12px;
         text-align: center;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
     }
     div.overflow {
         width: 150px;
         overflow: hidden;
         text-overflow: ellipsis;
     }
 `;
 
 const ContactListName = styled.div`
     width: 30%;
     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: 0px;
         text-align: center;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
     }
     div.overflow {
         width: 150px;
         overflow: hidden;
         text-overflow: ellipsis;
     }
 `;
 
 const ContactListCtn = styled.div`
     display: flex;
     align-items: center;
     justify-content: flex-end;
     @media (max-width: 500px) {
         width: 100%;
         justify-content: center;
     }
     ${ThemedCopySolid} {
         margin-top: 7px;
     }
 
     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: 10px;
         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 ContactListBtnCtn = styled.div`
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 4px;
 `;
 
 const ExpandedBtnText = styled.span`
     @media (max-width: 335px) {
         display: none;
     }
 `;
 
 const ContactListBtn = styled.button`
     display: flex;
     justify-content: center;
     align-items: center;
     cursor: pointer;
     background: transparent;
     border: 1px solid #fff;
     box-shadow: none;
     color: #fff;
     border-radius: 3px;
     opacity: 0.6;
     gap: 3px;
     transition: all 200ms ease-in-out;
     @media (max-width: 500px) {
         width: 100%;
         justify-content: center;
     }
     :hover {
         opacity: 1;
         background: ${props => props.theme.eCashBlue};
         border-color: ${props => props.theme.eCashBlue};
     }
     svg {
         fill: ${props => props.theme.contrast} !important;
     }
 `;
 
 const AWRow = styled.div`
     padding: 10px 0;
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 6px;
     h3 {
         font-size: 16px;
         flex: 1 1 0;
         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;
         flex: 1 1 0;
         display: inline-block;
         color: ${props => props.theme.eCashBlue} !important;
         margin: 0;
         text-align: right;
     }
     ${SWButtonCtn} {
         flex: 1 1 0;
     }
     @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};
     }
     .ant-alert {
         color: ${props => props.theme.lightGrey}
         font-size: 14px;
     }
     .ant-collapse-header{
         .anticon{
             flex: 1;
         }
         .seedPhrase{ 
             flex: 2;
         }
     }
   
    
 `;
 
 const StyledSpacer = styled.div`
     height: 1px;
     width: 100%;
     background-color: ${props => props.theme.lightWhite};
     margin: 60px 0 50px;
 `;
 
 const HideableTextContainer = styled.div``;
 const AutoCameraTextCtn = styled.div`
     display: flex;
     white-space: nowrap;
     gap: 3px;
 `;
 
 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};
     }
     ${AutoCameraTextCtn} {
         color: ${props => props.theme.lightWhite};
         ${HideableTextContainer} {
             @media (max-width: 500px) {
                 display: none;
             }
         }
     }
     .ShowMessages {
         color: ${props => props.theme.lightWhite};
     }
 `;
 
 const Configure = () => {
     const ContextValue = React.useContext(WalletContext);
     const authentication = React.useContext(AuthenticationContext);
     const { wallet, apiError } = ContextValue;
     const location = useLocation();
 
     const {
         addNewSavedWallet,
         activateWallet,
         renameSavedWallet,
         renameActiveWallet,
         deleteWallet,
         validateMnemonic,
         getSavedWallets,
         cashtabSettings,
         changeCashtabSettings,
         getContactListFromLocalForage,
         updateContactListInLocalForage,
     } = 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 [savedWalletContactModal, setSavedWalletContactModal] =
         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);
 
     const [contactListArray, setContactListArray] = useState([{}]);
 
     const [showRenameContactModal, setShowRenameContactModal] = useState(false);
     const [contactToBeRenamed, setContactToBeRenamed] = useState(null); //object
     const [newContactNameIsValid, setNewContactNameIsValid] = useState(null);
     const [
         confirmationOfContactToBeRenamed,
         setConfirmationOfContactToBeRenamed,
     ] = useState('');
 
     const [showDeleteContactModal, setShowDeleteContactModal] = useState(false);
     const [contactAddressToDelete, setContactAddressToDelete] = useState(null);
     const [contactDeleteValid, setContactDeleteValid] = useState(null);
     const [
         confirmationOfContactToBeDeleted,
         setConfirmationOfContactToBeDeleted,
     ] = useState('');
 
     const [showManualAddContactModal, setShowManualAddContactModal] =
         useState(false);
     const [manualContactName, setManualContactName] = useState('');
     const [manualContactAddress, setManualContactAddress] = useState('');
     const [manualContactNameIsValid, setManualContactNameIsValid] =
         useState(null);
     const [manualContactAddressIsValid, setManualContactAddressIsValid] =
         useState(null);
     const { width } = useWindowDimensions();
 
     const scannerSupported = width < 769 && isMobile && !(isIOS && !isSafari);
 
     useEffect(() => {
         // Update savedWallets every time the active wallet changes
         updateSavedWallets(wallet);
     }, [wallet]);
 
     useEffect(async () => {
         const detectedBrowserLang = navigator.language;
         if (!detectedBrowserLang.includes('en-')) {
             setShowTranslationWarning(true);
         }
 
         if (
             location &&
             location.state &&
             location.state.showRenameWalletModal
         ) {
             setShowRenameWalletModal(true);
             setWalletToBeRenamed(wallet);
         }
 
         // if this was routed from Home screen's Add to Contact link
         if (location && location.state && location.state.contactToAdd) {
             let tempContactListArray;
 
             try {
                 tempContactListArray = await getContactListFromLocalForage();
             } catch (err) {
                 console.log('Error in getContactListFromLocalForage()');
                 console.log(err);
             }
 
             // set default name for contact and sender as address
             let newContactObj = {
                 name: location.state.contactToAdd.substring(6, 11),
                 address: location.state.contactToAdd,
             };
 
             if (!tempContactListArray || tempContactListArray.length === 0) {
                 // no existing contact list in local storage
 
                 tempContactListArray = [{}]; // instantiates to mitigate null pointer issues
                 tempContactListArray.push(newContactObj);
                 tempContactListArray.shift(); // remove the initial entry from instantiation
                 generalNotification(
                     location.state.contactToAdd + ' added to Contact List',
                     'Success',
                 );
             } else {
                 // contact list exists in local storage
 
                 // check if address already exists in contact list
                 let duplicateContact = false;
                 let tempContactListArrayLength = tempContactListArray.length;
                 for (let i = 0; i < tempContactListArrayLength; i++) {
                     if (
                         tempContactListArray[i].address ===
                         location.state.contactToAdd
                     ) {
                         errorNotification(
                             null,
                             location.state.contactToAdd +
                                 ' already exists in the Contact List',
                             'handleManualAddContactModalOk() error',
                         );
                         duplicateContact = true;
                         break;
                     }
                 }
 
                 // in the edge case of a fresh new wallet on a fresh new browser, remove the initialization entry to avoid an undefined contact in array
                 if (
                     tempContactListArray &&
                     tempContactListArray[0].address === undefined
                 ) {
                     tempContactListArray.shift();
                 }
 
                 // if address does not exist on the contact list, add it
                 if (!duplicateContact) {
                     tempContactListArray.push(newContactObj);
                     generalNotification(
                         location.state.contactToAdd + ' added to Contact List',
                         'Success',
                     );
                 }
             }
 
             // update local storage
             let updateContactListStatus;
             try {
                 updateContactListStatus = await updateContactListInLocalForage(
                     tempContactListArray,
                 );
             } catch (err) {
                 console.log('Error in updateContactListInLocalForage()');
                 console.log(err);
             }
 
             if (!updateContactListStatus) {
                 errorNotification(
                     null,
                     'Error updating contact list in localforage',
                     'Updating localforage with contact list',
                 );
             }
 
             // commit to state for local operations
             setContactListArray(tempContactListArray);
         } else {
             // if this was just standard routing between cashtab components
             // i.e. Not via the Add to contacts action
 
             let loadContactListStatus;
             try {
                 loadContactListStatus = await getContactListFromLocalForage();
             } catch (err) {
                 console.log('Error in getContactListFromLocalForage()');
                 console.log(err);
             }
 
             // in the edge case of a fresh new wallet on a fresh new browser, remove the initialization entry to avoid an undefined contact in array
             if (
                 loadContactListStatus &&
                 loadContactListStatus[0].address === undefined
             ) {
                 loadContactListStatus.shift();
             }
 
             setContactListArray(loadContactListStatus);
         }
     }, []);
 
     // 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 () => {
         let oldActiveWalletName;
         if (!isValidNewWalletNameLength(newWalletName)) {
             setNewWalletNameIsValid(false);
             return;
         }
         // Hide modal
         setShowRenameWalletModal(false);
         // Change wallet name
         console.log(
             `Changing wallet ${walletToBeRenamed.name} name to ${newWalletName}`,
         );
         let renameSuccess;
 
         if (walletToBeRenamed.name === wallet.name) {
             oldActiveWalletName = walletToBeRenamed.name;
             renameSuccess = await renameActiveWallet(
                 wallet,
                 walletToBeRenamed.name,
                 newWalletName,
             );
         } else {
             renameSuccess = await renameSavedWallet(
                 walletToBeRenamed.name,
                 newWalletName,
             );
         }
 
         if (renameSuccess) {
             Modal.success({
                 content: `Wallet "${
                     oldActiveWalletName !== undefined
                         ? oldActiveWalletName
                         : 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 && isValidNewWalletNameLength(value)) {
             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 => {
         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 handleContactNameInput = e => {
         const { value } = e.target;
 
         if (
             value &&
             value.length &&
             value.length < currency.localStorageMaxCharacters
         ) {
             setNewContactNameIsValid(true);
         } else {
             setNewContactNameIsValid(false);
         }
         setConfirmationOfContactToBeRenamed(value);
     };
 
     const handleRenameContact = contactObj => {
         if (!contactObj) {
             console.log(
                 'handleRenameContact() error: Invalid contact object for update',
             );
             return;
         }
         setContactToBeRenamed(contactObj);
         setShowRenameContactModal(true);
     };
 
     const handleRenameContactCancel = () => {
         setShowRenameContactModal(false);
     };
 
     const handleRenameContactModalOk = () => {
         if (
             !newContactNameIsValid ||
             newContactNameIsValid === null ||
             !contactToBeRenamed
         ) {
             return;
         }
         renameContactByName(contactToBeRenamed);
         setShowRenameContactModal(false);
     };
 
     const renameContactByName = async contactObj => {
         // obtain reference to the contact object in the array
         let contactObjToUpdate = contactListArray.find(
             element => element.address === contactObj.address,
         );
 
         // if a match was found
         if (contactObjToUpdate) {
             // update the contact name
             contactObjToUpdate.name = confirmationOfContactToBeRenamed;
 
             // update local object array and local storage
             setContactListArray(contactListArray);
 
             let updateContactListStatus;
             try {
                 updateContactListStatus = await updateContactListInLocalForage(
                     contactListArray,
                 );
             } catch (err) {
                 console.log('Error in updateContactListInLocalForage()');
                 console.log(err);
             }
 
             if (!updateContactListStatus) {
                 errorNotification(
                     null,
                     'Unable to update localforage with updated contact list',
                     'Updating localforage with contact list',
                 );
             }
         } else {
             errorNotification(
                 null,
                 'Unable to find contact in array',
                 'Updating localforage with contact list',
             );
         }
     };
 
     const handleSendModalToggle = checkedState => {
         changeCashtabSettings('sendModal', checkedState);
     };
 
     const handleCameraOverride = checkedState => {
         changeCashtabSettings('autoCameraOn', checkedState);
     };
     const handleUnknownSenderMsg = checkedState => {
         changeCashtabSettings('hideMessagesFromUnknownSenders', checkedState);
     };
 
     const getContactNameByAddress = contactAddress => {
         if (!contactAddress) {
             return;
         }
 
         // filter contact from local contact list array
         const filteredContactList = contactListArray.filter(
             element => element.address === contactAddress,
         );
 
         if (!filteredContactList) {
             return;
         }
 
         return filteredContactList[0].name;
     };
 
     const deleteContactByAddress = async contactAddress => {
         if (!contactAddress) {
             return;
         }
 
         // filter contact from local contact list array
         const updatedContactList = contactListArray.filter(
             element => element.address !== contactAddress,
         );
 
         // update local list
         setContactListArray(updatedContactList);
 
         // commit updated list to local storage
         let updateContactListStatus;
         try {
             updateContactListStatus = await updateContactListInLocalForage(
                 updatedContactList,
             );
         } catch (err) {
             console.log('Error in updateContactListInLocalForage()');
             console.log(err);
         }
 
         if (updateContactListStatus) {
             generalNotification(
                 contactAddressToDelete + ' removed from Contact List',
                 'Success',
             );
         } else {
             errorNotification(
                 null,
                 'Error removing ' +
                     contactAddressToDelete +
                     ' from Contact List',
                 'Updating localforage with contact list',
             );
         }
     };
 
     const handleDeleteContact = contactAddress => {
         if (!contactAddress) {
             console.log(
                 'handleDeleteContact() error: Invalid contact address for deletion',
             );
             return;
         }
         setContactAddressToDelete(contactAddress);
         setShowDeleteContactModal(true);
     };
 
     const handleDeleteContactModalCancel = () => {
         setShowDeleteContactModal(false);
     };
 
     const handleDeleteContactModalOk = () => {
         if (
             !contactDeleteValid ||
             contactDeleteValid === null ||
             !contactAddressToDelete
         ) {
             return;
         }
         setShowDeleteContactModal(false);
         deleteContactByAddress(contactAddressToDelete);
     };
 
     const handleContactToDeleteInput = e => {
         const { value } = e.target;
         const contactName = getContactNameByAddress(contactAddressToDelete);
         if (value && value === 'delete ' + contactName) {
             setContactDeleteValid(true);
         } else {
             setContactDeleteValid(false);
         }
         setConfirmationOfContactToBeDeleted(value);
     };
 
     const exportContactList = contactListArray => {
         if (!contactListArray) {
             errorNotification('Unable to export contact list');
             return;
         }
 
         // convert object array into csv data
         let csvContent =
             'data:text/csv;charset=utf-8,' +
             contactListArray.map(
                 element => '\n' + element.name + '|' + element.address,
             );
 
         // encode csv
         var encodedUri = encodeURI(csvContent);
 
         // hidden DOM node to set the default file name
         var csvLink = document.createElement('a');
         csvLink.setAttribute('href', encodedUri);
         csvLink.setAttribute(
             'download',
             'Cashtab_Contacts_' + wallet.name + '.csv',
         );
         document.body.appendChild(csvLink);
         csvLink.click();
     };
 
     const handleAddSavedWalletAsContactOk = async () => {
         let duplicateContact = false;
         let tempContactListArray = contactListArray;
 
         let newContactObj = {
             name: manualContactName,
             address: manualContactAddress,
         };
 
         if (!tempContactListArray || tempContactListArray.length === 0) {
             // no existing contact list in local storage
             tempContactListArray = [{}]; // instantiates to mitigate null pointer issues
             tempContactListArray.push(newContactObj);
             tempContactListArray.shift(); // remove the initial entry from instantiation
         } else {
             // contact list exists in local storage
             // check if address already exists in contact list
             let tempContactListArrayLength = tempContactListArray.length;
             for (let i = 0; i < tempContactListArrayLength; i++) {
                 if (tempContactListArray[i].address === manualContactAddress) {
                     errorNotification(
                         null,
                         manualContactAddress +
                             ' already exists in the Contact List',
                         'handleAddSavedWalletAsContactOk() error',
                     );
                     duplicateContact = true;
                     break;
                 }
             }
             // if address does not exist on the contact list, add it
             if (!duplicateContact) {
                 tempContactListArray.push(newContactObj);
                 generalNotification(
                     manualContactAddress + ' added to Contact List',
                     'Success',
                 );
             }
         }
 
         // update localforage
         try {
             await updateContactListInLocalForage(tempContactListArray);
         } catch (err) {
             console.log('Error in handleAddSavedWalletAsContactOk()');
             console.log(err);
         }
 
         // update local state array
         setContactListArray(tempContactListArray);
         setSavedWalletContactModal(false);
         setManualContactName('');
         setManualContactAddress('');
     };
 
     const handleAddSavedWalletAsContactCancel = () => {
         setSavedWalletContactModal(false);
         setManualContactName('');
         setManualContactAddress('');
     };
 
     const addSavedWalletToContact = walletInfo => {
         if (!walletInfo) {
             return;
         }
         // initialise saved wallet name and address to state for confirmation modal
         setManualContactName(walletInfo.name);
         setManualContactAddress(
             convertToEcashPrefix(walletInfo.Path1899.cashAddress),
         );
         setSavedWalletContactModal(true);
     };
 
     const handleManualAddContactModalOk = async () => {
         // if either inputs are invalid then go no further
         if (!manualContactNameIsValid || !manualContactAddressIsValid) {
             return;
         }
 
         let duplicateContact = false;
         let tempContactListArray = contactListArray;
         let newContactObj = {
             name: manualContactName,
             address: manualContactAddress,
         };
 
         if (!tempContactListArray || tempContactListArray.length === 0) {
             // no existing contact list in local storage
             tempContactListArray = [{}]; // instantiates to mitigate null pointer issues
             tempContactListArray.push(newContactObj);
             tempContactListArray.shift(); // remove the initial entry from instantiation
         } else {
             // contact list exists in local storage
             // check if address already exists in contact list
             let tempContactListArrayLength = tempContactListArray.length;
             for (let i = 0; i < tempContactListArrayLength; i++) {
                 if (tempContactListArray[i].address === manualContactAddress) {
                     errorNotification(
                         null,
                         manualContactAddress +
                             ' already exists in the Contact List',
                         'handleManualAddContactModalOk() error',
                     );
                     duplicateContact = true;
                     break;
                 }
             }
             // if address does not exist on the contact list, add it
             if (!duplicateContact) {
                 tempContactListArray.push(newContactObj);
                 generalNotification(
                     manualContactAddress + ' added to Contact List',
                     'Success',
                 );
             }
         }
         // update local state array
         setContactListArray(tempContactListArray);
 
         // update localforage
         try {
             await updateContactListInLocalForage(tempContactListArray);
         } catch (err) {
             console.log('Error in handleManualAddContactModalOk()');
             console.log(err);
         }
 
         setShowManualAddContactModal(false);
         setManualContactName('');
         setManualContactAddress('');
     };
 
     const handleManualAddContactModalCancel = () => {
         setShowManualAddContactModal(false);
         setManualContactName('');
         setManualContactAddress('');
     };
 
     const handleManualContactNameInput = e => {
         const { value } = e.target;
 
         if (value && value.length && value.length < 24) {
             setManualContactNameIsValid(true);
         } else {
             setManualContactNameIsValid(false);
         }
         setManualContactName(value);
     };
 
     const handleManualContactAddressInput = e => {
         const { value } = e.target;
         setManualContactAddressIsValid(isValidXecAddress(value));
         setManualContactAddress(value);
     };
 
     return (
         <SidePaddingCtn>
             <StyledConfigure>
                 {savedWalletContactModal && (
                     <Modal
                         title={`Add the following saved wallet to contact list?`}
-                        visible={savedWalletContactModal}
+                        open={savedWalletContactModal}
                         onOk={() => handleAddSavedWalletAsContactOk()}
                         onCancel={() => handleAddSavedWalletAsContactCancel()}
                     >
                         <AntdFormWrapper>
                             <Form style={{ width: 'auto' }}>
                                 <FormLabel>Name: {manualContactName}</FormLabel>
                                 <br />
                                 <FormLabel>
                                     Address: {manualContactAddress}
                                 </FormLabel>
                             </Form>
                         </AntdFormWrapper>
                     </Modal>
                 )}
                 {showManualAddContactModal && (
                     <Modal
                         title={`Add new contact to contact list`}
-                        visible={showManualAddContactModal}
+                        open={showManualAddContactModal}
                         onOk={() => handleManualAddContactModalOk()}
                         onCancel={() => handleManualAddContactModalCancel()}
                     >
                         <AntdFormWrapper>
                             <Form style={{ width: 'auto' }}>
                                 <FormLabel>Name:</FormLabel>
                                 <Form.Item
                                     validateStatus={
                                         manualContactNameIsValid === null ||
                                         manualContactNameIsValid
                                             ? ''
                                             : 'error'
                                     }
                                     help={
                                         manualContactNameIsValid === null ||
                                         manualContactNameIsValid
                                             ? ''
                                             : 'Contact name must be a string between 1 and 24 characters long'
                                     }
                                 >
                                     <Input
                                         placeholder="Enter new contact name"
                                         name="manualContactName"
                                         value={manualContactName}
                                         onChange={e =>
                                             handleManualContactNameInput(e)
                                         }
                                     />
                                 </Form.Item>
                                 <FormLabel>eCash Address:</FormLabel>
                                 <Form.Item
                                     validateStatus={
                                         manualContactAddressIsValid === null ||
                                         manualContactAddressIsValid
                                             ? ''
                                             : 'error'
                                     }
                                     help={
                                         manualContactAddressIsValid === null ||
                                         manualContactAddressIsValid
                                             ? ''
                                             : 'Invalid eCash address'
                                     }
                                 >
                                     <Input
                                         placeholder="Enter new eCash address"
                                         name="manualContactAddress"
                                         value={manualContactAddress}
                                         onChange={e =>
                                             handleManualContactAddressInput(e)
                                         }
                                     />
                                 </Form.Item>
                             </Form>
                         </AntdFormWrapper>
                     </Modal>
                 )}
                 {showDeleteContactModal && (
                     <>
                         <Modal
                             title="Confirm Delete Contact"
-                            visible={showDeleteContactModal}
+                            open={showDeleteContactModal}
                             onOk={() => handleDeleteContactModalOk()}
                             onCancel={() => handleDeleteContactModalCancel()}
                         >
                             <p>
                                 are you sure you want to delete{' '}
                                 {getContactNameByAddress(
                                     contactAddressToDelete,
                                 )}{' '}
                                 from contact list?
                             </p>
                             <AntdFormWrapper>
                                 <Form style={{ width: 'auto' }}>
                                     <Form.Item
                                         validateStatus={
                                             contactDeleteValid === null ||
                                             contactDeleteValid
                                                 ? ''
                                                 : 'error'
                                         }
                                         help={
                                             contactDeleteValid === null ||
                                             contactDeleteValid
                                                 ? ''
                                                 : 'Your confirmation phrase must match exactly'
                                         }
                                     >
                                         <Input
                                             prefix={<ThemedContactsOutlined />}
                                             placeholder={`Type "delete ${getContactNameByAddress(
                                                 contactAddressToDelete,
                                             )}" to confirm`}
                                             name="contactToBeDeletedInput"
                                             value={
                                                 confirmationOfContactToBeDeleted
                                             }
                                             onChange={e =>
                                                 handleContactToDeleteInput(e)
                                             }
                                         />
                                     </Form.Item>
                                 </Form>
                             </AntdFormWrapper>
                         </Modal>
                     </>
                 )}
                 {showRenameContactModal && (
                     <Modal
                         title={`Set contact name for ${contactToBeRenamed.address}`}
-                        visible={showRenameContactModal}
+                        open={showRenameContactModal}
                         onOk={() => handleRenameContactModalOk()}
                         onCancel={() => handleRenameContactCancel()}
                     >
                         <AntdFormWrapper>
                             <Form style={{ width: 'auto' }}>
                                 <Form.Item
                                     validateStatus={
                                         newContactNameIsValid === null ||
                                         newContactNameIsValid
                                             ? ''
                                             : 'error'
                                     }
                                     help={
                                         newContactNameIsValid === null ||
                                         newContactNameIsValid
                                             ? ''
                                             : 'Contact name must be a string between 1 and 24 characters long'
                                     }
                                 >
                                     <Input
                                         prefix={<WalletFilled />}
                                         placeholder="Enter new contact name"
                                         name="newContactName"
                                         value={confirmationOfContactToBeRenamed}
                                         onChange={e =>
                                             handleContactNameInput(e)
                                         }
                                     />
                                 </Form.Item>
                             </Form>
                         </AntdFormWrapper>
                     </Modal>
                 )}
                 {walletToBeRenamed !== null && (
                     <Modal
                         title={`Rename Wallet ${walletToBeRenamed.name}`}
-                        visible={showRenameWalletModal}
+                        open={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}
+                        open={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 expandIconPosition="start">
                         <Panel
                             header={
                                 <div className="seedPhrase">
                                     Click to reveal seed phrase
                                 </div>
                             }
                         >
                             <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
                                                 title=""
                                             />
                                         </Form.Item>
                                         <SmartButton
                                             disabled={!isValidMnemonic}
                                             onClick={() => submit()}
                                         >
                                             Import
                                         </SmartButton>
                                     </Form>
                                 </AntdFormWrapper>
                             </>
                         )}
                     </>
                 )}
                 {savedWallets && savedWallets.length > 0 && (
                     <>
                         <StyledCollapse>
                             <Panel header="Saved wallets">
                                 <AWRow>
                                     <Tooltip title={wallet.name}>
                                         <h3 className="notranslate">
                                             {wallet.name}
                                         </h3>
                                     </Tooltip>
                                     <h4>Currently active</h4>
                                     <SWButtonCtn>
                                         <ThemedEditOutlined
                                             onClick={() =>
                                                 showPopulatedRenameWalletModal(
                                                     wallet,
                                                 )
                                             }
                                         />
                                         <ThemedContactsOutlined
                                             onClick={() =>
                                                 addSavedWalletToContact(wallet)
                                             }
                                         />
                                     </SWButtonCtn>
                                 </AWRow>
                                 <div>
                                     {savedWallets.map(sw => (
                                         <SWRow key={sw.name}>
                                             <Tooltip
                                                 title={sw.name}
                                                 autoAdjustOverflow={true}
                                             >
                                                 <SWName>
                                                     <h3 className="overflow notranslate">
                                                         {sw.name}
                                                     </h3>
                                                 </SWName>
                                             </Tooltip>
                                             <SWBalance>
                                                 <div className="overflow">
                                                     [
                                                     {sw && sw.state
                                                         ? formatSavedBalance(
                                                               sw.state.balances
                                                                   .totalBalance,
                                                           )
                                                         : 'N/A'}{' '}
                                                     XEC]
                                                 </div>
                                             </SWBalance>
                                             <SWButtonCtn>
                                                 <ThemedEditOutlined
                                                     onClick={() =>
                                                         showPopulatedRenameWalletModal(
                                                             sw,
                                                         )
                                                     }
                                                 />
                                                 <ThemedContactsOutlined
                                                     onClick={() =>
                                                         addSavedWalletToContact(
                                                             sw,
                                                         )
                                                     }
                                                 />
                                                 <ThemedTrashcanOutlined
                                                     onClick={() =>
                                                         showPopulatedDeleteWalletModal(
                                                             sw,
                                                         )
                                                     }
                                                 />
                                                 <button
                                                     onClick={() =>
                                                         updateSavedWalletsOnLoad(
                                                             sw,
                                                         )
                                                     }
                                                 >
                                                     Activate
                                                 </button>
                                             </SWButtonCtn>
                                         </SWRow>
                                     ))}
                                 </div>
                             </Panel>
                         </StyledCollapse>
                     </>
                 )}
                 <Row type="flex">
                     <Col span={24}>
                         <StyledCollapse
                             style={{
                                 marginBottom: '24px',
                             }}
                             defaultActiveKey={
                                 location &&
                                 location.state &&
                                 location.state.contactToAdd
                                     ? ['1']
                                     : ['0']
                             }
                         >
                             <Panel header="Contact List" key="1">
                                 <AntdFormWrapper>
                                     <Form
                                         style={{
                                             width: 'auto',
                                         }}
                                     >
                                         {contactListArray &&
                                         contactListArray.length > 0 ? (
                                             contactListArray.map(
                                                 (element, index) => (
                                                     <ContactListRow key={index}>
                                                         <Tooltip
                                                             title={element.name}
                                                         >
                                                             <ContactListName>
                                                                 <div className="overflow">
                                                                     {
                                                                         element.name
                                                                     }
                                                                 </div>
                                                             </ContactListName>
                                                         </Tooltip>
                                                         <Tooltip
                                                             title={
                                                                 element.address
                                                             }
                                                         >
                                                             <ContactListAddress>
                                                                 <div className="overflow notranslate">
                                                                     {
                                                                         element.address
                                                                     }
                                                                 </div>
                                                             </ContactListAddress>
                                                         </Tooltip>
                                                         <ContactListCtn>
                                                             <CopyToClipboard
                                                                 data={
                                                                     element.address
                                                                 }
                                                                 optionalOnCopyNotification={{
                                                                     title: 'Copied',
                                                                     msg: `${element.address} copied to clipboard`,
                                                                 }}
                                                             >
                                                                 <ThemedCopySolid />
                                                             </CopyToClipboard>
                                                             <ThemedEditOutlined
                                                                 onClick={() =>
                                                                     handleRenameContact(
                                                                         element,
                                                                     )
                                                                 }
                                                             />
                                                             <Link
                                                                 to={{
                                                                     pathname: `/send`,
                                                                     state: {
                                                                         contactSend:
                                                                             element.address,
                                                                     },
                                                                 }}
                                                             >
                                                                 <ThemedContactSendOutlined />
                                                             </Link>
                                                             <ThemedTrashcanOutlined
                                                                 onClick={() =>
                                                                     handleDeleteContact(
                                                                         element.address,
                                                                     )
                                                                 }
                                                             />
                                                         </ContactListCtn>
                                                     </ContactListRow>
                                                 ),
                                             )
                                         ) : (
                                             <div>
                                                 <p>
                                                     {
                                                         'Your contact list is empty.'
                                                     }
                                                 </p>
                                                 <p>
                                                     {
                                                         'Contacts can be added by clicking on a received transaction and looking for the "Add to contacts" icon or via the "New Contact" button below.'
                                                     }
                                                 </p>
                                             </div>
                                         )}
                                         {/* Export button will only show when there are contacts */}
                                         <ContactListBtnCtn>
                                             {contactListArray &&
                                                 contactListArray.length > 0 && (
                                                     <ContactListBtn
                                                         onClick={() =>
                                                             exportContactList(
                                                                 contactListArray,
                                                             )
                                                         }
                                                     >
                                                         <ThemedDownloadOutlined />
                                                         <ExpandedBtnText>
                                                             Download
                                                         </ExpandedBtnText>
                                                         CSV
                                                     </ContactListBtn>
                                                 )}
                                             <br />
                                             <br />
                                             <ContactListBtn
                                                 onClick={() =>
                                                     setShowManualAddContactModal(
                                                         true,
                                                     )
                                                 }
                                             >
                                                 <ThemedPlusOutlined />
                                                 <ExpandedBtnText>
                                                     Add
                                                 </ExpandedBtnText>
                                                 Contact
                                             </ContactListBtn>
                                         </ContactListBtnCtn>
                                     </Form>
                                 </AntdFormWrapper>
                             </Panel>
                         </StyledCollapse>
                     </Col>
                 </Row>
                 <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>
                 {scannerSupported && (
                     <GeneralSettingsItem>
                         <AutoCameraTextCtn>
                             <LockFilled /> Auto-open camera{' '}
                             <HideableTextContainer>
                                 on send
                             </HideableTextContainer>
                         </AutoCameraTextCtn>
                         <Switch
                             size="small"
                             checkedChildren={<CheckOutlined />}
                             unCheckedChildren={<CloseOutlined />}
                             checked={
                                 cashtabSettings
                                     ? cashtabSettings.autoCameraOn
                                     : false
                             }
                             onChange={handleCameraOverride}
                         />
                     </GeneralSettingsItem>
                 )}
                 <GeneralSettingsItem>
                     <div className="ShowMessages">
                         <LockFilled /> Hide messages from unknown sender
                     </div>
                     <Switch
                         size="small"
                         checkedChildren={<CheckOutlined />}
                         unCheckedChildren={<CloseOutlined />}
                         checked={
                             cashtabSettings
                                 ? cashtabSettings.hideMessagesFromUnknownSenders
                                 : false
                         }
                         onChange={handleUnknownSenderMsg}
                     />
                 </GeneralSettingsItem>
                 <StyledSpacer />
                 <SettingsLinkCtn>
                     [
                     <SettingsLink
                         type="link"
                         href="https://docs.cashtab.com/docs/"
                         target="_blank"
                         rel="noreferrer"
                     >
                         Documentation
                     </SettingsLink>
                     ]
                 </SettingsLinkCtn>
             </StyledConfigure>
         </SidePaddingCtn>
     );
 };
 
 export default Configure;
diff --git a/web/cashtab/src/components/Send/Send.js b/web/cashtab/src/components/Send/Send.js
index c28cb93f3..b2463c314 100644
--- a/web/cashtab/src/components/Send/Send.js
+++ b/web/cashtab/src/components/Send/Send.js
@@ -1,1340 +1,1340 @@
 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,
     DestinationAddressSingleWithoutQRScan,
 } from 'components/Common/EnhancedInputs';
 import { CustomCollapseCtn } from 'components/Common/StyledCollapse';
 import { Form, message, Modal, Alert, Input } from 'antd';
 import { Row, Col, Switch } from 'antd';
 import PrimaryButton, {
     DisabledButton,
     SmartButton,
 } from 'components/Common/PrimaryButton';
 import useBCH from 'hooks/useBCH';
 import useWindowDimensions from 'hooks/useWindowDimensions';
 import {
     sendXecNotification,
     errorNotification,
     messageSignedNotification,
     generalNotification,
 } from 'components/Common/Notifications';
 import { isMobile, isIOS, isSafari } from 'react-device-detect';
 import { currency, parseAddressForParams } from 'components/Common/Ticker.js';
 import CopyToClipboard from 'components/Common/CopyToClipboard';
 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,
     fromSatoshisToXec,
 } from 'utils/cashMethods';
 import ApiError from 'components/Common/ApiError';
 import { formatFiatBalance, formatBalance } from 'utils/formatting';
 import {
     TokenParamLabel,
     MessageVerificationParamLabel,
 } from 'components/Common/Atoms';
 import { PlusSquareOutlined } from '@ant-design/icons';
 import styled from 'styled-components';
 import WalletLabel from 'components/Common/WalletLabel.js';
 import { ThemedCopySolid } from 'components/Common/CustomIcons';
 
 const { TextArea } = Input;
 
 const SignMessageLabel = styled.div`
     text-align: left;
     color: ${props => props.theme.forms.text};
 `;
 
 const SignatureValidation = styled.div`
     color: ${props => props.theme.encryptionRed};
 `;
 
 const VerifyMessageLabel = 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;
 `;
 
 const AddressCopyCtn = styled.div`
     display: flex;
     align-items: center;
     gap: 0.5rem;
 
     svg {
         height: 30px;
         width: 30px;
         &:hover {
             fill: ${props => props.theme.eCashBlue};
             cursor: pointer;
         }
     }
 `;
 
 // 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 { BCH, wallet, fiatPrice, apiError, cashtabSettings, chronik } =
         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 =
         cashtabSettings &&
         cashtabSettings.autoCameraOn === true &&
         width < 769 &&
         isMobile &&
         !(isIOS && !isSafari);
 
     const [formData, setFormData] = useState({
         value: '',
         address: '',
         airdropTokenId: '',
     });
     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 [showConfirmMsgToVerify, setShowConfirmMsgToVerify] = useState(false);
     const [messageVerificationAddr, setMessageVerificationAddr] = useState('');
     const [messageVerificationSig, setMessageVerificationSig] = useState('');
     const [messageVerificationMsg, setMessageVerificationMsg] = useState('');
     const [messageVerificationAddrIsValid, setMessageVerificationAddrIsValid] =
         useState(false);
     const [messageVerificationSigIsValid, setMessageVerificationSigIsValid] =
         useState(false);
     const [messageVerificationMsgIsValid, setMessageVerificationMsgIsValid] =
         useState(false);
     const [messageVerificationAddrError, setMessageVerificationAddrError] =
         useState(false);
     const [messageVerificationSigError, setMessageVerificationSigError] =
         useState(false);
 
     const [airdropFlag, setAirdropFlag] = useState(false);
 
     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 { 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 activeBCH = jestBCH ? jestBCH : BCH;
 
         // set the BCH instance to state, for other functions to reference
         setBchObj(activeBCH);
     }, [BCH]);
 
     useEffect(() => {
         // 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: `${fromSatoshisToXec(currency.dustSats).toString()}`,
             });
         }
 
         // if this was routed from the Contact List
         if (location && location.state && location.state.contactSend) {
             setFormData({
                 address: location.state.contactSend,
             });
         }
 
         // 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 &&
             location.state.airdropTokenId
         ) {
             setIsOneToManyXECSend(true);
             setFormData({
                 address: location.state.airdropRecipients,
                 airdropTokenId: location.state.airdropTokenId,
             });
 
             // validate the airdrop outputs from the calculator
             handleMultiAddressChange({
                 target: {
                     value: location.state.airdropRecipients,
                 },
             });
 
             setAirdropFlag(true);
         }
 
         // 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,
                     chronik,
                     wallet,
                     slpBalancesAndUtxos.nonSlpUtxos,
                     currency.defaultFee,
                     opReturnMsg,
                     true, // indicate send mode is one to many
                     cleanAddressAndValueArray,
                     null,
                     null,
                     false, // one to many tx msg can't be encrypted
                     airdropFlag,
                     formData.airdropTokenId,
                 );
                 sendXecNotification(link);
                 clearInputForms();
                 setAirdropFlag(false);
             } 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,
                     chronik,
                     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 handleMessageVerificationAddrChange = e => {
         const { value } = e.target;
         let error = false;
         let addressString = value;
         // parse address for parameters
         const addressInfo = parseAddressForParams(addressString);
         // validate address
         const isValid = isValidXecAddress(addressInfo.address);
 
         const { address } = addressInfo;
 
         // 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 signature verifications`;
             }
             setMessageVerificationAddrIsValid(false);
         } else {
             setMessageVerificationAddrIsValid(true);
         }
         setMessageVerificationAddrError(error);
         setMessageVerificationAddr(address);
     };
 
     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 !== undefined ? `, ${valueString}` : ''
                 }`;
                 setSendBchAddressError(error);
                 return setFormData(p => ({
                     ...p,
                     [name]: value,
                 }));
             }
             if (!validValueString) {
                 error = `Amount must be at least ${fromSatoshisToXec(
                     currency.dustSats,
                 ).toString()} 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: '',
         }));
     };
 
     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 handleVerifyMsgChange = e => {
         const { value } = e.target;
 
         // validation
         if (value && value.length && value.length < 150) {
             setMessageVerificationMsgIsValid(true);
         } else {
             setMessageVerificationMsgIsValid(false);
         }
 
         setMessageVerificationMsg(value);
     };
 
     const handleVerifySigChange = e => {
         const { value } = e.target;
 
         // validation
         if (value && value.length && value.length === 88) {
             setMessageVerificationSigIsValid(true);
             setMessageVerificationSigError(false);
         } else {
             setMessageVerificationSigIsValid(false);
             setMessageVerificationSigError('Invalid signature');
         }
 
         setMessageVerificationSig(value);
     };
 
     const verifyMessageBySig = async () => {
         let verification;
         try {
             verification = await bchObj.BitcoinCash.verifyMessage(
                 toLegacyCash(messageVerificationAddr),
                 messageVerificationSig,
                 messageVerificationMsg,
             );
         } catch (err) {
             errorNotification(
                 'Error',
                 'Unable to execute signature verification',
             );
         }
 
         if (verification) {
             generalNotification('Signature successfully verified', 'Verified');
         } else {
             errorNotification(
                 'Error',
                 'Signature does not match address and message',
             );
         }
 
         setShowConfirmMsgToVerify(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}
+                open={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}${' '}
                   ${selectedCurrency} 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 ? (
                                     <DisabledButton>Send</DisabledButton>
                                 ) : (
                                     <>
                                         {txInfoFromUrl ? (
                                             <PrimaryButton
                                                 onClick={() =>
                                                     checkForConfirmationBeforeSendXec()
                                                 }
                                             >
                                                 Send
                                             </PrimaryButton>
                                         ) : (
                                             <PrimaryButton
                                                 onClick={() => {
                                                     checkForConfirmationBeforeSendXec();
                                                 }}
                                             >
                                                 Send
                                             </PrimaryButton>
                                         )}
                                     </>
                                 )}
                             </div>
 
                             <CustomCollapseCtn
                                 panelHeader="Advanced"
                                 optionalDefaultActiveKey={
                                     location &&
                                     location.state &&
                                     location.state.replyAddress
                                         ? ['1']
                                         : ['0']
                                 }
                                 optionalKey="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>
                             </CustomCollapseCtn>
                             {apiError && <ApiError />}
                         </Form>
                     </Col>
                 </Row>
 
                 <Modal
                     title={`Please review and confirm your message to be signed using this wallet.`}
-                    visible={showConfirmMsgToSign}
+                    open={showConfirmMsgToSign}
                     onOk={signMessageByPk}
                     onCancel={() => setShowConfirmMsgToSign(false)}
                 >
                     <TokenParamLabel>Message:</TokenParamLabel> {msgToSign}
                     <br />
                 </Modal>
                 <CustomCollapseCtn panelHeader="Sign Message">
                     <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>
                                 {wallet &&
                                     wallet.Path1899 &&
                                     wallet.Path1899.cashAddress && (
                                         <AddressCopyCtn>
                                             <Input
                                                 name="signMessageAddress"
                                                 disabled={true}
                                                 value={
                                                     wallet &&
                                                     wallet.Path1899 &&
                                                     wallet.Path1899.cashAddress
                                                         ? convertToEcashPrefix(
                                                               wallet.Path1899
                                                                   .cashAddress,
                                                           )
                                                         : ''
                                                 }
                                             />
                                             <CopyToClipboard
                                                 data={convertToEcashPrefix(
                                                     wallet.Path1899.cashAddress,
                                                 )}
                                                 optionalOnCopyNotification={{
                                                     title: 'Copied',
                                                     msg: `${convertToEcashPrefix(
                                                         wallet.Path1899
                                                             .cashAddress,
                                                     )} copied to clipboard`,
                                                 }}
                                             >
                                                 <ThemedCopySolid />
                                             </CopyToClipboard>
                                         </AddressCopyCtn>
                                     )}
                             </Form.Item>
                             <SmartButton
                                 onClick={() => setShowConfirmMsgToSign(true)}
                                 disabled={!signMessageIsValid}
                             >
                                 <PlusSquareOutlined />
                                 &nbsp;Sign Message
                             </SmartButton>
                             <CopyToClipboard
                                 data={messageSignature}
                                 optionalOnCopyNotification={{
                                     title: 'Message signature copied to clipboard',
                                     msg: `${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>
                 </CustomCollapseCtn>
                 <Modal
                     title={`Please review and confirm your message, signature and address to be verified.`}
-                    visible={showConfirmMsgToVerify}
+                    open={showConfirmMsgToVerify}
                     onOk={verifyMessageBySig}
                     onCancel={() => setShowConfirmMsgToVerify(false)}
                 >
                     <MessageVerificationParamLabel>
                         Message:
                     </MessageVerificationParamLabel>{' '}
                     {messageVerificationMsg}
                     <br />
                     <MessageVerificationParamLabel>
                         Address:
                     </MessageVerificationParamLabel>{' '}
                     {messageVerificationAddr}
                     <br />
                     <MessageVerificationParamLabel>
                         Signature:
                     </MessageVerificationParamLabel>{' '}
                     {messageVerificationSig}
                     <br />
                 </Modal>
                 <CustomCollapseCtn panelHeader="Verify Message">
                     <AntdFormWrapper>
                         <Form
                             size="small"
                             style={{
                                 width: 'auto',
                             }}
                         >
                             <Form.Item>
                                 <VerifyMessageLabel>
                                     Message:
                                 </VerifyMessageLabel>
                                 <TextArea
                                     name="verifyMessage"
                                     onChange={e => handleVerifyMsgChange(e)}
                                     showCount
                                     maxLength={150}
                                 />
                             </Form.Item>
                             <Form.Item>
                                 <VerifyMessageLabel>
                                     Address:
                                 </VerifyMessageLabel>
                                 <DestinationAddressSingleWithoutQRScan
                                     validateStatus={
                                         messageVerificationAddrError
                                             ? 'error'
                                             : ''
                                     }
                                     help={
                                         messageVerificationAddrError
                                             ? messageVerificationAddrError
                                             : ''
                                     }
                                     inputProps={{
                                         placeholder: `${currency.ticker} Address`,
                                         name: 'address',
                                         onChange: e =>
                                             handleMessageVerificationAddrChange(
                                                 e,
                                             ),
                                         required: true,
                                     }}
                                 ></DestinationAddressSingleWithoutQRScan>
                             </Form.Item>
                             <Form.Item>
                                 <VerifyMessageLabel>
                                     Signature:
                                 </VerifyMessageLabel>
                                 <TextArea
                                     name="verifySignature"
                                     onChange={e => handleVerifySigChange(e)}
                                     showCount
                                 />
                                 <SignatureValidation>
                                     {messageVerificationSigError}
                                 </SignatureValidation>
                             </Form.Item>
                             <SmartButton
                                 onClick={() => setShowConfirmMsgToVerify(true)}
                                 disabled={
                                     !messageVerificationAddrIsValid ||
                                     !messageVerificationSigIsValid ||
                                     !messageVerificationMsgIsValid
                                 }
                             >
                                 <PlusSquareOutlined />
                                 &nbsp;Verify Message
                             </SmartButton>
                         </Form>
                     </AntdFormWrapper>
                 </CustomCollapseCtn>
             </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/src/components/Send/SendToken.js b/web/cashtab/src/components/Send/SendToken.js
index f15c2e454..e0e9a8f9f 100644
--- a/web/cashtab/src/components/Send/SendToken.js
+++ b/web/cashtab/src/components/Send/SendToken.js
@@ -1,787 +1,787 @@
 import React, { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import { WalletContext } from 'utils/context';
 import {
     Form,
     message,
     Row,
     Col,
     Alert,
     Descriptions,
     Modal,
     Button,
     Input,
 } from 'antd';
 import PrimaryButton, {
     SecondaryButton,
 } from 'components/Common/PrimaryButton';
 import { FireTwoTone } from '@ant-design/icons';
 import {
     DestinationAmount,
     DestinationAddressSingle,
     AntdFormWrapper,
 } from 'components/Common/EnhancedInputs';
 import useBCH from 'hooks/useBCH';
 import { SidePaddingCtn } from 'components/Common/Atoms';
 import BalanceHeader from 'components/Common/BalanceHeader';
 import { Redirect } from 'react-router-dom';
 import useWindowDimensions from 'hooks/useWindowDimensions';
 import usePrevious from 'hooks/usePrevious';
 import { isMobile, isIOS, isSafari } from 'react-device-detect';
 import { Img } from 'react-image';
 import makeBlockie from 'ethereum-blockies-base64';
 import BigNumber from 'bignumber.js';
 import { currency, parseAddressForParams } from 'components/Common/Ticker.js';
 import { Event } from 'utils/GoogleAnalytics';
 import { getWalletState, toLegacyToken } from 'utils/cashMethods';
 import ApiError from 'components/Common/ApiError';
 import {
     sendTokenNotification,
     errorNotification,
     burnTokenNotification,
 } from 'components/Common/Notifications';
 import {
     isValidXecAddress,
     isValidEtokenAddress,
     isValidEtokenBurnAmount,
 } from 'utils/validation';
 import { getTokenStats } from 'utils/chronik';
 import { formatDate } from 'utils/formatting';
 import styled, { css } from 'styled-components';
 import TokenIcon from 'components/Tokens/TokenIcon';
 const AntdDescriptionsCss = css`
     .ant-descriptions-item-label,
     .ant-input-number,
     .ant-descriptions-item-content {
         background-color: ${props => props.theme.contrast} !important;
         color: ${props => props.theme.dropdownText};
     }
     .ant-descriptions-title {
         color: ${props => props.theme.lightWhite};
     }
 `;
 const AntdDescriptionsWrapper = styled.div`
     ${AntdDescriptionsCss}
 `;
 const AirdropButton = styled.div`
     text-align: center;
     width: 100%;
     padding: 10px;
     border-radius: 5px;
     background: ${props => props.theme.sentMessage};
     a {
         color: ${props => props.theme.darkBlue};
         margin: 0;
         font-size: 11px;
         border: 1px solid ${props => props.theme.darkBlue};
         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 SendToken = ({ tokenId, jestBCH, passLoadingStatus }) => {
     const { BCH, wallet, apiError, cashtabSettings, chronik } =
         React.useContext(WalletContext);
     const walletState = getWalletState(wallet);
     const { tokens } = walletState;
 
     const token = tokens.find(token => token.tokenId === tokenId);
     const previousToken = usePrevious(token);
 
     const [tokenStats, setTokenStats] = useState(null);
     const [queryStringText, setQueryStringText] = useState(null);
     const [sendTokenAddressError, setSendTokenAddressError] = useState(false);
     const [sendTokenAmountError, setSendTokenAmountError] = useState(false);
     const [eTokenBurnAmount, setETokenBurnAmount] = useState(new BigNumber(1));
     const [showConfirmBurnEtoken, setShowConfirmBurnEtoken] = useState(false);
     const [burnTokenAmountError, setBurnTokenAmountError] = useState(false);
     const [burnConfirmationValid, setBurnConfirmationValid] = useState(null);
     const [confirmationOfEtokenToBeBurnt, setConfirmationOfEtokenToBeBurnt] =
         useState('');
     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 =
         cashtabSettings &&
         cashtabSettings.autoCameraOn === true &&
         width < 769 &&
         isMobile &&
         !(isIOS && !isSafari);
     const [isModalVisible, setIsModalVisible] = useState(false);
 
     const [formData, setFormData] = useState({
         value: '',
         address: '',
     });
 
     const { getRestUrl, sendToken, burnToken } = useBCH();
 
     useEffect(() => {
         // jestBCH is only ever specified for unit tests, otherwise app will use getBCH();
         const activeBCH = jestBCH ? jestBCH : BCH;
 
         // set the BCH instance to state, for other functions to reference
         setBchObj(activeBCH);
     }, [BCH]);
 
     // Fetch token stats if you do not have them and API did not return an error
     if (tokenStats === null) {
         getTokenStats(chronik, tokenId).then(
             result => {
                 setTokenStats(result);
             },
             err => {
                 console.log(`Error getting token stats: ${err}`);
             },
         );
     }
     // Clears address and amount fields following sendTokenNotification
     const clearInputForms = () => {
         setFormData({
             value: '',
             address: '',
         });
     };
 
     async function submit() {
         setFormData({
             ...formData,
         });
 
         if (
             !formData.address ||
             !formData.value ||
             Number(formData.value <= 0) ||
             sendTokenAmountError
         ) {
             return;
         }
 
         // Event("Category", "Action", "Label")
         // Track number of SLPA send transactions and
         // SLPA token IDs
         Event('SendToken.js', 'Send', tokenId);
 
         passLoadingStatus(true);
         const { address, value } = formData;
 
         // Clear params from address
         let cleanAddress = address.split('?')[0];
 
         // Convert to simpleledger prefix if etoken
         cleanAddress = toLegacyToken(cleanAddress);
 
         try {
             const link = await sendToken(bchObj, wallet, {
                 tokenId: tokenId,
                 tokenReceiverAddress: cleanAddress,
                 amount: value,
             });
             sendTokenNotification(link);
             clearInputForms();
         } catch (e) {
             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 {
                 message = e.message || e.error || JSON.stringify(e);
             }
             errorNotification(e, message, 'Sending eToken');
         }
     }
 
     const handleSlpAmountChange = e => {
         let error = false;
         const { value, name } = e.target;
 
         // test if exceeds balance using BigNumber
         let isGreaterThanBalance = false;
         if (!isNaN(value)) {
             const bigValue = new BigNumber(value);
             // Returns 1 if greater, -1 if less, 0 if the same, null if n/a
             isGreaterThanBalance = bigValue.comparedTo(token.balance);
         }
 
         // Validate value for > 0
         if (isNaN(value)) {
             error = 'Amount must be a number';
         } else if (value <= 0) {
             error = 'Amount must be greater than 0';
         } else if (token && token.balance && isGreaterThanBalance === 1) {
             error = `Amount cannot exceed your ${token.info.tokenTicker} balance of ${token.balance}`;
         } else if (!isNaN(value) && value.toString().includes('.')) {
             if (value.toString().split('.')[1].length > token.info.decimals) {
                 error = `This token only supports ${token.info.decimals} decimal places`;
             }
         }
         setSendTokenAmountError(error);
         setFormData(p => ({
             ...p,
             [name]: value,
         }));
     };
 
     const handleTokenAddressChange = e => {
         const { value, name } = e.target;
         // validate for token address
         // validate for parameters
         // show warning that query strings are not supported
 
         let error = false;
         let addressString = value;
 
         const isValid = isValidEtokenAddress(addressString);
 
         const addressInfo = parseAddressForParams(addressString);
         /*
         Model
         addressInfo = 
         {
             address: '',
             queryString: '',
             amount: null,
         };
         */
 
         const { address, queryString } = addressInfo;
 
         // If query string,
         // Show an alert that only amount and currency.ticker are supported
         setQueryStringText(queryString);
 
         // Is this valid address?
         if (!isValid) {
             error = 'Address is not a valid etoken: address';
             // If valid address but xec format
             if (isValidXecAddress(address)) {
                 error = `Cashtab does not support sending eTokens to XEC addresses. Please convert to an eToken address.`;
             }
         }
         setSendTokenAddressError(error);
 
         setFormData(p => ({
             ...p,
             [name]: value,
         }));
     };
 
     const onMax = async () => {
         // Clear this error before updating field
         setSendTokenAmountError(false);
         try {
             let value = token.balance;
 
             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',
             );
         }
     };
 
     const checkForConfirmationBeforeSendEtoken = () => {
         if (cashtabSettings.sendModal) {
             setIsModalVisible(cashtabSettings.sendModal);
         } else {
             // if the user does not have the send confirmation enabled in settings then send directly
             submit();
         }
     };
 
     const handleOk = () => {
         setIsModalVisible(false);
         submit();
     };
 
     const handleCancel = () => {
         setIsModalVisible(false);
     };
 
     const handleEtokenBurnAmountChange = e => {
         const { value } = e.target;
         const burnAmount = new BigNumber(value);
         setETokenBurnAmount(burnAmount);
 
         let error = false;
         if (!isValidEtokenBurnAmount(burnAmount, token.balance)) {
             error = 'Burn amount must be between 1 and ' + token.balance;
         }
 
         setBurnTokenAmountError(error);
     };
 
     const onMaxBurn = () => {
         setETokenBurnAmount(token.balance);
 
         // trigger validation on the inserted max value
         handleEtokenBurnAmountChange({
             target: {
                 value: token.balance,
             },
         });
     };
 
     async function burn() {
         if (
             !burnConfirmationValid ||
             burnConfirmationValid === null ||
             !eTokenBurnAmount
         ) {
             return;
         }
 
         // Event("Category", "Action", "Label")
         Event('SendToken.js', 'Burn eToken', tokenId);
 
         passLoadingStatus(true);
 
         try {
             const link = await burnToken(bchObj, wallet, {
                 tokenId: tokenId,
                 amount: eTokenBurnAmount,
             });
             burnTokenNotification(link);
             clearInputForms();
             setShowConfirmBurnEtoken(false);
             setConfirmationOfEtokenToBeBurnt('');
         } catch (e) {
             setShowConfirmBurnEtoken(false);
             passLoadingStatus(false);
             setConfirmationOfEtokenToBeBurnt('');
             let message;
 
             if (!e.error && !e.message) {
                 message = `Transaction failed: no response from ${getRestUrl()}.`;
             } else if (/dust/.test(e.error)) {
                 message = 'Unable to burn due to insufficient eToken utxos.';
             } 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 {
                 message = e.message || e.error || JSON.stringify(e);
             }
             errorNotification(e, message, 'Burning eToken');
         }
     }
 
     const handleBurnConfirmationInput = e => {
         const { value } = e.target;
 
         if (value && value === `burn ${token.info.tokenTicker}`) {
             setBurnConfirmationValid(true);
         } else {
             setBurnConfirmationValid(false);
         }
         setConfirmationOfEtokenToBeBurnt(value);
     };
 
     const handleBurnAmountInput = () => {
         if (!burnTokenAmountError) {
             setShowConfirmBurnEtoken(true);
         }
     };
 
     useEffect(() => {
         /*         
         If the balance has changed, unlock the UI
            
         Note that the 'token' dependency changes every time the wallet state is set
         This useEffect loop can't use token.balance as the dependency as this is 
         occasionally undefined, which the screen UI also makes use of
         */
         if (
             token &&
             token.balance &&
             previousToken &&
             previousToken.balance &&
             token.balance.toString() !== previousToken.balance.toString()
         ) {
             passLoadingStatus(false);
         }
     }, [token]);
 
     return (
         <>
             <Modal
                 title="Confirm Send"
-                visible={isModalVisible}
+                open={isModalVisible}
                 onOk={handleOk}
                 onCancel={handleCancel}
             >
                 <p>
                     {token && token.info && formData
                         ? `Are you sure you want to send ${formData.value}${' '}
                         ${token.info.tokenTicker} to ${formData.address}?`
                         : ''}
                 </p>
             </Modal>
             {!token && <Redirect to="/" />}
             {token && (
                 <SidePaddingCtn>
                     {/* eToken burn modal */}
                     <Modal
                         title={`Are you sure you want to burn ${eTokenBurnAmount.toString()} x ${
                             token.info.tokenTicker
                         } eTokens?`}
-                        visible={showConfirmBurnEtoken}
+                        open={showConfirmBurnEtoken}
                         onOk={burn}
                         okText={'Confirm'}
                         onCancel={() => setShowConfirmBurnEtoken(false)}
                     >
                         <AntdFormWrapper>
                             <Form style={{ width: 'auto' }}>
                                 <Form.Item
                                     validateStatus={
                                         burnConfirmationValid === null ||
                                         burnConfirmationValid
                                             ? ''
                                             : 'error'
                                     }
                                     help={
                                         burnConfirmationValid === null ||
                                         burnConfirmationValid
                                             ? ''
                                             : 'Your confirmation phrase must match exactly'
                                     }
                                 >
                                     <Input
                                         prefix={<FireTwoTone />}
                                         placeholder={`Type "burn ${token.info.tokenTicker}" to confirm`}
                                         name="etokenToBeBurnt"
                                         value={confirmationOfEtokenToBeBurnt}
                                         onChange={e =>
                                             handleBurnConfirmationInput(e)
                                         }
                                     />
                                 </Form.Item>
                             </Form>
                         </AntdFormWrapper>
                     </Modal>
                     <BalanceHeader
                         balance={token.balance}
                         ticker={token.info.tokenTicker}
                     />
                     <Row type="flex">
                         <Col span={24}>
                             <Form
                                 style={{
                                     width: 'auto',
                                 }}
                             >
                                 <DestinationAddressSingle
                                     loadWithCameraOpen={scannerSupported}
                                     validateStatus={
                                         sendTokenAddressError ? 'error' : ''
                                     }
                                     help={
                                         sendTokenAddressError
                                             ? sendTokenAddressError
                                             : ''
                                     }
                                     onScan={result =>
                                         handleTokenAddressChange({
                                             target: {
                                                 name: 'address',
                                                 value: result,
                                             },
                                         })
                                     }
                                     inputProps={{
                                         placeholder: `${currency.tokenTicker} Address`,
                                         name: 'address',
                                         onChange: e =>
                                             handleTokenAddressChange(e),
                                         required: true,
                                         value: formData.address,
                                     }}
                                 />
                                 <DestinationAmount
                                     validateStatus={
                                         sendTokenAmountError ? 'error' : ''
                                     }
                                     help={
                                         sendTokenAmountError
                                             ? sendTokenAmountError
                                             : ''
                                     }
                                     onMax={onMax}
                                     inputProps={{
                                         name: 'value',
                                         step: 1 / 10 ** token.info.decimals,
                                         placeholder: 'Amount',
                                         prefix:
                                             currency.tokenIconsUrl !== '' ? (
                                                 <Img
                                                     src={`${currency.tokenIconsUrl}/32/${tokenId}.png`}
                                                     width={16}
                                                     height={16}
                                                     unloader={
                                                         <img
                                                             alt={`identicon of tokenId ${tokenId} `}
                                                             height="16"
                                                             width="16"
                                                             style={{
                                                                 borderRadius:
                                                                     '50%',
                                                             }}
                                                             key={`identicon-${tokenId}`}
                                                             src={makeBlockie(
                                                                 tokenId,
                                                             )}
                                                         />
                                                     }
                                                 />
                                             ) : (
                                                 <img
                                                     alt={`identicon of tokenId ${tokenId} `}
                                                     height="16"
                                                     width="16"
                                                     style={{
                                                         borderRadius: '50%',
                                                     }}
                                                     key={`identicon-${tokenId}`}
                                                     src={makeBlockie(tokenId)}
                                                 />
                                             ),
                                         suffix: token.info.tokenTicker,
                                         onChange: e => handleSlpAmountChange(e),
                                         required: true,
                                         value: formData.value,
                                     }}
                                 />
                                 <div
                                     style={{
                                         paddingTop: '12px',
                                     }}
                                 >
                                     {apiError ||
                                     sendTokenAmountError ||
                                     sendTokenAddressError ? (
                                         <>
                                             <SecondaryButton>
                                                 Send {token.info.tokenName}
                                             </SecondaryButton>
                                         </>
                                     ) : (
                                         <PrimaryButton
                                             onClick={() =>
                                                 checkForConfirmationBeforeSendEtoken()
                                             }
                                         >
                                             Send {token.info.tokenName}
                                         </PrimaryButton>
                                     )}
                                 </div>
 
                                 {queryStringText && (
                                     <Alert
                                         message={`You are sending a transaction to an address including query parameters "${queryStringText}." Token transactions do not support query parameters and they will be ignored.`}
                                         type="warning"
                                     />
                                 )}
                                 {apiError && <ApiError />}
                             </Form>
                             {tokenStats !== null && (
                                 <AntdDescriptionsWrapper>
                                     <Descriptions
                                         column={1}
                                         bordered
                                         title={`Token info for "${token.info.tokenName}"`}
                                     >
                                         <Descriptions.Item label="Icon">
                                             <TokenIcon
                                                 size={64}
                                                 tokenId={tokenId}
                                             />
                                         </Descriptions.Item>
                                         <Descriptions.Item label="Decimals">
                                             {token.info.decimals}
                                         </Descriptions.Item>
                                         <Descriptions.Item label="Token ID">
                                             {token.tokenId}
                                             <br />
                                             <AirdropButton>
                                                 <Link
                                                     to={{
                                                         pathname: `/airdrop`,
                                                         state: {
                                                             airdropEtokenId:
                                                                 token.tokenId,
                                                         },
                                                     }}
                                                 >
                                                     Airdrop XEC to holders
                                                 </Link>
                                             </AirdropButton>
                                         </Descriptions.Item>
                                         {tokenStats && (
                                             <>
                                                 <Descriptions.Item label="Document URI">
                                                     {
                                                         tokenStats.slpTxData
                                                             .genesisInfo
                                                             .tokenDocumentUrl
                                                     }
                                                 </Descriptions.Item>
                                                 <Descriptions.Item label="Genesis Date">
                                                     {tokenStats.block &&
                                                     tokenStats.block
                                                         .timestamp !== null
                                                         ? formatDate(
                                                               tokenStats.block
                                                                   .timestamp,
                                                               navigator.language,
                                                           )
                                                         : 'Just now (Genesis tx confirming)'}
                                                 </Descriptions.Item>
                                                 <Descriptions.Item label="Fixed Supply?">
                                                     {tokenStats.containsBaton
                                                         ? 'No'
                                                         : 'Yes'}
                                                 </Descriptions.Item>
                                                 <Descriptions.Item label="Initial Quantity">
                                                     {new BigNumber(
                                                         tokenStats.initialTokenQuantity,
                                                     )
                                                         .toFormat(
                                                             token.info.decimals,
                                                         )
                                                         .toLocaleString()}
                                                 </Descriptions.Item>
                                                 <Descriptions.Item label="Total Burned">
                                                     {new BigNumber(
                                                         tokenStats.tokenStats.totalBurned,
                                                     )
                                                         .toFormat(
                                                             token.info.decimals,
                                                         )
                                                         .toLocaleString()}
                                                 </Descriptions.Item>
                                                 <Descriptions.Item label="Total Minted">
                                                     {new BigNumber(
                                                         tokenStats.tokenStats.totalMinted,
                                                     )
                                                         .toFormat(
                                                             token.info.decimals,
                                                         )
                                                         .toLocaleString()}
                                                 </Descriptions.Item>
                                                 <Descriptions.Item label="Circulating Supply">
                                                     {new BigNumber(
                                                         tokenStats.circulatingSupply,
                                                     )
                                                         .toFormat(
                                                             token.info.decimals,
                                                         )
                                                         .toLocaleString()}
                                                 </Descriptions.Item>
                                                 <Descriptions.Item label="Burn eToken">
                                                     <DestinationAmount
                                                         validateStatus={
                                                             burnTokenAmountError
                                                                 ? 'error'
                                                                 : ''
                                                         }
                                                         help={
                                                             burnTokenAmountError
                                                                 ? burnTokenAmountError
                                                                 : ''
                                                         }
                                                         onMax={onMaxBurn}
                                                         inputProps={{
                                                             placeholder:
                                                                 'Amount',
                                                             suffix: token.info
                                                                 .tokenTicker,
                                                             onChange: e =>
                                                                 handleEtokenBurnAmountChange(
                                                                     e,
                                                                 ),
                                                             initialvalue: 1,
                                                             value: eTokenBurnAmount,
                                                             prefix: (
                                                                 <TokenIcon
                                                                     size={32}
                                                                     tokenId={
                                                                         tokenId
                                                                     }
                                                                 />
                                                             ),
                                                         }}
                                                     />
                                                     <Button
                                                         type="primary"
                                                         onClick={
                                                             handleBurnAmountInput
                                                         }
                                                         danger
                                                     >
                                                         Burn&nbsp;
                                                         {token.info.tokenTicker}
                                                     </Button>
                                                 </Descriptions.Item>
                                             </>
                                         )}
                                     </Descriptions>
                                 </AntdDescriptionsWrapper>
                             )}
                         </Col>
                     </Row>
                 </SidePaddingCtn>
             )}
         </>
     );
 };
 
 /*
 passLoadingStatus must receive a default prop that is a function
 in order to pass the rendering unit test in SendToken.test.js
 status => {console.log(status)} is an arbitrary stub function
 */
 
 SendToken.defaultProps = {
     passLoadingStatus: status => {
         console.log(status);
     },
 };
 
 SendToken.propTypes = {
     tokenId: PropTypes.string,
     jestBCH: PropTypes.object,
     passLoadingStatus: PropTypes.func,
 };
 
 export default SendToken;
diff --git a/web/cashtab/src/components/Tokens/CreateTokenForm.js b/web/cashtab/src/components/Tokens/CreateTokenForm.js
index eedb374bc..e9064deb7 100644
--- a/web/cashtab/src/components/Tokens/CreateTokenForm.js
+++ b/web/cashtab/src/components/Tokens/CreateTokenForm.js
@@ -1,821 +1,821 @@
 import React, { useState, useCallback } from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import { AntdFormWrapper } from 'components/Common/EnhancedInputs';
 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 {
     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;
     }
     .ant-typography {
         color: ${props => props.theme.lightGrey};
     }
     div.ant-upload-list.ant-upload-list-text {
         color: ${props => props.theme.lightGrey};
     }
     svg {
         color: ${props => props.theme.lightGrey};
     }
 `;
 
 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();
         });
     };
 
     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}
+                open={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;