feat(explorer): display balance changes in tx list (#8662)

# Description of change

Display balance changes in the transaction list on an address page. The
balance change is for the address for which the page is loaded and only
IOTA is considered

<img width="1927" height="1188" alt="image"
src="https://github.com/user-attachments/assets/bdc5ce45-eefc-4dbb-9c7b-66e3ae1c24f6"
/>


## How the change has been tested

`pnpm explorer dev` and then manually checked addresses on
http://localhost:3000/?network=https%3A%2F%2Findexer.mainnet.iota.cafe

In the CI deployment
https://rebased-explorer-git-dev-tools-explorer-address-tx-58ac61-iota1.vercel.app/address/0x8008587485b6d62225fca4663ca9a226f2ed0e122f7e290ecf575d195f8abff6?network=mainnet

---------

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

Author: Thoralf-M

apps/explorer/src/components/transaction-blocks-for-address/TransactionBlocksForAddress.tsx

@@ -110,7 +110,7 @@ export function TransactionBlocksForAddress({
         } as TransactionFilter);
 
     const currentPage = currentPageState[filterValue];
-    const tableColumns = generateTransactionsTableColumns();
+    const tableColumns = generateTransactionsTableColumns(address);
 
     return (
         <Panel>

apps/explorer/src/components/transactions/TransactionsForAddress.tsx

@@ -72,7 +72,7 @@ export function TransactionsForAddressTable({
         );
     }
 
-    const tableColumns = generateTransactionsTableColumns();
+    const tableColumns = generateTransactionsTableColumns(address);
     const hasTxns = data?.length > 0;
 
     if (!hasTxns) {
@@ -122,6 +122,7 @@ export function TransactionsForAddress({ address }: TransactionsForAddressProps)
                 options: {
                     showEffects: true,
                     showInput: true,
+                    showBalanceChanges: true,
                 },
                 cursor,
                 limit,

apps/explorer/src/hooks/useGetTransactionBlocks.ts

@@ -33,6 +33,7 @@ export function useGetTransactionBlocks(
                 options: {
                     showEffects: true,
                     showInput: true,
+                    showBalanceChanges: true,
                 },
             }),
         initialPageParam: null,

apps/explorer/src/lib/ui/utils/generateTransactionsTableColumns.tsx

@@ -8,14 +8,22 @@ import type { IotaTransactionBlockKind, IotaTransactionBlockResponse } from '@io
 import { TableCellBase, TableCellText } from '@iota/apps-ui-kit';
 import type { ColumnDef } from '@tanstack/react-table';
 import { AddressLink, TransactionLink } from '../../../components/ui';
-import { CoinFormat, formatBalance, formatDigest, NANOS_PER_IOTA } from '@iota/iota-sdk/utils';
+import {
+    CoinFormat,
+    formatBalance,
+    formatDigest,
+    IOTA_TYPE_ARG,
+    NANOS_PER_IOTA,
+} from '@iota/iota-sdk/utils';
 import { getElapsedTime } from '~/pages/epochs/utils';
 
 /**
  * Generate table columns renderers for the transactions data.
  */
-export function generateTransactionsTableColumns(): ColumnDef<IotaTransactionBlockResponse>[] {
-    return [
+export function generateTransactionsTableColumns(
+    address?: string,
+): ColumnDef<IotaTransactionBlockResponse>[] {
+    const columns: ColumnDef<IotaTransactionBlockResponse>[] = [
         {
             header: 'Digest',
             accessorKey: 'digest',
@@ -65,6 +73,53 @@ export function generateTransactionsTableColumns(): ColumnDef<IotaTransactionBlo
                 );
             },
         },
+    ];
+
+    if (address) {
+        columns.push({
+            header: 'Balance Change',
+            accessorKey: 'balanceChanges',
+            cell: ({ getValue }) => {
+                const balanceChanges = getValue<IotaTransactionBlockResponse['balanceChanges']>();
+                if (!balanceChanges) {
+                    return (
+                        <TableCellBase>
+                            <TableCellText>--</TableCellText>
+                        </TableCellBase>
+                    );
+                }
+                const balanceChange = balanceChanges.find(
+                    (change) =>
+                        change.owner &&
+                        typeof change.owner === 'object' &&
+                        'AddressOwner' in change.owner &&
+                        change.owner.AddressOwner === address &&
+                        change.coinType === IOTA_TYPE_ARG,
+                );
+                if (!balanceChange) {
+                    return (
+                        <TableCellBase>
+                            <TableCellText>--</TableCellText>
+                        </TableCellBase>
+                    );
+                }
+                const amount = balanceChange.amount;
+                const formatted = formatBalance(
+                    Math.abs(Number(amount)) / Number(NANOS_PER_IOTA),
+                    0,
+                    CoinFormat.Rounded,
+                );
+                const sign = Number(amount) >= 0 ? '+' : '-';
+                return (
+                    <TableCellBase>
+                        <TableCellText supportingLabel="IOTA">{sign + formatted}</TableCellText>
+                    </TableCellBase>
+                );
+            },
+        });
+    }
+
+    columns.push(
         {
             header: 'Gas',
             accessorKey: 'effects',
@@ -102,5 +157,7 @@ export function generateTransactionsTableColumns(): ColumnDef<IotaTransactionBlo
                 );
             },
         },
-    ];
+    );
+
+    return columns;
 }