diff --git a/apps/core/src/components/buttons/ViewTxnOnExplorerButton.tsx b/apps/core/src/components/buttons/ViewTxnOnExplorerButton.tsx
new file mode 100644
index 00000000000..247241de188
--- /dev/null
+++ b/apps/core/src/components/buttons/ViewTxnOnExplorerButton.tsx
@@ -0,0 +1,23 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import React, { JSX } from 'react';
+import { Button, ButtonType, LoadingIndicator } from '@iota/apps-ui-kit';
+import { ArrowTopRight } from '@iota/ui-icons';
+
+interface ViewTxnOnExplorerButtonProps {
+    digest?: string;
+}
+
+export function ViewTxnOnExplorerButton({ digest }: ViewTxnOnExplorerButtonProps): JSX.Element {
+    return (
+        <Button
+            type={ButtonType.Outlined}
+            text="View on Explorer"
+            fullWidth
+            icon={digest ? <ArrowTopRight /> : <LoadingIndicator data-testid="loading-indicator" />}
+            iconAfterText
+            disabled={!digest}
+        />
+    );
+}
diff --git a/apps/core/src/components/buttons/index.ts b/apps/core/src/components/buttons/index.ts
new file mode 100644
index 00000000000..b7638e371ce
--- /dev/null
+++ b/apps/core/src/components/buttons/index.ts
@@ -0,0 +1,4 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './ViewTxnOnExplorerButton';
diff --git a/apps/wallet/src/ui/app/shared/transaction-summary/cards/BalanceChanges.tsx b/apps/core/src/components/cards/BalanceChanges.tsx
similarity index 86%
rename from apps/wallet/src/ui/app/shared/transaction-summary/cards/BalanceChanges.tsx
rename to apps/core/src/components/cards/BalanceChanges.tsx
index 09bd1d59890..efd3d36ec74 100644
--- a/apps/wallet/src/ui/app/shared/transaction-summary/cards/BalanceChanges.tsx
+++ b/apps/core/src/components/cards/BalanceChanges.tsx
@@ -2,22 +2,55 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import {
-    CoinItem,
-    getRecognizedUnRecognizedTokenChanges,
-    type BalanceChange,
-    type BalanceChangeSummary,
-} from '@iota/core';
-import { useMemo } from 'react';
+import React, { useMemo } from 'react';
 import { Divider, Header, KeyValueInfo, Panel } from '@iota/apps-ui-kit';
-import { ExplorerLink, ExplorerLinkType } from '_src/ui/app/components';
+import type { BalanceChangeSummary, RenderExplorerLink } from '../../types';
+import { ExplorerLinkType } from '../../enums';
 import { formatAddress } from '@iota/iota-sdk/utils';
+import { CoinItem } from '../coin';
 import { RecognizedBadge } from '@iota/ui-icons';
+import { getRecognizedUnRecognizedTokenChanges } from '../../utils';
+import { BalanceChange } from '../../interfaces';
 
 interface BalanceChangesProps {
+    renderExplorerLink: RenderExplorerLink;
     changes?: BalanceChangeSummary;
 }
 
