)}
+ {transaction.type === "unstake" && (
+ <>
+ {transaction.metadata.stepType && (
+
+
Step
+
+ {UnstakeStepTypeName[transaction.metadata.stepType]}
+
+
+ )}
+ {transaction.metadata.attesterAddress && (
+
+
Attester
+
+
+ {transaction.metadata.attesterAddress}
+
+
+
+
+ )}
+ {transaction.metadata.recipient && (
+
+
Recipient
+
+
+ {transaction.metadata.recipient}
+
+
+
+
+ )}
+ {transaction.metadata.rollupAddress && (
+
+
Rollup
+
+
+ {transaction.metadata.rollupAddress}
+
+
+
+
+ )}
+ {transaction.metadata.stakerAddress && (
+
+
Staker Contract
+
+
+ {transaction.metadata.stakerAddress}
+
+
+
+
+ )}
+ {transaction.metadata.amount !== undefined && transaction.metadata.amount > 0n && (
+
+
Amount (raw)
+
+ {transaction.metadata.amount.toString()}
+
+
+ )}
+ {transaction.metadata.withdrawalId !== undefined && (
+
+
Withdrawal ID
+
+ {transaction.metadata.withdrawalId.toString()}
+
+
+ )}
+ {transaction.metadata.providerName && (
+
+
Provider
+
+ {transaction.metadata.providerName}
+
+
+ )}
+
+ )}
+ {transaction.type === "action" && (
+ <>
+ {transaction.metadata.stepType && (
+
+
Step
+
+ {ActionStepTypeName[transaction.metadata.stepType]}
+
+
+ )}
+ {transaction.metadata.contractAddress && (
+
+
Contract
+
+
+ {transaction.metadata.contractAddress}
+
+
+
+
+ )}
+ {transaction.metadata.atpAddress && (
+
+
Token Vault Address
+
+
+ {transaction.metadata.atpAddress}
+
+
+
+
+ )}
+ {transaction.metadata.providerId !== undefined && (
+
+
Provider ID
+
+ {transaction.metadata.providerId}
+
+
+ )}
+
+ )}
{transaction.type === "self-stake" && "atpAddress" in transaction.metadata && (
<>
{transaction.metadata.atpAddress && (
diff --git a/staking-dashboard/src/components/TransactionCart/TransactionCartExpanded.tsx b/staking-dashboard/src/components/TransactionCart/TransactionCartExpanded.tsx
index 84c6710b9..b9590339a 100644
--- a/staking-dashboard/src/components/TransactionCart/TransactionCartExpanded.tsx
+++ b/staking-dashboard/src/components/TransactionCart/TransactionCartExpanded.tsx
@@ -1,8 +1,11 @@
-import { useState } from "react"
+import { useState, useMemo, Fragment } from "react"
import { Icon } from "@/components/Icon"
import { useTransactionCart } from "@/contexts/TransactionCartContext"
import { useTermsModal } from "@/contexts/TermsModalContext"
import { TransactionCartDetailsExpanded } from "./TransactionCartDetailsExpanded"
+import { MulticallBatchHeader } from "./MulticallBatchHeader"
+import { planExecution } from "@/hooks/transactionCart/useMulticall3Execution"
+import type { CartTransaction } from "@/contexts/TransactionCartContext"
interface TransactionCartExpandedProps {
onMinimize: () => void
@@ -21,23 +24,53 @@ export const TransactionCartExpanded = ({ onMinimize }: TransactionCartExpandedP
isExecuting,
currentExecutingId,
moveUp,
- moveDown
+ moveDown,
+ isSafe,
} = useTransactionCart()
const { requireTermsAcceptance } = useTermsModal()
const [expandedTxId, setExpandedTxId] = useState
(null)
+ /**
+ * Tracks which multicall segments the user has collapsed. We key by the
+ * first entry's id (stable across re-renders of the same segment), and
+ * default to "all expanded" — adding to the set means collapsed.
+ */
+ const [collapsedSegmentIds, setCollapsedSegmentIds] = useState>(new Set())
const toggleExpand = (txId: string) => {
setExpandedTxId(expandedTxId === txId ? null : txId)
}
+ const toggleSegment = (segmentId: string) => {
+ setCollapsedSegmentIds((prev) => {
+ const next = new Set(prev)
+ if (next.has(segmentId)) next.delete(segmentId)
+ else next.add(segmentId)
+ return next
+ })
+ }
+
const handleExecuteClick = () => {
requireTermsAcceptance(executeAll)
}
const pendingCount = transactions.filter(tx => tx.status === 'pending' || tx.status === undefined).length
+ // Plan the pending cart's execution: contiguous batchable entries collapse
+ // into multicall segments; everything else falls into sequential segments.
+ // Safe wallets bypass segmentation entirely — their SDK batches natively.
+ const { plan, nonPending } = useMemo(() => {
+ if (isSafe) return { plan: [], nonPending: transactions }
+ const pending: CartTransaction[] = []
+ const nonPending: CartTransaction[] = []
+ for (const tx of transactions) {
+ if (tx.status === 'pending' || tx.status === undefined) pending.push(tx)
+ else nonPending.push(tx)
+ }
+ return { plan: planExecution(pending), nonPending }
+ }, [transactions, isSafe])
+
return (
{/* Cart Header */}
@@ -131,8 +164,14 @@ export const TransactionCartExpanded = ({ onMinimize }: TransactionCartExpandedP
No transactions in queue
Add delegations or claims to batch execute them
)
- })}
+ }
+
+ return (
+ <>
+ {/* Non-batched rows render first (completed/failed history when a
+ prior multicall executed, or all rows when no batch applies). */}
+ {/* Non-pending entries first (history of completed/failed). */}
+ {nonPending.map((tx) => renderRow(tx, false))}
+
+ {/* Plan segments — multicall segments get a collapsible header,
+ sequential segments render flat. Empty plan (Safe wallet)
+ means nothing extra below the non-pending block. */}
+ {plan.map((segment, segIdx) => {
+ if (segment.kind === 'sequential') {
+ return (
+
+ )
+ }
+
+ // Multicall segment — header wraps the entries. Identity for
+ // the collapse state comes from the first entry's id (stable
+ // across renders of the same segment).
+ const segmentId = segment.entries[0].id
+ const isSegmentExpanded = !collapsedSegmentIds.has(segmentId)
+ const isSegmentExecuting = segment.entries.some((e) => e.status === 'executing')
+ return (
+
+ )
+ })}
+
+ )
+ })()}