[vsp] Show fee tx hash and fee status on tx details view

app/actions/ControlActions.js

@@ -881,6 +881,7 @@ export const signMessageAttempt = (address, message, passphrase) => async (
       getSignMessageSignature: sig,
       type: SIGNMESSAGE_SUCCESS
     });
+    return sig;
   } catch (error) {
     dispatch({ error, type: SIGNMESSAGE_FAILED });
   }

app/actions/VSPActions.js

@@ -1,7 +1,8 @@
 import {
   importScriptAttempt,
   rescanAttempt,
-  unlockAllAcctAndExecFn
+  unlockAllAcctAndExecFn,
+  signMessageAttempt
 } from "./ControlActions";
 import { SETVOTECHOICES_SUCCESS } from "./ClientActions";
 import * as sel from "../selectors";
@@ -694,12 +695,14 @@ export const getVSPsPubkeys = () => async (dispatch) => {
             })
         );
       })
-    ).then((result) =>
+    ).then((result) => {
+      const availableVSPsPubkeys = result.filter((vsp) => !!vsp?.pubkey);
       dispatch({
         type: GETVSPSPUBKEYS_SUCCESS,
-        availableVSPsPubkeys: result.filter((vsp) => !!vsp?.pubkey)
-      })
-    );
+        availableVSPsPubkeys
+      });
+      return availableVSPsPubkeys;
+    });
   } catch (error) {
     dispatch({ type: GETVSPSPUBKEYS_FAILED, error });
   }
@@ -716,7 +719,11 @@ export const processManagedTickets = (passphrase) => async (
   getState
 ) => {
   const walletService = sel.walletService(getState());
-  const availableVSPsPubkeys = sel.getAvailableVSPsPubkeys(getState());
+  let availableVSPsPubkeys = sel.getAvailableVSPsPubkeys(getState());
+
+  if (!availableVSPsPubkeys) {
+    availableVSPsPubkeys = await dispatch(getVSPsPubkeys());
+  }
   try {
     dispatch({ type: PROCESSMANAGEDTICKETS_ATTEMPT });
     let feeAccount, changeAccount;
@@ -1015,3 +1022,83 @@ export const getUnspentUnexpiredVspTickets = () => async (
     });
   }
 };
+
+export const GETVSP_TICKET_STATUS_ATTEMPT = "GETVSP_TICKET_STATUS_ATTEMPT";
+export const GETVSP_TICKET_STATUS_SUCCESS = "GETVSP_TICKET_STATUS_SUCCESS";
+export const GETVSP_TICKET_STATUS_FAILED = "GETVSP_TICKET_STATUS_FAILED";
+
+export const getVSPTicketStatus = (passphrase, tx, decodedTx) => async (
+  dispatch,
+  getState
+) => {
+  let commitmentAddress;
+  let json;
+  try {
+    if (!tx || !tx.ticketTx || !tx.ticketTx.vspHost || !tx.txHash) {
+      throw new Error("Invalid tx parameter");
+    }
+
+    if (
+      !decodedTx ||
+      !decodedTx.outputs ||
+      decodedTx.outputs.length < 2 ||
+      !decodedTx.outputs[1].decodedScript ||
+      !decodedTx.outputs[1].decodedScript.address
+    ) {
+      throw new Error("Invalid decodedTx parameter");
+    }
+
+    // This only considers the first commitment address which is the first odd output
+    commitmentAddress = decodedTx.outputs[1].decodedScript.address;
+
+    json = {
+      tickethash: tx.txHash
+    };
+  } catch (error) {
+    dispatch({ type: GETVSP_TICKET_STATUS_FAILED, error });
+    return;
+  }
+
+  const sig = await dispatch(
+    signMessageAttempt(commitmentAddress, JSON.stringify(json), passphrase)
+  );
+
+  if (!sig) {
+    return;
+  }
+
+  dispatch({ type: GETVSP_TICKET_STATUS_ATTEMPT });
+  try {
+    // Check if user allows access to this VSP. This might trigger a confirmation
+    // dialog.
+    await wallet.allowVSPHost(tx.ticketTx.vspHost);
+    const info = await wallet.getVSPTicketStatus({
+      host: tx.ticketTx.vspHost,
+      sig,
+      json
+    });
+
+    if (!info || !info.data) {
+      throw new Error("Invalid response from the VSP");
+    }
+
+    if (info.data.code) {
+      throw new Error(`${info.data.message} (code: ${info.data.code})`);
+    }
+
+    if (
+      (tx.status === LIVE || tx.status === IMMATURE) &&
+      info.data.feetxstatus === "confirmed" &&
+      tx.feeStatus != VSP_FEE_PROCESS_CONFIRMED
+    ) {
+      dispatch(processManagedTickets(passphrase));
+    }
+
+    dispatch({ type: GETVSP_TICKET_STATUS_SUCCESS });
+    const txURLBuilder = sel.txURLBuilder(getState());
+    info.data.feetxUrl = txURLBuilder(info.data.feetxhash);
+    return info.data;
+  } catch (error) {
+    dispatch({ type: GETVSP_TICKET_STATUS_FAILED, error });
+  }
+};

