multi: Allow trezor ticket purchasing on testnet.

Add purchaseTicketsV3 which purchases tickets using a watching only
trezor wallet from a vsp with api v3. Errors if not on testnet.

Add separate payVSPFee function that will pay a tickets fee if not
already paid, and throws if already paid.

Correct purchase ticket button for watching only wallets. It no longer
asks for a password. Connect purchasing through trezor when isTrezor is
true.

Add vsp v3 endpoints "feeaddress" and "payfee" to allowed external
requests.

Change wallet/control.js to not require an unlocked wallet when signTx
is false.

Add headers to OPTIONS externalRequest. These are required by CORS when
making POST requests.

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" />

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>
       )}

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>

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>

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>
 );

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>
             );

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
           {...{

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>
       )}

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>

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,

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>
   );

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

app/components/buttons/EnableExternalRequestButton.jsx

@@ -7,7 +7,8 @@ const EnableExternalRequestButton = ({ children, requestType, onClick }) => {
     <KeyBlueButton
       onClick={() =>
         onAddAllowedRequestType(requestType).then(() => onClick && onClick())
-      }>
+      }
+    >
       {children}
     </KeyBlueButton>
   );

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"

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}

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>

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>

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}

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}

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}

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;

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>
     );

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,

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>

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,

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"

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}

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"