From bf8c831df204a993c2e02d4457ae4c63cee73d61 Mon Sep 17 00:00:00 2001
From: Aaron Cox <aaron@greymass.com>
Date: Wed, 22 Jan 2025 09:55:24 -0800
Subject: [PATCH] Quick addition of traces for a transaction

---
 .../transaction/[id]/[[seq]]/+layout.svelte   | 13 ++--
 .../[id]/[[seq]]/traces/+page.svelte          | 59 +++++++++++++++++++
 2 files changed, 66 insertions(+), 6 deletions(-)
 create mode 100644 src/routes/[network]/(explorer)/transaction/[id]/[[seq]]/traces/+page.svelte

diff --git a/src/routes/[network]/(explorer)/transaction/[id]/[[seq]]/+layout.svelte b/src/routes/[network]/(explorer)/transaction/[id]/[[seq]]/+layout.svelte
index 12ba76c6..0e9cb385 100644
--- a/src/routes/[network]/(explorer)/transaction/[id]/[[seq]]/+layout.svelte
+++ b/src/routes/[network]/(explorer)/transaction/[id]/[[seq]]/+layout.svelte
@@ -14,18 +14,19 @@
 		if (data.seq) {
 			urlBase += `/${data.seq}`;
 		}
-		return [
+		const options = [
 			{ href: urlBase, text: m.common_summary() },
-			// { href: `${urlBase}/resources`, text: 'Resources' },
-			{ href: `${urlBase}/data`, text: m.common_data() }
+			{ href: `${urlBase}/traces`, text: 'Traces' }
 		];
+		if (settings.data.debugMode) {
+			options.push({ href: `${urlBase}/data`, text: m.common_data() });
+		}
+		return options;
 	});
 </script>
 
 <Stack class="@container">
-	{#if settings.data.debugMode}
-		<PillGroup {options} />
-	{/if}
+	<PillGroup {options} />
 
 	{@render children()}
 </Stack>
diff --git a/src/routes/[network]/(explorer)/transaction/[id]/[[seq]]/traces/+page.svelte b/src/routes/[network]/(explorer)/transaction/[id]/[[seq]]/traces/+page.svelte
new file mode 100644
index 00000000..cb2a7f16
--- /dev/null
+++ b/src/routes/[network]/(explorer)/transaction/[id]/[[seq]]/traces/+page.svelte
@@ -0,0 +1,59 @@
+<script lang="ts">
+	import Code from '$lib/components/code.svelte';
+	import type { Action, NameType } from '@wharfkit/antelope';
+
+	let { data } = $props();
+
+	// Define the Action interface
+	interface Trace {
+		act: Action;
+		receipt: { receiver: NameType };
+	}
+</script>
+
+{#if data.transaction?.traces}
+	{@const actions = data.transaction.traces as Trace[]}
+	<table class="table-styles">
+		<thead>
+			<tr>
+				<th>Contract</th>
+				<th>Receiver</th>
+				<th>Authorization</th>
+				<th>Data</th>
+			</tr>
+		</thead>
+		<tbody>
+			{#each actions as action}
+				<tr>
+					<td>
+						<p>
+							<a href={`/${data.network}/contract/${action.act.account}`}>
+								{action.act.account}
+							</a>
+						</p>
+						<a href={`/${data.network}/contract/${action.act.account}/actions/${action.act.name}`}>
+							{action.act.name}
+						</a>
+					</td>
+					<td>
+						{action.receipt.receiver}
+					</td>
+					<td>
+						{#each action.act.authorization as auth}
+							<div>
+								<a href={`/${data.network}/account/${auth.actor}`}>
+									{auth.actor}@{auth.permission}
+								</a>
+							</div>
+						{/each}
+					</td>
+					<td>
+						<Code>{JSON.stringify(action.act.data, null, 2)}</Code>
+					</td>
+				</tr>
+			{/each}
+		</tbody>
+	</table>
+{:else}
+	<p>No actions</p>
+{/if}