app/components/views/TicketsPage/PurchaseTab/hooks.js

@@ -63,11 +63,6 @@ export const usePurchaseTab = () => {
     () => dispatch(ca.ticketBuyerCancel()),
     [dispatch]
   );
-  const getTicketStatus = useCallback(
-    (host, tickethash, passphrase) =>
-      dispatch(vspa.getVSPTicketStatus(host, tickethash, passphrase)),
-    [dispatch]
-  );
 
   const getVSPTicketsByFeeStatus = (feeStatus) => {
     dispatch(vspa.getVSPTicketsByFeeStatus(feeStatus));
@@ -114,7 +109,6 @@ export const usePurchaseTab = () => {
     availableVSPs: isVSPListingEnabled ? availableVSPs : [],
     availableVSPsError,
     onDisableTicketAutoBuyer,
-    getTicketStatus,
     ticketAutoBuyerRunning,
     getVSPTicketsByFeeStatus,
     isLegacy,

app/components/views/TransactionPage/TransactionContent/TransactionContent.jsx

@@ -2,7 +2,8 @@ import { Balance, ExternalLink } from "shared";
 import {
   KeyBlueButton,
   RevokeModalButton,
-  CopyToClipboardButton
+  CopyToClipboardButton,
+  PassphraseModalButton
 } from "buttons";
 import { addSpacingAroundText } from "helpers";
 import { FormattedMessage as T } from "react-intl";
@@ -50,7 +51,10 @@ const TransactionContent = ({
   currentBlockHeight,
   isSPV,
   agendas,
-  getAgendaSelectedChoice
+  getAgendaSelectedChoice,
+  getVSPTicketStatus,
+  getVSPTicketStatusAttempt,
+  VSPTicketStatus
 }) => {
   const {
     txHash,
@@ -260,12 +264,62 @@ const TransactionContent = ({
           </div>
         )}
         {(txType == TICKET || txType == VOTE) && ticketTx.vspHost && (
-          <div className={styles.topRow}>
-            <div className={styles.name}>
-              <T id="txDetails.vspHost" m="VSP host" />:
+          <>
+            <div className={styles.topRow}>
+              <div className={styles.name}>
+                <T id="txDetails.vspHost" m="VSP host" />:
+              </div>
+              <div className={styles.value}>{ticketTx.vspHost}</div>
             </div>
-            <div className={styles.value}>{ticketTx.vspHost}</div>
-          </div>
+            {txType == TICKET &&
+              (VSPTicketStatus ? (
+                <>
+                  <div className={styles.topRow}>
+                    <div className={styles.name}>
+                      <T id="txDetails.feeTxHashLabel" m="Fee tx hash" />:
+                    </div>
+                    <div className={styles.value}>
+                      <ExternalLink
+                        className={styles.value}
+                        href={VSPTicketStatus.feetxUrl}>
+                        {VSPTicketStatus.feetxhash}
+                      </ExternalLink>
+                    </div>
+                  </div>
+                  <div className={styles.topRow}>
+                    <div className={styles.name}>
+                      <T id="txDetails.feeTxStatusLabel" m="Fee tx status" />:
+                    </div>
+                    <div className={styles.value}>
+                      {VSPTicketStatus.feetxstatus}
+                    </div>
+                  </div>
+                </>
+              ) : (
+                <div className={styles.topRow}>
+                  <div className={styles.name}></div>
+                  <div className={styles.value}>
+                    <PassphraseModalButton
+                      modalTitle={
+                        <T
+                          id="txDetails.signMessageModal"
+                          m="Fetch VSP Ticket Status"
+                        />
+                      }
+                      buttonLabel={
+                        <T
+                          id="txDetails.signMessageBtn"
+                          m="Fetch VSP Ticket Status"
+                        />
+                      }
+                      loading={getVSPTicketStatusAttempt}
+                      disabled={getVSPTicketStatusAttempt}
+                      onSubmit={getVSPTicketStatus}
+                    />
+                  </div>
+                </div>
+              ))}
+          </>
         )}
       </div>
       {isPending ? (

app/components/views/TransactionPage/TransactionPage.jsx

@@ -18,7 +18,10 @@ const Transaction = () => {
     decodedTx,
     isSPV,
     agendas,
-    getAgendaSelectedChoice
+    getAgendaSelectedChoice,
+    getVSPTicketStatus,
+    getVSPTicketStatusAttempt,
+    VSPTicketStatus
   } = useTransactionPage(txHash);
 
   if (!viewedTransaction) return null;
@@ -48,7 +51,10 @@ const Transaction = () => {
               currentBlockHeight,
               isSPV,
               agendas,
-              getAgendaSelectedChoice
+              getAgendaSelectedChoice,
+              getVSPTicketStatus,
+              getVSPTicketStatusAttempt,
+              VSPTicketStatus
             }}
           />
         </StandalonePage>

app/components/views/TransactionPage/hooks.js

@@ -6,6 +6,7 @@ import * as sel from "selectors";
 import * as ca from "actions/ControlActions";
 import * as ta from "actions/TransactionActions";
 import * as clia from "actions/ClientActions";
+import * as vspa from "actions/VSPActions";
 import { find, compose, eq, get } from "fp";
 
 export function useTransactionPage(txHash) {
@@ -15,6 +16,7 @@ export function useTransactionPage(txHash) {
   const decodedTransactions = useSelector(sel.decodedTransactions);
   const agendas = useSelector(sel.allAgendas);
   const voteChoices = useSelector(sel.voteChoices);
+  const getVSPTicketStatusAttempt = useSelector(sel.getVSPTicketStatusAttempt);
   const getAgendaSelectedChoice = useCallback(
     (agendaId) =>
       get(
@@ -52,6 +54,18 @@ export function useTransactionPage(txHash) {
     () => dispatch(ca.publishUnminedTransactionsAttempt()),
     [dispatch]
   );
+
+  const [VSPTicketStatus, setVSPTicketStatus] = useState(null);
+
+  const getVSPTicketStatus = useCallback(
+    (passphrase) => {
+      dispatch(
+        vspa.getVSPTicketStatus(passphrase, viewedTransaction, decodedTx)
+      ).then((res) => setVSPTicketStatus(res));
+    },
+    [dispatch, viewedTransaction, decodedTx]
+  );
+
   const [state, send] = useMachine(fetchMachine, {
     actions: {
       initial: () => {
@@ -102,6 +116,9 @@ export function useTransactionPage(txHash) {
     decodedTx,
     isSPV,
     agendas,
-    getAgendaSelectedChoice
+    getAgendaSelectedChoice,
+    getVSPTicketStatus,
+    getVSPTicketStatusAttempt,
+    VSPTicketStatus
   };
 }

app/main_dev/externalRequests.js

@@ -143,8 +143,15 @@ export const installSessionHandlers = (mainLogger) => {
         statusLine = "OK";
         newHeaders["Access-Control-Allow-Headers"] = "Content-Type";
       }
-    }
 
+      const globalCfg = getGlobalCfg();
+      const cfgAllowedVSPs = globalCfg.get(cfgConstants.ALLOWED_VSP_HOSTS, []);
+      if (cfgAllowedVSPs.some((url) => details.url.includes(url))) {
+        statusLine = "OK";
+        newHeaders["Access-Control-Allow-Headers"] =
+          "Content-Type, VSP-Client-Signature";
+      }
+    }
     callback({ responseHeaders: newHeaders, statusLine });
   });
 };
@@ -208,7 +215,7 @@ export const allowVSPRequests = (stakePoolHost) => {
   if (allowedExternalRequests[reqType]) return;
 
   addAllowedURL(stakePoolHost + "/api/v3/vspinfo");
-  addAllowedURL(stakePoolHost + "/api/ticketstatus");
+  addAllowedURL(stakePoolHost + "/api/v3/ticketstatus");
 };
 
 export const reloadAllowedExternalRequests = () => {

app/middleware/vspapi.js

@@ -33,11 +33,13 @@ const LEGACY_POST = (path, apiToken, json) => {
 };
 
 const POST = (path, vspClientSig, json) => {
-  const config = {
-    headers: {
-      "VSP-CLIENT-SIGNATURE": vspClientSig
-    }
-  };
+  const config = vspClientSig
+    ? {
+        headers: {
+          "VSP-Client-Signature": vspClientSig
+        }
+      }
+    : {};
   // This json request is strigfied at the call which is making it.
   return postJSON(path, json, config);
 };
@@ -174,8 +176,8 @@ export function getVSPInfo(host, cb) {
     .catch((error) => cb(null, error, host));
 }
 
-export function getTicketStatus({ host, vspClientSig, request }, cb) {
-  POST(host + "/api/ticketstatus", vspClientSig, request)
+export function getVSPTicketStatus({ host, sig, json }, cb) {
+  POST(host + "/api/v3/ticketstatus", sig, json)
     .then((resp) => cb(resp, null, host))
     .catch((error) => cb(null, error, host));
 }

app/reducers/snackbar.js

@@ -66,7 +66,8 @@ import {
   SYNCVSPTICKETS_SUCCESS,
   SYNCVSPTICKETS_FAILED,
   PROCESSMANAGEDTICKETS_FAILED,
-  SETVSPDVOTECHOICE_FAILED
+  SETVSPDVOTECHOICE_FAILED,
+  GETVSP_TICKET_STATUS_FAILED
 } from "actions/VSPActions";
 import {
   ABANDONTRANSACTION_SUCCESS,
@@ -654,6 +655,10 @@ const messages = defineMessages({
     id: "set.vspdvote.failed",
     defaultMessage: "Set vspd vote choices failed: {originalError}"
   },
+  GETVSP_TICKET_STATUS_FAILED: {
+    id: "set.getvspticketstatus.failed",
+    defaultMessage: "Fetch vsp ticket status failed: {originalError}"
+  },
   DEX_STARTUP_FAILED: {
     id: "dex.startup.failed",
     defaultMessage: "DEX Client Failed to Start: {originalError}"
@@ -973,6 +978,7 @@ export default function snackbar(state = {}, action) {
     case PROCESSMANAGEDTICKETS_FAILED:
     case SETVOTECHOICES_FAILED:
     case SETVSPDVOTECHOICE_FAILED:
+    case GETVSP_TICKET_STATUS_FAILED:
     case DEX_STARTUP_FAILED:
     case DEX_LOGIN_FAILED:
     case DEX_ENABLE_FAILED: