show call transaction amount on table view and transaction details (M…

…ystenLabs#8194) - Show the amount for Call transaction - On the transaction table view only show the SUI coin - Since Epoch change transaction from `0x5` has a lot of `coinBalance` change events, paginate the data - Note using absolute amount since the amount from events could be negative. CC @mystie711 - For txn with multiple `coinType` or `address` do not show the total sent. <img width="592" alt="Screenshot 2023-02-09 at 8 22 36 AM" src="https://user-images.githubusercontent.com/8676844/217842339-e8a6f397-9dbb-46e7-b132-b6fdc0f1a762.png"> <img width="1300" alt="Screenshot 2023-02-09 at 9 35 11 AM" src="https://user-images.githubusercontent.com/8676844/217842510-e2c2587d-6203-4de5-9dd0-6147f395d4c4.png"> <img width="457" alt="Screenshot 2023-02-10 at 11 22 19 AM" src="https://user-images.githubusercontent.com/8676844/218142871-6c4ffa23-626b-4d17-a405-45121efbd251.png"> <img width="1496" alt="Screenshot 2023-02-10 at 11 23 14 AM" src="https://user-images.githubusercontent.com/8676844/218142962-5204ee29-fd48-4c6d-b63e-7aaa17b2e850.png">
Jsnpit · Feb 13, 2023 · 6cee008 · 6cee008
1 parent ebe6c39
commit 6cee008
Show file tree

Hide file tree

Showing 6 changed files with 169 additions and 81 deletions.
diff --git a/apps/explorer/src/components/pagination/Pagination.module.css b/apps/explorer/src/components/pagination/Pagination.module.css
@@ -76,7 +76,7 @@ button.gone {
 /* Desktop */
 
 .desktopfooter {
-    @apply hidden text-center sm:mt-2 sm:block sm:grid sm:grid-cols-12 sm:text-left;
+    @apply hidden text-center sm:mt-2 sm:block sm:grid-cols-12 sm:text-left;
 }
 
 .desktopfooter > div:first-child {

diff --git a/apps/explorer/src/components/transaction-card/TxCardUtils.tsx b/apps/explorer/src/components/transaction-card/TxCardUtils.tsx
@@ -54,10 +54,10 @@ export function SuiAmount({
 }: {
     amount: bigint | number | string | undefined | null;
 }) {
-    const [formattedAmount] = useFormatCoin(amount, SUI_TYPE_ARG);
+    const [formattedAmount, coinType] = useFormatCoin(amount, SUI_TYPE_ARG);
 
     if (amount) {
-        const SuiSuffix = <abbr className={styles.suisuffix}>SUI</abbr>;
+        const SuiSuffix = <abbr className={styles.suisuffix}>{coinType}</abbr>;
 
         return (
             <section>
@@ -201,14 +201,22 @@ export const getDataOnTxDigests = (
                         getTransferObjectTransaction(txn)?.recipient ||
                         getTransferSuiTransaction(txn)?.recipient;
 
-                    const txnTransfer = getAmount(txn, txEff.effects)?.[0];
+                    const transfer = getAmount({
+                        txnData: txEff,
+                        suiCoinOnly: true,
+                    })[0];
+
+                    // use only absolute value of sui amount
+                    const suiAmount = transfer?.amount
+                        ? Math.abs(transfer.amount)
+                        : null;
 
                     return {
                         txId: digest,
                         status: getExecutionStatusType(txEff)!,
                         txGas: getTotalGasUsed(txEff),
-                        suiAmount: txnTransfer?.amount || null,
-                        coinType: txnTransfer?.coinType || null,
+                        suiAmount,
+                        coinType: transfer?.coinType || null,
                         kind: txKind,
                         From: res.data.sender,
                         timestamp_ms: txEff.timestamp_ms,

diff --git a/apps/explorer/src/pages/transaction-result/TransactionView.tsx b/apps/explorer/src/pages/transaction-result/TransactionView.tsx
@@ -17,7 +17,7 @@ import {
     type SuiTransactionResponse,
 } from '@mysten/sui.js';
 import clsx from 'clsx';
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 
 import { ErrorBoundary } from '../../components/error-boundary/ErrorBoundary';
 import {
@@ -26,6 +26,8 @@ import {
 } from '../../components/events/eventDisplay';
 import Longtext from '../../components/longtext/Longtext';
 import ModulesWrapper from '../../components/module/ModulesWrapper';
+// TODO: (Jibz) Create a new pagination component
+import Pagination from '../../components/pagination/Pagination';
 import {
     type LinkObj,
     TxAddresses,
@@ -54,6 +56,8 @@ import { Tooltip } from '~/ui/Tooltip';
 import { ReactComponent as ChevronDownIcon } from '~/ui/icons/chevron_down.svg';
 import { LinkWithQuery } from '~/ui/utils/LinkWithQuery';
 
+const MAX_RECIPIENTS_PER_PAGE = 10;
+
 function generateMutatedCreated(tx: SuiTransactionResponse) {
     return [
         ...(tx.effects.mutated?.length
@@ -290,33 +294,42 @@ function TransactionView({
 }: {
     transaction: SuiTransactionResponse;
 }) {
-    const txdetails = getTransactions(transaction.certificate)[0];
-    const txKindName = getTransactionKindName(txdetails);
+    const txnDetails = getTransactions(transaction.certificate)[0];
+    const txKindName = getTransactionKindName(txnDetails);
     const sender = getTransactionSender(transaction.certificate);
     const gasUsed = transaction?.effects.gasUsed;
 
     const [gasFeesExpanded, setGasFeesExpanded] = useState(false);
 
-    const txnTransfer = getAmount(txdetails, transaction?.effects);
-    const sendReceiveRecipients = txnTransfer?.map((item) => ({
-        address: item.recipientAddress,
-        ...(item?.amount
-            ? {
-                  coin: {
-                      amount: item.amount,
-                      coinType: item?.coinType || null,
-                  },
-              }
-            : {}),
-    }));
+    const [recipientsPageNumber, setRecipientsPageNumber] = useState(1);
 
-    const [formattedAmount, symbol] = useFormatCoin(
-        txnTransfer?.[0].amount,
-        txnTransfer?.[0].coinType
+    const coinTransfer = useMemo(
+        () =>
+            getAmount({
+                txnData: transaction,
+            }),
+        [transaction]
     );
 
-    const txKindData = formatByTransactionKind(txKindName, txdetails, sender);
+    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 [formattedAmount, symbol] = useFormatCoin(
+        transferAmount,
+        coinTransfer?.[0]?.coinType
+    );
 
+    const txKindData = formatByTransactionKind(txKindName, txnDetails, sender);
     const txEventData = transaction.effects.events?.map(eventToDisplay);
 
     let eventTitles: [string, string][] = [];
@@ -477,7 +490,8 @@ function TransactionView({
                                 ])}
                                 data-testid="transaction-timestamp"
                             >
-                                {txnTransfer?.[0].amount ? (
+                                {coinTransfer.length === 1 &&
+                                formattedAmount ? (
                                     <section className="mb-10">
                                         <StatAmount
                                             amount={formattedAmount}
@@ -494,11 +508,27 @@ function TransactionView({
                                         </div>
                                     )
                                 )}
+
                                 <SenderRecipient
                                     sender={sender}
-                                    transferCoin={txnTransfer?.[0].isCoin}
-                                    recipients={sendReceiveRecipients}
+                                    transferCoin={!!coinTransfer}
+                                    recipients={recipients}
                                 />
+                                <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

diff --git a/apps/explorer/src/ui/SenderRecipient.tsx b/apps/explorer/src/ui/SenderRecipient.tsx
@@ -8,10 +8,8 @@ import { SenderRecipientAddress } from '~/ui/SenderRecipientAddress';
 
 type Recipient = {
     address: string;
-    coin?: {
-        amount: number | string | bigint;
-        coinType?: string | null;
-    };
+    amount?: number | null;
+    coinType?: string | null;
 };
 
 export interface SenderRecipientProps {
@@ -67,27 +65,27 @@ export function SenderRecipient({
                         </div>
 
                         <div className="flex flex-col gap-2">
-                            {multipleRecipientsList.map((recipient) => (
-                                <div
-                                    className="flex flex-col gap-0.5"
-                                    key={recipient.address}
-                                >
-                                    <SenderRecipientAddress
-                                        address={recipient?.address}
-                                    />
-                                    {recipient?.coin && (
-                                        <div className="ml-6">
-                                            <CoinBalance
-                                                amount={recipient.coin.amount}
-                                                coinType={
-                                                    recipient.coin?.coinType
-                                                }
-                                                format={CoinFormat.FULL}
-                                            />
-                                        </div>
-                                    )}
-                                </div>
-                            ))}
+                            {multipleRecipientsList.map(
+                                ({ address, amount, coinType }) => (
+                                    <div
+                                        className="flex flex-col gap-0.5"
+                                        key={address}
+                                    >
+                                        <SenderRecipientAddress
+                                            address={address}
+                                        />
+                                        {amount ? (
+                                            <div className="ml-6">
+                                                <CoinBalance
+                                                    amount={amount}
+                                                    coinType={coinType}
+                                                    format={CoinFormat.FULL}
+                                                />
+                                            </div>
+                                        ) : null}
+                                    </div>
+                                )
+                            )}
                         </div>
                     </div>
                 ) : null}

diff --git a/apps/explorer/src/ui/stories/SenderRecipient.stories.tsx b/apps/explorer/src/ui/stories/SenderRecipient.stories.tsx
@@ -13,30 +13,26 @@ const data = {
     recipients: [
         {
             address: '0x955d8ddc4a17670bda6b949cbdbc8f5aac820cc7',
-            coin: {
-                amount: 1000,
-                symbol: '0x2::sui::SUI',
-            },
+
+            amount: 1000,
+            coinType: '0x2::sui::SUI',
         },
         {
             address: '0x9798852b55fcbf352052c9414920ebf7811ce05e',
-            coin: {
-                amount: 120_030,
-                symbol: 'COIN',
-            },
+
+            amount: 120_030,
+            coinType: 'COIN',
         },
         {
             address: '0xc4173a804406a365e69dfb297d4eaaf002546ebd',
-            coin: {
-                amount: 10_050_504,
-                symbol: 'MIST',
-            },
+
+            amount: 10_050_504,
+            coinType: 'MIST',
         },
         {
             address: '0xca1e11744de126dd1b116c6a16df4715caea56a3',
-            coin: {
-                amount: '1000002',
-            },
+
+            amount: 1000002,
         },
         {
             address: '0x49e095bc33fda565c07937478f201f4344941f03',