fix(wallet,wallet-dashboard): fix total stake/unstake amount in timelocks transaction summary

apps/core/src/components/transaction/TransactionReceipt.tsx

@@ -4,14 +4,14 @@
 import { InfoBox, InfoBoxStyle, InfoBoxType } from '@iota/apps-ui-kit';
 import type { useTransactionSummary } from '../../hooks';
 import { CheckmarkFilled } from '@iota/ui-icons';
-import { IotaTransactionBlockResponse } from '@iota/iota-sdk/client';
+import { IotaEvent, IotaTransactionBlockResponse } from '@iota/iota-sdk/client';
 import { STAKING_REQUEST_EVENT, UNSTAKING_REQUEST_EVENT } from '../../constants';
 import { StakeTransactionDetails } from './details';
 import { UnstakeTransactionInfo } from './info';
 import { TransactionSummary } from './summary';
 import { RenderExplorerLink, RenderValidatorLogo } from '../../types';
 import { GasFees } from '../gas';
-import { formatDate } from '../../utils';
+import { formatDate, getTransactionAmountForTimelocked } from '../../utils';
 
 interface TransactionReceiptProps {
     txn: IotaTransactionBlockResponse;
@@ -35,6 +35,12 @@ export function TransactionReceipt({
     const stakeTypeTransaction = events?.find(({ type }) => type === STAKING_REQUEST_EVENT);
     const unstakeTypeTransaction = events?.find(({ type }) => type === UNSTAKING_REQUEST_EVENT);
 
+    function calculateTimelockedStakingAmount(events: IotaEvent[]): bigint | undefined | string {
+        return getTransactionAmountForTimelocked(events);
+    }
+
+    const timelockedStakingAmount = events ? calculateTimelockedStakingAmount(events) : null;
+
     return (
         <div className="flex flex-col gap-md overflow-y-auto overflow-x-hidden">
             <TransactionStatus
@@ -51,6 +57,7 @@ export function TransactionReceipt({
                             gasSummary={summary?.gas}
                             renderValidatorLogo={renderValidatorLogo}
                             renderExplorerLink={renderExplorerLink}
+                            timelockedStakingAmount={timelockedStakingAmount}
                         />
                     ) : null}
 

apps/core/src/components/transaction/details/StakeTransactionDetails.tsx

@@ -15,6 +15,7 @@ interface StakeTransactionDetailsProps {
     renderExplorerLink: RenderExplorerLink;
     renderValidatorLogo: RenderValidatorLogo;
     gasSummary?: GasSummaryType;
+    timelockedStakingAmount?: bigint | undefined | string | null;
 }
 
 export function StakeTransactionDetails({
@@ -23,6 +24,7 @@ export function StakeTransactionDetails({
     activeAddress,
     renderValidatorLogo: ValidatorLogo,
     renderExplorerLink,
+    timelockedStakingAmount,
 }: StakeTransactionDetailsProps) {
     const { stakedAmount, validatorAddress, epoch } = getStakeDetailsFromEvent(event);
     const { data: rollingAverageApys } = useGetValidatorsApy();
@@ -43,7 +45,7 @@ export function StakeTransactionDetails({
             )}
             {stakedAmount && (
                 <TransactionAmount
-                    amount={stakedAmount}
+                    amount={timelockedStakingAmount ?? stakedAmount}
                     coinType={IOTA_TYPE_ARG}
                     subtitle="Stake"
                 />

apps/core/src/utils/stake/getTransactionAmountForTimelocked.ts

@@ -2,11 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { IotaEvent } from '@iota/iota-sdk/client';
-import {
-    getStakeDetailsFromEvent,
-    getUnstakeDetailsFromEvent,
-    checkIfIsTimelockedStaking,
-} from '.';
+import { getUnstakeDetailsFromEvent, checkIfIsTimelockedStaking } from '.';
 
 export function getTransactionAmountForTimelocked(
     events: IotaEvent[],
@@ -15,8 +11,13 @@ export function getTransactionAmountForTimelocked(
     const { isTimelockedStaking, isTimelockedUnstaking } = checkIfIsTimelockedStaking(events);
 
     if (isTimelockedStaking) {
-        const { stakedAmount } = getStakeDetailsFromEvent(events[0]);
-        return stakedAmount;
+        let amount = 0;
+        events?.forEach((event) => {
+            if ((event.parsedJson as { amount: number }).amount) {
+                amount += Number((event.parsedJson as { amount: number }).amount);
+            }
+        });
+        return BigInt(amount);
     } else if (isTimelockedUnstaking) {
         const { totalAmount } = getUnstakeDetailsFromEvent(events[0]);
         return totalAmount;

apps/wallet-dashboard/app/(protected)/vesting/page.tsx

@@ -88,6 +88,7 @@ export default function VestingDashboardPage(): JSX.Element {
         unlockAllSupplyIncreaseVesting,
         refreshStakeList,
         isSupplyIncreaseVestingScheduleEmpty,
+        supplyIncreaseVestingMapped,
     } = useGetSupplyIncreaseVestingObjects(address);
 
     const timelockedStakedObjectsGrouped: TimelockedStakedObjectsGrouped[] =
@@ -297,7 +298,8 @@ export default function VestingDashboardPage(): JSX.Element {
                         </div>
                     </Panel>
 
-                    {isSupplyIncreaseVestingScheduleEmpty ? (
+                    {supplyIncreaseVestingMapped.length > 0 &&
+                    supplyIncreaseVestingSchedule.totalStaked === 0n ? (
                         <Banner
                             videoSrc={videoSrc}
                             title="Stake Vested Tokens"

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

@@ -10,6 +10,8 @@ import {
     useFormatCoin,
     useTransactionSummary,
     TransactionIcon,
+    checkIfIsTimelockedStaking,
+    getTransactionAmountForTimelocked,
 } from '@iota/core';
 import type { IotaTransactionBlockResponse } from '@iota/iota-sdk/client';
 import { Link } from 'react-router-dom';
@@ -39,14 +41,24 @@ export function TransactionCard({ txn, address }: TransactionCardProps) {
         currentAddress: address,
         recognizedPackagesList,
     });
+    const { isTimelockedStaking, isTimelockedUnstaking } = checkIfIsTimelockedStaking(txn.events);
 
     // we only show IOTA Transfer amount or the first non-Iota transfer amount
     // Get the balance changes for the transaction and the amount
     const balanceChanges = getBalanceChangeSummary(txn, recognizedPackagesList);
-    const [formatAmount, symbol] = useFormatCoin(
-        Math.abs(Number(balanceChanges?.[address]?.[0]?.amount ?? 0)),
-        IOTA_TYPE_ARG,
-    );
+
+    function getAmount(tx: IotaTransactionBlockResponse) {
+        if ((isTimelockedStaking || isTimelockedUnstaking) && tx.events) {
+            return getTransactionAmountForTimelocked(tx.events);
+        } else {
+            return address && balanceChanges?.[address]?.[0]?.amount
+                ? Math.abs(Number(balanceChanges?.[address]?.[0]?.amount))
+                : 0;
+        }
+    }
+
+    const transactionAmount = getAmount(txn);
+    const [formatAmount, symbol] = useFormatCoin(transactionAmount, IOTA_TYPE_ARG);
 
     const error = txn.effects?.status.error;