diff --git a/web/cashtab/src/components/Common/Atoms.js b/web/cashtab/src/components/Common/Atoms.js
index 77fe28186..8e1e8972e 100644
--- a/web/cashtab/src/components/Common/Atoms.js
+++ b/web/cashtab/src/components/Common/Atoms.js
@@ -1,63 +1,63 @@
 import styled from 'styled-components';
 
 export const LoadingCtn = styled.div`
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     height: 400px;
     flex-direction: column;
 
     svg {
         width: 50px;
         height: 50px;
         fill: ${props => props.theme.primary};
     }
 `;
 
 export const BalanceHeaderWrap = styled.div`
     color: ${props => props.theme.wallet.text.primary};
     width: 100%;
     font-size: 30px;
     font-weight: bold;
     @media (max-width: 768px) {
         font-size: 23px;
     }
 `;
 
-export const BalanceHeaderFiat = styled.div`
+export const BalanceHeaderFiatWrap = styled.div`
     color: ${props => props.theme.wallet.text.secondary};
     width: 100%;
     font-size: 18px;
     margin-bottom: 20px;
     font-weight: bold;
     @media (max-width: 768px) {
         font-size: 16px;
     }
 `;
 
 export const ZeroBalanceHeader = styled.div`
     color: ${props => props.theme.wallet.text.primary};
     width: 100%;
     font-size: 14px;
     margin-bottom: 5px;
 `;
 
 export const TokenParamLabel = styled.span`
     font-weight: bold;
 `;
 
 export const AlertMsg = styled.p`
     color: ${props => props.theme.forms.error};
 `;
 
 export const ConvertAmount = styled.div`
     color: ${props => props.theme.wallet.text.secondary};
     width: 100%;
     font-size: 14px;
     margin-bottom: 10px;
     font-weight: bold;
     @media (max-width: 768px) {
         font-size: 12px;
     }
 `;
diff --git a/web/cashtab/src/components/Common/BalanceHeaderFiat.js b/web/cashtab/src/components/Common/BalanceHeaderFiat.js
new file mode 100644
index 000000000..84cd32688
--- /dev/null
+++ b/web/cashtab/src/components/Common/BalanceHeaderFiat.js
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { BalanceHeaderFiatWrap } from '@components/Common/Atoms';
+import { currency } from '@components/Common/Ticker.js';
+
+export const BalanceHeaderFiat = ({ balance, settings, fiatPrice }) => {
+    return (
+        <BalanceHeaderFiatWrap>
+            {settings
+                ? `${currency.fiatCurrencies[settings.fiatCurrency].symbol} `
+                : '$ '}
+            {parseFloat((balance * fiatPrice).toFixed(2)).toLocaleString()}{' '}
+            {settings
+                ? `${currency.fiatCurrencies[
+                      settings.fiatCurrency
+                  ].slug.toUpperCase()} `
+                : 'USD'}
+        </BalanceHeaderFiatWrap>
+    );
+};
diff --git a/web/cashtab/src/components/Send/Send.js b/web/cashtab/src/components/Send/Send.js
index f8497a54b..480c9fe77 100644
--- a/web/cashtab/src/components/Send/Send.js
+++ b/web/cashtab/src/components/Send/Send.js
@@ -1,575 +1,565 @@
 import React, { useState, useEffect } from 'react';
 import { WalletContext } from '@utils/context';
 import { Form, notification, message, Spin, Modal, Alert } from 'antd';
 import { CashLoader, CashLoadingIcon } from '@components/Common/CustomIcons';
 import { Row, Col } from 'antd';
 import Paragraph from 'antd/lib/typography/Paragraph';
 import PrimaryButton, {
     SecondaryButton,
 } from '@components/Common/PrimaryButton';
 import {
     SendBchInput,
     FormItemWithQRCodeAddon,
 } from '@components/Common/EnhancedInputs';
 import useBCH from '@hooks/useBCH';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import { isMobile, isIOS, isSafari } from 'react-device-detect';
 import {
     currency,
     isValidTokenPrefix,
     parseAddress,
     toLegacy,
 } from '@components/Common/Ticker.js';
 import { Event } from '@utils/GoogleAnalytics';
 import { fiatToCrypto, shouldRejectAmountInput } from '@utils/validation';
 import { BalanceHeader } from '@components/Common/BalanceHeader';
+import { BalanceHeaderFiat } from '@components/Common/BalanceHeaderFiat';
 import {
-    BalanceHeaderFiat,
     ZeroBalanceHeader,
     ConvertAmount,
     AlertMsg,
 } from '@components/Common/Atoms';
 
 // Note jestBCH is only used for unit tests; BCHJS must be mocked for jest
 const SendBCH = ({ jestBCH, filledAddress, callbackTxId }) => {
     // 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 {
         wallet,
         fiatPrice,
         slpBalancesAndUtxos,
         apiError,
         cashtabSettings,
     } = ContextValue;
     let balances;
     const paramsInWalletState = wallet.state ? Object.keys(wallet.state) : [];
     // If wallet.state includes balances and parsedTxHistory params, use these
     // These are saved in indexedDb in the latest version of the app, hence accessible more quickly
     if (paramsInWalletState.includes('balances')) {
         balances = wallet.state.balances;
     } else {
         // If balances and parsedTxHistory are not in the wallet.state object, load them from Context
         // This is how the app used to work
         balances = ContextValue.balances;
     }
 
     // Get device window width
     // If this is less than 769, the page will open with QR scanner open
     const { width } = useWindowDimensions();
     // Load with QR code open if device is mobile and NOT iOS + anything but safari
     const scannerSupported = width < 769 && isMobile && !(isIOS && !isSafari);
 
     const [formData, setFormData] = useState({
         dirty: true,
         value: '',
         address: filledAddress || '',
     });
     const [loading, setLoading] = useState(false);
     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 showModal = () => {
         setIsModalVisible(true);
     };
 
     const handleOk = () => {
         setIsModalVisible(false);
         submit();
     };
 
     const handleCancel = () => {
         setIsModalVisible(false);
     };
 
     const { getBCH, getRestUrl, sendBch, calcFee } = useBCH();
 
     // jestBCH is only ever specified for unit tests, otherwise app will use getBCH();
     const BCH = jestBCH ? jestBCH : getBCH();
 
     // 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(() => {
         setLoading(false);
     }, [balances.totalBalance]);
 
     useEffect(() => {
         // Manually parse for txInfo object on page load when Send.js is loaded with a query string
 
         // 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,
             });
         }
     }
 
     async function submit() {
         setFormData({
             ...formData,
             dirty: false,
         });
 
         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);
 
         setLoading(true);
         const { address, value } = formData;
 
         // Get the param-free address
         let cleanAddress = address.split('?')[0];
 
         // Ensure address has bitcoincash: prefix and checksum
         cleanAddress = toLegacy(cleanAddress);
 
         let hasValidCashPrefix;
         try {
             hasValidCashPrefix = cleanAddress.startsWith(
                 currency.legacyPrefix + ':',
             );
         } catch (err) {
             hasValidCashPrefix = false;
             console.log(`toLegacy() returned an error:`, cleanAddress);
         }
 
         if (!hasValidCashPrefix) {
             // set loading to false and set address validation to false
             // Now that the no-prefix case is handled, this happens when user tries to send
             // BCHA to an SLPA address
             setLoading(false);
             setSendBchAddressError(
                 `Destination is not a valid ${currency.ticker} address`,
             );
             return;
         }
 
         // Calculate the amount in BCH
         let bchValue = value;
 
         if (selectedCurrency !== 'XEC') {
             bchValue = fiatToCrypto(value, fiatPrice);
         }
 
         try {
             const link = await sendBch(
                 BCH,
                 wallet,
                 slpBalancesAndUtxos.nonSlpUtxos,
                 filledAddress || cleanAddress,
                 bchValue,
                 currency.defaultFee,
                 callbackTxId,
             );
 
             notification.success({
                 message: 'Success',
                 description: (
                     <a href={link} target="_blank" rel="noopener noreferrer">
                         <Paragraph>
                             Transaction successful. Click or tap here for more
                             details
                         </Paragraph>
                     </a>
                 ),
                 duration: 5,
             });
         } catch (e) {
             // Set loading to false here as well, as balance may not change depending on where error occured in try loop
             setLoading(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);
             }
 
             notification.error({
                 message: 'Error',
                 description: message,
                 duration: 5,
             });
             console.error(e);
         }
     }
 
     const handleAddressChange = e => {
         const { value, name } = e.target;
         let error = false;
         let addressString = value;
 
         // parse address
         const addressInfo = parseAddress(BCH, addressString);
         /*
         Model
 
         addressInfo = 
         {
             address: '',
             isValid: false,
             queryString: '',
             amount: null,
         };
         */
 
         const { address, isValid, 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 (isValidTokenPrefix(address)) {
                 error = `Token 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 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 onMax = async () => {
         // Clear amt error
         setSendBchAmountError(false);
         // Set currency to BCH
         setSelectedCurrency(currency.ticker);
         try {
             const txFeeSats = calcFee(BCH, 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) {
             fiatPriceString = `${
                 cashtabSettings
                     ? `${
                           currency.fiatCurrencies[cashtabSettings.fiatCurrency]
                               .symbol
                       } `
                     : '$ '
             } ${(fiatPrice * Number(formData.value)).toFixed(2)} ${
                 cashtabSettings && cashtabSettings.fiatCurrency
                     ? cashtabSettings.fiatCurrency.toUpperCase()
                     : 'USD'
             }`;
         } else {
             fiatPriceString = `${
                 formData.value ? fiatToCrypto(formData.value, fiatPrice) : '0'
             } ${currency.ticker}`;
         }
     }
 
     const priceApiError = fiatPrice === null && selectedCurrency !== 'XEC';
 
     return (
         <>
             <Modal
                 title="Confirm Send"
                 visible={isModalVisible}
                 onOk={handleOk}
                 onCancel={handleCancel}
             >
                 <p>
                     Are you sure you want to send {formData.value}{' '}
                     {currency.ticker} to {formData.address}?
                 </p>
             </Modal>
             {!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}
                     ></BalanceHeader>
                     {fiatPrice !== null && (
-                        <BalanceHeaderFiat>
-                            {cashtabSettings
-                                ? `${
-                                      currency.fiatCurrencies[
-                                          cashtabSettings.fiatCurrency
-                                      ].symbol
-                                  } `
-                                : '$ '}
-                            {(balances.totalBalance * fiatPrice).toFixed(2)}{' '}
-                            {cashtabSettings
-                                ? `${currency.fiatCurrencies[
-                                      cashtabSettings.fiatCurrency
-                                  ].slug.toUpperCase()} `
-                                : 'USD'}
-                        </BalanceHeaderFiat>
+                        <BalanceHeaderFiat
+                            balance={balances.totalBalance}
+                            settings={cashtabSettings}
+                            fiatPrice={fiatPrice}
+                        />
                     )}
                 </>
             )}
 
             <Row type="flex">
                 <Col span={24}>
                     <Spin spinning={loading} indicator={CashLoadingIcon}>
                         <Form
                             style={{
                                 width: 'auto',
                             }}
                         >
                             <FormItemWithQRCodeAddon
                                 loadWithCameraOpen={scannerSupported}
                                 disabled={Boolean(filledAddress)}
                                 validateStatus={
                                     sendBchAddressError ? 'error' : ''
                                 }
                                 help={
                                     sendBchAddressError
                                         ? sendBchAddressError
                                         : ''
                                 }
                                 onScan={result =>
                                     handleAddressChange({
                                         target: {
                                             name: 'address',
                                             value: result,
                                         },
                                     })
                                 }
                                 inputProps={{
                                     disabled: Boolean(filledAddress),
                                     placeholder: `${currency.ticker} Address`,
                                     name: 'address',
                                     onChange: e => handleAddressChange(e),
                                     required: true,
                                     value: filledAddress || formData.address,
                                 }}
                             ></FormItemWithQRCodeAddon>
                             <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,
                                 }}
                                 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>
                             )}
                             <ConvertAmount>
                                 {fiatPriceString !== '' && '='}{' '}
                                 {fiatPriceString}
                             </ConvertAmount>
                             <div
                                 style={{
                                     paddingTop: '12px',
                                 }}
                             >
                                 {!balances.totalBalance ||
                                 apiError ||
                                 sendBchAmountError ||
                                 sendBchAddressError ? (
                                     <SecondaryButton>Send</SecondaryButton>
                                 ) : (
                                     <>
                                         {txInfoFromUrl ? (
                                             <PrimaryButton
                                                 onClick={() => showModal()}
                                             >
                                                 Send
                                             </PrimaryButton>
                                         ) : (
                                             <PrimaryButton
                                                 onClick={() => submit()}
                                             >
                                                 Send
                                             </PrimaryButton>
                                         )}
                                     </>
                                 )}
                             </div>
                             {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"
                                 />
                             )}
                             {apiError && (
                                 <>
                                     <CashLoader />
                                     <p
                                         style={{
                                             color: 'red',
                                         }}
                                     >
                                         <b>
                                             An error occured on our end.
                                             Reconnecting...
                                         </b>
                                     </p>
                                 </>
                             )}
                         </Form>
                     </Spin>
                 </Col>
             </Row>
         </>
     );
 };
 
 export default SendBCH;
