additional payment error cleanup & documentation

src/lib/eth-defi/helpers.ts

@@ -234,3 +234,12 @@ export function extractErrorInfo(error: unknown, state?: string | undefined): Er
 	const cause = extractErrorInfo(error.cause);
 	return { name, message, shortMessage, details, functionName, state, cause };
 }
+
+/**
+ * Walk error's causes and return true if any match the provided error name
+ */
+export function errorCausedBy(error: any, name: string) {
+	if (error?.name === name) return true;
+	if (error?.cause) return errorCausedBy(error.cause, name);
+	return false;
+}

src/routes/wizard/deposit/payment/+page.svelte

@@ -47,7 +47,7 @@
 
 	const progressBar = getProgressBar(-1, getExpectedBlockTime(chainId));
 
-	const viewTransactionCopy = 'Click the transaction ID above to view the status in the blockchain explorer.';
+	const transactionCopy = 'Click the transaction ID above to view the status in the blockchain explorer.';
 
 	let paymentValue = '';
 	let error: ErrorInfo | unknown | undefined = undefined;
@@ -175,11 +175,6 @@
 			confirm(signedArgs) {
 				confirmPayment(signedArgs).then(payment.process).catch(payment.fail);
 				return 'confirming';
-			},
-
-			fail(err) {
-				captureException(err);
-				return 'failed';
 			}
 		},
 
@@ -253,11 +248,6 @@
 			process(txId) {
 				paymentTxId = txId;
 				return 'processing';
-			},
-
-			fail(err) {
-				captureException(err);
-				return 'failed';
 			}
 		},
 
@@ -279,9 +269,10 @@
 		},
 
 		failed: {
-			_enter({ from, event, args }) {
-				if (event === 'fail' && typeof from === 'string') {
-					error = extractErrorInfo(args[0], from);
+			_enter({ from, event, args: [err] }) {
+				if (event === 'fail') {
+					captureException(err);
+					error = extractErrorInfo(err, from as string);
 				}
 			},
 
@@ -422,7 +413,7 @@
 			{#if $payment === 'processingApproval'}
 				<Alert size="sm" status="info" title="Approval processing">
 					The duration of processing may vary based on factors such as blockchain congestion and gas specified.
-					{viewTransactionCopy}
+					{transactionCopy}
 				</Alert>
 			{/if}
 
@@ -435,13 +426,13 @@
 			{#if $payment === 'processing'}
 				<Alert size="sm" status="info" title="Payment processing">
 					The duration of processing may vary based on factors such as blockchain congestion and gas specified.
-					{viewTransactionCopy}
+					{transactionCopy}
 				</Alert>
 			{/if}
 
 			{#if $payment === 'failed'}
 				<Alert size="sm" status="error" title="Error">
-					<PaymentError {error} {denominationToken} {viewTransactionCopy} />
+					<PaymentError {error} symbol={denominationToken.symbol} {transactionCopy} />
 					<Button slot="cta" size="xs" label="Try again" on:click={payment.retry} />
 				</Alert>
 			{/if}

src/routes/wizard/deposit/payment/PaymentError.svelte

@@ -1,58 +1,58 @@
+<!--
+@component
+Displays relevant user-facing error message based on the type of payment error encountered.render
+
+@example
+```svelte
+  <PaymentError
+    error={paymentError}
+    symbol={denominationToken.symbol}
+    transactionCopy="See tx info above"
+  >
+```
+-->
 <script lang="ts">
-	import type { ErrorInfo, TokenInfo, GetTokenBalanceReturnType } from '$lib/eth-defi/helpers';
+	import { type ErrorInfo, errorCausedBy } from '$lib/eth-defi/helpers';
 
 	export let error: ErrorInfo | any;
-	export let denominationToken: TokenInfo | GetTokenBalanceReturnType;
-	export let viewTransactionCopy: string;
+	export let symbol: string;
+	export let transactionCopy: string;
+
+	const causedBy = errorCausedBy.bind(null, error);
 
-	// TODO: move this (and generic `walk` function) to an `error` helper
-	// walk the error's causes and return true if any match the provided error name
-	function causedBy(name: string, err: any = error) {
-		if (err?.name === name) return true;
-		if (err?.cause) return causedBy(name, err.cause);
-		return false;
-	}
+	const state = error.state ?? 'unknown';
+	const authorizingOrApproving = ['authorizing', 'approving'].includes(state);
+	const processing = state.startsWith('processing');
+	const confirming = state === 'confirming';
 </script>
 
-{#if error.state === 'authorizing'}
+{#if causedBy('NavigationLostStateError')}
+	Wallet request state lost due to window navigation; please cancel the request in your wallet and try again.
+{:else if authorizingOrApproving}
 	{#if causedBy('UserRejectedRequestError')}
-		Authorization to transfer {denominationToken.symbol} tokens from your wallet was refused. To proceed with share purchase,
-		please try again and accept the signature request.
+		Authorization to transfer {symbol} tokens from your wallet was refused by user. To proceed with share purchase, please
+		try again and approve the request.
 	{:else if error.name === 'UnknownRpcError' && error.details.includes('eth_signTypedData_v4')}
 		Authorization failed because your wallet does not support typed data signatures. Consider using TrustWallet, Rainbow
 		or a browser extension wallet like MetaMask.
-	{:else if causedBy('NavigationLostStateError')}
-		Authorization request lost due to window navigation; please cancel wallet request and try again.
-	{:else}
-		Authorization to transfer {denominationToken.symbol} tokens from your wallet failed.
-		{error.shortMessage ?? error.details ?? 'Failure reason unknown.'}
-	{/if}
-{/if}
-
-{#if error.state === 'approving'}
-	{#if causedBy('UserRejectedRequestError')}
-		Approval for {denominationToken.symbol} spending cap was refused. To proceed with share purchase, please try again and
-		approve the request.
-	{:else if causedBy('NavigationLostStateError')}
-		Approval request lost due to window navigation; please cancel wallet request and try again.
 	{:else}
-		Approval for {denominationToken.symbol} spending cap failed.
+		Authorization to transfer {symbol} tokens from your wallet failed.
 		{error.shortMessage ?? error.details ?? 'Failure reason unknown.'}
 	{/if}
-{/if}
-
-{#if error.state === 'confirming'}
+{:else if confirming}
 	{#if causedBy('GetSharePriceError')}
 		Error fetching share price; unable to calculate minSharesQuantity. Aborting payment contract request.
-	{:else if causedBy('NavigationLostStateError')}
-		Payment request lost due to window navigation; please cancel wallet request and try again.
+	{:else if causedBy('UserRejectedRequestError')}
+		Request to buy shares using your wallet was refused by user. To proceed with share purchase, please try again and
+		approve the request.
 	{:else}
 		Payment confirmation from wallet account failed.
 		{error.shortMessage ?? error.details ?? 'Failure reason unknown.'}
 	{/if}
-{/if}
-
-{#if error.state.startsWith('processing')}
+{:else if processing}
 	{error.shortMessage ?? error.details ?? 'Unable to verify transaction status.'}
-	{viewTransactionCopy}
+	{transactionCopy}
+{:else}
+	An unexpected error occurred during "{state}" step.
+	{error.name}: {error.shortMessage ?? error.details ?? 'Failure reason unknown.'}
 {/if}