[staking] Add Ticket spent entry to the revocation tx details page (#…

…3770)
decred · Jun 8, 2022 · 208195c · 208195c
1 parent 9e8625d
commit 208195c
Show file tree

Hide file tree

Showing 5 changed files with 491 additions and 101 deletions.
diff --git a/app/components/views/TransactionPage/TransactionContent/TransactionContent.jsx b/app/components/views/TransactionPage/TransactionContent/TransactionContent.jsx
@@ -9,6 +9,7 @@ import { FormattedMessage as T } from "react-intl";
 import { walletrpc as api } from "middleware/walletrpc/api_pb";
 import {
   VOTE,
+  REVOCATION,
   TRANSACTION_DIR_RECEIVED,
   TRANSACTION_DIR_SENT,
   TICKET
@@ -76,6 +77,7 @@ const TransactionContent = ({
   const iconBgColor = getThemeProperty(theme, "alert-icon-bg-color");
 
   const isVote = txType === VOTE;
+  const isRevocation = txType === REVOCATION;
   const agendaChoicesData =
     isVote &&
     Object.keys(voteScript.voteChoices).map((issueId) => {
@@ -144,7 +146,7 @@ const TransactionContent = ({
             )}
           </div>
         </div>
-        {isVote ? (
+        {(isVote || isRevocation) && (
           <>
             <div className={styles.topRow}>
               <div className={styles.name}>
@@ -156,6 +158,10 @@ const TransactionContent = ({
                 </ExternalLink>
               </div>
             </div>
+          </>
+        )}
+        {isVote ? (
+          <>
             <div className={styles.topRow}>
               <div className={styles.name}>
                 <T id="txDetails.lastBlockValid" m="Last Block Valid" />:

diff --git a/app/components/views/TransactionPage/TransactionHeader/TransactionHeader.jsx b/app/components/views/TransactionPage/TransactionHeader/TransactionHeader.jsx
@@ -8,7 +8,10 @@ import {
   TICKET,
   LIVE,
   VOTE,
+  VOTED,
   MISSED,
+  REVOKED,
+  EXPIRED,
   UNMINED,
   IMMATURE,
   REVOCATION,
@@ -37,12 +40,18 @@ import styles from "./TransactionHeader.module.css";
 const messages = defineMessages({
   [TICKET]: { id: "txDetails.type.ticket", defaultMessage: "Ticket" },
   [VOTE]: { id: "txDetails.type.vote", defaultMessage: "Vote" },
-  [REVOCATION]: { id: "txDetails.type.revoke", defaultMessage: "Revoke" },
+  [REVOCATION]: {
+    id: "txDetails.type.revocation",
+    defaultMessage: "Revocation"
+  },
   [COINBASE]: { id: "txDetails.type.coinbase", defaultMessage: "Coinbase" },
   [MISSED]: { id: "txDetails.type.missed", defaultMessage: "Missed" },
   [UNMINED]: { id: "txDetails.type.unmined", defaultMessage: "Unmined" },
   [IMMATURE]: { id: "txDetails.type.immature", defaultMessage: "Immature" },
-  [LIVE]: { id: "txDetails.type.live", defaultMessage: "Live" }
+  [LIVE]: { id: "txDetails.type.live", defaultMessage: "Live" },
+  [VOTED]: { id: "txDetails.type.voted", defaultMessage: "Voted" },
+  [REVOKED]: { id: "txDetails.type.revoked", defaultMessage: "Revoked" },
+  [EXPIRED]: { id: "txDetails.type.expired", defaultMessage: "Expired" }
 });
 
 const headerIcons = {
@@ -68,32 +77,27 @@ const icon = ({ txType, txDirection, status }) =>
         [MISSED, UNMINED, IMMATURE].includes(status) ? status : txType
       ];
 
-const title = ({
-  txType,
-  txAmount,
-  txDirection,
-  ticketReward,
-  intl,
-  status
-}) => {
-  let titleComp;
-  txType !== REGULAR
-    ? (titleComp = [MISSED, UNMINED, IMMATURE, LIVE].includes(status)
-        ? intl.formatMessage(messages[status])
-        : intl.formatMessage(messages[txType]))
-    : (titleComp = (
-        <Balance
-          title
-          bold
-          amount={
-            txDirection !== TRANSACTION_DIR_RECEIVED ? -txAmount : txAmount
-          }
-        />
-      ));
-  if (txType === TICKET && ticketReward) {
-    titleComp = `${titleComp}, Voted`;
+const title = ({ txType, txAmount, txDirection, intl, status }) => {
+  if (txType === REGULAR) {
+    return (
+      <Balance
+        title
+        bold
+        amount={txDirection !== TRANSACTION_DIR_RECEIVED ? -txAmount : txAmount}
+      />
+    );
+  } else if (txType === TICKET) {
+    return `${intl.formatMessage(messages[txType])}, ${intl.formatMessage(
+      messages[status]
+    )}`;
+  } else if (messages[txType]) {
+    return intl.formatMessage(messages[txType]);
+  } else if (messages[status]) {
+    return intl.formatMessage(messages[status]);
+  } else {
+    console.error("unknown transaction type");
+    return "";
   }
-  return titleComp;
 };
 
 const backBtn = ({ goBack }) => (
@@ -150,7 +154,11 @@ const subtitle = ({
           {leaveTimestamp && (
             <div className={styles.subtitlePair}>
               <div className={styles.subtitleSentfrom}>
-                <T id="txDetails.votedOn" m="Voted On" />
+                {txType === REVOCATION ? (
+                  <T id="txDetails.missedOn" m="Missed On" />
+                ) : (
+                  <T id="txDetails.votedOn" m="Voted On" />
+                )}
               </div>
               <div className={styles.subtitleDate}>
                 <T
@@ -238,7 +246,6 @@ const TransactionHeader = ({
         txType,
         txAmount,
         txDirection,
-        ticketReward,
         intl,
         status
       })}

diff --git a/test/unit/components/views/TicketsPage/MyVSPTickets/MyVSPTicketsTab.spec.js b/test/unit/components/views/TicketsPage/MyVSPTickets/MyVSPTicketsTab.spec.js
@@ -15,7 +15,8 @@ import {
   VSP_FEE_PROCESS_PAID,
   VSP_FEE_PROCESS_ERRORED,
   VSP_FEE_PROCESS_CONFIRMED,
-  EXTERNALREQUEST_STAKEPOOL_LISTING
+  EXTERNALREQUEST_STAKEPOOL_LISTING,
+  TICKET
 } from "constants";
 import { mockAvailableVsps, mockVspInfo } from "../PurchaseTab/mocks";
 import { en as enLocale } from "i18n/locales";
@@ -55,13 +56,20 @@ const initialState = {
   }
 };
 
+const mockStakeTickets = {};
+Object.keys(mockStakeTransactions).forEach((txHash) => {
+  if (mockStakeTransactions[txHash].txType === TICKET) {
+    mockStakeTickets[txHash] = mockStakeTransactions[txHash];
+  }
+});
+
 const getTestTxs = (startTs) => {
   const txList = {};
   const startDate = new Date(startTs * 1000);
   let lastTransaction;
 
-  Object.keys(mockStakeTransactions).forEach((txHash) => {
-    lastTransaction = { ...mockStakeTransactions[txHash] };
+  Object.keys(mockStakeTickets).forEach((txHash) => {
+    lastTransaction = { ...mockStakeTickets[txHash] };
     startDate.setHours(startDate.getHours() - 1);
     const ts = Math.floor(startDate.getTime() / 1000);
     lastTransaction.txHash = `test-txHash-${ts}`;
@@ -191,7 +199,7 @@ const viewAllTxs = (mockGetTransactionsResponse, chunkCount) => {
   return mockGetTransactionsResponse;
 };
 
-test("test vps ticket status list", async () => {
+test("test vsp ticket status list", async () => {
   jest.useFakeTimers();
   let allTestTxs = {};
   let mockGetTransactionsResponse = {
@@ -294,7 +302,7 @@ test("test vps ticket status list", async () => {
 
   await wait(() => expect(getHistoryPageContent().childElementCount).toBe(17));
   expect(mockGetTransactions).toHaveBeenCalledTimes(
-    Object.keys(allTestTxs).length / Object.keys(mockStakeTransactions).length
+    Object.keys(allTestTxs).length / Object.keys(mockStakeTickets).length
   );
   expect(queryLoadingMoreLabel()).not.toBeInTheDocument();
   expect(getNoMoreTicketsLabel()).toBeInTheDocument();