frontend: style failed transactions

ETH transactions can sometimes fail, in that case the entry in the
transaction list should be styled differently to clearly distinguish
it from other completed transactions.

This commit changes the transaction icon to warning symbol and
removes the color on the failed amount to be just gray instead of
green or red.

Author: thisconnect

frontends/web/src/components/transactions/transaction.module.css

@@ -79,6 +79,10 @@
     color: var(--color-success);
 }
 
+.failed {
+    color: var(--color-secondary);
+}
+
 .currency {
     font-variant: tabular-nums;
 }

frontends/web/src/components/transactions/transaction.tsx

@@ -1,6 +1,6 @@
 /**
  * Copyright 2018 Shift Devices AG
- * Copyright 2021 Shift Crypto AG
+ * Copyright 2021-2024 Shift Crypto AG
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -21,7 +21,7 @@ import { translate, TranslateProps } from '../../decorators/translate';
 import { A } from '../anchor/anchor';
 import { Dialog } from '../dialog/dialog';
 import { CopyableInput } from '../copy/Copy';
-import { ExpandIcon } from '../icon/icon';
+import { Warning, ExpandIcon } from '../icon/icon';
 import { ProgressRing } from '../progressRing/progressRing';
 import { FiatConversion } from '../rates/rates';
 import { Amount } from '../../components/amount/amount';
@@ -94,15 +94,17 @@ class Transaction extends Component<Props, State> {
       transactionDialog,
       transactionInfo,
     } = this.state;
-    const arrow = type === 'receive' ? (
+    const arrow = status === 'failed' ? (
+      <Warning style={{ maxWidth: '18px' }} />
+    ) : type === 'receive' ? (
       <ArrowIn />
     ) : type === 'send' ? (
       <ArrowOut />
     ) : (
       <ArrowSelf />
     );
     const sign = ((type === 'send') && '−') || ((type === 'receive') && '+') || '';
-    const typeClassName = (type === 'send' && style.send) || (type === 'receive' && style.receive) || '';
+    const typeClassName = (status === 'failed' && style.failed) || (type === 'send' && style.send) || (type === 'receive' && style.receive) || '';
     const sDate = time ? this.parseTimeShort(time) : '---';
     const statusText = {
       complete: t('transaction.status.complete'),