diff --git a/app/actions/TrezorActions.js b/app/actions/TrezorActions.js
index b43a067f00..23b365ad5c 100644
--- a/app/actions/TrezorActions.js
+++ b/app/actions/TrezorActions.js
@@ -8,6 +8,7 @@ import {
   accountPath,
   addressPath
 } from "helpers/trezor";
+import { putUint16, rawHashToHex } from "helpers/byteActions";
 import { publishTransactionAttempt } from "./ControlActions";
 import * as cfgConstants from "constants/config";
 import {
@@ -24,6 +25,7 @@ import {
   SIGNMESSAGE_SUCCESS
 } from "./ControlActions";
 import { getAmountFromTxInputs, getTxFromInputs } from "./TransactionActions";
+import { blake256 } from "walletCrypto";
 
 const session = require("trezor-connect").default;
 const {
@@ -40,6 +42,15 @@ const NOBACKUP = "no-backup";
 const TRANSPORT_ERROR = "transport-error";
 const TRANSPORT_START = "transport-start";
 const BOOTLOADER_MODE = "bootloader";
+const testVotingKey = "PtWTXsGfk2YeqcmrRty77EsynNBtxWLLbsVEeTS8bKAGFoYF3qTNq";
+const testVotingAddr = "TsmfmUitQApgnNxQypdGd2x36djCCpDpERU";
+const SERTYPE_NOWITNESS = 1;
+const OP_SSGEN_STR = "bb";
+const OP_SSRTX_STR = "bc";
+const OP_TGEN_STR = "c3";
+const STAKE_REVOCATION = "SSRTX";
+const STAKE_GENERATION = "SSGen";
+const TREASURY_GENERATION = "TGen";
 
 let setListeners = false;
 
@@ -441,8 +452,38 @@ const checkTrezorIsDcrwallet = () => async (dispatch, getState) => {
   if (addrValidResp.index !== 0) throw "Wallet replied with wrong index.";
 };
 
+// setStakeInputTypes adds a field to input that denotes stake spends. SSRTX
+function setStakeInputTypes(inputs, refTxs) {
+  const refs = {};
+  refTxs.forEach((ref) => (refs[ref.hash] = ref.bin_outputs));
+  // Search reference txs for the script that will be signed and determine if
+  // spending a stake output by comparing the first opcode to SSRTX or SSGEN
+  // opcodes.
+  for (let i = 0; i < inputs.length; i++) {
+    const input = inputs[i];
+    const bin_outputs = refs[input.prev_hash];
+    if (!bin_outputs) continue;
+    let s = bin_outputs[input.prev_index].script_pubkey;
+    if (s.length < 2) {
+      continue;
+    }
+    s = s.slice(0, 2);
+    switch (s) {
+      case OP_SSGEN_STR:
+        input.decred_staking_spend = STAKE_GENERATION;
+        break;
+      case OP_SSRTX_STR:
+        input.decred_staking_spend = STAKE_REVOCATION;
+        break;
+      case OP_TGEN_STR:
+        input.decred_staking_spend = TREASURY_GENERATION;
+        break;
+    }
+  }
+}
+
 export const signTransactionAttemptTrezor =
-  (rawUnsigTx, constructTxResponse) => async (dispatch, getState) => {
+  (rawUnsigTx, changeIndexes) => async (dispatch, getState) => {
     dispatch({ type: SIGNTX_ATTEMPT });
 
     const {
@@ -451,11 +492,9 @@ export const signTransactionAttemptTrezor =
     } = getState();
     const chainParams = selectors.chainParams(getState());
 
-    debug && console.log("construct tx response", constructTxResponse);
+    debug && console.log("construct tx response", rawUnsigTx);
 
     try {
-      const changeIndex = constructTxResponse.changeIndex;
-
       const decodedUnsigTxResp = wallet.decodeRawTransaction(
         Buffer.from(rawUnsigTx, "hex"),
         chainParams
@@ -472,13 +511,17 @@ export const signTransactionAttemptTrezor =
         chainParams,
         txCompletedInputs,
         inputTxs,
-        changeIndex
+        changeIndexes
       );
 
       const refTxs = await Promise.all(
         inputTxs.map((inpTx) => walletTxToRefTx(walletService, inpTx))
       );
 
+      // Determine if this is paying from a stakegen or revocation, which are
+      // special cases.
+      setStakeInputTypes(inputs, refTxs);
+
       const payload = await deviceRun(dispatch, getState, async () => {
         await dispatch(checkTrezorIsDcrwallet());
 
@@ -494,6 +537,7 @@ export const signTransactionAttemptTrezor =
 
       dispatch({ type: SIGNTX_SUCCESS });
       dispatch(publishTransactionAttempt(hexToBytes(signedRaw)));
+      return signedRaw;
     } catch (error) {
       dispatch({ error, type: SIGNTX_FAILED });
     }
@@ -546,6 +590,7 @@ export const signMessageAttemptTrezor =
         getSignMessageSignature: payload.signature,
         type: SIGNMESSAGE_SUCCESS
       });
+      return payload.signature;
     } catch (error) {
       dispatch({ error, type: SIGNMESSAGE_FAILED });
     }
@@ -960,3 +1005,350 @@ export const getWalletCreationMasterPubKey =
       throw error;
     }
   };
+
+export const TRZ_PURCHASETICKET_ATTEMPT = "TRZ_PURCHASETICKET_ATTEMPT";
+export const TRZ_PURCHASETICKET_FAILED = "TRZ_PURCHASETICKET_FAILED";
+export const TRZ_PURCHASETICKET_SUCCESS = "TRZ_PURCHASETICKET_SUCCESS";
+
+// ticketInOuts creates inputs and outputs for use with a trezor signature
+// request of a ticket.
+async function ticketInsOuts(
+  getState,
+  decodedTicket,
+  decodedInp,
+  refTxs,
+  votingAddr
+) {
+  const {
+    grpc: { walletService }
+  } = getState();
+  const chainParams = selectors.chainParams(getState());
+  const ticketOutN = decodedTicket.inputs[0].outputIndex;
+  const inAddr = decodedInp.outputs[ticketOutN].decodedScript.address;
+  let addrValidResp = await wallet.validateAddress(walletService, inAddr);
+  const inAddr_n = addressPath(
+    addrValidResp.index,
+    1,
+    WALLET_ACCOUNT,
+    chainParams.HDCoinType
+  );
+  const commitAddr = decodedTicket.outputs[1].decodedScript.address;
+  addrValidResp = await wallet.validateAddress(walletService, commitAddr);
+  const commitAddr_n = addressPath(
+    addrValidResp.index,
+    1,
+    WALLET_ACCOUNT,
+    chainParams.HDCoinType
+  );
+  const inputAmt = decodedTicket.inputs[0].valueIn.toString();
+  const ticketInput = {
+    address_n: inAddr_n,
+    prev_hash: decodedTicket.inputs[0].prevTxId,
+    prev_index: ticketOutN,
+    amount: inputAmt
+  };
+  const sstxsubmission = {
+    script_type: "PAYTOADDRESS",
+    address: votingAddr,
+    amount: decodedTicket.outputs[0].value.toString()
+  };
+  const ticketsstxcommitment = {
+    script_type: "PAYTOADDRESS",
+    address_n: commitAddr_n,
+    amount: inputAmt
+  };
+  const ticketsstxchange = {
+    script_type: "PAYTOADDRESS",
+    address: decodedTicket.outputs[2].decodedScript.address,
+    amount: "0"
+  };
+  const inputs = [ticketInput];
+  const outputs = [sstxsubmission, ticketsstxcommitment, ticketsstxchange];
+  return { inputs, outputs };
+}
+
+export const purchaseTicketsAttempt =
+  (accountNum, numTickets, vsp) => async (dispatch, getState) => {
+    dispatch({ type: TRZ_PURCHASETICKET_ATTEMPT });
+
+    if (noDevice(getState)) {
+      dispatch({
+        error: "Device not connected",
+        type: TRZ_PURCHASETICKET_FAILED
+      });
+      return;
+    }
+
+    const {
+      grpc: { walletService }
+    } = getState();
+    const chainParams = selectors.chainParams(getState());
+
+    try {
+      // TODO: Enable on mainnet. The following todo on crypto magic must be
+      // implemented first. Revocation logic and a re-fee payment method must be
+      // added.
+      if (chainParams.trezorCoinName != "Decred Testnet")
+        throw "can only be used on testnet";
+      // TODO: Fill this with deterministic crypto magic.
+      const votingKey = testVotingKey;
+      const votingAddr = testVotingAddr;
+      const res = await wallet.purchaseTickets(
+        walletService,
+        accountNum,
+        numTickets,
+        false,
+        vsp,
+        {}
+      );
+      const splitTx = res.splitTx;
+      const decodedInp = await wallet.decodeTransactionLocal(
+        splitTx,
+        chainParams
+      );
+      const changeIndexes = [];
+      for (let i = 0; i < decodedInp.outputs.length; i++) {
+        changeIndexes.push(i);
+      }
+      const signedSplitTx = await signTransactionAttemptTrezor(
+        splitTx,
+        changeIndexes
+      )(dispatch, getState);
+      if (!signedSplitTx) throw "failed to sign splittx";
+      const refTxs = await walletTxToRefTx(walletService, decodedInp);
+
+      for (const ticket of res.ticketsList) {
+        const decodedTicket = await wallet.decodeTransactionLocal(
+          ticket,
+          chainParams
+        );
+        refTxs.hash = decodedTicket.inputs[0].prevTxId;
+        const { inputs, outputs } = await ticketInsOuts(
+          getState,
+          decodedTicket,
+          decodedInp,
+          refTxs,
+          votingAddr
+        );
+        const payload = await deviceRun(dispatch, getState, async () => {
+          const res = await session.signTransaction({
+            coin: chainParams.trezorCoinName,
+            inputs: inputs,
+            outputs: outputs,
+            refTxs: [refTxs],
+            decredStakingTicket: true
+          });
+          return res.payload;
+        });
+
+        const signedRaw = payload.serializedTx;
+        dispatch(publishTransactionAttempt(hexToBytes(signedRaw)));
+        // Pay fee.
+        console.log(
+          "waiting 5 seconds for the ticket to propogate throughout the network"
+        );
+        await new Promise((r) => setTimeout(r, 5000));
+        const host = "https://" + vsp.host;
+        await payVSPFee(
+          host,
+          signedRaw,
+          signedSplitTx,
+          votingKey,
+          accountNum.value,
+          true,
+          dispatch,
+          getState
+        );
+      }
+      dispatch({ type: TRZ_PURCHASETICKET_SUCCESS });
+    } catch (error) {
+      dispatch({ error, type: TRZ_PURCHASETICKET_FAILED });
+    }
+  };
+
+// payVSPFee attempts to contact a vsp about a ticket and pay the fee if
+// necessary. It will search transacitons for a suitable fee transaction before
+// attempting to pay if newTicket is false.
+async function payVSPFee(
+  host,
+  txHex,
+  parentTxHex,
+  votingKey,
+  accountNum,
+  newTicket,
+  dispatch,
+  getState
+) {
+  const {
+    grpc: { walletService }
+  } = getState();
+  // Gather information about the ticket.
+  const chainParams = selectors.chainParams(getState());
+  const txBytes = hexToBytes(txHex);
+  const decodedTicket = await wallet.decodeTransactionLocal(
+    txBytes,
+    chainParams
+  );
+  const commitmentAddr = decodedTicket.outputs[1].decodedScript.address;
+
+  const prefix = txBytes.slice(0, decodedTicket.prefixOffset);
+  prefix.set(putUint16(SERTYPE_NOWITNESS), 2);
+  const txid = rawHashToHex(blake256(prefix));
+
+  // Request fee info from the vspd.
+  let req = {
+    timestamp: +new Date(),
+    tickethash: txid,
+    tickethex: txHex,
+    parenthex: parentTxHex
+  };
+  let jsonStr = JSON.stringify(req);
+  let sig = await signMessageAttemptTrezor(commitmentAddr, jsonStr)(
+    dispatch,
+    getState
+  );
+  if (!sig) throw "unable to sign fee address message";
+  wallet.allowVSPHost(host);
+  // This will throw becuase of http.status 400 if already paid.
+  // TODO: Investigate whether other fee payment errors will cause this to
+  // throw. Other fee payment errors should continue, and we should only stop
+  // here if already paid or the ticket is not found by the vsp.
+  let res = null;
+  try {
+    res = await wallet.getVSPFeeAddress({ host, sig, req });
+  } catch (error) {
+    if (error.response && error.response.data && error.response.data.message) {
+      // NOTE: already paid is error.response.data.code == 3
+      throw error.response.data.message;
+    }
+    throw error;
+  }
+  const payAddr = res.data.feeaddress;
+  const fee = res.data.feeamount;
+
+  // Find the fee transaction or make a new one.
+  let feeTx = null;
+  // Do not search for the fee tx of a new ticket.
+  if (!newTicket) {
+    feeTx = await findFeeTx(payAddr, fee, dispatch, getState);
+  }
+  if (!feeTx) {
+    const outputs = [{ destination: payAddr, amount: fee }];
+    const txResp = await wallet.constructTransaction(
+      walletService,
+      accountNum,
+      0,
+      outputs
+    );
+    const unsignedTx = txResp.unsignedTransaction;
+    const decodedInp = await wallet.decodeTransactionLocal(
+      unsignedTx,
+      chainParams
+    );
+    let changeIndex = 0;
+    for (const out of decodedInp.outputs) {
+      const addr = out.decodedScript.address;
+      const addrValidResp = await wallet.validateAddress(walletService, addr);
+      if (addrValidResp.isInternal) {
+        break;
+      }
+      changeIndex++;
+    }
+    const success = await signTransactionAttemptTrezor(unsignedTx, [
+      changeIndex
+    ])(dispatch, getState);
+    if (!success) throw "unable to sign fee tx";
+    for (let i = 0; i < 5; i++) {
+      console.log(
+        "waiting 5 seconds for the fee tx to propogate throughout the network"
+      );
+      await new Promise((r) => setTimeout(r, 5000));
+      feeTx = await findFeeTx(payAddr, fee, dispatch, getState);
+      if (feeTx) break;
+    }
+    if (!feeTx) throw "unable to find fee tx " + rawToHex(unsignedTx);
+  }
+
+  // Send ticket fee data and voting chioces back to the vsp.
+  const {
+    grpc: { votingService }
+  } = getState();
+  const voteChoicesRes = await wallet.getVoteChoices(votingService);
+  const voteChoices = {};
+  for (const choice of voteChoicesRes.choicesList) {
+    voteChoices[choice.agendaId] = choice.choiceId;
+  }
+  req = {
+    timestamp: +new Date(),
+    tickethash: txid,
+    feetx: feeTx,
+    votingkey: votingKey,
+    votechoices: voteChoices
+  };
+  jsonStr = JSON.stringify(req);
+  sig = await signMessageAttemptTrezor(commitmentAddr, jsonStr)(
+    dispatch,
+    getState
+  );
+  if (!sig) throw "unable to sign fee tx message";
+  wallet.allowVSPHost(host);
+  await wallet.payVSPFee({ host, sig, req });
+}
+
+// findFeeTx searches unmined and recent transactions for a tx that pays to
+// FeeAddr of the amount feeAmt. It stops searching below a resonable depth for
+// a ticket.
+async function findFeeTx(feeAddr, feeAmt, dispatch, getState) {
+  const {
+    grpc: { walletService }
+  } = getState();
+  const chainParams = selectors.chainParams(getState());
+  // findFee looks for a transaction the paid out exactl feeAmt and has an
+  // output address that matches feeAddr.
+  const findFee = async (res) => {
+    for (const credit of res) {
+      if (credit.txType != "sent" && credit.txType != "regular") continue;
+      const sentAmt = Math.abs(credit.amount + credit.fee);
+      if (sentAmt == feeAmt) {
+        const tx = await wallet.decodeTransactionLocal(
+          hexToBytes(credit.rawTx),
+          chainParams
+        );
+        if (
+          tx.outputs.find(
+            (e) => e.decodedScript && e.decodedScript.address == feeAddr
+          )
+        )
+          return credit.rawTx;
+      }
+    }
+    return null;
+  };
+  // First search mempool.
+  const { unmined } = await wallet.getTransactions(walletService, -1, -1, 0);
+  const feeTx = await findFee(unmined);
+  if (feeTx) return feeTx;
+  // TODO: Take these constants from the chainparams.
+  const ticketMaturity = 256;
+  const ticketExpiry = 40960;
+  const { currentBlockHeight } = getState().grpc;
+  let start = currentBlockHeight - 100;
+  let end = currentBlockHeight;
+  const maxAge = currentBlockHeight - (ticketMaturity + ticketExpiry);
+  const blockIncrement = 100;
+  // Search mined txs in reverse order up until a ticket must have expired on
+  // mainnet.
+  while (start > maxAge) {
+    const { mined } = await wallet.getTransactions(
+      walletService,
+      start,
+      end,
+      0
+    );
+    start -= blockIncrement;
+    end -= blockIncrement;
+    const feeTx = await findFee(mined);
+    if (feeTx) return feeTx;
+  }
+  return null;
+}
diff --git a/app/components/SideBar/AccountsList/AccountsList.jsx b/app/components/SideBar/AccountsList/AccountsList.jsx
index 84802e5c17..b03ddbe892 100644
--- a/app/components/SideBar/AccountsList/AccountsList.jsx
+++ b/app/components/SideBar/AccountsList/AccountsList.jsx
@@ -20,7 +20,8 @@ const AccountsList = ({
       className={classNames(
         style.extended,
         isShowingAccounts && style.showingAccounts
-      )}>
+      )}
+    >
       <div className={style.extendedBottom} ref={accountsListRef}>
         {balances.map(
           ({ hidden, total, accountName, accountNumber }) =>
@@ -32,7 +33,8 @@ const AccountsList = ({
                   isMixed(accountNumber) && style.mixed,
                   isChange(accountNumber) && style.unmixed
                 )}
-                key={accountName}>
+                key={accountName}
+              >
                 <div className={style.accountName}>
                   {accountName === "default" ? (
                     <T id="sidebar.accounts.name.default" m="Primary Account" />
diff --git a/app/components/SideBar/Logo/Logo.jsx b/app/components/SideBar/Logo/Logo.jsx
index b4ccecd89d..7d922052b5 100644
--- a/app/components/SideBar/Logo/Logo.jsx
+++ b/app/components/SideBar/Logo/Logo.jsx
@@ -20,7 +20,8 @@ const Logo = React.memo(
               id="sidebar.isWatchingOnlyTooltip"
               m="This is a watch-only wallet with limited functionality."
             />
-          }>
+          }
+        >
           <div className={styles.watchOnlyIcon} />
         </Tooltip>
       )}
@@ -46,7 +47,8 @@ const Logo = React.memo(
               the background: Privacy Mixer, Ticket Auto Buyer, Purchase Ticket
               Attempt`}
             />
-          }>
+          }
+        >
           <div className={styles.mixerOn} />
         </Tooltip>
       )}
diff --git a/app/components/SideBar/MenuBottom/MenuBottomExpanded.jsx b/app/components/SideBar/MenuBottom/MenuBottomExpanded.jsx
index 1ad26f939d..2e93d5eff2 100644
--- a/app/components/SideBar/MenuBottom/MenuBottomExpanded.jsx
+++ b/app/components/SideBar/MenuBottom/MenuBottomExpanded.jsx
@@ -26,12 +26,14 @@ const MenuBarExpanded = ({
       className={styles.short}
       onMouseEnter={rescanRequest ? null : onShowAccounts}
       onMouseLeave={rescanRequest ? null : onHideAccounts}
-      onWheel={onAccountsListWheel}>
+      onWheel={onAccountsListWheel}
+    >
       <div
         className={classNames(
           styles.shortSeparator,
           isShowingAccounts && styles.showAccounts
-        )}></div>
+        )}
+      ></div>
       <div className={styles.shortName}>
         <T id="sidebar.totalBalance" m="Total Balance" />:
       </div>
diff --git a/app/components/SideBar/MenuBottom/SettingsIconLink/SettingsIconLink.jsx b/app/components/SideBar/MenuBottom/SettingsIconLink/SettingsIconLink.jsx
index dd91a87f66..22e513b2c0 100644
--- a/app/components/SideBar/MenuBottom/SettingsIconLink/SettingsIconLink.jsx
+++ b/app/components/SideBar/MenuBottom/SettingsIconLink/SettingsIconLink.jsx
@@ -6,7 +6,8 @@ import styles from "./SettingsIconLink.module.css";
 const SettingsIconLink = ({ className }) => (
   <Tooltip
     contentClassName={styles.tooltipContent}
-    content={<T id="sidebar.settings" m="Settings" />}>
+    content={<T id="sidebar.settings" m="Settings" />}
+  >
     <Link className={className} to="/settings" aria-label="settings">
       <div className={styles.settingsIcon}></div>
     </Link>
diff --git a/app/components/SideBar/MenuBottom/SpvIcon/SpvIcon.jsx b/app/components/SideBar/MenuBottom/SpvIcon/SpvIcon.jsx
index ac03e408eb..024a18ddb5 100644
--- a/app/components/SideBar/MenuBottom/SpvIcon/SpvIcon.jsx
+++ b/app/components/SideBar/MenuBottom/SpvIcon/SpvIcon.jsx
@@ -12,7 +12,8 @@ const SpvIcon = ({ isSPV }) => (
       ) : (
         <T id="sidebar.spvDisabled" m="SPV disabled" />
       )
-    }>
+    }
+  >
     <div className={classNames(styles.spvIcon, !isSPV && styles.off)} />
   </Tooltip>
 );
diff --git a/app/components/SideBar/MenuLinks/MenuLinks.jsx b/app/components/SideBar/MenuLinks/MenuLinks.jsx
index b755aa4da2..31393a6190 100644
--- a/app/components/SideBar/MenuLinks/MenuLinks.jsx
+++ b/app/components/SideBar/MenuLinks/MenuLinks.jsx
@@ -29,7 +29,8 @@ const MenuLinks = () => {
         "tab-default-background": getThemeProperty(theme, "sidebar-color"),
         "tab-default-color": getThemeProperty(theme, "sidebar-color"),
         "tab-secondary-active-color": getThemeProperty(theme, "sidebar-color")
-      }}>
+      }}
+    >
       <Tabs
         onSelectTab={onSelectTab}
         activeTabIndex={activeTabIndex}
@@ -38,12 +39,14 @@ const MenuLinks = () => {
           styles.tabs,
           expandSideBar && styles.expanded,
           sidebarOnBottom && styles.onBottom
-        )}>
+        )}
+      >
         {menuLinks.map((menuLink, index) => {
           const menuLinkLabel = () => (
             <div
               className={styles.menuContent}
-              data-testid={`menuLinkContent-${menuLink.icon}`}>
+              data-testid={`menuLinkContent-${menuLink.icon}`}
+            >
               <div
                 className={classNames(
                   styles.icon,
@@ -62,7 +65,8 @@ const MenuLinks = () => {
               <Tooltip
                 contentClassName={styles.tooltip}
                 content={menuLink.tooltip ?? menuLink.link}
-                placement={sidebarOnBottom ? "top" : "right"}>
+                placement={sidebarOnBottom ? "top" : "right"}
+              >
                 {menuLinkLabel()}
               </Tooltip>
             );
diff --git a/app/components/SideBar/SideBar.jsx b/app/components/SideBar/SideBar.jsx
index a1b7d83ae7..0567d74177 100644
--- a/app/components/SideBar/SideBar.jsx
+++ b/app/components/SideBar/SideBar.jsx
@@ -43,7 +43,8 @@ const SideBar = () => {
         uiAnimations && style.animated,
         !expandSideBar && style.sidebarReduced,
         !expandSideBar && sidebarOnBottom && style.sidebarOnBottom
-      )}>
+      )}
+    >
       <Logo
         {...{
           isTestNet,
@@ -59,7 +60,8 @@ const SideBar = () => {
         className={classNames(
           style.sidebarMain,
           isShowingAccounts && style.isShowingAccounts
-        )}>
+        )}
+      >
         <MenuLinks />
         <AccountsList
           {...{
diff --git a/app/components/Snackbar/Notification/Message.jsx b/app/components/Snackbar/Notification/Message.jsx
index 08c6538204..3885aefb6c 100644
--- a/app/components/Snackbar/Notification/Message.jsx
+++ b/app/components/Snackbar/Notification/Message.jsx
@@ -26,7 +26,8 @@ const Message = ({
         <button
           aria-label="Close"
           className={style.snackbarCloseButtonTop}
-          onClick={onDismissMessage}>
+          onClick={onDismissMessage}
+        >
           <ProgressRing radius={13} stroke={2} progress={progress} />
         </button>
       )}
diff --git a/app/components/Snackbar/Notification/Transaction.jsx b/app/components/Snackbar/Notification/Transaction.jsx
index 324e4e3239..c74e48778a 100644
--- a/app/components/Snackbar/Notification/Transaction.jsx
+++ b/app/components/Snackbar/Notification/Transaction.jsx
@@ -53,7 +53,8 @@ const Transaction = ({
       <button
         aria-label="Close"
         className={style.snackbarCloseButtonTop}
-        onClick={onDismissMessage}>
+        onClick={onDismissMessage}
+      >
         <ProgressRing radius={13} stroke={2} progress={progress} />
       </button>
     )}
@@ -89,7 +90,8 @@ const Transaction = ({
         <Tooltip content={`${message.txHash}`}>
           <Link
             onClick={onDismissMessage}
-            to={`/transactions/history/${message.txHash}`}>
+            to={`/transactions/history/${message.txHash}`}
+          >
             {message.txHash}
           </Link>
         </Tooltip>
diff --git a/app/components/Snackbar/index.js b/app/components/Snackbar/index.js
index 62bfa0f096..e1470da0e9 100644
--- a/app/components/Snackbar/index.js
+++ b/app/components/Snackbar/index.js
@@ -78,7 +78,8 @@ const Snackbar = () => {
           className={snackbarClasses(message || "")}
           onMouseEnter={clearHideTimer}
           onMouseLeave={enableHideTimer}
-          style={{ bottom: "0px" }}>
+          style={{ bottom: "0px" }}
+        >
           <Notification
             {...{
               topNotification: i === 0,
@@ -143,7 +144,8 @@ const Snackbar = () => {
                   onMouseEnter={clearHideTimer}
                   onMouseLeave={enableHideTimer}
                   style={s.style}
-                  ref={(ref) => animatedNotifRef(s.key, ref)}>
+                  ref={(ref) => animatedNotifRef(s.key, ref)}
+                >
                   <Notification
                     {...{
                       topNotification: i === 0,
diff --git a/app/components/buttons/Button/Button.jsx b/app/components/buttons/Button/Button.jsx
index 1af4bf1b4e..5c516f84d5 100644
--- a/app/components/buttons/Button/Button.jsx
+++ b/app/components/buttons/Button/Button.jsx
@@ -29,7 +29,8 @@ const Button = ({
       onClick={(e) => {
         !disabled && onClick?.(e);
       }}
-      hidden={hidden}>
+      hidden={hidden}
+    >
       {loading ? <SimpleLoading {...{ disabled: disabled }} /> : children}
     </button>
   );
diff --git a/app/components/buttons/CopyToClipboardButton/CopyToClipboardButton.jsx b/app/components/buttons/CopyToClipboardButton/CopyToClipboardButton.jsx
index a7e552fa57..8d00439a68 100644
--- a/app/components/buttons/CopyToClipboardButton/CopyToClipboardButton.jsx
+++ b/app/components/buttons/CopyToClipboardButton/CopyToClipboardButton.jsx
@@ -22,10 +22,8 @@ const CopyToClipboardButton = ({ textToCopy, className }) => {
   return (
     <div className={classNames(styles.box, className && className)}>
       <div
-        className={classNames(
-          styles.success,
-          isSuccessHidden && styles.hidden
-        )}>
+        className={classNames(styles.success, isSuccessHidden && styles.hidden)}
+      >
         <T id="clipboard.copied" m="Copied" />
       </div>
       <ButtonIcon
diff --git a/app/components/buttons/EnableExternalRequestButton.jsx b/app/components/buttons/EnableExternalRequestButton.jsx
index 0f6891f576..22f4a6408b 100644
--- a/app/components/buttons/EnableExternalRequestButton.jsx
+++ b/app/components/buttons/EnableExternalRequestButton.jsx
@@ -7,7 +7,8 @@ const EnableExternalRequestButton = ({ children, requestType, onClick }) => {
     <KeyBlueButton
       onClick={() =>
         onAddAllowedRequestType(requestType).then(() => onClick && onClick())
-      }>
+      }
+    >
       {children}
     </KeyBlueButton>
   );
diff --git a/app/components/buttons/EyeFilterMenu/EyeFilterMenu.jsx b/app/components/buttons/EyeFilterMenu/EyeFilterMenu.jsx
index c23f4d9454..5d66207f96 100644
--- a/app/components/buttons/EyeFilterMenu/EyeFilterMenu.jsx
+++ b/app/components/buttons/EyeFilterMenu/EyeFilterMenu.jsx
@@ -48,7 +48,8 @@ const EyeFilterMenu = ({
             )}
             onClick={(e) =>
               onMenuChanged(e, { value: option.value, key: option.key })
-            }>
+            }
+          >
             {option.label}
           </div>
         ))}
@@ -60,7 +61,8 @@ const EyeFilterMenu = ({
   return (
     <div
       className={classNames(styles.menu, menuOpen && styles.open)}
-      ref={wrapperRef}>
+      ref={wrapperRef}
+    >
       <div className={styles.menuButton}>
         <InvisibleButton
           ariaLabel="EyeFilterMenu"
diff --git a/app/components/buttons/EyeFilterMenu/EyeFilterMenuWithSlider/EyeFilterMenuWithSlider.jsx b/app/components/buttons/EyeFilterMenu/EyeFilterMenuWithSlider/EyeFilterMenuWithSlider.jsx
index 1ec8043164..990a63101f 100644
--- a/app/components/buttons/EyeFilterMenu/EyeFilterMenuWithSlider/EyeFilterMenuWithSlider.jsx
+++ b/app/components/buttons/EyeFilterMenu/EyeFilterMenuWithSlider/EyeFilterMenuWithSlider.jsx
@@ -66,7 +66,8 @@ const EyeFilterMenuWithSliderMenu = ({
         <T id="history.amount.range" m="Amount Range" />
         <span
           onClick={setExpandedSliderInfoCallback}
-          className={styles.kebab}></span>
+          className={styles.kebab}
+        ></span>
       </div>
       <Slider
         double={true}
diff --git a/app/components/buttons/HelpLink/HelpLink.jsx b/app/components/buttons/HelpLink/HelpLink.jsx
index d7605026ad..bd637e7d28 100644
--- a/app/components/buttons/HelpLink/HelpLink.jsx
+++ b/app/components/buttons/HelpLink/HelpLink.jsx
@@ -5,7 +5,8 @@ import styles from "./HelpLink.module.css";
 const HelpLink = ({ icon, onClick, href, title, subtitle, expand }) => (
   <div
     className={classNames(styles.icon, styles[icon])}
-    onClick={onClick ? onClick : () => wallet.openExternalURL(href)}>
+    onClick={onClick ? onClick : () => wallet.openExternalURL(href)}
+  >
     <div className={styles.text}>
       <div className={styles.title}>{title}</div>
       <div className={styles.subtitle}>{subtitle}</div>
diff --git a/app/components/buttons/ModalButton.jsx b/app/components/buttons/ModalButton.jsx
index debe7e2ba1..ccc4780382 100644
--- a/app/components/buttons/ModalButton.jsx
+++ b/app/components/buttons/ModalButton.jsx
@@ -10,7 +10,8 @@ const defaultButton = ({
   <button
     onClick={onClick}
     className={className}
-    aria-labelledby={ariaLabelledBy}>
+    aria-labelledby={ariaLabelledBy}
+  >
     {buttonLabel}
     {isDisabled}
   </button>
diff --git a/app/components/buttons/PathButton/PathButton.jsx b/app/components/buttons/PathButton/PathButton.jsx
index ff2897942a..9b22da1edf 100644
--- a/app/components/buttons/PathButton/PathButton.jsx
+++ b/app/components/buttons/PathButton/PathButton.jsx
@@ -5,7 +5,8 @@ import styles from "./PathButton.module.css";
 const PathButton = ({ disabled, onClick }) => (
   <Tooltip
     contentClassName={styles.tooltip}
-    content={<T id="startup.dataDir.tip" m="Select a path" />}>
+    content={<T id="startup.dataDir.tip" m="Select a path" />}
+  >
     <button
       aria-label="Select a path"
       className={styles.pathButton}
diff --git a/app/components/buttons/RescanButton/RescanButton.jsx b/app/components/buttons/RescanButton/RescanButton.jsx
index f44daac33e..231c644da4 100644
--- a/app/components/buttons/RescanButton/RescanButton.jsx
+++ b/app/components/buttons/RescanButton/RescanButton.jsx
@@ -14,7 +14,8 @@ export default ({ rescanRequest, rescanAttempt }) => (
     placement="right"
     contentClassName={styles.tooltip}
     content={<T id="sidebar.rescanBtn.tip" m={rescanBtnMessage} />}
-    disabled={rescanRequest}>
+    disabled={rescanRequest}
+  >
     <button
       aria-label="Rescan"
       disabled={!!rescanRequest}
diff --git a/app/components/buttons/RescanButton/RescanCancelButton.jsx b/app/components/buttons/RescanButton/RescanCancelButton.jsx
index 9be13055d1..fee252abb0 100644
--- a/app/components/buttons/RescanButton/RescanCancelButton.jsx
+++ b/app/components/buttons/RescanButton/RescanCancelButton.jsx
@@ -5,7 +5,8 @@ import styles from "./RescanButton.module.css";
 export default ({ rescanRequest, rescanCancel }) => (
   <Tooltip
     content={<T id="sidebar.rescanCancelBtn.tip" m="Cancel rescan" />}
-    disabled={!rescanRequest}>
+    disabled={!rescanRequest}
+  >
     <button
       aria-label="Cancel rescan"
       disabled={!rescanRequest}
diff --git a/app/components/buttons/SearchForNodesButton/SearchForNodesButton.jsx b/app/components/buttons/SearchForNodesButton/SearchForNodesButton.jsx
index 11853c52aa..622fb6c4a7 100644
--- a/app/components/buttons/SearchForNodesButton/SearchForNodesButton.jsx
+++ b/app/components/buttons/SearchForNodesButton/SearchForNodesButton.jsx
@@ -18,7 +18,8 @@ const SearchForNodesButton = ({
     data-testid="searchForNodesButton"
     buttonLabel={
       buttonLabel ? buttonLabel : <Icon type="search" iconColor="#fff" />
-    }></ModalButton>
+    }
+  ></ModalButton>
 );
 
 export default SearchForNodesButton;
diff --git a/app/components/buttons/SendTransactionButton/SendTransactionButton.jsx b/app/components/buttons/SendTransactionButton/SendTransactionButton.jsx
index ba2cf5b9ba..cd04c840e3 100644
--- a/app/components/buttons/SendTransactionButton/SendTransactionButton.jsx
+++ b/app/components/buttons/SendTransactionButton/SendTransactionButton.jsx
@@ -36,7 +36,8 @@ const SendTransactionButton = ({
       <KeyBlueButton
         onClick={signTransactionTrezor}
         disabled={disabled || isSendingTransaction}
-        loading={isSendingTransaction}>
+        loading={isSendingTransaction}
+      >
         {buttonLabel ? buttonLabel : <T id="send.sendBtn" m="Send" />}
       </KeyBlueButton>
     );
diff --git a/app/components/buttons/SendTransactionButton/hooks.js b/app/components/buttons/SendTransactionButton/hooks.js
index 79c3847526..0f15ec5b20 100644
--- a/app/components/buttons/SendTransactionButton/hooks.js
+++ b/app/components/buttons/SendTransactionButton/hooks.js
@@ -14,7 +14,11 @@ export function useSendTransactionButton() {
     dispatch(ca.signTransactionAttempt(passphrase, rawTx, acct));
   };
   const onAttemptSignTransactionTrezor = (rawUnsigTx, constructTxResponse) =>
-    dispatch(tza.signTransactionAttemptTrezor(rawUnsigTx, constructTxResponse));
+    dispatch(
+      tza.signTransactionAttemptTrezor(rawUnsigTx, [
+        constructTxResponse.changeIndex
+      ])
+    );
 
   return {
     unsignedTransaction,
diff --git a/app/components/buttons/TextToggle/Toggle.jsx b/app/components/buttons/TextToggle/Toggle.jsx
index 0b10c8a387..e5d0847f35 100644
--- a/app/components/buttons/TextToggle/Toggle.jsx
+++ b/app/components/buttons/TextToggle/Toggle.jsx
@@ -16,7 +16,8 @@ const Toggle = ({
         childClassName,
         activeButton === "left" && styles.textToggleButtonActive
       )}
-      onClick={activeButton == "right" ? () => onClick("left") : null}>
+      onClick={activeButton == "right" ? () => onClick("left") : null}
+    >
       {leftText}
     </div>
     <div
@@ -25,7 +26,8 @@ const Toggle = ({
         childClassName,
         activeButton === "right" && styles.textToggleButtonActive
       )}
-      onClick={activeButton == "left" ? () => onClick("right") : null}>
+      onClick={activeButton == "left" ? () => onClick("right") : null}
+    >
       {rightText}
     </div>
   </div>
diff --git a/app/components/buttons/ToggleSwitch/ToggleSwitch.jsx b/app/components/buttons/ToggleSwitch/ToggleSwitch.jsx
index 472dcbdb3c..64ae2639b2 100644
--- a/app/components/buttons/ToggleSwitch/ToggleSwitch.jsx
+++ b/app/components/buttons/ToggleSwitch/ToggleSwitch.jsx
@@ -25,7 +25,8 @@ const ToggleSwitch = ({
         contentClassName={classNames(styles.tooltip, tooltipClassName)}
         content={
           disabled ? disabledText : enabled ? enabledText : notEnabledText
-        }>
+        }
+      >
         <Toggle
           {...{
             onToggle: onClick,
diff --git a/app/components/charts/BalanceChart.jsx b/app/components/charts/BalanceChart.jsx
index d6e26ba2cf..a377bb3430 100644
--- a/app/components/charts/BalanceChart.jsx
+++ b/app/components/charts/BalanceChart.jsx
@@ -33,7 +33,8 @@ const BalanceChart = ({ data, intl }) => {
       stackOffset="sign"
       width={chartSize.width}
       height={chartSize.height}
-      data={displayData}>
+      data={displayData}
+    >
       <XAxis
         tickLine={false}
         dataKey="name"
diff --git a/app/components/charts/ChartTooltip.jsx b/app/components/charts/ChartTooltip.jsx
index f5d6a77026..e3559f545c 100644
--- a/app/components/charts/ChartTooltip.jsx
+++ b/app/components/charts/ChartTooltip.jsx
@@ -23,7 +23,8 @@ const ChartLegend = () => {
         <div key={`item-${index}`} className={styles.tooltipLine}>
           <div
             className={styles.circleTooltip}
-            style={{ background: entry.fill }}></div>
+            style={{ background: entry.fill }}
+          ></div>
           {entry.dataKey}:
           <Balance
             amount={entry.value * unitDivisor}
diff --git a/app/components/charts/StakeRewardsChart.jsx b/app/components/charts/StakeRewardsChart.jsx
index e5e06ccd97..65a6d4c5b5 100644
--- a/app/components/charts/StakeRewardsChart.jsx
+++ b/app/components/charts/StakeRewardsChart.jsx
@@ -36,7 +36,8 @@ const ChartTooltip = (props) => {
         <div key={`item-${index}`} className={styles.tooltipLine}>
           <div
             className={styles.circleTooltip}
-            style={{ background: entry.fill }}></div>
+            style={{ background: entry.fill }}
+          ></div>
           <T
             id="charts.tooltip.value"
             m="{key}: {value, number, precise-percent}"
@@ -71,7 +72,8 @@ const VoteTimeChart = ({ data, intl }) => {
       stackOffset="sign"
       width={chartSize.width}
       height={chartSize.height}
-      data={displayData}>
+      data={displayData}
+    >
       <XAxis
         tickLine={false}
         dataKey="name"
diff --git a/app/components/charts/TicketChart.jsx b/app/components/charts/TicketChart.jsx
index 5d7d5bd725..0570cb2b50 100644
--- a/app/components/charts/TicketChart.jsx
+++ b/app/components/charts/TicketChart.jsx
@@ -38,7 +38,8 @@ const BalanceChart = ({ data, intl }) => {
       stackOffset="sign"
       width={chartSize.width}
       height={chartSize.height}
-      data={displayData}>
+      data={displayData}
+    >
       <XAxis
         tickLine={false}
         dataKey="name"
diff --git a/app/components/charts/TransactionChart.jsx b/app/components/charts/TransactionChart.jsx
index fb68fd987d..7e17b710bc 100644
--- a/app/components/charts/TransactionChart.jsx
+++ b/app/components/charts/TransactionChart.jsx
@@ -32,7 +32,8 @@ const TransactionChart = ({ data, intl }) => {
       stackOffset="sign"
       width={chartSize.width}
       height={chartSize.height}
-      data={displayData}>
+      data={displayData}
+    >
       <XAxis
         tickLine={false}
         dataKey="name"
diff --git a/app/components/charts/VoteTimeChart.jsx b/app/components/charts/VoteTimeChart.jsx
index 8cf7731925..d97f019e04 100644
--- a/app/components/charts/VoteTimeChart.jsx
+++ b/app/components/charts/VoteTimeChart.jsx
@@ -56,7 +56,8 @@ const VoteTimeChart = ({ data, intl }) => {
       stackOffset="sign"
       width={chartSize.width}
       height={chartSize.height}
-      data={displayData}>
+      data={displayData}
+    >
       <XAxis
         tickLine={false}
         dataKey="name"
diff --git a/app/components/indicators/AnimatedLinearProgressFull/AnimatedLinearProgressFull.jsx b/app/components/indicators/AnimatedLinearProgressFull/AnimatedLinearProgressFull.jsx
index 91680ae036..76537ff377 100644
--- a/app/components/indicators/AnimatedLinearProgressFull/AnimatedLinearProgressFull.jsx
+++ b/app/components/indicators/AnimatedLinearProgressFull/AnimatedLinearProgressFull.jsx
@@ -170,7 +170,8 @@ const AnimatedLinearProgressFull = ({
           <div>
             <Tooltip
               placement="top"
-              content={<T id="getstarted.spvMode" m="SPV Mode" />}>
+              content={<T id="getstarted.spvMode" m="SPV Mode" />}
+            >
               <div className={styles.spvIcon} />
             </Tooltip>
           </div>
@@ -191,7 +192,8 @@ const AnimatedLinearProgressFull = ({
             <>
               <KeyBlueButton
                 onClick={showAutoWalletLaunchingModalVisible}
-                className={styles.openWalletButton}>
+                className={styles.openWalletButton}
+              >
                 <T id="getstarted.openWallet" m="Open Wallet" />
               </KeyBlueButton>
               <AutoWalletLaunchingModal
@@ -206,7 +208,8 @@ const AnimatedLinearProgressFull = ({
             !startWalletServiceAttempt && (
               <KeyBlueButton
                 onClick={onCancelLoadingWallet}
-                className={styles.cancelLoadingButton}>
+                className={styles.cancelLoadingButton}
+              >
                 <T id="getstarted.cancelLoading" m="Cancel Loading" />
               </KeyBlueButton>
             )
diff --git a/app/components/indicators/LinearProgress/LinearProgressSmall.jsx b/app/components/indicators/LinearProgress/LinearProgressSmall.jsx
index 2dc54efabe..273f6cb26b 100644
--- a/app/components/indicators/LinearProgress/LinearProgressSmall.jsx
+++ b/app/components/indicators/LinearProgress/LinearProgressSmall.jsx
@@ -8,13 +8,15 @@ const LinearProgressSmall = ({ value, min, max, className, barClassName }) => (
       style.small,
       className && className
     )}
-    data-testid="linear-prgress-small">
+    data-testid="linear-prgress-small"
+  >
     <div
       className={classNames(
         style.linearProgressBar,
         barClassName && barClassName
       )}
-      style={{ width: `${((value - min) / (max - min)) * 100}%` }}></div>
+      style={{ width: `${((value - min) / (max - min)) * 100}%` }}
+    ></div>
   </div>
 );
 
diff --git a/app/components/indicators/LoadingMoreTickets/LoadingMoreTickets.jsx b/app/components/indicators/LoadingMoreTickets/LoadingMoreTickets.jsx
index edd47b9576..0951a6bf22 100644
--- a/app/components/indicators/LoadingMoreTickets/LoadingMoreTickets.jsx
+++ b/app/components/indicators/LoadingMoreTickets/LoadingMoreTickets.jsx
@@ -41,15 +41,13 @@ const LoadingMoreTicketsIndicator = ({
 
   return stakeTransactionsCancel ? (
     <div
-      className={classNames(
-        styles.loadingMoreTickets,
-        styles.isRow,
-        className
-      )}>
+      className={classNames(styles.loadingMoreTickets, styles.isRow, className)}
+    >
       {startRequestHeight && (
         <>
           <div
-            className={classNames(styles.isRow, styles.loadingMoreTicketsInfo)}>
+            className={classNames(styles.isRow, styles.loadingMoreTicketsInfo)}
+          >
             <div className={styles.loadingMoreTicketsIcon}></div>
             <T
               id="myTickets.noloadingMoreTickets"
@@ -62,7 +60,8 @@ const LoadingMoreTicketsIndicator = ({
                 id="mytickets.loadingMoreTickets.returnBtn"
                 m={"Return listing tickets"}
               />
-            }>
+            }
+          >
             <button
               className={styles.getticketsCancelButton}
               onClick={onToggleGetTransactions}
@@ -73,15 +72,13 @@ const LoadingMoreTicketsIndicator = ({
     </div>
   ) : (
     <div
-      className={classNames(
-        styles.loadingMoreTickets,
-        styles.isRow,
-        className
-      )}>
+      className={classNames(styles.loadingMoreTickets, styles.isRow, className)}
+    >
       {startRequestHeight && (
         <>
           <div
-            className={classNames(styles.isRow, styles.loadingMoreTicketsInfo)}>
+            className={classNames(styles.isRow, styles.loadingMoreTicketsInfo)}
+          >
             <div className={styles.loadingMoreTicketsIcon}></div>
             <div onClick={() => !transactionsRequestAttempt && getTickets()}>
               <>
@@ -115,7 +112,8 @@ const LoadingMoreTicketsIndicator = ({
                 id="mytickets.loadingMoreTickets.cancelBtn"
                 m={"Cancel listing tickets"}
               />
-            }>
+            }
+          >
             <button
               className={styles.getticketsCancelButton}
               onClick={onToggleGetTransactions}
diff --git a/app/components/indicators/VotingProgress/VotingProgress.jsx b/app/components/indicators/VotingProgress/VotingProgress.jsx
index 39ab9364b8..32eb56ed22 100644
--- a/app/components/indicators/VotingProgress/VotingProgress.jsx
+++ b/app/components/indicators/VotingProgress/VotingProgress.jsx
@@ -21,7 +21,8 @@ export default ({ voteCounts, quorumMinimumVotes, className }) => {
   return (
     <div
       className={classNames(styles.votingProgressIndicator, className)}
-      data-testid="voting-progress">
+      data-testid="voting-progress"
+    >
       <div
         className={styles.votingProgressYes}
         style={{ width: yesPerc + "%" }}
diff --git a/app/components/inputs/AccountsSelect/AccountsSelect.jsx b/app/components/inputs/AccountsSelect/AccountsSelect.jsx
index 45583920b2..d99d0c34f2 100644
--- a/app/components/inputs/AccountsSelect/AccountsSelect.jsx
+++ b/app/components/inputs/AccountsSelect/AccountsSelect.jsx
@@ -34,7 +34,8 @@ const AccountsSelect = ({
           className={classNames(
             styles.value,
             selectWithBigFont && styles.selectWithBigFont
-          )}>
+          )}
+        >
           <div className={styles.name}>{props.data.name}</div>
           {!hideSpendable && (
             <div className={styles.spendable}>
@@ -64,7 +65,8 @@ const AccountsSelect = ({
   return (
     <div
       className={classNames(styles.container, className)}
-      data-testid="accountsSelect">
+      data-testid="accountsSelect"
+    >
       <Select
         placeholder={placeholder}
         value={account}
diff --git a/app/components/inputs/DetailedAccountsSelect/DetailedAccountsSelect.jsx b/app/components/inputs/DetailedAccountsSelect/DetailedAccountsSelect.jsx
index 4613383b8b..4b10f08a6f 100644
--- a/app/components/inputs/DetailedAccountsSelect/DetailedAccountsSelect.jsx
+++ b/app/components/inputs/DetailedAccountsSelect/DetailedAccountsSelect.jsx
@@ -24,7 +24,8 @@ const DetailedAccountsSelect = (props) => {
               isImported(props.data) && styles.imported,
               isMixed && styles.mixed,
               isChange && styles.unmixed
-            )}>
+            )}
+          >
             {props.data.name}
           </div>
           <div className={styles.spendable}>
diff --git a/app/components/inputs/Input/Input.jsx b/app/components/inputs/Input/Input.jsx
index 28dab8e8bf..d6607bcb10 100644
--- a/app/components/inputs/Input/Input.jsx
+++ b/app/components/inputs/Input/Input.jsx
@@ -102,14 +102,16 @@ const Input = ({
       onKeyDown={onInputKeyDown}
       data-testid={dataTestId}
       maxLength={maxLength}
-      aria-labelledby={ariaLabelledBy}>
+      aria-labelledby={ariaLabelledBy}
+    >
       {unit && (
         <span
           className={classNames(
             styles.unitArea,
             unitAreaClassName,
             hasErrorToShow && styles.error
-          )}>
+          )}
+        >
           {unit}
         </span>
       )}
diff --git a/app/components/inputs/NumTicketsInput/NumTicketsInput.jsx b/app/components/inputs/NumTicketsInput/NumTicketsInput.jsx
index ad9d1d95b8..344096d564 100644
--- a/app/components/inputs/NumTicketsInput/NumTicketsInput.jsx
+++ b/app/components/inputs/NumTicketsInput/NumTicketsInput.jsx
@@ -45,7 +45,8 @@ const NumTicketsInput = ({
           onChangeNumTickets && onChangeNumTickets(e.target.value)
         }
         data-max-width="70"
-        {...props}>
+        {...props}
+      >
         <div className={style.ticketUnitLabel}>{ticketUnitLabel}</div>
       </IntegerInput>
       <button
diff --git a/app/components/inputs/PasswordInput/PasswordInput.jsx b/app/components/inputs/PasswordInput/PasswordInput.jsx
index 8b25442e2c..e3d4ee62f3 100644
--- a/app/components/inputs/PasswordInput/PasswordInput.jsx
+++ b/app/components/inputs/PasswordInput/PasswordInput.jsx
@@ -18,7 +18,8 @@ const PasswordInput = ({ hideToggleButton, children, ...props }) => {
           onClick={(e) => {
             e.preventDefault();
             togglePasswordVisibility();
-          }}>
+          }}
+        >
           <div />
         </Button>
       )}
diff --git a/app/components/inputs/PathBrowseInput/PathBrowseInput.jsx b/app/components/inputs/PathBrowseInput/PathBrowseInput.jsx
index ee7ba2aca4..a08453cc34 100644
--- a/app/components/inputs/PathBrowseInput/PathBrowseInput.jsx
+++ b/app/components/inputs/PathBrowseInput/PathBrowseInput.jsx
@@ -47,7 +47,8 @@ const PathBrowseInput = ({ intl, filters, save, type, onChange, ...props }) => {
       type="text"
       onChange={(e) => onChange(e.target.value)}
       inputClassNames={style.textInput}
-      {...props}>
+      {...props}
+    >
       <PathButton onClick={selectDirectory} />
     </Input>
   );
diff --git a/app/components/inputs/VSPSelect/VSPSelect.jsx b/app/components/inputs/VSPSelect/VSPSelect.jsx
index 93b4f87604..4a3b0d386d 100644
--- a/app/components/inputs/VSPSelect/VSPSelect.jsx
+++ b/app/components/inputs/VSPSelect/VSPSelect.jsx
@@ -73,12 +73,14 @@ function VSPSelect({
                 />
               )}
             </div>
-          }>
+          }
+        >
           <div
             className={classNames(
               styles.optionWrapper,
               vsp.outdated && styles.outdated
-            )}>
+            )}
+          >
             {vsp.host}
           </div>
         </Tooltip>
diff --git a/app/components/layout/PageBody/PageBody.jsx b/app/components/layout/PageBody/PageBody.jsx
index ffa314cddd..f1602ce22e 100644
--- a/app/components/layout/PageBody/PageBody.jsx
+++ b/app/components/layout/PageBody/PageBody.jsx
@@ -13,7 +13,8 @@ const PageBody = ({ className, getStarted, children, isTestNet, ...props }) => {
         getStarted && styles.getstarted,
         isTestNet && styles.testnetBody,
         className
-      )}>
+      )}
+    >
       <div ref={pageBodyTopRef} className={styles.pageBodyTop} />
       {children}
     </div>
diff --git a/app/components/layout/TabbedPage/TabbedPage.jsx b/app/components/layout/TabbedPage/TabbedPage.jsx
index cbfcdeb9a3..4d2966147c 100644
--- a/app/components/layout/TabbedPage/TabbedPage.jsx
+++ b/app/components/layout/TabbedPage/TabbedPage.jsx
@@ -59,7 +59,8 @@ const TabbedPage = ({
               styles.tabContent,
               tabContentClassName
             )}
-            contentAnimation={uiAnimations ? "slide" : "none"}>
+            contentAnimation={uiAnimations ? "slide" : "none"}
+          >
             {tabs
               .filter(({ disabled }) => !disabled)
               .map(({ label, content, path, props, key }) => {
@@ -75,7 +76,8 @@ const TabbedPage = ({
                   <Tab label={label} key={key ?? path}>
                     <div
                       key={`${key ?? path}-key`}
-                      className={styles.tabContentContainer}>
+                      className={styles.tabContentContainer}
+                    >
                       {element}
                     </div>
                   </Tab>
diff --git a/app/components/modals/AboutModal/AboutModal.jsx b/app/components/modals/AboutModal/AboutModal.jsx
index 29b52335de..2166304dcb 100644
--- a/app/components/modals/AboutModal/AboutModal.jsx
+++ b/app/components/modals/AboutModal/AboutModal.jsx
@@ -47,13 +47,15 @@ const AboutModal = ({ show, onCancelModal }) => {
             {updateAvailable ? (
               <ExternalLink
                 href="https://github.com/decred/decred-binaries/releases"
-                className={styles.upgrade}>
+                className={styles.upgrade}
+              >
                 <T id="aboutModal.upgradeAvailable" m="Upgrade Available" />
               </ExternalLink>
             ) : (
               <ExternalLink
                 href={`https://github.com/decred/decred-binaries/releases/tag/v${version}`}
-                className={styles.upgrade}>
+                className={styles.upgrade}
+              >
                 <T id="aboutModal.whatsNew" m="What's New?" />
               </ExternalLink>
             )}
diff --git a/app/components/modals/AppPassAndPassphraseModal/AppPassAndPassphraseModalContent.jsx b/app/components/modals/AppPassAndPassphraseModal/AppPassAndPassphraseModalContent.jsx
index 8a61bfd261..12c0fc8a35 100644
--- a/app/components/modals/AppPassAndPassphraseModal/AppPassAndPassphraseModalContent.jsx
+++ b/app/components/modals/AppPassAndPassphraseModal/AppPassAndPassphraseModalContent.jsx
@@ -28,7 +28,8 @@ const Modal = ({
       ...props,
       onSubmit,
       parentIsValid: isValid
-    }}>
+    }}
+  >
     <PasswordInput
       newBiggerFontStyle
       id="appPassphraseInput"
