From 95658d337f9f4aaab4df69faacf9d643f4f0d78d Mon Sep 17 00:00:00 2001
From: Patrick Dinh <patrick.dinh@makerx.com.au>
Date: Tue, 9 Apr 2024 10:02:17 +1000
Subject: [PATCH 1/3] chore: fix up transaction visualisation

---
 .../components/payment-transaction.tsx        | 21 ++++++-
 .../components/transaction-visualisation.tsx  | 63 +++++++++++--------
 2 files changed, 57 insertions(+), 27 deletions(-)

diff --git a/src/features/transactions/components/payment-transaction.tsx b/src/features/transactions/components/payment-transaction.tsx
index 63d16f7e3..95a8f013e 100644
--- a/src/features/transactions/components/payment-transaction.tsx
+++ b/src/features/transactions/components/payment-transaction.tsx
@@ -10,6 +10,7 @@ import { PaymentTransactionModel } from '../models'
 import { TransactionResult } from '@algorandfoundation/algokit-utils/types/indexer'
 import { DescriptionList } from '@/features/common/components/description-list'
 import { TransactionVisualisation } from './transaction-visualisation'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/features/common/components/tabs'
 
 export type Props = {
   transaction: PaymentTransactionModel
@@ -56,7 +57,25 @@ export function PaymentTransaction({ transaction, rawTransaction }: Props) {
             <DescriptionList items={paymentTransactionItems} />
           </div>
           <TransactionNote transaction={transaction} />
-          <TransactionVisualisation transaction={transaction} />
+          <div className={cn('space-y-2')}>
+            <h2 className={cn('text-xl font-bold')}>Transaction</h2>
+            <Tabs defaultValue="text">
+              <TabsList>
+                <TabsTrigger className={cn('data-[state=active]:border-primary data-[state=active]:border-b-2 w-32')} value="visual">
+                  Visual
+                </TabsTrigger>
+                <TabsTrigger className={cn('data-[state=active]:border-primary data-[state=active]:border-b-2 w-32')} value="table">
+                  Table
+                </TabsTrigger>
+              </TabsList>
+              <TabsContent value="visual" className={cn('border-solid border-2 border-border h-60 p-4')}>
+                <TransactionVisualisation transaction={transaction} />
+              </TabsContent>
+              <TabsContent value="table" className={cn('border-solid border-2 border-border h-60 p-4')}>
+                {transaction.base64Note}
+              </TabsContent>
+            </Tabs>
+          </div>
           <TransactionJson transaction={rawTransaction} />
         </CardContent>
       </Card>
diff --git a/src/features/transactions/components/transaction-visualisation.tsx b/src/features/transactions/components/transaction-visualisation.tsx
index 3a9ec0e01..3851c86f8 100644
--- a/src/features/transactions/components/transaction-visualisation.tsx
+++ b/src/features/transactions/components/transaction-visualisation.tsx
@@ -49,10 +49,10 @@ function ConnectionToParent() {
   )
 }
 
-function TransactionName({ hasParent, name }: { hasParent: boolean; name: string }) {
+function TransactionId({ hasParent, name }: { hasParent: boolean; name: string }) {
   return (
     <div
-      className={cn('inline')}
+      className={cn('inline truncate max-w-24')}
       style={{
         marginLeft: hasParent ? `${graphConfig.indentationWidth + 8}px` : `16px`,
       }}
@@ -62,6 +62,10 @@ function TransactionName({ hasParent, name }: { hasParent: boolean; name: string
   )
 }
 
+function AccountId({ id }: { id: string }) {
+  return <h1 className={cn('text-l font-semibold truncate')}>{id}</h1>
+}
+
 function ConnectionToSibbling() {
   // The connection between this transaction and the next sibbling
   return (
@@ -160,7 +164,7 @@ function TransactionRow({
           style={{ marginLeft: (indentLevel ?? 0) * graphConfig.indentationWidth }}
         >
           {hasParent && <ConnectionToParent />}
-          <TransactionName hasParent={hasParent} name={transaction.id} />
+          <TransactionId hasParent={hasParent} name={transaction.id} />
           {hasParent && hasNextSibbling && <ConnectionToSibbling />}
           {hasChildren && <ConnectionToChildren indentLevel={indentLevel} />}
         </div>
@@ -174,7 +178,7 @@ function TransactionRow({
                 <DisplaySelfTransaction />
               </TooltipTrigger>
               <TooltipContent>
-                <div className={cn('p-4')}>Transaction: {transaction.id}</div>
+                <div className={cn('p-4 truncate')}>Transaction: {transaction.id}</div>
               </TooltipContent>
             </Tooltip>
           )
@@ -185,7 +189,7 @@ function TransactionRow({
                 <DisplayArrow key={index} arrow={arrow} />
               </TooltipTrigger>
               <TooltipContent>
-                <div className={cn('p-4')}>Transaction: {transaction.id}</div>
+                <div className={cn('p-4 truncate')}>Transaction: {transaction.id}</div>
               </TooltipContent>
             </Tooltip>
           )
@@ -209,35 +213,35 @@ function TransactionRow({
   )
 }
 
-function extractSendersAndReceivers(transaction: TransactionModel) {
-  let transactionCount = 0
+function extractSendersAndReceivers(transaction: TransactionModel, nestingLevel = 0) {
+  let transactionCount = 1
   let accounts: string[] = []
+  let maxNestingLevel = nestingLevel
 
-  function extract(transactionArr: TransactionModel[]) {
-    if (transactionArr) {
-      transactionArr.forEach((transaction) => {
-        transactionCount++
-        accounts.push(transaction.sender)
-        if (transaction.type === TransactionType.Payment) {
-          accounts.push(transaction.receiver)
-        }
-        if (transaction.transactions) {
-          extract(transaction.transactions)
-        }
-      })
-    }
+  accounts.push(transaction.sender)
+  if (transaction.type === TransactionType.Payment) {
+    accounts.push(transaction.receiver)
   }
 
-  extract(transaction.transactions ?? [])
+  transaction.transactions?.forEach((transaction) => {
+    const {
+      transactionCount: childTransactionCount,
+      accounts: childAccounts,
+      nestingLevel: childNestingLevel,
+    } = extractSendersAndReceivers(transaction, nestingLevel + 1)
+
+    transactionCount += childTransactionCount
+    accounts = [...accounts, ...childAccounts]
+    maxNestingLevel = Math.max(maxNestingLevel, childNestingLevel)
+  })
 
   // Remove duplicates
   accounts = Array.from(new Set(accounts))
-  // Sort
-  accounts = accounts.sort((a, b) => (a > b ? 1 : a < b ? -1 : 0))
 
   return {
     transactionCount: transactionCount,
     accounts: accounts,
+    nestingLevel: maxNestingLevel,
   }
 }
 
@@ -267,20 +271,20 @@ type Props = {
 }
 
 export function TransactionVisualisation({ transaction }: Props) {
-  const { transactionCount, accounts } = extractSendersAndReceivers(transaction)
+  const { transactionCount, accounts, nestingLevel } = extractSendersAndReceivers(transaction)
 
   return (
     <div
       className={cn('relative grid')}
       style={{
-        gridTemplateColumns: `minmax(${graphConfig.colWidth}px, 1fr) repeat(${accounts.length}, ${graphConfig.colWidth}px)`,
+        gridTemplateColumns: `minmax(${graphConfig.colWidth}px, ${graphConfig.colWidth + nestingLevel * graphConfig.indentationWidth}px) repeat(${accounts.length}, ${graphConfig.colWidth}px)`,
         gridTemplateRows: `repeat(${transactionCount + 1}, ${graphConfig.rowHeight}px)`,
       }}
     >
       <div>{/* The first header cell is empty */}</div>
       {accounts.map((account, index) => (
         <div className={cn('p-2 flex justify-center')} key={index}>
-          <h1 className={cn('text-l font-semibold')}> {account}</h1>
+          <AccountId id={account} />
         </div>
       ))}
       {/* The below div is for drawing the background dash lines */}
@@ -307,6 +311,13 @@ export function TransactionVisualisation({ transaction }: Props) {
           </div>
         </div>
       </div>
+      <TransactionRow
+        transaction={transaction}
+        hasChildren={transaction.transactions && transaction.transactions.length > 0}
+        hasParent={false}
+        accounts={accounts}
+        verticalBars={[]}
+      />
       {transaction.transactions?.map((transaction, index, arr) => (
         <TransactionRow
           key={index}

From 9a28063e09aa67bbfed93370f5579d236d90a9f8 Mon Sep 17 00:00:00 2001
From: Patrick Dinh <patrick.dinh@makerx.com.au>
Date: Tue, 9 Apr 2024 11:14:47 +1000
Subject: [PATCH 2/3] chore: visual it

---
 .../common/components/display-algo.tsx        |  5 +-
 .../components/payment-transaction.tsx        | 11 +--
 .../components/transaction-view-table.tsx     | 82 +++++++++++++++++++
 ...sation.tsx => transaction-view-visual.tsx} |  8 +-
 src/features/transactions/data.ts             |  2 +-
 5 files changed, 96 insertions(+), 12 deletions(-)
 create mode 100644 src/features/transactions/components/transaction-view-table.tsx
 rename src/features/transactions/components/{transaction-visualisation.tsx => transaction-view-visual.tsx} (97%)

diff --git a/src/features/common/components/display-algo.tsx b/src/features/common/components/display-algo.tsx
index 21a170000..dd66d6094 100644
--- a/src/features/common/components/display-algo.tsx
+++ b/src/features/common/components/display-algo.tsx
@@ -3,12 +3,13 @@ import { cn } from '../utils'
 import { AlgoAmount } from '@algorandfoundation/algokit-utils/types/amount'
 
 export type Props = {
+  className?: string
   amount: AlgoAmount
 }
 
-export function DisplayAlgo({ amount }: Props) {
+export function DisplayAlgo({ className, amount }: Props) {
   return (
-    <div className={cn('flex items-center')}>
+    <div className={cn(className, 'flex items-center')}>
       {amount.algos}
       <SvgAlgorand />
     </div>
diff --git a/src/features/transactions/components/payment-transaction.tsx b/src/features/transactions/components/payment-transaction.tsx
index 95a8f013e..3b9bd874e 100644
--- a/src/features/transactions/components/payment-transaction.tsx
+++ b/src/features/transactions/components/payment-transaction.tsx
@@ -9,8 +9,9 @@ import { useMemo } from 'react'
 import { PaymentTransactionModel } from '../models'
 import { TransactionResult } from '@algorandfoundation/algokit-utils/types/indexer'
 import { DescriptionList } from '@/features/common/components/description-list'
-import { TransactionVisualisation } from './transaction-visualisation'
+import { TransactionViewVisual } from './transaction-view-visual'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/features/common/components/tabs'
+import { TransactionViewTable } from './transaction-view-table'
 
 export type Props = {
   transaction: PaymentTransactionModel
@@ -58,8 +59,8 @@ export function PaymentTransaction({ transaction, rawTransaction }: Props) {
           </div>
           <TransactionNote transaction={transaction} />
           <div className={cn('space-y-2')}>
-            <h2 className={cn('text-xl font-bold')}>Transaction</h2>
-            <Tabs defaultValue="text">
+            <h2 className={cn('text-xl font-bold')}>View</h2>
+            <Tabs defaultValue="visual">
               <TabsList>
                 <TabsTrigger className={cn('data-[state=active]:border-primary data-[state=active]:border-b-2 w-32')} value="visual">
                   Visual
@@ -69,10 +70,10 @@ export function PaymentTransaction({ transaction, rawTransaction }: Props) {
                 </TabsTrigger>
               </TabsList>
               <TabsContent value="visual" className={cn('border-solid border-2 border-border h-60 p-4')}>
-                <TransactionVisualisation transaction={transaction} />
+                <TransactionViewVisual transaction={transaction} />
               </TabsContent>
               <TabsContent value="table" className={cn('border-solid border-2 border-border h-60 p-4')}>
-                {transaction.base64Note}
+                <TransactionViewTable transaction={transaction} />
               </TabsContent>
             </Tabs>
           </div>
diff --git a/src/features/transactions/components/transaction-view-table.tsx b/src/features/transactions/components/transaction-view-table.tsx
new file mode 100644
index 000000000..0b2267b5f
--- /dev/null
+++ b/src/features/transactions/components/transaction-view-table.tsx
@@ -0,0 +1,82 @@
+import { cn } from '@/features/common/utils'
+import { TransactionModel, TransactionType } from '../models'
+import { DisplayAlgo } from '@/features/common/components/display-algo'
+
+const graphConfig = {
+  indentationWidth: 20,
+}
+
+function unpackTransaction(transaction: TransactionModel, indentationLevel = 0) {
+  const transactionWithIndentationLevel: {
+    indentationLevel: number
+    transaction: TransactionModel
+  }[] = []
+
+  transactionWithIndentationLevel.push({
+    indentationLevel: indentationLevel,
+    transaction: transaction,
+  })
+
+  transaction.transactions?.forEach((transaction) => {
+    const childTransactionWithIndentationLevel = unpackTransaction(transaction, indentationLevel + 1)
+
+    transactionWithIndentationLevel.push(...childTransactionWithIndentationLevel)
+  })
+
+  return transactionWithIndentationLevel
+}
+
+function TruncatedId({ id }: { id: string }) {
+  return <div className={cn('m-auto truncate max-w-28')}>{id}</div>
+}
+
+type Props = {
+  transaction: TransactionModel
+}
+
+export function TransactionViewTable({ transaction }: Props) {
+  const transactionsWithIndentationLevel = unpackTransaction(transaction)
+
+  return (
+    <table className={cn('w-full')}>
+      <thead>
+        <tr>
+          <th className={cn('border-2')}>Transaction ID</th>
+          <th className={cn('p-2 border-2')}>From</th>
+          <th className={cn('p-2 border-2')}>To</th>
+          <th className={cn('p-2 border-2')}>Type</th>
+          <th className={cn('p-2 border-2')}>Amount</th>
+        </tr>
+      </thead>
+      <tbody>
+        {transactionsWithIndentationLevel.map(({ transaction, indentationLevel }) => (
+          <tr key={transaction.id}>
+            <td className={cn('p-2 border-2')}>
+              <div
+                style={{
+                  marginLeft: `${graphConfig.indentationWidth * indentationLevel}px`,
+                }}
+              >
+                <TruncatedId id={transaction.id} />
+              </div>
+            </td>
+            <td className={cn('p-2 border-2')}>
+              <TruncatedId id={transaction.sender} />
+            </td>
+            <td className={cn('p-2 border-2')}>
+              <TruncatedId id={transaction.receiver} />
+            </td>
+            <td className={cn('p-2 border-2 text-center')}>{transaction.type}</td>
+            <td className={cn('p-2 border-2')}>
+              {transaction.type === TransactionType.Payment ? (
+                <DisplayAlgo className={cn('justify-center')} amount={transaction.amount} />
+              ) : (
+                'N/A'
+              )}
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  )
+}
diff --git a/src/features/transactions/components/transaction-visualisation.tsx b/src/features/transactions/components/transaction-view-visual.tsx
similarity index 97%
rename from src/features/transactions/components/transaction-visualisation.tsx
rename to src/features/transactions/components/transaction-view-visual.tsx
index 3851c86f8..5e6753975 100644
--- a/src/features/transactions/components/transaction-visualisation.tsx
+++ b/src/features/transactions/components/transaction-view-visual.tsx
@@ -213,7 +213,7 @@ function TransactionRow({
   )
 }
 
-function extractSendersAndReceivers(transaction: TransactionModel, nestingLevel = 0) {
+function unpackTransaction(transaction: TransactionModel, nestingLevel = 0) {
   let transactionCount = 1
   let accounts: string[] = []
   let maxNestingLevel = nestingLevel
@@ -228,7 +228,7 @@ function extractSendersAndReceivers(transaction: TransactionModel, nestingLevel
       transactionCount: childTransactionCount,
       accounts: childAccounts,
       nestingLevel: childNestingLevel,
-    } = extractSendersAndReceivers(transaction, nestingLevel + 1)
+    } = unpackTransaction(transaction, nestingLevel + 1)
 
     transactionCount += childTransactionCount
     accounts = [...accounts, ...childAccounts]
@@ -270,8 +270,8 @@ type Props = {
   transaction: TransactionModel
 }
 
-export function TransactionVisualisation({ transaction }: Props) {
-  const { transactionCount, accounts, nestingLevel } = extractSendersAndReceivers(transaction)
+export function TransactionViewVisual({ transaction }: Props) {
+  const { transactionCount, accounts, nestingLevel } = unpackTransaction(transaction)
 
   return (
     <div
diff --git a/src/features/transactions/data.ts b/src/features/transactions/data.ts
index cc4504586..c4b589a02 100644
--- a/src/features/transactions/data.ts
+++ b/src/features/transactions/data.ts
@@ -7,7 +7,7 @@ import { loadable } from 'jotai/utils'
 
 // TODO: Move this elsewhere and make it configurable once we start using it more
 const indexer = algokit.getAlgoIndexerClient({
-  server: 'https://testnet-idx.algonode.cloud/',
+  server: 'https://mainnet-idx.algonode.cloud/',
   port: 443,
 })
 

From c97c9dac2bab57353e141474d9be9c4a6cc995e3 Mon Sep 17 00:00:00 2001
From: Patrick Dinh <patrick.dinh@makerx.com.au>
Date: Tue, 9 Apr 2024 13:07:53 +1000
Subject: [PATCH 3/3] chore: wip - payment tooltip

---
 .../common/components/description-list.tsx    |   6 +-
 .../components/transaction-view-visual.tsx    | 101 +++++++++++++-----
 .../pages/transaction-page.test.tsx           |   2 +-
 src/tests/object-mother/transaction-model.ts  |   2 +-
 4 files changed, 79 insertions(+), 32 deletions(-)

diff --git a/src/features/common/components/description-list.tsx b/src/features/common/components/description-list.tsx
index 231eec252..bfb726faf 100644
--- a/src/features/common/components/description-list.tsx
+++ b/src/features/common/components/description-list.tsx
@@ -6,9 +6,9 @@ type Props = {
 
 export function DescriptionList({ items }: Props) {
   return items.map((item, index) => (
-    <dl className={cn('grid grid-cols-8')} key={index}>
-      <dt>{item.dt}</dt>
-      <dd className={cn('col-span-7')}>{item.dd}</dd>
+    <dl className={cn('grid grid-cols-10')} key={index}>
+      <dt className={cn('col-span-2')}>{item.dt}</dt>
+      <dd className={cn('col-span-8')}>{item.dd}</dd>
     </dl>
   ))
 }
diff --git a/src/features/transactions/components/transaction-view-visual.tsx b/src/features/transactions/components/transaction-view-visual.tsx
index 5e6753975..bec6c55f6 100644
--- a/src/features/transactions/components/transaction-view-visual.tsx
+++ b/src/features/transactions/components/transaction-view-visual.tsx
@@ -7,6 +7,8 @@ import { fixedForwardRef } from '@/utils/fixed-forward-ref'
 import { isDefined } from '@/utils/is-defined'
 import { useMemo } from 'react'
 import { TransactionModel, TransactionType } from '../models'
+import { DisplayAlgo } from '@/features/common/components/display-algo'
+import { DescriptionList } from '@/features/common/components/description-list'
 
 const graphConfig = {
   rowHeight: 40,
@@ -14,6 +16,7 @@ const graphConfig = {
   indentationWidth: 20,
   lineWidth: 2,
   circleDimension: 20,
+  paymentTransactionColor: 'rgb(126 200 191)',
 }
 
 type Arrow = {
@@ -97,35 +100,45 @@ function ConnectionToChildren({ indentLevel }: { indentLevel: number | undefined
   )
 }
 
-const DisplayArrow = fixedForwardRef(({ arrow, ...rest }: { arrow: Arrow }, ref?: React.LegacyRef<HTMLDivElement>) => {
-  return (
-    <div
-      className={cn('flex items-center justify-center')}
-      style={{
-        // 2 and 3 are the number to offset the name column
-        gridColumnStart: arrow.from + 2,
-        gridColumnEnd: arrow.to + 3,
-      }}
-      ref={ref}
-      {...rest}
-    >
-      <SvgCircle width={graphConfig.circleDimension} height={graphConfig.circleDimension}></SvgCircle>
+const DisplayArrow = fixedForwardRef(
+  ({ transaction, arrow, ...rest }: { transaction: TransactionModel; arrow: Arrow }, ref?: React.LegacyRef<HTMLDivElement>) => {
+    const color = graphConfig.paymentTransactionColor
+
+    return (
       <div
+        className={cn('flex items-center justify-center')}
         style={{
-          width: `calc(${(100 - 100 / (arrow.to - arrow.from + 1)).toFixed(2)}% - ${graphConfig.circleDimension}px)`,
-          height: `${graphConfig.circleDimension}px`,
+          // 2 and 3 are the number to offset the name column
+          gridColumnStart: arrow.from + 2,
+          gridColumnEnd: arrow.to + 3,
+          color: color,
         }}
-        className="relative text-primary"
+        ref={ref}
+        {...rest}
       >
-        {arrow.direction === 'rightToLeft' && <SvgPointerLeft className={cn('absolute top-0 left-0')} />}
-        <div className={cn('border-primary h-1/2')} style={{ borderBottomWidth: graphConfig.lineWidth }}></div>
-        {arrow.direction === 'leftToRight' && <SvgPointerRight className={cn('absolute top-0 right-0')} />}
+        <SvgCircle width={graphConfig.circleDimension} height={graphConfig.circleDimension}></SvgCircle>
+        <div
+          style={{
+            width: `calc(${(100 - 100 / (arrow.to - arrow.from + 1)).toFixed(2)}% - ${graphConfig.circleDimension}px)`,
+            height: `${graphConfig.circleDimension}px`,
+          }}
+          className="relative"
+        >
+          {arrow.direction === 'rightToLeft' && <SvgPointerLeft className={cn('absolute top-0 left-0')} />}
+          <div className={cn('h-1/2')} style={{ borderBottomWidth: graphConfig.lineWidth, borderColor: color }}></div>
+          {arrow.direction === 'leftToRight' && <SvgPointerRight className={cn('absolute top-0 right-0')} />}
+        </div>
+        {transaction.type === TransactionType.Payment && (
+          <div className={cn('absolute z-20 bg-card p-2 text-foreground w-20 text-xs')}>
+            Payment
+            <DisplayAlgo amount={transaction.amount} />
+          </div>
+        )}
+        <SvgCircle width={graphConfig.circleDimension} height={graphConfig.circleDimension}></SvgCircle>
       </div>
-      <div className={cn('absolute z-20 bg-background p-2')}>Payment</div>
-      <SvgCircle width={graphConfig.circleDimension} height={graphConfig.circleDimension}></SvgCircle>
-    </div>
-  )
-})
+    )
+  }
+)
 
 const DisplaySelfTransaction = fixedForwardRef((props: object, ref?: React.LegacyRef<HTMLDivElement>) => {
   return (
@@ -135,6 +148,40 @@ const DisplaySelfTransaction = fixedForwardRef((props: object, ref?: React.Legac
   )
 })
 
+function PaymentTransactionToolTipContent({ transaction }: { transaction: TransactionModel }) {
+  const items = useMemo(
+    () => [
+      {
+        dt: 'Transaction ID',
+        dd: transaction.id,
+      },
+      {
+        dt: 'Type',
+        dd: 'Payment',
+      },
+      {
+        dt: 'Sender',
+        dd: transaction.sender,
+      },
+      {
+        dt: 'Receiver',
+        dd: transaction.receiver,
+      },
+      {
+        dt: 'Amount',
+        dd: <DisplayAlgo amount={transaction.amount} />,
+      },
+    ],
+    [transaction.amount, transaction.id, transaction.receiver, transaction.sender]
+  )
+
+  return (
+    <div className={cn('p-4')}>
+      <DescriptionList items={items} />
+    </div>
+  )
+}
+
 type TransactionRowProps = {
   transaction: TransactionModel
   hasParent?: boolean
@@ -178,7 +225,7 @@ function TransactionRow({
                 <DisplaySelfTransaction />
               </TooltipTrigger>
               <TooltipContent>
-                <div className={cn('p-4 truncate')}>Transaction: {transaction.id}</div>
+                {transaction.type === TransactionType.Payment && <PaymentTransactionToolTipContent transaction={transaction} />}
               </TooltipContent>
             </Tooltip>
           )
@@ -186,10 +233,10 @@ function TransactionRow({
           return (
             <Tooltip key={index}>
               <TooltipTrigger asChild>
-                <DisplayArrow key={index} arrow={arrow} />
+                <DisplayArrow key={index} arrow={arrow} transaction={transaction} />
               </TooltipTrigger>
               <TooltipContent>
-                <div className={cn('p-4 truncate')}>Transaction: {transaction.id}</div>
+                {transaction.type === TransactionType.Payment && <PaymentTransactionToolTipContent transaction={transaction} />}
               </TooltipContent>
             </Tooltip>
           )
diff --git a/src/features/transactions/pages/transaction-page.test.tsx b/src/features/transactions/pages/transaction-page.test.tsx
index cfa8ab343..c9e6ed341 100644
--- a/src/features/transactions/pages/transaction-page.test.tsx
+++ b/src/features/transactions/pages/transaction-page.test.tsx
@@ -23,7 +23,7 @@ describe('given a invalid transaction ID', () => {
 })
 
 describe('given a payment transaction', () => {
-  const paymentTransaction = transactionModelMother.simplePaymentTransaction().build()
+  const paymentTransaction = transactionModelMother.paymentTransactionWithNoChildren().build()
 
   it('it should be rendered', async () => {
     vi.mocked(useParams).mockImplementation(() => ({ transactionId: paymentTransaction.id }))
diff --git a/src/tests/object-mother/transaction-model.ts b/src/tests/object-mother/transaction-model.ts
index 72776f7ac..641cf81b7 100644
--- a/src/tests/object-mother/transaction-model.ts
+++ b/src/tests/object-mother/transaction-model.ts
@@ -1,7 +1,7 @@
 import { transactionResultBuilder } from '../builders/transaction-result-builder'
 
 export const transactionModelMother = {
-  simplePaymentTransaction: () => {
+  paymentTransactionWithNoChildren: () => {
     return transactionResultBuilder()
       .withId('FBORGSDC4ULLWHWZUMUFIYQLSDC26HGLTFD7EATQDY37FHCIYBBQ')
       ['withConfirmed-round'](36570178)