[Explorer] Adds Amount Field to TransferSui Page (MystenLabs#3949)

* TransferSui Details becomes Details * singleitems are block in small screen and grid in Desktop * sets up rudimentary amount display * correctly places Amount * sender can never be null * stylize the amount * switches to BN * improves presentation of Big Numbers * when amount is null, present nothing * adds gap to left of SUI * 15px gap between sender and recipient * date info below sender & recipient on mobile * account for padding * changes to tests
ihabhamed · Aug 16, 2022 · 57b7841 · 57b7841
1 parent acf1927
commit 57b7841
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 15 deletions.
diff --git a/explorer/client/src/__tests__/unit.test.ts b/explorer/client/src/__tests__/unit.test.ts
@@ -1,6 +1,9 @@
 // Copyright (c) 2022, Mysten Labs, Inc.
 // SPDX-License-Identifier: Apache-2.0
 
+import BN from 'bn.js';
+
+import { presentBN } from '../utils/stringUtils';
 import { timeAgo } from '../utils/timeUtils';
 
 const timeNow = 1735693990000;
@@ -23,4 +26,19 @@ describe('Unit Tests', () => {
             expect(timeAgo(1735693989100, timeNow)).toEqual('< 1 sec');
         });
     });
+
+    describe('presentBN', () => {
+        it.each([
+            [1, '1'],
+            [10, '10'],
+            [100, '100'],
+            [1000, '1,000'],
+            [10000, '10,000'],
+            [100000, '100,000'],
+            [1000000, '1,000,000'],
+            [10000000, '10,000,000'],
+        ])('handles increasing numbers', (input, output) => {
+            expect(presentBN(new BN(input, 10))).toEqual(output);
+        });
+    });
 });
diff --git a/explorer/client/src/pages/transaction-result/SendReceiveView.module.css b/explorer/client/src/pages/transaction-result/SendReceiveView.module.css
@@ -9,7 +9,7 @@
 }
 
 .label span {
-    @apply text-sui-grey-80 font-[500] text-[13px] mb-2;
+    @apply block sm:inline text-sui-grey-80 font-[500] text-[13px] mb-2;
 }
 
 .recipient.txaddresssender a,
@@ -79,7 +79,7 @@
 }
 
 .txrecipents {
-    @apply break-all relative;
+    @apply break-all relative mt-0 !important;
 }
 
 .txrecipents li::before {

diff --git a/explorer/client/src/pages/transaction-result/TransactionResult.module.css b/explorer/client/src/pages/transaction-result/TransactionResult.module.css
@@ -107,7 +107,7 @@
 }
 
 .singleitem {
-    @apply block !important;
+    @apply block sm:grid !important;
 }
 
 .mono {
@@ -125,3 +125,15 @@
 
     border-bottom: none;
 }
+
+.amountbox > :first-child {
+    @apply font-semibold text-sui-grey-100 text-[18px] h-[18px] leading-[100%] mb-[15px];
+}
+
+.amountbox > :nth-child(2) {
+    @apply font-bold text-sui-grey-90 text-[24px] h-[19px] leading-[80%] mt-0 mb-[40px];
+}
+
+.amountbox > :nth-child(2) sup {
+    @apply font-medium text-sui-grey-80 text-[13px] h-[13px] leading-[100%] ml-[4px];
+}
diff --git a/explorer/client/src/pages/transaction-result/TransactionView.tsx b/explorer/client/src/pages/transaction-result/TransactionView.tsx
@@ -11,6 +11,7 @@ import {
     getMovePackageContent,
     getObjectId,
     getTransferSuiTransaction,
+    getTransferSuiAmount,
 } from '@mysten/sui.js';
 import cl from 'classnames';
 
@@ -22,6 +23,7 @@ import Longtext from '../../components/longtext/Longtext';
 import ModulesWrapper from '../../components/module/ModulesWrapper';
 import { type Link, TxAddresses } from '../../components/table/TableCard';
 import Tabs from '../../components/tabs/Tabs';
+import { presentBN } from '../../utils/stringUtils';
 import SendReceiveView from './SendReceiveView';
 import TxLinks from './TxLinks';
 import TxResultHeader from './TxResultHeader';
@@ -219,13 +221,14 @@ function ItemView({ data }: { data: TxItemView }) {
 
 function TransactionView({ txdata }: { txdata: DataType }) {
     const txdetails = getTransactions(txdata)[0];
+    const amount = getTransferSuiAmount(txdetails);
     const txKindName = getTransactionKindName(txdetails);
     const sender = getTransactionSender(txdata);
     const recipient =
         getTransferObjectTransaction(txdetails) ||
         getTransferSuiTransaction(txdetails);
     const txKindData = formatByTransactionKind(txKindName, txdetails, sender);
-    const TabName = `${txKindName} Details`;
+    const TabName = `Details`;
 
     const txHeaderData = {
         txId: txdata.txId,
@@ -367,18 +370,26 @@ function TransactionView({ txdata }: { txdata: DataType }) {
                                 <ItemView data={typearguments} />
                             </section>
                         )}
-                        {sender && (
-                            <section
-                                className={cl([
-                                    styles.txcomponent,
-                                    styles.txsender,
-                                ])}
-                            >
-                                <div className={styles.txaddress}>
-                                    <SendReceiveView data={sendreceive} />
+                        <section
+                            className={cl([
+                                styles.txcomponent,
+                                styles.txsender,
+                            ])}
+                        >
+                            {amount !== null && (
+                                <div className={styles.amountbox}>
+                                    <div>Amount</div>
+                                    <div>
+                                        {presentBN(amount)}
+                                        <sup>SUI</sup>
+                                    </div>
                                 </div>
-                            </section>
-                        )}
+                            )}
+                            <div className={styles.txaddress}>
+                                <SendReceiveView data={sendreceive} />
+                            </div>
+                        </section>
+
                         <section
                             className={cl([
                                 styles.txcomponent,

diff --git a/explorer/client/src/utils/stringUtils.ts b/explorer/client/src/utils/stringUtils.ts
@@ -95,6 +95,9 @@ export async function genFileTypeMsg(
 export const alttextgen = (value: number | string | boolean | BN): string =>
     truncate(String(value), 19);
 
+export const presentBN = (amount: BN) =>
+    amount.toString().replace(/(\d)(?=(\d{3})+$)/g, '$1,');
+
 /* Currently unused but potentially useful:
  *
  * export const isValidHttpUrl = (url: string) => {

diff --git a/sdk/typescript/src/types/transactions.ts b/sdk/typescript/src/types/transactions.ts
@@ -4,6 +4,8 @@
 import { ObjectOwner, SuiAddress, TransactionDigest } from './common';
 import { SuiMovePackage, SuiObject, SuiObjectRef } from './objects';
 
+import BN from 'bn.js';
+
 export type TransferObject = {
   recipient: SuiAddress;
   objectRef: SuiObjectRef;
@@ -254,6 +256,12 @@ export function getTransactions(
   return data.data.transactions;
 }
 
+export function getTransferSuiAmount(
+  data: SuiTransactionKind
+): BN | null {
+  return ("TransferSui" in data && data.TransferSui.amount) ? new BN.BN(data.TransferSui.amount, 10) : null; 
+}
+
 export function getTransactionKindName(
   data: SuiTransactionKind
 ): TransactionKindName {