refactor(dashboard): improve tx summary (#94)

# Description of change

- removes the redundant Extended Transaction on favor of transaction
summary which holds the same data
- refactors Transaction Details layout


## Links to any relevant issues

port of the iotaledger/iota#11187

Author: brancoder

apps/core/src/hooks/useGetTransaction.ts

@@ -5,7 +5,6 @@
 import { useIotaClient } from '@iota/dapp-kit';
 import { type IotaTransactionBlockResponse } from '@iota/iota-sdk/client';
 import { type UseQueryResult, useQuery } from '@tanstack/react-query';
-import { useTransactionSummary } from './useTransactionSummary';
 
 export function useGetTransaction(
     transactionId: string,
@@ -30,22 +29,3 @@ export function useGetTransaction(
         initialData: queryOptions?.initialData,
     });
 }
-
-export function useGetTransactionWithSummary(
-    transactionDigest: string,
-    currentAddress: string,
-    initialData?: IotaTransactionBlockResponse,
-    recognizedPackagesList: string[] = [],
-) {
-    const txResponse = useGetTransaction(transactionDigest, { retry: 8, initialData });
-
-    const { data: transaction } = txResponse;
-
-    const summary = useTransactionSummary({
-        transaction,
-        currentAddress,
-        recognizedPackagesList,
-    });
-
-    return { summary, ...txResponse };
-}

apps/core/src/interfaces/transactions.interfaces.ts

@@ -1,15 +1,6 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { IotaTransactionBlockResponse } from '@iota/iota-sdk/client';
-
-export interface ExtendedTransaction {
-    action: TransactionAction;
-    timestamp?: number;
-    state: TransactionState;
-    raw: IotaTransactionBlockResponse;
-}
-
 export enum TransactionAction {
     Send = 'Send',
     Receive = 'Receive',
@@ -22,9 +13,3 @@ export enum TransactionAction {
     Migration = 'Migration',
     PersonalMessage = 'Personal Message',
 }
-
-export enum TransactionState {
-    Successful = 'successful',
-    Failed = 'failed',
-    Pending = 'pending',
-}

apps/wallet-dashboard/components/dialogs/TransactionDialog.tsx

@@ -19,7 +19,7 @@ import {
 import { DetailsView, SendView, KioskDetailsView } from './views';
 import { getNetwork, IotaObjectData, IotaTransactionBlockResponse } from '@iota/iota-sdk/client';
 import { AssetsDialogView } from './constants';
-import { TransactionDetailsView } from '../send-token';
+import { TransactionDetailsLayout } from '../transaction';
 import { DialogLayout } from '../layout';
 import { ampli } from '@/lib/utils/analytics';
 import { shouldResolveInputAsName } from '@iota/core/utils/validation/names';
@@ -161,7 +161,7 @@ export function AssetDialog({ onClose, asset, refetchAssets }: AssetsDialogProps
                     )}
 
                     {view === AssetsDialogView.TransactionDetails && !!digest ? (
-                        <TransactionDetailsView digest={digest} onClose={onOpenChange} />
+                        <TransactionDetailsLayout digest={digest} onClose={onOpenChange} />
                     ) : null}
                 </>
             </DialogLayout>

apps/wallet-dashboard/components/dialogs/assets/AssetDialog.tsx

@@ -7,7 +7,8 @@ import { IotaObjectData } from '@iota/iota-sdk/client';
 import { useMigrationTransaction } from '@/hooks/useMigrationTransaction';
 import { Dialog } from '@iota/apps-ui-kit';
 import { GAS_BALANCE_TOO_LOW_ID, GAS_BUDGET_ERROR_MESSAGES, toast } from '@iota/core';
-import { TransactionDialogView } from '../TransactionDialog';
+import { TransactionDetailsLayout } from '../transaction/TransactionDetailsLayout';
+import { DialogLayout } from '../layout';
 import { MigrationDialogView } from './enums';
 import { ConfirmMigrationView } from './views';
 import { ampli } from '@/lib/utils/analytics';
@@ -114,7 +115,9 @@ export function MigrationDialog({
                 />
             )}
             {view === MigrationDialogView.TransactionDetails && (
-                <TransactionDialogView txDigest={txDigest} onClose={handleClose} />
+                <DialogLayout>
+                    <TransactionDetailsLayout digest={txDigest} onClose={handleClose} />
+                </DialogLayout>
             )}
         </Dialog>
     );

apps/wallet-dashboard/components/dialogs/migration/MigrationDialog.tsx