diff --git a/web/cashtab/src/components/Tokens/Tokens.js b/web/cashtab/src/components/Tokens/Tokens.js
index 9bf437e7c..0081b184d 100644
--- a/web/cashtab/src/components/Tokens/Tokens.js
+++ b/web/cashtab/src/components/Tokens/Tokens.js
@@ -1,173 +1,160 @@
 import React from 'react';
 import { LoadingOutlined } from '@ant-design/icons';
 import { CashLoader } from '@components/Common/CustomIcons';
 import { WalletContext } from '@utils/context';
 import {
     isValidStoredWallet,
     fromSmallestDenomination,
 } from '@utils/cashMethods';
 import CreateTokenForm from '@components/Tokens/CreateTokenForm';
 import { currency } from '@components/Common/Ticker.js';
 import TokenList from '@components/Wallet/TokenList';
 import useBCH from '@hooks/useBCH';
 import { BalanceHeader } from '@components/Common/BalanceHeader';
+import { BalanceHeaderFiat } from '@components/Common/BalanceHeaderFiat';
 import {
     LoadingCtn,
-    BalanceHeaderFiat,
     ZeroBalanceHeader,
     AlertMsg,
 } from '@components/Common/Atoms';
 
 const Tokens = ({ jestBCH }) => {
     /*
     Dev note
 
     This is the first new page created after the wallet migration to include state in storage
 
     As such, it will only load this type of wallet
 
     If any user is still migrating at this point, this page will display a loading spinner until
     their wallet has updated (ETA within 10 seconds)
 
     Going forward, this approach will be the model for Wallet, Send, and SendToken, as the legacy
     wallet state parameters not stored in the wallet object are deprecated
     */
 
     const {
         loading,
         wallet,
         apiError,
         fiatPrice,
         cashtabSettings,
     } = React.useContext(WalletContext);
 
     // If wallet is unmigrated, do not show page until it has migrated
     // An invalid wallet will be validated/populated after the next API call, ETA 10s
     let validWallet = isValidStoredWallet(wallet);
 
     // Get wallet state variables
     let balances, tokens;
     if (validWallet) {
         balances = wallet.state.balances;
         tokens = wallet.state.tokens;
     }
 
     const { getBCH, getRestUrl, createToken } = useBCH();
 
     // Support using locally installed bchjs for unit tests
     const BCH = jestBCH ? jestBCH : getBCH();
     return (
         <>
             {loading || !validWallet ? (
                 <LoadingCtn>
                     <LoadingOutlined />
                 </LoadingCtn>
             ) : (
                 <>
                     {!balances.totalBalance ? (
                         <>
                             <ZeroBalanceHeader>
                                 You need some {currency.ticker} in your wallet
                                 to create tokens.
                             </ZeroBalanceHeader>
                             <BalanceHeader
                                 balance={0}
                                 ticker={currency.ticker}
                             ></BalanceHeader>
                         </>
                     ) : (
                         <>
                             <BalanceHeader
                                 balance={balances.totalBalance}
                                 ticker={currency.ticker}
                             ></BalanceHeader>
                             {fiatPrice !== null &&
                                 !isNaN(balances.totalBalance) && (
-                                    <BalanceHeaderFiat>
-                                        {cashtabSettings
-                                            ? `${
-                                                  currency.fiatCurrencies[
-                                                      cashtabSettings
-                                                          .fiatCurrency
-                                                  ].symbol
-                                              } `
-                                            : '$ '}
-                                        {(
-                                            balances.totalBalance * fiatPrice
-                                        ).toFixed(2)}{' '}
-                                        {cashtabSettings
-                                            ? `${currency.fiatCurrencies[
-                                                  cashtabSettings.fiatCurrency
-                                              ].slug.toUpperCase()} `
-                                            : 'USD'}
-                                    </BalanceHeaderFiat>
+                                    <BalanceHeaderFiat
+                                        balance={balances.totalBalance}
+                                        settings={cashtabSettings}
+                                        fiatPrice={fiatPrice}
+                                    />
                                 )}
                         </>
                     )}
                     {apiError && (
                         <>
                             <p
                                 style={{
                                     color: 'red',
                                 }}
                             >
                                 <b>An error occurred on our end.</b>
                                 <br></br> Re-establishing connection...
                             </p>
                             <CashLoader />
                         </>
                     )}
                     <CreateTokenForm
                         BCH={BCH}
                         getRestUrl={getRestUrl}
                         createToken={createToken}
                         disabled={
                             balances.totalBalanceInSatoshis < currency.dustSats
                         }
                     />
                     {balances.totalBalanceInSatoshis < currency.dustSats && (
                         <AlertMsg>
                             You need at least{' '}
                             {fromSmallestDenomination(
                                 currency.dustSats,
                             ).toString()}{' '}
                             {currency.ticker} (
                             {cashtabSettings
                                 ? `${
                                       currency.fiatCurrencies[
                                           cashtabSettings.fiatCurrency
                                       ].symbol
                                   } `
                                 : '$ '}
                             {(
                                 fromSmallestDenomination(
                                     currency.dustSats,
                                 ).toString() * fiatPrice
                             ).toFixed(4)}{' '}
                             {cashtabSettings
                                 ? `${currency.fiatCurrencies[
                                       cashtabSettings.fiatCurrency
                                   ].slug.toUpperCase()} `
                                 : 'USD'}
                             ) to create a token
                         </AlertMsg>
                     )}
 
                     {tokens && tokens.length > 0 ? (
                         <>
                             <TokenList
                                 wallet={wallet}
                                 tokens={tokens}
                                 jestBCH={false}
                             />
                         </>
                     ) : (
                         <>No {currency.tokenTicker} tokens in this wallet</>
                     )}
                 </>
             )}
         </>
     );
 };
 
 export default Tokens;
