Merge pull request #382 from greymass/form-handling

Reworked success/error after a form calls transact

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>

src/lib/components/transactionSummary.svelte → 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';
 

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,18 +229,14 @@ 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.');
 		}
 
 		transaction.status = StatusType.BROADCAST;
 		transaction.response = result.response;
 		transaction.transaction = result.resolved.transaction;
-		// const { id } = sendSuccessToast(transaction);
-		// transaction.toastId = id;
+
 		queueTransaction(transaction);
 
 		return result;

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,22 +408,22 @@
 {/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()}
 	<fieldset class="flex gap-2 *:flex-1">
 		{#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}

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>