diff --git a/app/components/modals/AutoBuyerSettingsModal/AutoBuyerSettingsModal.jsx b/app/components/modals/AutoBuyerSettingsModal/AutoBuyerSettingsModal.jsx
index ba49af6fbd..bdbdfa21c7 100644
--- a/app/components/modals/AutoBuyerSettingsModal/AutoBuyerSettingsModal.jsx
+++ b/app/components/modals/AutoBuyerSettingsModal/AutoBuyerSettingsModal.jsx
@@ -99,7 +99,8 @@ const AutoBuyerSettingsModal = ({
             onSubmit({
               ...{ balanceToMaintain, account, maxFeePercentage }
             })
-          }>
+          }
+        >
           <T id="autoBuyerSettings.save" m="Save" />
         </PiUiButton>
       </div>
diff --git a/app/components/modals/ChangePassphraseModal/ChangePassphraseModalContent.jsx b/app/components/modals/ChangePassphraseModal/ChangePassphraseModalContent.jsx
index 8d51c22797..6dd9bd9c57 100644
--- a/app/components/modals/ChangePassphraseModal/ChangePassphraseModalContent.jsx
+++ b/app/components/modals/ChangePassphraseModal/ChangePassphraseModalContent.jsx
@@ -56,7 +56,8 @@ const Modal = ({
       ...props,
       onSubmit,
       parentIsValid: isValid
-    }}>
+    }}
+  >
     <PasswordInput
       newBiggerFontStyle
       id="newPassphraseInput"