+export function BalanceChanges({ changes, renderExplorerLink: ExplorerLink }: BalanceChangesProps) {
+    if (!changes) return null;
+
+    return (
+        <>
+            {Object.entries(changes).map(([owner, changes]) => {
+                return (
+                    <Panel key={owner} hasBorder>
+                        <div className="flex flex-col gap-y-sm overflow-hidden rounded-xl">
+                            <Header title="Balance Changes" />
+                            <BalanceChangeEntries changes={changes} />
+                            <div className="flex flex-col gap-y-sm px-md pb-md">
+                                <Divider />
+                                <KeyValueInfo
+                                    keyText="Owner"
+                                    value={
+                                        <ExplorerLink
+                                            type={ExplorerLinkType.Address}
+                                            address={owner}
+                                        >
+                                            {formatAddress(owner)}
+                                        </ExplorerLink>
+                                    }
+                                    fullwidth
+                                />
+                            </div>
+                        </div>
+                    </Panel>
+                );
+            })}
+        </>
+    );
+}
+
 function BalanceChangeEntry({ change }: { change: BalanceChange }) {
     const { amount, coinType, unRecognizedToken } = change;
     return (
@@ -54,37 +87,3 @@ function BalanceChangeEntries({ changes }: { changes: BalanceChange[] }) {
         </>
     );
 }
-
-export function BalanceChanges({ changes }: BalanceChangesProps) {
-    if (!changes) return null;
-
-    return (
-        <>
-            {Object.entries(changes).map(([owner, changes]) => {
-                return (
-                    <Panel key={owner} hasBorder>
-                        <div className="flex flex-col gap-y-sm overflow-hidden rounded-xl">
-                            <Header title="Balance Changes" />
-                            <BalanceChangeEntries changes={changes} />
-                            <div className="flex flex-col gap-y-sm px-md pb-md">
-                                <Divider />
-                                <KeyValueInfo
-                                    keyText="Owner"
-                                    value={
-                                        <ExplorerLink
-                                            type={ExplorerLinkType.Address}
-                                            address={owner}
-                                        >
-                                            {formatAddress(owner)}
-                                        </ExplorerLink>
-                                    }
-                                    fullwidth
-                                />
-                            </div>
-                        </div>
-                    </Panel>
-                );
-            })}
-        </>
-    );
-}
diff --git a/apps/wallet/src/ui/app/shared/transaction-summary/cards/objectSummary/ObjectChangeDisplay.tsx b/apps/core/src/components/cards/ObjectChangeDisplay.tsx
similarity index 59%
rename from apps/wallet/src/ui/app/shared/transaction-summary/cards/objectSummary/ObjectChangeDisplay.tsx
rename to apps/core/src/components/cards/ObjectChangeDisplay.tsx
index ce6bfd0acea..99d39a8f62d 100644
--- a/apps/wallet/src/ui/app/shared/transaction-summary/cards/objectSummary/ObjectChangeDisplay.tsx
+++ b/apps/core/src/components/cards/ObjectChangeDisplay.tsx
@@ -2,25 +2,28 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { ExplorerLink, ExplorerLinkType } from '_components';
-import { type IotaObjectChangeWithDisplay, ImageIcon } from '@iota/core';
-
+import React from 'react';
+import { type IotaObjectChangeWithDisplay, ExplorerLinkType, ImageIcon } from '../../';
 import { Card, CardAction, CardActionType, CardBody, CardImage, CardType } from '@iota/apps-ui-kit';
 import { ArrowTopRight } from '@iota/ui-icons';
+import { RenderExplorerLink } from '../../types';
 
-export function ObjectChangeDisplay({ change }: { change: IotaObjectChangeWithDisplay }) {
+interface ObjectChangeDisplayProps {
+    renderExplorerLink: RenderExplorerLink;
+    change?: IotaObjectChangeWithDisplay;
+}
+export function ObjectChangeDisplay({
+    change,
+    renderExplorerLink: ExplorerLink,
+}: ObjectChangeDisplayProps) {
     const display = change?.display?.data;
     const name = display?.name ?? '';
-    const objectId = 'objectId' in change && change?.objectId;
+    const objectId = change && 'objectId' in change && change?.objectId;
 
     if (!display) return null;
 
     return (
-        <ExplorerLink
-            className="text-hero-dark no-underline"
-            objectID={objectId?.toString() ?? ''}
-            type={ExplorerLinkType.Object}
-        >
+        <ExplorerLink objectID={objectId?.toString() ?? ''} type={ExplorerLinkType.Object}>
             <Card type={CardType.Default} isHoverable>
                 <CardImage>
                     <ImageIcon src={display.image_url ?? ''} label={name} fallback="NFT" />
diff --git a/apps/wallet/src/ui/app/shared/transaction-summary/cards/ObjectChanges.tsx b/apps/core/src/components/cards/ObjectChanges.tsx
similarity index 81%
rename from apps/wallet/src/ui/app/shared/transaction-summary/cards/ObjectChanges.tsx
rename to apps/core/src/components/cards/ObjectChanges.tsx
index 0f1e92eddfc..3435ddf6229 100644
--- a/apps/wallet/src/ui/app/shared/transaction-summary/cards/ObjectChanges.tsx
+++ b/apps/core/src/components/cards/ObjectChanges.tsx
@@ -1,19 +1,20 @@
 // Copyright (c) Mysten Labs, Inc.
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
-import { ExplorerLink, ExplorerLinkType } from '_components';
+import React, { useState } from 'react';
 import {
     getObjectChangeLabel,
     type ObjectChangesByOwner,
     type ObjectChangeSummary,
     type IotaObjectChangeTypes,
     type IotaObjectChangeWithDisplay,
-    Collapsible,
-} from '@iota/core';
+    ExplorerLinkType,
+} from '../../';
 import { formatAddress } from '@iota/iota-sdk/utils';
 import cx from 'clsx';
-import { ExpandableList } from '../../ExpandableList';
-import { ObjectChangeDisplay } from './objectSummary/ObjectChangeDisplay';
+import { ExpandableList } from '../lists';
+import { Collapsible } from '../collapsible';
+import { ObjectChangeDisplay } from './ObjectChangeDisplay';
 import {
     Badge,
     BadgeType,
@@ -23,16 +24,17 @@ import {
     Title,
     TitleSize,
 } from '@iota/apps-ui-kit';
-import { useState } from 'react';
 import { TriangleDown } from '@iota/ui-icons';
+import { RenderExplorerLink } from '../../types';
 
 interface ObjectDetailProps {
     change: IotaObjectChangeWithDisplay;
     ownerKey: string;
+    renderExplorerLink: RenderExplorerLink;
     display?: boolean;
 }
 
-export function ObjectDetail({ change, display }: ObjectDetailProps) {
+export function ObjectDetail({ change, renderExplorerLink: ExplorerLink }: ObjectDetailProps) {
     if (change.type === 'transferred' || change.type === 'published') {
         return null;
     }
@@ -127,9 +129,14 @@ export function ObjectDetail({ change, display }: ObjectDetailProps) {
 interface ObjectChangeEntryProps {
     type: IotaObjectChangeTypes;
     changes: ObjectChangesByOwner;
+    renderExplorerLink: RenderExplorerLink;
 }
 
-export function ObjectChangeEntry({ changes, type }: ObjectChangeEntryProps) {
+export function ObjectChangeEntry({
+    changes,
+    type,
+    renderExplorerLink: ExplorerLink,
+}: ObjectChangeEntryProps) {
     const [open, setOpen] = useState(new Set());
     return (
         <>
@@ -169,18 +176,14 @@ export function ObjectChangeEntry({ changes, type }: ObjectChangeEntryProps) {
                                     {!!changes.changesWithDisplay.length && (
                                         <div className="flex flex-1 flex-col gap-2 overflow-y-auto">
                                             <ExpandableList
+                                                initialShowAll={isOpen}
                                                 defaultItemsToShow={5}
-                                                items={
-                                                    isOpen
-                                                        ? changes.changesWithDisplay.map(
-                                                              (change) => (
-                                                                  <ObjectChangeDisplay
-                                                                      change={change}
-                                                                  />
-                                                              ),
-                                                          )
-                                                        : []
-                                                }
+                                                items={changes.changesWithDisplay.map((change) => (
+                                                    <ObjectChangeDisplay
+                                                        change={change}
+                                                        renderExplorerLink={ExplorerLink}
+                                                    />
+                                                ))}
                                             />
                                         </div>
                                     )}
@@ -188,16 +191,14 @@ export function ObjectChangeEntry({ changes, type }: ObjectChangeEntryProps) {
                                     <div className="flex w-full flex-col gap-2">
                                         <ExpandableList
                                             defaultItemsToShow={5}
-                                            items={
-                                                open
-                                                    ? changes.changes.map((change) => (
-                                                          <ObjectDetail
-                                                              ownerKey={owner}
-                                                              change={change}
-                                                          />
-                                                      ))
-                                                    : []
-                                            }
+                                            initialShowAll={isOpen}
+                                            items={changes.changes.map((change) => (
+                                                <ObjectDetail
+                                                    renderExplorerLink={ExplorerLink}
+                                                    ownerKey={owner}
+                                                    change={change}
+                                                />
+                                            ))}
                                         />
                                     </div>
                                 </>
@@ -227,9 +228,10 @@ export function ObjectChangeEntry({ changes, type }: ObjectChangeEntryProps) {
 
 interface ObjectChangesProps {
     changes?: ObjectChangeSummary | null;
+    renderExplorerLink: RenderExplorerLink;
 }
 
-export function ObjectChanges({ changes }: ObjectChangesProps) {
+export function ObjectChanges({ changes, renderExplorerLink }: ObjectChangesProps) {
     if (!changes) return null;
 
     return (
@@ -240,6 +242,7 @@ export function ObjectChanges({ changes }: ObjectChangesProps) {
                         key={type}
                         type={type as keyof ObjectChangeSummary}
                         changes={changes}
+                        renderExplorerLink={renderExplorerLink}
                     />
                 );
             })}
diff --git a/apps/core/src/components/cards/index.ts b/apps/core/src/components/cards/index.ts
new file mode 100644
index 00000000000..85a5e1abd50
--- /dev/null
+++ b/apps/core/src/components/cards/index.ts
@@ -0,0 +1,5 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './BalanceChanges';
+export * from './ObjectChanges';
diff --git a/apps/core/src/components/collapsible/Collapsible.tsx b/apps/core/src/components/collapsible/Collapsible.tsx
index c44607bc686..7e73fdfd2bf 100644
--- a/apps/core/src/components/collapsible/Collapsible.tsx
+++ b/apps/core/src/components/collapsible/Collapsible.tsx
@@ -2,13 +2,12 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
+import React, { useState, type ReactNode } from 'react';
 import { Accordion, AccordionContent, AccordionHeader, Title, TitleSize } from '@iota/apps-ui-kit';
-import { useState, type ReactNode } from 'react';
 
-interface CollapsibleProps {
+interface CollapsibleProps extends React.PropsWithChildren {
     title?: string;
     defaultOpen?: boolean;
-    children: ReactNode | ReactNode[];
     isOpen?: boolean;
     onOpenChange?: (isOpen: boolean) => void;
     titleSize?: TitleSize;
diff --git a/apps/wallet/src/ui/app/pages/approval-request/transaction-request/GasFees.tsx b/apps/core/src/components/gas/GasFees.tsx
similarity index 76%
rename from apps/wallet/src/ui/app/pages/approval-request/transaction-request/GasFees.tsx
rename to apps/core/src/components/gas/GasFees.tsx
index 31351c29c2e..19d4fad5c0d 100644
--- a/apps/wallet/src/ui/app/pages/approval-request/transaction-request/GasFees.tsx
+++ b/apps/core/src/components/gas/GasFees.tsx
@@ -2,11 +2,13 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
+import React from 'react';
 import { TitleSize, Badge, BadgeType, Title, Panel } from '@iota/apps-ui-kit';
-import { GasSummary } from '_src/ui/app/shared/transaction-summary/cards/GasSummary';
-import { type GasSummaryType, Collapsible } from '@iota/core';
+import { Collapsible, GasSummary, type RenderExplorerLink, type GasSummaryType } from '../../';
 
 interface GasFeesProps {
+    activeAddress: string | null | undefined;
+    renderExplorerLink: RenderExplorerLink;
     sender?: string;
     gasSummary?: GasSummaryType;
     isEstimate?: boolean;
@@ -15,7 +17,15 @@ interface GasFeesProps {
 }
 const DEFAULT_TITLE = 'Gas Fees';
 
-export function GasFees({ sender, gasSummary, isEstimate, isPending, isError }: GasFeesProps) {
+export function GasFees({
+    sender,
+    activeAddress,
+    gasSummary,
+    isEstimate,
+    isPending,
+    isError,
+    renderExplorerLink,
+}: GasFeesProps) {
     const title = isEstimate ? `Est. ${DEFAULT_TITLE}` : DEFAULT_TITLE;
     const trailingElement =
         gasSummary?.isSponsored && gasSummary.owner ? (
@@ -43,6 +53,8 @@ export function GasFees({ sender, gasSummary, isEstimate, isPending, isError }:
                             gasSummary={gasSummary}
                             isPending={isPending}
                             isError={isError}
+                            renderExplorerLink={renderExplorerLink}
+                            activeAddress={activeAddress}
                         />
                     </div>
                 </Collapsible>
diff --git a/apps/wallet/src/ui/app/shared/transaction-summary/cards/GasSummary.tsx b/apps/core/src/components/gas/GasSummary.tsx
similarity index 82%
rename from apps/wallet/src/ui/app/shared/transaction-summary/cards/GasSummary.tsx
rename to apps/core/src/components/gas/GasSummary.tsx
index e4a7f2ecd98..8bad6d508d4 100644
--- a/apps/wallet/src/ui/app/shared/transaction-summary/cards/GasSummary.tsx
+++ b/apps/core/src/components/gas/GasSummary.tsx
@@ -2,22 +2,30 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { useFormatCoin, type GasSummaryType } from '@iota/core';
+import React from 'react';
+import { ExplorerLinkType, useFormatCoin, type GasSummaryType } from '../../';
+import { RenderExplorerLink } from '../../types';
 import { formatAddress, IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
 
 import { KeyValueInfo } from '@iota/apps-ui-kit';
-import { useActiveAddress } from '_src/ui/app/hooks';
-import { ExplorerLink, ExplorerLinkType } from '_src/ui/app/components';
 
 interface GasSummaryProps {
+    renderExplorerLink: RenderExplorerLink;
+    activeAddress: string | null | undefined;
     sender?: string | null;
     gasSummary?: GasSummaryType;
     isPending?: boolean;
     isError?: boolean;
 }
 
-export function GasSummary({ sender, gasSummary, isPending, isError }: GasSummaryProps) {
-    const activeAddress = useActiveAddress();
+export function GasSummary({
+    sender,
+    gasSummary,
+    isPending,
+    isError,
+    renderExplorerLink: ExplorerLink,
+    activeAddress,
+}: GasSummaryProps) {
     const address = sender || activeAddress;
     const [gas, symbol] = useFormatCoin(gasSummary?.totalGas, IOTA_TYPE_ARG);
 
diff --git a/apps/core/src/components/gas/index.ts b/apps/core/src/components/gas/index.ts
new file mode 100644
index 00000000000..8e3998f5365
--- /dev/null
+++ b/apps/core/src/components/gas/index.ts
@@ -0,0 +1,5 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './GasSummary';
+export * from './GasFees';
diff --git a/apps/core/src/components/index.ts b/apps/core/src/components/index.ts
index 33fa79344a8..01683e56bb0 100644
--- a/apps/core/src/components/index.ts
+++ b/apps/core/src/components/index.ts
@@ -2,9 +2,13 @@
 // SPDX-License-Identifier: Apache-2.0
 
 export * from './coin';
+export * from './cards';
+export * from './gas';
 export * from './icon';
 export * from './Inputs';
 export * from './QR';
+export * from './transaction';
+export * from './buttons';
 export * from './collapsible';
 export * from './providers';
 export * from './stake';
diff --git a/apps/wallet/src/ui/app/shared/ExpandableList.tsx b/apps/core/src/components/lists/ExpandableList.tsx
similarity index 87%
rename from apps/wallet/src/ui/app/shared/ExpandableList.tsx
rename to apps/core/src/components/lists/ExpandableList.tsx
index 475fe06300f..afd6bacce0c 100644
--- a/apps/wallet/src/ui/app/shared/ExpandableList.tsx
+++ b/apps/core/src/components/lists/ExpandableList.tsx
@@ -3,18 +3,18 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import clsx from 'clsx';
-import { useMemo, useState, type ReactNode } from 'react';
-
+import React, { useMemo, useState, type ReactNode } from 'react';
 import { TriangleDown } from '@iota/ui-icons';
 import { Button, ButtonSize, ButtonType } from '@iota/apps-ui-kit';
 
 interface ExpandableListProps {
     items: ReactNode[];
     defaultItemsToShow: number;
+    initialShowAll?: boolean;
 }
 
-export function ExpandableList({ items, defaultItemsToShow }: ExpandableListProps) {
-    const [showAll, setShowAll] = useState(false);
+export function ExpandableList({ items, defaultItemsToShow, initialShowAll }: ExpandableListProps) {
+    const [showAll, setShowAll] = useState(initialShowAll || false);
 
     const itemsDisplayed = useMemo(
         () => (showAll ? items : items?.slice(0, defaultItemsToShow)),
diff --git a/apps/core/src/components/lists/index.ts b/apps/core/src/components/lists/index.ts
new file mode 100644
index 00000000000..e1388dacb72
--- /dev/null
+++ b/apps/core/src/components/lists/index.ts
@@ -0,0 +1,4 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './ExpandableList';
diff --git a/apps/core/src/components/transaction/TransactionReceipt.tsx b/apps/core/src/components/transaction/TransactionReceipt.tsx
new file mode 100644
index 00000000000..99cac6112af
--- /dev/null
+++ b/apps/core/src/components/transaction/TransactionReceipt.tsx
@@ -0,0 +1,101 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import React from 'react';
+import { InfoBox, InfoBoxStyle, InfoBoxType } from '@iota/apps-ui-kit';
+import { formatDate, type useTransactionSummary } from '../../hooks';
+import { CheckmarkFilled } from '@iota/ui-icons';
+import { IotaTransactionBlockResponse } from '@iota/iota-sdk/client';
+import { STAKING_REQUEST_EVENT, UNSTAKING_REQUEST_EVENT } from '../../constants';
+import { StakeTransactionDetails } from './details';
+import { UnstakeTransactionInfo } from './info';
+import { TransactionSummary } from './summary';
+import { RenderExplorerLink, RenderValidatorLogo } from '../../types';
+import { GasFees } from '../gas';
+
+interface TransactionReceiptProps {
+    txn: IotaTransactionBlockResponse;
+    activeAddress: string | null;
+    summary: Exclude<ReturnType<typeof useTransactionSummary>, null>;
+    renderValidatorLogo: RenderValidatorLogo;
+    renderExplorerLink: RenderExplorerLink;
+}
+
+export function TransactionReceipt({
+    txn,
+    activeAddress,
+    summary,
+    renderValidatorLogo,
+    renderExplorerLink,
+}: TransactionReceiptProps) {
+    const { events } = txn;
+
+    const isSender = txn.transaction?.data.sender === activeAddress;
+
+    const stakeTypeTransaction = events?.find(({ type }) => type === STAKING_REQUEST_EVENT);
+    const unstakeTypeTransaction = events?.find(({ type }) => type === UNSTAKING_REQUEST_EVENT);
+
+    return (
+        <div className="flex flex-col gap-md overflow-y-auto overflow-x-hidden">
+            <TransactionStatus
+                success={summary.status === 'success'}
+                timestamp={txn.timestampMs ?? undefined}
+                isIncoming={!isSender}
+            />
+            {stakeTypeTransaction || unstakeTypeTransaction ? (
+                <>
+                    {stakeTypeTransaction ? (
+                        <StakeTransactionDetails
+                            activeAddress={activeAddress}
+                            event={stakeTypeTransaction}
+                            gasSummary={summary?.gas}
+                            renderValidatorLogo={renderValidatorLogo}
+                            renderExplorerLink={renderExplorerLink}
+                        />
+                    ) : null}
+
+                    {unstakeTypeTransaction ? (
+                        <UnstakeTransactionInfo
+                            activeAddress={activeAddress}
+                            event={unstakeTypeTransaction}
+                            gasSummary={summary?.gas}
+                            renderExplorerLink={renderExplorerLink}
+                            renderValidatorLogo={renderValidatorLogo}
+                        />
+                    ) : null}
+                </>
+            ) : (
+                <>
+                    <TransactionSummary summary={summary} renderExplorerLink={renderExplorerLink} />
+                    {isSender && (
+                        <GasFees
+                            gasSummary={summary?.gas}
+                            renderExplorerLink={renderExplorerLink}
+                            activeAddress={activeAddress}
+                        />
+                    )}
+                </>
+            )}
+        </div>
+    );
+}
+
+interface TransactionStatusProps {
+    success: boolean;
+    timestamp?: string;
+    isIncoming?: boolean;
+}
+
+function TransactionStatus({ success, timestamp, isIncoming }: TransactionStatusProps) {
+    const txnDate = timestamp ? formatDate(Number(timestamp)) : '';
+    const successMessage = isIncoming ? 'Successfully received' : 'Successfully sent';
+    return (
+        <InfoBox
+            type={success ? InfoBoxType.Default : InfoBoxType.Error}
+            style={InfoBoxStyle.Elevated}
+            title={success ? successMessage : 'Transaction Failed'}
+            supportingText={timestamp ? txnDate : ''}
+            icon={<CheckmarkFilled />}
+        />
+    );
+}
diff --git a/apps/core/src/components/transaction/amount/TransactionAmount.tsx b/apps/core/src/components/transaction/amount/TransactionAmount.tsx
new file mode 100644
index 00000000000..6305dd2ae88
--- /dev/null
+++ b/apps/core/src/components/transaction/amount/TransactionAmount.tsx
@@ -0,0 +1,49 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import React from 'react';
+import { ImageIconSize, CoinIcon } from '../..';
+import {
+    Card,
+    CardAction,
+    CardActionType,
+    CardBody,
+    CardImage,
+    CardType,
+    ImageType,
+} from '@iota/apps-ui-kit';
+import { useFormatCoin } from '../../../hooks';
+
+interface TransactionAmountProps {
+    amount: string | number | bigint;
+    coinType: string;
+    subtitle: string;
+    approximation?: boolean;
+}
+
+// dont show amount if it is 0
+// This happens when a user sends a transaction to self;
+export function TransactionAmount({
+    amount,
+    coinType,
+    subtitle,
+    approximation,
+}: TransactionAmountProps) {
+    const [formatAmount, symbol] = useFormatCoin(Math.abs(Number(amount)), coinType);
+
+    return Number(amount) !== 0 ? (
+        <Card type={CardType.Filled}>
+            <CardImage type={ImageType.BgSolid}>
+                <div className="h-10 w-10 items-center justify-center rounded-full border border-shader-neutral-light-8 text-neutral-10 dark:text-neutral-92">
+                    <CoinIcon coinType={coinType} size={ImageIconSize.Full} rounded />
+                </div>
+            </CardImage>
+            <CardBody
+                title={`${approximation ? '~' : ''}${formatAmount} ${symbol}`}
+                subtitle={subtitle}
+            />
+            <CardAction type={CardActionType.SupportingText} />
+        </Card>
+    ) : null;
+}
diff --git a/apps/core/src/components/transaction/amount/index.ts b/apps/core/src/components/transaction/amount/index.ts
new file mode 100644
index 00000000000..a2cc5969cdd
--- /dev/null
+++ b/apps/core/src/components/transaction/amount/index.ts
@@ -0,0 +1,4 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './TransactionAmount';
diff --git a/apps/core/src/components/transaction/details/StakeTransactionDetails.tsx b/apps/core/src/components/transaction/details/StakeTransactionDetails.tsx
new file mode 100644
index 00000000000..c9e247f3d12
--- /dev/null
+++ b/apps/core/src/components/transaction/details/StakeTransactionDetails.tsx
@@ -0,0 +1,69 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { IotaEvent } from '@iota/iota-sdk/client';
+import { formatPercentageDisplay } from '../../../utils';
+import { useGetValidatorsApy } from '../../../hooks';
+import { TransactionAmount } from '../amount';
+import { StakeTransactionInfo } from '../info';
+import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
+import type { GasSummaryType, RenderExplorerLink, RenderValidatorLogo } from '../../../types';
+
+interface StakeTransactionDetailsProps {
+    event: IotaEvent;
+    activeAddress: string | null;
+    renderExplorerLink: RenderExplorerLink;
+    renderValidatorLogo: RenderValidatorLogo;
+    gasSummary?: GasSummaryType;
+}
+
+export function StakeTransactionDetails({
+    event,
+    gasSummary,
+    activeAddress,
+    renderValidatorLogo: ValidatorLogo,
+    renderExplorerLink,
+}: StakeTransactionDetailsProps) {
+    const json = event.parsedJson as {
+        amount: string;
+        validator_address: string;
+        epoch: string;
+    };
+    const validatorAddress = json?.validator_address;
+    const stakedAmount = json?.amount;
+    const stakedEpoch = Number(json?.epoch || '0');
+
+    const { data: rollingAverageApys } = useGetValidatorsApy();
+
+    const { apy, isApyApproxZero } = rollingAverageApys?.[validatorAddress] ?? {
+        apy: null,
+    };
+
+    return (
+        <div className="flex flex-col gap-y-md">
+            {validatorAddress && (
+                <ValidatorLogo
+                    address={validatorAddress}
+                    showActiveStatus
+                    activeEpoch={json.epoch}
+                    isSelected
+                />
+            )}
+            {stakedAmount && (
+                <TransactionAmount
+                    amount={stakedAmount}
+                    coinType={IOTA_TYPE_ARG}
+                    subtitle="Stake"
+                />
+            )}
+
+            <StakeTransactionInfo
+                activeAddress={activeAddress}
+                startEpoch={stakedEpoch}
+                apy={formatPercentageDisplay(apy, '--', isApyApproxZero)}
+                gasSummary={gasSummary}
+                renderExplorerLink={renderExplorerLink}
+            />
+        </div>
+    );
+}
diff --git a/apps/core/src/components/transaction/details/index.ts b/apps/core/src/components/transaction/details/index.ts
new file mode 100644
index 00000000000..021232db15a
--- /dev/null
+++ b/apps/core/src/components/transaction/details/index.ts
@@ -0,0 +1,4 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './StakeTransactionDetails';
diff --git a/apps/core/src/components/transaction/index.ts b/apps/core/src/components/transaction/index.ts
new file mode 100644
index 00000000000..bedefbc5d7e
--- /dev/null
+++ b/apps/core/src/components/transaction/index.ts
@@ -0,0 +1,7 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './info';
+export * from './summary';
+
+export * from './TransactionReceipt';
diff --git a/apps/wallet/src/ui/app/components/receipt-card/StakeTxnInfo.tsx b/apps/core/src/components/transaction/info/StakeTransactionInfo.tsx
similarity index 69%
rename from apps/wallet/src/ui/app/components/receipt-card/StakeTxnInfo.tsx
rename to apps/core/src/components/transaction/info/StakeTransactionInfo.tsx
index c4b94e7eb6f..47f00c48d4f 100644
--- a/apps/wallet/src/ui/app/components/receipt-card/StakeTxnInfo.tsx
+++ b/apps/core/src/components/transaction/info/StakeTransactionInfo.tsx
@@ -2,17 +2,26 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
+import React from 'react';
 import { Divider, KeyValueInfo, Panel, TooltipPosition } from '@iota/apps-ui-kit';
-import { type GasSummaryType, useStakeTxnInfo } from '@iota/core';
-import { GasSummary } from '../../shared/transaction-summary/cards/GasSummary';
+import { type GasSummaryType, useStakeTxnInfo, GasSummary } from '../../../';
+import { RenderExplorerLink } from '../../../types';
 
-interface StakeTxnInfoProps {
+interface StakeTransactionInfoProps {
+    activeAddress: string | null;
+    renderExplorerLink: RenderExplorerLink;
     apy?: string;
     startEpoch?: string | number;
     gasSummary?: GasSummaryType;
 }
 
-export function StakeTxnInfo({ apy, startEpoch, gasSummary }: StakeTxnInfoProps) {
+export function StakeTransactionInfo({
+    apy,
+    startEpoch,
+    gasSummary,
+    activeAddress,
+    renderExplorerLink,
+}: StakeTransactionInfoProps) {
     const { stakedRewardsStartEpoch, timeBeforeStakeRewardsRedeemableAgoDisplay } =
         useStakeTxnInfo(startEpoch);
     return (
@@ -38,7 +47,11 @@ export function StakeTxnInfo({ apy, startEpoch, gasSummary }: StakeTxnInfoProps)
                     fullwidth
                 />
                 <Divider />
-                <GasSummary gasSummary={gasSummary} />
+                <GasSummary
+                    activeAddress={activeAddress}
+                    gasSummary={gasSummary}
+                    renderExplorerLink={renderExplorerLink}
+                />
             </div>
         </Panel>
     );
diff --git a/apps/wallet/src/ui/app/components/receipt-card/UnstakeTxn.tsx b/apps/core/src/components/transaction/info/UnstakeTransactionInfo.tsx
similarity index 58%
rename from apps/wallet/src/ui/app/components/receipt-card/UnstakeTxn.tsx
rename to apps/core/src/components/transaction/info/UnstakeTransactionInfo.tsx
index 3b9a52e6a51..bb69cf69226 100644
--- a/apps/wallet/src/ui/app/components/receipt-card/UnstakeTxn.tsx
+++ b/apps/core/src/components/transaction/info/UnstakeTransactionInfo.tsx
@@ -2,21 +2,30 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { ValidatorLogo } from '_app/staking/validators/ValidatorLogo';
-import { TxnAmount } from '_components';
-import { type GasSummaryType, useFormatCoin } from '@iota/core';
+import React from 'react';
+import { TransactionAmount } from '../amount';
 import type { IotaEvent } from '@iota/iota-sdk/client';
 import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
+import type { GasSummaryType, RenderExplorerLink, RenderValidatorLogo } from '../../../types';
+import { useFormatCoin } from '../../../hooks';
+import { Divider, KeyValueInfo, Panel } from '@iota/apps-ui-kit';
+import { GasSummary } from '../../..';
 
-import { CardType, Divider, KeyValueInfo, Panel } from '@iota/apps-ui-kit';
-import { GasSummary } from '../../shared/transaction-summary/cards/GasSummary';
-
-interface UnStakeTxnProps {
+interface UnstakeTransactionInfoProps {
+    activeAddress: string | null;
     event: IotaEvent;
+    renderValidatorLogo: RenderValidatorLogo;
+    renderExplorerLink: RenderExplorerLink;
     gasSummary?: GasSummaryType;
 }
 
-export function UnStakeTxn({ event, gasSummary }: UnStakeTxnProps) {
+export function UnstakeTransactionInfo({
+    activeAddress,
+    event,
+    gasSummary,
+    renderValidatorLogo: ValidatorLogo,
+    renderExplorerLink,
+}: UnstakeTransactionInfoProps) {
     const json = event.parsedJson as {
         principal_amount?: number;
         reward_amount?: number;
@@ -31,11 +40,9 @@ export function UnStakeTxn({ event, gasSummary }: UnStakeTxnProps) {
 
     return (
         <div className="flex flex-col gap-y-md">
-            {validatorAddress && (
-                <ValidatorLogo validatorAddress={validatorAddress} type={CardType.Filled} />
-            )}
+            {validatorAddress && <ValidatorLogo address={validatorAddress} isSelected />}
             {totalAmount && (
-                <TxnAmount amount={totalAmount} coinType={IOTA_TYPE_ARG} subtitle="Total" />
+                <TransactionAmount amount={totalAmount} coinType={IOTA_TYPE_ARG} subtitle="Total" />
             )}
             <Panel hasBorder>
                 <div className="flex flex-col gap-y-sm p-md">
@@ -50,7 +57,11 @@ export function UnStakeTxn({ event, gasSummary }: UnStakeTxnProps) {
                         fullwidth
                     />
                     <Divider />
-                    <GasSummary gasSummary={gasSummary} />
+                    <GasSummary
+                        gasSummary={gasSummary}
+                        activeAddress={activeAddress}
+                        renderExplorerLink={renderExplorerLink}
+                    />
                 </div>
             </Panel>
         </div>
diff --git a/apps/core/src/components/transaction/info/index.ts b/apps/core/src/components/transaction/info/index.ts
new file mode 100644
index 00000000000..60bcbb74f47
--- /dev/null
+++ b/apps/core/src/components/transaction/info/index.ts
@@ -0,0 +1,5 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './StakeTransactionInfo';
+export * from './UnstakeTransactionInfo';
diff --git a/apps/core/src/components/transaction/summary/TransactionSummary.tsx b/apps/core/src/components/transaction/summary/TransactionSummary.tsx
new file mode 100644
index 00000000000..090d84d8ece
--- /dev/null
+++ b/apps/core/src/components/transaction/summary/TransactionSummary.tsx
@@ -0,0 +1,49 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import { type TransactionSummaryType } from '../../..';
+import { BalanceChanges, ObjectChanges } from '../../cards';
+import { LoadingIndicator, Title, TitleSize } from '@iota/apps-ui-kit';
+import { RenderExplorerLink } from '../../../types';
+
+interface TransactionSummaryProps {
+    summary: TransactionSummaryType;
+    renderExplorerLink: RenderExplorerLink;
+    isLoading?: boolean;
+    isError?: boolean;
+    isDryRun?: boolean;
+}
+
+export function TransactionSummary({
+    summary,
+    isLoading,
+    isError,
+    isDryRun = false,
+    renderExplorerLink,
+}: TransactionSummaryProps) {
+    if (isError) return null;
+    return (
+        <>
+            {isLoading ? (
+                <div className="flex items-center justify-center p-10">
+                    <LoadingIndicator />
+                </div>
+            ) : (
+                <div className="flex flex-col gap-3">
+                    {isDryRun && (
+                        <Title title="Do you approve these actions?" size={TitleSize.Medium} />
+                    )}
+                    <BalanceChanges
+                        changes={summary?.balanceChanges}
+                        renderExplorerLink={renderExplorerLink}
+                    />
+                    <ObjectChanges
+                        changes={summary?.objectSummary}
+                        renderExplorerLink={renderExplorerLink}
+                    />
+                </div>
+            )}
+        </>
+    );
+}
diff --git a/apps/core/src/components/transaction/summary/index.ts b/apps/core/src/components/transaction/summary/index.ts
new file mode 100644
index 00000000000..60b127c09ce
--- /dev/null
+++ b/apps/core/src/components/transaction/summary/index.ts
@@ -0,0 +1,4 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './TransactionSummary';
diff --git a/apps/core/src/hooks/index.ts b/apps/core/src/hooks/index.ts
index 13c49c813b6..122b9b01294 100644
--- a/apps/core/src/hooks/index.ts
+++ b/apps/core/src/hooks/index.ts
@@ -30,7 +30,6 @@ export * from './useTokenPrice';
 export * from './useKioskClient';
 export * from './useQueryTransactionsByAddress';
 export * from './useGetTransaction';
-export * from './useExtendedTransactionSummary';
 export * from './useSortedCoinsByCategories';
 export * from './useGetNFTDisplay';
 export * from './useIotaAddressValidation';
diff --git a/apps/core/src/hooks/useExtendedTransactionSummary.ts b/apps/core/src/hooks/useExtendedTransactionSummary.ts
deleted file mode 100644
index 8fb9ccc3b36..00000000000
--- a/apps/core/src/hooks/useExtendedTransactionSummary.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-// Copyright (c) 2024 IOTA Stiftung
-// SPDX-License-Identifier: Apache-2.0
-
-import { useTransactionSummary } from './';
-import { useCurrentAccount, useIotaClient } from '@iota/dapp-kit';
-import { IotaTransactionBlockResponse } from '@iota/iota-sdk/client';
-import { useQuery } from '@tanstack/react-query';
-
-export function useExtendedTransactionSummary(
-    transactionDigest: string,
-): ReturnType<typeof useTransactionSummary> {
-    const currentAccount = useCurrentAccount();
-    const client = useIotaClient();
-
-    const { data: transactionData } = useQuery<IotaTransactionBlockResponse>({
-        queryKey: ['transactions-by-id', transactionDigest],
-        queryFn: async () => {
-            return client.getTransactionBlock({
-                digest: transactionDigest,
-                options: {
-                    showBalanceChanges: true,
-                    showObjectChanges: true,
-                    showInput: true,
-                    showEffects: true,
-                    showEvents: true,
-                },
-            });
-        },
-        enabled: !!transactionDigest,
-        retry: 8,
-    });
-
-    const summary = useTransactionSummary({
-        transaction: transactionData,
-        currentAddress: currentAccount?.address,
-        recognizedPackagesList: [],
-    });
-
-    return summary;
-}
diff --git a/apps/core/src/hooks/useGetTransaction.ts b/apps/core/src/hooks/useGetTransaction.ts
index 8ceab13c2cf..7fd0d818f33 100644
--- a/apps/core/src/hooks/useGetTransaction.ts
+++ b/apps/core/src/hooks/useGetTransaction.ts
@@ -5,9 +5,11 @@
 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,
+    queryOptions?: { retry?: number; initialData?: IotaTransactionBlockResponse },
 ): UseQueryResult<IotaTransactionBlockResponse, Error> {
     const client = useIotaClient();
     return useQuery<IotaTransactionBlockResponse, Error>({
@@ -24,5 +26,26 @@ export function useGetTransaction(
                 },
             }),
         enabled: !!transactionId,
+        retry: queryOptions?.retry,
+        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 };
+}
diff --git a/apps/core/src/hooks/useTransactionSummary.ts b/apps/core/src/hooks/useTransactionSummary.ts
index aab6f4613c3..f34bfa4001d 100644
--- a/apps/core/src/hooks/useTransactionSummary.ts
+++ b/apps/core/src/hooks/useTransactionSummary.ts
@@ -7,14 +7,14 @@ import {
 } from '@iota/iota-sdk/client';
 import { useMemo } from 'react';
 
-import { getBalanceChangeSummary } from '../utils/transaction/getBalanceChangeSummary';
-import { getGasSummary } from '../utils/transaction/getGasSummary';
-import { getLabel } from '../utils/transaction/getLabel';
+import { IotaObjectChangeWithDisplay } from '../types';
 import {
+    getBalanceChangeSummary,
+    getGasSummary,
+    getLabel,
     getObjectChangeSummary,
-    IotaObjectChangeWithDisplay,
-} from '../utils/transaction/getObjectChangeSummary';
-import { getObjectDisplayLookup } from '../utils/transaction/getObjectDisplayLookup';
+    getObjectDisplayLookup,
+} from '../utils';
 import { useMultiGetObjects } from './useMultiGetObjects';
 
 export function useTransactionSummary({
diff --git a/apps/core/src/index.ts b/apps/core/src/index.ts
index a9aadd0b1e5..17d578f2916 100644
--- a/apps/core/src/index.ts
+++ b/apps/core/src/index.ts
@@ -11,3 +11,5 @@ export * from './constants';
 export * from './contexts';
 export * from './enums';
 export * from './forms';
+export * from './types';
+export * from './interfaces';
diff --git a/apps/core/src/interfaces/balanceChange.interfaces.ts b/apps/core/src/interfaces/balanceChange.interfaces.ts
new file mode 100644
index 00000000000..35b8fb877a6
--- /dev/null
+++ b/apps/core/src/interfaces/balanceChange.interfaces.ts
@@ -0,0 +1,10 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export type BalanceChange = {
+    coinType: string;
+    amount: string;
+    unRecognizedToken: boolean;
+    recipient?: string;
+    owner?: string;
+};
diff --git a/apps/core/src/interfaces/index.ts b/apps/core/src/interfaces/index.ts
new file mode 100644
index 00000000000..3194d2ae0a1
--- /dev/null
+++ b/apps/core/src/interfaces/index.ts
@@ -0,0 +1,5 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './validatorLogo.interfaces';
+export * from './balanceChange.interfaces';
diff --git a/apps/core/src/interfaces/validatorLogo.interfaces.ts b/apps/core/src/interfaces/validatorLogo.interfaces.ts
new file mode 100644
index 00000000000..26b2d558ff2
--- /dev/null
+++ b/apps/core/src/interfaces/validatorLogo.interfaces.ts
@@ -0,0 +1,9 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export interface ValidatorLogoProps {
+    address: string;
+    isSelected: boolean;
+    showActiveStatus?: boolean;
+    activeEpoch?: string;
+}
diff --git a/apps/core/src/types/balanceChange.ts b/apps/core/src/types/balanceChange.ts
new file mode 100644
index 00000000000..8193462b86b
--- /dev/null
+++ b/apps/core/src/types/balanceChange.ts
@@ -0,0 +1,7 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { BalanceChange } from '../interfaces';
+
+export type BalanceChangeByOwner = Record<string, BalanceChange[]>;
+export type BalanceChangeSummary = BalanceChangeByOwner | null;
diff --git a/apps/core/src/types/gasSummary.ts b/apps/core/src/types/gasSummary.ts
new file mode 100644
index 00000000000..312e04be24f
--- /dev/null
+++ b/apps/core/src/types/gasSummary.ts
@@ -0,0 +1,18 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { GasCostSummary, IotaGasData } from '@iota/iota-sdk/client';
+
+type Optional<T> = {
+    [K in keyof T]?: T[K];
+};
+
+export type GasSummaryType =
+    | (GasCostSummary &
+          Optional<IotaGasData> & {
+              isSponsored: boolean;
+              gasUsed: GasCostSummary;
+              totalGas?: string;
+              owner?: string;
+          })
+    | null;
diff --git a/apps/core/src/types/index.ts b/apps/core/src/types/index.ts
new file mode 100644
index 00000000000..da698c54d8d
--- /dev/null
+++ b/apps/core/src/types/index.ts
@@ -0,0 +1,8 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './renderComponent';
+export * from './balanceChange';
+export * from './objectChange';
+export * from './transactionSummary';
+export * from './gasSummary';
diff --git a/apps/core/src/types/objectChange.ts b/apps/core/src/types/objectChange.ts
new file mode 100644
index 00000000000..5c1c878e61d
--- /dev/null
+++ b/apps/core/src/types/objectChange.ts
@@ -0,0 +1,26 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { DisplayFieldsResponse, IotaObjectChange } from '@iota/iota-sdk/client';
+
+export type IotaObjectChangeTypes =
+    | 'published'
+    | 'transferred'
+    | 'mutated'
+    | 'deleted'
+    | 'wrapped'
+    | 'created';
+
+export type WithDisplayFields<T> = T & { display?: DisplayFieldsResponse };
+export type IotaObjectChangeWithDisplay = WithDisplayFields<IotaObjectChange>;
+
+export type ObjectChange = {
+    changesWithDisplay: IotaObjectChangeWithDisplay[];
+    changes: IotaObjectChange[];
+    ownerType: string;
+};
+export type ObjectChangesByOwner = Record<string, ObjectChange>;
+
+export type ObjectChangeSummary = {
+    [K in IotaObjectChangeTypes]: ObjectChangesByOwner;
+};
diff --git a/apps/core/src/types/renderComponent.ts b/apps/core/src/types/renderComponent.ts
new file mode 100644
index 00000000000..3059aa3f24d
--- /dev/null
+++ b/apps/core/src/types/renderComponent.ts
@@ -0,0 +1,10 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { PropsWithChildren, JSX } from 'react';
+import type { ExplorerLinkConfig } from '../utils/getExplorerLink';
+import type { ValidatorLogoProps } from '../interfaces';
+
+export type RenderExplorerLinkProps = PropsWithChildren<ExplorerLinkConfig>;
+export type RenderExplorerLink = (props: RenderExplorerLinkProps) => JSX.Element;
+export type RenderValidatorLogo = (props: ValidatorLogoProps) => JSX.Element;
diff --git a/apps/core/src/types/transactionSummary.ts b/apps/core/src/types/transactionSummary.ts
new file mode 100644
index 00000000000..ddcdaa2122e
--- /dev/null
+++ b/apps/core/src/types/transactionSummary.ts
@@ -0,0 +1,14 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { GasSummaryType, BalanceChangeSummary, ObjectChangeSummary } from '.';
+
+export type TransactionSummaryType = {
+    balanceChanges: BalanceChangeSummary;
+    objectSummary: ObjectChangeSummary | null;
+    digest?: string;
+    sender?: string;
+    timestamp?: string | null;
+    gas?: GasSummaryType;
+} | null;
diff --git a/apps/core/src/utils/transaction/getBalanceChangeSummary.ts b/apps/core/src/utils/transaction/getBalanceChangeSummary.ts
index 31f7b3cab84..0f8147bd6f1 100644
--- a/apps/core/src/utils/transaction/getBalanceChangeSummary.ts
+++ b/apps/core/src/utils/transaction/getBalanceChangeSummary.ts
@@ -7,17 +7,8 @@ import {
     type IotaTransactionBlockResponse,
 } from '@iota/iota-sdk/client';
 import { normalizeIotaObjectId, parseStructTag } from '@iota/iota-sdk/utils';
-
-export type BalanceChange = {
-    coinType: string;
-    amount: string;
-    recipient?: string;
-    owner?: string;
-    unRecognizedToken: boolean;
-};
-
-export type BalanceChangeByOwner = Record<string, BalanceChange[]>;
-export type BalanceChangeSummary = BalanceChangeByOwner | null;
+import { BalanceChange } from '../../interfaces';
+import { BalanceChangeByOwner } from '../../types';
 
 function getOwnerAddress(owner: ObjectOwner): string {
     if (typeof owner === 'object') {
diff --git a/apps/core/src/utils/transaction/getGasSummary.ts b/apps/core/src/utils/transaction/getGasSummary.ts
index 934002b6da2..cbbf047d41e 100644
--- a/apps/core/src/utils/transaction/getGasSummary.ts
+++ b/apps/core/src/utils/transaction/getGasSummary.ts
@@ -1,27 +1,12 @@
 // Copyright (c) Mysten Labs, Inc.
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
-import {
+import type {
     DryRunTransactionBlockResponse,
-    GasCostSummary,
-    IotaGasData,
     IotaTransactionBlockResponse,
     TransactionEffects,
 } from '@iota/iota-sdk/client';
-
-type Optional<T> = {
-    [K in keyof T]?: T[K];
-};
-
-export type GasSummaryType =
-    | (GasCostSummary &
-          Optional<IotaGasData> & {
-              totalGas?: string;
-              owner?: string;
-              isSponsored: boolean;
-              gasUsed: GasCostSummary;
-          })
-    | null;
+import type { GasSummaryType } from '../../types';
 
 export function getGasSummary(
     transaction: IotaTransactionBlockResponse | DryRunTransactionBlockResponse,
diff --git a/apps/core/src/utils/transaction/getObjectChangeLabel.ts b/apps/core/src/utils/transaction/getObjectChangeLabel.ts
index cf9e1b8d467..4ee974c9e92 100644
--- a/apps/core/src/utils/transaction/getObjectChangeLabel.ts
+++ b/apps/core/src/utils/transaction/getObjectChangeLabel.ts
@@ -2,7 +2,7 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { IotaObjectChangeTypes } from './types';
+import { IotaObjectChangeTypes } from '../../types';
 
 export const ObjectChangeLabels = {
     created: 'Created',
diff --git a/apps/core/src/utils/transaction/getObjectChangeSummary.ts b/apps/core/src/utils/transaction/getObjectChangeSummary.ts
index a2a5dd010a1..8635f3f911d 100644
--- a/apps/core/src/utils/transaction/getObjectChangeSummary.ts
+++ b/apps/core/src/utils/transaction/getObjectChangeSummary.ts
@@ -2,8 +2,6 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 import {
-    DisplayFieldsResponse,
-    IotaObjectChange,
     IotaObjectChangeCreated,
     IotaObjectChangeDeleted,
     IotaObjectChangeMutated,
@@ -13,21 +11,7 @@ import {
 } from '@iota/iota-sdk/client';
 
 import { groupByOwner } from './groupByOwner';
-import { IotaObjectChangeTypes } from './types';
-
-export type WithDisplayFields<T> = T & { display?: DisplayFieldsResponse };
-export type IotaObjectChangeWithDisplay = WithDisplayFields<IotaObjectChange>;
-
-export type ObjectChanges = {
-    changesWithDisplay: IotaObjectChangeWithDisplay[];
-    changes: IotaObjectChange[];
-    ownerType: string;
-};
-export type ObjectChangesByOwner = Record<string, ObjectChanges>;
-
-export type ObjectChangeSummary = {
-    [K in IotaObjectChangeTypes]: ObjectChangesByOwner;
-};
+import { IotaObjectChangeWithDisplay } from '../../types';
 
 export const getObjectChangeSummary = (objectChanges: IotaObjectChangeWithDisplay[]) => {
     if (!objectChanges) return null;
diff --git a/apps/core/src/utils/transaction/groupByOwner.ts b/apps/core/src/utils/transaction/groupByOwner.ts
index 07fc3f54fd2..ec0593ce640 100644
--- a/apps/core/src/utils/transaction/groupByOwner.ts
+++ b/apps/core/src/utils/transaction/groupByOwner.ts
@@ -2,7 +2,7 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { ObjectChangesByOwner, IotaObjectChangeWithDisplay } from './getObjectChangeSummary';
+import { IotaObjectChangeWithDisplay, ObjectChangesByOwner } from '../../types';
 import { getOwnerType } from './getOwnerType';
 
 const getOwner = (change: IotaObjectChangeWithDisplay) => {
diff --git a/apps/core/src/utils/transaction/index.ts b/apps/core/src/utils/transaction/index.ts
index 5fcc02257ca..f5ef47663b6 100644
--- a/apps/core/src/utils/transaction/index.ts
+++ b/apps/core/src/utils/transaction/index.ts
@@ -5,7 +5,6 @@
 export * from './getBalanceChangeSummary';
 export * from './getObjectChangeSummary';
 export * from './getLabel';
-export * from './types';
 export * from './getGasSummary';
 export * from './groupByOwner';
 export * from './getOwnerType';
diff --git a/apps/core/src/utils/transaction/types.ts b/apps/core/src/utils/transaction/types.ts
deleted file mode 100644
index dbf6d4c2653..00000000000
--- a/apps/core/src/utils/transaction/types.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-// Copyright (c) Mysten Labs, Inc.
-// Modifications Copyright (c) 2024 IOTA Stiftung
-// SPDX-License-Identifier: Apache-2.0
-
-import { BalanceChangeSummary } from './getBalanceChangeSummary';
-import { GasSummaryType } from './getGasSummary';
-import { ObjectChangeSummary } from './getObjectChangeSummary';
-
-export type TransactionSummary = {
-    digest?: string;
-    sender?: string;
-    timestamp?: string | null;
-    balanceChanges: BalanceChangeSummary;
-    gas?: GasSummaryType;
-    objectSummary: ObjectChangeSummary | null;
-} | null;
-
-export type IotaObjectChangeTypes =
-    | 'published'
-    | 'transferred'
-    | 'mutated'
-    | 'deleted'
-    | 'wrapped'
-    | 'created';
diff --git a/apps/explorer/src/components/gas-breakdown/GasBreakdown.tsx b/apps/explorer/src/components/gas-breakdown/GasBreakdown.tsx
index 87199035f7a..a226583b306 100644
--- a/apps/explorer/src/components/gas-breakdown/GasBreakdown.tsx
+++ b/apps/explorer/src/components/gas-breakdown/GasBreakdown.tsx
@@ -3,7 +3,12 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { Accordion, AccordionContent, Title, Divider } from '@iota/apps-ui-kit';
-import { CoinFormat, type TransactionSummary, useCopyToClipboard, useFormatCoin } from '@iota/core';
+import {
+    CoinFormat,
+    type TransactionSummaryType,
+    useCopyToClipboard,
+    useFormatCoin,
+} from '@iota/core';
 import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
 import { Copy } from '@iota/ui-icons';
 import toast from 'react-hot-toast';
@@ -72,7 +77,7 @@ function GasInfo({ label, info }: { label: string; info?: React.ReactNode }) {
 }
 
 interface GasBreakdownProps {
-    summary?: TransactionSummary | null;
+    summary?: TransactionSummaryType | null;
 }
 
 export function GasBreakdown({ summary }: GasBreakdownProps): JSX.Element | null {
diff --git a/apps/wallet-dashboard/app/(protected)/staking/page.tsx b/apps/wallet-dashboard/app/(protected)/staking/page.tsx
index c26c1a39411..e33b1253b95 100644
--- a/apps/wallet-dashboard/app/(protected)/staking/page.tsx
+++ b/apps/wallet-dashboard/app/(protected)/staking/page.tsx
@@ -16,8 +16,7 @@ import {
     Title,
     TitleSize,
 } from '@iota/apps-ui-kit';
-import { StakeDialog } from '@/components';
-import { StakeDialogView } from '@/components/Dialogs/Staking/StakeDialog';
+import { StakeDialog, StakeDialogView } from '@/components';
 import {
     ExtendedDelegatedStake,
     formatDelegatedStake,
@@ -29,17 +28,18 @@ import {
     StakedCard,
     useFormatCoin,
 } from '@iota/core';
-import { useCurrentAccount, useIotaClientQuery } from '@iota/dapp-kit';
+import { useCurrentAccount, useIotaClient, useIotaClientQuery } from '@iota/dapp-kit';
 import { IotaSystemStateSummary } from '@iota/iota-sdk/client';
 import { Info } from '@iota/ui-icons';
 import { useMemo } from 'react';
 import { useStakeDialog } from '@/components/Dialogs/Staking/hooks/useStakeDialog';
 import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
 
-function StakingDashboardPage(): JSX.Element {
+function StakingDashboardPage(): React.JSX.Element {
     const account = useCurrentAccount();
     const { data: system } = useIotaClientQuery('getLatestIotaSystemState');
     const activeValidators = (system as IotaSystemStateSummary)?.activeValidators;
+    const iotaClient = useIotaClient();
 
     const {
         isDialogStakeOpen,
@@ -53,7 +53,7 @@ function StakingDashboardPage(): JSX.Element {
         handleNewStake,
     } = useStakeDialog();
 
-    const { data: delegatedStakeData } = useGetDelegatedStake({
+    const { data: delegatedStakeData, refetch: refetchDelegatedStakes } = useGetDelegatedStake({
         address: account?.address || '',
         staleTime: DELEGATED_STAKES_QUERY_STALE_TIME,
         refetchInterval: DELEGATED_STAKES_QUERY_REFETCH_INTERVAL,
@@ -92,6 +92,14 @@ function StakingDashboardPage(): JSX.Element {
         setSelectedStake(extendedStake);
     };
 
+    function handleOnStakeSuccess(digest: string): void {
+        iotaClient
+            .waitForTransaction({
+                digest,
+            })
+            .then(() => refetchDelegatedStakes());
+    }
+
     return (
         <div className="flex justify-center">
             <div className="w-3/4">
@@ -165,6 +173,7 @@ function StakingDashboardPage(): JSX.Element {
                         </div>
                         <StakeDialog
                             stakedDetails={selectedStake}
+                            onSuccess={handleOnStakeSuccess}
                             isOpen={isDialogStakeOpen}
                             handleClose={handleCloseStakeDialog}
                             view={stakeDialogView}
diff --git a/apps/wallet-dashboard/components/Dialogs/Assets/views/DetailsView.tsx b/apps/wallet-dashboard/components/Dialogs/Assets/views/DetailsView.tsx
index 22572cec44f..3929ba0062f 100644
--- a/apps/wallet-dashboard/components/Dialogs/Assets/views/DetailsView.tsx
+++ b/apps/wallet-dashboard/components/Dialogs/Assets/views/DetailsView.tsx
@@ -13,7 +13,7 @@ import {
 } from '@iota/apps-ui-kit';
 import Link from 'next/link';
 import { formatAddress } from '@iota/iota-sdk/utils';
-import { Layout, LayoutBody, LayoutFooter } from '../../Staking/views/Layout';
+import { DialogLayout, DialogLayoutBody, DialogLayoutFooter } from '../../layout';
 import { IotaObjectData } from '@iota/iota-sdk/client';
 import { ExplorerLink } from '@/components/ExplorerLink';
 import { useCurrentAccount } from '@iota/dapp-kit';
@@ -55,9 +55,9 @@ export function DetailsView({ onClose, asset, onSend }: DetailsViewProps) {
     }
 
     return (
-        <Layout>
+        <DialogLayout>
             <Header title="Asset" onClose={onClose} titleCentered />
-            <LayoutBody>
+            <DialogLayoutBody>
                 <div className="flex w-full flex-col items-center justify-center gap-xs">
                     <div className="w-[172px]">
                         <VisualAssetCard
@@ -169,8 +169,8 @@ export function DetailsView({ onClose, asset, onSend }: DetailsViewProps) {
                         ) : null}
                     </div>
                 </div>
-            </LayoutBody>
-            <LayoutFooter>
+            </DialogLayoutBody>
+            <DialogLayoutFooter>
                 <div className="flex flex-col">
                     {isContainedInKiosk && kioskItem?.isLocked ? (
                         <div className="flex flex-col gap-2">
@@ -194,7 +194,7 @@ export function DetailsView({ onClose, asset, onSend }: DetailsViewProps) {
                         />
                     )}
                 </div>
-            </LayoutFooter>
-        </Layout>
+            </DialogLayoutFooter>
+        </DialogLayout>
     );
 }
diff --git a/apps/wallet-dashboard/components/Dialogs/Assets/views/SendView.tsx b/apps/wallet-dashboard/components/Dialogs/Assets/views/SendView.tsx
index 973d0407fd9..b5757582c7b 100644
--- a/apps/wallet-dashboard/components/Dialogs/Assets/views/SendView.tsx
+++ b/apps/wallet-dashboard/components/Dialogs/Assets/views/SendView.tsx
@@ -4,7 +4,7 @@
 import React from 'react';
 import { AddressInput, useNftDetails } from '@iota/core';
 import { useFormikContext } from 'formik';
-import { Layout, LayoutBody, LayoutFooter } from '../../Staking/views/Layout';
+import { DialogLayout, DialogLayoutFooter, DialogLayoutBody } from '../../layout';
 import {
     Button,
     ButtonHtmlType,
@@ -33,9 +33,9 @@ export function SendView({ asset, onClose, onBack }: SendViewProps) {
 
     const { nftName, nftImageUrl } = useNftDetails(objectId, senderAddress);
     return (
-        <Layout>
+        <DialogLayout>
             <Header title="Send asset" onClose={onClose} titleCentered onBack={onBack} />
-            <LayoutBody>
+            <DialogLayoutBody>
                 <div className="flex w-full flex-col items-center justify-center gap-xs">
                     <div className="w-[172px]">
                         <VisualAssetCard
@@ -53,8 +53,8 @@ export function SendView({ asset, onClose, onBack }: SendViewProps) {
                         <AddressInput name="to" placeholder="Enter Address" />
                     </div>
                 </div>
-            </LayoutBody>
-            <LayoutFooter>
+            </DialogLayoutBody>
+            <DialogLayoutFooter>
                 <Button
                     fullWidth
                     htmlType={ButtonHtmlType.Submit}
@@ -64,7 +64,7 @@ export function SendView({ asset, onClose, onBack }: SendViewProps) {
                     iconAfterText
                     onClick={submitForm}
                 />
-            </LayoutFooter>
-        </Layout>
+            </DialogLayoutFooter>
+        </DialogLayout>
     );
 }
diff --git a/apps/wallet-dashboard/components/Dialogs/Staking/StakeDialog.tsx b/apps/wallet-dashboard/components/Dialogs/Staking/StakeDialog.tsx
index cc6484119c7..2c9f72a2911 100644
--- a/apps/wallet-dashboard/components/Dialogs/Staking/StakeDialog.tsx
+++ b/apps/wallet-dashboard/components/Dialogs/Staking/StakeDialog.tsx
@@ -1,7 +1,7 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import { EnterAmountView, EnterTimelockedAmountView, SelectValidatorView } from './views';
 import {
     useNotifications,
@@ -29,14 +29,8 @@ import { prepareObjectsForTimelockedStakingTransaction } from '@/lib/utils';
 import { Dialog } from '@iota/apps-ui-kit';
 import { DetailsView, UnstakeView } from './views';
 import { FormValues } from './views/EnterAmountView';
-
-export enum StakeDialogView {
-    Details = 'Details',
-    SelectValidator = 'SelectValidator',
-    EnterAmount = 'EnterAmount',
-    EnterTimelockedAmount = 'EnterTimelockedAmount',
-    Unstake = 'Unstake',
-}
+import { TransactionDialogView } from '../TransactionDialog';
+import { StakeDialogView } from './enums/view.enums';
 
 const INITIAL_VALUES = {
     amount: '',
@@ -45,8 +39,8 @@ const INITIAL_VALUES = {
 interface StakeDialogProps {
     isOpen: boolean;
     handleClose: () => void;
-    view?: StakeDialogView;
-    setView?: (view: StakeDialogView) => void;
+    view: StakeDialogView | undefined;
+    setView: (view: StakeDialogView) => void;
     stakedDetails?: ExtendedDelegatedStake | null;
     maxStakableTimelockedAmount?: bigint;
     isTimelockedStaking?: boolean;
@@ -71,6 +65,7 @@ export function StakeDialog({
     const senderAddress = account?.address ?? '';
     const { data: iotaBalance } = useBalance(senderAddress!);
     const coinBalance = BigInt(iotaBalance?.totalBalance || 0);
+    const [txDigest, setTxDigest] = useState<string>('');
 
     const { data: metadata } = useCoinMetadata(IOTA_TYPE_ARG);
     const coinDecimals = metadata?.decimals ?? 0;
@@ -166,19 +161,16 @@ export function StakeDialog({
             },
             {
                 onSuccess: (tx) => {
-                    if (onSuccess) {
-                        onSuccess(tx.digest);
-                    }
+                    onSuccess?.(tx.digest);
+                    addNotification('Stake transaction has been sent');
+                    setTxDigest(tx.digest);
+                    setView?.(StakeDialogView.TransactionDetails);
+                },
+                onError: () => {
+                    addNotification('Stake transaction was not sent', NotificationType.Error);
                 },
             },
-        )
-            .then(() => {
-                handleClose();
-                addNotification('Stake transaction has been sent');
-            })
-            .catch(() => {
-                addNotification('Stake transaction was not sent', NotificationType.Error);
-            });
+        );
     }
 
     function onSubmit(_: FormValues, { resetForm }: FormikHelpers<FormValues>) {
@@ -236,6 +228,9 @@ export function StakeDialog({
                             showActiveStatus
                         />
                     )}
+                    {view === StakeDialogView.TransactionDetails && (
+                        <TransactionDialogView txDigest={txDigest} onClose={handleClose} />
+                    )}
                 </>
             </FormikProvider>
         </Dialog>
diff --git a/apps/wallet-dashboard/components/Dialogs/Staking/enums/index.ts b/apps/wallet-dashboard/components/Dialogs/Staking/enums/index.ts
new file mode 100644
index 00000000000..6f408e39b8c
--- /dev/null
+++ b/apps/wallet-dashboard/components/Dialogs/Staking/enums/index.ts
@@ -0,0 +1,4 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './view.enums';
diff --git a/apps/wallet-dashboard/components/Dialogs/Staking/enums/view.enums.ts b/apps/wallet-dashboard/components/Dialogs/Staking/enums/view.enums.ts
new file mode 100644
index 00000000000..1bdb66a93ed
--- /dev/null
+++ b/apps/wallet-dashboard/components/Dialogs/Staking/enums/view.enums.ts
@@ -0,0 +1,11 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export enum StakeDialogView {
+    Details = 'Details',
+    SelectValidator = 'SelectValidator',
+    EnterAmount = 'EnterAmount',
+    Unstake = 'Unstake',
+    EnterTimelockedAmount = 'EnterTimelockedAmount',
+    TransactionDetails = 'TransactionDetails',
+}
diff --git a/apps/wallet-dashboard/components/Dialogs/Staking/hooks/useStakeDialog.ts b/apps/wallet-dashboard/components/Dialogs/Staking/hooks/useStakeDialog.ts
index f14b97db803..7d1c44f6e89 100644
--- a/apps/wallet-dashboard/components/Dialogs/Staking/hooks/useStakeDialog.ts
+++ b/apps/wallet-dashboard/components/Dialogs/Staking/hooks/useStakeDialog.ts
@@ -3,8 +3,7 @@
 
 import { useState } from 'react';
 import { ExtendedDelegatedStake } from '@iota/core';
-
-import { StakeDialogView } from '@/components/Dialogs/Staking/StakeDialog';
+import { StakeDialogView } from '../enums/view.enums';
 
 export function useStakeDialog() {
     const [stakeDialogView, setStakeDialogView] = useState<StakeDialogView | undefined>();
diff --git a/apps/wallet-dashboard/components/Dialogs/Staking/index.ts b/apps/wallet-dashboard/components/Dialogs/Staking/index.ts
index e865a70c7d2..bf9af6d49a4 100644
--- a/apps/wallet-dashboard/components/Dialogs/Staking/index.ts
+++ b/apps/wallet-dashboard/components/Dialogs/Staking/index.ts
@@ -1,5 +1,6 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
+export * from './enums';
 export * from './StakeDialog';
 export * from './hooks';
diff --git a/apps/wallet-dashboard/components/Dialogs/Staking/views/DetailsView.tsx b/apps/wallet-dashboard/components/Dialogs/Staking/views/DetailsView.tsx
index 7e81f984e79..0cdba0031e1 100644
--- a/apps/wallet-dashboard/components/Dialogs/Staking/views/DetailsView.tsx
+++ b/apps/wallet-dashboard/components/Dialogs/Staking/views/DetailsView.tsx
@@ -30,7 +30,7 @@ import {
 } from '@iota/apps-ui-kit';
 import { Warning } from '@iota/ui-icons';
 import { formatAddress, IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
-import { Layout, LayoutFooter, LayoutBody } from './Layout';
+import { DialogLayout, DialogLayoutFooter, DialogLayoutBody } from '../../layout';
 
 interface StakeDialogProps {
     stakedDetails: ExtendedDelegatedStake;
@@ -101,9 +101,9 @@ export function DetailsView({
     }
 
     return (
-        <Layout>
+        <DialogLayout>
             <Header title="Validator" onClose={handleClose} onBack={handleClose} titleCentered />
-            <LayoutBody>
+            <DialogLayoutBody>
                 <div className="flex w-full flex-col gap-md">
                     <Card type={CardType.Filled}>
                         <CardImage>
@@ -144,8 +144,8 @@ export function DetailsView({
                         </div>
                     </Panel>
                 </div>
-            </LayoutBody>
-            <LayoutFooter>
+            </DialogLayoutBody>
+            <DialogLayoutFooter>
                 <div className="flex w-full gap-sm">
                     <Button
                         type={ButtonType.Secondary}
@@ -160,7 +160,7 @@ export function DetailsView({
                         fullWidth
                     />
                 </div>
-            </LayoutFooter>
-        </Layout>
+            </DialogLayoutFooter>
+        </DialogLayout>
     );
 }
diff --git a/apps/wallet-dashboard/components/Dialogs/Staking/views/EnterAmountView.tsx b/apps/wallet-dashboard/components/Dialogs/Staking/views/EnterAmountView.tsx
index 13898ddf941..b3869faed2b 100644
--- a/apps/wallet-dashboard/components/Dialogs/Staking/views/EnterAmountView.tsx
+++ b/apps/wallet-dashboard/components/Dialogs/Staking/views/EnterAmountView.tsx
@@ -30,7 +30,7 @@ import { useCurrentAccount, useIotaClientQuery } from '@iota/dapp-kit';
 
 import { Validator } from './Validator';
 import { StakedInfo } from './StakedInfo';
-import { Layout, LayoutBody, LayoutFooter } from './Layout';
+import { DialogLayout, DialogLayoutBody, DialogLayoutFooter } from '../../layout';
 
 export interface FormValues {
     amount: string;
@@ -90,9 +90,9 @@ function EnterAmountView({
         maxTokenBalance > parseAmount(values.amount, decimals) + BigInt(2) * gasBudgetBigInt;
 
     return (
-        <Layout>
+        <DialogLayout>
             <Header title="Enter amount" onClose={handleClose} onBack={onBack} titleCentered />
-            <LayoutBody>
+            <DialogLayoutBody>
                 <div className="flex w-full flex-col justify-between">
                     <div>
                         <div className="mb-md">
@@ -167,8 +167,8 @@ function EnterAmountView({
                         </Panel>
                     </div>
                 </div>
-            </LayoutBody>
-            <LayoutFooter>
+            </DialogLayoutBody>
+            <DialogLayoutFooter>
                 <div className="flex w-full justify-between gap-sm">
                     <Button fullWidth type={ButtonType.Secondary} onClick={onBack} text="Back" />
                     <Button
@@ -179,8 +179,8 @@ function EnterAmountView({
                         text="Stake"
                     />
                 </div>
-            </LayoutFooter>
-        </Layout>
+            </DialogLayoutFooter>
+        </DialogLayout>
     );
 }
 
diff --git a/apps/wallet-dashboard/components/Dialogs/Staking/views/EnterTimelockedAmountView.tsx b/apps/wallet-dashboard/components/Dialogs/Staking/views/EnterTimelockedAmountView.tsx
index d4eebde373a..9eaeb41b6a2 100644
--- a/apps/wallet-dashboard/components/Dialogs/Staking/views/EnterTimelockedAmountView.tsx
+++ b/apps/wallet-dashboard/components/Dialogs/Staking/views/EnterTimelockedAmountView.tsx
@@ -23,7 +23,7 @@ import { useCurrentAccount, useIotaClientQuery } from '@iota/dapp-kit';
 
 import { Validator } from './Validator';
 import { StakedInfo } from './StakedInfo';
-import { Layout, LayoutBody, LayoutFooter } from './Layout';
+import { DialogLayout, DialogLayoutBody, DialogLayoutFooter } from '../../layout';
 
 export interface FormValues {
     amount: string;
@@ -72,9 +72,9 @@ function EnterTimelockedAmountView({
     );
 
     return (
-        <Layout>
+        <DialogLayout>
             <Header title="Enter amount" onClose={handleClose} onBack={onBack} titleCentered />
-            <LayoutBody>
+            <DialogLayoutBody>
                 <div className="flex w-full flex-col justify-between">
                     <div>
                         <div className="mb-md">
@@ -149,8 +149,8 @@ function EnterTimelockedAmountView({
                         </Panel>
                     </div>
                 </div>
-            </LayoutBody>
-            <LayoutFooter>
+            </DialogLayoutBody>
+            <DialogLayoutFooter>
                 <div className="flex w-full justify-between gap-sm">
                     <Button fullWidth type={ButtonType.Secondary} onClick={onBack} text="Back" />
                     <Button
@@ -172,8 +172,8 @@ function EnterTimelockedAmountView({
                         iconAfterText
                     />
                 </div>
-            </LayoutFooter>
-        </Layout>
+            </DialogLayoutFooter>
+        </DialogLayout>
     );
 }
 
diff --git a/apps/wallet-dashboard/components/Dialogs/Staking/views/SelectValidatorView.tsx b/apps/wallet-dashboard/components/Dialogs/Staking/views/SelectValidatorView.tsx
index f04641ee1df..626cbf05990 100644
--- a/apps/wallet-dashboard/components/Dialogs/Staking/views/SelectValidatorView.tsx
+++ b/apps/wallet-dashboard/components/Dialogs/Staking/views/SelectValidatorView.tsx
@@ -5,7 +5,7 @@ import React from 'react';
 import { Button, Header } from '@iota/apps-ui-kit';
 
 import { Validator } from './Validator';
-import { Layout, LayoutBody, LayoutFooter } from './Layout';
+import { DialogLayout, DialogLayoutBody, DialogLayoutFooter } from '../../layout';
 
 interface SelectValidatorViewProps {
     validators: string[];
@@ -23,9 +23,9 @@ function SelectValidatorView({
     handleClose,
 }: SelectValidatorViewProps): JSX.Element {
     return (
-        <Layout>
+        <DialogLayout>
             <Header title="Validator" onClose={handleClose} onBack={handleClose} titleCentered />
-            <LayoutBody>
+            <DialogLayoutBody>
                 <div className="flex w-full flex-col gap-md">
                     <div className="flex w-full flex-col">
                         {validators.map((validator) => (
@@ -38,18 +38,18 @@ function SelectValidatorView({
                         ))}
                     </div>
                 </div>
-            </LayoutBody>
+            </DialogLayoutBody>
             {!!selectedValidator && (
-                <LayoutFooter>
+                <DialogLayoutFooter>
                     <Button
                         fullWidth
                         data-testid="select-validator-cta"
                         onClick={onNext}
                         text="Next"
                     />
-                </LayoutFooter>
+                </DialogLayoutFooter>
             )}
-        </Layout>
+        </DialogLayout>
     );
 }
 
diff --git a/apps/wallet-dashboard/components/Dialogs/Staking/views/UnstakeView.tsx b/apps/wallet-dashboard/components/Dialogs/Staking/views/UnstakeView.tsx
index bb7913a3ecd..671184c9cea 100644
--- a/apps/wallet-dashboard/components/Dialogs/Staking/views/UnstakeView.tsx
+++ b/apps/wallet-dashboard/components/Dialogs/Staking/views/UnstakeView.tsx
@@ -30,7 +30,7 @@ import { useCurrentAccount, useSignAndExecuteTransaction } from '@iota/dapp-kit'
 import { Loader, Warning } from '@iota/ui-icons';
 import { useUnstakeTransaction } from '@/hooks';
 import { ValidatorStakingData } from '@/components';
-import { Layout, LayoutFooter, LayoutBody } from './Layout';
+import { DialogLayout, DialogLayoutFooter, DialogLayoutBody } from '../../layout';
 
 interface UnstakeDialogProps {
     extendedStake: ExtendedDelegatedStake;
@@ -129,9 +129,9 @@ export function UnstakeView({
     }
 
     return (
-        <Layout>
+        <DialogLayout>
             <Header title="Unstake" onClose={handleClose} onBack={handleClose} titleCentered />
-            <LayoutBody>
+            <DialogLayoutBody>
                 <div className="flex flex-col gap-y-md">
                     <ValidatorStakingData
                         validatorAddress={extendedStake.validatorAddress}
@@ -180,9 +180,9 @@ export function UnstakeView({
                         </div>
                     </Panel>
                 </div>
-            </LayoutBody>
+            </DialogLayoutBody>
 
-            <LayoutFooter>
+            <DialogLayoutFooter>
                 <Button
                     type={ButtonType.Secondary}
                     fullWidth
@@ -196,7 +196,7 @@ export function UnstakeView({
                     }
                     iconAfterText
                 />
-            </LayoutFooter>
-        </Layout>
+            </DialogLayoutFooter>
+        </DialogLayout>
     );
 }
diff --git a/apps/wallet-dashboard/components/Dialogs/Staking/views/Validator.tsx b/apps/wallet-dashboard/components/Dialogs/Staking/views/Validator.tsx
index cad60fda4c9..a76ed05db57 100644
--- a/apps/wallet-dashboard/components/Dialogs/Staking/views/Validator.tsx
+++ b/apps/wallet-dashboard/components/Dialogs/Staking/views/Validator.tsx
@@ -19,6 +19,7 @@ interface ValidatorProps {
     showActiveStatus?: boolean;
     onClick?: (address: string) => void;
     showAction?: boolean;
+    activeEpoch?: string;
 }
 
 export function Validator({
@@ -27,11 +28,26 @@ export function Validator({
     onClick,
     isSelected,
     showAction = true,
+    activeEpoch,
 }: ValidatorProps) {
-    const { name, newValidator, isAtRisk, apy, isApyApproxZero, validatorSummary } =
-        useValidatorInfo({
-            validatorAddress: address,
-        });
+    const {
+        name: validatorName,
+        newValidator,
+        isAtRisk,
+        apy,
+        isApyApproxZero,
+        validatorSummary,
+        system,
+    } = useValidatorInfo({
+        validatorAddress: address,
+    });
+
+    // for inactive validators, show the epoch number
+    const fallBackText = activeEpoch
+        ? `Staked ${Number(system?.epoch) - Number(activeEpoch)} epochs ago`
+        : '';
+
+    const validatorDisplayName = validatorName || fallBackText;
 
     const subtitle = showActiveStatus ? (
         <div className="flex items-center gap-1">
@@ -50,12 +66,12 @@ export function Validator({
             <CardImage>
                 <ImageIcon
                     src={validatorSummary?.imageUrl ?? null}
-                    label={name}
-                    fallback={name}
+                    label={validatorDisplayName}
+                    fallback={validatorDisplayName}
                     size={ImageIconSize.Large}
                 />
             </CardImage>
-            <CardBody title={name} subtitle={subtitle} isTextTruncated />
+            <CardBody title={validatorDisplayName} subtitle={subtitle} isTextTruncated />
             {showAction && (
                 <CardAction
                     type={CardActionType.SupportingText}
diff --git a/apps/wallet-dashboard/components/Dialogs/TransactionDialog.tsx b/apps/wallet-dashboard/components/Dialogs/TransactionDialog.tsx
new file mode 100644
index 00000000000..c1b6a845b01
--- /dev/null
+++ b/apps/wallet-dashboard/components/Dialogs/TransactionDialog.tsx
@@ -0,0 +1,59 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { Header, LoadingIndicator } from '@iota/apps-ui-kit';
+import { DialogLayout, DialogLayoutBody, DialogLayoutFooter } from './layout';
+import { ExplorerLink } from '../ExplorerLink';
+import {
+    ExplorerLinkType,
+    TransactionReceipt,
+    useGetTransactionWithSummary,
+    ViewTxnOnExplorerButton,
+} from '@iota/core';
+import { useCurrentAccount } from '@iota/dapp-kit';
+import { Validator } from './Staking/views/Validator';
+
+interface SharedProps {
+    txDigest?: string | null;
+}
+
+interface TransactionViewProps extends SharedProps {
+    onClose: () => void;
+    onBack?: () => void;
+}
+
+export function TransactionDialogView({
+    txDigest,
+    onClose,
+    onBack,
+}: TransactionViewProps): React.JSX.Element | null {
+    const activeAddress = useCurrentAccount()?.address ?? '';
+    const { data: transaction, summary } = useGetTransactionWithSummary(
+        txDigest ?? '',
+        activeAddress,
+    );
+
+    return (
+        <DialogLayout>
+            <Header title="Transaction" onClose={onClose} onBack={onBack} titleCentered />
+            <DialogLayoutBody>
+                {transaction && summary ? (
+                    <TransactionReceipt
+                        txn={transaction}
+                        activeAddress={activeAddress}
+                        summary={summary}
+                        renderExplorerLink={ExplorerLink}
+                        renderValidatorLogo={Validator}
+                    />
+                ) : (
+                    <LoadingIndicator />
+                )}
+            </DialogLayoutBody>
+            <DialogLayoutFooter>
+                <ExplorerLink transactionID={txDigest ?? ''} type={ExplorerLinkType.Transaction}>
+                    <ViewTxnOnExplorerButton digest={txDigest ?? ''} />
+                </ExplorerLink>
+            </DialogLayoutFooter>
+        </DialogLayout>
+    );
+}
diff --git a/apps/wallet-dashboard/components/Dialogs/Staking/views/Layout.tsx b/apps/wallet-dashboard/components/Dialogs/layout/DialogLayout.tsx
similarity index 76%
rename from apps/wallet-dashboard/components/Dialogs/Staking/views/Layout.tsx
rename to apps/wallet-dashboard/components/Dialogs/layout/DialogLayout.tsx
index 7986ce592d0..9405c120097 100644
--- a/apps/wallet-dashboard/components/Dialogs/Staking/views/Layout.tsx
+++ b/apps/wallet-dashboard/components/Dialogs/layout/DialogLayout.tsx
@@ -3,7 +3,7 @@
 import { PropsWithChildren } from 'react';
 import { DialogBody, DialogContent, DialogPosition } from '@iota/apps-ui-kit';
 
-export function Layout({ children }: PropsWithChildren) {
+export function DialogLayout({ children }: PropsWithChildren) {
     return (
         <DialogContent containerId="overlay-portal-container" position={DialogPosition.Right}>
             <div className="flex h-full flex-col">{children}</div>
@@ -11,7 +11,7 @@ export function Layout({ children }: PropsWithChildren) {
     );
 }
 
-export function LayoutBody({ children }: PropsWithChildren) {
+export function DialogLayoutBody({ children }: PropsWithChildren) {
     return (
         <div className="flex w-full flex-1 overflow-y-hidden [&_>div]:w-full [&_>div]:overflow-y-auto">
             <DialogBody>{children}</DialogBody>
@@ -19,6 +19,6 @@ export function LayoutBody({ children }: PropsWithChildren) {
     );
 }
 
-export function LayoutFooter({ children }: PropsWithChildren) {
+export function DialogLayoutFooter({ children }: PropsWithChildren) {
     return <div className="p-md--rs">{children}</div>;
 }
diff --git a/apps/wallet-dashboard/components/Dialogs/layout/index.ts b/apps/wallet-dashboard/components/Dialogs/layout/index.ts
new file mode 100644
index 00000000000..23dcbf8ce3d
--- /dev/null
+++ b/apps/wallet-dashboard/components/Dialogs/layout/index.ts
@@ -0,0 +1,4 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './DialogLayout';
diff --git a/apps/wallet-dashboard/components/Popup/Popups/TransactionDetailsPopup.tsx b/apps/wallet-dashboard/components/Popup/Popups/TransactionDetailsPopup.tsx
deleted file mode 100644
index bb622c166dd..00000000000
--- a/apps/wallet-dashboard/components/Popup/Popups/TransactionDetailsPopup.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-// Copyright (c) 2024 IOTA Stiftung
-// SPDX-License-Identifier: Apache-2.0
-
-import React, { PropsWithChildren } from 'react';
-import { ExtendedTransaction } from '@/lib/interfaces';
-import {
-    formatDate,
-    useExtendedTransactionSummary,
-    STAKING_REQUEST_EVENT,
-    UNSTAKING_REQUEST_EVENT,
-} from '@iota/core';
-import {
-    StakeTransactionCard,
-    TransactionSummary,
-    UnstakeTransactionCard,
-} from '@/components/transactions';
-
-interface TransactionDetailsPopupProps {
-    transaction: ExtendedTransaction;
-    onClose: () => void;
-}
-
-function LabeledValue({ label, children }: PropsWithChildren<{ label: string }>): JSX.Element {
-    return (
-        <div className="flex flex-row gap-2">
-            <h3 className="text-md">
-                <span className="font-semibold">{label}</span>:
-            </h3>
-            <p className="capitalize">{children}</p>
-        </div>
-    );
-}
-
-export default function TransactionDetailsPopup({
-    transaction,
-    onClose,
-}: TransactionDetailsPopupProps): JSX.Element {
-    const { raw: rawTransaction } = transaction;
-    const { events } = rawTransaction;
-
-    const transactionSummary = useExtendedTransactionSummary(rawTransaction.digest);
-
-    const txDate = !Number.isNaN(rawTransaction.timestampMs)
-        ? formatDate(Number(rawTransaction.timestampMs), ['month', 'day', 'hour', 'minute'])
-        : undefined;
-
-    const stakedTxn = events?.find(({ type }) => type === STAKING_REQUEST_EVENT);
-    const unstakeTxn = events?.find(({ type }) => type === UNSTAKING_REQUEST_EVENT);
-
-    return (
-        <div className="flex w-full min-w-[30vw] flex-col gap-6">
-            <div className="flex w-full flex-col">
-                <h2 className="mx-auto font-semibold">Transaction Details</h2>
-            </div>
-
-            <div className="flex flex-col space-y-1">
-                <LabeledValue label="Status">{transaction.state}</LabeledValue>
-                <LabeledValue label="Action">{transaction.action}</LabeledValue>
-                <LabeledValue label="Timestamp">{txDate}</LabeledValue>
-            </div>
-
-            <div className="w-full py-2">
-                <div className="mb-2 block text-center font-bold">Transaction Summary</div>
-                <TransactionSummary summary={transactionSummary} showGasSummary />
-            </div>
-
-            {(stakedTxn || unstakeTxn) && (
-                <div className="flex flex-col space-y-2 rounded-lg">
-                    {stakedTxn && <StakeTransactionCard event={stakedTxn} />}
-                    {unstakeTxn && <UnstakeTransactionCard event={unstakeTxn} />}
-                </div>
-            )}
-        </div>
-    );
-}
diff --git a/apps/wallet-dashboard/components/Popup/Popups/index.ts b/apps/wallet-dashboard/components/Popup/Popups/index.ts
index e0e4a17db69..ebdfc7f7391 100644
--- a/apps/wallet-dashboard/components/Popup/Popups/index.ts
+++ b/apps/wallet-dashboard/components/Popup/Popups/index.ts
@@ -1,7 +1,6 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-export { default as TransactionDetailsPopup } from './TransactionDetailsPopup';
 export { default as UnstakePopup } from './UnstakePopup';
 export { default as SendAssetPopup } from './SendAssetPopup';
 
diff --git a/apps/wallet-dashboard/components/transactions/GasSummary.tsx b/apps/wallet-dashboard/components/transactions/GasSummary.tsx
deleted file mode 100644
index 3b522432a40..00000000000
--- a/apps/wallet-dashboard/components/transactions/GasSummary.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-// Copyright (c) Mysten Labs, Inc.
-// Modifications Copyright (c) 2024 IOTA Stiftung
-// SPDX-License-Identifier: Apache-2.0
-
-import { useFormatCoin, type GasSummaryType } from '@iota/core';
-import { useCurrentAccount } from '@iota/dapp-kit';
-import { formatAddress, IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
-
-export default function GasSummary({ gasSummary }: { gasSummary: GasSummaryType }) {
-    const [gas, symbol] = useFormatCoin(gasSummary?.totalGas, IOTA_TYPE_ARG);
-    const address = useCurrentAccount();
-
-    return (
-        <div className="rounded-lg border border-solid border-black p-3">
-            <h3 className="text-center font-semibold">Gas Fees</h3>
-            <div className="flex w-full flex-col items-center gap-2 px-4 py-3">
-                <div className="flex items-center justify-center gap-4">
-                    {address?.address === gasSummary?.owner && (
-                        <div className="mr-auto">You Paid</div>
-                    )}
-                    <p>
-                        {gasSummary?.isSponsored ? '0' : gas} {symbol}
-                    </p>
-                </div>
-                {gasSummary?.isSponsored && gasSummary.owner && (
-                    <>
-                        <div className="flex w-full justify-between">
-                            Paid by Sponsor
-                            {gas} {symbol}
-                        </div>
-                        <div className="flex w-full justify-between">
-                            Sponsor:
-                            {formatAddress(gasSummary.owner)}
-                        </div>
-                    </>
-                )}
-            </div>
-        </div>
-    );
-}
diff --git a/apps/wallet-dashboard/components/transactions/TransactionSummary.tsx b/apps/wallet-dashboard/components/transactions/TransactionSummary.tsx
index 94a8db43b57..6cca89942ca 100644
--- a/apps/wallet-dashboard/components/transactions/TransactionSummary.tsx
+++ b/apps/wallet-dashboard/components/transactions/TransactionSummary.tsx
@@ -1,20 +1,25 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { type TransactionSummary as TransactionSummaryType } from '@iota/core';
-import { BalanceChanges, ObjectChanges, GasSummary } from './';
+import { type TransactionSummaryType, GasSummary } from '@iota/core';
+import { BalanceChanges, ObjectChanges } from '@iota/core';
+import { ExplorerLink } from '../ExplorerLink';
+
+interface TransactionSummaryProps {
+    summary: TransactionSummaryType;
+    activeAddress: string | null | undefined;
+    isLoading?: boolean;
+    isError?: boolean;
+    showGasSummary?: boolean;
+}
 
 export default function TransactionSummary({
     summary,
     isLoading,
     isError,
     showGasSummary = false,
-}: {
-    summary: TransactionSummaryType;
-    isLoading?: boolean;
-    isError?: boolean;
-    showGasSummary?: boolean;
-}) {
+    activeAddress,
+}: TransactionSummaryProps) {
     if (isError) return null;
     if (isLoading) return <div>Loading...</div>;
     if (!summary || (!summary.balanceChanges && !summary.objectSummary && !summary.gas))
@@ -25,16 +30,28 @@ export default function TransactionSummary({
             {summary.balanceChanges && (
                 <div className="rounded-md border border-gray-600 p-2">
                     <h4 className="text-center font-semibold">Balance Changes</h4>
-                    <BalanceChanges balanceChanges={summary.balanceChanges} />
+                    <BalanceChanges
+                        changes={summary.balanceChanges}
+                        renderExplorerLink={ExplorerLink}
+                    />
                 </div>
             )}
             {summary.objectSummary && (
                 <div className="rounded-md border border-gray-600 p-2">
                     <h4 className="text-center font-semibold">Changes</h4>
-                    <ObjectChanges objectSummary={summary.objectSummary} />
+                    <ObjectChanges
+                        changes={summary.objectSummary}
+                        renderExplorerLink={ExplorerLink}
+                    />
                 </div>
             )}
-            {showGasSummary && summary.gas && <GasSummary gasSummary={summary.gas} />}
+            {showGasSummary && summary.gas && (
+                <GasSummary
+                    gasSummary={summary.gas}
+                    renderExplorerLink={ExplorerLink}
+                    activeAddress={activeAddress}
+                />
+            )}
         </div>
     );
 }
diff --git a/apps/wallet-dashboard/components/transactions/TransactionTile.tsx b/apps/wallet-dashboard/components/transactions/TransactionTile.tsx
index cb029808b3c..405a02e76c6 100644
--- a/apps/wallet-dashboard/components/transactions/TransactionTile.tsx
+++ b/apps/wallet-dashboard/components/transactions/TransactionTile.tsx
@@ -3,11 +3,10 @@
 
 'use client';
 
-import React from 'react';
+import React, { useState } from 'react';
 import TransactionIcon from './TransactionIcon';
 import formatTimestamp from '@/lib/utils/time';
-import { usePopups } from '@/hooks';
-import { TransactionDetailsPopup } from '@/components';
+import { ExplorerLink } from '@/components';
 import { ExtendedTransaction, TransactionState } from '@/lib/interfaces';
 import {
     Card,
@@ -18,57 +17,121 @@ import {
     CardBody,
     CardAction,
     CardActionType,
+    Dialog,
+    Header,
+    LoadingIndicator,
 } from '@iota/apps-ui-kit';
-import { useFormatCoin, useExtendedTransactionSummary, getLabel } from '@iota/core';
+import {
+    useFormatCoin,
+    getLabel,
+    useTransactionSummary,
+    ViewTxnOnExplorerButton,
+    ExplorerLinkType,
+    TransactionReceipt,
+} from '@iota/core';
 import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
 import { useCurrentAccount } from '@iota/dapp-kit';
+import { DialogLayout, DialogLayoutBody, DialogLayoutFooter } from '../Dialogs/layout';
+import { Validator } from '../Dialogs/Staking/views/Validator';
 
 interface TransactionTileProps {
     transaction: ExtendedTransaction;
 }
 
-function TransactionTile({ transaction }: TransactionTileProps): JSX.Element {
+export function TransactionTile({ transaction }: TransactionTileProps): JSX.Element {
     const account = useCurrentAccount();
     const address = account?.address;
-    const { openPopup, closePopup } = usePopups();
+    const [open, setOpen] = useState(false);
 
-    const transactionSummary = useExtendedTransactionSummary(transaction.raw.digest);
+    const transactionSummary = useTransactionSummary({
+        transaction: transaction.raw,
+        currentAddress: account?.address,
+        recognizedPackagesList: [],
+    });
     const [formatAmount, symbol] = useFormatCoin(
         Math.abs(Number(address ? transactionSummary?.balanceChanges?.[address]?.[0]?.amount : 0)),
         IOTA_TYPE_ARG,
     );
 
-    const handleDetailsClick = () => {
-        openPopup(<TransactionDetailsPopup transaction={transaction} onClose={closePopup} />);
-    };
+    function openDetailsDialog() {
+        setOpen(true);
+    }
 
     const transactionDate = transaction?.timestamp && formatTimestamp(transaction.timestamp);
+
     return (
-        <Card type={CardType.Default} isHoverable onClick={handleDetailsClick}>
-            <CardImage type={ImageType.BgSolid} shape={ImageShape.SquareRounded}>
-                <TransactionIcon
-                    txnFailed={transaction.state === TransactionState.Failed}
-                    variant={getLabel(transaction?.raw, address)}
+        <>
+            <Card type={CardType.Default} isHoverable onClick={openDetailsDialog}>
+                <CardImage type={ImageType.BgSolid} shape={ImageShape.SquareRounded}>
+                    <TransactionIcon
+                        txnFailed={transaction.state === TransactionState.Failed}
+                        variant={getLabel(transaction?.raw, address)}
+                    />
+                </CardImage>
+                <CardBody
+                    title={
+                        transaction.state === TransactionState.Failed
+                            ? 'Transaction Failed'
+                            : (transaction.action ?? 'Unknown')
+                    }
+                    subtitle={transactionDate}
+                />
+                <CardAction
+                    type={CardActionType.SupportingText}
+                    title={
+                        transaction.state === TransactionState.Failed
+                            ? '--'
+                            : `${formatAmount} ${symbol}`
+                    }
                 />
-            </CardImage>
-            <CardBody
-                title={
-                    transaction.state === TransactionState.Failed
-                        ? 'Transaction Failed'
-                        : (transaction.action ?? 'Unknown')
-                }
-                subtitle={transactionDate}
-            />
-            <CardAction
-                type={CardActionType.SupportingText}
-                title={
-                    transaction.state === TransactionState.Failed
-                        ? '--'
-                        : `${formatAmount} ${symbol}`
-                }
-            />
-        </Card>
+            </Card>
+            <ActivityDetailsDialog transaction={transaction} open={open} setOpen={setOpen} />
+        </>
     );
 }
 
-export default TransactionTile;
+interface ActivityDetailsDialogProps {
+    transaction: ExtendedTransaction;
+    open: boolean;
+    setOpen: (open: boolean) => void;
+}
+function ActivityDetailsDialog({
+    transaction,
+    open,
+    setOpen,
+}: ActivityDetailsDialogProps): React.JSX.Element {
+    const address = useCurrentAccount()?.address ?? '';
+
+    const summary = useTransactionSummary({
+        transaction: transaction.raw,
+        currentAddress: address,
+        recognizedPackagesList: [],
+    });
+
+    if (!summary) return <LoadingIndicator />;
+
+    return (
+        <Dialog open={open} onOpenChange={setOpen}>
+            <DialogLayout>
+                <Header title="Transaction" onClose={() => setOpen(false)} />
+                <DialogLayoutBody>
+                    <TransactionReceipt
+                        txn={transaction.raw}
+                        activeAddress={address}
+                        summary={summary}
+                        renderExplorerLink={ExplorerLink}
+                        renderValidatorLogo={Validator}
+                    />
+                </DialogLayoutBody>
+                <DialogLayoutFooter>
+                    <ExplorerLink
+                        type={ExplorerLinkType.Transaction}
+                        transactionID={transaction.raw.digest}
+                    >
+                        <ViewTxnOnExplorerButton digest={transaction.raw.digest} />
+                    </ExplorerLink>
+                </DialogLayoutFooter>
+            </DialogLayout>
+        </Dialog>
+    );
+}
diff --git a/apps/wallet-dashboard/components/transactions/balance-changes/BalanceChangeEntries.tsx b/apps/wallet-dashboard/components/transactions/balance-changes/BalanceChangeEntries.tsx
deleted file mode 100644
index 14cc9ad7891..00000000000
--- a/apps/wallet-dashboard/components/transactions/balance-changes/BalanceChangeEntries.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-// Copyright (c) 2024 IOTA Stiftung
-// SPDX-License-Identifier: Apache-2.0
-
-import { BalanceChange } from '@iota/core';
-import { useMemo } from 'react';
-import { BalanceChangeEntry } from '.';
-import { getRecognizedUnRecognizedTokenChanges } from '@iota/core';
-
-interface BalanceChangeEntriesProps {
-    balanceChanges: BalanceChange[];
-}
-
-export default function BalanceChangeEntries({
-    balanceChanges: changes,
-}: BalanceChangeEntriesProps) {
-    const { recognizedTokenChanges, unRecognizedTokenChanges } = useMemo(
-        () => getRecognizedUnRecognizedTokenChanges(changes),
-        [changes],
-    );
-
-    return (
-        <div>
-            {[...recognizedTokenChanges, ...unRecognizedTokenChanges].map(
-                (balanceChange, index) => (
-                    <BalanceChangeEntry balanceChange={balanceChange} key={index} />
-                ),
-            )}
-        </div>
-    );
-}
diff --git a/apps/wallet-dashboard/components/transactions/balance-changes/BalanceChangeEntry.tsx b/apps/wallet-dashboard/components/transactions/balance-changes/BalanceChangeEntry.tsx
deleted file mode 100644
index c4b9f85279f..00000000000
--- a/apps/wallet-dashboard/components/transactions/balance-changes/BalanceChangeEntry.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-// Copyright (c) 2024 IOTA Stiftung
-// SPDX-License-Identifier: Apache-2.0
-
-import { BalanceChange, CoinFormat, useFormatCoin, useCoinMetadata } from '@iota/core';
-import { formatAddress } from '@iota/iota-sdk/utils';
-
-interface BalanceChangeEntryProps {
-    balanceChange: BalanceChange;
-}
-
-export default function BalanceChangeEntry({
-    balanceChange: { amount, coinType, unRecognizedToken, owner },
-}: BalanceChangeEntryProps) {
-    const [formatted, symbol] = useFormatCoin(amount, coinType, CoinFormat.FULL);
-    const { data: coinMetaData } = useCoinMetadata(coinType);
-
-    const isPositive = BigInt(amount) > 0n;
-
-    return (
-        <div className="flex flex-col py-2">
-            <div className="flex flex-row justify-between space-x-2 py-2">
-                <div className="flex flex-row items-center gap-2">
-                    <span className="font-medium">{coinMetaData?.name || symbol}</span>
-                    {unRecognizedToken && <div>Unrecognized</div>}
-                </div>
-                <div className={`flex flex-row gap-2 ${!isPositive ? 'text-red-600' : ''}`}>
-                    {isPositive && <>+</>}
-                    {formatted} {symbol}
-                </div>
-            </div>
-            {owner && (
-                <div className="flex w-full flex-row justify-between space-x-2 border-t pt-1">
-                    <span>Owner</span>
-                    <span>{formatAddress(owner)}</span>
-                </div>
-            )}
-        </div>
-    );
-}
diff --git a/apps/wallet-dashboard/components/transactions/balance-changes/BalanceChanges.tsx b/apps/wallet-dashboard/components/transactions/balance-changes/BalanceChanges.tsx
deleted file mode 100644
index 34c507c62d7..00000000000
--- a/apps/wallet-dashboard/components/transactions/balance-changes/BalanceChanges.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-// Copyright (c) 2024 IOTA Stiftung
-// SPDX-License-Identifier: Apache-2.0
-
-import { BalanceChange } from '@iota/core';
-import { BalanceChangeEntries } from '.';
-
-interface BalanceChangesProps {
-    balanceChanges: Record<string, BalanceChange[]>;
-}
-
-export default function BalanceChanges({ balanceChanges }: BalanceChangesProps) {
-    return (
-        <>
-            {Object.entries(balanceChanges).map(([owner, balanceChanges], index) => (
-                <BalanceChangeEntries balanceChanges={balanceChanges} key={owner + index} />
-            ))}
-        </>
-    );
-}
diff --git a/apps/wallet-dashboard/components/transactions/balance-changes/index.ts b/apps/wallet-dashboard/components/transactions/balance-changes/index.ts
deleted file mode 100644
index 6c5ea510eb1..00000000000
--- a/apps/wallet-dashboard/components/transactions/balance-changes/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-// Copyright (c) 2024 IOTA Stiftung
-// SPDX-License-Identifier: Apache-2.0
-
-export { default as BalanceChangeEntry } from './BalanceChangeEntry';
-export { default as BalanceChangeEntries } from './BalanceChangeEntries';
-export { default as BalanceChanges } from './BalanceChanges';
diff --git a/apps/wallet-dashboard/components/transactions/index.ts b/apps/wallet-dashboard/components/transactions/index.ts
index 7602efd1395..509933e7c10 100644
--- a/apps/wallet-dashboard/components/transactions/index.ts
+++ b/apps/wallet-dashboard/components/transactions/index.ts
@@ -1,15 +1,11 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-export { default as GasSummary } from './GasSummary';
 export { default as TransactionAmount } from './TransactionAmount';
 export { default as StakeTransactionCard } from './StakeTransactionCard';
 export { default as UnstakeTransactionCard } from './UnstakeTransactionCard';
 export { default as TransactionSummary } from './TransactionSummary';
-export { default as TransactionTile } from './TransactionTile';
+export * from './TransactionTile';
 export { default as TransactionIcon } from './TransactionIcon';
 export { default as TransactionsList } from './TransactionsList';
 export { default as TransactionsOverview } from './TransactionsOverview';
-
-export * from './balance-changes';
-export * from './object-changes';
diff --git a/apps/wallet-dashboard/components/transactions/object-changes/ObjectChangeEntry.tsx b/apps/wallet-dashboard/components/transactions/object-changes/ObjectChangeEntry.tsx
deleted file mode 100644
index 9d386d6e6d3..00000000000
--- a/apps/wallet-dashboard/components/transactions/object-changes/ObjectChangeEntry.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-// Copyright (c) 2024 IOTA Stiftung
-// SPDX-License-Identifier: Apache-2.0
-
-import { ObjectChangesByOwner, IotaObjectChangeTypes } from '@iota/core';
-import { IotaObjectChange } from '@iota/iota-sdk/client';
-import { ObjectDetail } from '.';
-import React from 'react';
-
-interface ObjectChangeEntryProps {
-    changes: ObjectChangesByOwner;
-    type: IotaObjectChangeTypes;
-}
-
-export default function ObjectChangeEntry({ changes, type }: ObjectChangeEntryProps) {
-    return (
-        <>
-            {Object.entries(changes).map(([owner, changes]) => (
-                <div className="flex flex-col space-y-2 divide-y" key={`${type}-${owner}`}>
-                    {changes.changes.map((change) => (
-                        <ObjectDetail
-                            owner={owner}
-                            ownerType={changes.ownerType}
-                            key={getChangeKey(change)}
-                            change={change}
-                        />
-                    ))}
-                    {changes.changesWithDisplay.map((change) => (
-                        <ObjectDetail
-                            owner={owner}
-                            ownerType={changes.ownerType}
-                            key={getChangeKey(change)}
-                            change={change}
-                            displayData={change.display}
-                        />
-                    ))}
-                </div>
-            ))}
-        </>
-    );
-}
-
-function getChangeKey(change: IotaObjectChange) {
-    return change.type !== 'deleted' && change.type !== 'wrapped' ? change.digest : change.objectId;
-}
diff --git a/apps/wallet-dashboard/components/transactions/object-changes/ObjectChanges.tsx b/apps/wallet-dashboard/components/transactions/object-changes/ObjectChanges.tsx
deleted file mode 100644
index b3b246e6f0e..00000000000
--- a/apps/wallet-dashboard/components/transactions/object-changes/ObjectChanges.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-// Copyright (c) 2024 IOTA Stiftung
-// SPDX-License-Identifier: Apache-2.0
-
-import { ObjectChangeSummary, IotaObjectChangeTypes } from '@iota/core';
-import { ObjectChangeEntry } from '.';
-
-interface ObjectChangesProps {
-    objectSummary: ObjectChangeSummary;
-}
-
-export default function ObjectChanges({ objectSummary }: ObjectChangesProps) {
-    return (
-        <>
-            {Object.entries(objectSummary).map(([type, changes]) => (
-                <ObjectChangeEntry
-                    key={type}
-                    type={type as IotaObjectChangeTypes}
-                    changes={changes}
-                />
-            ))}
-        </>
-    );
-}
diff --git a/apps/wallet-dashboard/components/transactions/object-changes/ObjectDetail.tsx b/apps/wallet-dashboard/components/transactions/object-changes/ObjectDetail.tsx
deleted file mode 100644
index 2a4204d5acf..00000000000
--- a/apps/wallet-dashboard/components/transactions/object-changes/ObjectDetail.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-// Copyright (c) 2024 IOTA Stiftung
-// SPDX-License-Identifier: Apache-2.0
-
-import {
-    IotaObjectChangeWithDisplay,
-    getObjectChangeLabel,
-    getOwnerDisplay,
-    parseObjectChangeDetails,
-} from '@iota/core';
-import { useCurrentAccount } from '@iota/dapp-kit';
-import { DisplayFieldsResponse, IotaObjectChange } from '@iota/iota-sdk/client';
-import { formatAddress, isValidIotaAddress } from '@iota/iota-sdk/utils';
-
-enum ObjectDetailLabel {
-    Package = 'Package',
-    Module = 'Module',
-    Type = 'Type',
-}
-
-interface ObjectDetailProps {
-    change: IotaObjectChange | IotaObjectChangeWithDisplay;
-    owner: string;
-    ownerType: string;
-    displayData?: DisplayFieldsResponse;
-}
-
-export default function ObjectDetail({ change, owner, ownerType, displayData }: ObjectDetailProps) {
-    const address = useCurrentAccount()?.address;
-    if (!address) return null;
-
-    const { ownerDisplay } = getOwnerDisplay(owner, ownerType, address);
-
-    if (change.type === 'transferred' || change.type === 'published') {
-        return null;
-    }
-
-    const [packageId, moduleName, typeName] = parseObjectChangeDetails(change);
-
-    const objectDetails: {
-        label: ObjectDetailLabel;
-        value: string;
-    }[] = [
-        {
-            label: ObjectDetailLabel.Package,
-            value: packageId,
-        },
-        {
-            label: ObjectDetailLabel.Module,
-            value: moduleName,
-        },
-        {
-            label: ObjectDetailLabel.Type,
-            value: typeName,
-        },
-    ];
-
-    return (
-        <div className="py-2">
-            <h4 className="text-center font-semibold">{getObjectChangeLabel(change.type)}</h4>
-
-            <div className="flex flex-row items-center justify-between py-2">
-                <div className="flex flex-col">
-                    {change.objectId && (
-                        <div className="flex flex-row space-x-2">
-                            <span className="font-semibold">Object</span>
-                            <div title={change.objectId}>{formatAddress(change.objectId)}</div>
-                        </div>
-                    )}
-
-                    {objectDetails.map((item) => {
-                        const shouldFormatValue = isValidIotaAddress(item.value);
-                        return (
-                            <div key={item.label} className="flex flex-row space-x-2">
-                                <span className="font-semibold">{item.label}</span>
-                                <div title={shouldFormatValue ? item.value : undefined}>
-                                    {shouldFormatValue ? formatAddress(item.value) : item.value}
-                                </div>
-                            </div>
-                        );
-                    })}
-                </div>
-
-                {displayData && displayData.data && (
-                    // eslint-disable-next-line @next/next/no-img-element
-                    <img
-                        src={displayData.data.image_url}
-                        alt={displayData.data.name}
-                        height={100}
-                        width={100}
-                    />
-                )}
-            </div>
-
-            {ownerDisplay && (
-                <div className="flex flex-row justify-between space-x-2 border-t pt-1">
-                    <span>Owner</span>
-                    <span title={owner}>{ownerDisplay}</span>
-                </div>
-            )}
-        </div>
-    );
-}
diff --git a/apps/wallet-dashboard/components/transactions/object-changes/index.ts b/apps/wallet-dashboard/components/transactions/object-changes/index.ts
deleted file mode 100644
index 0e88da93730..00000000000
--- a/apps/wallet-dashboard/components/transactions/object-changes/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-// Copyright (c) 2024 IOTA Stiftung
-// SPDX-License-Identifier: Apache-2.0
-
-export { default as ObjectChangeEntry } from './ObjectChangeEntry';
-export { default as ObjectChanges } from './ObjectChanges';
-export { default as ObjectDetail } from './ObjectDetail';
diff --git a/apps/wallet/src/ui/app/components/ExplorerLinkHelper.tsx b/apps/wallet/src/ui/app/components/ExplorerLinkHelper.tsx
new file mode 100644
index 00000000000..bbc381a0e44
--- /dev/null
+++ b/apps/wallet/src/ui/app/components/ExplorerLinkHelper.tsx
@@ -0,0 +1,9 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { RenderExplorerLinkProps } from '@iota/core';
+import ExplorerLink from './explorer-link';
+
+export function ExplorerLinkHelper({ children, ...linkProps }: RenderExplorerLinkProps) {
+    return <ExplorerLink {...linkProps}>{children}</ExplorerLink>;
+}
diff --git a/apps/wallet/src/ui/app/components/index.ts b/apps/wallet/src/ui/app/components/index.ts
index 5dd1c520da6..978c70b11b4 100644
--- a/apps/wallet/src/ui/app/components/index.ts
+++ b/apps/wallet/src/ui/app/components/index.ts
@@ -11,6 +11,7 @@ export * from './PasswordInputDialog';
 export * from './SectionHeader';
 export * from './SummaryCard';
 export * from './WalletListSelect';
+export * from './ExplorerLinkHelper';
 export * from './accounts';
 export * from './active-coins-card';
 export * from './error-boundary';
diff --git a/apps/wallet/src/ui/app/components/receipt-card/StakeTxn.tsx b/apps/wallet/src/ui/app/components/receipt-card/StakeTxn.tsx
deleted file mode 100644
index 94aa3c6285b..00000000000
--- a/apps/wallet/src/ui/app/components/receipt-card/StakeTxn.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-// Copyright (c) Mysten Labs, Inc.
-// Modifications Copyright (c) 2024 IOTA Stiftung
-// SPDX-License-Identifier: Apache-2.0
-
-import { ValidatorLogo } from '_app/staking/validators/ValidatorLogo';
-import { TxnAmount } from '_components';
-
-import { formatPercentageDisplay, type GasSummaryType, useGetValidatorsApy } from '@iota/core';
-import type { IotaEvent } from '@iota/iota-sdk/client';
-import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
-
-import { CardType } from '@iota/apps-ui-kit';
-import { StakeTxnInfo } from './StakeTxnInfo';
-
-interface StakeTxnProps {
-    event: IotaEvent;
-    gasSummary?: GasSummaryType;
-}
-
-// For Staked Transaction use moveEvent Field to get the validator address, delegation amount, epoch
-export function StakeTxn({ event, gasSummary }: StakeTxnProps) {
-    const json = event.parsedJson as {
-        amount: string;
-        validator_address: string;
-        epoch: string;
-    };
-    const validatorAddress = json?.validator_address;
-    const stakedAmount = json?.amount;
-    const stakedEpoch = Number(json?.epoch || '0');
-
-    const { data: rollingAverageApys } = useGetValidatorsApy();
-
-    const { apy, isApyApproxZero } = rollingAverageApys?.[validatorAddress] ?? {
-        apy: null,
-    };
-
-    return (
-        <div className="flex flex-col gap-y-md">
-            {validatorAddress && (
-                <ValidatorLogo
-                    validatorAddress={validatorAddress}
-                    type={CardType.Filled}
-                    showActiveStatus
-                    activeEpoch={json?.epoch}
-                />
-            )}
-            {stakedAmount && (
-                <TxnAmount amount={stakedAmount} coinType={IOTA_TYPE_ARG} subtitle="Stake" />
-            )}
-            <StakeTxnInfo
-                startEpoch={stakedEpoch}
-                apy={formatPercentageDisplay(apy, '--', isApyApproxZero)}
-                gasSummary={gasSummary}
-            />
-        </div>
-    );
-}
diff --git a/apps/wallet/src/ui/app/components/receipt-card/index.tsx b/apps/wallet/src/ui/app/components/receipt-card/index.tsx
index 9f75dc287f8..3bba1a45a7f 100644
--- a/apps/wallet/src/ui/app/components/receipt-card/index.tsx
+++ b/apps/wallet/src/ui/app/components/receipt-card/index.tsx
@@ -5,44 +5,16 @@
 import { useRecognizedPackages } from '_src/ui/app/hooks/useRecognizedPackages';
 import {
     useTransactionSummary,
-    STAKING_REQUEST_EVENT,
-    UNSTAKING_REQUEST_EVENT,
-    formatDate,
+    TransactionReceipt,
+    ExplorerLinkType,
+    ViewTxnOnExplorerButton,
 } from '@iota/core';
 import { type IotaTransactionBlockResponse } from '@iota/iota-sdk/client';
 
-import { TransactionSummary } from '../../shared/transaction-summary';
-import { StakeTxn } from './StakeTxn';
-import { UnStakeTxn } from './UnstakeTxn';
-import {
-    Button,
-    ButtonType,
-    InfoBox,
-    InfoBoxStyle,
-    InfoBoxType,
-    LoadingIndicator,
-} from '@iota/apps-ui-kit';
-import { ArrowTopRight, CheckmarkFilled } from '@iota/ui-icons';
-import { GasFees } from '../../pages/approval-request/transaction-request/GasFees';
-import ExplorerLink, { ExplorerLinkType } from '../explorer-link';
-
-interface TransactionStatusProps {
-    success: boolean;
-    timestamp?: string;
-}
-
-function TransactionStatus({ success, timestamp }: TransactionStatusProps) {
-    const txnDate = timestamp ? formatDate(Number(timestamp)) : '';
-    return (
-        <InfoBox
-            type={success ? InfoBoxType.Default : InfoBoxType.Error}
-            style={InfoBoxStyle.Elevated}
-            title={success ? 'Successfully sent' : 'Transaction Failed'}
-            supportingText={timestamp ? txnDate : ''}
-            icon={<CheckmarkFilled />}
-        ></InfoBox>
-    );
-}
+import { CardType } from '@iota/apps-ui-kit';
+import { ValidatorLogo } from '../../staking/validators/ValidatorLogo';
+import { ExplorerLinkHelper } from '../ExplorerLinkHelper';
+import ExplorerLink from '../explorer-link';
 
 interface ReceiptCardProps {
     txn: IotaTransactionBlockResponse;
@@ -50,60 +22,36 @@ interface ReceiptCardProps {
 }
 
 export function ReceiptCard({ txn, activeAddress }: ReceiptCardProps) {
-    const { events } = txn;
     const recognizedPackagesList = useRecognizedPackages();
     const summary = useTransactionSummary({
         transaction: txn,
         currentAddress: activeAddress,
         recognizedPackagesList,
     });
-    const isSender = txn.transaction?.data.sender === activeAddress;
 
     if (!summary) return null;
 
     const { digest } = summary;
-    const stakedTxn = events?.find(({ type }) => type === STAKING_REQUEST_EVENT);
-    const unstakeTxn = events?.find(({ type }) => type === UNSTAKING_REQUEST_EVENT);
 
     return (
         <div className="flex h-full w-full flex-col justify-between">
-            <div className="flex flex-col gap-md overflow-y-auto overflow-x-hidden">
-                <TransactionStatus
-                    success={summary.status === 'success'}
-                    timestamp={txn.timestampMs ?? undefined}
-                />
-                {stakedTxn || unstakeTxn ? (
-                    <>
-                        {stakedTxn ? (
-                            <StakeTxn event={stakedTxn} gasSummary={summary?.gas} />
-                        ) : null}
-                        {unstakeTxn ? (
-                            <UnStakeTxn event={unstakeTxn} gasSummary={summary?.gas} />
-                        ) : null}
-                    </>
-                ) : (
-                    <>
-                        <TransactionSummary summary={summary} />
-                        {isSender && <GasFees gasSummary={summary?.gas} />}
-                    </>
+            <TransactionReceipt
+                txn={txn}
+                summary={summary}
+                activeAddress={activeAddress}
+                renderExplorerLink={ExplorerLinkHelper}
+                renderValidatorLogo={({ address, showActiveStatus, activeEpoch, isSelected }) => (
+                    <ValidatorLogo
+                        validatorAddress={address}
+                        showActiveStatus={showActiveStatus}
+                        activeEpoch={activeEpoch}
+                        type={isSelected ? CardType.Filled : CardType.Outlined}
+                    />
                 )}
-            </div>
+            />
             <div className="pt-sm">
                 <ExplorerLink transactionID={digest ?? ''} type={ExplorerLinkType.Transaction}>
-                    <Button
-                        type={ButtonType.Outlined}
-                        text="View on Explorer"
-                        fullWidth
-                        icon={
-                            digest ? (
-                                <ArrowTopRight />
-                            ) : (
-                                <LoadingIndicator data-testid="loading-indicator" />
-                            )
-                        }
-                        iconAfterText
-                        disabled={!digest}
-                    />
+                    <ViewTxnOnExplorerButton digest={digest} />
                 </ExplorerLink>
             </div>
         </div>
diff --git a/apps/wallet/src/ui/app/pages/approval-request/transaction-request/index.tsx b/apps/wallet/src/ui/app/pages/approval-request/transaction-request/index.tsx
index d618abe0265..e3cf45db226 100644
--- a/apps/wallet/src/ui/app/pages/approval-request/transaction-request/index.tsx
+++ b/apps/wallet/src/ui/app/pages/approval-request/transaction-request/index.tsx
@@ -2,8 +2,8 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { UserApproveContainer } from '_components';
-import { useAppDispatch, useTransactionData, useTransactionDryRun } from '_hooks';
+import { ExplorerLinkHelper, UserApproveContainer } from '_components';
+import { useActiveAddress, useAppDispatch, useTransactionData, useTransactionDryRun } from '_hooks';
 import { type TransactionApprovalRequest } from '_payloads/transactions/ApprovalRequest';
 import { respondToTransactionRequest } from '_redux/slices/transaction-requests';
 import { ampli } from '_src/shared/analytics/ampli';
@@ -11,13 +11,11 @@ import { useAccountByAddress } from '_src/ui/app/hooks/useAccountByAddress';
 import { useRecognizedPackages } from '_src/ui/app/hooks/useRecognizedPackages';
 import { useSigner } from '_src/ui/app/hooks/useSigner';
 import { PageMainLayoutTitle } from '_src/ui/app/shared/page-main-layout/PageMainLayoutTitle';
-import { TransactionSummary } from '_src/ui/app/shared/transaction-summary';
-import { useTransactionSummary } from '@iota/core';
+import { useTransactionSummary, TransactionSummary, GasFees } from '@iota/core';
 import { Transaction } from '@iota/iota-sdk/transactions';
 import { useMemo, useState } from 'react';
 
 import { ConfirmationModal } from '../../../shared/ConfirmationModal';
-import { GasFees } from './GasFees';
 import { TransactionDetails } from './TransactionDetails';
 
 export interface TransactionRequestProps {
@@ -32,6 +30,7 @@ const APP_ORIGINS_TO_EXCLUDE_FROM_ANALYTICS = ['https://iota8192.ethoswallet.xyz
 
 export function TransactionRequest({ txRequest }: TransactionRequestProps) {
     const addressForTransaction = txRequest.tx.account;
+    const activeAddress = useActiveAddress();
     const { data: accountForTransaction } = useAccountByAddress(addressForTransaction);
     const signer = useSigner(accountForTransaction);
     const dispatch = useAppDispatch();
@@ -99,6 +98,7 @@ export function TransactionRequest({ txRequest }: TransactionRequestProps) {
                         isLoading={isDryRunLoading}
                         isError={isDryRunError}
                         summary={summary}
+                        renderExplorerLink={ExplorerLinkHelper}
                     />
                     <GasFees
                         sender={addressForTransaction}
@@ -106,6 +106,8 @@ export function TransactionRequest({ txRequest }: TransactionRequestProps) {
                         isEstimate
                         isError={isError}
                         isPending={isDryRunLoading}
+                        activeAddress={activeAddress}
+                        renderExplorerLink={ExplorerLinkHelper}
                     />
                     <TransactionDetails sender={addressForTransaction} transaction={transaction} />
                 </div>
diff --git a/apps/wallet/src/ui/app/pages/home/receipt/index.tsx b/apps/wallet/src/ui/app/pages/home/receipt/index.tsx
index 44749f6c186..6afd778f2a9 100644
--- a/apps/wallet/src/ui/app/pages/home/receipt/index.tsx
+++ b/apps/wallet/src/ui/app/pages/home/receipt/index.tsx
@@ -5,13 +5,12 @@
 import { Loading, Overlay, ReceiptCard } from '_components';
 import { useActiveAddress } from '_src/ui/app/hooks/useActiveAddress';
 import { useUnlockedGuard } from '_src/ui/app/hooks/useUnlockedGuard';
-import { useIotaClient } from '@iota/dapp-kit';
-import { type IotaTransactionBlockResponse } from '@iota/iota-sdk/client';
-import { useQuery } from '@tanstack/react-query';
 import { useCallback, useMemo, useState } from 'react';
 import { Navigate, useLocation, useNavigate, useSearchParams } from 'react-router-dom';
 import { Checkmark, Warning } from '@iota/ui-icons';
 import { InfoBox, InfoBoxType, InfoBoxStyle } from '@iota/apps-ui-kit';
+import type { IotaTransactionBlockResponse } from '@iota/iota-sdk/client';
+import { useGetTransaction } from '@iota/core';
 
 function ReceiptPage() {
     const location = useLocation();
@@ -22,25 +21,14 @@ function ReceiptPage() {
     // get tx results from url params
     const transactionId = searchParams.get('txdigest');
     const fromParam = searchParams.get('from');
-    const client = useIotaClient();
 
-    const { data, isPending, isError, error } = useQuery<IotaTransactionBlockResponse>({
-        queryKey: ['transactions-by-id', transactionId],
-        queryFn: async () => {
-            return client.getTransactionBlock({
-                digest: transactionId!,
-                options: {
-                    showBalanceChanges: true,
-                    showObjectChanges: true,
-                    showInput: true,
-                    showEffects: true,
-                    showEvents: true,
-                },
-            });
-        },
-        enabled: !!transactionId,
+    const initialDataFromState = location.state?.response as
+        | IotaTransactionBlockResponse
+        | undefined;
+
+    const { data, isPending, isError, error } = useGetTransaction(transactionId ?? '', {
         retry: 8,
-        initialData: location.state?.response,
+        initialData: initialDataFromState,
     });
 
     const navigate = useNavigate();
@@ -67,6 +55,7 @@ function ReceiptPage() {
     if (!transactionId || !activeAddress) {
         return <Navigate to="/transactions" replace={true} />;
     }
+
     return (
         <Loading loading={isPending || isGuardLoading}>
             <Overlay
diff --git a/apps/wallet/src/ui/app/shared/transaction-summary/index.tsx b/apps/wallet/src/ui/app/shared/transaction-summary/index.tsx
deleted file mode 100644
index 5d384cdc65d..00000000000
--- a/apps/wallet/src/ui/app/shared/transaction-summary/index.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-// Copyright (c) Mysten Labs, Inc.
-// Modifications Copyright (c) 2024 IOTA Stiftung
-// SPDX-License-Identifier: Apache-2.0
-import { type TransactionSummary as TransactionSummaryType } from '@iota/core';
-import { BalanceChanges } from './cards/BalanceChanges';
-import { ObjectChanges } from './cards/ObjectChanges';
-import { LoadingIndicator } from '@iota/apps-ui-kit';
-
-export function TransactionSummary({
-    summary,
-    isLoading,
-    isError,
-    isDryRun = false,
-}: {
-    summary: TransactionSummaryType;
-    isLoading?: boolean;
-    isDryRun?: boolean;
-    isError?: boolean;
-}) {
-    if (isError) return null;
-    return (
-        <>
-            {isLoading ? (
-                <div className="flex items-center justify-center p-10">
-                    <LoadingIndicator />
-                </div>
-            ) : (
-                <div className="flex flex-col gap-3">
-                    {isDryRun && (
-                        <div className="pl-4.5">
-                            <span className="text-title-lg text-neutral-10 dark:text-neutral-92">
-                                Do you approve these actions?
-                            </span>
-                        </div>
-                    )}
-                    <BalanceChanges changes={summary?.balanceChanges} />
-                    <ObjectChanges changes={summary?.objectSummary} />
-                </div>
-            )}
-        </>
-    );
-}
diff --git a/apps/wallet/src/ui/app/staking/stake/StakeForm.tsx b/apps/wallet/src/ui/app/staking/stake/StakeForm.tsx
index 83a70ef19a8..093991e6f33 100644
--- a/apps/wallet/src/ui/app/staking/stake/StakeForm.tsx
+++ b/apps/wallet/src/ui/app/staking/stake/StakeForm.tsx
@@ -7,6 +7,7 @@ import {
     createStakeTransaction,
     getGasSummary,
     parseAmount,
+    StakeTransactionInfo,
     useCoinMetadata,
     useFormatCoin,
     useStakingGasBudgetEstimation,
@@ -16,9 +17,9 @@ import { memo, useEffect, useMemo } from 'react';
 import { useActiveAddress, useTransactionDryRun } from '../../hooks';
 import { type FormValues } from './StakingCard';
 import { InfoBox, InfoBoxStyle, InfoBoxType, Input, InputType } from '@iota/apps-ui-kit';
-import { StakeTxnInfo } from '../../components/receipt-card/StakeTxnInfo';
 import { Transaction } from '@iota/iota-sdk/transactions';
 import { Exclamation } from '@iota/ui-icons';
+import { ExplorerLinkHelper } from '../../components';
 
 export interface StakeFromProps {
     validatorAddress: string;
@@ -106,7 +107,12 @@ function StakeForm({ validatorAddress, coinBalance, coinType, epoch }: StakeFrom
                     icon={<Exclamation />}
                 />
             ) : null}
-            <StakeTxnInfo startEpoch={epoch} gasSummary={transaction ? gasSummary : undefined} />
+            <StakeTransactionInfo
+                startEpoch={epoch}
+                activeAddress={activeAddress}
+                gasSummary={transaction ? gasSummary : undefined}
+                renderExplorerLink={ExplorerLinkHelper}
+            />
         </Form>
     );
 }
diff --git a/apps/wallet/tailwind.config.ts b/apps/wallet/tailwind.config.ts
index 1a42a522c18..088b09b22c6 100644
--- a/apps/wallet/tailwind.config.ts
+++ b/apps/wallet/tailwind.config.ts
@@ -9,7 +9,11 @@ import uiKitStaticPreset from '../../apps/ui-kit/src/lib/tailwind/static.preset'
 
 export default {
     presets: [uiKitStaticPreset],
-    content: ['./src/**/*.{js,jsx,ts,tsx}', './../ui-kit/src/lib/**/*.{js,jsx,ts,tsx}'],
+    content: [
+        './src/**/*.{js,jsx,ts,tsx}',
+        './../ui-kit/src/lib/**/*.{js,jsx,ts,tsx}',
+        './../core/src/components/**/*.{js,jsx,ts,tsx}',
+    ],
     theme: {
         extend: {
             colors: {
diff --git a/apps/wallet/tests/balanceChanges.spec.ts b/apps/wallet/tests/balanceChanges.spec.ts
index c83d58499e0..c6f9d010817 100644
--- a/apps/wallet/tests/balanceChanges.spec.ts
+++ b/apps/wallet/tests/balanceChanges.spec.ts
@@ -89,5 +89,5 @@ test('check balance changes in Activity', async ({ page, extensionUrl }) => {
     await page.getByTestId('nav-activity').click();
     await expect(page.getByTestId('link-to-txn').first()).toBeVisible({ timeout });
     await page.getByTestId('link-to-txn').first().click();
-    await expect(page.getByText(`Successfully sent`, { exact: false })).toBeVisible();
+    await expect(page.getByText(`Successfully received`, { exact: false })).toBeVisible();
 });