feat(suite-native): update UI for failed txns

trezor · Oct 29, 2024 · dccf456 · dccf456
1 parent 3e2480c
commit dccf456
Show file tree

Hide file tree

Showing 8 changed files with 147 additions and 91 deletions.
diff --git a/suite-common/icons/generateIconFont.ts b/suite-common/icons/generateIconFont.ts
@@ -76,6 +76,7 @@ const usedIcons = [
     'piggyBankFilled',
     'plus',
     'plusCircle',
+    'prohibit',
     'qrCode',
     'question',
     'shareNetwork',

diff --git a/suite-common/icons/iconFontsMobile/TrezorSuiteIcons.json b/suite-common/icons/iconFontsMobile/TrezorSuiteIcons.json
@@ -25,66 +25,67 @@
     "shareNetwork": 61720,
     "question": 61721,
     "qrCode": 61722,
-    "plusCircle": 61723,
-    "plus": 61724,
-    "piggyBankFilled": 61725,
-    "piggyBank": 61726,
-    "pencilSimpleLine": 61727,
-    "pencilSimple": 61728,
-    "pencil": 61729,
-    "password": 61730,
-    "palette": 61731,
-    "magnifyingGlass": 61732,
-    "lock": 61733,
-    "link": 61734,
-    "lightbulb": 61735,
-    "lifebuoy": 61736,
-    "info": 61737,
-    "image": 61738,
-    "house": 61739,
-    "githubLogo": 61740,
-    "gear": 61741,
-    "flagCheckered": 61742,
-    "flag": 61743,
-    "fingerprintSimple": 61744,
-    "fingerprint": 61745,
-    "filePdf": 61746,
-    "facebookLogo": 61747,
-    "eyeSlash": 61748,
-    "eye": 61749,
-    "discover": 61750,
-    "detective": 61751,
-    "database": 61752,
-    "copy": 61753,
-    "coins": 61754,
-    "coinVerticalCheck": 61755,
-    "clockClockwise": 61756,
-    "circleDashed": 61757,
-    "checks": 61758,
-    "checkCircleFilled": 61759,
-    "checkCircle": 61760,
-    "check": 61761,
-    "change": 61762,
-    "caretUpFilled": 61763,
-    "caretUpDown": 61764,
-    "caretUp": 61765,
-    "caretRight": 61766,
-    "caretLeft": 61767,
-    "caretDownFilled": 61768,
-    "caretDown": 61769,
-    "caretCircleRight": 61770,
-    "calendar": 61771,
-    "bugBeetle": 61772,
-    "bookmarkSimple": 61773,
-    "backspace": 61774,
-    "arrowsCounterClockwise": 61775,
-    "arrowUpRight": 61776,
-    "arrowUp": 61777,
-    "arrowURightDown": 61778,
-    "arrowSquareOut": 61779,
-    "arrowRight": 61780,
-    "arrowLineUpRight": 61781,
-    "arrowLineUp": 61782,
-    "arrowLineDown": 61783,
-    "arrowDown": 61784
+    "prohibit": 61723,
+    "plusCircle": 61724,
+    "plus": 61725,
+    "piggyBankFilled": 61726,
+    "piggyBank": 61727,
+    "pencilSimpleLine": 61728,
+    "pencilSimple": 61729,
+    "pencil": 61730,
+    "password": 61731,
+    "palette": 61732,
+    "magnifyingGlass": 61733,
+    "lock": 61734,
+    "link": 61735,
+    "lightbulb": 61736,
+    "lifebuoy": 61737,
+    "info": 61738,
+    "image": 61739,
+    "house": 61740,
+    "githubLogo": 61741,
+    "gear": 61742,
+    "flagCheckered": 61743,
+    "flag": 61744,
+    "fingerprintSimple": 61745,
+    "fingerprint": 61746,
+    "filePdf": 61747,
+    "facebookLogo": 61748,
+    "eyeSlash": 61749,
+    "eye": 61750,
+    "discover": 61751,
+    "detective": 61752,
+    "database": 61753,
+    "copy": 61754,
+    "coins": 61755,
+    "coinVerticalCheck": 61756,
+    "clockClockwise": 61757,
+    "circleDashed": 61758,
+    "checks": 61759,
+    "checkCircleFilled": 61760,
+    "checkCircle": 61761,
+    "check": 61762,
+    "change": 61763,
+    "caretUpFilled": 61764,
+    "caretUpDown": 61765,
+    "caretUp": 61766,
+    "caretRight": 61767,
+    "caretLeft": 61768,
+    "caretDownFilled": 61769,
+    "caretDown": 61770,
+    "caretCircleRight": 61771,
+    "calendar": 61772,
+    "bugBeetle": 61773,
+    "bookmarkSimple": 61774,
+    "backspace": 61775,
+    "arrowsCounterClockwise": 61776,
+    "arrowUpRight": 61777,
+    "arrowUp": 61778,
+    "arrowURightDown": 61779,
+    "arrowSquareOut": 61780,
+    "arrowRight": 61781,
+    "arrowLineUpRight": 61782,
+    "arrowLineUp": 61783,
+    "arrowLineDown": 61784,
+    "arrowDown": 61785
 }
