feat(explorer): display balance changes in tx list

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

@@ -14,8 +14,10 @@ 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 +67,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 === '0x2::iota::IOTA',
+                );
+                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 +151,7 @@ export function generateTransactionsTableColumns(): ColumnDef<IotaTransactionBlo
                 );
             },
         },
-    ];
+    );
+
+    return columns;
 }