feat: Recognize and style voting transactions [LW-11519]

Signed-off-by: Dominik Guzei <[email protected]>
input-output-hk · Nov 20, 2024 · 5a9b705 · 5a9b705
1 parent 0ddb38f
commit 5a9b705
Show file tree

Hide file tree

Showing 12 changed files with 73 additions and 17 deletions.
diff --git a/source/renderer/app/api/api.ts b/source/renderer/app/api/api.ts
@@ -3164,16 +3164,22 @@ const _createTransactionFromServerData = action(
         address,
       })
     );
+
+    const isVoteTx = data.certificates.find(
+      (c) => c.certificate_type === 'cast_vote'
+    );
+    const otherTxType =
+      direction === 'outgoing'
+        ? TransactionTypes.EXPEND
+        : TransactionTypes.INCOME;
+
     return new WalletTransaction({
       id,
       confirmations,
       slotNumber,
       epochNumber,
       title: direction === 'outgoing' ? 'Ada sent' : 'Ada received',
-      type:
-        direction === 'outgoing'
-          ? TransactionTypes.EXPEND
-          : TransactionTypes.INCOME,
+      type: isVoteTx ? TransactionTypes.VOTE : otherTxType,
       amount: new BigNumber(
         direction === 'outgoing'
           ? `-${amount.quantity.toString()}`

diff --git a/source/renderer/app/api/transactions/types.ts b/source/renderer/app/api/transactions/types.ts
@@ -54,6 +54,11 @@ export type Transaction = {
   withdrawals: Array<TransactionWithdrawals>;
   status: TransactionState;
   metadata?: TransactionMetadata;
+  certificates?: Array<{
+    pool?: string;
+    certificate_type: DelegationAction;
+    reward_account_path: Array<string>;
+  }>;
 };
 export type Transactions = Array<Transaction>;
 export type TransactionInputs = {
@@ -79,7 +84,12 @@ export type TransactionAddresses = {
   to: Array<string>;
   withdrawals: Array<string>;
 };
-export type TransactionType = 'card' | 'expend' | 'income' | 'exchange';
+export type TransactionType =
+  | 'card'
+  | 'expend'
+  | 'income'
+  | 'exchange'
+  | 'vote';
 // Req / Res Transaction Types
 export type GetTransactionsRequest = {
   walletId: string;

diff --git a/source/renderer/app/assets/images/wallet-nav/voting.inline.svg b/source/renderer/app/assets/images/wallet-nav/voting.inline.svg
diff --git a/source/renderer/app/components/wallet/transactions/Transaction.tsx b/source/renderer/app/components/wallet/transactions/Transaction.tsx
@@ -19,7 +19,10 @@ import {
 } from '../../../domains/WalletTransaction';
 import WholeSelectionText from '../../widgets/WholeSelectionText';
 import globalMessages from '../../../i18n/global-messages';
-import type { TransactionState } from '../../../api/transactions/types';
+import type {
+  TransactionState,
+  TransactionType,
+} from '../../../api/transactions/types';
 import { PENDING_TIME_LIMIT } from '../../../config/txnsConfig';
 import CancelTransactionConfirmationDialog from './CancelTransactionConfirmationDialog';
 import type { AssetToken } from '../../../api/assets/types';
@@ -93,6 +96,11 @@ const messages = defineMessages({
     defaultMessage: '!!!{transactionsType} received',
     description: 'Label "{transactionsType} received" for the transaction.',
   },
+  voted: {
+    id: 'wallet.transaction.voted',
+    defaultMessage: '!!!Voting Power Delegation',
+    description: 'Title for governance voting transactions.',
+  },
   fromAddress: {
     id: 'wallet.transaction.address.from',
     defaultMessage: '!!!From address',
@@ -519,6 +527,21 @@ export default class Transaction extends Component<Props, State> {
       }
     };
 
+    const getTitle = (txType: TransactionType): string => {
+      switch (txType) {
+        case TransactionTypes.EXPEND:
+          return intl.formatMessage(messages.sent, {
+            transactionsType,
+          });
+        case TransactionTypes.VOTE:
+          return intl.formatMessage(messages.voted);
+        default:
+          return intl.formatMessage(messages.received, {
+            transactionsType,
+          });
+      }
+    };
+
     const exceedsPendingTimeLimit = this.hasExceededPendingTimeLimit();
     const assetsSeparatorStyles = classNames([
       styles.assetsSeparator,
@@ -544,15 +567,7 @@ export default class Transaction extends Component<Props, State> {
 
             <div className={styles.togglerContent}>
               <div className={styles.header}>
-                <div className={styles.title}>
-                  {data.type === TransactionTypes.EXPEND
-                    ? intl.formatMessage(messages.sent, {
-                        transactionsType,
-                      })
-                    : intl.formatMessage(messages.received, {
-                        transactionsType,
-                      })}
-                </div>
+                <div className={styles.title}>{getTitle(data.type)}</div>
                 {data.amount && (
                   <div className={styles.amount}>
                     <DiscreetWalletAmount

diff --git a/source/renderer/app/components/wallet/transactions/TransactionTypeIcon.scss b/source/renderer/app/components/wallet/transactions/TransactionTypeIcon.scss
@@ -39,6 +39,10 @@
   &.expired {
     background: var(--theme-transactions-icon-type-failed-background-color);
   }
+
+  &.vote {
+    background: #00b2ff;
+  }
 }
 
 .pendingTxnIconWrapper {

diff --git a/source/renderer/app/components/wallet/transactions/TransactionTypeIcon.tsx b/source/renderer/app/components/wallet/transactions/TransactionTypeIcon.tsx
@@ -13,6 +13,7 @@ import incomeIcon from '../../../assets/images/wallet-nav/receive-ic.inline.svg'
 import exchangeIcon from '../../../assets/images/exchange-ic.inline.svg';
 // @ts-ignore ts-migrate(2307) FIXME: Cannot find module '../../../assets/images/wallet-... Remove this comment to see the full error message
 import pendingIcon from '../../../assets/images/wallet-nav/pending.inline.svg';
+import votingIcon from '../../../assets/images/wallet-nav/voting.inline.svg';
 import {
   TransactionTypes,
   TransactionStates,
@@ -100,6 +101,10 @@ export default class TransactionTypeIcon extends Component<Props> {
         icon = exchangeIcon;
         break;
 
+      case TransactionTypes.VOTE:
+        icon = votingIcon;
+        break;
+
       default:
         icon = '';
         break;

diff --git a/source/renderer/app/domains/WalletTransaction.ts b/source/renderer/app/domains/WalletTransaction.ts
@@ -21,6 +21,7 @@ export const TransactionTypes: EnumMap<string, TransactionType> = {
   EXPEND: 'expend',
   INCOME: 'income',
   EXCHANGE: 'exchange',
+  VOTE: 'vote',
 };
 export const TransactionWithdrawal: TransactionWithdrawalType = 'self';
 export class WalletTransaction {

diff --git a/source/renderer/app/i18n/locales/defaultMessages.json b/source/renderer/app/i18n/locales/defaultMessages.json
@@ -6556,6 +6556,11 @@
         "description": "Label \"{transactionsType} received\" for the transaction.",
         "id": "wallet.transaction.received"
       },
+      {
+        "defaultMessage": "!!!Voting Power Delegation",
+        "description": "Title for governance voting transactions.",
+        "id": "wallet.transaction.voted"
+      },
       {
         "defaultMessage": "!!!From address",
         "description": "From address",

diff --git a/source/renderer/app/i18n/locales/en-US.json b/source/renderer/app/i18n/locales/en-US.json
@@ -1323,6 +1323,7 @@
   "wallet.transaction.type.exchange": "Exchange",
   "wallet.transaction.unresolvedInputAddressesAdditionalLabel": "to see these addresses.",
   "wallet.transaction.unresolvedInputAddressesLinkLabel": "Open this transaction in Cardano explorer",
+  "wallet.transaction.voted": "Voting Power Delegation",
   "wallet.transactions.csv.column.addressesFrom": "Addresses from",
   "wallet.transactions.csv.column.addressesTo": "Addresses to",
   "wallet.transactions.csv.column.amount.deposit": "Deposit amount (ADA)",
@@ -1361,4 +1362,4 @@
   "wallet.transferFunds.dialog2.total.label": "Total",
   "widgets.itemsDropdown.syncingLabel": "Syncing",
   "widgets.itemsDropdown.syncingLabelProgress": "Syncing {syncingProgress}%"
-}
+}
diff --git a/source/renderer/app/i18n/locales/ja-JP.json b/source/renderer/app/i18n/locales/ja-JP.json
@@ -1323,6 +1323,7 @@
   "wallet.transaction.type.exchange": "換金",
   "wallet.transaction.unresolvedInputAddressesAdditionalLabel": "アドレスを表示する。",
   "wallet.transaction.unresolvedInputAddressesLinkLabel": "Cardanoエクスプローラーでこのトランザクションを開き",
+  "wallet.transaction.voted": "!!!Voting Power Delegation",
   "wallet.transactions.csv.column.addressesFrom": "送信元アドレス",
   "wallet.transactions.csv.column.addressesTo": "送信先アドレス",
   "wallet.transactions.csv.column.amount.deposit": "デポジット額（ADA）",

diff --git a/source/renderer/app/types/stakingTypes.ts b/source/renderer/app/types/stakingTypes.ts
@@ -1,3 +1,3 @@
 export type RedeemItnRewardsStep = 'configuration' | 'confirmation' | 'result';
 export type SmashServerType = 'iohk' | 'custom' | 'direct' | 'none';
-export type DelegationAction = 'join' | 'quit';
+export type DelegationAction = 'join' | 'quit' | 'cast_vote';
diff --git a/translations/messages.json b/translations/messages.json
@@ -6556,6 +6556,11 @@
         "description": "Label \"{transactionsType} received\" for the transaction.",
         "id": "wallet.transaction.received"
       },
+      {
+        "defaultMessage": "!!!Voting Power Delegation",
+        "description": "Title for governance voting transactions.",
+        "id": "wallet.transaction.voted"
+      },
       {
         "defaultMessage": "!!!From address",
         "description": "From address",