Batch transactions - Add support

components/Transaction/TransactionBatch.js

@@ -0,0 +1,119 @@
+import React from 'react'
+import { TData } from '../Table'
+
+import { TransactionCard } from './TransactionCard'
+import { AddressWithIconFilled, amountFormatWithIcon, shortAddress } from '../../utils/format'
+import Link from 'next/link'
+
+// Component to display transaction flags with tooltips
+const TransactionFlags = ({ flags }) => {
+  if (!flags || typeof flags !== 'object') return <span className="grey">None</span>
+
+  const activeFlags = []
+
+  // Check each flag in the specification.flags object
+  Object.entries(flags).forEach(([flagName, isActive]) => {
+    if (isActive === true) {
+      activeFlags.push(flagName)
+    }
+  })
+
+  if (activeFlags.length === 0) {
+    return <span className="grey">None</span>
+  }
+
+  return (
+    <>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+        {activeFlags.map((flag, index) => (
+          <div key={index}>
+            <span className="no-brake">
+              <span className="flag">{flag}</span>
+            </span>
+          </div>
+        ))}
+      </div>
+    </>
+  )
+}
+
+export const TransactionBatch = ({ data, pageFiatRate, selectedCurrency }) => {
+  if (!data) return null
+  const { specification } = data
+
+  return (
+    <TransactionCard
+      data={data}
+      pageFiatRate={pageFiatRate}
+      selectedCurrency={selectedCurrency}
+      notFullySupported={true}
+    >
+      <tr>
+        <TData>Initiated by</TData>
+        <TData>
+          <AddressWithIconFilled data={specification.source} name="address" />
+        </TData>
+      </tr>
+      <tr>
+        <TData>Flags</TData>
+        <TData>
+          <TransactionFlags flags={specification.flags} txType={data?.tx?.TransactionType} />
+        </TData>
+      </tr>
+      {specification?.transactions?.map((transaction, index) => (
+        <React.Fragment key={transaction.id || index}>
+          <tr>
+            <TData className="bold">
+                Transaction {index + 1}
+            </TData>
+          </tr>
+          <tr>
+            <TData style={{ paddingLeft: '30px' }}>ID</TData>
+            <TData>
+              <Link href={`/tx/${transaction.id}`}>
+                {shortAddress(transaction.id)}
+              </Link>
+            </TData>
+          </tr>
+          <tr>
+            <TData style={{ paddingLeft: '30px' }}>Type</TData>
+            <TData>
+              <span className="bold">{transaction?.type}</span>
+            </TData>
+          </tr>
+          <tr>
+            <TData style={{ paddingLeft: '30px' }}>Sequence</TData>
+            <TData>
+              #{transaction?.sequence}
+            </TData>
+          </tr>
+          <tr>
+            <TData style={{ paddingLeft: '30px' }}>Flags</TData>
+            <TData>
+              <TransactionFlags flags={transaction.specification.flags} txType={transaction.type} />
+            </TData>
+          </tr>
+          {
+            transaction.specification.destination &&
+            <tr>
+              <TData style={{ paddingLeft: '30px' }}>Destination</TData>
+              <TData>
+                <AddressWithIconFilled data={transaction.specification.destination} name="address" />
+              </TData>
+            </tr>
+          }
+          {
+            transaction.specification?.source?.maxAmount &&
+            <tr>
+              <TData style={{ paddingLeft: '30px' }}>Max Amount</TData>
+              <TData>
+                {amountFormatWithIcon({ amount: transaction.specification?.source?.maxAmount })}
+              </TData>
+            </tr>
+          }
+        </React.Fragment>
+      ))}
+    </TransactionCard>
+  )
+}
+

components/Transaction/TransactionCard.js

@@ -476,6 +476,12 @@ export const TransactionCard = ({
                         })}
                       </>
                     )}
+                  {outcome?.parentBatchID && (
+                    <tr>
+                      <TData>Parent batch ID</TData>
+                      <TData>{addressUsernameOrServiceLink(outcome, 'parentBatchID', { short: true, url: '/tx/' })}</TData>
+                    </tr>
+                  )}
                   <tr>
                     <TData>Transaction link</TData>
                     <TData>

components/Transaction/index.js

@@ -13,6 +13,7 @@ export { TransactionPayment } from './TransactionPayment'
 export { TransactionSetRegularKey } from './TransactionSetRegularKey'
 export { TransactionTrustSet } from './TransactionTrustSet'
 export { TransactionEnableAmendment } from './TransactionEnableAmendment'
+export { TransactionBatch } from './TransactionBatch'
 
 //xrpl
 export { TransactionAMM } from './TransactionAmm'

pages/transaction/[id].js

@@ -24,7 +24,8 @@ import {
   TransactionURIToken,
   TransactionRemit,
   TransactionEnableAmendment,
-  TransactionDelegateSet
+  TransactionDelegateSet,
+  TransactionBatch
 } from '../../components/Transaction'
 import { useEffect, useState } from 'react'
 import { fetchHistoricalRate } from '../../utils/common'
@@ -121,6 +122,8 @@ export default function Transaction({ data, selectedCurrency }) {
     TransactionComponent = TransactionRemit
   } else if (txType === 'EnableAmendment') {
     TransactionComponent = TransactionEnableAmendment
+  } else if (txType === 'Batch') {
+    TransactionComponent = TransactionBatch
   } else {
     TransactionComponent = TransactionDetails
   }