diff --git a/app/components/modals/InfoConfirmModal/InfoConfirmModal.jsx b/app/components/modals/InfoConfirmModal/InfoConfirmModal.jsx
index 31518da83d..6477f4b972 100644
--- a/app/components/modals/InfoConfirmModal/InfoConfirmModal.jsx
+++ b/app/components/modals/InfoConfirmModal/InfoConfirmModal.jsx
@@ -13,7 +13,8 @@ const InfoConfirmModal = ({
 }) => (
   <Modal
     className={classNames(styles.infoConfirm, className)}
-    {...{ show, onCancelModal }}>
+    {...{ show, onCancelModal }}
+  >
     <div className={styles.header}>
       <div className={styles.headerTitle}>{modalTitle}</div>
     </div>
diff --git a/app/components/modals/InfoModal/InfoModal.jsx b/app/components/modals/InfoModal/InfoModal.jsx
index bb88dcaf8f..7d44a9b6bb 100644
--- a/app/components/modals/InfoModal/InfoModal.jsx
+++ b/app/components/modals/InfoModal/InfoModal.jsx
@@ -15,7 +15,8 @@ const InfoModal = ({
 }) => (
   <Modal
     className={classNames(styles.info, double && styles.double, modalClassName)}
-    {...{ show, onCancelModal, draggable }}>
+    {...{ show, onCancelModal, draggable }}
+  >
     {modalTitle ? <>{modalTitle}</> : null}
     <div className={styles.closeButtonTop} onClick={onCancelModal} />
     <div className={styles.content}>{modalContent}</div>
diff --git a/app/components/modals/LNInvoiceModal/LNInvoiceModal.jsx b/app/components/modals/LNInvoiceModal/LNInvoiceModal.jsx
index cc821808bd..17591c7d8d 100644
--- a/app/components/modals/LNInvoiceModal/LNInvoiceModal.jsx
+++ b/app/components/modals/LNInvoiceModal/LNInvoiceModal.jsx
@@ -92,7 +92,8 @@ const LNInvoiceModal = ({
               isCancelButtonDisabled && styles.disabled
             )}
             onClick={onCancelInvoice}
-            disabled={isCancelButtonDisabled}>
+            disabled={isCancelButtonDisabled}
+          >
             <T id="ln.invoicesModal.cancelInvoice" m="Cancel Invoice" />
           </PiUiButton>
         </div>
@@ -110,7 +111,8 @@ const LNInvoiceModal = ({
         <CopyableText
           tooltipPlacement="top"
           id="paymentRequest"
-          truncate={false}>
+          truncate={false}
+        >
           {invoice?.paymentRequest}
         </CopyableText>
       )}
diff --git a/app/components/modals/LNPaymentModal/LNPaymentModal.jsx b/app/components/modals/LNPaymentModal/LNPaymentModal.jsx
index de78c6265c..c645fa1060 100644
--- a/app/components/modals/LNPaymentModal/LNPaymentModal.jsx
+++ b/app/components/modals/LNPaymentModal/LNPaymentModal.jsx
@@ -52,7 +52,8 @@ const LNPaymentModal = ({ show, onCancelModal, tsDate, payment }) => (
         <CopyableText
           tooltipPlacement="top"
           id="paymentRequest"
-          truncate={false}>
+          truncate={false}
+        >
           {payment.paymentRequest}
         </CopyableText>
       </>
diff --git a/app/components/modals/Modal/Modal.jsx b/app/components/modals/Modal/Modal.jsx
index d3d5a2924a..720436b07d 100644
--- a/app/components/modals/Modal/Modal.jsx
+++ b/app/components/modals/Modal/Modal.jsx
@@ -24,7 +24,8 @@ const Modal = showCheck(({ children, className, draggable, onCancelModal }) => {
           : styles.standalone,
         className,
         draggable && styles.draggable
-      )}>
+      )}
+    >
       {children}
     </div>
   );
