From 71e7e206970f3c19f6ffacd2f5ce4caa7ac1f827 Mon Sep 17 00:00:00 2001
From: Aaron Cox <aaron@greymass.com>
Date: Thu, 20 Feb 2025 20:04:34 -0800
Subject: [PATCH] Reworked success/error after a form calls transact

---
 src/lib/components/transact/error.svelte      |  23 ++
 .../summary.svelte}                           |   2 +-
 src/lib/state/client/wharf.svelte.ts          |  21 +-
 .../(account)/(send)/send/+page.svelte        |  22 +-
 .../(account)/ram/(forms)/buy/+page.svelte    |  21 +-
 .../(account)/ram/(forms)/sell/+page.svelte   | 198 +++++++++--------
 .../[network]/(account)/refund/+page.svelte   |  13 +-
 .../(account)/resources/renting.svelte        | 203 ++++++++++--------
 .../staking/(staking)/stake/+page.svelte      |  22 +-
 .../staking/(staking)/unstake/+page.svelte    |  19 +-
 .../staking/(staking)/withdraw/+page.svelte   |  19 +-
 .../(account)/undelegate/+page.svelte         |  13 +-
 .../actions/[action]/[[data]]/+page.svelte    |  12 +-
 .../[id]/[[seq]]/traces_old/+page.svelte      |  81 -------
 14 files changed, 349 insertions(+), 320 deletions(-)
 create mode 100644 src/lib/components/transact/error.svelte
 rename src/lib/components/{transactionSummary.svelte => transact/summary.svelte} (95%)
 delete mode 100644 src/routes/[network]/(explorer)/transaction/[id]/[[seq]]/traces_old/+page.svelte

diff --git a/src/lib/components/transact/error.svelte b/src/lib/components/transact/error.svelte
new file mode 100644
index 000000000..44b32ca03
--- /dev/null
+++ b/src/lib/components/transact/error.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import CircleX from 'lucide-svelte/icons/circle-x';
+	import * as m from '$lib/paraglide/messages';
+
+	interface Props {
+		error?: string;
+		hidden?: boolean;
+	}
+
+	const { error, hidden }: Props = $props();
+</script>
+
+<div class="space-y-6 rounded-lg" class:hidden>
+	<div class="flex flex-col items-center gap-6">
+		<picture class="size-24">
+			<CircleX class="size-full text-red-300" />
+		</picture>
+		<h2 class="h3">{m.common_transaction_error()}</h2>
+	</div>
+	<p class="py-4">
+		{error}
+	</p>
+</div>
diff --git a/src/lib/components/transactionSummary.svelte b/src/lib/components/transact/summary.svelte
similarity index 95%
rename from src/lib/components/transactionSummary.svelte
rename to src/lib/components/transact/summary.svelte
index f8b475056..f7e562cb2 100644
--- a/src/lib/components/transactionSummary.svelte
+++ b/src/lib/components/transact/summary.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { transactions } from '$lib/wharf/transact.svelte';
 	import type { Checksum256 } from '@wharfkit/antelope';
-	import Transaction from './elements/transaction.svelte';
+	import Transaction from '../elements/transaction.svelte';
 	import CircleCheckBig from 'lucide-svelte/icons/circle-check-big';
 	import * as m from '$lib/paraglide/messages';
 
diff --git a/src/lib/state/client/wharf.svelte.ts b/src/lib/state/client/wharf.svelte.ts
index a5610b084..8b3798aa7 100644
--- a/src/lib/state/client/wharf.svelte.ts
+++ b/src/lib/state/client/wharf.svelte.ts
@@ -34,14 +34,7 @@ import { TransactPluginStatusEmitter } from '$lib/wharf/plugins/status';
 import { browser } from '$app/environment';
 import * as env from '$env/static/public';
 
-import {
-	type QueuedTransaction,
-	StatusType,
-	queueTransaction,
-	sendErrorToast
-	// sendSuccessToast
-} from '$lib/wharf/transact.svelte';
-
+import { type QueuedTransaction, StatusType, queueTransaction } from '$lib/wharf/transact.svelte';
 import { chainMapper, chains, getChainDefinitionFromParams } from '$lib/wharf/chains';
 import type { SettingsState } from '$lib/state/settings.svelte';
 import type { NetworkState } from '$lib/state/network.svelte';
@@ -213,8 +206,6 @@ export class WharfState {
 			throw new Error('No active session available to transact with.');
 		}
 