diff --git a/web/cashtab/src/components/Wallet/Wallet.js b/web/cashtab/src/components/Wallet/Wallet.js
index 049e865c2..0dfbc0ab7 100644
--- a/web/cashtab/src/components/Wallet/Wallet.js
+++ b/web/cashtab/src/components/Wallet/Wallet.js
@@ -1,417 +1,404 @@
 import React from 'react';
 import styled from 'styled-components';
 import { Switch } from 'antd';
 import { LinkOutlined, LoadingOutlined } from '@ant-design/icons';
 import { WalletContext } from '@utils/context';
 import { OnBoarding } from '@components/OnBoarding/OnBoarding';
 import { QRCode } from '@components/Common/QRCode';
 import { currency } from '@components/Common/Ticker.js';
 import { Link } from 'react-router-dom';
 import TokenList from './TokenList';
 import TxHistory from './TxHistory';
 import { CashLoader } from '@components/Common/CustomIcons';
 import { BalanceHeader } from '@components/Common/BalanceHeader';
-import {
-    LoadingCtn,
-    BalanceHeaderFiat,
-    ZeroBalanceHeader,
-} from '@components/Common/Atoms';
+import { BalanceHeaderFiat } from '@components/Common/BalanceHeaderFiat';
+import { LoadingCtn, ZeroBalanceHeader } from '@components/Common/Atoms';
 
 export const Tabs = styled.div`
     margin: auto;
     margin-bottom: 12px;
     display: inline-block;
     text-align: center;
 `;
 export const TabLabel = styled.button`
     :focus,
     :active {
         outline: none;
     }
 
     border: none;
     background: none;
     font-size: 20px;
     cursor: pointer;
 
     @media (max-width: 400px) {
         font-size: 16px;
     }
 
     ${({ active, ...props }) =>
         active &&
         `    
         color: ${props.theme.primary};       
   `}
 `;
 export const TabLine = styled.div`
     margin: auto;
     transition: margin-left 0.5s ease-in-out, width 0.5s 0.1s;
     height: 4px;
     border-radius: 5px;
     background-color: ${props => props.theme.primary};
     pointer-events: none;
 
     margin-left: 72%;
     width: 28%;
 
     ${({ left, ...props }) =>
         left &&
         `
         margin-left: 1%
         width: 69%;
   `}
 `;
 export const TabPane = styled.div`
     ${({ active }) =>
         !active &&
         `    
         display: none;
   `}
 `;
 
 export const SwitchBtnCtn = styled.div`
     display: flex;
     align-items: center;
     justify-content: center;
     align-content: space-between;
     margin-bottom: 15px;
     .nonactiveBtn {
         color: ${props => props.theme.wallet.text.secondary};
         background: ${props =>
             props.theme.wallet.switch.inactive.background} !important;
         box-shadow: none !important;
     }
     .slpActive {
         background: ${props =>
             props.theme.wallet.switch.activeToken.background} !important;
         box-shadow: ${props =>
             props.theme.wallet.switch.activeToken.shadow} !important;
     }
 `;
 
 export const SwitchBtn = styled.div`
     font-weight: bold;
     display: inline-block;
     cursor: pointer;
     color: ${props => props.theme.contrast};
     font-size: 14px;
     padding: 6px 0;
     width: 100px;
     margin: 0 1px;
     text-decoration: none;
     background: ${props => props.theme.primary};
     box-shadow: ${props => props.theme.wallet.switch.activeCash.shadow};
     user-select: none;
     :first-child {
         border-radius: 100px 0 0 100px;
     }
     :nth-child(2) {
         border-radius: 0 100px 100px 0;
     }
 `;
 
 export const Links = styled(Link)`
     color: ${props => props.theme.wallet.text.secondary};
     width: 100%;
     font-size: 16px;
     margin: 10px 0 20px 0;
     border: 1px solid ${props => props.theme.wallet.text.secondary};
     padding: 14px 0;
     display: inline-block;
     border-radius: 3px;
     transition: all 200ms ease-in-out;
     svg {
         fill: ${props => props.theme.wallet.text.secondary};
     }
     :hover {
         color: ${props => props.theme.primary};
         border-color: ${props => props.theme.primary};
         svg {
             fill: ${props => props.theme.primary};
         }
     }
     @media (max-width: 768px) {
         padding: 10px 0;
         font-size: 14px;
     }
 `;
 
 export const ExternalLink = styled.a`
     color: ${props => props.theme.wallet.text.secondary};
     width: 100%;
     font-size: 16px;
     margin: 0 0 20px 0;
     border: 1px solid ${props => props.theme.wallet.text.secondary};
     padding: 14px 0;
     display: inline-block;
     border-radius: 3px;
     transition: all 200ms ease-in-out;
     svg {
         fill: ${props => props.theme.wallet.text.secondary};
         transition: all 200ms ease-in-out;
     }
     :hover {
         color: ${props => props.theme.primary};
         border-color: ${props => props.theme.primary};
         svg {
             fill: ${props => props.theme.primary};
         }
     }
     @media (max-width: 768px) {
         padding: 10px 0;
         font-size: 14px;
     }
 `;
 
 export const AddrSwitchContainer = styled.div`
     text-align: center;
     padding: 6px 0 12px 0;
 `;
 
 export const AddrPrefixSwitch = styled(Switch)``;
 
 export const AddrPrefixLabel = styled.span`
     color: ${props => props.theme.wallet.text.primary}
     margin-right: 4px;
 `;
 
 const WalletInfo = () => {
     const ContextValue = React.useContext(WalletContext);
     const { wallet, fiatPrice, apiError, cashtabSettings } = ContextValue;
     let balances;
     let parsedTxHistory;
     let tokens;
     // use parameters from wallet.state object and not legacy separate parameters, if they are in state
     // handle 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 paramsInWalletState = wallet.state ? Object.keys(wallet.state) : [];
     // If wallet.state includes balances and parsedTxHistory params, use these
     // These are saved in indexedDb in the latest version of the app, hence accessible more quickly
     if (
         paramsInWalletState.includes('balances') &&
         paramsInWalletState.includes('parsedTxHistory') &&
         paramsInWalletState.includes('tokens')
     ) {
         balances = wallet.state.balances;
         parsedTxHistory = wallet.state.parsedTxHistory;
         tokens = wallet.state.tokens;
     } else {
         // If balances and parsedTxHistory are not in the wallet.state object, load them from Context
         // This is how the app used to work
         balances = ContextValue.balances;
         parsedTxHistory = ContextValue.parsedTxHistory;
         tokens = ContextValue.tokens;
     }
     const [address, setAddress] = React.useState('cashAddress');
     const [addressPrefix, setAddressPrefix] = React.useState('eCash');
     const [activeTab, setActiveTab] = React.useState('txHistory');
 
     const hasHistory = parsedTxHistory && parsedTxHistory.length > 0;
 
     const handleChangeAddress = () => {
         setAddress(address === 'cashAddress' ? 'slpAddress' : 'cashAddress');
     };
 
     const onAddressPrefixChange = () => {
         setAddressPrefix(addressPrefix === 'eCash' ? 'bitcoincash' : 'eCash');
     };
 
     return (
         <>
             {!balances.totalBalance && !apiError && !hasHistory ? (
                 <>
                     <ZeroBalanceHeader>
                         <span role="img" aria-label="party emoji">
                             🎉
                         </span>
                         Congratulations on your new wallet!{' '}
                         <span role="img" aria-label="party emoji">
                             🎉
                         </span>
                         <br /> Start using the wallet immediately to receive{' '}
                         {currency.ticker} payments, or load it up with{' '}
                         {currency.ticker} to send to others
                     </ZeroBalanceHeader>
                     <BalanceHeader
                         balance={0}
                         ticker={currency.ticker}
                     ></BalanceHeader>
                 </>
             ) : (
                 <>
                     <BalanceHeader
                         balance={balances.totalBalance}
                         ticker={currency.ticker}
                     ></BalanceHeader>
                     {fiatPrice !== null && !isNaN(balances.totalBalance) && (
-                        <BalanceHeaderFiat>
-                            {cashtabSettings
-                                ? `${
-                                      currency.fiatCurrencies[
-                                          cashtabSettings.fiatCurrency
-                                      ].symbol
-                                  } `
-                                : '$ '}
-                            {(balances.totalBalance * fiatPrice).toFixed(2)}{' '}
-                            {cashtabSettings
-                                ? `${currency.fiatCurrencies[
-                                      cashtabSettings.fiatCurrency
-                                  ].slug.toUpperCase()} `
-                                : 'USD'}
-                        </BalanceHeaderFiat>
+                        <BalanceHeaderFiat
+                            balance={balances.totalBalance}
+                            settings={cashtabSettings}
+                            fiatPrice={fiatPrice}
+                        />
                     )}
                 </>
             )}
             {apiError && (
                 <>
                     <p style={{ color: 'red' }}>
                         <b>An error occurred on our end.</b>
                         <br></br> Re-establishing connection...
                     </p>
                     <CashLoader />
                 </>
             )}
 
             {wallet && ((wallet.Path245 && wallet.Path145) || wallet.Path1899) && (
                 <>
                     {wallet.Path1899 ? (
                         <>
                             <QRCode
                                 id="borderedQRCode"
                                 address={
                                     address === 'slpAddress'
                                         ? wallet.Path1899.slpAddress
                                         : wallet.Path1899.cashAddress
                                 }
                                 legacy={addressPrefix === 'bitcoincash'}
                             />
                             <AddrSwitchContainer>
                                 <AddrPrefixLabel>
                                     Address Format:
                                 </AddrPrefixLabel>
                                 <AddrPrefixSwitch
                                     id="addrSwitch"
                                     defaultChecked
                                     checkedChildren={
                                         address === 'slpAddress'
                                             ? 'eToken'
                                             : 'eCash'
                                     }
                                     unCheckedChildren={
                                         address === 'slpAddress'
                                             ? 'simpleledger'
                                             : 'bitcoincash'
                                     }
                                     onChange={onAddressPrefixChange}
                                 />
                             </AddrSwitchContainer>
                         </>
                     ) : (
                         <>
                             <AddrPrefixSwitch
                                 defaultChecked
                                 checkedChildren="eCash"
                                 unCheckedChildren="Legacy"
                                 onChange={onAddressPrefixChange}
                             />
                             <QRCode
                                 id="borderedQRCode"
                                 address={
                                     address === 'slpAddress'
                                         ? wallet.Path245.slpAddress
                                         : wallet.Path145.cashAddress
                                 }
                             />
                         </>
                     )}
                 </>
             )}
 
             <SwitchBtnCtn>
                 <SwitchBtn
                     onClick={() => handleChangeAddress()}
                     className={
                         address !== 'cashAddress' ? 'nonactiveBtn' : null
                     }
                 >
                     {currency.ticker}
                 </SwitchBtn>
                 <SwitchBtn
                     onClick={() => handleChangeAddress()}
                     className={
                         address === 'cashAddress' ? 'nonactiveBtn' : 'slpActive'
                     }
                 >
                     {currency.tokenTicker}
                 </SwitchBtn>
             </SwitchBtnCtn>
             {hasHistory && parsedTxHistory && (
                 <>
                     <Tabs>
                         <TabLabel
                             active={activeTab === 'txHistory'}
                             onClick={() => setActiveTab('txHistory')}
                         >
                             Transaction History
                         </TabLabel>
                         <TabLabel
                             active={activeTab === 'tokens'}
                             onClick={() => setActiveTab('tokens')}
                         >
                             Tokens
                         </TabLabel>
                         <TabLine left={activeTab === 'txHistory'} />
                     </Tabs>
 
                     <TabPane active={activeTab === 'txHistory'}>
                         <TxHistory
                             txs={parsedTxHistory}
                             fiatPrice={fiatPrice}
                             fiatCurrency={
                                 cashtabSettings && cashtabSettings.fiatCurrency
                                     ? cashtabSettings.fiatCurrency
                                     : 'usd'
                             }
                         />
                     </TabPane>
                     <TabPane active={activeTab === 'tokens'}>
                         {tokens && tokens.length > 0 ? (
                             <TokenList
                                 wallet={wallet}
                                 tokens={tokens}
                                 jestBCH={false}
                             />
                         ) : (
                             <p>
                                 Tokens sent to your {currency.tokenTicker}{' '}
                                 address will appear here
                             </p>
                         )}
                     </TabPane>
                 </>
             )}
         </>
     );
 };
 
 const Wallet = () => {
     const ContextValue = React.useContext(WalletContext);
     const { wallet, loading } = ContextValue;
 
     return (
         <>
             {loading ? (
                 <LoadingCtn>
                     <LoadingOutlined />
                 </LoadingCtn>
             ) : (
                 <>{wallet.Path1899 ? <WalletInfo /> : <OnBoarding />}</>
             )}
         </>
     );
 };
 
 export default Wallet;