Add sync vsp ticket by hash button on transaction page

app/actions/VSPActions.js

@@ -5,7 +5,7 @@ import { importScriptAttempt, rescanAttempt } from "./ControlActions";
 import * as sel from "../selectors";
 import * as wallet from "wallet";
 import { TESTNET, MAINNET, VSP_FEE_PROCESS_ERRORED } from "constants";
-import { reverseRawHash } from "../helpers/byteActions";
+import { reverseRawHash, strHashToRaw } from "helpers";
 
 export const GETVSP_ATTEMPT = "GETVSP_ATTEMPT";
 export const GETVSP_FAILED = "GETVSP_FAILED";
@@ -64,6 +64,7 @@ export const SYNCVSPTICKETS_ATTEMPT = "SYNCVSPTICKETS_ATTEMPT";
 export const SYNCVSPTICKETS_FAILED = "SYNCVSPTICKETS_FAILED";
 export const SYNCVSPTICKETS_SUCCESS = "SYNCVSPTICKETS_SUCCESS";
 
+// syncVSPTicketsRequest syncs vsp tickets which are failed to be processed.
 export const syncVSPTicketsRequest = ({ passphrase, vspHost, vspPubkey, account }) => (dispatch, getState) => {
   dispatch({ type: SYNCVSPTICKETS_ATTEMPT });
   wallet.syncVSPTickets(getState().grpc.walletService, passphrase, vspHost, vspPubkey, account)
@@ -76,6 +77,35 @@ export const syncVSPTicketsRequest = ({ passphrase, vspHost, vspPubkey, account
     });
 };
 
+export const SYNCVSPTICKETBYHASH_ATTEMPT = "SYNCVSPTICKETBYHASH_ATTEMPT";
+export const SYNCVSPTICKETBYHASH_FAILED = "SYNCVSPTICKETBYHASH_FAILED";
+export const SYNCVSPTICKETBYHASH_SUCCESS = "SYNCVSPTICKETBYHASH_SUCCESS";
+
+// syncVSPTicketByHash syncs vsp ticket by hash.
+export const syncVSPTicketByHash = ({
+  passphrase,
+  vspHost,
+  vspPubkey,
+  account,
+  ticketHash
+}) => (dispatch, getState) => {
+  dispatch({ type: SYNCVSPTICKETBYHASH_ATTEMPT });
+  wallet.syncVSPTickets(
+    getState().grpc.walletService,
+    passphrase,
+    vspHost,
+    vspPubkey,
+    account,
+    strHashToRaw(ticketHash)
+  )
+    .then(() => {
+      dispatch({ type: SYNCVSPTICKETBYHASH_SUCCESS });
+      dispatch(getVSPTicketsByFeeStatus(VSP_FEE_PROCESS_ERRORED));
+    })
+    .catch(error => {
+      dispatch({ type: SYNCVSPTICKETBYHASH_FAILED, error });
+    });
+};
 
 // getTicketSignature receives the tickethash and request and sign it using the
 // ticket sstxcommitment address.

app/components/views/TransactionPage/Page.js

@@ -4,8 +4,11 @@ import { KeyBlueButton } from "buttons";
 import { addSpacingAroundText } from "helpers";
 import { FormattedMessage as T } from "react-intl";
 import { DecodedTransaction } from "middleware/walletrpc/api_pb";
+import { PassphraseModalButton } from "buttons";
+import { SyncVSPFailedTickets } from "modals";
 import {
   VOTE,
+  TICKET,
   TRANSACTION_DIR_RECEIVED,
   TRANSACTION_DIR_SENT
 } from "constants/Decrediton";
