fixed failed txn display (#8067)

apps/wallet/src/ui/app/components/receipt-card/ReceiptCardBg.tsx

@@ -15,8 +15,10 @@ export function ReceiptCardBg({
     return (
         <div
             className={cl(
-                "p-5 pb-0 rounded-t-lg flex flex-col item-center after:content-[''] after:bg-[url('_assets/images/receipt_bottom.svg')] after:w-[320px] after:h-5 after:ml-[-20px] after:top-4 after:-mt-6 after:relative divide-y divide-solid divide-steel/20 divide-x-0 gap-3.5",
-                status ? 'bg-success-light' : 'bg-issue-light'
+                "p-5 pb-0 rounded-t-lg flex flex-col item-center after:content-[''] after:w-[320px] after:h-5 after:ml-[-20px] after:top-4 after:-mt-6 after:relative divide-y divide-solid divide-steel/20 divide-x-0 gap-3.5",
+                status
+                    ? "bg-success-light after:bg-[url('_assets/images/receipt_bottom.svg')]"
+                    : "bg-issue-light after:bg-[url('_assets/images/receipt_bottom_red.svg')]"
             )}
         >
             {children}

apps/wallet/src/ui/app/components/receipt-card/StakeTxnCard.tsx

@@ -17,14 +17,13 @@ import type { TransactionEffects, MoveEvent } from '@mysten/sui.js';
 
 type StakeTxnCardProps = {
     txnEffects: TransactionEffects;
-    amount: number;
 };
 
 const REQUEST_DELEGATION_EVENT = '0x2::validator_set::DelegationRequestEvent';
 
 // TODO: moveEvents is will be changing
 // For Staked Transaction use moveEvent Field to get the validator address, delegation amount, epoch
-export function StakeTxnCard({ txnEffects, amount }: StakeTxnCardProps) {
+export function StakeTxnCard({ txnEffects }: StakeTxnCardProps) {
     const stakingData = useMemo(() => {
         if (!txnEffects?.events) return null;
 
@@ -86,13 +85,13 @@ export function StakeTxnCard({ txnEffects, amount }: StakeTxnCardProps) {
                     <IconTooltip tip="This is the Annualized Percentage Yield of the a specific validator’s past operations. Note there is no guarantee this APY will be true in the future." />
                 </div>
                 <Text variant="body" weight="medium" color="steel-darker">
-                    {apy > 0 ? apy + ' %' : '--'}
+                    {apy && apy > 0 ? apy + ' %' : '--'}
                 </Text>
             </div>
 
-            {amount && (
+            {stakingData?.fields.amount && (
                 <TxnAmount
-                    amount={amount}
+                    amount={stakingData.fields.amount}
                     coinType={SUI_TYPE_ARG}
                     label="Stake"
                 />

apps/wallet/src/ui/app/components/receipt-card/index.tsx

@@ -7,6 +7,7 @@ import {
     getTransferObjectTransaction,
     getTransactionKindName,
     getTotalGasUsed,
+    getExecutionStatusError,
     SUI_TYPE_ARG,
 } from '@mysten/sui.js';
 import { useMemo } from 'react';
@@ -26,6 +27,7 @@ import { getTxnEffectsEventID } from '_components/transactions-card/Transaction'
 import { TxnImage } from '_components/transactions-card/TxnImage';
 import { getEventsSummary, checkStakingTxn } from '_helpers';
 import { useGetTxnRecipientAddress } from '_hooks';
+import { Text } from '_src/ui/app/shared/text';
 
 import type { SuiTransactionResponse, SuiAddress } from '@mysten/sui.js';
 
@@ -37,6 +39,7 @@ type ReceiptCardProps = {
 function ReceiptCard({ txn, activeAddress }: ReceiptCardProps) {
     const { timestamp_ms, certificate, effects } = txn;
     const executionStatus = getExecutionStatusType(txn);
+    const error = useMemo(() => getExecutionStatusError(txn), [txn]);
     const isSuccessful = executionStatus === 'success';
     const txnKind = getTransactionKindName(certificate.data.transactions[0]);
     const { coins: eventsSummary } = getEventsSummary(effects, activeAddress);
@@ -93,17 +96,20 @@ function ReceiptCard({ txn, activeAddress }: ReceiptCardProps) {
             )}
 
             <ReceiptCardBg status={isSuccessful}>
+                {error && (
+                    <Text variant="body" weight="medium" color="steel-darker">
+                        {error}
+                    </Text>
+                )}
+
                 {isStakeTxn ? (
                     moveCallLabel === 'Staked' ? (
-                        <StakeTxnCard
-                            amount={eventsSummary[0].amount}
-                            txnEffects={effects}
-                        />
+                        <StakeTxnCard txnEffects={effects} />
                     ) : (
                         <UnStakeTxnCard
                             txn={txn}
                             activeAddress={activeAddress}
-                            amount={eventsSummary[0].amount}
+                            amount={totalSuiAmount || 0}
                         />
                     )
                 ) : (