From 383fcfbd9e1347f4b9a0608c6f794d568fec0e2a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tomislav=20Hora=C4=8Dek?= <tomislav.horacek@thespian.hr>
Date: Thu, 10 Dec 2020 19:30:56 +0100
Subject: [PATCH] Transaction expired status (#2272)

* Introduce Transaction EXPIRED status in transactions list

* Delete tx improvement while tx in failed state

* Testing command for creating expired transaction added

* Adds CHANGELOG entry

* Update cardano-wallet version tag

* Run translation manager

Co-authored-by: Nikola Glumac <niglumac@gmail.com>
---
 CHANGELOG.md                                  |  1 +
 nix/sources.json                              |  2 +-
 source/renderer/app/api/api.js                | 80 ++++++++++++++-
 source/renderer/app/api/transactions/types.js |  2 +-
 .../transactions/CancelTransactionButton.js   | 13 ++-
 .../wallet/transactions/Transaction.js        | 97 +++++++++++++------
 .../wallet/transactions/Transaction.scss      |  7 ++
 .../transactions/TransactionTypeIcon.js       | 17 +++-
 .../transactions/TransactionTypeIcon.scss     |  4 +
 .../renderer/app/domains/WalletTransaction.js |  1 +
 .../app/i18n/locales/defaultMessages.json     | 70 +++++++++++--
 source/renderer/app/i18n/locales/en-US.json   |  6 +-
 source/renderer/app/i18n/locales/ja-JP.json   |  6 +-
 .../renderer/app/themes/daedalus/cardano.js   |  2 +
 .../renderer/app/themes/daedalus/dark-blue.js |  2 +
 .../app/themes/daedalus/dark-cardano.js       |  2 +
 .../app/themes/daedalus/flight-candidate.js   |  2 +
 .../themes/daedalus/incentivized-testnet.js   |  2 +
 .../app/themes/daedalus/light-blue.js         |  2 +
 .../app/themes/daedalus/shelley-testnet.js    |  2 +
 source/renderer/app/themes/daedalus/white.js  |  2 +
 source/renderer/app/themes/daedalus/yellow.js |  2 +
 .../renderer/app/themes/utils/createTheme.js  |  3 +
 .../_utils/WalletsTransactionsWrapper.js      |  6 ++
 24 files changed, 287 insertions(+), 46 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index db12ae3187..a158c43eec 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@ Changelog
 
 ### Fixes
 
+- Fixed handling of expired transactions ([PR 2272](https://github.com/input-output-hk/daedalus/pull/2272))
 - Fixed visual glitch on the transaction list switching between filters ([PR 2261](https://github.com/input-output-hk/daedalus/pull/2261))
 
 ### Chores
diff --git a/nix/sources.json b/nix/sources.json
index 995c936033..04e36c5374 100644
--- a/nix/sources.json
+++ b/nix/sources.json
@@ -34,7 +34,7 @@
         "type": "tarball",
         "url": "https://github.com/input-output-hk/cardano-wallet/archive/bcbed39dbe61b978453d6dee94140504bd0f6f9b.tar.gz",
         "url_template": "https://github.com/<owner>/<repo>/archive/<rev>.tar.gz",
-        "version": "v2020-11-26"
+        "version": "v2020-12-08"
     },
     "gitignore": {
         "branch": "master",
diff --git a/source/renderer/app/api/api.js b/source/renderer/app/api/api.js
index a98a30ac69..1240701333 100644
--- a/source/renderer/app/api/api.js
+++ b/source/renderer/app/api/api.js
@@ -695,6 +695,74 @@ export default class AdaApi {
     }
   };
 
+  // For testing purpose ONLY
+  createExpiredTransaction = async (request: any): Promise<*> => {
+    if (global.environment.isDev) {
+      logger.debug('AdaApi::createTransaction called', {
+        parameters: filterLogData(request),
+      });
+      const {
+        walletId,
+        address,
+        amount,
+        passphrase,
+        isLegacy,
+        withdrawal = TransactionWithdrawal,
+        ttl,
+      } = request;
+      try {
+        const data = {
+          payments: [
+            {
+              address,
+              amount: {
+                quantity: amount,
+                unit: WalletUnits.LOVELACE,
+              },
+            },
+          ],
+          passphrase,
+          time_to_live: {
+            quantity: ttl,
+            unit: 'second',
+          },
+        };
+
+        let response: Transaction;
+        if (isLegacy) {
+          response = await createByronWalletTransaction(this.config, {
+            walletId,
+            data,
+          });
+        } else {
+          response = await createTransaction(this.config, {
+            walletId,
+            data: { ...data, withdrawal },
+          });
+        }
+
+        logger.debug('AdaApi::createTransaction success', {
+          transaction: response,
+        });
+
+        return _createTransactionFromServerData(response);
+      } catch (error) {
+        logger.error('AdaApi::createTransaction error', { error });
+        throw new ApiError(error)
+          .set('wrongEncryptionPassphrase')
+          .where('code', 'bad_request')
+          .inc('message', 'passphrase is too short')
+          .set('transactionIsTooBig', true, {
+            linkLabel: 'tooBigTransactionErrorLinkLabel',
+            linkURL: 'tooBigTransactionErrorLinkURL',
+          })
+          .where('code', 'transaction_is_too_big')
+          .result();
+      }
+    }
+    return null;
+  };
+
   calculateTransactionFee = async (
     request: GetTransactionFeeRequest
   ): Promise<BigNumber> => {
@@ -2113,8 +2181,16 @@ const _createAddressFromServerData = action(
   }
 );
 
-const _conditionToTxState = (condition: string) =>
-  TransactionStates[condition === 'pending' ? 'PENDING' : 'OK'];
+const _conditionToTxState = (condition: string) => {
+  switch (condition) {
+    case 'pending':
+      return TransactionStates.PENDING;
+    case 'expired':
+      return TransactionStates.FAILED;
+    default:
+      return TransactionStates.OK;
+  }
+};
 
 const _createTransactionFromServerData = action(
   'AdaApi::_createTransactionFromServerData',
diff --git a/source/renderer/app/api/transactions/types.js b/source/renderer/app/api/transactions/types.js
index d1a7c434c0..50864603cf 100644
--- a/source/renderer/app/api/transactions/types.js
+++ b/source/renderer/app/api/transactions/types.js
@@ -64,7 +64,7 @@ export type TransactionWithdrawals = {
 };
 export type TransactionWithdrawalType = 'self' | Array<string>;
 
-export type TransactionState = 'pending' | 'in_ledger';
+export type TransactionState = 'pending' | 'in_ledger' | 'expired';
 
 export type TrasactionAddresses = {
   from: Array<?string>,
diff --git a/source/renderer/app/components/wallet/transactions/CancelTransactionButton.js b/source/renderer/app/components/wallet/transactions/CancelTransactionButton.js
index 5c6632c24d..ea9bd0f268 100644
--- a/source/renderer/app/components/wallet/transactions/CancelTransactionButton.js
+++ b/source/renderer/app/components/wallet/transactions/CancelTransactionButton.js
@@ -6,15 +6,21 @@ import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
 import styles from './CancelTransactionButton.scss';
 
 const messages = defineMessages({
-  label: {
+  cancelLabel: {
     id: 'wallet.transaction.pending.cancelTransactionButton',
     defaultMessage: '!!!Cancel pending transaction',
     description: 'Label for the cancel pending transaction button',
   },
+  removeLabel: {
+    id: 'wallet.transaction.failed.removeTransactionButton',
+    defaultMessage: '!!!Remove failed transaction',
+    description: 'Label for the remove failed transaction button',
+  },
 });
 
 type Props = {
   onClick: Function,
+  state: 'cancel' | 'remove',
 };
 
 export default class CancelTransactionButton extends Component<Props> {
@@ -23,8 +29,9 @@ export default class CancelTransactionButton extends Component<Props> {
   };
 
   render() {
-    const { onClick } = this.props;
-    const label = this.context.intl.formatMessage(messages.label);
+    const { onClick, state } = this.props;
+    const label = this.context.intl.formatMessage(messages[`${state}Label`]);
+
     return (
       <Button
         className="attention"
diff --git a/source/renderer/app/components/wallet/transactions/Transaction.js b/source/renderer/app/components/wallet/transactions/Transaction.js
index 6785ba4614..72959e5a4a 100644
--- a/source/renderer/app/components/wallet/transactions/Transaction.js
+++ b/source/renderer/app/components/wallet/transactions/Transaction.js
@@ -97,8 +97,8 @@ const messages = defineMessages({
       '!!!This transaction has been pending for a long time. To release the funds used by this transaction, you can try canceling it.',
     description: 'Note to cancel a transaction that has been pending too long',
   },
-  supportArticleLink: {
-    id: 'wallet.transaction.pending.supportArticleLink',
+  cancelPendingTxnSupportArticle: {
+    id: 'wallet.transaction.pending.cancelPendingTxnSupportArticle',
     defaultMessage: '!!!Why should I cancel this transaction?',
     description: 'Link to support article for canceling a pending transaction',
   },
@@ -123,6 +123,17 @@ const messages = defineMessages({
     defaultMessage: '!!!to see these addresses.',
     description: 'Unresolved Input Addresses additional label.',
   },
+  cancelFailedTxnNote: {
+    id: 'wallet.transaction.failed.cancelFailedTxnNote',
+    defaultMessage:
+      '!!!This transaction was submitted to the Cardano network, but it expired, so it failed. Transactions on the Cardano network have a ‘time to live’ attribute, which passed before the network processed the transaction. Please, remove it to release the funds (UTXOs) used by this transaction to use those funds in another transaction.',
+    description: 'Note to cancel a transaction that has been failed',
+  },
+  cancelFailedTxnSupportArticle: {
+    id: 'wallet.transaction.failed.cancelFailedTxnSupportArticle',
+    defaultMessage: '!!!Why should I cancel failed transactions?',
+    description: 'Link to support article for removing a failed transaction',
+  },
 });
 
 const stateTranslations = defineMessages({
@@ -136,6 +147,11 @@ const stateTranslations = defineMessages({
     defaultMessage: '!!!Transaction pending',
     description: 'Transaction state "pending"',
   },
+  [TransactionStates.FAILED]: {
+    id: 'wallet.transaction.state.failed',
+    defaultMessage: '!!!Transaction failed',
+    description: 'Transaction state "failed"',
+  },
 });
 
 type Props = {
@@ -182,7 +198,10 @@ export default class Transaction extends Component<Props, State> {
   deletePendingTransaction = async () => {
     const { data, walletId } = this.props;
     const { id: transactionId, state } = data;
-    if (state !== TransactionStates.PENDING) {
+    if (
+      state !== TransactionStates.PENDING &&
+      state !== TransactionStates.FAILED
+    ) {
       return this.hideConfirmationDialog();
     }
     await this.props.deletePendingTransaction({
@@ -222,33 +241,50 @@ export default class Transaction extends Component<Props, State> {
   };
 
   renderCancelPendingTxnContent = () => {
+    const { data } = this.props;
+    const { state } = data;
     const { intl } = this.context;
     const overPendingTimeLimit = this.hasExceededPendingTimeLimit();
 
-    if (!overPendingTimeLimit) return null;
-
-    return (
-      <Fragment>
-        <div className={styles.pendingTxnNote}>
-          {intl.formatMessage(messages.cancelPendingTxnNote)}
-          <Link
-            className={styles.articleLink}
-            onClick={this.handleOpenSupportArticle}
-            label={intl.formatMessage(messages.supportArticleLink)}
-            underlineOnHover
-            skin={LinkSkin}
-          />
-        </div>
-        <div>
-          <CancelTransactionButton onClick={this.showConfirmationDialog} />
-        </div>
-      </Fragment>
-    );
+    if (overPendingTimeLimit || state === TransactionStates.FAILED) {
+      return (
+        <Fragment>
+          <div className={styles.pendingTxnNote}>
+            {state === TransactionStates.PENDING
+              ? intl.formatMessage(messages.cancelPendingTxnNote)
+              : intl.formatMessage(messages.cancelFailedTxnNote)}
+            <Link
+              className={styles.articleLink}
+              onClick={this.handleOpenSupportArticle}
+              label={
+                state === TransactionStates.PENDING
+                  ? intl.formatMessage(messages.cancelPendingTxnSupportArticle)
+                  : intl.formatMessage(messages.cancelFailedTxnSupportArticle)
+              }
+              underlineOnHover
+              skin={LinkSkin}
+            />
+          </div>
+          <div>
+            <CancelTransactionButton
+              state={state === TransactionStates.PENDING ? 'cancel' : 'remove'}
+              onClick={
+                state === TransactionStates.PENDING
+                  ? this.showConfirmationDialog
+                  : this.deletePendingTransaction
+              }
+            />
+          </div>
+        </Fragment>
+      );
+    }
+    return null;
   };
 
   renderTxnStateTag = () => {
     const { intl } = this.context;
     const { state } = this.props;
+
     const styleLabel = this.hasExceededPendingTimeLimit()
       ? `${state}WarningLabel`
       : `${state}Label`;
@@ -275,8 +311,6 @@ export default class Transaction extends Component<Props, State> {
     const { intl } = this.context;
     const { showConfirmationDialog } = this.state;
 
-    const isPendingTransaction = state === TransactionStates.PENDING;
-
     const componentStyles = classNames([
       styles.component,
       isExpanded ? 'Transaction_expanded' : null,
@@ -302,9 +336,16 @@ export default class Transaction extends Component<Props, State> {
     const currency = intl.formatMessage(globalMessages.currency);
     const symbol = adaSymbol;
 
-    const iconType = isPendingTransaction
-      ? TransactionStates.PENDING
-      : data.type;
+    const getIconType = (txState) => {
+      switch (txState) {
+        case TransactionStates.PENDING:
+          return TransactionStates.PENDING;
+        case TransactionStates.FAILED:
+          return TransactionStates.FAILED;
+        default:
+          return data.type;
+      }
+    };
 
     const exceedsPendingTimeLimit = this.hasExceededPendingTimeLimit();
 
@@ -364,7 +405,7 @@ export default class Transaction extends Component<Props, State> {
           <div className={styles.toggler}>
             <TransactionTypeIcon
               exceedsPendingTimeLimit={exceedsPendingTimeLimit}
-              iconType={iconType}
+              iconType={getIconType(state)}
             />
 
             <div className={styles.togglerContent}>
diff --git a/source/renderer/app/components/wallet/transactions/Transaction.scss b/source/renderer/app/components/wallet/transactions/Transaction.scss
index 7925d3f60c..a250e71bd6 100644
--- a/source/renderer/app/components/wallet/transactions/Transaction.scss
+++ b/source/renderer/app/components/wallet/transactions/Transaction.scss
@@ -80,6 +80,7 @@
 
 .pendingLabel,
 .okLabel,
+.expiredLabel,
 .in_ledgerLabel,
 .pendingWarningLabel {
   background-color: var(--theme-transactions-state-pending-background-color);
@@ -106,6 +107,12 @@
   );
 }
 
+.expiredLabel {
+  background-color: var(
+    --theme-transactions-state-pending-warning-background-color
+  );
+}
+
 .type {
   font-family: var(--font-light);
   font-size: 14px;
diff --git a/source/renderer/app/components/wallet/transactions/TransactionTypeIcon.js b/source/renderer/app/components/wallet/transactions/TransactionTypeIcon.js
index f39fff4176..0b26adf91e 100644
--- a/source/renderer/app/components/wallet/transactions/TransactionTypeIcon.js
+++ b/source/renderer/app/components/wallet/transactions/TransactionTypeIcon.js
@@ -58,11 +58,24 @@ export default class TransactionTypeIcon extends Component<Props> {
     </div>
   );
 
+  renderFailedIcon = () => {
+    return (
+      <SVGInline svg={pendingIcon} className={styles.transactionTypeIcon} />
+    );
+  };
+
   renderIcon = (icon: string) => {
+    let iconType;
     if (this.props.iconType === TransactionStates.PENDING) {
-      return this.renderPendingIcon();
+      iconType = this.renderPendingIcon();
+    } else if (this.props.iconType === TransactionStates.FAILED) {
+      iconType = this.renderFailedIcon();
+    } else {
+      iconType = (
+        <SVGInline svg={icon} className={styles.transactionTypeIcon} />
+      );
     }
-    return <SVGInline svg={icon} className={styles.transactionTypeIcon} />;
+    return iconType;
   };
 
   render() {
diff --git a/source/renderer/app/components/wallet/transactions/TransactionTypeIcon.scss b/source/renderer/app/components/wallet/transactions/TransactionTypeIcon.scss
index 25607527d7..5134aa21b8 100644
--- a/source/renderer/app/components/wallet/transactions/TransactionTypeIcon.scss
+++ b/source/renderer/app/components/wallet/transactions/TransactionTypeIcon.scss
@@ -35,6 +35,10 @@
       );
     }
   }
+
+  &.expired {
+    background: var(--theme-transactions-icon-type-failed-background-color);
+  }
 }
 
 .pendingTxnIconWrapper {
diff --git a/source/renderer/app/domains/WalletTransaction.js b/source/renderer/app/domains/WalletTransaction.js
index 68dd568fe4..00afbe78f0 100644
--- a/source/renderer/app/domains/WalletTransaction.js
+++ b/source/renderer/app/domains/WalletTransaction.js
@@ -13,6 +13,7 @@ export const TransactionStates: EnumMap<string, TransactionState> = {
   PENDING: 'pending',
   OK: 'in_ledger',
   IN_LEDGER: 'in_ledger',
+  FAILED: 'expired',
 };
 
 export const TransactionTypes: EnumMap<string, TransactionType> = {
diff --git a/source/renderer/app/i18n/locales/defaultMessages.json b/source/renderer/app/i18n/locales/defaultMessages.json
index 5f88fe5dab..c5e36df2ca 100644
--- a/source/renderer/app/i18n/locales/defaultMessages.json
+++ b/source/renderer/app/i18n/locales/defaultMessages.json
@@ -9714,9 +9714,23 @@
         "file": "source/renderer/app/components/wallet/transactions/CancelTransactionButton.js",
         "id": "wallet.transaction.pending.cancelTransactionButton",
         "start": {
-          "column": 9,
+          "column": 15,
           "line": 9
         }
+      },
+      {
+        "defaultMessage": "!!!Remove failed transaction",
+        "description": "Label for the remove failed transaction button",
+        "end": {
+          "column": 3,
+          "line": 18
+        },
+        "file": "source/renderer/app/components/wallet/transactions/CancelTransactionButton.js",
+        "id": "wallet.transaction.failed.removeTransactionButton",
+        "start": {
+          "column": 15,
+          "line": 14
+        }
       }
     ],
     "path": "source/renderer/app/components/wallet/transactions/CancelTransactionButton.json"
@@ -10208,9 +10222,9 @@
           "line": 104
         },
         "file": "source/renderer/app/components/wallet/transactions/Transaction.js",
-        "id": "wallet.transaction.pending.supportArticleLink",
+        "id": "wallet.transaction.pending.cancelPendingTxnSupportArticle",
         "start": {
-          "column": 22,
+          "column": 34,
           "line": 100
         }
       },
@@ -10270,18 +10284,46 @@
           "line": 121
         }
       },
+      {
+        "defaultMessage": "!!!This transaction was submitted to the Cardano network, but it expired, so it failed. Transactions on the Cardano network have a ‘time to live’ attribute, which passed before the network processed the transaction. Please, remove it to release the funds (UTXOs) used by this transaction to use those funds in another transaction.",
+        "description": "Note to cancel a transaction that has been failed",
+        "end": {
+          "column": 3,
+          "line": 131
+        },
+        "file": "source/renderer/app/components/wallet/transactions/Transaction.js",
+        "id": "wallet.transaction.failed.cancelFailedTxnNote",
+        "start": {
+          "column": 23,
+          "line": 126
+        }
+      },
+      {
+        "defaultMessage": "!!!Why should I cancel failed transactions?",
+        "description": "Link to support article for removing a failed transaction",
+        "end": {
+          "column": 3,
+          "line": 136
+        },
+        "file": "source/renderer/app/components/wallet/transactions/Transaction.js",
+        "id": "wallet.transaction.failed.cancelFailedTxnSupportArticle",
+        "start": {
+          "column": 33,
+          "line": 132
+        }
+      },
       {
         "defaultMessage": "!!!Transaction confirmed",
         "description": "Transaction state \"confirmed\"",
         "end": {
           "column": 3,
-          "line": 133
+          "line": 144
         },
         "file": "source/renderer/app/components/wallet/transactions/Transaction.js",
         "id": "wallet.transaction.state.confirmed",
         "start": {
           "column": 26,
-          "line": 129
+          "line": 140
         }
       },
       {
@@ -10289,13 +10331,27 @@
         "description": "Transaction state \"pending\"",
         "end": {
           "column": 3,
-          "line": 138
+          "line": 149
         },
         "file": "source/renderer/app/components/wallet/transactions/Transaction.js",
         "id": "wallet.transaction.state.pending",
         "start": {
           "column": 31,
-          "line": 134
+          "line": 145
+        }
+      },
+      {
+        "defaultMessage": "!!!Transaction failed",
+        "description": "Transaction state \"failed\"",
+        "end": {
+          "column": 3,
+          "line": 154
+        },
+        "file": "source/renderer/app/components/wallet/transactions/Transaction.js",
+        "id": "wallet.transaction.state.failed",
+        "start": {
+          "column": 30,
+          "line": 150
         }
       }
     ],
diff --git a/source/renderer/app/i18n/locales/en-US.json b/source/renderer/app/i18n/locales/en-US.json
index 03cbbba025..b3fe220935 100755
--- a/source/renderer/app/i18n/locales/en-US.json
+++ b/source/renderer/app/i18n/locales/en-US.json
@@ -913,6 +913,9 @@
   "wallet.transaction.addresses.from": "From addresses",
   "wallet.transaction.addresses.to": "To addresses",
   "wallet.transaction.conversion.rate": "Conversion rate",
+  "wallet.transaction.failed.cancelFailedTxnNote": "This transaction was submitted to the Cardano network, but it failed as it had expired. Transactions on the Cardano network have a ‘time to live’ attribute, which had passed before the network processed the transaction. You need to remove it to release the funds (UTXOs) used by this transaction for use in another transaction.",
+  "wallet.transaction.failed.cancelFailedTxnSupportArticle": "Why should I cancel failed transactions?",
+  "wallet.transaction.failed.removeTransactionButton": "Remove failed transaction",
   "wallet.transaction.filter.allTransactions": "All Transactions",
   "wallet.transaction.filter.amountRange": "Amount of ada",
   "wallet.transaction.filter.apply": "Apply",
@@ -929,13 +932,14 @@
   "wallet.transaction.filter.thisYear": "This year",
   "wallet.transaction.noInputAddressesLabel": "No addresses",
   "wallet.transaction.pending.cancelPendingTxnNote": "This transaction has been pending for a long time. To release the funds used by this transaction, you can try canceling it.",
+  "wallet.transaction.pending.cancelPendingTxnSupportArticle": "Why should I cancel this transaction?",
   "wallet.transaction.pending.cancelTransactionButton": "Cancel pending transaction",
-  "wallet.transaction.pending.supportArticleLink": "Why should I cancel this transaction?",
   "wallet.transaction.pending.supportArticleUrl": "https://iohk.zendesk.com/hc/en-us/articles/360038113814",
   "wallet.transaction.received": "{currency} received",
   "wallet.transaction.rewards.from": "From rewards",
   "wallet.transaction.sent": "{currency} sent",
   "wallet.transaction.state.confirmed": "Transaction confirmed",
+  "wallet.transaction.state.failed": "Transaction failed",
   "wallet.transaction.state.pending": "Transaction pending",
   "wallet.transaction.transactionAmount": "Transaction amount",
   "wallet.transaction.transactionId": "Transaction ID",
diff --git a/source/renderer/app/i18n/locales/ja-JP.json b/source/renderer/app/i18n/locales/ja-JP.json
index 8fd409a6ca..09ed80bb98 100755
--- a/source/renderer/app/i18n/locales/ja-JP.json
+++ b/source/renderer/app/i18n/locales/ja-JP.json
@@ -913,6 +913,9 @@
   "wallet.transaction.addresses.from": "送信元アドレス",
   "wallet.transaction.addresses.to": "送信先",
   "wallet.transaction.conversion.rate": "両替率",
+  "wallet.transaction.failed.cancelFailedTxnNote": "トランザクションはCardanoネットワークに送信されましたが、期限切れのため失敗しました。Cardanoネットワークのトランザクションには「time to live（有効期限）」属性があり、ネットワークがトランザクションを処理する前にこれを経過しました。このトランザクションに使用されたファンド（UTXO）をリリースして別のトランザクションで使用可能にするために、このトランザクションを削除してください。",
+  "wallet.transaction.failed.cancelFailedTxnSupportArticle": "このトランザクションをキャンセルする理由",
+  "wallet.transaction.failed.removeTransactionButton": "失敗したトランザクションを削除する",
   "wallet.transaction.filter.allTransactions": "すべてのトランザクション",
   "wallet.transaction.filter.amountRange": "ADA額",
   "wallet.transaction.filter.apply": "適用する",
@@ -929,13 +932,14 @@
   "wallet.transaction.filter.thisYear": "今年",
   "wallet.transaction.noInputAddressesLabel": "アドレスなし",
   "wallet.transaction.pending.cancelPendingTxnNote": "このトランザクションは長時間処理中となっています。このトランザクションに使用されている資金を解放するために、トランザクションのキャンセルを試みることができます。",
+  "wallet.transaction.pending.cancelPendingTxnSupportArticle": "このトランザクションをキャンセルする理由",
   "wallet.transaction.pending.cancelTransactionButton": "処理中のトランザクションをキャンセルする",
-  "wallet.transaction.pending.supportArticleLink": "このトランザクションをキャンセルする理由",
   "wallet.transaction.pending.supportArticleUrl": "https://iohk.zendesk.com/hc/ja/articles/360038113814",
   "wallet.transaction.received": "{currency}入金",
   "wallet.transaction.rewards.from": "送信元報酬",
   "wallet.transaction.sent": "{currency}送金",
   "wallet.transaction.state.confirmed": "トランザクション承認済み",
+  "wallet.transaction.state.failed": "トランザクション失敗",
   "wallet.transaction.state.pending": "トランザクション処理中",
   "wallet.transaction.transactionAmount": "トランザクション額",
   "wallet.transaction.transactionId": "トランザクションID",
diff --git a/source/renderer/app/themes/daedalus/cardano.js b/source/renderer/app/themes/daedalus/cardano.js
index 853f7932db..f8c77ade39 100644
--- a/source/renderer/app/themes/daedalus/cardano.js
+++ b/source/renderer/app/themes/daedalus/cardano.js
@@ -935,6 +935,8 @@ export const CARDANO_THEME_OUTPUT = {
       'rgba(94, 96, 102, 0.5)',
     '--theme-transactions-icon-type-pending-warning-background-color':
       'rgba(236, 93, 107, 0.8)',
+    '--theme-transactions-icon-type-failed-background-color':
+      'rgba(236, 93, 107, 1)',
     '--theme-transactions-state-pending-warning-background-color': '#ec5d6b',
     '--theme-transactions-filter-button-shadow-color': 'rgba(0, 0, 0, 0.18)',
     '--theme-transactions-filter-button-color': '#fafbfc',
diff --git a/source/renderer/app/themes/daedalus/dark-blue.js b/source/renderer/app/themes/daedalus/dark-blue.js
index 8fe8659bac..81f41e3d5b 100644
--- a/source/renderer/app/themes/daedalus/dark-blue.js
+++ b/source/renderer/app/themes/daedalus/dark-blue.js
@@ -941,6 +941,8 @@ export const DARK_BLUE_THEME_OUTPUT = {
       'rgba(233, 244, 254, 0.3)',
     '--theme-transactions-icon-type-pending-warning-background-color':
       'rgba(236, 93, 107, 0.8)',
+    '--theme-transactions-icon-type-failed-background-color':
+      'rgba(236, 93, 107, 1)',
     '--theme-transactions-state-pending-warning-background-color': '#ec5d6b',
     '--theme-transactions-filter-button-shadow-color': 'rgba(0, 0, 0, 0.18)',
     '--theme-transactions-filter-button-color': '#fafbfc',
diff --git a/source/renderer/app/themes/daedalus/dark-cardano.js b/source/renderer/app/themes/daedalus/dark-cardano.js
index 974f0b6c46..876c7cfd4e 100644
--- a/source/renderer/app/themes/daedalus/dark-cardano.js
+++ b/source/renderer/app/themes/daedalus/dark-cardano.js
@@ -921,6 +921,8 @@ export const DARK_CARDANO_THEME_OUTPUT = {
       'rgba(255, 255, 255, 0.5)',
     '--theme-transactions-icon-type-pending-warning-background-color':
       'rgba(236, 93, 107, 0.8)',
+    '--theme-transactions-icon-type-failed-background-color':
+      'rgba(236, 93, 107, 1)',
     '--theme-transactions-state-pending-warning-background-color': '#ec5d6b',
     '--theme-transactions-filter-button-shadow-color':
       'rgba(31, 193, 195, 0.18)',
diff --git a/source/renderer/app/themes/daedalus/flight-candidate.js b/source/renderer/app/themes/daedalus/flight-candidate.js
index c08952fd5a..e41f2c8569 100644
--- a/source/renderer/app/themes/daedalus/flight-candidate.js
+++ b/source/renderer/app/themes/daedalus/flight-candidate.js
@@ -921,6 +921,8 @@ export const FLIGHT_CANDIDATE_THEME_OUTPUT = {
       'rgba(255, 255, 255, 0.5)',
     '--theme-transactions-icon-type-pending-warning-background-color':
       'rgba(236, 93, 107, 0.8)',
+    '--theme-transactions-icon-type-failed-background-color':
+      'rgba(236, 93, 107, 1)',
     '--theme-transactions-state-pending-warning-background-color': '#ec5d6b',
     '--theme-transactions-filter-button-shadow-color':
       'rgba(255, 185, 35, 0.18)',
diff --git a/source/renderer/app/themes/daedalus/incentivized-testnet.js b/source/renderer/app/themes/daedalus/incentivized-testnet.js
index d60ca4bae4..46dd3b143e 100644
--- a/source/renderer/app/themes/daedalus/incentivized-testnet.js
+++ b/source/renderer/app/themes/daedalus/incentivized-testnet.js
@@ -917,6 +917,8 @@ export const INCENTIVIZED_TESTNET_THEME_OUTPUT = {
       'rgba(255, 255, 255, 0.5)',
     '--theme-transactions-icon-type-pending-warning-background-color':
       'rgba(235, 74, 34, 0.8)',
+    '--theme-transactions-icon-type-failed-background-color':
+      'rgba(235, 74, 34, 1)',
     '--theme-transactions-list-background-color': '#1e1f31',
     '--theme-transactions-list-border-color': '1e1f31',
     '--theme-transactions-list-group-date-color': '#ffffff',
diff --git a/source/renderer/app/themes/daedalus/light-blue.js b/source/renderer/app/themes/daedalus/light-blue.js
index c9ffe21cc2..39583ad692 100644
--- a/source/renderer/app/themes/daedalus/light-blue.js
+++ b/source/renderer/app/themes/daedalus/light-blue.js
@@ -933,6 +933,8 @@ export const LIGHT_BLUE_THEME_OUTPUT = {
       'rgba(94, 96, 102, 0.5)',
     '--theme-transactions-icon-type-pending-warning-background-color':
       'rgba(236, 93, 107, 0.8)',
+    '--theme-transactions-icon-type-failed-background-color':
+      'rgba(236, 93, 107, 1)',
     '--theme-transactions-state-pending-warning-background-color': '#ec5d6b',
     '--theme-transactions-filter-button-shadow-color': 'rgba(0, 0, 0, 0.18)',
     '--theme-transactions-filter-button-color': '#fafbfc',
diff --git a/source/renderer/app/themes/daedalus/shelley-testnet.js b/source/renderer/app/themes/daedalus/shelley-testnet.js
index 103f4b2856..fd472e85cf 100644
--- a/source/renderer/app/themes/daedalus/shelley-testnet.js
+++ b/source/renderer/app/themes/daedalus/shelley-testnet.js
@@ -920,6 +920,8 @@ export const SHELLEY_TESTNET_THEME_OUTPUT = {
       'rgba(255, 255, 255, 0.5)',
     '--theme-transactions-icon-type-pending-warning-background-color':
       'rgba(236, 93, 107, 0.8)',
+    '--theme-transactions-icon-type-failed-background-color':
+      'rgba(236, 93, 107, 1)',
     '--theme-transactions-state-pending-warning-background-color': '#ec5d6b',
     '--theme-transactions-filter-button-shadow-color':
       'rgba(137, 142, 230, 0.18)',
diff --git a/source/renderer/app/themes/daedalus/white.js b/source/renderer/app/themes/daedalus/white.js
index 2fe84d27be..32a9e79e2a 100644
--- a/source/renderer/app/themes/daedalus/white.js
+++ b/source/renderer/app/themes/daedalus/white.js
@@ -926,6 +926,8 @@ export const WHITE_THEME_OUTPUT = {
       'rgba(45, 45, 45, 0.5)',
     '--theme-transactions-icon-type-pending-warning-background-color':
       'rgba(236, 93, 107, 0.8)',
+    '--theme-transactions-icon-type-failed-background-color':
+      'rgba(236, 93, 107, 1)',
     '--theme-transactions-state-pending-warning-background-color': '#ec5d6b',
     '--theme-transactions-filter-button-shadow-color': 'rgba(0, 0, 0, 0.18)',
     '--theme-transactions-filter-button-color': '#fff',
diff --git a/source/renderer/app/themes/daedalus/yellow.js b/source/renderer/app/themes/daedalus/yellow.js
index dee51334b6..5bfc8b8dd2 100644
--- a/source/renderer/app/themes/daedalus/yellow.js
+++ b/source/renderer/app/themes/daedalus/yellow.js
@@ -925,6 +925,8 @@ export const YELLOW_THEME_OUTPUT = {
       'rgba(45, 45, 45, 0.5)',
     '--theme-transactions-icon-type-pending-warning-background-color':
       'rgba(236, 93, 107, 0.8)',
+    '--theme-transactions-icon-type-failed-background-color':
+      'rgba(236, 93, 107, 1)',
     '--theme-transactions-state-pending-warning-background-color': '#ec5d6b',
     '--theme-transactions-filter-button-shadow-color': 'rgba(45, 45, 45, 0.18)',
     '--theme-transactions-filter-button-color': '#f8f7f3',
diff --git a/source/renderer/app/themes/utils/createTheme.js b/source/renderer/app/themes/utils/createTheme.js
index 1a2f79430a..35ad7cfe6d 100644
--- a/source/renderer/app/themes/utils/createTheme.js
+++ b/source/renderer/app/themes/utils/createTheme.js
@@ -1165,6 +1165,9 @@ export const createDaedalusComponentsTheme = (
       '--theme-transactions-icon-type-pending-warning-background-color': `
         ${chroma(error.regular).alpha(0.8)}
       `,
+      '--theme-transactions-icon-type-failed-background-color': `
+        ${chroma(error.regular)}
+      `,
       '--theme-transactions-arrow-stroke-color': `${text.primary}`,
       '--theme-transactions-filter-button-color': `${background.primary.lightest}`,
       '--theme-transactions-filter-button-shadow-color': `${chroma(
diff --git a/storybook/stories/wallets/_utils/WalletsTransactionsWrapper.js b/storybook/stories/wallets/_utils/WalletsTransactionsWrapper.js
index ec6f8240ff..2dbe297f77 100644
--- a/storybook/stories/wallets/_utils/WalletsTransactionsWrapper.js
+++ b/storybook/stories/wallets/_utils/WalletsTransactionsWrapper.js
@@ -88,6 +88,12 @@ export default class WalletsTransactionsWrapper extends Component<
           TransactionStates.PENDING,
           true
         ),
+        generateTransaction(
+          TransactionTypes.EXPEND,
+          new Date(),
+          new BigNumber(13),
+          TransactionStates.FAILED
+        ),
       ],
       renderingManyTransactions: generateMultipleTransactions(500),
       unresolvedIncomeAddresses: [