Set default coinType for PaySui txn sui (MystenLabs#8283)

- Set default coinType for PaySui txn SUI. - Show the amount for fail txn. - Applied the same to the wallet - show amount for failed txns - https://explorer-git-gj-explorer-fix-failed-txn-amount-1-mysten-labs.vercel.app/transaction/G4dWuiojLwuZ78bEtQUzwKu4B5JnrXD91AeyaMFLubYH <img width="375" alt="Screenshot 2023-02-17 at 2 24 22 PM" src="https://user-images.githubusercontent.com/8676844/219767870-e6d210d1-2113-45d4-b2e0-12e18c8ba137.png">
thedave12345 · Feb 17, 2023 · 5d28973 · 5d28973
1 parent 024711e
commit 5d28973
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 56 deletions.
diff --git a/apps/explorer/src/utils/getAmount.ts b/apps/explorer/src/utils/getAmount.ts
@@ -20,9 +20,11 @@ import type {
 } from '@mysten/sui.js';
 
 const getCoinType = (
-    txEffects: TransactionEffects,
+    txEffects: TransactionEffects | null,
     address: string
 ): string | null => {
+    if (!txEffects) return null;
+
     const events = txEffects?.events || [];
     const coinType = events
         ?.map((event: SuiEvent) => {
@@ -72,25 +74,22 @@ export function getTransfersAmount(
             : null;
     }
 
-    const paySuiData =
-        getPaySuiTransaction(txnData) ?? getPayTransaction(txnData);
+    const payData = getPaySuiTransaction(txnData) ?? getPayTransaction(txnData);
 
-    const amountByRecipient = paySuiData?.recipients.reduce(
-        (acc, value, index) => ({
+    const amountByRecipient = payData?.recipients.reduce(
+        (acc, recipient, index) => ({
             ...acc,
-            [value]: {
+            [recipient]: {
                 amount:
-                    paySuiData.amounts[index] +
-                    (value in acc ? acc[value].amount : 0),
-                coinType: txnEffect
-                    ? getCoinType(
-                          txnEffect,
-                          paySuiData.recipients[index] ||
-                              paySuiData.recipients[0]
-                      )
-                    : null,
-                address:
-                    paySuiData.recipients[index] || paySuiData.recipients[0],
+                    payData.amounts[index] +
+                    (recipient in acc ? acc[recipient].amount : 0),
+
+                // for PaySuiTransaction the coinType is SUI
+                coinType:
+                    txKindName === 'PaySui'
+                        ? SUI_TYPE_ARG
+                        : getCoinType(txnEffect || null, recipient),
+                address: recipient,
             },
         }),
         {} as {

diff --git a/apps/wallet/src/ui/app/components/transactions-card/index.tsx b/apps/wallet/src/ui/app/components/transactions-card/index.tsx
@@ -73,14 +73,12 @@ export function TransactionCard({
     const transferAmount = useMemo(() => {
         // Find SUI transfer amount
         const amountTransfersSui = transfer.find(
-            ({ receiverAddress, coinType }) =>
-                receiverAddress === address && coinType === SUI_TYPE_ARG
+            ({ coinType }) => coinType === SUI_TYPE_ARG
         );
 
         // Find non-SUI transfer amount
         const amountTransfersNonSui = transfer.find(
-            ({ receiverAddress, coinType }) =>
-                receiverAddress === address && coinType !== SUI_TYPE_ARG
+            ({ coinType }) => coinType !== SUI_TYPE_ARG
         );
 
         return {
@@ -93,7 +91,7 @@ export function TransactionCard({
                 amountTransfersNonSui?.coinType ||
                 null,
         };
-    }, [address, transfer]);
+    }, [transfer]);
 
     const recipientAddress = useGetTxnRecipientAddress({ txn, address });
 
@@ -144,6 +142,14 @@ export function TransactionCard({
         moveCallLabel === 'Staked' ||
         moveCallLabel === 'Unstaked';
 
+    const transferAmountComponent = transferAmount.coinType &&
+        transferAmount.amount && (
+            <CoinBalance
+                amount={Math.abs(transferAmount.amount)}
+                coinType={transferAmount.coinType}
+            />
+        );
+
     return (
         <Link
             to={`/receipt?${new URLSearchParams({
@@ -160,20 +166,23 @@ export function TransactionCard({
                 </div>
                 <div className="flex flex-col w-full gap-1.5">
                     {error ? (
-                        <div className="flex flex-col w-full gap-1.5">
-                            <Text color="gray-90" weight="medium">
-                                Transaction Failed
-                            </Text>
-
-                            <div className="flex break-all">
-                                <Text
-                                    variant="subtitle"
-                                    weight="medium"
-                                    color="issue-dark"
-                                >
-                                    {error}
+                        <div className="flex w-full justify-between">
+                            <div className="flex flex-col w-full gap-1.5">
+                                <Text color="gray-90" weight="medium">
+                                    Transaction Failed
                                 </Text>
+
+                                <div className="flex break-all">
+                                    <Text
+                                        variant="subtitle"
+                                        weight="medium"
+                                        color="issue-dark"
+                                    >
+                                        {error}
+                                    </Text>
+                                </div>
                             </div>
+                            {transferAmountComponent}
                         </div>
                     ) : (
                         <div className="flex w-full justify-between flex-col ">
@@ -192,15 +201,8 @@ export function TransactionCard({
                                         </Text>
                                     )}
                                 </div>
-                                {transferAmount.coinType &&
-                                    transferAmount.amount && (
-                                        <CoinBalance
-                                            amount={Math.abs(
-                                                transferAmount.amount
-                                            )}
-                                            coinType={transferAmount.coinType}
-                                        />
-                                    )}
+
+                                {transferAmountComponent}
                             </div>
                             <div className="flex flex-col w-full gap-1.5">
                                 <TxnTypeLabel

diff --git a/apps/wallet/src/ui/app/helpers/getAmount.ts b/apps/wallet/src/ui/app/helpers/getAmount.ts
@@ -7,6 +7,7 @@ import {
     getTransferSuiTransaction,
     getTransferObjectTransaction,
     getTransactionKindName,
+    SUI_TYPE_ARG,
 } from '@mysten/sui.js';
 
 import type {
@@ -71,23 +72,19 @@ export function getAmount(
         getPaySuiTransaction(txnData) ?? getPayTransaction(txnData);
 
     const amountByRecipient = paySuiData?.recipients.reduce(
-        (acc, value, index) => {
+        (acc, recipient, index) => {
+            const coinType =
+                txKindName === 'PaySui'
+                    ? SUI_TYPE_ARG
+                    : getCoinType(txnEffect, recipient);
             return {
                 ...acc,
-                [value]: {
+                [recipient]: {
                     amount:
                         paySuiData.amounts[index] +
-                        (value in acc ? acc[value].amount : 0),
-                    coinType: txnEffect
-                        ? getCoinType(
-                              txnEffect,
-                              paySuiData.recipients[index] ||
-                                  paySuiData.recipients[0]
-                          )
-                        : null,
-                    recipientAddress:
-                        paySuiData.recipients[index] ||
-                        paySuiData.recipients[0],
+                        (recipient in acc ? acc[recipient].amount : 0),
+                    coinType,
+                    recipientAddress: recipient,
                 },
             };
         },