[explorer] - restore transaction amount (MystenLabs#10498)

## Description 

Add amount back to TransactionView

## Test Plan 

How did you test the new or updated feature?

---
If your changes are not user-facing and not a breaking change, you can
skip the following section. Otherwise, please indicate what changed, and
then add to the Release Notes section as highlighted during the release
process.

### Type of Change (Check all that apply)

- [ ] user-visible impact
- [ ] breaking change for a client SDKs
- [ ] breaking change for FNs (FN binary must upgrade)
- [ ] breaking change for validators or node operators (must upgrade
binaries)
- [ ] breaking change for on-chain data layout
- [ ] necessitate either a data wipe or data migration

### Release notes

apps/core/src/hooks/useGetTransferAmount.ts

@@ -0,0 +1,51 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+import {
+    SUI_TYPE_ARG,
+    SuiTransactionBlockResponse,
+    getTotalGasUsed,
+    getTransactionSender,
+} from '@mysten/sui.js';
+import { useMemo } from 'react';
+
+export function useGetTransferAmount(txnData: SuiTransactionBlockResponse) {
+    const { balanceChanges } = txnData;
+    const sender = getTransactionSender(txnData);
+    const gas = getTotalGasUsed(txnData);
+    const changes = useMemo(
+        () =>
+            balanceChanges
+                ? balanceChanges?.map(({ coinType, owner, amount }) => ({
+                      coinType,
+                      address:
+                          owner === 'Immutable'
+                              ? 'Immutable'
+                              : 'AddressOwner' in owner
+                              ? owner.AddressOwner
+                              : 'ObjectOwner' in owner
+                              ? owner.ObjectOwner
+                              : '',
+                      amount:
+                          coinType === SUI_TYPE_ARG && BigInt(amount) < 0n
+                              ? BigInt(amount) + BigInt(gas ?? 0n)
+                              : BigInt(amount),
+                  }))
+                : [],
+        [balanceChanges, gas]
+    );
+    // take absolute value of the first balance change entry for display
+    const [change] = changes;
+    const amount = change?.amount
+        ? change.amount < 0n
+            ? -change.amount
+            : change.amount
+        : 0n;
+
+    return {
+        balanceChanges: changes,
+        coinType: change.coinType,
+        gas,
+        sender,
+        amount,
+    };
+}

apps/core/src/index.ts

@@ -9,5 +9,6 @@ export * from './hooks/useGetValidatorsEvents';
 export * from './hooks/useGetRollingAverageApys';
 export * from './utils/formatAmount';
 export * from './utils/roundFloat';
+export * from './hooks/useGetTransferAmount';
 export * from './PostHogAnalyticsProvider';
 export * from './utils/formatPercentageDisplay';

apps/explorer/src/pages/transaction-result/TransactionView.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) Mysten Labs, Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-import { CoinFormat, useFormatCoin } from '@mysten/core';
+import { CoinFormat, useFormatCoin, useGetTransferAmount } from '@mysten/core';
 import {
     getExecutionStatusError,
     getExecutionStatusType,
@@ -16,14 +16,13 @@ import {
     type SuiTransactionBlockResponse,
 } from '@mysten/sui.js';
 import clsx from 'clsx';
-import { useMemo, useState } from 'react';
+import { useState } from 'react';
 
 // import {
 //     eventToDisplay,
 //     getAddressesLinks,
 // } from '../../components/events/eventDisplay';
-import Pagination from '../../components/pagination/Pagination';
-import { getAmount } from '../../utils/getAmount';
+
 import { Signatures } from './Signatures';
 import TxLinks from './TxLinks';
 
@@ -47,8 +46,6 @@ import {
 } from '~/ui/TransactionAddressSection';
 import { ReactComponent as ChevronDownIcon } from '~/ui/icons/chevron_down.svg';
 
-const MAX_RECIPIENTS_PER_PAGE = 10;
-
 function generateMutatedCreated(tx: SuiTransactionBlockResponse) {
     return [
         ...(tx.effects!.mutated?.length
@@ -124,33 +121,10 @@ export function TransactionView({
 
     const [gasFeesExpanded, setGasFeesExpanded] = useState(false);
 
-    const [recipientsPageNumber, setRecipientsPageNumber] = useState(1);
-
-    const coinTransfer = useMemo(
-        () =>
-            getAmount({
-                txnData: transaction,
-            }),
-        [transaction]
-    );
-
-    const recipients = useMemo(() => {
-        const startAt = (recipientsPageNumber - 1) * MAX_RECIPIENTS_PER_PAGE;
-        const endAt = recipientsPageNumber * MAX_RECIPIENTS_PER_PAGE;
-        return coinTransfer.slice(startAt, endAt);
-    }, [coinTransfer, recipientsPageNumber]);
-
-    // select the first element in the array, if there are more than one element we don't show the total amount sent but display the individual amounts
-    // use absolute value
-    const totalRecipientsCount = coinTransfer.length;
-    const transferAmount = coinTransfer?.[0]?.amount
-        ? Math.abs(coinTransfer[0].amount)
-        : null;
+    const { amount, coinType, balanceChanges } =
+        useGetTransferAmount(transaction);
 
-    const [formattedAmount, symbol] = useFormatCoin(
-        transferAmount,
-        coinTransfer?.[0]?.coinType
-    );
+    const [formattedAmount, symbol] = useFormatCoin(amount, coinType);
 
     // const txKindData = formatByTransactionKind(txKindName, txnDetails, sender);
     // const txEventData = transaction.events?.map(eventToDisplay);
@@ -236,9 +210,7 @@ export function TransactionView({
                                 ])}
                                 data-testid="transaction-timestamp"
                             >
-                                {coinTransfer.length === 1 &&
-                                coinTransfer?.[0]?.coinType &&
-                                formattedAmount ? (
+                                {coinType && formattedAmount ? (
                                     <section className="mb-10">
                                         <StatAmount
                                             amount={formattedAmount}
@@ -263,28 +235,13 @@ export function TransactionView({
                                 <div className="mt-10">
                                     <SenderTransactionAddress sender={sender} />
                                 </div>
-                                {recipients.length > 0 && (
+                                {balanceChanges.length > 0 && (
                                     <div className="mt-10">
                                         <RecipientTransactionAddresses
-                                            recipients={recipients}
+                                            recipients={balanceChanges}
                                         />
                                     </div>
                                 )}
-                                <div className="mt-5 flex w-full max-w-lg">
-                                    {totalRecipientsCount >
-                                        MAX_RECIPIENTS_PER_PAGE && (
-                                        <Pagination
-                                            totalItems={totalRecipientsCount}
-                                            itemsPerPage={
-                                                MAX_RECIPIENTS_PER_PAGE
-                                            }
-                                            currentPage={recipientsPageNumber}
-                                            onPagiChangeFn={
-                                                setRecipientsPageNumber
-                                            }
-                                        />
-                                    )}
-                                </div>
                             </section>
 
                             <section

apps/explorer/src/pages/transaction-result/TxLinks.tsx

@@ -17,10 +17,10 @@ type Addresslist = {
     links: SuiObjectRef[];
 };
 function TxLinks({ data }: { data: Addresslist }) {
-    const [viewMore, setVeiwMore] = useState(false);
+    const [viewMore, setViewMore] = useState(false);
     const numberOfListItemsToShow = 3;
     const viewAll = useCallback(() => {
-        setVeiwMore(!viewMore);
+        setViewMore(!viewMore);
     }, [viewMore]);
     return (
         <div className={styles.mutatedcreatedlist}>

apps/explorer/src/ui/TransactionAddressSection.tsx

@@ -44,7 +44,7 @@ export function SenderTransactionAddress({
 
 type RecipientTransactionAddressesProps = {
     recipients: {
-        amount?: number | null;
+        amount?: bigint | number | null;
         coinType?: string | null;
         address: string;
     }[];