-		this.transacting = true;
-
 		const transaction: QueuedTransaction = {
 			status: StatusType.CREATED,
 			chain: this.session.chain.id,
@@ -223,12 +214,12 @@ export class WharfState {
 			options
 		};
 
+		this.transacting = true;
+
 		const result = await this.session.transact(args).catch((e: Error) => {
 			transaction.status = StatusType.ERROR;
 			transaction.error = String(e);
 			queueTransaction(transaction);
-			const { id } = sendErrorToast(transaction);
-			transaction.toastId = id;
 			this.transacting = false;
 			throw e;
 		});
@@ -238,9 +229,6 @@ export class WharfState {
 		if (!result.resolved || !result.response) {
 			transaction.status = StatusType.ERROR;
 			transaction.error = 'Transaction was not resolved.';
-			const { id } = sendErrorToast(transaction);
-			transaction.toastId = id;
-
 			queueTransaction(transaction);
 			throw new Error('Transaction was not resolved.');
 		}
@@ -248,8 +236,7 @@ export class WharfState {
 		transaction.status = StatusType.BROADCAST;
 		transaction.response = result.response;
 		transaction.transaction = result.resolved.transaction;
-		// const { id } = sendSuccessToast(transaction);
-		// transaction.toastId = id;
+
 		queueTransaction(transaction);
 
 		return result;
diff --git a/src/routes/[network]/(account)/(send)/send/+page.svelte b/src/routes/[network]/(account)/(send)/send/+page.svelte
index f1e54f338..cf5cf15a0 100644
--- a/src/routes/[network]/(account)/(send)/send/+page.svelte
+++ b/src/routes/[network]/(account)/(send)/send/+page.svelte
@@ -26,7 +26,8 @@
 	import { NetworkState } from '$lib/state/network.svelte';
 	import { page } from '$app/stores';
 	import { SingleCard, Stack } from '$lib/components/layout';
-	import TransactionSummary from '$lib/components/transactionSummary.svelte';
+	import TransactSummary from '$lib/components/transact/summary.svelte';
+	import TransactError from '$lib/components/transact/error.svelte';
 
 	const context = getContext<UnicoveContext>('state');
 	const { data } = $props();
@@ -41,11 +42,13 @@
 	let memoRef: HTMLInputElement | undefined = $state();
 
 	let id: Checksum256 | undefined = $state();
+	let error: string | undefined = $state();
 
 	function transact() {
 		if (!context.wharf || !context.wharf.session) {
 			return;
 		}
+		error = undefined;
 		const balance = context.account?.balances.find((b) =>
 			b.asset.symbol.equals(sendState.quantity.symbol)
 		);
@@ -60,8 +63,9 @@
 					id = result?.resolved?.transaction.id;
 					f.send('success');
 				})
-				.catch((error) => {
-					console.error('Transaction error', error);
+				.catch((e) => {
+					console.error('Transaction error', e);
+					error = e;
 					f.send('error');
 				});
 		} else {
@@ -404,14 +408,11 @@
 {/snippet}
 
 {#snippet Complete()}
-	<TransactionSummary hidden={f.current !== 'complete'} transactionId={id} />
+	<TransactSummary hidden={f.current !== 'complete'} transactionId={id} />
 {/snippet}
 
 {#snippet Error()}
-	<div class:hidden={f.current !== 'error'}>
-		<h2 class="h2">{m.common_transaction_error()}</h2>
-		<p>{m.common_transaction_error_subtitle()}</p>
-	</div>
+	<TransactError hidden={f.current !== 'error'} {error} />
 {/snippet}
 
 {#snippet ButtonGroup()}
@@ -419,7 +420,10 @@
 		{#if f.current === 'to'}
 			<Button variant="secondary" onclick={() => resetURL()}>{m.common_restart()}</Button>
 		{:else if f.current === 'complete'}
-			<Button onclick={() => resetURL()}>{m.send_start_new()}</Button>
+			<Button variant="secondary" onclick={() => resetURL()}>{m.send_start_new()}</Button>
+			<Button href={`/${data.network}/account/${context.account?.name}`}>
+				{m.common_view_my_account()}
+			</Button>
 		{:else}
 			<Button variant="secondary" onclick={previous}>{m.common_back()}</Button>
 		{/if}
diff --git a/src/routes/[network]/(account)/ram/(forms)/buy/+page.svelte b/src/routes/[network]/(account)/ram/(forms)/buy/+page.svelte
index 29493390f..d330169ab 100644
--- a/src/routes/[network]/(account)/ram/(forms)/buy/+page.svelte
+++ b/src/routes/[network]/(account)/ram/(forms)/buy/+page.svelte
@@ -11,7 +11,8 @@
 	import Code from '$lib/components/code.svelte';
 	import Label from '$lib/components/input/label.svelte';
 	import Stack from '$lib/components/layout/stack.svelte';
-	import TransactionSummary from '$lib/components/transactionSummary.svelte';
+	import TransactSummary from '$lib/components/transact/summary.svelte';
+	import TransactError from '$lib/components/transact/error.svelte';
 	import AssetInput from '$lib/components/input/asset.svelte';
 	import BytesInput from '$lib/components/input/bytes.svelte';
 	import AssetText from '$lib/components/elements/asset.svelte';
@@ -32,8 +33,11 @@
 	const ramAvailableSize = $derived(calAvailableSize(context.account?.resources.ram));
 
 	let transactionId: Checksum256 | undefined = $state();
+	let errorMessage: string | undefined = $state();
+	let ready = $derived(buyRamState.valid && !context.wharf.transacting);
 
 	async function handleBuyRAM() {
+		errorMessage = undefined;
 		if (!context.wharf || !context.wharf.session) {
 			alert(m.common_not_logged_in());
 			return;
@@ -51,11 +55,13 @@
 
 			resetState();
 		} catch (error) {
+			errorMessage = String(error);
 			console.error(error);
 		}
 	}
 
 	function resetState() {
+		errorMessage = undefined;
 		buyRamState.reset();
 		bytesInput?.reset();
 		assetInput?.reset();
@@ -94,7 +100,16 @@
 
 <Stack>
 	{#if transactionId}
-		<TransactionSummary {transactionId} />
+		<TransactSummary {transactionId} />
+		<Button href={`/${data.network}/ram`} variant="secondary">
+			{m.common_ram_market()}
+		</Button>
+		<Button href={`/${data.network}/account/${context.account?.name}`}>
+			{m.common_view_my_account()}
+		</Button>
+	{:else if errorMessage}
+		<TransactError error={errorMessage} />
+		<Button onclick={resetState}>{m.common_close()}</Button>
 	{:else}
 		<form onsubmit={preventDefault(handleBuyRAM)} class="mx-auto max-w-2xl space-y-4">
 			<RamResource class="hidden" ramAvailable={ramAvailableSize} />
@@ -135,7 +150,7 @@
 				</p>
 			</Stack>
 
-			<Button type="submit" class="mt-4 w-full" disabled={!buyRamState.valid}>
+			<Button type="submit" class="mt-4 w-full" disabled={!ready}>
 				{m.common_unit_buy({ unit: 'RAM' })}
 			</Button>
 
diff --git a/src/routes/[network]/(account)/ram/(forms)/sell/+page.svelte b/src/routes/[network]/(account)/ram/(forms)/sell/+page.svelte
index 9bd529415..15d10a83f 100644
--- a/src/routes/[network]/(account)/ram/(forms)/sell/+page.svelte
+++ b/src/routes/[network]/(account)/ram/(forms)/sell/+page.svelte
@@ -10,7 +10,8 @@
 	import Code from '$lib/components/code.svelte';
 	import Label from '$lib/components/input/label.svelte';
 	import Stack from '$lib/components/layout/stack.svelte';
-	import TransactionSummary from '$lib/components/transactionSummary.svelte';
+	import TransactSummary from '$lib/components/transact/summary.svelte';
+	import TransactError from '$lib/components/transact/error.svelte';
 	import AssetInput from '$lib/components/input/asset.svelte';
 	import BytesInput from '$lib/components/input/bytes.svelte';
 	import AssetText from '$lib/components/elements/asset.svelte';
@@ -31,6 +32,8 @@
 	const ramAvailableSize = $derived(calAvailableSize(context.account?.resources.ram));
 
 	let transactionId: Checksum256 | undefined = $state();
+	let errorMessage: string | undefined = $state();
+	let ready = $derived(sellRamState.valid && !context.wharf.transacting);
 
 	async function handleSellRAM() {
 		if (!context.wharf || !context.wharf.session) {
@@ -38,20 +41,22 @@
 			return;
 		}
 
-		try {
-			const transactionResult = await context.wharf.transact({
+		return context.wharf
+			.transact({
 				action: data.network.contracts.system.action('sellram', sellRamState.toJSON())
+			})
+			.then((transactionResult) => {
+				transactionId = transactionResult.resolved?.transaction.id;
+				resetState();
+			})
+			.catch((error) => {
+				errorMessage = error;
+				console.error(error);
 			});
-
-			transactionId = transactionResult.resolved?.transaction.id;
-
-			resetState();
-		} catch (error) {
-			console.error(error);
-		}
 	}
 
 	function resetState() {
+		errorMessage = undefined;
 		sellRamState.reset();
 		bytesInput?.reset();
 		assetInput?.reset();
@@ -84,89 +89,100 @@
 	}
 </script>
 
-{#if transactionId}
-	<TransactionSummary {transactionId} />
-{:else}
-	<form onsubmit={preventDefault(handleSellRAM)} class="mx-auto max-w-2xl space-y-4">
-		<RamResource class="hidden" ramAvailable={ramAvailableSize} />
-
-		<Stack class="gap-3">
-			<Label class="text-lg" for="bytesInput">{m.ram_sale_value()}</Label>
-			<div class="flex gap-4">
-				<div class="flex-1">
-					<BytesInput
-						autofocus
-						bind:value={sellRamState.bytes}
-						bind:this={bytesInput}
-						oninput={setBytesAmount}
-					/>
-				</div>
-				<div class="flex-1">
-					<AssetInput
-						bind:value={sellRamState.tokens}
-						bind:this={assetInput}
-						oninput={setAssetAmount}
-					/>
+<Stack>
+	{#if transactionId}
+		<TransactSummary {transactionId} />
+		<Button href={`/${data.network}/ram`} variant="secondary">
+			{m.common_ram_market()}
+		</Button>
+		<Button href={`/${data.network}/account/${context.account?.name}`}>
+			{m.common_view_my_account()}
+		</Button>
+	{:else if errorMessage}
+		<TransactError error={errorMessage} />
+		<Button onclick={resetState}>{m.common_close()}</Button>
+	{:else}
+		<form onsubmit={preventDefault(handleSellRAM)} class="mx-auto max-w-2xl space-y-4">
+			<RamResource class="hidden" ramAvailable={ramAvailableSize} />
+
+			<Stack class="gap-3">
+				<Label class="text-lg" for="bytesInput">{m.ram_sale_value()}</Label>
+				<div class="flex gap-4">
+					<div class="flex-1">
+						<BytesInput
+							autofocus
+							bind:value={sellRamState.bytes}
+							bind:this={bytesInput}
+							oninput={setBytesAmount}
+						/>
+					</div>
+					<div class="flex-1">
+						<AssetInput
+							bind:value={sellRamState.tokens}
+							bind:this={assetInput}
+							oninput={setAssetAmount}
+						/>
+					</div>
 				</div>
-			</div>
-			{#if sellRamState.insufficientRAM}
-				<p class="text-red-500">{m.form_validation_insufficient_balance({ unit: 'RAM' })}</p>
-			{/if}
-			<p>
-				{m.common_labeled_unit_available({ unit: 'RAM' })}
-				{#if context.account}
-					{sellRamState.maxInKBs}
-				{:else}
-					0 KB
+				{#if sellRamState.insufficientRAM}
+					<p class="text-red-500">{m.form_validation_insufficient_balance({ unit: 'RAM' })}</p>
 				{/if}
-			</p>
-		</Stack>
-
-		<Button type="submit" class="mt-4 w-full" disabled={!sellRamState.valid}>
-			{m.common_unit_sell({ unit: 'RAM' })}
-		</Button>
-
-		<Stack class="gap-3">
-			<DL>
-				<DLRow
-					title={` ${m.common_labeled_unit_price({ unit: `${context.network.chain.systemToken?.symbol.name}/RAM` })} (KB) `}
-				>
-					<DD>
-						<AssetText variant="full" value={sellRamState.pricePerKB} />
-					</DD>
-				</DLRow>
-
-				<DLRow title={m.ram_to_sell()}>
-					<DD>
-						<AssetText variant="full" value={sellRamState.kbsToSell} />
-					</DD>
-				</DLRow>
-
-				<DLRow title={m.total_proceeds()}>
-					<DD>
-						<AssetText variant="full" value={sellRamState.bytesValue} />
-					</DD>
-				</DLRow>
-
-				<DLRow title={` ${m.common_network_fees()} (0.5%) `}>
-					<DD>
-						<AssetText variant="full" value={sellRamState.fee} />
-					</DD>
-				</DLRow>
-
-				<DLRow title={m.common_expected_receive()}>
-					<DD>
-						<AssetText variant="full" value={sellRamState.expectedToReceive} />
-					</DD>
-				</DLRow>
-			</DL>
-
-			{#if sellRamState.valid}
-				<SummarySellRAM class="hidden" data={sellRamState.toJSON()} />
-			{/if}
-		</Stack>
-	</form>
-{/if}
+				<p>
+					{m.common_labeled_unit_available({ unit: 'RAM' })}
+					{#if context.account}
+						{sellRamState.maxInKBs}
+					{:else}
+						0 KB
+					{/if}
+				</p>
+			</Stack>
+
+			<Button type="submit" class="mt-4 w-full" disabled={!ready}>
+				{m.common_unit_sell({ unit: 'RAM' })}
+			</Button>
+
+			<Stack class="gap-3">
+				<DL>
+					<DLRow
+						title={` ${m.common_labeled_unit_price({ unit: `${context.network.chain.systemToken?.symbol.name}/RAM` })} (KB) `}
+					>
+						<DD>
+							<AssetText variant="full" value={sellRamState.pricePerKB} />
+						</DD>
+					</DLRow>
+
+					<DLRow title={m.ram_to_sell()}>
+						<DD>
+							<AssetText variant="full" value={sellRamState.kbsToSell} />
+						</DD>
+					</DLRow>
+
+					<DLRow title={m.total_proceeds()}>
+						<DD>
+							<AssetText variant="full" value={sellRamState.bytesValue} />
+						</DD>
+					</DLRow>
+
+					<DLRow title={` ${m.common_network_fees()} (0.5%) `}>
+						<DD>
+							<AssetText variant="full" value={sellRamState.fee} />
+						</DD>
+					</DLRow>
+
+					<DLRow title={m.common_expected_receive()}>
+						<DD>
+							<AssetText variant="full" value={sellRamState.expectedToReceive} />
+						</DD>
+					</DLRow>
+				</DL>
+
+				{#if sellRamState.valid}
+					<SummarySellRAM class="hidden" data={sellRamState.toJSON()} />
+				{/if}
+			</Stack>
+		</form>
+	{/if}
+</Stack>
 
 {#if context.settings.data.debugMode}
 	<h3 class="h3">{m.common_debugging()}</h3>
diff --git a/src/routes/[network]/(account)/refund/+page.svelte b/src/routes/[network]/(account)/refund/+page.svelte
index 9a8ce70e9..3fc48198d 100644
--- a/src/routes/[network]/(account)/refund/+page.svelte
+++ b/src/routes/[network]/(account)/refund/+page.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
 	import { Stack, Switcher } from '$lib/components/layout';
 	import Button from '$lib/components/button/button.svelte';
-	import TransactionSummary from '$lib/components/transactionSummary.svelte';
+	import TransactSummary from '$lib/components/transact/summary.svelte';
+	import TransactError from '$lib/components/transact/error.svelte';
 
 	import type { UnicoveContext } from '$lib/state/client.svelte';
 	import { getContext } from 'svelte';
@@ -18,14 +19,18 @@
 			manager.sync(data.network, context.account, context.wharf);
 		}
 	});
+
+	function resetState() {
+		manager = new RefundManager(data.network);
+	}
 </script>
 
 <Stack>
 	{#if manager.txid}
-		<TransactionSummary transactionId={manager.txid} />
+		<TransactSummary transactionId={manager.txid} />
 	{:else if manager.error}
-		<h2 class="h2">{m.common_transaction_error()}</h2>
-		<p>{m.common_transaction_error_subtitle()}</p>
+		<TransactError error={manager.error} />
+		<Button onclick={resetState}>{m.common_close()}</Button>
 	{:else}
 		<Switcher>
 			<Stack class="gap-2">
diff --git a/src/routes/[network]/(account)/resources/renting.svelte b/src/routes/[network]/(account)/resources/renting.svelte
index 90b2ef883..c1151a4e8 100644
--- a/src/routes/[network]/(account)/resources/renting.svelte
+++ b/src/routes/[network]/(account)/resources/renting.svelte
@@ -6,7 +6,8 @@
 	import AssetText from '$lib/components/elements/asset.svelte';
 	import Checkbox from '$lib/components/input/checkbox.svelte';
 	import Button from '$lib/components/button/button.svelte';
-	import TransactionSummary from '$lib/components/transactionSummary.svelte';
+	import TransactSummary from '$lib/components/transact/summary.svelte';
+	import TransactError from '$lib/components/transact/error.svelte';
 	import CpuAndNetResource from '$lib/components/elements/cpunetresource.svelte';
 
 	import { Checksum256 } from '@wharfkit/antelope';
@@ -95,32 +96,32 @@
 
 	const precision = 2;
 	let transactionId: Checksum256 | undefined = $state();
+	let errorMessage: string | undefined = $state();
 
 	function handleRent() {
+		errorMessage = undefined;
 		if (!context.wharf || !context.wharf.session || !context.network) {
 			alert('Not logged in');
 			return;
 		}
 
-		try {
-			const actions = rentState.getActions(context.network.contracts.system);
-			context.wharf
-				.transact({
-					actions: actions
-				})
-				.then((result: TransactResult) => {
-					transactionId = result.response?.transaction_id;
-					resetStateAfterTrasaction();
-				})
-				.catch((error) => {
-					console.error(error);
-				});
-		} catch (error) {
-			console.error(error);
-		}
+		const actions = rentState.getActions(network.contracts.system);
+		context.wharf
+			.transact({
+				actions: actions
+			})
+			.then((result: TransactResult) => {
+				transactionId = result.response?.transaction_id;
+			})
+			.catch((error) => {
+				errorMessage = error;
+				console.error(error);
+			});
 	}
 
 	function resetStateAfterTrasaction() {
+		transactionId = undefined;
+		errorMessage = undefined;
 		rentState.resetAfterTransction();
 		cpuAmountInput?.set();
 		netAmountInput?.set();
@@ -128,88 +129,102 @@
 </script>
 
 {#if transactionId}
-	<div class="pb-6"><TransactionSummary {transactionId} /></div>
-{/if}
+	<TransactSummary {transactionId} />
+	<Button href={`/${network}/resources`} variant="secondary">
+		{m.common_resources()}
+	</Button>
+	<Button href={`/${network}/account/${context.account?.name}`}>
+		{m.common_view_my_account()}
+	</Button>
+{:else if errorMessage}
+	<TransactError error={errorMessage} />
+	<Button onclick={resetStateAfterTrasaction}>{m.common_close()}</Button>
+{:else}
+	<div class="mx-auto max-w-md space-y-3">
+		<CpuAndNetResource
+			cpuAvailable={cpuAvailableSize}
+			netAvailable={netAvailableSize}
+			{precision}
+		/>
+		<form onsubmit={preventDefault(handleRent)}>
+			<Stack class="py-4 sm:p-4 ">
+				<fieldset class="grid gap-4">
+					<Label for="cpuNumberInput"
+						>{m.common_resouce_amount({ resource: 'CPU' })}
+						{#if rentState.cpuPricePerMs}
+							(<AssetText variant="full" value={rentState.cpuPricePerMs} />/MS){/if}</Label
+					>
+					<NumberInput
+						bind:this={cpuAmountInput}
+						id="cpuNumberInput"
+						unit="ms"
+						bind:value={rentState.cpuAmount}
+						placeholder="0"
+					/>
+				</fieldset>
 
-<div class="mx-auto max-w-md space-y-3">
-	<CpuAndNetResource cpuAvailable={cpuAvailableSize} netAvailable={netAvailableSize} {precision} />
-	<form onsubmit={preventDefault(handleRent)}>
-		<Stack class="py-4 sm:p-4 ">
-			<fieldset class="grid gap-4">
-				<Label for="cpuNumberInput"
-					>{m.common_resouce_amount({ resource: 'CPU' })}
-					{#if rentState.cpuPricePerMs}
-						(<AssetText variant="full" value={rentState.cpuPricePerMs} />/MS){/if}</Label
-				>
-				<NumberInput
-					bind:this={cpuAmountInput}
-					id="cpuNumberInput"
-					unit="ms"
-					bind:value={rentState.cpuAmount}
-					placeholder="0"
-				/>
-			</fieldset>
-
-			<fieldset class="grid gap-4">
-				<Label for="netNumberInput"
-					>{m.common_resouce_amount({ resource: 'NET' })}
-					{#if rentState.netPricePerKb}
-						(<AssetText variant="full" value={rentState.netPricePerKb} />/KB){/if}</Label
-				>
-				<NumberInput
-					bind:this={netAmountInput}
-					id="netNumberInput"
-					unit="kb"
-					bind:value={rentState.netAmount}
-					placeholder="0"
-				/>
-			</fieldset>
-
-			<fieldset class="flex items-center gap-3">
-				<Checkbox id="rentForSelf" bind:checked={rentState.rentingForSelf} />
-				<Label for="rentForSelf">{m.resources_rent_for_self()}</Label>
-			</fieldset>
-
-			{#if !rentState.rentingForSelf}
-				<fieldset class="semi-bold grid gap-4">
-					<Label for="thirdReceiver">{m.send_receiving_account()}</Label>
-					<NameInput
-						id="thirdReceiver"
-						bind:this={receiverNameInput}
-						bind:value={rentState.thirdReceiver}
-						bind:valid={rentState.thirdReceiverValid}
-						placeholder={m.resources_rent_receiving_placeholder()}
+				<fieldset class="grid gap-4">
+					<Label for="netNumberInput"
+						>{m.common_resouce_amount({ resource: 'NET' })}
+						{#if rentState.netPricePerKb}
+							(<AssetText variant="full" value={rentState.netPricePerKb} />/KB){/if}</Label
+					>
+					<NumberInput
+						bind:this={netAmountInput}
+						id="netNumberInput"
+						unit="kb"
+						bind:value={rentState.netAmount}
+						placeholder="0"
 					/>
 				</fieldset>
-			{/if}
-
-			{#if rentState.insufficientBalance}
-				<p class="text-red-500">Insufficient balance. Please enter a smaller amount.</p>
-			{/if}
-			<Button type="submit" class="w-full" disabled={!rentState.valid}>
-				{#if rentState.cost.value}
-					{m.resources_rent_confirm_with_cost({ cost: rentState.cost })}
-				{:else}
-					{m.resources_rent_confirm()}
+
+				<fieldset class="flex items-center gap-3">
+					<Checkbox id="rentForSelf" bind:checked={rentState.rentingForSelf} />
+					<Label for="rentForSelf">{m.resources_rent_for_self()}</Label>
+				</fieldset>
+
+				{#if !rentState.rentingForSelf}
+					<fieldset class="semi-bold grid gap-4">
+						<Label for="thirdReceiver">{m.send_receiving_account()}</Label>
+						<NameInput
+							id="thirdReceiver"
+							bind:this={receiverNameInput}
+							bind:value={rentState.thirdReceiver}
+							bind:valid={rentState.thirdReceiverValid}
+							placeholder={m.resources_rent_receiving_placeholder()}
+						/>
+					</fieldset>
 				{/if}
-			</Button>
+
+				{#if rentState.insufficientBalance}
+					<p class="text-red-500">Insufficient balance. Please enter a smaller amount.</p>
+				{/if}
+				<Button type="submit" class="w-full" disabled={!rentState.valid}>
+					{#if rentState.cost.value}
+						{m.resources_rent_confirm_with_cost({ cost: rentState.cost })}
+					{:else}
+						{m.resources_rent_confirm()}
+					{/if}
+				</Button>
+			</Stack>
+		</form>
+
+		<Stack class="sm:px-4">
+			<ul>
+				{#each rentDetails as detail}
+					<!-- TODO: Color audit -->
+					<li
+						class="flex justify-between border-b border-mineShaft-300/10 bg-gradient-to-r from-transparent to-transparent py-3 last:border-none odd:via-mineShaft-950"
+					>
+						<span class="text-base font-medium">{detail.title}</span>
+						<span class="text-base font-medium text-white">{detail.desc}</span>
+					</li>
+				{/each}
+			</ul>
 		</Stack>
-	</form>
-
-	<Stack class="sm:px-4">
-		<ul>
-			{#each rentDetails as detail}
-				<!-- TODO: Color audit -->
-				<li
-					class="flex justify-between border-b border-mineShaft-300/10 bg-gradient-to-r from-transparent to-transparent py-3 last:border-none odd:via-mineShaft-950"
-				>
-					<span class="text-base font-medium">{detail.title}</span>
-					<span class="text-base font-medium text-white">{detail.desc}</span>
-				</li>
-			{/each}
-		</ul>
-	</Stack>
-</div>
+	</div>
+{/if}
+
 {#if context.settings.data.debugMode}
 	<div class="mx-auto mt-6 max-w-md border-2 border-skyBlue-500 p-6">
 		<h3 class="h3 text-center">Debug Info</h3>
diff --git a/src/routes/[network]/(account)/staking/(staking)/stake/+page.svelte b/src/routes/[network]/(account)/staking/(staking)/stake/+page.svelte
index 940c11a44..7c31a971f 100644
--- a/src/routes/[network]/(account)/staking/(staking)/stake/+page.svelte
+++ b/src/routes/[network]/(account)/staking/(staking)/stake/+page.svelte
@@ -5,7 +5,8 @@
 	import TokenCard from '$lib/components/elements/tokencard.svelte';
 	import Button from '$lib/components/button/button.svelte';
 	import Label from '$lib/components/input/label.svelte';
-	import TransactionSummary from '$lib/components/transactionSummary.svelte';
+	import TransactSummary from '$lib/components/transact/summary.svelte';
+	import TransactError from '$lib/components/transact/error.svelte';
 	import type { UnicoveContext } from '$lib/state/client.svelte';
 	import { getContext } from 'svelte';
 	import { StakeManager } from './manager.svelte';
@@ -16,6 +17,7 @@
 	const { data } = $props();
 
 	let manager: StakeManager = $state(new StakeManager(data.network));
+	let ready = $derived(manager.assetValid && !context.wharf.transacting);
 
 	let hints = $derived([
 		{
@@ -32,14 +34,24 @@
 			manager.sync(data.network, context.account, context.wharf);
 		}
 	});
+
+	function resetState() {
+		manager = new StakeManager(data.network);
+	}
 </script>
 
 <Stack>
 	{#if manager.txid}
-		<TransactionSummary transactionId={manager.txid} />
+		<TransactSummary transactionId={manager.txid} />
+		<Button href={`/${data.network}/staking`} variant="secondary">
+			{m.search_result_description_staking()}
+		</Button>
+		<Button href={`/${data.network}/account/${context.account?.name}`}>
+			{m.common_view_my_account()}
+		</Button>
 	{:else if manager.error}
-		<h2 class="h2">{m.common_transaction_error()}</h2>
-		<p>{m.common_transaction_error_subtitle()}</p>
+		<TransactError error={manager.error} />
+		<Button onclick={resetState}>{m.common_close()}</Button>
 	{:else}
 		<TokenCard
 			token={manager.tokenBalance}
@@ -83,7 +95,7 @@
 					<AssetText value={manager.stakable} />
 				</button>
 			</Label>
-			<Button disabled={!manager.assetValid} onclick={() => manager.transact()} variant="primary"
+			<Button disabled={!ready} onclick={() => manager.transact()} variant="primary"
 				>{m.common_stake()}</Button
 			>
 		</Stack>
diff --git a/src/routes/[network]/(account)/staking/(staking)/unstake/+page.svelte b/src/routes/[network]/(account)/staking/(staking)/unstake/+page.svelte
index c8837028e..a9079900e 100644
--- a/src/routes/[network]/(account)/staking/(staking)/unstake/+page.svelte
+++ b/src/routes/[network]/(account)/staking/(staking)/unstake/+page.svelte
@@ -5,7 +5,8 @@
 	import TokenCard from '$lib/components/elements/tokencard.svelte';
 	import Button from '$lib/components/button/button.svelte';
 	import Label from '$lib/components/input/label.svelte';
-	import TransactionSummary from '$lib/components/transactionSummary.svelte';
+	import TransactSummary from '$lib/components/transact/summary.svelte';
+	import TransactError from '$lib/components/transact/error.svelte';
 	import { DL } from '$lib/components/descriptionlist';
 	import type { UnicoveContext } from '$lib/state/client.svelte';
 	import { getContext } from 'svelte';
@@ -26,14 +27,24 @@
 			manager.sync(data.network, context.account, context.wharf);
 		}
 	});
+
+	function resetState() {
+		manager = new UnstakeManager(data.network);
+	}
 </script>
 
 <Stack>
 	{#if manager.txid}
-		<TransactionSummary transactionId={manager.txid} />
+		<TransactSummary transactionId={manager.txid} />
+		<Button href={`/${data.network}/staking`} variant="secondary">
+			{m.search_result_description_staking()}
+		</Button>
+		<Button href={`/${data.network}/account/${context.account?.name}`}>
+			{m.common_view_my_account()}
+		</Button>
 	{:else if manager.error}
-		<h2 class="h2">{m.common_transaction_error()}</h2>
-		<p>{m.common_transaction_error_subtitle()}</p>
+		<TransactError error={manager.error} />
+		<Button onclick={resetState}>{m.common_close()}</Button>
 	{:else}
 		<TokenCard
 			token={manager.tokenBalance}
diff --git a/src/routes/[network]/(account)/staking/(staking)/withdraw/+page.svelte b/src/routes/[network]/(account)/staking/(staking)/withdraw/+page.svelte
index 6ef37e013..5f32e92ec 100644
--- a/src/routes/[network]/(account)/staking/(staking)/withdraw/+page.svelte
+++ b/src/routes/[network]/(account)/staking/(staking)/withdraw/+page.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
 	import { Stack, Switcher } from '$lib/components/layout';
 	import Button from '$lib/components/button/button.svelte';
-	import TransactionSummary from '$lib/components/transactionSummary.svelte';
+	import TransactSummary from '$lib/components/transact/summary.svelte';
+	import TransactError from '$lib/components/transact/error.svelte';
 
 	import type { UnicoveContext } from '$lib/state/client.svelte';
 	import { getContext } from 'svelte';
@@ -18,14 +19,24 @@
 			manager.sync(data.network, context.account, context.wharf);
 		}
 	});
+
+	function resetState() {
+		manager = new WithdrawManager(data.network);
+	}
 </script>
 
 <Stack>
 	{#if manager.txid}
-		<TransactionSummary transactionId={manager.txid} />
+		<TransactSummary transactionId={manager.txid} />
+		<Button href={`/${data.network}/staking`} variant="secondary">
+			{m.search_result_description_staking()}
+		</Button>
+		<Button href={`/${data.network}/account/${context.account?.name}`}>
+			{m.common_view_my_account()}
+		</Button>
 	{:else if manager.error}
-		<h2 class="h2">{m.common_transaction_error()}</h2>
-		<p>{m.common_transaction_error_subtitle()}</p>
+		<TransactError error={manager.error} />
+		<Button onclick={resetState}>{m.common_close()}</Button>
 	{:else}
 		<Switcher>
 			<Stack class="gap-2">
diff --git a/src/routes/[network]/(account)/undelegate/+page.svelte b/src/routes/[network]/(account)/undelegate/+page.svelte
index 07b967c9f..df2f52ffe 100644
--- a/src/routes/[network]/(account)/undelegate/+page.svelte
+++ b/src/routes/[network]/(account)/undelegate/+page.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
 	import { Stack, Switcher } from '$lib/components/layout';
 	import Button from '$lib/components/button/button.svelte';
-	import TransactionSummary from '$lib/components/transactionSummary.svelte';
+	import TransactSummary from '$lib/components/transact/summary.svelte';
+	import TransactError from '$lib/components/transact/error.svelte';
 
 	import type { UnicoveContext } from '$lib/state/client.svelte';
 	import { getContext } from 'svelte';
@@ -17,14 +18,18 @@
 			manager.sync(data.network, context.account, context.wharf);
 		}
 	});
+
+	function resetState() {
+		manager = new RefundManager(data.network);
+	}
 </script>
 
 <Stack>
 	{#if manager.txid}
-		<TransactionSummary transactionId={manager.txid} />
+		<TransactSummary transactionId={manager.txid} />
 	{:else if manager.error}
-		<h2 class="h2">Transaction Error</h2>
-		<p>There was an error submitting your transaction.</p>
+		<TransactError error={manager.error} />
+		<Button onclick={resetState}>Close</Button>
 	{:else}
 		<Switcher>
 			<Stack class="gap-2">
diff --git a/src/routes/[network]/(explorer)/contract/[contract]/actions/[action]/[[data]]/+page.svelte b/src/routes/[network]/(explorer)/contract/[contract]/actions/[action]/[[data]]/+page.svelte
index 889da02fe..cd3558ff8 100644
--- a/src/routes/[network]/(explorer)/contract/[contract]/actions/[action]/[[data]]/+page.svelte
+++ b/src/routes/[network]/(explorer)/contract/[contract]/actions/[action]/[[data]]/+page.svelte
@@ -19,7 +19,8 @@
 	import { MultiCard } from '$lib/components/layout';
 	import Checkbox from '$lib/components/input/checkbox.svelte';
 	import type { TransactResult } from '@wharfkit/session';
-	import TransactionSummary from '$lib/components/transactionSummary.svelte';
+	import TransactSummary from '$lib/components/transact/summary.svelte';
+	import TransactError from '$lib/components/transact/error.svelte';
 
 	const { data } = $props();
 
@@ -33,6 +34,7 @@
 	let readonlyError = $state();
 	let readonlyResult = $state();
 	let transactResult: TransactResult | undefined = $state();
+	let error: string | undefined = $state();
 
 	const flatten = (
 		obj: Record<string, any>,
@@ -146,7 +148,8 @@
 				.then((result) => {
 					transactResult = result;
 				})
-				.catch((error) => {
+				.catch((e) => {
+					error = e;
 					console.error('Transaction error', error);
 				});
 		}
@@ -203,7 +206,10 @@
 <MultiCard>
 	<Card>
 		{#if transactResult && transactResult.resolved}
-			<TransactionSummary transactionId={transactResult.resolved.transaction.id} />
+			<TransactSummary transactionId={transactResult.resolved.transaction.id} />
+			<Button onclick={clear}>Clear Results</Button>
+		{:else if error}
+			<TransactError {error} />
 			<Button onclick={clear}>Clear Results</Button>
 		{:else}
 			<h4 class="h4">Perform Action</h4>
diff --git a/src/routes/[network]/(explorer)/transaction/[id]/[[seq]]/traces_old/+page.svelte b/src/routes/[network]/(explorer)/transaction/[id]/[[seq]]/traces_old/+page.svelte
deleted file mode 100644
index 5c57de273..000000000
--- a/src/routes/[network]/(explorer)/transaction/[id]/[[seq]]/traces_old/+page.svelte
+++ /dev/null
@@ -1,81 +0,0 @@
-<script lang="ts">
-	import Code from '$lib/components/code.svelte';
-	import type { Action, NameType } from '@wharfkit/antelope';
-
-	let { data } = $props();
-
-	/* eslint-disable @typescript-eslint/no-explicit-any */
-	const deduplicateTraces = (traces: any) => {
-		return Object.values(
-			traces.reduce((item: any, trace: any) => {
-				const contract = trace.act.account;
-				if (!item[contract]) {
-					item[contract] = { ...trace, receivers: new Set() };
-				}
-				item[contract].receivers.add(trace.receiver);
-				delete item[contract].receiver;
-				delete item[contract].receipt.receiver;
-				return item;
-			}, {})
-		).map((trace: any) => ({
-			...trace,
-			receivers: [...trace.receivers] // Convert Set to Array
-		}));
-	};
-
-	const traces = deduplicateTraces(data.transaction.traces);
-	// Define the Action interface
-	interface Trace {
-		act: Action;
-		receivers: [NameType];
-	}
-</script>
-
-{#if traces}
-	{@const actions = 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>
-						{#each action.receivers as receiver}
-							<div>{receiver}</div>
-						{/each}
-					</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}