@@ -2,7 +2,8 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { useMemo, useState } from 'react';
-import { EnterValuesFormView, ReviewValuesFormView, TransactionDetailsView } from './views';
+import { EnterValuesFormView, ReviewValuesFormView } from './views';
+import { TransactionDetailsLayout } from '../transaction';
 import { CoinBalance, getNetwork } from '@iota/iota-sdk/client';
 import {
     useGetAllCoins,
@@ -176,7 +177,7 @@ function SendTokenDialogBody({
             </FormikProvider>
 
             {step === FormStep.TransactionDetails && data?.digest && (
-                <TransactionDetailsView
+                <TransactionDetailsLayout
                     digest={data.digest}
                     onClose={() => {
                         setOpen(false);

apps/wallet-dashboard/components/dialogs/send-token/SendTokenDialog.tsx

@@ -3,4 +3,3 @@
 
 export * from './EnterValuesFormView';
 export * from './ReviewValuesFormView';
-export * from './TransactionDetailsView';

apps/wallet-dashboard/components/dialogs/send-token/views/TransactionDetailsView.tsx

@@ -17,7 +17,8 @@ import { useCurrentAccount, useIotaClientQuery } from '@iota/dapp-kit';
 import { IOTA_TYPE_ARG, parseAmount } from '@iota/iota-sdk/utils';
 import { Dialog } from '@iota/apps-ui-kit';
 import { DetailsView } from './views';
-import { TransactionDialogView } from '../TransactionDialog';
+import { TransactionDetailsLayout } from '../transaction/TransactionDetailsLayout';
+import { DialogLayout } from '../layout';
 import { StakeDialogView } from './enums/view.enums';
 import { ampli } from '@/lib/utils/analytics';
 
@@ -179,7 +180,9 @@ export function StakeDialog({
                         />
                     )}
                     {view === StakeDialogView.TransactionDetails && (
-                        <TransactionDialogView txDigest={txDigest} onClose={handleClose} />
+                        <DialogLayout>
+                            <TransactionDetailsLayout digest={txDigest} onClose={handleClose} />
+                        </DialogLayout>
                     )}
                 </>
             </FormikProvider>

apps/wallet-dashboard/components/dialogs/send-token/views/index.ts

@@ -2,31 +2,43 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { ExplorerLink } from '@/components';
-import { Header, LoadingIndicator } from '@iota/apps-ui-kit';
+import { Header, LoadingIndicator, InfoBox, InfoBoxType, InfoBoxStyle } from '@iota/apps-ui-kit';
+import { Warning } from '@iota/apps-ui-icons';
 import {
     useTransactionSummary,
+    useGetTransaction,
     ViewTxnOnExplorerButton,
     ExplorerLinkType,
     TransactionReceipt,
     useRecognizedPackages,
-    ExtendedTransaction,
     OutlinedCopyButton,
 } from '@iota/core';
 import { useCurrentAccount } from '@iota/dapp-kit';
+import { IotaTransactionBlockResponse } from '@iota/iota-sdk/client';
 import { DialogLayoutBody, DialogLayoutFooter } from '../layout';
 import { trackElementCopied } from '@/lib/utils';
 import { useCallback } from 'react';
 
-interface TransactionDialogDetailsProps {
-    transaction: ExtendedTransaction;
+interface TransactionDetailsLayoutProps {
     onClose: () => void;
+    transaction?: IotaTransactionBlockResponse;
+    digest?: string | null;
 }
-export function TransactionDetailsLayout({ transaction, onClose }: TransactionDialogDetailsProps) {
-    const address = useCurrentAccount()?.address ?? '';
 
+export function TransactionDetailsLayout({
+    onClose,
+    transaction: txProp,
+    digest,
+}: TransactionDetailsLayoutProps) {
+    const address = useCurrentAccount()?.address ?? '';
     const recognizedPackagesList = useRecognizedPackages();
+
+    const { data: fetchedTransaction, isError, error } = useGetTransaction(digest ?? '');
+
+    const transaction = txProp ?? fetchedTransaction;
+
     const summary = useTransactionSummary({
-        transaction: transaction.raw,
+        transaction,
         currentAddress: address,
         recognizedPackagesList,
     });
@@ -35,14 +47,34 @@ export function TransactionDetailsLayout({ transaction, onClose }: TransactionDi
         trackElementCopied('transaction-digest');
     }, []);
 
-    if (!summary) return <LoadingIndicator />;
+    if (!txProp && isError) {
+        return (
+            <InfoBox
+                type={InfoBoxType.Error}
+                title="Error getting transaction info"
+                supportingText={
+                    error?.message ?? 'An error occurred when getting the transaction info'
+                }
+                icon={<Warning />}
+                style={InfoBoxStyle.Default}
+            />
+        );
+    }
+
+    if (!transaction || !summary) {
+        return (
+            <div className="flex h-full w-full justify-center">
+                <LoadingIndicator />
+            </div>
+        );
+    }
 
     return (
         <>
             <Header title="Transaction" onClose={onClose} />
             <DialogLayoutBody>
                 <TransactionReceipt
-                    txn={transaction.raw}
+                    txn={transaction}
                     activeAddress={address}
                     summary={summary}
                     renderExplorerLink={ExplorerLink}
@@ -53,14 +85,14 @@ export function TransactionDetailsLayout({ transaction, onClose }: TransactionDi
                     <div className="flex w-full [&_a]:w-full">
                         <ExplorerLink
                             type={ExplorerLinkType.Transaction}
-                            transactionID={transaction.raw.digest}
+                            transactionID={transaction.digest}
                         >
-                            <ViewTxnOnExplorerButton digest={transaction.raw.digest} />
+                            <ViewTxnOnExplorerButton digest={transaction.digest} />
                         </ExplorerLink>
                     </div>
                     <div className="self-center">
                         <OutlinedCopyButton
-                            textToCopy={transaction.raw.digest ?? ''}
+                            textToCopy={transaction.digest ?? ''}
                             onCopySuccess={onCopySuccess}
                             successMessage="Transaction digest copied to clipboard"
                         />