diff --git a/suite-common/icons/iconFontsMobile/TrezorSuiteIcons.ttf b/suite-common/icons/iconFontsMobile/TrezorSuiteIcons.ttf
diff --git a/suite-native/transactions/src/components/TransactionDetail/TransactionDetailHeader.tsx b/suite-native/transactions/src/components/TransactionDetail/TransactionDetailHeader.tsx
@@ -25,6 +25,15 @@ type TransactionDetailHeaderProps = {
 const ICON_SIZE = 56;
 const ICON_SPINNER_WIDTH = 3;
 
+const failedTxStyle = prepareNativeStyle<{ isFailedTx: boolean }>((_, { isFailedTx }) => ({
+    extend: {
+        condition: isFailedTx,
+        style: {
+            textDecorationLine: 'line-through',
+        },
+    },
+}));
+
 const fiatValueStyle = prepareNativeStyle(utils => ({
     marginTop: -utils.spacings.sp4,
 }));
@@ -44,6 +53,7 @@ export const TransactionDetailHeader = ({
     const { type } = transaction;
 
     const isPendingTx = isPending(transaction);
+    const isFailedTx = transaction.type === 'failed';
     const signValue = getTransactionValueSign(tokenTransfer?.type ?? transaction.type);
 
     return (
@@ -68,19 +78,24 @@ export const TransactionDetailHeader = ({
                             elevation="1"
                         />
                     ) : (
-                        <Badge
-                            variant="green"
-                            label={<Translation id="transactions.status.confirmed" />}
-                        />
+                        !isFailedTx && (
+                            <Badge
+                                variant="green"
+                                label={<Translation id="transactions.status.confirmed" />}
+                            />
+                        )
                     )}
 
-                    <Box flexDirection="row">
-                        <SignValueFormatter
-                            color="textDefault"
-                            value={signValue}
-                            variant="titleMedium"
-                        />
+                    <Box>
+                        {!isFailedTx && (
+                            <SignValueFormatter
+                                color="textDefault"
+                                value={signValue}
+                                variant="titleMedium"
+                            />
+                        )}
                         <Text> </Text>
+
                         {tokenTransfer ? (
                             <TokenAmountFormatter
                                 value={tokenTransfer.amount}
@@ -90,6 +105,7 @@ export const TransactionDetailHeader = ({
                                 color="textDefault"
                                 numberOfLines={1}
                                 adjustsFontSizeToFit
+                                style={applyStyle(failedTxStyle, { isFailedTx })}
                             />
                         ) : (
                             <CryptoAmountFormatter
@@ -100,6 +116,7 @@ export const TransactionDetailHeader = ({
                                 color="textDefault"
                                 numberOfLines={1}
                                 adjustsFontSizeToFit
+                                style={applyStyle(failedTxStyle, { isFailedTx })}
                             />
                         )}
                     </Box>
@@ -117,6 +134,7 @@ export const TransactionDetailHeader = ({
                                 historicRate={historicRate}
                                 color="textSubdued"
                                 useHistoricRate
+                                style={applyStyle(failedTxStyle, { isFailedTx })}
                             />
                         ) : (
                             <CryptoToFiatAmountFormatter
@@ -125,6 +143,7 @@ export const TransactionDetailHeader = ({
                                 historicRate={historicRate}
                                 color="textSubdued"
                                 useHistoricRate
+                                style={applyStyle(failedTxStyle, { isFailedTx })}
                             />
                         )}
                     </Box>

diff --git a/suite-native/transactions/src/components/TransactionsList/TokenTransferListItem.tsx b/suite-native/transactions/src/components/TransactionsList/TokenTransferListItem.tsx
@@ -5,6 +5,7 @@ import { TokenAmountFormatter, TokenToFiatAmountFormatter } from '@suite-native/
 import { TypedTokenTransfer, WalletAccountTransaction } from '@suite-native/tokens';
 import { selectIsPhishingTransaction, TransactionsRootState } from '@suite-common/wallet-core';
 import { TokenDefinitionsRootState } from '@suite-common/token-definitions';
+import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
 
 import { useTransactionFiatRate } from '../../hooks/useTransactionFiatRate';
 import { TransactionListItemContainer } from './TransactionListItemContainer';
@@ -20,6 +21,15 @@ type TokenTransferListItemProps = {
     isLast?: boolean;
 };
 
+const failedTxStyle = prepareNativeStyle<{ isFailedTx: boolean }>((_, { isFailedTx }) => ({
+    extend: {
+        condition: isFailedTx,
+        style: {
+            textDecorationLine: 'line-through',
+        },
+    },
+}));
+
 export const TokenTransferListItemValues = ({
     tokenTransfer,
     transaction,
@@ -40,19 +50,24 @@ export const TokenTransferListItemValues = ({
             selectIsPhishingTransaction(state, transaction.txid, accountKey),
     );
 
+    const { applyStyle } = useNativeStyles();
+
+    const isFailedTx = transaction.type === 'failed';
+
     return (
         <>
             <TokenToFiatAmountFormatter
                 networkSymbol={transaction.symbol}
                 value={tokenTransfer.amount}
                 contract={tokenTransfer.contract}
                 decimals={tokenTransfer.decimals}
-                signValue={getTransactionValueSign(tokenTransfer.type)}
+                signValue={isFailedTx ? undefined : getTransactionValueSign(tokenTransfer.type)}
                 numberOfLines={1}
                 ellipsizeMode="tail"
                 historicRate={historicRate}
                 useHistoricRate
                 isForcedDiscreetMode={isPhishingTransaction}
+                style={applyStyle(failedTxStyle, { isFailedTx })}
             />
             <TokenAmountFormatter
                 value={tokenTransfer.amount}
@@ -74,20 +89,24 @@ export const TokenTransferListItem = ({
     includedCoinsCount = 0,
     isFirst,
     isLast,
-}: TokenTransferListItemProps) => (
-    <TransactionListItemContainer
-        tokenTransfer={tokenTransfer}
-        transactionType={tokenTransfer.type}
-        txid={txid}
-        includedCoinsCount={includedCoinsCount}
-        accountKey={accountKey}
-        isFirst={isFirst}
-        isLast={isLast}
-    >
-        <TokenTransferListItemValues
+}: TokenTransferListItemProps) => {
+    const isFailedTxn = transaction.type === 'failed';
+
+    return (
+        <TransactionListItemContainer
             tokenTransfer={tokenTransfer}
-            transaction={transaction}
+            transactionType={isFailedTxn ? 'failed' : tokenTransfer.type}
+            txid={txid}
+            includedCoinsCount={includedCoinsCount}
             accountKey={accountKey}
-        />
-    </TransactionListItemContainer>
-);
+            isFirst={isFirst}
+            isLast={isLast}
+        >
+            <TokenTransferListItemValues
+                tokenTransfer={tokenTransfer}
+                transaction={transaction}
+                accountKey={accountKey}
+            />
+        </TransactionListItemContainer>
+    );
+};
diff --git a/suite-native/transactions/src/components/TransactionsList/TransactionIcon.tsx b/suite-native/transactions/src/components/TransactionsList/TransactionIcon.tsx
@@ -26,7 +26,7 @@ const transactionIconMap: Record<TransactionType, IconName> = {
     contract: 'circleDashed',
     joint: 'shuffle',
     self: 'arrowURightDown',
-    failed: 'xCircle',
+    failed: 'prohibit',
     unknown: 'circleDashed',
 };
 

diff --git a/suite-native/transactions/src/components/TransactionsList/TransactionListItem.tsx b/suite-native/transactions/src/components/TransactionsList/TransactionListItem.tsx
@@ -16,6 +16,7 @@ import {
 import { EmptyAmountText } from '@suite-native/formatters/src/components/EmptyAmountText';
 import { WalletAccountTransaction } from '@suite-native/tokens';
 import { TokenDefinitionsRootState } from '@suite-common/token-definitions';
+import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
 
 import { useTransactionFiatRate } from '../../hooks/useTransactionFiatRate';
 import { TokenTransferListItem } from './TokenTransferListItem';
@@ -30,6 +31,15 @@ type TransactionListItemProps = {
     isLast?: boolean;
 };
 
+const failedTxStyle = prepareNativeStyle<{ isFailedTx: boolean }>((_, { isFailedTx }) => ({
+    extend: {
+        condition: isFailedTx,
+        style: {
+            textDecorationLine: 'line-through',
+        },
+    },
+}));
+
 export const TransactionListItemValues = ({
     accountKey,
     transaction,
@@ -46,21 +56,27 @@ export const TransactionListItemValues = ({
             selectIsPhishingTransaction(state, transaction.txid, accountKey),
     );
 
+    const { applyStyle } = useNativeStyles();
+
     const historicRate = useTransactionFiatRate({ accountKey, transaction });
+    const isFailedTx = transaction.type === 'failed';
 
     return (
         <>
             {isTestnetAccount ? (
                 <EmptyAmountText />
             ) : (
                 <Box flexDirection="row">
-                    <SignValueFormatter value={getTransactionValueSign(transaction.type)} />
+                    {!isFailedTx && (
+                        <SignValueFormatter value={getTransactionValueSign(transaction.type)} />
+                    )}
                     <CryptoToFiatAmountFormatter
                         value={transaction.amount}
                         network={transaction.symbol}
                         historicRate={historicRate}
                         useHistoricRate
                         isForcedDiscreetMode={isPhishingTransaction}
+                        style={applyStyle(failedTxStyle, { isFailedTx })}
                     />
                 </Box>
             )}

diff --git a/suite-native/transactions/src/components/TransactionsList/TransactionListItemContainer.tsx b/suite-native/transactions/src/components/TransactionsList/TransactionListItemContainer.tsx
@@ -54,7 +54,7 @@ const transactionTitleMap = {
     self: 'Self',
     joint: 'Joined',
     contract: 'Contract',
-    failed: 'Failed',
+    failed: 'Transaction failed',
     unknown: 'Unknown',
 } as const satisfies Record<TransactionType, string>;