feat(wallet/dashboard): show negative value for vested staking (#6838)

# Description of change

![Screenshot from 2025-05-09
13-04-56](https://github.com/user-attachments/assets/2f8490e9-f310-40ca-bc45-263f846b445e)

## Links to any relevant issues

fixes #6742

## Type of change

Choose a type of change, and delete any options that are not relevant.

- Bug fix (a non-breaking change which fixes an issue)
- Enhancement (a non-breaking change which adds functionality)
- Breaking change (fix or feature that would cause existing
functionality to not work as expected)
- Documentation Fix

## How the change has been tested

Describe the tests that you ran to verify your changes.

Make sure to provide instructions for the maintainer as well as any
relevant configurations.

- [ ] Basic tests (linting, compilation, formatting, unit/integration
tests)
- [ ] Patch-specific tests (correctness, functionality coverage)

### Infrastructure QA (only required for crates that are maintained by
@iotaledger/infrastructure)

- [ ] Synchronization of the indexer from genesis for a network
including migration objects.
- [ ] Restart of indexer synchronization locally without resetting the
database.
- [ ] Restart of indexer synchronization on a production-like database.
- [ ] Deployment of services using Docker.
- [ ] Verification of API backward compatibility.

## Change checklist

Tick the boxes that are relevant to your changes, and delete any items
that are not.

- [ ] I have followed the contribution guidelines for this project
- [ ] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [ ] I have checked that new and existing unit tests pass locally with
my changes

### Release Notes

<!--
Check each box that your changes affect. If none of the boxes relate to
your changes, release notes aren't required.

For each box you select, include information after the relevant heading
that describes the impact of your changes that a user might notice and
any actions they must take to implement updates.
-->

- [ ] Protocol:
- [ ] Nodes (Validators and Full nodes):
- [ ] Indexer:
- [ ] JSON-RPC:
- [ ] GraphQL:
- [ ] CLI:
- [ ] Rust SDK:
- [ ] REST API:

---------

Co-authored-by: Marc Espin <[email protected]>
Co-authored-by: Bran <[email protected]>

Author: 3 people

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

@@ -13,7 +13,7 @@ export function getTransactionAmountForTimelocked(
 
     if (isTimelockedStaking) {
         const { totalStakedAmount } = getStakeDetailsFromEvents(events);
-        return totalStakedAmount;
+        return -BigInt(totalStakedAmount);
     } else if (isTimelockedUnstaking) {
         const { totalUnstakeAmount } = getUnstakeDetailsFromEvents(events);
         return totalUnstakeAmount;

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

@@ -259,29 +259,27 @@ function StakingDashboardPage(): React.JSX.Element {
                         )}
                     </Panel>
                 ) : (
-                    <div className="flex h-[270px] p-lg">
+                    <div className="flex h-[270px] py-lg">
                         <StartStaking />
                     </div>
                 )}
                 {hasAvailableVestedStaking && supplyIncreaseVestingEnabled && (
-                    <div className="px-lg">
-                        <Panel bgColor="bg-secondary-90 dark:bg-secondary-10">
-                            <div className="py-sm">
-                                <Title
-                                    title="Available Vested Staking"
-                                    subtitle="In progress vested staking"
-                                    trailingElement={
-                                        <Button
-                                            onClick={() => router.push('/vesting')}
-                                            size={ButtonSize.Small}
-                                            type={ButtonType.Outlined}
-                                            text="View"
-                                        />
-                                    }
-                                />
-                            </div>
-                        </Panel>
-                    </div>
+                    <Panel bgColor="bg-secondary-90 dark:bg-secondary-10">
+                        <div className="py-sm">
+                            <Title
+                                title="Available Vested Staking"
+                                subtitle="In progress vested staking"
+                                trailingElement={
+                                    <Button
+                                        onClick={() => router.push('/vesting')}
+                                        size={ButtonSize.Small}
+                                        type={ButtonType.Outlined}
+                                        text="View"
+                                    />
+                                }
+                            />
+                        </div>
+                    </Panel>
                 )}
             </div>
         </div>