@@ -37,7 +40,13 @@ const Page = ({
   decodedTransaction,
   abandonTransaction,
   publishUnminedTransactions,
-  currentBlockHeight
+  currentBlockHeight,
+  onSyncVSPTicketByHash,
+  setVSP,
+  account,
+  setAccount,
+  isValid,
+  hasVSPTicketsError
 }) => {
   const {
     txHash,
@@ -158,6 +167,26 @@ const Page = ({
           </div>
         </div>
       )}
+      { txType === TICKET && (
+          <PassphraseModalButton
+            {...{
+              onSubmit: onSyncVSPTicketByHash,
+              setVSP,
+              account,
+              setAccount,
+              isValid
+            }}
+            disabled={!hasVSPTicketsError}
+            modalTitle={
+              <T id="transaction.syncVSP" m="Sync on VSP" />
+            }
+            modalComponent={SyncVSPFailedTickets}
+            buttonLabel={
+              <T id="transaction.syncVSP" m="Sync on VSP" />
+            }
+          />
+        )
+      }
       <div className="txdetails-io">
         <div className="txdetails-title">
           <T id="txDetails.io.title" m="I/O Details" />

app/components/views/TransactionPage/TransactionPage.jsx

@@ -4,6 +4,7 @@ import { useParams } from "react-router-dom";
 import { DecredLoading } from "indicators";
 import { StandalonePage } from "layout";
 import { useTransactionPage } from "./hooks";
+import { useState } from "react";
 
 function Transaction() {
   const { txHash } = useParams();
@@ -13,9 +14,25 @@ function Transaction() {
     currentBlockHeight,
     state,
     viewedTransaction,
-    decodedTx
+    decodedTx,
+    syncVSPTicketByHash,
+    defaultSpendingAccount,
+    hasVSPTicketsError
   } = useTransactionPage(txHash);
 
+  const [account, setAccount] = useState(defaultSpendingAccount);
+  const [vsp, setVSP] = useState(null);
+
+  const onSyncVSPTicketByHash = (passphrase) => {
+    syncVSPTicketByHash({
+      passphrase,
+      account: account.value,
+      vspHost: vsp.host,
+      vspPubkey: vsp.pubkey,
+      ticketHash: txHash
+    });
+  };
+
   if (!viewedTransaction) return null;
   switch (state.value) {
     case "idle":
@@ -39,7 +56,12 @@ function Transaction() {
               decodedTransaction: decodedTx,
               abandonTransaction,
               publishUnminedTransactions,
-              currentBlockHeight
+              currentBlockHeight,
+              onSyncVSPTicketByHash,
+              setVSP,
+              account,
+              setAccount,
+              hasVSPTicketsError
             }}
           />
         </StandalonePage>

app/components/views/TransactionPage/hooks.js

@@ -6,8 +6,10 @@ 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";
 
 export function useTransactionPage(txHash) {
+  // selectors
   const regularTxs = useSelector(sel.regularTransactions);
   const stakeTxs = useSelector(sel.stakeTransactions);
   const decodedTransactions = useSelector(sel.decodedTransactions);
@@ -16,7 +18,10 @@ export function useTransactionPage(txHash) {
     decodedTransactions[txHash]
   );
   const currentBlockHeight = useSelector(sel.currentBlockHeight);
+  const defaultSpendingAccount = useSelector(sel.defaultSpendingAccount);
+  const hasVSPTicketsError = useSelector(sel.getHasVSPTicketsError);
 
+  // actions
   const dispatch = useDispatch();
   const abandonTransaction = useCallback((txHash) => {
     dispatch(clia.abandonTransactionAttempt(txHash));
@@ -35,6 +40,11 @@ export function useTransactionPage(txHash) {
     dispatch(ca.publishUnminedTransactionsAttempt()),
     [dispatch]
   );
+
+  const syncVSPTicketByHash = ({ passphrase, vspHost, vspPubkey, account, ticketHash }) =>
+    dispatch(vspa.syncVSPTicketByHash({ passphrase, vspHost, vspPubkey, account, ticketHash }));
+
+  // state machine actions
   const [state, send] = useMachine(fetchMachine, {
     actions: {
       initial: () => {
@@ -78,6 +88,9 @@ export function useTransactionPage(txHash) {
     currentBlockHeight,
     state,
     viewedTransaction,
-    decodedTx
+    decodedTx,
+    syncVSPTicketByHash,
+    defaultSpendingAccount,
+    hasVSPTicketsError
   };
 }

app/middleware/api.proto

@@ -79,6 +79,7 @@ service WalletService {
 	rpc LockWallet (LockWalletRequest) returns (LockWalletResponse);
 	rpc SyncVSPFailedTickets(SyncVSPTicketsRequest) returns (SyncVSPTicketsResponse);
 	rpc GetVSPTicketsByFeeStatus (GetVSPTicketsByFeeStatusRequest) returns (GetVSPTicketsByFeeStatusResponse);
+	rpc SyncVSPTicketByHash (SyncVSPTicketByHashRequest) returns (SyncVSPTicketByHashResponse);
 }
 
 service WalletLoaderService {
@@ -1272,3 +1273,12 @@ message GetVSPTicketsByFeeStatusRequest {
 message GetVSPTicketsByFeeStatusResponse {
 	repeated bytes tickets_hashes = 1;
 }
+
+message SyncVSPTicketByHashRequest {
+	string vsp_host = 1;
+	string vsp_pubkey = 2;
+	uint32 account = 3;
+	bytes ticket_hash = 4;
+}
+
+message SyncVSPTicketByHashResponse {}

app/middleware/walletrpc/api_grpc_pb.js

@@ -1621,6 +1621,28 @@ function deserialize_walletrpc_SweepAccountResponse(buffer_arg) {
   return api_pb.SweepAccountResponse.deserializeBinary(new Uint8Array(buffer_arg));
 }
 
+function serialize_walletrpc_SyncVSPTicketByHashRequest(arg) {
+  if (!(arg instanceof api_pb.SyncVSPTicketByHashRequest)) {
+    throw new Error('Expected argument of type walletrpc.SyncVSPTicketByHashRequest');
+  }
+  return Buffer.from(arg.serializeBinary());
+}
+
+function deserialize_walletrpc_SyncVSPTicketByHashRequest(buffer_arg) {
+  return api_pb.SyncVSPTicketByHashRequest.deserializeBinary(new Uint8Array(buffer_arg));
+}
+
+function serialize_walletrpc_SyncVSPTicketByHashResponse(arg) {
+  if (!(arg instanceof api_pb.SyncVSPTicketByHashResponse)) {
+    throw new Error('Expected argument of type walletrpc.SyncVSPTicketByHashResponse');
+  }
+  return Buffer.from(arg.serializeBinary());
+}
+
+function deserialize_walletrpc_SyncVSPTicketByHashResponse(buffer_arg) {
+  return api_pb.SyncVSPTicketByHashResponse.deserializeBinary(new Uint8Array(buffer_arg));
+}
+
 function serialize_walletrpc_SyncVSPTicketsRequest(arg) {
   if (!(arg instanceof api_pb.SyncVSPTicketsRequest)) {
     throw new Error('Expected argument of type walletrpc.SyncVSPTicketsRequest');
@@ -2510,6 +2532,17 @@ changePassphrase: {
     responseSerialize: serialize_walletrpc_GetVSPTicketsByFeeStatusResponse,
     responseDeserialize: deserialize_walletrpc_GetVSPTicketsByFeeStatusResponse,
   },
+  syncVSPTicketByHash: {
+    path: '/walletrpc.WalletService/SyncVSPTicketByHash',
+    requestStream: false,
+    responseStream: false,
+    requestType: api_pb.SyncVSPTicketByHashRequest,
+    responseType: api_pb.SyncVSPTicketByHashResponse,
+    requestSerialize: serialize_walletrpc_SyncVSPTicketByHashRequest,
+    requestDeserialize: deserialize_walletrpc_SyncVSPTicketByHashRequest,
+    responseSerialize: serialize_walletrpc_SyncVSPTicketByHashResponse,
+    responseDeserialize: deserialize_walletrpc_SyncVSPTicketByHashResponse,
+  },
 };
 
 exports.WalletServiceClient = grpc.makeGenericClientConstructor(WalletServiceService);