@@ -38,7 +39,8 @@ const Modal = showCheck(({ children, className, draggable, onCancelModal }) => {
               ? styles.overlay
               : styles.overlayReducedBar
             : styles.overlayStandalone
-        }>
+        }
+      >
         {draggable ? (
           <Draggable bounds="parent" cancel=".cancel-dragging">
             {innerView}
diff --git a/app/components/modals/PassphraseModal/PassphraseModalContent.jsx b/app/components/modals/PassphraseModal/PassphraseModalContent.jsx
index 326f026b94..ab25700b73 100644
--- a/app/components/modals/PassphraseModal/PassphraseModalContent.jsx
+++ b/app/components/modals/PassphraseModal/PassphraseModalContent.jsx
@@ -38,7 +38,8 @@ const Modal = ({
 }) => (
   <DefaultModal
     className={classNames(styles.passphrase, modalClassName)}
-    {...{ show, onCancelModal }}>
+    {...{ show, onCancelModal }}
+  >
     <div className={styles.closeButtonTop} onClick={onCancelModal} />
     <div className={styles.header}>
       <div className={styles.headerTitle}>
diff --git a/app/components/modals/QRModal/QRModal.jsx b/app/components/modals/QRModal/QRModal.jsx
index c87c20b2ad..78421e0bfa 100644
--- a/app/components/modals/QRModal/QRModal.jsx
+++ b/app/components/modals/QRModal/QRModal.jsx
@@ -14,7 +14,8 @@ const QRModal = ({
 }) => (
   <Modal
     className={classNames(styles.qr, modalClassName)}
-    {...{ show, onCancelModal, draggable }}>
+    {...{ show, onCancelModal, draggable }}
+  >
     <div className={styles.qrTitle}>{modalTitle && modalTitle}</div>
     <div className={styles.closeButton} onClick={onCancelModal} />
     <div className={styles.qrContent}>{modalContent}</div>
diff --git a/app/components/modals/SearchForNodesModal/NodeListElement/NodeListElement.jsx b/app/components/modals/SearchForNodesModal/NodeListElement/NodeListElement.jsx
index 0e7bb4b944..b1d4f090bb 100644
--- a/app/components/modals/SearchForNodesModal/NodeListElement/NodeListElement.jsx
+++ b/app/components/modals/SearchForNodesModal/NodeListElement/NodeListElement.jsx
@@ -18,7 +18,8 @@ const NodeListElement = ({ alias, pubKey, onNodeSelected }) => (
       onClick={(e) => {
         e.preventDefault();
         onNodeSelected(pubKey);
-      }}>
+      }}
+    >
       <div className={styles.icon} />
     </Button>
   </li>
diff --git a/app/components/modals/SearchForNodesModal/SearchForNodesModal.jsx b/app/components/modals/SearchForNodesModal/SearchForNodesModal.jsx
index 6ac98fb9a6..cdb152fe69 100644
--- a/app/components/modals/SearchForNodesModal/SearchForNodesModal.jsx
+++ b/app/components/modals/SearchForNodesModal/SearchForNodesModal.jsx
@@ -52,7 +52,8 @@ const SearchForNodesModal = ({
         inputClassNames={styles.searchInput}
         onChange={(e) => setNode(e.target.value)}
         placeholder={intl.formatMessage(messages.searchInputPlaceholder)}
-        label={intl.formatMessage(messages.searchInputLabel)}>
+        label={intl.formatMessage(messages.searchInputLabel)}
+      >
         {!node ? (
           <Button
             kind="secondary"
@@ -61,7 +62,8 @@ const SearchForNodesModal = ({
             onClick={(e) => {
               e.preventDefault();
               setNode(wallet.readFromClipboard());
-            }}>
+            }}
+          >
             <T id="ln.searchForNodesModal.paste" m="Paste NodePubKey@ip:port" />
           </Button>
         ) : (
@@ -72,7 +74,8 @@ const SearchForNodesModal = ({
             onClick={(e) => {
               e.preventDefault();
               setNode("");
-            }}>
+            }}
+          >
             <div />
           </Button>
         )}
diff --git a/app/components/modals/SeedCopyConfirmModal/SeedCopyConfirmModalContent.jsx b/app/components/modals/SeedCopyConfirmModal/SeedCopyConfirmModalContent.jsx
index d636d4ebdf..9cb3579b37 100644
--- a/app/components/modals/SeedCopyConfirmModal/SeedCopyConfirmModalContent.jsx
+++ b/app/components/modals/SeedCopyConfirmModal/SeedCopyConfirmModalContent.jsx
@@ -53,13 +53,15 @@ const SeedCopyConfirmModalContent = ({
           disabled={
             typedConfirmationPhrase.toLowerCase() !==
             copyConfirmationPhrase.toLowerCase()
-          }>
+          }
+        >
           <T id="seedCopyConfirm.btnConfirm" m="Confirm Seed Copy" />
         </DangerButton>
         <InvisibleButton
           className={styles.closeButton}
           onClick={onCancelModal}
-          ariaLabel="Cancel seed copy">
+          ariaLabel="Cancel seed copy"
+        >
           <T id="seedCopyConfirm.btnCancel" m="Cancel" />
         </InvisibleButton>
       </div>
diff --git a/app/components/modals/SendFromUnmixedAccountModal/SendFromUnmixedAccountContent.jsx b/app/components/modals/SendFromUnmixedAccountModal/SendFromUnmixedAccountContent.jsx
index 20660aec8f..4dc3bba29c 100644
--- a/app/components/modals/SendFromUnmixedAccountModal/SendFromUnmixedAccountContent.jsx
+++ b/app/components/modals/SendFromUnmixedAccountModal/SendFromUnmixedAccountContent.jsx
@@ -53,7 +53,8 @@ const SendFromUnmixedAccountContent = ({
         disabled={
           typedConfirmationPhrase.toLowerCase() !==
           copyConfirmationPhrase.toLowerCase()
-        }>
+        }
+      >
         <T
           id="SendFromUnmixed.btnConfirm"
           m="Enable sending from unmixed accounts"
diff --git a/app/components/modals/SetNewPassphraseModal/SetNewPassModalContent/SetNewPassModalContent.jsx b/app/components/modals/SetNewPassphraseModal/SetNewPassModalContent/SetNewPassModalContent.jsx
index 5910450827..19559ff4df 100644
--- a/app/components/modals/SetNewPassphraseModal/SetNewPassModalContent/SetNewPassModalContent.jsx
+++ b/app/components/modals/SetNewPassphraseModal/SetNewPassModalContent/SetNewPassModalContent.jsx
@@ -42,7 +42,8 @@ const Modal = ({
 }) => (
   <DefaultModal
     className={classNames(styles.passphrase, modalClassName)}
-    {...{ show, onCancelModal }}>
+    {...{ show, onCancelModal }}
+  >
     <div className={styles.closeButtonTop} onClick={onCancelModal} />
     <div className={styles.header}>
       <div className={styles.headerTitle}>
diff --git a/app/components/modals/TrezorModals/TrezorPinModal.jsx b/app/components/modals/TrezorModals/TrezorPinModal.jsx
index 7569c1b5e3..40c68700cc 100644
--- a/app/components/modals/TrezorModals/TrezorPinModal.jsx
+++ b/app/components/modals/TrezorModals/TrezorPinModal.jsx
@@ -30,7 +30,8 @@ const TrezorPinModal = ({
   return (
     <Modal
       className={classNames(styles.pinModal, isGetStarted && styles.getStarted)}
-      onCancelModal={onCancelPinModal}>
+      onCancelModal={onCancelPinModal}
+    >
       <div className={styles.closeButton} onClick={onCancelModal} />
       <h1>
         <T id="trezor.pinModal.title" m="Enter PIN" />
@@ -44,7 +45,8 @@ const TrezorPinModal = ({
             link: (
               <ExternalLink
                 className={styles.learnMoreLink}
-                href="https://wiki.trezor.io/User_manual:Entering_PIN">
+                href="https://wiki.trezor.io/User_manual:Entering_PIN"
+              >
                 <T id="trezor.pinModal.learnMore" m="Learn More" />
               </ExternalLink>
             )
@@ -58,12 +60,14 @@ const TrezorPinModal = ({
           id="passwordFieldInput"
           inputClassNames={styles.passwordFieldInput}
           value={currentPin}
-          disabled={true}>
+          disabled={true}
+        >
           <Button
             aria-label="Clear PIN"
             kind="secondary"
             className={styles.clearPinButton}
-            onClick={onClearPin}>
+            onClick={onClearPin}
+          >
             <div />
           </Button>
         </PasswordInput>
@@ -74,7 +78,8 @@ const TrezorPinModal = ({
             <div
               key={`trzPadBtn${index}`}
               className={styles.pinPadButton}
-              onClick={() => setCurrentPin(currentPin + index)}>
+              onClick={() => setCurrentPin(currentPin + index)}
+            >
               •
             </div>
           ))}
diff --git a/app/components/modals/TrezorModals/TrezorWalletCreationPassphraseModal.jsx b/app/components/modals/TrezorModals/TrezorWalletCreationPassphraseModal.jsx
index e3661965b5..dfd30fe944 100644
--- a/app/components/modals/TrezorModals/TrezorWalletCreationPassphraseModal.jsx
+++ b/app/components/modals/TrezorModals/TrezorWalletCreationPassphraseModal.jsx
@@ -63,7 +63,8 @@ const TrezorWalletCreationPassphraseModal = ({
         styles.passphraseModal,
         isGetStarted && styles.getStarted
       )}
-      onCancelModal={onCancelModal}>
+      onCancelModal={onCancelModal}
+    >
       <h1>
         <T
           id="trezor.walletCreationPassPhraseModal.title"
@@ -85,7 +86,8 @@ const TrezorWalletCreationPassphraseModal = ({
       <PassphraseModalField
         label={
           <T id="trezor.walltCreationPrivatePassphrase" m="Wallet PassPhrase" />
-        }>
+        }
+      >
         <PasswordInput
           id="passphraseValueInput"
           autoFocus
@@ -102,7 +104,8 @@ const TrezorWalletCreationPassphraseModal = ({
             id="trezor.walltCreationPrivatePassphraseConfirm"
             m="Confirm Wallet PassPhrase"
           />
-        }>
+        }
+      >
         <PasswordInput
           id="passphraseConfirmValueInput"
           placeholder=""
diff --git a/app/components/modals/TrezorModals/TrezorWordModal.jsx b/app/components/modals/TrezorModals/TrezorWordModal.jsx
index 33ae3db859..f184ac5bd5 100644
--- a/app/components/modals/TrezorModals/TrezorWordModal.jsx
+++ b/app/components/modals/TrezorModals/TrezorWordModal.jsx
@@ -59,7 +59,8 @@ const TrezorWordModal = ({
         styles.wordModal,
         isGetStarted && styles.getStarted
       )}
-      onCancelModal={onCancelWordModal}>
+      onCancelModal={onCancelWordModal}
+    >
       <h1>
         <T id="trezor.wordModal.title" m="Type the requested word" />
       </h1>
diff --git a/app/components/shared/Balance/Balance.jsx b/app/components/shared/Balance/Balance.jsx
index 000bfd4303..427f7acc5c 100644
--- a/app/components/shared/Balance/Balance.jsx
+++ b/app/components/shared/Balance/Balance.jsx
@@ -47,7 +47,8 @@ export const Balance = ({
                 styles[secondary],
                 classNameSecondary,
                 bold && "bold"
-              )}>
+              )}
+            >
               {`${tail} `}
             </span>
           )}
diff --git a/app/components/shared/ButtonsToolbar.jsx b/app/components/shared/ButtonsToolbar.jsx
index 25068b44db..4b840964b4 100644
--- a/app/components/shared/ButtonsToolbar.jsx
+++ b/app/components/shared/ButtonsToolbar.jsx
@@ -19,7 +19,8 @@ const ButtonsToolbar = ({
         // if isValid is not passed as props, we never validate it.
         (isValid === undefined ? false : !isValid) || loading
       }
-      onClick={onSubmit}>
+      onClick={onSubmit}
+    >
       {submitLabel ? (
         submitLabel
       ) : (
diff --git a/app/components/shared/DetailsTable/DetailsTable.jsx b/app/components/shared/DetailsTable/DetailsTable.jsx
index c15bcf3995..4aa4036d30 100644
--- a/app/components/shared/DetailsTable/DetailsTable.jsx
+++ b/app/components/shared/DetailsTable/DetailsTable.jsx
@@ -23,7 +23,8 @@ const ValueField = ({ data }) => {
         styles.value,
         copyable && styles.copyable,
         href && styles.href
-      )}>
+      )}
+    >
       {copyable ? (
         <>
           <div className={styles.copyableText}>{text}</div>
@@ -89,7 +90,8 @@ const DetailsTable = ({
           headerClassName,
           showDetails && styles.active,
           expandable && styles.expandable
-        )}>
+        )}
+      >
         {title}
         {expandable && <div className={styles.arrow} />}
       </div>
diff --git a/app/components/shared/Documentation/Documentation.jsx b/app/components/shared/Documentation/Documentation.jsx
index a09469e259..a011aafdd7 100644
--- a/app/components/shared/Documentation/Documentation.jsx
+++ b/app/components/shared/Documentation/Documentation.jsx
@@ -19,7 +19,8 @@ const renderDocLink = ({ href, children }) => {
 
 const DocUnavailableMsg = ({ name, unavailableAlertClassName }) => (
   <div
-    className={classNames(styles.unavailableAlert, unavailableAlertClassName)}>
+    className={classNames(styles.unavailableAlert, unavailableAlertClassName)}
+  >
     <T
       id="docs.unavailable"
       m="Document '{name}' is unavailable in the current language. Please request it in the community channels."
diff --git a/app/components/shared/ExternalLink.jsx b/app/components/shared/ExternalLink.jsx
index a25c912b8e..8518a7968d 100644
--- a/app/components/shared/ExternalLink.jsx
+++ b/app/components/shared/ExternalLink.jsx
@@ -12,7 +12,8 @@ const ExternalLink = ({ className, href, children, hrefTestNet }) => {
     <a
       className={className}
       onClick={clicker(isTestNet, href, hrefTestNet)}
-      href="#">
+      href="#"
+    >
       {children}
     </a>
   );
diff --git a/app/components/shared/LoadingError.jsx b/app/components/shared/LoadingError.jsx
index c6a448cf65..f0eb6a9d14 100644
--- a/app/components/shared/LoadingError.jsx
+++ b/app/components/shared/LoadingError.jsx
@@ -39,7 +39,8 @@ const LoadingError = ({
         <KeyBlueButton
           onClick={() => reload()}
           disabled={false}
-          loading={false}>
+          loading={false}
+        >
           <T id="loadingError.reloadBtn" m="Reload" />
         </KeyBlueButton>
       </div>
diff --git a/app/components/shared/Log/Log.jsx b/app/components/shared/Log/Log.jsx
index 2afb5ee7e5..f3fa046644 100644
--- a/app/components/shared/Log/Log.jsx
+++ b/app/components/shared/Log/Log.jsx
@@ -6,7 +6,8 @@ const Logs = ({ expanded, onShowLog, onHideLog, log, title }) =>
     <div className={classNames(styles.logArea, styles.hidden)}>
       <div
         className={classNames(styles.title, styles.hidden)}
-        onClick={onShowLog}>
+        onClick={onShowLog}
+      >
         {title}
       </div>
     </div>
@@ -14,7 +15,8 @@ const Logs = ({ expanded, onShowLog, onHideLog, log, title }) =>
     <div className={classNames(styles.logArea, styles.expanded)}>
       <div
         className={classNames(styles.title, styles.expanded)}
-        onClick={onHideLog}>
+        onClick={onHideLog}
+      >
         {title}
       </div>
       <div className={styles.logs}>
diff --git a/app/components/shared/PoliteiaLink.jsx b/app/components/shared/PoliteiaLink.jsx
index 7527b6ec50..818c6ebd97 100644
--- a/app/components/shared/PoliteiaLink.jsx
+++ b/app/components/shared/PoliteiaLink.jsx
@@ -29,7 +29,8 @@ const PoliteiaLink = ({
         CustomComponent
           ? (props) => <CustomComponent {...props}>{children}</CustomComponent>
           : null
-      }>
+      }
+    >
       {children}
     </Link>
   );
diff --git a/app/components/shared/SendTransaction/Form.jsx b/app/components/shared/SendTransaction/Form.jsx
index 00e7b4332a..865369b43f 100644
--- a/app/components/shared/SendTransaction/Form.jsx
+++ b/app/components/shared/SendTransaction/Form.jsx
@@ -50,7 +50,8 @@ const Form = ({
             </div>
             <div
               className={styles.detailsValueColumn}
-              data-testid="detailsValueColumn">
+              data-testid="detailsValueColumn"
+            >
               <Balance
                 flat
                 amount={isValid() ? totalSpent : 0}
@@ -80,7 +81,8 @@ const Form = ({
                     id="send.indicator.running"
                     m="Privacy Mixer, Autobuyer or Purchase Ticket Attempt running, please shut them off before sending a transaction."
                   />
-                }>
+                }
+              >
                 <SendTransactionButton
                   disabled={true}
                   buttonLabel={sendButtonLabel}
@@ -92,7 +94,8 @@ const Form = ({
                 showModal={showPassphraseModal}
                 onShow={resetShowPassphraseModal}
                 buttonLabel={sendButtonLabel}
-                account={account}>
+                account={account}
+              >
                 <div className={styles.passphraseModal}>
                   {!isSendSelf ? (
                     <>
@@ -113,7 +116,8 @@ const Form = ({
                       {outputs.map((output, index) => (
                         <div
                           className={styles.passphraseModalAddress}
-                          key={"confirm-" + index}>
+                          key={"confirm-" + index}
+                        >
                           {output.data.destination}
                         </div>
                       ))}
diff --git a/app/components/shared/TabsHeader/TabsHeader.jsx b/app/components/shared/TabsHeader/TabsHeader.jsx
index ca6aceefd3..872602eda6 100644
--- a/app/components/shared/TabsHeader/TabsHeader.jsx
+++ b/app/components/shared/TabsHeader/TabsHeader.jsx
@@ -16,7 +16,8 @@ const TabsHeader = ({
           activeTabIndex={activeTabIndex}
           onSelectTab={setActiveTabIndex}
           contentClassName={classNames(styles.tabsContent, contentClassName)}
-          className={classNames(styles.tabs, className)}>
+          className={classNames(styles.tabs, className)}
+        >
           {tabs.map((tab, index) => (
             <Tab
               label={tab.label}
@@ -25,7 +26,8 @@ const TabsHeader = ({
                 styles.tab,
                 tab.icon,
                 activeTabIndex === index ? styles.active : styles.inactive
-              )}>
+              )}
+            >
               {tab.component}
             </Tab>
           ))}
diff --git a/app/components/shared/TxHistory/LiveStakeTxRow.jsx b/app/components/shared/TxHistory/LiveStakeTxRow.jsx
index a0cee402ab..8eda0c01d9 100644
--- a/app/components/shared/TxHistory/LiveStakeTxRow.jsx
+++ b/app/components/shared/TxHistory/LiveStakeTxRow.jsx
@@ -60,7 +60,8 @@ const StakeTxRow = ({
   return (
     <Row {...{ className, pending, ...props, overview }}>
       <div
-        className={classNames(styles.myTickets, overview && styles.overview)}>
+        className={classNames(styles.myTickets, overview && styles.overview)}
+      >
         <div className={styles.iconContainer}>
           <span className={classNames(styles[className], styles.icon)} />
         </div>
@@ -93,7 +94,8 @@ const StakeTxRow = ({
         </div>
         <div className={styles.feeStatusContainer}>
           <Tooltip
-            content={<T id="txRow.live.feeStatus.tooltip" m="Fee Status" />}>
+            content={<T id="txRow.live.feeStatus.tooltip" m="Fee Status" />}
+          >
             <div className={classNames(styles.feeStatus)}>
               {feeStatusString}
             </div>
diff --git a/app/components/shared/TxHistory/Row.jsx b/app/components/shared/TxHistory/Row.jsx
index 3de8f3f417..631e093838 100644
--- a/app/components/shared/TxHistory/Row.jsx
+++ b/app/components/shared/TxHistory/Row.jsx
@@ -18,7 +18,8 @@ const Row = ({
       !overview && classNames("flex-row", styles.historyRow),
       eligible && styles.eligibleRow,
       active && styles.activeRow
-    )}>
+    )}
+  >
     <div className={classNames(styles.txInfo, className)} onClick={onClick}>
       <div className={styles.txRowWrapper}>{children}</div>
       {pending && (
diff --git a/app/components/shared/TxHistory/StakeTxRow.jsx b/app/components/shared/TxHistory/StakeTxRow.jsx
index a152ae6d63..9e69fdf917 100644
--- a/app/components/shared/TxHistory/StakeTxRow.jsx
+++ b/app/components/shared/TxHistory/StakeTxRow.jsx
@@ -72,7 +72,8 @@ const StakeTxRow = ({
   return (
     <Row {...{ className, pending, ...props, overview }}>
       <div
-        className={classNames(styles.myTickets, overview && styles.overview)}>
+        className={classNames(styles.myTickets, overview && styles.overview)}
+      >
         <div className={styles.iconContainer}>
           <span className={classNames(styles[className], styles.icon)} />
         </div>
diff --git a/app/components/shared/VericalAccordion/VerticalAccordion.jsx b/app/components/shared/VericalAccordion/VerticalAccordion.jsx
index 8fd4c076cb..abd37cdfb4 100644
--- a/app/components/shared/VericalAccordion/VerticalAccordion.jsx
+++ b/app/components/shared/VericalAccordion/VerticalAccordion.jsx
@@ -16,14 +16,12 @@ const VerticalAccordion = ({
 }) => {
   return (
     <div
-      className={classNames(
-        styles.container,
-        show && styles.active,
-        className
-      )}>
+      className={classNames(styles.container, show && styles.active, className)}
+    >
       <div
         className={classNames(styles.header, headerClassName)}
-        onClick={!disabled ? () => onToggleAccordion?.() : null}>
+        onClick={!disabled ? () => onToggleAccordion?.() : null}
+      >
         {header}
         <div
           className={classNames(
diff --git a/app/components/shared/WatchOnlyWarnNotification/WatchOnlyWarnNotification.jsx b/app/components/shared/WatchOnlyWarnNotification/WatchOnlyWarnNotification.jsx
index 197081b85e..24cf8f922b 100644
--- a/app/components/shared/WatchOnlyWarnNotification/WatchOnlyWarnNotification.jsx
+++ b/app/components/shared/WatchOnlyWarnNotification/WatchOnlyWarnNotification.jsx
@@ -14,7 +14,8 @@ const WatchOnlyWarnNotification = ({ children, isActive }) => {
     <span
       onClick={
         isActive ? () => dispatchSingleMessage(messages.watchOnlyWarn) : null
-      }>
+      }
+    >
       {children}
     </span>
   );
diff --git a/app/components/views/AccountsPage/Accounts/AccountRow/AccountDetails/AccountDetails.jsx b/app/components/views/AccountsPage/Accounts/AccountRow/AccountDetails/AccountDetails.jsx
index 1cf2a00f83..7db1385d05 100644
--- a/app/components/views/AccountsPage/Accounts/AccountRow/AccountDetails/AccountDetails.jsx
+++ b/app/components/views/AccountsPage/Accounts/AccountRow/AccountDetails/AccountDetails.jsx
@@ -119,7 +119,8 @@ const AccountsDetails = ({
         {account.accountName !== IMPORTED_ACCOUNT &&
           account.accountName !== dexAccount && (
             <Tooltip
-              content={<T id="accounts.rename.tip" m="Rename Account" />}>
+              content={<T id="accounts.rename.tip" m="Rename Account" />}
+            >
               <div
                 className={styles.renameButton}
                 onClick={showRenameAccount}
@@ -134,7 +135,8 @@ const AccountsDetails = ({
               ) : (
                 <T id="accounts.reveal.pubkey" m="Reveal Pubkey" />
               )
-            }>
+            }
+          >
             <div
               className={classNames(
                 styles.revealPubkeyButton,
diff --git a/app/components/views/AccountsPage/Accounts/AccountRow/AccountRowContent/AccountRowContent.jsx b/app/components/views/AccountsPage/Accounts/AccountRow/AccountRowContent/AccountRowContent.jsx
index 22f2fd1bdc..87f185b2a6 100644
--- a/app/components/views/AccountsPage/Accounts/AccountRow/AccountRowContent/AccountRowContent.jsx
+++ b/app/components/views/AccountsPage/Accounts/AccountRow/AccountRowContent/AccountRowContent.jsx
@@ -26,7 +26,8 @@ const AccountRowContent = ({
     show={isShowingDetails}
     arrowClassName={styles.accordionArrow}
     activeArrowClassName={styles.activeAccordionArrow}
-    className={styles.details}>
+    className={styles.details}
+  >
     {isShowingDetails ? (
       isShowingRenameAccount ? (
         getRenameAccountStyles()
diff --git a/app/components/views/AccountsPage/Accounts/AccountRow/Header/Header.jsx b/app/components/views/AccountsPage/Accounts/AccountRow/Header/Header.jsx
index cea25ff01b..2bc5a02fe1 100644
--- a/app/components/views/AccountsPage/Accounts/AccountRow/Header/Header.jsx
+++ b/app/components/views/AccountsPage/Accounts/AccountRow/Header/Header.jsx
@@ -19,7 +19,8 @@ const Header = React.memo(
           isImported(account) && !hasTickets && styles.disabled,
           isMixed && styles.mixed,
           isChange && styles.unmixed
-        )}>
+        )}
+      >
         <div className={styles.topName}>
           {account.accountName === DEFAULT_ACCOUNT ? (
             <T id="accounts.name.default" m="Primary Account" />
diff --git a/app/components/views/AccountsPage/Accounts/AccountRow/RenameAccount/RenameAccount.jsx b/app/components/views/AccountsPage/Accounts/AccountRow/RenameAccount/RenameAccount.jsx
index 4d3ba13f82..0da38e3e97 100644
--- a/app/components/views/AccountsPage/Accounts/AccountRow/RenameAccount/RenameAccount.jsx
+++ b/app/components/views/AccountsPage/Accounts/AccountRow/RenameAccount/RenameAccount.jsx
@@ -47,12 +47,14 @@ const RenameAccount = ({
     <div>
       <InvisibleButton
         className={styles.confirmNewAccount}
-        onClick={hideRenameAccount}>
+        onClick={hideRenameAccount}
+      >
         <T id="accounts.cancelRenameBtn" m="Cancel" />
       </InvisibleButton>
       <KeyBlueButton
         className={styles.confirmNewAccount}
-        onClick={renameAccount}>
+        onClick={renameAccount}
+      >
         <T id="accounts.renameBtn" m="Rename" />
       </KeyBlueButton>
     </div>
diff --git a/app/components/views/AccountsPage/AccountsPage.jsx b/app/components/views/AccountsPage/AccountsPage.jsx
index 22465d943b..a6da0f331a 100644
--- a/app/components/views/AccountsPage/AccountsPage.jsx
+++ b/app/components/views/AccountsPage/AccountsPage.jsx
@@ -48,7 +48,8 @@ const AccountsPage = () => {
         <AccountsPageHeader
           {...{ isCreateAccountDisabled, onGetNextAccountAttempt }}
         />
-      }>
+      }
+    >
       <AccountsList />
     </StandalonePage>
   );
diff --git a/app/components/views/AgendaDetailsPage/AgendaDetails.jsx b/app/components/views/AgendaDetailsPage/AgendaDetails.jsx
index 48680e5a59..17dbcf47e3 100644
--- a/app/components/views/AgendaDetailsPage/AgendaDetails.jsx
+++ b/app/components/views/AgendaDetailsPage/AgendaDetails.jsx
@@ -20,7 +20,8 @@ const AgendaDetails = () => {
       <div className={classNames(styles.cardWrapper)}>
         <div
           className={classNames(styles.backButton, "flex-centralize")}
-          onClick={goBackHistory}>
+          onClick={goBackHistory}
+        >
           <div className={styles.backArrow}></div>
         </div>
         <AgendaCard {...{ agenda, selectedChoice }} />
diff --git a/app/components/views/AgendaDetailsPage/helpers/AgendaCard/AgendaCard.jsx b/app/components/views/AgendaDetailsPage/helpers/AgendaCard/AgendaCard.jsx
index aefc328055..208576387c 100644
--- a/app/components/views/AgendaDetailsPage/helpers/AgendaCard/AgendaCard.jsx
+++ b/app/components/views/AgendaDetailsPage/helpers/AgendaCard/AgendaCard.jsx
@@ -31,7 +31,8 @@ const AgendaCard = ({ agenda, selectedChoice, className }) => {
                   m="This agenda has finished voting and {passed}."
                   values={{ passed: agenda.passed ? "PASSED" : "NOT PASSED" }}
                 />
-              }>
+              }
+            >
               <StatusTag
                 className={styles.statusTag}
                 type="greenCheck"
@@ -46,7 +47,8 @@ const AgendaCard = ({ agenda, selectedChoice, className }) => {
                   id="agenda.card.inProgressTooltip"
                   m="Voting is still in progress."
                 />
-              }>
+              }
+            >
               <StatusTag
                 className={styles.statusTag}
                 type="bluePending"
diff --git a/app/components/views/DexPage/ConfirmDexSeed/ConfirmDexSeed.jsx b/app/components/views/DexPage/ConfirmDexSeed/ConfirmDexSeed.jsx
index 01caf2224b..dc0f6d2a05 100644
--- a/app/components/views/DexPage/ConfirmDexSeed/ConfirmDexSeed.jsx
+++ b/app/components/views/DexPage/ConfirmDexSeed/ConfirmDexSeed.jsx
@@ -17,7 +17,8 @@ const ConfirmDexSeed = () => {
     <div className={styles.container}>
       <Message
         kind="warning"
-        className={classNames(styles.isRow, styles.seedInstructions)}>
+        className={classNames(styles.isRow, styles.seedInstructions)}
+      >
         <T
           id="dex.instructions.seed"
           m="You should carefully write down your application
@@ -39,7 +40,8 @@ const ConfirmDexSeed = () => {
                 contentClassName={styles.seedTooltip}
                 content={
                   <T id="dex.hide.seed" m="Click to Hide DEX Account Seed" />
-                }>
+                }
+              >
                 <div className={styles.seedArea} onClick={onToggleSeed}>
                   {dexSeed}
                 </div>
diff --git a/app/components/views/DexPage/CreateDexAcctPage/CreateDexAcctPage.jsx b/app/components/views/DexPage/CreateDexAcctPage/CreateDexAcctPage.jsx
index 671d445b6e..072f66f2f7 100644
--- a/app/components/views/DexPage/CreateDexAcctPage/CreateDexAcctPage.jsx
+++ b/app/components/views/DexPage/CreateDexAcctPage/CreateDexAcctPage.jsx
@@ -48,7 +48,8 @@ const CreateDexAcctPage = () => {
           <KeyBlueButton
             disabled={dexAccountAttempt || dexSelectAccountAttempt || !account}
             loading={dexSelectAccountAttempt}
-            onClick={() => onSelectDexAccount(account.name)}>
+            onClick={() => onSelectDexAccount(account.name)}
+          >
             <T
               id="dex.createDexAccount.selectAnExistingAccount"
               m="Select an existing account"
diff --git a/app/components/views/FatalErrorPage/FatalErrorPage.jsx b/app/components/views/FatalErrorPage/FatalErrorPage.jsx
index 2bf12e7242..0e33551e3a 100644
--- a/app/components/views/FatalErrorPage/FatalErrorPage.jsx
+++ b/app/components/views/FatalErrorPage/FatalErrorPage.jsx
@@ -141,7 +141,8 @@ function FatalErrorPage() {
           {isAdvancedDaemon && (
             <KeyBlueButton
               className={styles.button}
-              onClick={backToCredentials}>
+              onClick={backToCredentials}
+            >
               <T
                 id="fatal.retry.connection.button"
                 m="Return to Daemon Connection"
diff --git a/app/components/views/GetStartedPage/AdvancedStartup/Form/Form.jsx b/app/components/views/GetStartedPage/AdvancedStartup/Form/Form.jsx
index 8860d1ae9b..32eeca770c 100644
--- a/app/components/views/GetStartedPage/AdvancedStartup/Form/Form.jsx
+++ b/app/components/views/GetStartedPage/AdvancedStartup/Form/Form.jsx
@@ -106,7 +106,8 @@ const AdvancedBodyBase = ({
           ) : (
             <KeyBlueButton
               onClick={onSubmitAppDataForm}
-              disabled={!appDataValid}>
+              disabled={!appDataValid}
+            >
               <T id="login.form.appdata.button" m="Start AppData Daemon" />
             </KeyBlueButton>
           )}
diff --git a/app/components/views/GetStartedPage/CreateWalletPage/ConfirmSeed/ConfirmSeedForm/ConfirmSeedForm.jsx b/app/components/views/GetStartedPage/CreateWalletPage/ConfirmSeed/ConfirmSeedForm/ConfirmSeedForm.jsx
index d4d50be0a6..7f5291d7c2 100644
--- a/app/components/views/GetStartedPage/CreateWalletPage/ConfirmSeed/ConfirmSeedForm/ConfirmSeedForm.jsx
+++ b/app/components/views/GetStartedPage/CreateWalletPage/ConfirmSeed/ConfirmSeedForm/ConfirmSeedForm.jsx
@@ -23,7 +23,8 @@ export const ConfirmSeedForm = ({
     className={classNames(
       styles.container,
       posBtBarToBottom && styles.posBtBarToBottom
-    )}>
+    )}
+  >
     <div className={styles.title}>
       <T id="confirmSeed.title" m="Seed phrase verification" />
     </div>
diff --git a/app/components/views/GetStartedPage/CreateWalletPage/ConfirmSeed/ConfirmSeedForm/SeedWordRow/SeedWordRow.jsx b/app/components/views/GetStartedPage/CreateWalletPage/ConfirmSeed/ConfirmSeedForm/SeedWordRow/SeedWordRow.jsx
index b118b10c8a..7ea640e62f 100644
--- a/app/components/views/GetStartedPage/CreateWalletPage/ConfirmSeed/ConfirmSeedForm/SeedWordRow/SeedWordRow.jsx
+++ b/app/components/views/GetStartedPage/CreateWalletPage/ConfirmSeed/ConfirmSeedForm/SeedWordRow/SeedWordRow.jsx
@@ -31,7 +31,8 @@ const SeedWordRow = ({
               isSelectedWordInvalid && showError && styles.invalid
             )}
             key={`${index}-${wordToShowIndex}`}
-            onClick={() => onSeedButtonClick(index, wordToShowIndex)}>
+            onClick={() => onSeedButtonClick(index, wordToShowIndex)}
+          >
             {wordToShow}
           </button>
         );
diff --git a/app/components/views/GetStartedPage/CreateWalletPage/ExistingSeed/Form/Form.jsx b/app/components/views/GetStartedPage/CreateWalletPage/ExistingSeed/Form/Form.jsx
index 2368fb3f38..93b1611803 100644
--- a/app/components/views/GetStartedPage/CreateWalletPage/ExistingSeed/Form/Form.jsx
+++ b/app/components/views/GetStartedPage/CreateWalletPage/ExistingSeed/Form/Form.jsx
@@ -38,7 +38,8 @@ const ExistingSeedForm = ({
 }) => (
   <Container>
     <TitleWrapper
-      title={<T id="createWallet.restore.title" m="Restore existing wallet" />}>
+      title={<T id="createWallet.restore.title" m="Restore existing wallet" />}
+    >
       {/* XXX: Use pi-iu's toggle */}
       <TextToggle
         activeButton="left"
diff --git a/app/components/views/GetStartedPage/CreateWalletPage/helpers/ButtonsBar/ButtonsBar.jsx b/app/components/views/GetStartedPage/CreateWalletPage/helpers/ButtonsBar/ButtonsBar.jsx
index 52e4918064..a2590ef7e4 100644
--- a/app/components/views/GetStartedPage/CreateWalletPage/helpers/ButtonsBar/ButtonsBar.jsx
+++ b/app/components/views/GetStartedPage/CreateWalletPage/helpers/ButtonsBar/ButtonsBar.jsx
@@ -19,12 +19,14 @@ const ButtonsBar = ({
       className={classNames(styles.primaryButton, primaryButtonClassName)}
       disabled={disabled}
       loading={loading}
-      onClick={onClick}>
+      onClick={onClick}
+    >
       {message}
     </KeyBlueButton>
     <InvisibleButton
       className={classNames(styles.backButton, backButtonClassName)}
-      onClick={onBackClick}>
+      onClick={onBackClick}
+    >
       {backMessage || <BackBtnMsg />}
     </InvisibleButton>
   </div>
diff --git a/app/components/views/GetStartedPage/CreateWalletPage/helpers/SeedWord/SeedWord.jsx b/app/components/views/GetStartedPage/CreateWalletPage/helpers/SeedWord/SeedWord.jsx
index e7f9fce176..830af96689 100644
--- a/app/components/views/GetStartedPage/CreateWalletPage/helpers/SeedWord/SeedWord.jsx
+++ b/app/components/views/GetStartedPage/CreateWalletPage/helpers/SeedWord/SeedWord.jsx
@@ -22,7 +22,8 @@ const SeedWord = ({
         word && error && styles.error,
         !isConfirm && word && !error && !show && styles.populated,
         !isConfirm && !word && !error && !show && styles.restore
-      )}>
+      )}
+    >
       <span className={styles.number}>{index + 1}.</span>
       <span className={styles.word}>
         {show ? (
diff --git a/app/components/views/GetStartedPage/GetStartedPage.jsx b/app/components/views/GetStartedPage/GetStartedPage.jsx
index 1d290d54cb..98a0a9443f 100644
--- a/app/components/views/GetStartedPage/GetStartedPage.jsx
+++ b/app/components/views/GetStartedPage/GetStartedPage.jsx
@@ -33,7 +33,8 @@ const GetStarted = ({
     <PageBody
       data-testid="getstarted-pagebody"
       getStarted
-      isTestNet={isTestNet}>
+      isTestNet={isTestNet}
+    >
       <div className={classNames(styles.container)}>
         <div className={styles.topLinks}>
           {updateAvailable && (
@@ -50,7 +51,8 @@ const GetStarted = ({
                 className={classNames(
                   styles.invisibleButton,
                   styles.tutorialButton
-                )}>
+                )}
+              >
                 <LearnBasicsMsg />
               </InvisibleButton>
               <InvisibleButton
@@ -58,17 +60,20 @@ const GetStarted = ({
                 className={classNames(
                   styles.invisibleButton,
                   styles.releaseNotesButton
-                )}>
+                )}
+              >
                 <ReleaseInfoMsg />
               </InvisibleButton>
               <InvisibleButton
                 onClick={onShowSettings}
-                className={styles.invisibleButton}>
+                className={styles.invisibleButton}
+              >
                 <SettingsLinkMsg />
               </InvisibleButton>
               <InvisibleButton
                 onClick={onShowLogs}
-                className={styles.invisibleButton}>
+                className={styles.invisibleButton}
+              >
                 <LogsLinkMsg />
               </InvisibleButton>
             </>
diff --git a/app/components/views/GetStartedPage/PreCreateWallet/CreateTrezorWalletForm/CreateTrezorWalletForm.jsx b/app/components/views/GetStartedPage/PreCreateWallet/CreateTrezorWalletForm/CreateTrezorWalletForm.jsx
index f31d8607ab..2b9f7944ab 100644
--- a/app/components/views/GetStartedPage/PreCreateWallet/CreateTrezorWalletForm/CreateTrezorWalletForm.jsx
+++ b/app/components/views/GetStartedPage/PreCreateWallet/CreateTrezorWalletForm/CreateTrezorWalletForm.jsx
@@ -81,12 +81,14 @@ const CreateTrezorWalletForm = ({
           <div className={styles.buttonContrainer}>
             <InvisibleButton
               onClick={hideCreateWalletForm}
-              className={styles.cancelBt}>
+              className={styles.cancelBt}
+            >
               <T id="createTrezorWallet.cancel" m="Cancel" />
             </InvisibleButton>
             <KeyBlueButton
               onClick={createWallet}
-              classNames={styles.createWalletBt}>
+              classNames={styles.createWalletBt}
+            >
               <T id="createTrezorWallet.createWallet" m="Create Wallet" />
             </KeyBlueButton>
           </div>
diff --git a/app/components/views/GetStartedPage/PreCreateWallet/CreateWalletForm/CreateWalletForm.jsx b/app/components/views/GetStartedPage/PreCreateWallet/CreateWalletForm/CreateWalletForm.jsx
index ca38c40138..97fcbdb2a1 100644
--- a/app/components/views/GetStartedPage/PreCreateWallet/CreateWalletForm/CreateWalletForm.jsx
+++ b/app/components/views/GetStartedPage/PreCreateWallet/CreateWalletForm/CreateWalletForm.jsx
@@ -61,7 +61,8 @@ const CreateWalletForm = ({
       <Label>
         {!isCreateNewWallet ? (
           <Tooltip
-            content={intl.formatMessage(messages.messageWalletNameTooltip)}>
+            content={intl.formatMessage(messages.messageWalletNameTooltip)}
+          >
             <T id="createwallet.walletname.label" m="Wallet Name" />
           </Tooltip>
         ) : (
@@ -148,7 +149,8 @@ const CreateWalletForm = ({
                 />
               </div>
               <div
-                className={classNames(styles.advancedOption, styles.gapLimit)}>
+                className={classNames(styles.advancedOption, styles.gapLimit)}
+              >
                 <label id="gap-limit-input">
                   <T id="createwallet.gapLimit.label" m="Gap Limit" />:
                 </label>
diff --git a/app/components/views/GetStartedPage/SetupWallet/SetMixedAcctPage/SetMixedAcctPage.jsx b/app/components/views/GetStartedPage/SetupWallet/SetMixedAcctPage/SetMixedAcctPage.jsx
index b44dd91f6c..24502dc9e4 100644
--- a/app/components/views/GetStartedPage/SetupWallet/SetMixedAcctPage/SetMixedAcctPage.jsx
+++ b/app/components/views/GetStartedPage/SetupWallet/SetMixedAcctPage/SetMixedAcctPage.jsx
@@ -99,7 +99,8 @@ export default ({ onSendContinue }) => {
             {coinjoinSumByAcct.map(({ acctIdx, coinjoinSum }) => (
               <div
                 key={acctIdx}
-                className={classNames("flex-row", styles.card)}>
+                className={classNames("flex-row", styles.card)}
+              >
                 <div className={classNames("flex-column", styles.labelWrapper)}>
                   <div className="flex-row">
                     <div className={styles.accountIcon} />
diff --git a/app/components/views/GetStartedPage/SetupWallet/hooks.js b/app/components/views/GetStartedPage/SetupWallet/hooks.js
index d6195921e7..e374966b53 100644
--- a/app/components/views/GetStartedPage/SetupWallet/hooks.js
+++ b/app/components/views/GetStartedPage/SetupWallet/hooks.js
@@ -175,7 +175,8 @@ export const useWalletSetup = (settingUpWalletRef) => {
                     <ExternalLink
                       href={
                         "https://docs.decred.org/wallets/decrediton/migrations"
-                      }>
+                      }
+                    >
                       <T id="getstarted.setAccountsPass.docs" m="Decred docs" />
                     </ExternalLink>
                   )
diff --git a/app/components/views/GetStartedPage/TutorialPage/Page.jsx b/app/components/views/GetStartedPage/TutorialPage/Page.jsx
index 9b6498954c..c375ba3923 100644
--- a/app/components/views/GetStartedPage/TutorialPage/Page.jsx
+++ b/app/components/views/GetStartedPage/TutorialPage/Page.jsx
@@ -40,7 +40,8 @@ const TutorialPage = ({
         <div className={styles.mainToolbar}>
           <InvisibleButton
             className={styles.skipButton}
-            onClick={finishTutorial}>
+            onClick={finishTutorial}
+          >
             {tutorialStep < 3 ? (
               <T id="tutorial.skipBtn" m={"Skip"} />
             ) : (
@@ -56,7 +57,8 @@ const TutorialPage = ({
 
           <KeyBlueButton
             className={styles.nextButton}
-            onClick={tutorialStep < 3 ? onNextTutorialStep : finishTutorial}>
+            onClick={tutorialStep < 3 ? onNextTutorialStep : finishTutorial}
+          >
             <T id="tutorial.nextBtn" m={"Next"} />
           </KeyBlueButton>
         </div>
diff --git a/app/components/views/GetStartedPage/WalletSelection/Form/Form.jsx b/app/components/views/GetStartedPage/WalletSelection/Form/Form.jsx
index b8610894f6..f1cc3cb6d6 100644
--- a/app/components/views/GetStartedPage/WalletSelection/Form/Form.jsx
+++ b/app/components/views/GetStartedPage/WalletSelection/Form/Form.jsx
@@ -117,7 +117,8 @@ const WalletSelectionForm = ({
                       !editWallets
                         ? () => submitChosenWallet({ selectedWallet: wallet })
                         : null
-                    }>
+                    }
+                  >
                     <div
                       style={
                         wallet.displayWalletGradient && {
@@ -139,7 +140,8 @@ const WalletSelectionForm = ({
                         "flex-row",
                         "justify-end",
                         styles.walletTypeIcons
-                      )}>
+                      )}
+                    >
                       {editWallets ? (
                         <div>
                           <Tooltip
@@ -148,7 +150,8 @@ const WalletSelectionForm = ({
                                 id="walletselection.removeWalletButton"
                                 m="Remove Wallet"
                               />
-                            }>
+                            }
+                          >
                             <RemoveWalletButton
                               className={classNames(
                                 styles.displayWalletButton,
@@ -184,7 +187,8 @@ const WalletSelectionForm = ({
                               <Tooltip
                                 content={
                                   <T id="walletselection.privacy" m="Privacy" />
-                                }>
+                                }
+                              >
                                 <Icon type="privacy" size={21} />
                               </Tooltip>
                             </div>
@@ -194,7 +198,8 @@ const WalletSelectionForm = ({
                               <Tooltip
                                 content={
                                   <T id="walletselection.ln" m="Lightning" />
-                                }>
+                                }
+                              >
                                 <Icon type="ln" size={21} />
                               </Tooltip>
                             </div>
@@ -204,7 +209,8 @@ const WalletSelectionForm = ({
                               <Tooltip
                                 content={
                                   <T id="walletselection.trezor" m="Trezor" />
-                                }>
+                                }
+                              >
                                 <Icon
                                   type="trezor"
                                   size={21}
@@ -221,7 +227,8 @@ const WalletSelectionForm = ({
                                     id="walletselection.watchOnly"
                                     m="Watch Only"
                                   />
-                                }>
+                                }
+                              >
                                 <Icon type="watchOnly" size={21} />
                               </Tooltip>
                             </div>
diff --git a/app/components/views/GetStartedPage/messages/messages.jsx b/app/components/views/GetStartedPage/messages/messages.jsx
index df9a250106..9ef186bf68 100644
--- a/app/components/views/GetStartedPage/messages/messages.jsx
+++ b/app/components/views/GetStartedPage/messages/messages.jsx
@@ -144,7 +144,8 @@ export const UpdateAvailableLink = ({
         m="New version {version} available"
         values={{ version: updateAvailable }}
       />
-    }>
+    }
+  >
     <ExternalLink href="https://decred.org/downloads" className={className}>
       <T id="getStarted.updateAvailable" m="Update Available" />
     </ExternalLink>
diff --git a/app/components/views/GovernancePage/Blockchain/AgendaOverview/AgendaOverview.jsx b/app/components/views/GovernancePage/Blockchain/AgendaOverview/AgendaOverview.jsx
index a6afbe5e30..5bb3a6fa5e 100644
--- a/app/components/views/GovernancePage/Blockchain/AgendaOverview/AgendaOverview.jsx
+++ b/app/components/views/GovernancePage/Blockchain/AgendaOverview/AgendaOverview.jsx
@@ -9,7 +9,8 @@ const AgendaOverview = ({
 }) => (
   <div
     onClick={() => viewAgendaDetailsHandler(agenda.name)}
-    className={classNames(styles.cardWrapper)}>
+    className={classNames(styles.cardWrapper)}
+  >
     <AgendaCard {...{ agenda, selectedChoice, className: styles.overview }} />
     <div className={classNames(styles.continueButton, "flex-centralize")}>
       <div className={styles.continueArrow}></div>
diff --git a/app/components/views/GovernancePage/Blockchain/Blockchain.jsx b/app/components/views/GovernancePage/Blockchain/Blockchain.jsx
index 5049f38639..919ab40eca 100644
--- a/app/components/views/GovernancePage/Blockchain/Blockchain.jsx
+++ b/app/components/views/GovernancePage/Blockchain/Blockchain.jsx
@@ -76,7 +76,8 @@ const Blockchain = () => {
                 link: (
                   <ExternalLink
                     className={styles.proposalsLink}
-                    href="https://docs.decred.org/getting-started/user-guides/agenda-voting/">
+                    href="https://docs.decred.org/getting-started/user-guides/agenda-voting/"
+                  >
                     docs.decred.org
                   </ExternalLink>
                 )
@@ -88,7 +89,8 @@ const Blockchain = () => {
               <ExternalButton
                 className={styles.politeiaButton}
                 href="https://voting.decred.org"
-                hrefTestNet="https://voting.decred.org/testnet">
+                hrefTestNet="https://voting.decred.org/testnet"
+              >
                 <T
                   id="votingPreferences.dashboard"
                   m="Go to Voting Dashboard"
@@ -119,7 +121,8 @@ const Blockchain = () => {
                     outdatedUsedVsps?.length === 1 ? (
                       <ExternalLink
                         className={styles.proposalsLink}
-                        href={outdatedUsedVsps[0].host}>
+                        href={outdatedUsedVsps[0].host}
+                      >
                         {outdatedUsedVsps[0].host}
                       </ExternalLink>
                     ) : (
@@ -128,7 +131,8 @@ const Blockchain = () => {
                           <li key={vsp.host}>
                             <ExternalLink
                               className={styles.proposalsLink}
-                              href={vsp.host}>
+                              href={vsp.host}
+                            >
                               {vsp.host}
                             </ExternalLink>
                           </li>
@@ -154,7 +158,8 @@ const Blockchain = () => {
         <div>
           <Tooltip
             contentClassName={styles.sortByTooltip}
-            content={<T id="agendas.sortby.tooltip" m="Sort By" />}>
+            content={<T id="agendas.sortby.tooltip" m="Sort By" />}
+          >
             <EyeFilterMenu
               labelKey="label"
               keyField="value"
diff --git a/app/components/views/GovernancePage/Proposals/PoliteiaDisabled.jsx b/app/components/views/GovernancePage/Proposals/PoliteiaDisabled.jsx
index 200ee0c5c6..4404f37c93 100644
--- a/app/components/views/GovernancePage/Proposals/PoliteiaDisabled.jsx
+++ b/app/components/views/GovernancePage/Proposals/PoliteiaDisabled.jsx
@@ -13,7 +13,8 @@ export default ({ getTokenAndInitialBatch }) => (
     </p>
     <EnableExternalRequestButton
       requestType={EXTERNALREQUEST_POLITEIA}
-      onClick={getTokenAndInitialBatch}>
+      onClick={getTokenAndInitialBatch}
+    >
       <T id="proposals.enablePoliteia.button" m="Enable Politeia Integration" />
     </EnableExternalRequestButton>
   </div>
diff --git a/app/components/views/GovernancePage/Proposals/ProposalsList/ProposalsList.jsx b/app/components/views/GovernancePage/Proposals/ProposalsList/ProposalsList.jsx
index 5cdd86c568..99f1906399 100644
--- a/app/components/views/GovernancePage/Proposals/ProposalsList/ProposalsList.jsx
+++ b/app/components/views/GovernancePage/Proposals/ProposalsList/ProposalsList.jsx
@@ -85,7 +85,8 @@ const ProposalsList = ({ finishedVote, tab, isDarkTheme }) => {
               loadMore={loadMore}
               initialLoad={false}
               useWindow={false}
-              threshold={300}>
+              threshold={300}
+            >
               <div className={styles.proposalList}>
                 {proposals[selectedFilter].map((v) => (
                   <ProposalsListItem
diff --git a/app/components/views/GovernancePage/Proposals/ProposalsListItem/ProposalsListItem.jsx b/app/components/views/GovernancePage/Proposals/ProposalsListItem/ProposalsListItem.jsx
index d6b0bcffe7..09e5914481 100644
--- a/app/components/views/GovernancePage/Proposals/ProposalsListItem/ProposalsListItem.jsx
+++ b/app/components/views/GovernancePage/Proposals/ProposalsListItem/ProposalsListItem.jsx
@@ -48,7 +48,8 @@ const ProposalsListItem = ({
         !approved && styles.declined,
         finishedVote && styles.ended,
         isModified && styles.modified
-      )}>
+      )}
+    >
       <ProposalCard
         {...{
           isTestnet,
diff --git a/app/components/views/GovernancePage/Proposals/ProposalsTab.jsx b/app/components/views/GovernancePage/Proposals/ProposalsTab.jsx
index afd9bfe042..653f757d22 100644
--- a/app/components/views/GovernancePage/Proposals/ProposalsTab.jsx
+++ b/app/components/views/GovernancePage/Proposals/ProposalsTab.jsx
@@ -90,7 +90,8 @@ const ProposalsTab = ({ isDarkTheme }) => {
                   m="Refresh Proposals"
                 />
               }
-              placement="right">
+              placement="right"
+            >
               <ButtonIcon
                 type="refresh"
                 iconColor={iconColor}
@@ -121,7 +122,8 @@ const ProposalsTab = ({ isDarkTheme }) => {
             className={styles.politeiaButton}
             CustomComponent={Button}
             path="/record/new"
-            isTestnet={isTestnet}>
+            isTestnet={isTestnet}
+          >
             <T id="proposals.community.createLink" m="Create a Proposal" />
           </PiLink>
         </div>
diff --git a/app/components/views/GovernancePage/TreasurySpendingTab/TreasurySpendingTab.jsx b/app/components/views/GovernancePage/TreasurySpendingTab/TreasurySpendingTab.jsx
index 9c6954e8dd..ed2321c07f 100644
--- a/app/components/views/GovernancePage/TreasurySpendingTab/TreasurySpendingTab.jsx
+++ b/app/components/views/GovernancePage/TreasurySpendingTab/TreasurySpendingTab.jsx
@@ -32,7 +32,8 @@ const TreasurySpendingTab = () => {
                 link: (
                   <ExternalLink
                     className={styles.proposalsLink}
-                    href={dcrdSourceLink}>
+                    href={dcrdSourceLink}
+                  >
                     dcrd source code
                   </ExternalLink>
                 )
diff --git a/app/components/views/HomePage/HomePage.jsx b/app/components/views/HomePage/HomePage.jsx
index cc105af874..04b681f510 100644
--- a/app/components/views/HomePage/HomePage.jsx
+++ b/app/components/views/HomePage/HomePage.jsx
@@ -75,7 +75,8 @@ export default () => {
         }}
       />
       <div
-        className={classNames(styles.overviewTransactionsTicket, styles.isRow)}>
+        className={classNames(styles.overviewTransactionsTicket, styles.isRow)}
+      >
         <RecentTransactions
           {...{
             transactions,
diff --git a/app/components/views/HomePage/RecentTickets/RecentTickets.jsx b/app/components/views/HomePage/RecentTickets/RecentTickets.jsx
index 8e5b10da44..c429614165 100644
--- a/app/components/views/HomePage/RecentTickets/RecentTickets.jsx
+++ b/app/components/views/HomePage/RecentTickets/RecentTickets.jsx
@@ -49,7 +49,8 @@ const RecentTickets = ({
           </Link>
           <Link
             to="/tutorial/ticketLifecycle"
-            className={styles.ticketLifeCycle}>
+            className={styles.ticketLifeCycle}
+          >
             <T
               id="home.noTickets.lifecycle"
               m="Learn About the Ticket Lifecycle"
diff --git a/app/components/views/HomePage/RecentTransactions/RecentTransactions.jsx b/app/components/views/HomePage/RecentTransactions/RecentTransactions.jsx
index 209d6b5ade..43000cd3fe 100644
--- a/app/components/views/HomePage/RecentTransactions/RecentTransactions.jsx
+++ b/app/components/views/HomePage/RecentTransactions/RecentTransactions.jsx
@@ -49,7 +49,8 @@ const RecentTransactions = ({
             </Link>
             <ExternalLink
               href="https://decred.org/exchanges"
-              className={styles.buy}>
+              className={styles.buy}
+            >
               <T
                 id="home.noTransactions.buyFromExchanges"
                 m="Buy Decred from Exchanges"
diff --git a/app/components/views/HomePage/Tabs/BalanceTab/BalanceTab.jsx b/app/components/views/HomePage/Tabs/BalanceTab/BalanceTab.jsx
index d0ae995274..119d2ef555 100644
--- a/app/components/views/HomePage/Tabs/BalanceTab/BalanceTab.jsx
+++ b/app/components/views/HomePage/Tabs/BalanceTab/BalanceTab.jsx
@@ -83,7 +83,8 @@ const BalanceTab = () => {
                   amount={unconfirmedTotalBalance}
                 />
               </div>
-            }>
+            }
+          >
             <div className={styles.overviewSpendableLockedWrapperArea}>
               <Balance
                 classNameWrapper={classNames(
diff --git a/app/components/views/HomePage/Tabs/TicketsTab/TicketsTab.jsx b/app/components/views/HomePage/Tabs/TicketsTab/TicketsTab.jsx
index f2ef7f5c42..87f0960a3c 100644
--- a/app/components/views/HomePage/Tabs/TicketsTab/TicketsTab.jsx
+++ b/app/components/views/HomePage/Tabs/TicketsTab/TicketsTab.jsx
@@ -25,12 +25,14 @@ const TicketsTab = () => {
             className={classNames(
               sharedStyles.overviewSpendableLockedWrapperArea,
               sharedStyles.tickets
-            )}>
+            )}
+          >
             <div
               className={classNames(
                 sharedStyles.overviewBalanceSpendableLocked,
                 sharedStyles.active
-              )}>
+              )}
+            >
               <T
                 id="home.activeTicketsCount"
                 m="{count, plural, one {{fmtCount} active and locked ticket} other {{fmtCount} active and locked tickets}}"
@@ -64,7 +66,8 @@ const TicketsTab = () => {
               className={classNames(
                 sharedStyles.overviewBalanceSpendableLocked,
                 sharedStyles.voted
-              )}>
+              )}
+            >
               <T
                 id="home.votedTicketsCount"
                 m="{count, plural, one {{fmtCount} voted ticket} other {{fmtCount} voted tickets}}"
diff --git a/app/components/views/LNPage/AdvancedTab/AdvancedTab.jsx b/app/components/views/LNPage/AdvancedTab/AdvancedTab.jsx
index dfd9b5c3a3..5d6b34f296 100644
--- a/app/components/views/LNPage/AdvancedTab/AdvancedTab.jsx
+++ b/app/components/views/LNPage/AdvancedTab/AdvancedTab.jsx
@@ -46,7 +46,8 @@ const AdvancedTab = () => {
       </div>
       <Subtitle
         title={<T id="ln.advancedTab.backup" m="Backup" />}
-        className={styles.backupSubtitle}>
+        className={styles.backupSubtitle}
+      >
         <div className={styles.backupInfoBtn}>
           <InfoDocModalButton document="LNBackupInfo" double draggable />
         </div>
diff --git a/app/components/views/LNPage/AdvancedTab/Network/QueryRoutes/QueryRoutes.jsx b/app/components/views/LNPage/AdvancedTab/Network/QueryRoutes/QueryRoutes.jsx
index 3878fbc8fe..63732da38e 100644
--- a/app/components/views/LNPage/AdvancedTab/Network/QueryRoutes/QueryRoutes.jsx
+++ b/app/components/views/LNPage/AdvancedTab/Network/QueryRoutes/QueryRoutes.jsx
@@ -46,7 +46,8 @@ const QueryRoutes = ({
       </div>
       <KeyBlueButton
         className={styles.queryRoutesButton}
-        onClick={requestRoutes}></KeyBlueButton>
+        onClick={requestRoutes}
+      ></KeyBlueButton>
     </div>
   );
 };
diff --git a/app/components/views/LNPage/AdvancedTab/Network/Tabs/Tabs.jsx b/app/components/views/LNPage/AdvancedTab/Network/Tabs/Tabs.jsx
index d5137d7c8d..cb722a26a8 100644
--- a/app/components/views/LNPage/AdvancedTab/Network/Tabs/Tabs.jsx
+++ b/app/components/views/LNPage/AdvancedTab/Network/Tabs/Tabs.jsx
@@ -15,7 +15,8 @@ const Tabs = ({ active, set }) => {
               ? styles.tabBackgroundSelected
               : styles.tabBackgroundUnselected
           )}
-          onClick={() => set(QUERY_NODE)}>
+          onClick={() => set(QUERY_NODE)}
+        >
           <T id="ln.networkTab.tabQueryNode" m="Query Node" />
         </div>
         <div
@@ -25,7 +26,8 @@ const Tabs = ({ active, set }) => {
               ? styles.tabBackgroundSelected
               : styles.tabBackgroundUnselected
           )}
-          onClick={() => set(QUERY_ROUTE)}>
+          onClick={() => set(QUERY_ROUTE)}
+        >
           <T id="ln.networkTab.tabQueryRoute" m="Query Route" />
         </div>
       </div>
diff --git a/app/components/views/LNPage/AdvancedTab/Watchtowers/AddWatchtower/AddWatchtower.jsx b/app/components/views/LNPage/AdvancedTab/Watchtowers/AddWatchtower/AddWatchtower.jsx
index 5754f0cb2c..332b40b68e 100644
--- a/app/components/views/LNPage/AdvancedTab/Watchtowers/AddWatchtower/AddWatchtower.jsx
+++ b/app/components/views/LNPage/AdvancedTab/Watchtowers/AddWatchtower/AddWatchtower.jsx
@@ -14,7 +14,8 @@ const AddWatchtower = ({ addWatchtower, listWatchtowers }) => {
         <div className={styles.addWatchtowerNest}>
           <label
             className={styles.addWatchtowerNestPrefix}
-            htmlFor="towerIdInput">
+            htmlFor="towerIdInput"
+          >
             <T id="ln.watchtowersTab.Pubkey" m="Tower ID:" />
           </label>
           <TextInput
@@ -26,7 +27,8 @@ const AddWatchtower = ({ addWatchtower, listWatchtowers }) => {
         <div className={styles.addWatchtowerNest}>
           <label
             className={styles.addWatchtowerNestPrefix}
-            htmlFor="addressInput">
+            htmlFor="addressInput"
+          >
             <T id="ln.watchtowersTab.address" m="Address:" />
           </label>
           <TextInput
@@ -40,7 +42,8 @@ const AddWatchtower = ({ addWatchtower, listWatchtowers }) => {
         className={styles.addWatchtowerButton}
         onClick={() =>
           addWatchtower(pubkey, addr).then(() => listWatchtowers())
-        }>
+        }
+      >
         <T id="ln.watchtowersTab.addBtn" m="Add" />
       </KeyBlueButton>
     </div>
diff --git a/app/components/views/LNPage/AdvancedTab/Watchtowers/Watchtowers.jsx b/app/components/views/LNPage/AdvancedTab/Watchtowers/Watchtowers.jsx
index bdd3e3f2d4..432209598d 100644
--- a/app/components/views/LNPage/AdvancedTab/Watchtowers/Watchtowers.jsx
+++ b/app/components/views/LNPage/AdvancedTab/Watchtowers/Watchtowers.jsx
@@ -34,19 +34,22 @@ const Watchtowers = () => {
               ? styles.statusTrue
               : styles.statusFalse
           )}
-          key={tower.pubkey}>
+          key={tower.pubkey}
+        >
           <Tooltip
             className={styles.removeTowerBtn}
             content={
               <T id="ln.watchtowersTab.removeTowerBtn" m="Remove tower" />
-            }>
+            }
+          >
             <a
               className={styles.removeIcon}
               onClick={() => {
                 removeWatchtower(tower.pubkeyHex);
                 listWatchtowers();
               }}
-              href="#">
+              href="#"
+            >
               &times;
             </a>
           </Tooltip>
diff --git a/app/components/views/LNPage/ChannelDetailsPage/ChannelDetails.jsx b/app/components/views/LNPage/ChannelDetailsPage/ChannelDetails.jsx
index df9ce6b2e1..627c09b6c6 100644
--- a/app/components/views/LNPage/ChannelDetailsPage/ChannelDetails.jsx
+++ b/app/components/views/LNPage/ChannelDetailsPage/ChannelDetails.jsx
@@ -20,7 +20,8 @@ const ChannelDetails = () => {
         <div
           className={classNames(styles.backButton, "flex-centralize")}
           data-testid="goBackHistory"
-          onClick={goBackHistory}>
+          onClick={goBackHistory}
+        >
           <div className={styles.backArrow}></div>
         </div>
         <ChannelCard {...{ channel }} />
diff --git a/app/components/views/LNPage/ChannelsTab/ChannelsTab.jsx b/app/components/views/LNPage/ChannelsTab/ChannelsTab.jsx
index 05b1f9f9a4..c9b45e5d99 100644
--- a/app/components/views/LNPage/ChannelsTab/ChannelsTab.jsx
+++ b/app/components/views/LNPage/ChannelsTab/ChannelsTab.jsx
@@ -95,7 +95,8 @@ const subtitleMenu = ({
     </div>
     <Tooltip
       contentClassName={styles.typeTooltip}
-      content={<T id="ln.channelsTab.channelTypes.tooltip" m="Channel Type" />}>
+      content={<T id="ln.channelsTab.channelTypes.tooltip" m="Channel Type" />}
+    >
       <EyeFilterMenu
         options={channelTypes}
         selected={selectedChannelType}
@@ -156,7 +157,8 @@ const ChannelsTab = () => {
             className={classNames(
               styles.counterpartyWrapper,
               hideSearchBt && styles.hideSearchBt
-            )}>
+            )}
+          >
             <TextInput
               newBiggerFontStyle
               hideIcons
@@ -173,7 +175,8 @@ const ChannelsTab = () => {
               showSuccess={nodeShowSuccess}
               showErrors={!!nodeErrorMsg}
               invalid={!!nodeErrorMsg}
-              invalidMessage={nodeErrorMsg}>
+              invalidMessage={nodeErrorMsg}
+            >
               {!node ? (
                 <Button
                   kind="secondary"
@@ -182,7 +185,8 @@ const ChannelsTab = () => {
                   onClick={(e) => {
                     e.preventDefault();
                     onNodeChanged(wallet.readFromClipboard());
-                  }}>
+                  }}
+                >
                   Paste
                 </Button>
               ) : (
@@ -193,7 +197,8 @@ const ChannelsTab = () => {
                   onClick={(e) => {
                     e.preventDefault();
                     onNodeChanged("");
-                  }}>
+                  }}
+                >
                   <div />
                 </Button>
               )}
@@ -238,7 +243,8 @@ const ChannelsTab = () => {
               recentNodes.slice(0, isMainNet ? 4 : 6).map((node) => (
                 <li
                   onClick={() => onNodeChanged(node.pubKey)}
-                  key={node.pubKey}>
+                  key={node.pubKey}
+                >
                   {node.alias}
                 </li>
               ))
@@ -253,7 +259,8 @@ const ChannelsTab = () => {
         <PiUiButton
           onClick={onOpenChannel}
           loading={opening}
-          disabled={opening || !canOpen}>
+          disabled={opening || !canOpen}
+        >
           <T id="ln.openChannel.createChannelBt" m="Create Channel" />
         </PiUiButton>
       </div>
@@ -280,10 +287,12 @@ const ChannelsTab = () => {
                 : styles.channelGrayBorder
             )}
             key={c.channelPoint}
-            onClick={() => viewChannelDetailsHandler(c.channelPoint)}>
+            onClick={() => viewChannelDetailsHandler(c.channelPoint)}
+          >
             <ChannelCard channel={c} />
             <div
-              className={classNames(styles.continueButton, "flex-centralize")}>
+              className={classNames(styles.continueButton, "flex-centralize")}
+            >
               <div className={styles.continueArrow}></div>
             </div>
           </div>
diff --git a/app/components/views/LNPage/ConnectPage/ConnectPage.jsx b/app/components/views/LNPage/ConnectPage/ConnectPage.jsx
index 4a06cbe091..54fbe86ce8 100644
--- a/app/components/views/LNPage/ConnectPage/ConnectPage.jsx
+++ b/app/components/views/LNPage/ConnectPage/ConnectPage.jsx
@@ -80,7 +80,8 @@ const ConnectPage = () => {
         ) : (
           <ConnectPageHeader />
         )
-      }>
+      }
+    >
       {displayCreationWarning ? (
         <CreationWarning onAcceptCreationWarning={onAcceptCreationWarning} />
       ) : (
@@ -111,7 +112,8 @@ const ConnectPage = () => {
                     id="ln.connectPage.disabled.unlockWalletModal"
                     m="Privacy Mixer, Autobuyer or Purchase Ticket Attempt running, please shut them off before unlock LN Wallet."
                   />
-                }>
+                }
+              >
                 <PiUiPassphraseModalButton
                   modalTitle={
                     <T
diff --git a/app/components/views/LNPage/ConnectPage/CreationWarning/CreationWarning.jsx b/app/components/views/LNPage/ConnectPage/CreationWarning/CreationWarning.jsx
index 6824e12750..86910877bb 100644
--- a/app/components/views/LNPage/ConnectPage/CreationWarning/CreationWarning.jsx
+++ b/app/components/views/LNPage/ConnectPage/CreationWarning/CreationWarning.jsx
@@ -27,10 +27,12 @@ const CreationWarning = ({ onAcceptCreationWarning }) => {
     <div className={styles.container}>
       <Subtitle
         className={styles.header}
-        title={<T id="ln.creationWarning.title" m="Before You continue..." />}>
+        title={<T id="ln.creationWarning.title" m="Before You continue..." />}
+      >
         <KeyBlueButton
           onClick={onAcceptCreationWarning}
-          disabled={!isAcceptCreationWarningButtonEnabled}>
+          disabled={!isAcceptCreationWarningButtonEnabled}
+        >
           <T
             id="ln.createWalletWarning.okBtn"
             m="I understand and accept the risks"
diff --git a/app/components/views/LNPage/ReceiveTab/ReceiveTab.jsx b/app/components/views/LNPage/ReceiveTab/ReceiveTab.jsx
index 1498ba4f75..b256d88b70 100644
--- a/app/components/views/LNPage/ReceiveTab/ReceiveTab.jsx
+++ b/app/components/views/LNPage/ReceiveTab/ReceiveTab.jsx
@@ -73,7 +73,8 @@ const subtitleMenu = ({
     </div>
     <Tooltip
       contentClassName={styles.sortByTooltip}
-      content={<T id="ln.receiveTab.sortby.tooltip" m="Sort By" />}>
+      content={<T id="ln.receiveTab.sortby.tooltip" m="Sort By" />}
+    >
       <EyeFilterMenu
         labelKey="label"
         keyField="value"
@@ -86,7 +87,8 @@ const subtitleMenu = ({
     </Tooltip>
     <Tooltip
       contentClassName={styles.typeTooltip}
-      content={<T id="ln.receiveTab.invoiceTypes.tooltip" m="Invoice Type" />}>
+      content={<T id="ln.receiveTab.invoiceTypes.tooltip" m="Invoice Type" />}
+    >
       <EyeFilterMenu
         options={invoiceTypes}
         selected={selectedInvoiceType}
@@ -154,7 +156,8 @@ const ReceiveTab = () => {
       <div className={styles.buttonContainer}>
         <PiUiButton
           onClick={onAddInvoice}
-          disabled={addInvoiceAttempt || !isFormValid}>
+          disabled={addInvoiceAttempt || !isFormValid}
+        >
           <T id="ln.receiveTab.createInvoice" m="Create Invoice" />
         </PiUiButton>
       </div>
diff --git a/app/components/views/LNPage/SendTab/DecodedPayRequest/DecodedPayRequest.jsx b/app/components/views/LNPage/SendTab/DecodedPayRequest/DecodedPayRequest.jsx
index 3db4a1af8b..69bbaaa863 100644
--- a/app/components/views/LNPage/SendTab/DecodedPayRequest/DecodedPayRequest.jsx
+++ b/app/components/views/LNPage/SendTab/DecodedPayRequest/DecodedPayRequest.jsx
@@ -78,7 +78,8 @@ const DecodedPayRequest = ({
       </div>
     </div>
     <div
-      className={classNames(styles.propContainer, styles.descriptionContainer)}>
+      className={classNames(styles.propContainer, styles.descriptionContainer)}
+    >
       <label>
         <T id="ln.paymentsTab.descLabel" m="Description" />
       </label>
@@ -89,7 +90,8 @@ const DecodedPayRequest = ({
       )}
     </div>
     <div
-      className={classNames(styles.propContainer, styles.paymentHashContainer)}>
+      className={classNames(styles.propContainer, styles.paymentHashContainer)}
+    >
       <label>
         <T id="ln.paymentsTab.paymentHashLabel" m="Payment Hash" />
       </label>
diff --git a/app/components/views/LNPage/SendTab/SendTab.jsx b/app/components/views/LNPage/SendTab/SendTab.jsx
index 1b61a8d967..4ed85d6a76 100644
--- a/app/components/views/LNPage/SendTab/SendTab.jsx
+++ b/app/components/views/LNPage/SendTab/SendTab.jsx
@@ -76,7 +76,8 @@ const subtitleMenu = ({
     </div>
     <Tooltip
       contentClassName={styles.sortByTooltip}
-      content={<T id="ln.paymentsTab.sortby.tooltip" m="Sort By" />}>
+      content={<T id="ln.paymentsTab.sortby.tooltip" m="Sort By" />}
+    >
       <EyeFilterMenu
         labelKey="label"
         keyField="value"
@@ -89,7 +90,8 @@ const subtitleMenu = ({
     </Tooltip>
     <Tooltip
       contentClassName={styles.typeTooltip}
-      content={<T id="ln.paymentsTab.paymentTypes.tooltip" m="Payment Type" />}>
+      content={<T id="ln.paymentsTab.paymentTypes.tooltip" m="Payment Type" />}
+    >
       <EyeFilterMenu
         options={paymentTypes}
         selected={selectedPaymentType}
@@ -150,7 +152,8 @@ const SendTab = ({ setTimeout }) => {
               : expired
               ? intl.formatMessage(messages.expiredErrorMsg)
               : null
-          }>
+          }
+        >
           {!payRequest ? (
             <Button
               kind="secondary"
@@ -159,7 +162,8 @@ const SendTab = ({ setTimeout }) => {
               onClick={(e) => {
                 e.preventDefault();
                 onPayRequestChanged(wallet.readFromClipboard());
-              }}>
+              }}
+            >
               Paste
             </Button>
           ) : (
@@ -173,7 +177,8 @@ const SendTab = ({ setTimeout }) => {
               onClick={(e) => {
                 e.preventDefault();
                 onPayRequestChanged("");
-              }}>
+              }}
+            >
               <div />
             </Button>
           )}
diff --git a/app/components/views/PrivacyPage/PrivacyTab/PrivacyContent.jsx b/app/components/views/PrivacyPage/PrivacyTab/PrivacyContent.jsx
index 82c39365c9..4ad40d6e3c 100644
--- a/app/components/views/PrivacyPage/PrivacyTab/PrivacyContent.jsx
+++ b/app/components/views/PrivacyPage/PrivacyTab/PrivacyContent.jsx
@@ -57,7 +57,8 @@ const PrivacyContent = ({
             styles.mixerStatus,
             styles.isRow,
             (accountMixerRunning || isAutoBuyerRunning) && styles.running
-          )}>
+          )}
+        >
           {accountMixerRunning || isAutoBuyerRunning ? (
             isAutoBuyerRunning ? (
               <T id="privacy.autobuyerRunning" m="Autobuyer is running" />
@@ -74,7 +75,8 @@ const PrivacyContent = ({
               styles.balanceContainer,
               styles.unmixedAccount,
               isMixerDisabled && styles.balanceError
-            )}>
+            )}
+          >
             {isMixerDisabled && <div className={styles.alertIcon} />}
             <Balance amount={changeAccountSpendableBalance} />
             <label>
@@ -88,10 +90,8 @@ const PrivacyContent = ({
             )}
           />
           <div
-            className={classNames(
-              styles.balanceContainer,
-              styles.mixedAccount
-            )}>
+            className={classNames(styles.balanceContainer, styles.mixedAccount)}
+          >
             <Balance amount={mixedAccountSpendableBalance} />
             <label>
               <T id="privacy.label.mixed.balance" m="Mixed Balance" />
@@ -104,7 +104,8 @@ const PrivacyContent = ({
                   isAutoBuyerRunning
                     ? onDisableTicketAutoBuyer
                     : stopAccountMixer
-                }>
+                }
+              >
                 {isAutoBuyerRunning ? (
                   <T id="privacy.stop.autobuyer" m="Stop Auto Buyer" />
                 ) : (
@@ -119,7 +120,8 @@ const PrivacyContent = ({
                     id="mixer.start.running"
                     m="Privacy Mixer or Autobuyer running, please shut them off before purchasing a ticket."
                   />
-                }>
+                }
+              >
                 <MixerPassphraseModalSwitch
                   className={styles.startMixerButton}
                   disabled={true}
diff --git a/app/components/views/PrivacyPage/PrivacyTab/SendOutputRow/SendOutputRow.jsx b/app/components/views/PrivacyPage/PrivacyTab/SendOutputRow/SendOutputRow.jsx
index 71216ad82a..5024c631ec 100644
--- a/app/components/views/PrivacyPage/PrivacyTab/SendOutputRow/SendOutputRow.jsx
+++ b/app/components/views/PrivacyPage/PrivacyTab/SendOutputRow/SendOutputRow.jsx
@@ -30,7 +30,8 @@ const getSendAllFundsIcon = ({
             id="send.sendAllTitle.disabled"
             m="Send all funds from selected account - Disabled"
           />
-        }>
+        }
+      >
         <a
           className={classNames(
             styles.sendIconWrapper,
@@ -44,7 +45,8 @@ const getSendAllFundsIcon = ({
         contentClassName={styles.tooltipSendAll}
         content={
           <T id="send.sendAllTitle" m="Send all funds from selected account" />
-        }>
+        }
+      >
         <a
           className={classNames(styles.sendIconWrapper, styles.walletIcon)}
           onClick={onShowSendAll}
@@ -55,7 +57,8 @@ const getSendAllFundsIcon = ({
         contentClassName={styles.tooltipSendAllDisabled}
         content={
           <T id="send.cancelSendAllTitle" m="Cancel sending all funds" />
-        }>
+        }
+      >
         <a
           className={classNames(styles.sendIconWrapper, styles.cancelIcon)}
           onClick={onHideSendAll}
@@ -118,10 +121,8 @@ const SendOutputRow = ({
       <T id="send.amount" m="Amount" />:
     </label>
     <div
-      className={classNames(
-        styles.sendInputWrapper,
-        styles.amountInputWrapper
-      )}>
+      className={classNames(styles.sendInputWrapper, styles.amountInputWrapper)}
+    >
       {isSendAll ? (
         <Balance
           classNameWrapper={styles.sendAll}
diff --git a/app/components/views/PrivacyPage/SecurityTab/SecurityTab.jsx b/app/components/views/PrivacyPage/SecurityTab/SecurityTab.jsx
index 1dd59132b8..4c85a05c4c 100644
--- a/app/components/views/PrivacyPage/SecurityTab/SecurityTab.jsx
+++ b/app/components/views/PrivacyPage/SecurityTab/SecurityTab.jsx
@@ -18,7 +18,8 @@ const SecurityTab = () => {
                 styles.textToggleButtonLeft,
                 sideActive && styles.textToggleButtonActive
               )}
-              onClick={!sideActive ? () => setSideActive(true) : null}>
+              onClick={!sideActive ? () => setSideActive(true) : null}
+            >
               <T id="security.signTitle" m="Sign Message" />
             </div>
             <div
@@ -26,7 +27,8 @@ const SecurityTab = () => {
                 styles.textToggleButtonRight,
                 !sideActive && styles.textToggleButtonActive
               )}
-              onClick={sideActive ? () => setSideActive(false) : null}>
+              onClick={sideActive ? () => setSideActive(false) : null}
+            >
               <T id="security.verifyTitle" m="Verify Message" />
             </div>
           </div>
diff --git a/app/components/views/PrivacyPage/SecurityTab/SignMessage/SignMessageForm.jsx b/app/components/views/PrivacyPage/SecurityTab/SignMessage/SignMessageForm.jsx
index dd5e6b05ff..73235cad3a 100644
--- a/app/components/views/PrivacyPage/SecurityTab/SignMessage/SignMessageForm.jsx
+++ b/app/components/views/PrivacyPage/SecurityTab/SignMessage/SignMessageForm.jsx
@@ -93,7 +93,8 @@ const SignMessageForm = ({
         <Button
           kind={disabled ? "disabled" : "primary"}
           loading={isSigningMessage}
-          onClick={onSubmit}>
+          onClick={onSubmit}
+        >
           Sign Message
         </Button>
       ) : (
diff --git a/app/components/views/PrivacyPage/SecurityTab/SignMessage/Signature/Signature.jsx b/app/components/views/PrivacyPage/SecurityTab/SignMessage/Signature/Signature.jsx
index cdb5e6794b..4589ed23b2 100644
--- a/app/components/views/PrivacyPage/SecurityTab/SignMessage/Signature/Signature.jsx
+++ b/app/components/views/PrivacyPage/SecurityTab/SignMessage/Signature/Signature.jsx
@@ -13,7 +13,8 @@ const Signature = ({ signature }) => (
         className={styles.copyableText}
         id="copyable"
         hoverText="Copy signature to clipboard"
-        truncate>
+        truncate
+      >
         {signature}
       </CopyableText>
     </div>
diff --git a/app/components/views/PrivacyPage/SecurityTab/ValidateAddress/ValidateAddressForm.jsx b/app/components/views/PrivacyPage/SecurityTab/ValidateAddress/ValidateAddressForm.jsx
index c607eb957c..ee708bb7bb 100644
--- a/app/components/views/PrivacyPage/SecurityTab/ValidateAddress/ValidateAddressForm.jsx
+++ b/app/components/views/PrivacyPage/SecurityTab/ValidateAddress/ValidateAddressForm.jsx
@@ -16,7 +16,8 @@ const InvalidAddress = () => (
     className={classNames(
       styles.validateAddressFormResponse,
       styles.responseInvalid
-    )}>
+    )}
+  >
     <T id="securitycenter.validate.result.invalid" m="Invalid address" />
   </div>
 );
@@ -26,7 +27,8 @@ const OwnedAddress = () => (
     className={classNames(
       styles.validateAddressFormResponse,
       styles.responseOwned
-    )}>
+    )}
+  >
     <T id="securitycenter.validate.result.owned" m="Owned address" />
   </div>
 );
@@ -36,7 +38,8 @@ const NotOwnedAddress = () => (
     className={classNames(
       styles.validateAddressFormResponse,
       styles.responseNotOwned
-    )}>
+    )}
+  >
     <T
       id="securitycenter.validate.result.notOwned"
       m="Address Valid, Not Owned"
@@ -81,7 +84,8 @@ const ValidateAddressForm = ({
         className={classNames(
           styles.validateAddressFormInput,
           address && validateAddressSuccess && styles.validAddress
-        )}>
+        )}
+      >
         <TextInput
           id="validateAddressInput"
           value={address}
diff --git a/app/components/views/PrivacyPage/SecurityTab/VerifyMessage/VerifyMessageForm.jsx b/app/components/views/PrivacyPage/SecurityTab/VerifyMessage/VerifyMessageForm.jsx
index 0048bf6a20..63e2013f64 100644
--- a/app/components/views/PrivacyPage/SecurityTab/VerifyMessage/VerifyMessageForm.jsx
+++ b/app/components/views/PrivacyPage/SecurityTab/VerifyMessage/VerifyMessageForm.jsx
@@ -106,7 +106,8 @@ const VerifyMessageForm = ({
         className={styles.button}
         kind={disabled ? "disabled" : "primary"}
         loading={isVerifyingMessage}
-        onClick={onSubmit}>
+        onClick={onSubmit}
+      >
         Verify Message
       </Button>
     </>
diff --git a/app/components/views/ProposalDetailsPage/ProposalDetails.jsx b/app/components/views/ProposalDetailsPage/ProposalDetails.jsx
index bf014071e3..24228c221b 100644
--- a/app/components/views/ProposalDetailsPage/ProposalDetails.jsx
+++ b/app/components/views/ProposalDetailsPage/ProposalDetails.jsx
@@ -54,7 +54,8 @@ const ProposalDetails = ({
       <div className={classNames(styles.cardWrapper)}>
         <div
           className={classNames(styles.backButton, "flex-centralize")}
-          onClick={goBackHistory}>
+          onClick={goBackHistory}
+        >
           <div className={styles.backArrow}></div>
         </div>
         <ProposalCard
@@ -107,7 +108,8 @@ const ProposalDetails = ({
           className={styles.piButton}
           path={proposalPath}
           CustomComponent={Button}
-          isTestnet={isTestnet}>
+          isTestnet={isTestnet}
+        >
           <T
             id="proposals.community.goToProposal"
             m="See proposal comments on Politeia"
diff --git a/app/components/views/ProposalDetailsPage/ProposalDetailsPage.jsx b/app/components/views/ProposalDetailsPage/ProposalDetailsPage.jsx
index eeac1cc536..d8a3d468e3 100644
--- a/app/components/views/ProposalDetailsPage/ProposalDetailsPage.jsx
+++ b/app/components/views/ProposalDetailsPage/ProposalDetailsPage.jsx
@@ -66,7 +66,8 @@ const ProposalDetailsPage = () => {
 
   return (
     <StandalonePage
-      header={<Header {...{ eligibleTicketCount, isDarkTheme }} />}>
+      header={<Header {...{ eligibleTicketCount, isDarkTheme }} />}
+    >
       {stateComponent}
     </StandalonePage>
   );
diff --git a/app/components/views/ProposalDetailsPage/helpers/Event/Event.jsx b/app/components/views/ProposalDetailsPage/helpers/Event/Event.jsx
index b429253092..5aa23ea521 100644
--- a/app/components/views/ProposalDetailsPage/helpers/Event/Event.jsx
+++ b/app/components/views/ProposalDetailsPage/helpers/Event/Event.jsx
@@ -22,7 +22,8 @@ const Event = ({ timestamp, tsDate, eventType, className }) => (
         m="{timestamp, date, medium} {timestamp, time, short}"
         values={{ timestamp: tsDate(timestamp) }}
       />
-    }>
+    }
+  >
     <div className={className}>
       <span>{messages[eventType]}</span>{" "}
       <FormattedRelative value={tsDate(timestamp)} />
diff --git a/app/components/views/ProposalDetailsPage/helpers/Header/Header.jsx b/app/components/views/ProposalDetailsPage/helpers/Header/Header.jsx
index ef62e7f658..3aebcb0bd5 100644
--- a/app/components/views/ProposalDetailsPage/helpers/Header/Header.jsx
+++ b/app/components/views/ProposalDetailsPage/helpers/Header/Header.jsx
@@ -19,7 +19,8 @@ const Header = React.memo(function Header({
               styles.tickets,
               isDarkTheme && styles.dark,
               "margin-left-s"
-            )}>
+            )}
+          >
             {eligibleTicketCount}
           </span>
         </div>
diff --git a/app/components/views/ProposalDetailsPage/helpers/Join/Join.jsx b/app/components/views/ProposalDetailsPage/helpers/Join/Join.jsx
index 4e73006151..6b4a3db3a1 100644
--- a/app/components/views/ProposalDetailsPage/helpers/Join/Join.jsx
+++ b/app/components/views/ProposalDetailsPage/helpers/Join/Join.jsx
@@ -8,7 +8,8 @@ const DefaultSeparator = () => (
       styles.separator,
       "margin-left-xs",
       "margin-right-xs"
-    )}>
+    )}
+  >
     •
   </span>
 );
diff --git a/app/components/views/ProposalDetailsPage/helpers/ProposalCard/ProposalCard.jsx b/app/components/views/ProposalDetailsPage/helpers/ProposalCard/ProposalCard.jsx
index fd34280d1b..674f59d19f 100644
--- a/app/components/views/ProposalDetailsPage/helpers/ProposalCard/ProposalCard.jsx
+++ b/app/components/views/ProposalDetailsPage/helpers/ProposalCard/ProposalCard.jsx
@@ -48,11 +48,13 @@ const ProposalCard = ({
               <Tooltip
                 content={<T id="proposal.overview.title" m="See on Politeia" />}
                 contentClassName={styles.tooltipTitle}
-                placement="right">
+                placement="right"
+              >
                 <PoliteiaLink
                   className={styles.title}
                   isTestnet={isTestnet}
-                  path={proposalPath}>
+                  path={proposalPath}
+                >
                   <div className={styles.titleText}>{name}</div>
                 </PoliteiaLink>
               </Tooltip>
@@ -87,7 +89,8 @@ const ProposalCard = ({
               "margin-top-s",
               styles.token,
               isDarkTheme && styles.dark
-            )}>
+            )}
+          >
             {shortToken}
           </div>
         </div>
@@ -103,7 +106,8 @@ const ProposalCard = ({
               ) : (
                 <PoliteiaLink
                   isTestnet={isTestnet}
-                  path={`/record/${shortRFPToken}`}>
+                  path={`/record/${shortRFPToken}`}
+                >
                   {`${linkedProposal.name} (${shortRFPToken})`}
                 </PoliteiaLink>
               )
@@ -125,7 +129,8 @@ const ProposalCard = ({
                 styles.quorumTooltip,
                 isDarkTheme && styles.darkQuorumTooltip
               )}
-              content={`${totalVotes} votes cast, quorum requirement is ${quorumMinimumVotes} votes`}>
+              content={`${totalVotes} votes cast, quorum requirement is ${quorumMinimumVotes} votes`}
+            >
               <Text className={styles.votesReceived} size="small">
                 {totalVotes}
               </Text>
diff --git a/app/components/views/SettingsPage/ConnectivitySettingsTab/NetworkSettings/NetworkSettings.jsx b/app/components/views/SettingsPage/ConnectivitySettingsTab/NetworkSettings/NetworkSettings.jsx
index fe8e6bcfde..0869c72818 100644
--- a/app/components/views/SettingsPage/ConnectivitySettingsTab/NetworkSettings/NetworkSettings.jsx
+++ b/app/components/views/SettingsPage/ConnectivitySettingsTab/NetworkSettings/NetworkSettings.jsx
@@ -14,7 +14,8 @@ const SettingsInputWrapper = ({ isTooltipEnabled, children }) =>
           m="This was set as a command-line option when launching decrediton"
         />
       }
-      className={styles.tooltip}>
+      className={styles.tooltip}
+    >
       {children}
     </Tooltip>
   ) : (
@@ -95,7 +96,8 @@ const NetworkSettings = ({ tempSettings, onChangeTempSettings }) => (
         <T id="settings.advancedDaemon.label" m="Adv. Daemon Startup" />
       </Label>
       <SettingsInputWrapper
-        isTooltipEnabled={tempSettings.daemonStartAdvancedFromCli}>
+        isTooltipEnabled={tempSettings.daemonStartAdvancedFromCli}
+      >
         <SettingsInput
           selectWithBigFont
           className={styles.input}
diff --git a/app/components/views/SettingsPage/ConnectivitySettingsTab/ProxySettings/ProxySettings.jsx b/app/components/views/SettingsPage/ConnectivitySettingsTab/ProxySettings/ProxySettings.jsx
index 1b3a117feb..4d16b1688d 100644
--- a/app/components/views/SettingsPage/ConnectivitySettingsTab/ProxySettings/ProxySettings.jsx
+++ b/app/components/views/SettingsPage/ConnectivitySettingsTab/ProxySettings/ProxySettings.jsx
@@ -63,7 +63,8 @@ const ProxySettings = ({ tempSettings, onChangeTempSettings }) => {
         <Button
           className={styles.submitButton}
           size="sm"
-          onClick={() => onChangeTempSettings({ proxyType, proxyLocation })}>
+          onClick={() => onChangeTempSettings({ proxyType, proxyLocation })}
+        >
           <T id="settings.proxy.save" m="Save proxy settings" />
         </Button>
       )}
diff --git a/app/components/views/SettingsPage/GeneralSettingsTab/MiscSettings/MiscSettings.jsx b/app/components/views/SettingsPage/GeneralSettingsTab/MiscSettings/MiscSettings.jsx
index 9908be1a5e..f8d0ce4e79 100644
--- a/app/components/views/SettingsPage/GeneralSettingsTab/MiscSettings/MiscSettings.jsx
+++ b/app/components/views/SettingsPage/GeneralSettingsTab/MiscSettings/MiscSettings.jsx
@@ -48,7 +48,8 @@ const MiscSettings = ({ tempSettings, currencies, onChangeTempSettings }) => {
             className={styles.discoverUsageButton}
             onClick={showDiscoverModal}
             loading={discoverUsageAttempt || rescanRunning}
-            disabled={discoverUsageAttempt || rescanRunning}>
+            disabled={discoverUsageAttempt || rescanRunning}
+          >
             <T id="settings.DiscoverAddressBtn" m="Discover Address Usage" />
           </KeyBlueButton>
           <DiscoverUsageModal
diff --git a/app/components/views/SettingsPage/TutorialsTab/helpers/PagedTutorial/CrossfadingImages/CrossfadingImages.jsx b/app/components/views/SettingsPage/TutorialsTab/helpers/PagedTutorial/CrossfadingImages/CrossfadingImages.jsx
index 0f44a54bdc..0891c95ae6 100644
--- a/app/components/views/SettingsPage/TutorialsTab/helpers/PagedTutorial/CrossfadingImages/CrossfadingImages.jsx
+++ b/app/components/views/SettingsPage/TutorialsTab/helpers/PagedTutorial/CrossfadingImages/CrossfadingImages.jsx
@@ -43,7 +43,8 @@ const CrossfadingImages = ({ images }) => {
           style={{
             position: "absolute",
             opacity
-          }}>
+          }}
+        >
           <div className={classNames(styles.image, styles[item.image])} />
         </animated.div>
       ))}
diff --git a/app/components/views/SettingsPage/TutorialsTab/helpers/PagedTutorial/PagedTutorial.jsx b/app/components/views/SettingsPage/TutorialsTab/helpers/PagedTutorial/PagedTutorial.jsx
index eeb5b2e64d..3f038f52ba 100644
--- a/app/components/views/SettingsPage/TutorialsTab/helpers/PagedTutorial/PagedTutorial.jsx
+++ b/app/components/views/SettingsPage/TutorialsTab/helpers/PagedTutorial/PagedTutorial.jsx
@@ -76,13 +76,15 @@ const PagedTutorial = ({
           styles.previous,
           previousArrowDisabled && styles.disabled
         )}
-        onClick={onPreviousTab}>
+        onClick={onPreviousTab}
+      >
         <div className={styles.icon} />
       </button>
       <Tabs
         className={classNames(styles.tabs, spaceEvenly && styles.spaceEvenly)}
         activeTabIndex={activeTabIndex}
-        onSelectTab={onSelectTabs}>
+        onSelectTab={onSelectTabs}
+      >
         {slides.map((slide, i) => (
           <Tab
             key={i}
@@ -96,13 +98,15 @@ const PagedTutorial = ({
                 visited={visitedTabs.includes(i)}
               />
             }
-            className={styles.tab}>
+            className={styles.tab}
+          >
             <div className={styles.tabContent}>
               <div
                 className={classNames(
                   styles.tabContentWrapper,
                   tabContentWrapperClassName
-                )}>
+                )}
+              >
                 <div className={styles.stepIndicator}>{`${parseInt(i) + 1}/${
                   slides.length
                 }`}</div>
@@ -145,7 +149,8 @@ const PagedTutorial = ({
           styles.next,
           nextArrowDisabled && styles.disabled
         )}
-        onClick={onNextTab}>
+        onClick={onNextTab}
+      >
         <div className={styles.icon} />
       </button>
     </div>
diff --git a/app/components/views/SettingsPage/TutorialsTab/helpers/PagedTutorial/TabLabel/TabLabel.jsx b/app/components/views/SettingsPage/TutorialsTab/helpers/PagedTutorial/TabLabel/TabLabel.jsx
index f6849ce5c5..2dec48c55c 100644
--- a/app/components/views/SettingsPage/TutorialsTab/helpers/PagedTutorial/TabLabel/TabLabel.jsx
+++ b/app/components/views/SettingsPage/TutorialsTab/helpers/PagedTutorial/TabLabel/TabLabel.jsx
@@ -16,7 +16,8 @@ const TabLabel = ({
       activeTabIndex === parseInt(index) && styles.active,
       visited && styles.visited,
       className
-    )}>
+    )}
+  >
     <strong>
       {parseInt(index) + 1}/{slides.length}
     </strong>
diff --git a/app/components/views/SettingsPage/TutorialsTab/helpers/TutorialCard/TutorialCard.jsx b/app/components/views/SettingsPage/TutorialsTab/helpers/TutorialCard/TutorialCard.jsx
index 6165763663..bea0560915 100644
--- a/app/components/views/SettingsPage/TutorialsTab/helpers/TutorialCard/TutorialCard.jsx
+++ b/app/components/views/SettingsPage/TutorialsTab/helpers/TutorialCard/TutorialCard.jsx
@@ -14,7 +14,8 @@ const TutorialCard = ({
       styles.overview,
       !showProgressBar && styles.small,
       className
-    )}>
+    )}
+  >
     <div className={styles.row}>
       <div>
         <div className={styles.title}>{tutorials[name].title}</div>
diff --git a/app/components/views/SettingsPage/TutorialsTab/helpers/TutorialOverview/TutorialOverview.jsx b/app/components/views/SettingsPage/TutorialsTab/helpers/TutorialOverview/TutorialOverview.jsx
index 1b804ffd11..35dcb0bb20 100644
--- a/app/components/views/SettingsPage/TutorialsTab/helpers/TutorialOverview/TutorialOverview.jsx
+++ b/app/components/views/SettingsPage/TutorialsTab/helpers/TutorialOverview/TutorialOverview.jsx
@@ -12,10 +12,8 @@ const TutorialOverview = ({
 }) => (
   <div
     onClick={() => viewTutorialHandler(name)}
-    className={classNames(
-      styles.cardWrapper,
-      !showProgressBar && styles.small
-    )}>
+    className={classNames(styles.cardWrapper, !showProgressBar && styles.small)}
+  >
     <TutorialCard
       {...{
         name,
diff --git a/app/components/views/SettingsPage/TutorialsTab/helpers/TutorialPage/TutorialPage.jsx b/app/components/views/SettingsPage/TutorialsTab/helpers/TutorialPage/TutorialPage.jsx
index be901cc98f..a197259527 100644
--- a/app/components/views/SettingsPage/TutorialsTab/helpers/TutorialPage/TutorialPage.jsx
+++ b/app/components/views/SettingsPage/TutorialsTab/helpers/TutorialPage/TutorialPage.jsx
@@ -20,10 +20,12 @@ const TutorialPage = ({
       <div className={classNames(styles.cardWrapper)}>
         <Tooltip
           content={<T id="tutorialpage.back" m="Back" />}
-          className={styles.backTooltip}>
+          className={styles.backTooltip}
+        >
           <div
             onClick={goBackHistory}
-            className={classNames(styles.backButton, "flex-centralize")}>
+            className={classNames(styles.backButton, "flex-centralize")}
+          >
             <div className={styles.backArrow}></div>
           </div>
         </Tooltip>
diff --git a/app/components/views/TicketsPage/MyTicketsTab/Page.jsx b/app/components/views/TicketsPage/MyTicketsTab/Page.jsx
index a4c4122d4a..78d4bc64c7 100644
--- a/app/components/views/TicketsPage/MyTicketsTab/Page.jsx
+++ b/app/components/views/TicketsPage/MyTicketsTab/Page.jsx
@@ -44,7 +44,8 @@ const subtitleMenu = ({
     />
     <Tooltip
       contentClassName={styles.sortByTooltip}
-      content={<T id="tickets.sortby.tooltip" m="Sort By" />}>
+      content={<T id="tickets.sortby.tooltip" m="Sort By" />}
+    >
       <EyeFilterMenu
         labelKey="label"
         keyField="value"
@@ -56,7 +57,8 @@ const subtitleMenu = ({
     </Tooltip>
     <Tooltip
       contentClassName={styles.ticketStatusTooltip}
-      content={<T id="tickets.tickettypes.tooltip" m="Ticket Status" />}>
+      content={<T id="tickets.tickettypes.tooltip" m="Ticket Status" />}
+    >
       <EyeFilterMenu
         labelKey="label"
         keyField="key"
@@ -67,7 +69,8 @@ const subtitleMenu = ({
     </Tooltip>
     <Tooltip
       contentClassName={styles.qrTooltip}
-      content={<T id="tickets.qr.tooltip" m="Tickets QR" />}>
+      content={<T id="tickets.qr.tooltip" m="Tickets QR" />}
+    >
       <div className={styles.menuButton}>
         <QRModalButton
           className={styles.qrButton}
@@ -173,7 +176,8 @@ const TicketListPage = ({
         initialLoad={!noMoreTickets}
         useWindow={false}
         threshold={90}
-        data-testid="ticketHistoryPageContent">
+        data-testid="ticketHistoryPageContent"
+      >
         <TxHistory
           {...{
             transactions: tickets,
diff --git a/app/components/views/TicketsPage/PurchaseTab/PurchaseTabPage.jsx b/app/components/views/TicketsPage/PurchaseTab/PurchaseTabPage.jsx
index 80a1fca681..0b51d5c9f6 100644
--- a/app/components/views/TicketsPage/PurchaseTab/PurchaseTabPage.jsx
+++ b/app/components/views/TicketsPage/PurchaseTab/PurchaseTabPage.jsx
@@ -72,6 +72,7 @@ export function PurchaseTabPage({
   isVSPListingEnabled,
   onEnableVSPListing,
   getRunningIndicator,
+  isPurchasingTicketsTrezor,
   ...props
 }) {
   return (
@@ -115,7 +116,9 @@ export function PurchaseTabPage({
             isLoading,
             rememberedVspHost,
             toggleRememberVspHostCheckBox,
-            getRunningIndicator
+            getRunningIndicator,
+            isPurchasingTicketsTrezor,
+            isWatchingOnly
           }}
         />
       )}
diff --git a/app/components/views/TicketsPage/PurchaseTab/PurchaseTicketsForm/PurchaseTicketsForm.jsx b/app/components/views/TicketsPage/PurchaseTab/PurchaseTicketsForm/PurchaseTicketsForm.jsx
index 97086981af..c66b46c34d 100644
--- a/app/components/views/TicketsPage/PurchaseTab/PurchaseTicketsForm/PurchaseTicketsForm.jsx
+++ b/app/components/views/TicketsPage/PurchaseTab/PurchaseTicketsForm/PurchaseTicketsForm.jsx
@@ -36,7 +36,8 @@ const PurchaseTicketsForm = ({
   rememberedVspHost,
   toggleRememberVspHostCheckBox,
   notMixedAccounts,
-  getRunningIndicator
+  getRunningIndicator,
+  isPurchasingTicketsTrezor
 }) => {
   const intl = useIntl();
   return (
@@ -116,7 +117,8 @@ const PurchaseTicketsForm = ({
                 <T id="purchaseTickets.vspFee" m="VSP Fee" />:
               </span>
               <span
-                className={classNames(styles.vspFee, vsp && styles.haveVspFee)}>
+                className={classNames(styles.vspFee, vsp && styles.haveVspFee)}
+              >
                 {vsp && vspFee ? vspFee : 0} %
               </span>
               <T
@@ -149,7 +151,11 @@ const PurchaseTicketsForm = ({
       </div>
       <div className={styles.buttonsArea}>
         {isWatchingOnly ? (
-          <PiUiButton disabled={!isValid} onClick={onPurchaseTickets}>
+          <PiUiButton
+            disabled={!isValid}
+            loading={isPurchasingTicketsTrezor}
+            onClick={onPurchaseTickets}
+          >
             {purchaseLabel()}
           </PiUiButton>
         ) : isLoading ? (
@@ -164,7 +170,8 @@ const PurchaseTicketsForm = ({
                 id="tickets.purchase.running"
                 m="Privacy Mixer or Autobuyer running, please shut them off before purchasing a ticket."
               />
-            }>
+            }
+          >
             <PiUiButton disabled={true}>{purchaseLabel()}</PiUiButton>
           </Tooltip>
         ) : (
diff --git a/app/components/views/TicketsPage/PurchaseTab/StakeInfo/StakeInfoDisplay.jsx b/app/components/views/TicketsPage/PurchaseTab/StakeInfo/StakeInfoDisplay.jsx
index 3c5192bdd7..ab61847158 100644
--- a/app/components/views/TicketsPage/PurchaseTab/StakeInfo/StakeInfoDisplay.jsx
+++ b/app/components/views/TicketsPage/PurchaseTab/StakeInfo/StakeInfoDisplay.jsx
@@ -91,7 +91,8 @@ const StakeInfoDisplay = ({
               lastVotedTicket && (
                 <Link
                   to={`/transactions/history/${lastVotedTicket.txHash}`}
-                  className={styles.foot}>
+                  className={styles.foot}
+                >
                   <span className={styles.purchaseTicketFoot}>
                     <T
                       id="stake.lastTicketLink"
@@ -135,7 +136,8 @@ const StakeInfoDisplay = ({
       onToggleAccordion={onToggleStakeinfo}
       className={styles.accordion}
       arrowClassName={styles.accordionArrow}
-      activeArrowClassName={styles.activeAccordionArrow}>
+      activeArrowClassName={styles.activeAccordionArrow}
+    >
       <StakeInfoDetails
         {...{
           ticketPoolSize,
diff --git a/app/components/views/TicketsPage/PurchaseTab/hooks.js b/app/components/views/TicketsPage/PurchaseTab/hooks.js
index 0bb42fcefa..53be35ba60 100644
--- a/app/components/views/TicketsPage/PurchaseTab/hooks.js
+++ b/app/components/views/TicketsPage/PurchaseTab/hooks.js
@@ -3,6 +3,7 @@ import { useCallback, useMemo } from "react";
 import { useSettings } from "hooks";
 import { EXTERNALREQUEST_STAKEPOOL_LISTING } from "constants";
 
+import { purchaseTicketsAttempt as trezorPurchseTicketsAttempt } from "actions/TrezorActions.js";
 import * as vspa from "actions/VSPActions";
 import * as ca from "actions/ControlActions.js";
 import * as sel from "selectors";
@@ -21,6 +22,8 @@ export const usePurchaseTab = () => {
   const ticketAutoBuyerRunning = useSelector(sel.getTicketAutoBuyerRunning);
   const isLoading = useSelector(sel.purchaseTicketsRequestAttempt);
   const notMixedAccounts = useSelector(sel.getNotMixedAccounts);
+  const isTrezor = useSelector(sel.isTrezor);
+  const isPurchasingTicketsTrezor = useSelector(sel.isPurchasingTicketsTrezor);
 
   const rememberedVspHost = useSelector(sel.getRememberedVspHost);
   const visibleAccounts = useSelector(sel.visibleAccounts);
@@ -54,9 +57,16 @@ export const usePurchaseTab = () => {
     [dispatch]
   );
   const purchaseTicketsAttempt = useCallback(
-    (passphrase, account, numTickets, vsp) =>
-      dispatch(ca.purchaseTicketsAttempt(passphrase, account, numTickets, vsp)),
-    [dispatch]
+    (passphrase, account, numTickets, vsp) => {
+      if (isTrezor) {
+        dispatch(trezorPurchseTicketsAttempt(account, numTickets, vsp));
+      } else {
+        dispatch(
+          ca.purchaseTicketsAttempt(passphrase, account, numTickets, vsp)
+        );
+      }
+    },
+    [dispatch, isTrezor]
   );
 
   const setRememberedVspHost = useCallback(
@@ -140,6 +150,7 @@ export const usePurchaseTab = () => {
     vsp,
     setVSP,
     numTicketsToBuy,
-    setNumTicketsToBuy
+    setNumTicketsToBuy,
+    isPurchasingTicketsTrezor
   };
 };
diff --git a/app/components/views/TicketsPage/StakingTabWarning/StakingTabWarning.jsx b/app/components/views/TicketsPage/StakingTabWarning/StakingTabWarning.jsx
index 5bd7a124de..9a0ce3c7c8 100644
--- a/app/components/views/TicketsPage/StakingTabWarning/StakingTabWarning.jsx
+++ b/app/components/views/TicketsPage/StakingTabWarning/StakingTabWarning.jsx
@@ -27,10 +27,12 @@ const StakingTabWarning = ({ onAcceptCreationWarning }) => {
     <div className={styles.container}>
       <Subtitle
         className={styles.header}
-        title={<T id="stakingTabWarning.title" m="Before You continue..." />}>
+        title={<T id="stakingTabWarning.title" m="Before You continue..." />}
+      >
         <KeyBlueButton
           onClick={onAcceptCreationWarning}
-          disabled={!isAcceptCreationWarningButtonEnabled}>
+          disabled={!isAcceptCreationWarningButtonEnabled}
+        >
           <T
             id="stakingTabWarning.okBtn"
             m="I understand and accept the risks"
diff --git a/app/components/views/TicketsPage/StatisticsTab/Heatmap/HeatmapWrapper.jsx b/app/components/views/TicketsPage/StatisticsTab/Heatmap/HeatmapWrapper.jsx
index ebcace0ea0..128642fc96 100644
--- a/app/components/views/TicketsPage/StatisticsTab/Heatmap/HeatmapWrapper.jsx
+++ b/app/components/views/TicketsPage/StatisticsTab/Heatmap/HeatmapWrapper.jsx
@@ -74,7 +74,8 @@ function drawInfo(opts = {}) {
       const divEl = (
         <Tooltip
           content={<TooltipInfo {...{ dayDate, ...day }} />}
-          key={"index" + dayIndex}>
+          key={"index" + dayIndex}
+        >
           <div
             style={{
               background: color,
@@ -106,7 +107,8 @@ function drawInfo(opts = {}) {
             fontSize: 10,
             left: graphEntries[i].left,
             top: offsetY - boxMargin - boxWidth - monthLabelSize
-          }}>
+          }}
+        >
           {Month({ date })}
         </div>
       );
@@ -135,7 +137,8 @@ function drawLegend(opts) {
         position: "absolute",
         top: offsetY - legendFontSize / 2,
         left: legendStarts
-      }}>
+      }}
+    >
       Less
     </span>
   );
@@ -165,7 +168,8 @@ function drawLegend(opts) {
         top: offsetY - legendFontSize / 2,
         fontSize: legendFontSize,
         left: legendStarts + 25 + totalBoxWidth * themeColorNumber
-      }}>
+      }}
+    >
       More
     </span>
   );
diff --git a/app/components/views/TicketsPage/StatisticsTab/StatisticsTab.jsx b/app/components/views/TicketsPage/StatisticsTab/StatisticsTab.jsx
index d5b5a007f1..bec710772e 100644
--- a/app/components/views/TicketsPage/StatisticsTab/StatisticsTab.jsx
+++ b/app/components/views/TicketsPage/StatisticsTab/StatisticsTab.jsx
@@ -17,7 +17,8 @@ const subtitleMenu = ({ hasStats }) => (
           contentClassName={styles.myTicketsStakeTooltip}
           content={
             <T id="mytickets.statistics.stakerewards.link" m="Stake Rewards" />
-          }>
+          }
+        >
           <Link
             to="/tickets/statistics/stakerewards"
             activeClassName={classNames(
@@ -29,7 +30,8 @@ const subtitleMenu = ({ hasStats }) => (
         </Tooltip>
         <Tooltip
           contentClassName={styles.myTicketsVoteTooltip}
-          content={<T id="mytickets.statistics.votetime.link" m="Vote Time" />}>
+          content={<T id="mytickets.statistics.votetime.link" m="Vote Time" />}
+        >
           <Link
             to="/tickets/statistics/voteTime"
             activeClassName={classNames(
@@ -41,7 +43,8 @@ const subtitleMenu = ({ hasStats }) => (
         </Tooltip>
         <Tooltip
           contentClassName={styles.myTicketsTooltip}
-          content={<T id="mytickets.statistics.heatmap.link" m="Heatmap" />}>
+          content={<T id="mytickets.statistics.heatmap.link" m="Heatmap" />}
+        >
           <Link
             to="/tickets/statistics/heatmap"
             activeClassName={classNames(
diff --git a/app/components/views/TicketsPage/TicketsPage.jsx b/app/components/views/TicketsPage/TicketsPage.jsx
index c848105955..31d90eca65 100644
--- a/app/components/views/TicketsPage/TicketsPage.jsx
+++ b/app/components/views/TicketsPage/TicketsPage.jsx
@@ -87,7 +87,8 @@ const TicketsPage = () => {
     useTicketsPage();
   return showStakingWarning ? (
     <StandalonePage
-      header={<StakingTabWarningHeader ticketPrice={ticketPrice} />}>
+      header={<StakingTabWarningHeader ticketPrice={ticketPrice} />}
+    >
       <StakingTabWarning onAcceptCreationWarning={onAcceptStakingWarning} />
     </StandalonePage>
   ) : (
diff --git a/app/components/views/TicketsPage/VSPTicketsStatusTab/Page.jsx b/app/components/views/TicketsPage/VSPTicketsStatusTab/Page.jsx
index 34c6de6c47..bf153c7279 100644
--- a/app/components/views/TicketsPage/VSPTicketsStatusTab/Page.jsx
+++ b/app/components/views/TicketsPage/VSPTicketsStatusTab/Page.jsx
@@ -19,7 +19,8 @@ const subtitleMenu = ({
   <div className={styles.ticketsButtons}>
     <Tooltip
       contentClassName={styles.ticketStatusTooltip}
-      content={<T id="vsptickets.tickettypes.tooltip" m="Ticket Status" />}>
+      content={<T id="vsptickets.tickettypes.tooltip" m="Ticket Status" />}
+    >
       <EyeFilterMenu
         labelKey="label"
         keyField="key"
@@ -115,7 +116,8 @@ const TicketListPage = ({
         initialLoad={!noMoreTickets}
         useWindow={false}
         threshold={loadMoreThreshold}
-        data-testid="VSPTicketHistoryPageContent">
+        data-testid="VSPTicketHistoryPageContent"
+      >
         <TxHistory
           {...{
             transactions: tickets,
diff --git a/app/components/views/TransactionPage/TransactionContent/TransactionContent.jsx b/app/components/views/TransactionPage/TransactionContent/TransactionContent.jsx
index 1417008b9e..efbac52ec7 100644
--- a/app/components/views/TransactionPage/TransactionContent/TransactionContent.jsx
+++ b/app/components/views/TransactionPage/TransactionContent/TransactionContent.jsx
@@ -158,7 +158,8 @@ const TransactionContent = ({
               </div>
               <div className={styles.value}>
                 <NavLink
-                  to={location.pathname.replace(txHash, ticketTx.txHash)}>
+                  to={location.pathname.replace(txHash, ticketTx.txHash)}
+                >
                   {ticketTx.txHash}
                 </NavLink>
               </div>
@@ -173,7 +174,8 @@ const TransactionContent = ({
               </div>
               <div className={styles.value}>
                 <NavLink
-                  to={location.pathname.replace(txHash, spenderTx.txHash)}>
+                  to={location.pathname.replace(txHash, spenderTx.txHash)}
+                >
                   {spenderTx.txHash}
                 </NavLink>
               </div>
@@ -216,7 +218,8 @@ const TransactionContent = ({
                     <div>
                       <Tooltip
                         content={agenda.description}
-                        contentClassName={styles.agendaDescTooltip}>
+                        contentClassName={styles.agendaDescTooltip}
+                      >
                         <span className={styles.issueId}>{agenda.issueId}</span>
                       </Tooltip>
                     </div>
@@ -224,7 +227,8 @@ const TransactionContent = ({
                       className={classNames(
                         styles.voteChoice,
                         styles[agenda.voteChoice]
-                      )}>
+                      )}
+                    >
                       {agenda.voteChoice}
                     </div>
                     <div className={styles.agendaAlert}>
@@ -310,7 +314,8 @@ const TransactionContent = ({
                         to={location.pathname.replace(
                           txHash,
                           VSPTicketStatus.feetxhash
-                        )}>
+                        )}
+                      >
                         {VSPTicketStatus.feetxhash}
                       </NavLink>
                     </div>
@@ -332,7 +337,8 @@ const TransactionContent = ({
                         className={classNames(
                           styles.value,
                           styles.treasurypolicy
-                        )}>
+                        )}
+                      >
                         {Object.keys(VSPTicketStatus.treasurypolicy).map(
                           (key) => (
                             <>
@@ -353,7 +359,8 @@ const TransactionContent = ({
                         className={classNames(
                           styles.value,
                           styles.tspendpolicy
-                        )}>
+                        )}
+                      >
                         {Object.keys(VSPTicketStatus.tspendpolicy).map(
                           (key) => (
                             <>
@@ -402,7 +409,8 @@ const TransactionContent = ({
           <div className={styles.rebroadcastBtnContainer}>
             <KeyBlueButton
               className={styles.rebroadcastBtn}
-              onClick={publishUnminedTransactions}>
+              onClick={publishUnminedTransactions}
+            >
               <T
                 id="txDetails.rebroadcastTransactions"
                 m="Rebroadcast Transaction"
@@ -412,7 +420,8 @@ const TransactionContent = ({
           <div className={styles.abandonBtnContainer}>
             <KeyBlueButton
               className={styles.abandonBtn}
-              onClick={() => abandonTransaction(txHash)}>
+              onClick={() => abandonTransaction(txHash)}
+            >
               <T id="txDetails.abandontTransaction" m="Abandon Transaction" />
             </KeyBlueButton>
           </div>
@@ -430,7 +439,8 @@ const TransactionContent = ({
                   txInputs.length > 0
                     ? styles.overviewTitleConsumed
                     : styles.overviewTitleEmpty
-                }>
+                }
+              >
                 <T id="txDetails.walletInputs" m="Wallet Inputs" />
               </div>
               {txInputs.map(({ accountName, amount }, idx) => (
@@ -455,7 +465,8 @@ const TransactionContent = ({
                   nonWalletInputs.length > 0
                     ? styles.overviewTitleConsumed
                     : styles.overviewTitleEmpty
-                }>
+                }
+              >
                 <T id="txDetails.nonWalletInputs" m="Non Wallet Inputs" />
               </div>
               {nonWalletInputs.map(({ address, amount }, idx) => (
@@ -491,7 +502,8 @@ const TransactionContent = ({
                   txOutputs.length > 0
                     ? styles.overviewTitleConsumed
                     : styles.overviewTitleEmpty
-                }>
+                }
+              >
                 <T id="txDetails.walletOutputs" m="Wallet Outputs" />
               </div>
               {txOutputs.map(({ accountName, decodedScript, amount }, idx) => (
@@ -522,7 +534,8 @@ const TransactionContent = ({
                   nonWalletOutputs.length > 0
                     ? styles.overviewTitleConsumed
                     : styles.overviewTitleEmpty
-                }>
+                }
+              >
                 <T id="txDetails.nonWalletOutputs" m="Non Wallet Outputs" />
               </div>
               {nonWalletOutputs.length > MaxNonWalletOutputs ? (
@@ -536,7 +549,8 @@ const TransactionContent = ({
                 nonWalletOutputs.map(({ address, amount }, idx) => (
                   <div key={idx} className={styles.row}>
                     <div
-                      className={classNames(styles.address, styles.nonWallet)}>
+                      className={classNames(styles.address, styles.nonWallet)}
+                    >
                       <TruncatedText
                         text={address}
                         max={truncateMax}
diff --git a/app/components/views/TransactionPage/TransactionPage.jsx b/app/components/views/TransactionPage/TransactionPage.jsx
index 3bf57f204a..0fbfdbec64 100644
--- a/app/components/views/TransactionPage/TransactionPage.jsx
+++ b/app/components/views/TransactionPage/TransactionPage.jsx
@@ -31,7 +31,8 @@ const TransactionPage = () => {
       return (
         <StandalonePage
           header={TransactionHeader({ ...viewedTransaction })}
-          className={styles.standalonePage}>
+          className={styles.standalonePage}
+        >
           <DecredLoading center />
         </StandalonePage>
       );
@@ -39,7 +40,8 @@ const TransactionPage = () => {
       return (
         <StandalonePage
           header={TransactionHeader({ ...viewedTransaction })}
-          className={styles.standalonePage}>
+          className={styles.standalonePage}
+        >
           <TransactionContent
             {...{
               transactionDetails: viewedTransaction,
@@ -62,7 +64,8 @@ const TransactionPage = () => {
       return (
         <StandalonePage
           header={TransactionHeader({ ...viewedTransaction })}
-          className={styles.standalonePage}>
+          className={styles.standalonePage}
+        >
           <p>Transaction not found</p>
         </StandalonePage>
       );
diff --git a/app/components/views/TransactionsPage/ExportTab/ExportPage/ExportPage.jsx b/app/components/views/TransactionsPage/ExportTab/ExportPage/ExportPage.jsx
index 55c5abb394..629e7180f7 100644
--- a/app/components/views/TransactionsPage/ExportTab/ExportPage/ExportPage.jsx
+++ b/app/components/views/TransactionsPage/ExportTab/ExportPage/ExportPage.jsx
@@ -91,7 +91,8 @@ const ExportPage = ({
       <div className={classNames(styles.exportAreaRight)}>
         <p
           className={styles.exportInfoDescription}
-          data-testid="export-description">
+          data-testid="export-description"
+        >
           {selectedExport.description}
         </p>
         <div>
@@ -99,7 +100,8 @@ const ExportPage = ({
           :&nbsp;
           <span
             className={styles.exportInfoNotExpanded}
-            data-testid="exported-fields">
+            data-testid="exported-fields"
+          >
             {selectedExport.fields
               .map(({ name }) => name.charAt(0).toUpperCase() + name.slice(1))
               .join(", ")}
@@ -112,7 +114,8 @@ const ExportPage = ({
       <KeyBlueButton
         onClick={onExportCSV}
         disabled={exportingData || !destinationFile}
-        loading={exportingData}>
+        loading={exportingData}
+      >
         <T id="export.btnExport" m="Export" />
       </KeyBlueButton>
     </div>
diff --git a/app/components/views/TransactionsPage/HistoryTab/HistoryPage/HistoryPage.jsx b/app/components/views/TransactionsPage/HistoryTab/HistoryPage/HistoryPage.jsx
index c471e25994..5842c1e3e7 100644
--- a/app/components/views/TransactionsPage/HistoryTab/HistoryPage/HistoryPage.jsx
+++ b/app/components/views/TransactionsPage/HistoryTab/HistoryPage/HistoryPage.jsx
@@ -46,7 +46,8 @@ const subtitleMenu = ({
     </div>
     <Tooltip
       contentClassName={styles.sortByTooltip}
-      content={<T id="transactions.sortby.tooltip" m="Sort By" />}>
+      content={<T id="transactions.sortby.tooltip" m="Sort By" />}
+    >
       <EyeFilterMenuWithSlider
         {...{ unitDivisor, currencyDisplay }}
         labelKey="label"
@@ -62,7 +63,8 @@ const subtitleMenu = ({
     </Tooltip>
     <Tooltip
       contentClassName={styles.typeTooltip}
-      content={<T id="transactions.txtypes.tooltip" m="Transaction Type" />}>
+      content={<T id="transactions.txtypes.tooltip" m="Transaction Type" />}
+    >
       <EyeFilterMenu
         options={txTypes}
         selected={selectedTxTypeKeys}
@@ -119,10 +121,12 @@ const Page = ({
       loadMore={onLoadMoreTransactions}
       initialLoad={loadMoreThreshold > 90}
       useWindow={false}
-      threshold={loadMoreThreshold}>
+      threshold={loadMoreThreshold}
+    >
       <div
         className={styles.historyPageContent}
-        data-testid="historyPageContent">
+        data-testid="historyPageContent"
+      >
         {transactions.length > 0 ? (
           <TxHistory {...{ transactions, tsDate, mode: "regular" }} />
         ) : null}
diff --git a/app/components/views/TransactionsPage/ReceiveTab/ReceivePage/QRCodeModal/QRCodeModal.jsx b/app/components/views/TransactionsPage/ReceiveTab/ReceivePage/QRCodeModal/QRCodeModal.jsx
index 44aba3b29a..d3430b9da2 100644
--- a/app/components/views/TransactionsPage/ReceiveTab/ReceivePage/QRCodeModal/QRCodeModal.jsx
+++ b/app/components/views/TransactionsPage/ReceiveTab/ReceivePage/QRCodeModal/QRCodeModal.jsx
@@ -12,7 +12,8 @@ const QRCode = ({ addr, amount }) => {
   return (
     <div
       className={style.qrCode}
-      dangerouslySetInnerHTML={{ __html: qr_img }}></div>
+      dangerouslySetInnerHTML={{ __html: qr_img }}
+    ></div>
   );
 };
 
diff --git a/app/components/views/TransactionsPage/ReceiveTab/ReceivePage/ReceivePage.jsx b/app/components/views/TransactionsPage/ReceiveTab/ReceivePage/ReceivePage.jsx
index accb6d1e43..2b20e06890 100644
--- a/app/components/views/TransactionsPage/ReceiveTab/ReceivePage/ReceivePage.jsx
+++ b/app/components/views/TransactionsPage/ReceiveTab/ReceivePage/ReceivePage.jsx
@@ -75,7 +75,8 @@ const ReceivePage = ({
             className={classNames(
               styles.inputWrapper,
               styles.amountInputWrapper
-            )}>
+            )}
+          >
             <div className={styles.receiveSelectAmountInput}>
               <DcrInput
                 newBiggerFontStyle
@@ -97,13 +98,15 @@ const ReceivePage = ({
         <div className={styles.line}>
           <TextHighlighted
             truncate={false}
-            className={classNames(styles.receiveContentNestQR)}>
+            className={classNames(styles.receiveContentNestQR)}
+          >
             {nextAddress}
             <div
               className={classNames(
                 styles.receiveContentNestCopyQR,
                 tooltip && styles.opacity
-              )}>
+              )}
+            >
               <div className={styles.receiveContentNestCopyQRArrow} />
               <div className={styles.receiveContentNestCopyQRText}>
                 {tooltipText ? (
@@ -154,7 +157,8 @@ const ReceivePage = ({
             setTooltipText(true);
             showTooltip();
             onRequestAddress();
-          }}>
+          }}
+        >
           <T id="receive.newAddressBtn" m="Generate new address" />
         </KeyBlueButton>
       </div>
diff --git a/app/components/views/TransactionsPage/SendTab/SendOutputRow/SendOutputRow.jsx b/app/components/views/TransactionsPage/SendTab/SendOutputRow/SendOutputRow.jsx
index cc010db32f..7dae93d654 100644
--- a/app/components/views/TransactionsPage/SendTab/SendOutputRow/SendOutputRow.jsx
+++ b/app/components/views/TransactionsPage/SendTab/SendOutputRow/SendOutputRow.jsx
@@ -51,7 +51,8 @@ const getSendAllFundsIcon = ({
             id="sendtab.sendAllTitle.disabled"
             m="Send all funds from selected account - Disabled"
           />
-        }>
+        }
+      >
         <ButtonIcon type="sendMax" disabled />
       </Tooltip>
     ) : !isSendAll ? (
@@ -62,7 +63,8 @@ const getSendAllFundsIcon = ({
             id="sendtab.sendAllTitle"
             m="Send all funds from selected account"
           />
-        }>
+        }
+      >
         <ButtonIcon type="sendMax" onClick={onShowSendAll} />
       </Tooltip>
     ) : (
@@ -70,7 +72,8 @@ const getSendAllFundsIcon = ({
         contentClassName={styles.tooltipSendAllDisabled}
         content={
           <T id="sendtab.cancelSendAllTitle" m="Cancel sending all funds" />
-        }>
+        }
+      >
         <ButtonIcon type="cancel" onClick={onHideSendAll} />
       </Tooltip>
     )}
@@ -90,7 +93,8 @@ const getAddInputIcon = ({
   return isSendSelf || onlySendSelfAllowed || isSendAll ? (
     <Tooltip
       contentClassName={styles.tooltipAddInput}
-      content={<T id="sendtab.addOutput" m="Add output" />}>
+      content={<T id="sendtab.addOutput" m="Add output" />}
+    >
       <ButtonIcon
         type="plus"
         iconColor={iconColor}
@@ -102,7 +106,8 @@ const getAddInputIcon = ({
   ) : index === 0 ? (
     <Tooltip
       contentClassName={styles.tooltipAddInput}
-      content={<T id="sendtab.addOutput" m="Add output" />}>
+      content={<T id="sendtab.addOutput" m="Add output" />}
+    >
       <ButtonIcon
         type="plus"
         iconColor={iconColor}
@@ -113,7 +118,8 @@ const getAddInputIcon = ({
   ) : (
     <Tooltip
       contentClassName={styles.tooltipDeleteInput}
-      content={<T id="sendtab.deleteOutput" m="Delete output" />}>
+      content={<T id="sendtab.deleteOutput" m="Delete output" />}
+    >
       <ButtonIcon
         type="cancel"
         iconColor={iconColor}
@@ -130,7 +136,8 @@ const getSendSelfIcon = ({ isSendSelf, onShowSendSelf, onShowSendOthers }) =>
       contentClassName={styles.tooltipSendToSelf}
       content={
         <T id="sendtab.sendSelfTitle" m="Send funds to another account" />
-      }>
+      }
+    >
       <ButtonIcon
         type="accounts"
         onClick={onShowSendSelf}
@@ -142,7 +149,8 @@ const getSendSelfIcon = ({ isSendSelf, onShowSendSelf, onShowSendOthers }) =>
       contentClassName={styles.tooltipSendAllDisabled}
       content={
         <T id="sendtab.sendOthersTitle" m="Send funds to another wallet" />
-      }>
+      }
+    >
       <ButtonIcon
         type="cancel"
         onClick={onShowSendOthers}
@@ -197,7 +205,8 @@ const SendOutputRow = ({
       className={classNames(
         styles.sendOutputContainer,
         index > 0 && styles.plus
-      )}>
+      )}
+    >
       {index === 0 && (
         <>
           <div className={classNames(styles.sendInputWrapper, styles.from)}>
@@ -231,7 +240,8 @@ const SendOutputRow = ({
       {isSendAll && (
         <label
           htmlFor={`amountInput-${index}`}
-          className={styles.amountInputLabel}>
+          className={styles.amountInputLabel}
+        >
           <T id="sendtab.sendAllAmountLabel" m="Amount" />
         </label>
       )}
@@ -239,7 +249,8 @@ const SendOutputRow = ({
         className={classNames(
           styles.amountContainer,
           isSendAll && styles.sendAllContainer
-        )}>
+        )}
+      >
         <div className={styles.sendInputWrapper}>
           {isSendAll ? (
             <Balance
@@ -271,7 +282,8 @@ const SendOutputRow = ({
           className={classNames(
             styles.percentOfBalance,
             percentOfBalance > 100 && styles.error
-          )}>
+          )}
+        >
           <T
             id="sendtab.percentOfBalance"
             m="{percent}% of Account Balance"
@@ -288,7 +300,8 @@ const SendOutputRow = ({
             <>
               <label
                 htmlFor={`addressInput-${index}`}
-                className={styles.addressInputLabel}>
+                className={styles.addressInputLabel}
+              >
                 <T id="sendtab.sendTo" m="Send to" />
               </label>
               <ReceiveAccountsSelect
@@ -322,7 +335,8 @@ const SendOutputRow = ({
               onChange={(e) =>
                 onValidateAddress({ address: e.target.value, index })
               }
-              onKeyDown={onKeyDown}>
+              onKeyDown={onKeyDown}
+            >
               {!destination ? (
                 <Button
                   kind="secondary"
@@ -334,7 +348,8 @@ const SendOutputRow = ({
                       address: wallet.readFromClipboard().trim(),
                       index
                     });
-                  }}>
+                  }}
+                >
                   Paste
                 </Button>
               ) : (
@@ -345,7 +360,8 @@ const SendOutputRow = ({
                   onClick={(e) => {
                     e.preventDefault();
                     onValidateAddress({ address: "", index });
-                  }}>
+                  }}
+                >
                   <div />
                 </Button>
               )}
diff --git a/app/components/views/TrezorPage/TrezorPageAccordion/TrezorPageAccordion.jsx b/app/components/views/TrezorPage/TrezorPageAccordion/TrezorPageAccordion.jsx
index 752b664155..9b8de9d0a6 100644
--- a/app/components/views/TrezorPage/TrezorPageAccordion/TrezorPageAccordion.jsx
+++ b/app/components/views/TrezorPage/TrezorPageAccordion/TrezorPageAccordion.jsx
@@ -18,7 +18,8 @@ const TrezorPageAccordion = ({ children, label }) => {
       className={styles.accordion}
       childrenClassName={styles.accordionChildren}
       arrowClassName={styles.accordionArrow}
-      activeArrowClassName={styles.activeAccordionArrow}>
+      activeArrowClassName={styles.activeAccordionArrow}
+    >
       {children}
     </VerticalAccordion>
   );
diff --git a/app/components/views/TrezorPage/TrezorPageSections/ChangeLabel/ChangeLabel.jsx b/app/components/views/TrezorPage/TrezorPageSections/ChangeLabel/ChangeLabel.jsx
index 39047f9fa8..5c73773b25 100644
--- a/app/components/views/TrezorPage/TrezorPageSections/ChangeLabel/ChangeLabel.jsx
+++ b/app/components/views/TrezorPage/TrezorPageSections/ChangeLabel/ChangeLabel.jsx
@@ -39,7 +39,8 @@ const ChangeLabel = ({
 
   return (
     <ContainerComponent
-      label={<T id="trezor.changeLabel.header" m="Label and Homescreen" />}>
+      label={<T id="trezor.changeLabel.header" m="Label and Homescreen" />}
+    >
       <div className={classNames("flex-row", "align-center")}>
         <ButtonIcon
           type="decredLogo"
@@ -75,7 +76,8 @@ const ChangeLabel = ({
           className={styles.newLabelButton}
           onClick={changeLabelClicked}
           disabled={performingOperation || !newLabel || newLabel === ""}
-          loading={performingOperation}>
+          loading={performingOperation}
+        >
           <T id="trezor.changeLabel.changeButton" m="Change Label" />
         </KeyBlueButton>
       </div>
diff --git a/app/components/views/TrezorPage/TrezorPageSections/DeviceSetupSection/DeviceSetupRow/DeviceSetupRow.jsx b/app/components/views/TrezorPage/TrezorPageSections/DeviceSetupSection/DeviceSetupRow/DeviceSetupRow.jsx
index bf34cb2ec6..7c8da18974 100644
--- a/app/components/views/TrezorPage/TrezorPageSections/DeviceSetupSection/DeviceSetupRow/DeviceSetupRow.jsx
+++ b/app/components/views/TrezorPage/TrezorPageSections/DeviceSetupSection/DeviceSetupRow/DeviceSetupRow.jsx
@@ -20,7 +20,8 @@ const DeviceSetupRow = ({
       className={styles.button}
       onClick={onClick}
       disabled={performingOperation}
-      loading={performingOperation}>
+      loading={performingOperation}
+    >
       {buttonLabel}
     </KeyBlueButton>
   </div>
diff --git a/app/components/views/TrezorPage/TrezorPageSections/DeviceSetupSection/DeviceSetupSection.jsx b/app/components/views/TrezorPage/TrezorPageSections/DeviceSetupSection/DeviceSetupSection.jsx
index 11f049d8b3..cbc29e7fb4 100644
--- a/app/components/views/TrezorPage/TrezorPageSections/DeviceSetupSection/DeviceSetupSection.jsx
+++ b/app/components/views/TrezorPage/TrezorPageSections/DeviceSetupSection/DeviceSetupSection.jsx
@@ -12,7 +12,8 @@ const DeviceSetupSection = ({
   backupDevice
 }) => (
   <ContainerComponent
-    label={<T id="trezor.deviceSetup.header" m="Device Setup and Recovery" />}>
+    label={<T id="trezor.deviceSetup.header" m="Device Setup and Recovery" />}
+  >
     <DeviceSetupDocumentation name="TrezorDeviceSetup" />
 
     <div className={styles.deviceSetupRows}>
diff --git a/app/components/views/TrezorPage/TrezorPageSections/FirmwareUpdate/FirmwareUpdate.jsx b/app/components/views/TrezorPage/TrezorPageSections/FirmwareUpdate/FirmwareUpdate.jsx
index b4ca82590c..7e89aed23b 100644
--- a/app/components/views/TrezorPage/TrezorPageSections/FirmwareUpdate/FirmwareUpdate.jsx
+++ b/app/components/views/TrezorPage/TrezorPageSections/FirmwareUpdate/FirmwareUpdate.jsx
@@ -36,7 +36,8 @@ const FirmwareUpdate = ({
 
   return (
     <ContainerComponent
-      label={<T id="trezor.firmwareUpdate.header" m="Firmware Update" />}>
+      label={<T id="trezor.firmwareUpdate.header" m="Firmware Update" />}
+    >
       <Documentation
         name="TrezorFirmwareUpdateWarning"
         className={styles.documentation}
@@ -57,7 +58,8 @@ const FirmwareUpdate = ({
           className={styles.updateFirmwareButton}
           onClick={_updateFirmware}
           loading={performingOperation || isPerformingUpdate}
-          disabled={performingOperation || isPerformingUpdate}>
+          disabled={performingOperation || isPerformingUpdate}
+        >
           <T id="trezorPage.updateFirmwareBtn" m="Update Firmware" />
         </KeyBlueButton>
       </div>
diff --git a/app/containers/App/App.jsx b/app/containers/App/App.jsx
index c862784613..273e3f5f81 100644
--- a/app/containers/App/App.jsx
+++ b/app/containers/App/App.jsx
@@ -23,7 +23,8 @@ const App = () => {
       messages={locale.messages}
       formats={locale.formats}
       defaultFormats={defaultFormats}
-      key={locale.key}>
+      key={locale.key}
+    >
       <main className={theme}>
         <Switch>
           <Redirect from="/" exact to="/getstarted" />
@@ -40,7 +41,8 @@ const App = () => {
         <div id="modal-portal-macos">
           <AboutModal
             show={aboutModalMacOSVisible}
-            onCancelModal={hideAboutModalMacOS}></AboutModal>
+            onCancelModal={hideAboutModalMacOS}
+          ></AboutModal>
         </div>
         <TrezorModals />
         <ConfirmationDialogModal />
diff --git a/app/containers/Wallet/Wallet.jsx b/app/containers/Wallet/Wallet.jsx
index 78fc2e6851..de2d87cb74 100644
--- a/app/containers/Wallet/Wallet.jsx
+++ b/app/containers/Wallet/Wallet.jsx
@@ -43,7 +43,8 @@ const Wallet = ({ setInterval }) => {
     <PageBody>
       <SideBar />
       <BlurableContainer
-        className={expandSideBar ? styles.pageView : styles.reducedBar}>
+        className={expandSideBar ? styles.pageView : styles.reducedBar}
+      >
         <StaticSwitch className={styles.staticSwitch}>
           <Route path="/home" component={HomePage} />
           <Route path="/accounts" component={AccountsPage} />
diff --git a/app/helpers/msgTx.js b/app/helpers/msgTx.js
index 3bd5c83c60..0808c490fc 100644
--- a/app/helpers/msgTx.js
+++ b/app/helpers/msgTx.js
@@ -268,6 +268,7 @@ export function decodeRawTransaction(rawTx) {
     position += 4;
     tx.expiry = rawTx.readUInt32LE(position);
     position += 4;
+    tx.prefixOffset = position;
   }
 
   if (tx.serType !== SERTYPE_NOWITNESS) {
diff --git a/app/helpers/trezor.js b/app/helpers/trezor.js
index a6ed076cfa..468cb93561 100644
--- a/app/helpers/trezor.js
+++ b/app/helpers/trezor.js
@@ -28,14 +28,14 @@ export const addressPath = (index, branch, account, coinType) => {
 };
 
 // walletTxToBtcjsTx is a aux function to convert a tx decoded by the decred wallet (ie,
-// returned from wallet.decoreRawTransaction call) into a bitcoinjs-compatible
+// returned from wallet.decodeRawTransaction call) into a bitcoinjs-compatible
 // transaction (to be used in trezor).
 export const walletTxToBtcjsTx = async (
   walletService,
   chainParams,
   tx,
   inputTxs,
-  changeIndex
+  changeIndexes
 ) => {
   const inputs = tx.inputs.map(async (inp) => {
     const addr = inp.outpointAddress;
@@ -81,7 +81,7 @@ export const walletTxToBtcjsTx = async (
     const addrValidResp = await wallet.validateAddress(walletService, addr);
     if (!addrValidResp.isValid) throw "Not a valid address: " + addr;
     let address_n = null;
-    if (i === changeIndex && addrValidResp.isMine) {
+    if (changeIndexes.includes(i) && addrValidResp.isMine) {
       const addrIndex = addrValidResp.index;
       const addrBranch = addrValidResp.isInternal ? 1 : 0;
       address_n = addressPath(
@@ -124,7 +124,10 @@ export const walletTxToRefTx = async (walletService, tx) => {
   const outputs = tx.outputs.map(async (outp) => {
     const addr = outp.decodedScript.address;
     const addrValidResp = await wallet.validateAddress(walletService, addr);
-    if (!addrValidResp.isValid) throw new Error("Not a valid address: " + addr);
+    // Scripts with zero value can be ignored as they are not a concern when
+    // spending from an outpoint.
+    if (outp.value != 0 && !addrValidResp.isValid)
+      throw new Error("Not a valid address: " + addr);
     return {
       amount: outp.value,
       script_pubkey: rawToHex(outp.script),
diff --git a/app/index.js b/app/index.js
index 48abab17fc..008ef94a5a 100644
--- a/app/index.js
+++ b/app/index.js
@@ -561,7 +561,8 @@ const render = () =>
       <ThemeProvider
         themes={themes}
         defaultThemeName={defaultThemeName}
-        fonts={fonts}>
+        fonts={fonts}
+      >
         <Provider store={store}>
           <ConnectedRouter history={history}>
             <Switch>
diff --git a/app/main_dev/externalRequests.js b/app/main_dev/externalRequests.js
index 0eef75a5b9..af0b056402 100644
--- a/app/main_dev/externalRequests.js
+++ b/app/main_dev/externalRequests.js
@@ -121,6 +121,10 @@ export const installSessionHandlers = (mainLogger) => {
         `connect-src ${connectSrc}; `;
     }
 
+    const requestURL = new URL(details.url);
+    const maybeVSPReqType = `stakepool_${requestURL.protocol}//${requestURL.host}`;
+    const isVSPRequest = allowedExternalRequests[maybeVSPReqType];
+
     if (isDev && /^http[s]?:\/\//.test(details.url)) {
       // In development (when accessing via the HMR server) we need to overwrite
       // the origin, otherwise electron fails to contact external servers due
@@ -144,6 +148,12 @@ export const installSessionHandlers = (mainLogger) => {
         newHeaders["Access-Control-Allow-Headers"] = "Content-Type";
       }
 
+      if (isVSPRequest && details.method === "OPTIONS") {
+        statusLine = "OK";
+        newHeaders["Access-Control-Allow-Headers"] =
+          "Content-Type,vsp-client-signature";
+      }
+
       const globalCfg = getGlobalCfg();
       const cfgAllowedVSPs = globalCfg.get(cfgConstants.ALLOWED_VSP_HOSTS, []);
       if (cfgAllowedVSPs.some((url) => details.url.includes(url))) {
@@ -204,6 +214,10 @@ export const allowVSPRequests = (stakePoolHost) => {
 
   addAllowedURL(stakePoolHost + "/api/v3/vspinfo");
   addAllowedURL(stakePoolHost + "/api/v3/ticketstatus");
+  addAllowedURL(stakePoolHost + "/api/v3/feeaddress");
+  addAllowedURL(stakePoolHost + "/api/v3/payfee");
+  addAllowedURL(stakePoolHost + "/api/ticketstatus");
+  allowedExternalRequests[reqType] = true;
 };
 
 export const reloadAllowedExternalRequests = () => {
diff --git a/app/middleware/vspapi.js b/app/middleware/vspapi.js
index 82977fe459..0ad4020afd 100644
--- a/app/middleware/vspapi.js
+++ b/app/middleware/vspapi.js
@@ -66,3 +66,25 @@ export function getVSPTicketStatus({ host, sig, json }, cb) {
     .then((resp) => cb(resp, null, host))
     .catch((error) => cb(null, error, host));
 }
+
+// getFeeAddress gets a ticket`s fee address.
+export function getFeeAddress({ host, sig, req }, cb) {
+  console.log(req);
+  POST(host + "/api/v3/feeaddress", sig, req)
+    .then((resp) => cb(resp, null, host))
+    .catch((error) => cb(null, error, host));
+}
+
+// payFee infomrs of a ticket`s fee payment.
+export function payFee({ host, sig, req }, cb) {
+  console.log(req);
+  POST(host + "/api/v3/payfee", sig, req)
+    .then((resp) => cb(resp, null, host))
+    .catch((error) => cb(null, error, host));
+}
+
+export function getTicketStatus({ host, vspClientSig, request }, cb) {
+  POST(host + "/api/ticketstatus", vspClientSig, request)
+    .then((resp) => cb(resp, null, host))
+    .catch((error) => cb(null, error, host));
+}
diff --git a/app/reducers/trezor.js b/app/reducers/trezor.js
index 596bd18c51..1c1aff38c2 100644
--- a/app/reducers/trezor.js
+++ b/app/reducers/trezor.js
@@ -19,6 +19,9 @@ import {
   TRZ_PASSPHRASE_REQUESTED,
   TRZ_PASSPHRASE_ENTERED,
   TRZ_PASSPHRASE_CANCELED,
+  TRZ_PURCHASETICKET_ATTEMPT,
+  TRZ_PURCHASETICKET_FAILED,
+  TRZ_PURCHASETICKET_SUCCESS,
   TRZ_WORD_REQUESTED,
   TRZ_WORD_ENTERED,
   TRZ_WORD_CANCELED,
@@ -279,6 +282,12 @@ export default function trezor(state = {}, action) {
         performingOperation: false,
         performingTogglePassphraseOnDeviceProtection: false
       };
+    case TRZ_PURCHASETICKET_ATTEMPT:
+      return {
+        ...state,
+        performingOperation: true,
+        purchasingTickets: true
+      };
     case SIGNTX_FAILED:
     case SIGNTX_SUCCESS:
     case TRZ_CHANGEHOMESCREEN_FAILED:
@@ -305,7 +314,6 @@ export default function trezor(state = {}, action) {
         performingOperation: false,
         performingUpdate: false
       };
-
     case TRZ_TOGGLEPINPROTECTION_FAILED:
     case TRZ_TOGGLEPINPROTECTION_SUCCESS:
       return {
@@ -325,6 +333,13 @@ export default function trezor(state = {}, action) {
         performingOperation: false,
         performingTogglePassphraseOnDeviceProtection: false
       };
+    case TRZ_PURCHASETICKET_FAILED:
+    case TRZ_PURCHASETICKET_SUCCESS:
+      return {
+        ...state,
+        performingOperation: false,
+        purchasingTickets: false
+      };
     case CLOSEWALLET_SUCCESS:
       return { ...state, enabled: false };
     default:
diff --git a/app/selectors.js b/app/selectors.js
index 8a287b5591..69ebb0409e 100644
--- a/app/selectors.js
+++ b/app/selectors.js
@@ -1103,6 +1103,7 @@ export const confirmationDialogModalVisible = bool(
 
 export const isTrezor = get(["trezor", "enabled"]);
 export const isPerformingTrezorUpdate = get(["trezor", "performingUpdate"]);
+export const isPurchasingTicketsTrezor = get(["trezor", "purchasingTickets"]);
 
 export const isSignMessageDisabled = and(isWatchingOnly, not(isTrezor));
 export const isChangePassPhraseDisabled = isWatchingOnly;
diff --git a/app/wallet/control.js b/app/wallet/control.js
index 0384c38105..cc9bb8b966 100644
--- a/app/wallet/control.js
+++ b/app/wallet/control.js
@@ -222,6 +222,8 @@ export const purchaseTickets = (
       resObj.ticketHashes = response
         .getTicketHashesList()
         .map((v) => rawHashToHex(v));
+      resObj.splitTx = Buffer.from(response.getSplitTx());
+      resObj.ticketsList = response.getTicketsList().map((v) => Buffer.from(v));
       resolve(resObj);
     });
   });
diff --git a/app/wallet/vsp.js b/app/wallet/vsp.js
index 41dbca78d6..500f77d30a 100644
--- a/app/wallet/vsp.js
+++ b/app/wallet/vsp.js
@@ -16,6 +16,11 @@ const promisifyReqLogNoData = (fnName, Req) =>
   );
 
 export const getVSPInfo = promisifyReqLogNoData("getVSPInfo", api.getVSPInfo);
+export const getVSPFeeAddress = promisifyReqLogNoData(
+  "getFeeAddress",
+  api.getFeeAddress
+);
+export const payVSPFee = promisifyReqLogNoData("getFeeAddress", api.payFee);
 export const getVSPTicketStatus = promisifyReqLogNoData(
   "getVSPTicketStatus",
   api.getVSPTicketStatus
diff --git a/test/data/decodedTransactions.js b/test/data/decodedTransactions.js
index fc7342676d..900df815fe 100644
--- a/test/data/decodedTransactions.js
+++ b/test/data/decodedTransactions.js
@@ -1,5 +1,6 @@
 export const decodedPurchasedTicketTx = {
   "version": 1,
+  "prefixOffset": 172,
   "serType": 0,
   "numInputs": 1,
   "inputs": [
@@ -56,6 +57,7 @@ export const decodedPurchasedTicketTx = {
 // multiTxPrefix is a tx prefix in the format of how our decodeTxs are. We get
 // this format from wallet.decodeRawTransaction().
 export const multiTxPrefix = {
+  prefixOffset: 211,
   serType: 1, // TxSerializeNoWitness,
   version: 1,
   numInputs: 1,
@@ -113,6 +115,7 @@ export const multiTxPrefix = {
 
 export const decodedVoteTx = {
   "version": 1,
+  "prefixOffset": 201,
   "serType": 0,
   "numInputs": 2,
   "inputs": [
diff --git a/test/test-utils.js b/test/test-utils.js
index eb5c14d515..c48c33d9cb 100644
--- a/test/test-utils.js
+++ b/test/test-utils.js
@@ -83,7 +83,8 @@ function render(ui, renderOptions) {
           messages={locale.messages}
           formats={locale.formats}
           defaultFormats={defaultFormats}
-          key={locale.key}>
+          key={locale.key}
+        >
           {children}
           <div id="modal-portal" />
         </IntlProvider>
@@ -93,7 +94,8 @@ function render(ui, renderOptions) {
       <ThemeProvider
         themes={themes}
         defaultThemeName={initialState.settings.currentSettings.theme}
-        fonts={fonts}>
+        fonts={fonts}
+      >
         <Provider store={store}>
           <ConnectedRouter history={history}>
             <Switch>
diff --git a/test/unit/components/SideBar/LastBlockTime.spec.js b/test/unit/components/SideBar/LastBlockTime.spec.js
index 53d31496de..7f8214da72 100644
--- a/test/unit/components/SideBar/LastBlockTime.spec.js
+++ b/test/unit/components/SideBar/LastBlockTime.spec.js
@@ -23,7 +23,8 @@ const Wrapper = ({ lastBlockTimestamp, setTimeout, clearTimeout }) => {
       messages={locale.messages}
       formats={locale.formats}
       defaultFormats={defaultFormats}
-      key={locale.key}>
+      key={locale.key}
+    >
       <LastBlockTime
         lastBlockTimestamp={lastBlockTimestamp}
         setTimeout={setTimeout}
diff --git a/test/unit/components/buttons/SendTransactionButton.spec.js b/test/unit/components/buttons/SendTransactionButton.spec.js
index badecc48c7..1fe8294346 100644
--- a/test/unit/components/buttons/SendTransactionButton.spec.js
+++ b/test/unit/components/buttons/SendTransactionButton.spec.js
@@ -82,7 +82,7 @@ test("render SendTransactionButton when trezor is enabled", async () => {
   expect(mockSignTransactionAttempt).not.toHaveBeenCalled();
   expect(mockSignTransactionAttemptTrezor).toHaveBeenCalledWith(
     testUnsignedTransaction,
-    testConstructTxResponse
+    [testConstructTxResponse.changeIndex]
   );
   await wait(() => expect(mockOnSubmit).toHaveBeenCalled());
 });
diff --git a/test/unit/components/shared/VerticalAccordion.spec.js b/test/unit/components/shared/VerticalAccordion.spec.js
index ba7c3625ac..98bf6180cc 100644
--- a/test/unit/components/shared/VerticalAccordion.spec.js
+++ b/test/unit/components/shared/VerticalAccordion.spec.js
@@ -19,7 +19,8 @@ const TestVerticalAccordionContainer = ({ disabled = false }) => {
       headerClassName={testHeaderClassName}
       arrowClassName={testArrowClassName}
       show={show}
-      onToggleAccordion={() => setShow((e) => !e)}>
+      onToggleAccordion={() => setShow((e) => !e)}
+    >
       <TestContent />
     </VerticalAccordion>
   );
diff --git a/test/unit/components/views/GovernancePage/TreasurySpending/TreasurySpending.spec.js b/test/unit/components/views/GovernancePage/TreasurySpending/TreasurySpending.spec.js
index 7bb49a5fc0..5fbb793783 100644
--- a/test/unit/components/views/GovernancePage/TreasurySpending/TreasurySpending.spec.js
+++ b/test/unit/components/views/GovernancePage/TreasurySpending/TreasurySpending.spec.js
@@ -97,8 +97,8 @@ const vote = async (
   expectedPiKey
 ) => {
   // vote on yes
-  const yesRadioBtn = within(container).getByText(policy).parentNode
-    .previousSibling;
+  const yesRadioBtn =
+    within(container).getByText(policy).parentNode.previousSibling;
   const updatePrefBtn = within(container).getByRole("button", {
     name: "Update Preference"
   });