feat(frontend): show how long each priority is expected to take

src/frontend/src/eth/components/fee/EthFeePriority.svelte

@@ -103,6 +103,7 @@
 							{priority}
 							selected={priority === $sendEthFeePriority}
 							testId={`${ETH_FEE_PRIORITY_OPTION}-${priority}`}
+							waitTimeMs={$feePrioritiesStore.waitTimeMs[priority]}
 						/>
 					{/each}
 				</div>

src/frontend/src/eth/components/fee/EthFeePriorityOption.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
-	import { nonNullish } from '@dfinity/utils';
+	import { nonNullish, secondsToDuration } from '@dfinity/utils';
 	import ConvertAmountExchange from '$lib/components/convert/ConvertAmountExchange.svelte';
 	import type { EthFeePriority } from '$lib/enums/eth-fee-priority';
+	import { i18n } from '$lib/stores/i18n.store';
 	import { formatToken } from '$lib/utils/format.utils';
 
 	interface Props {
@@ -13,6 +14,7 @@
 		fee?: bigint;
 		decimals: number;
 		exchangeRate?: number;
+		waitTimeMs?: number;
 		groupName: string;
 		testId?: string;
 		onSelect: (priority: EthFeePriority) => void;
@@ -27,12 +29,24 @@
 		fee,
 		decimals,
 		exchangeRate,
+		waitTimeMs,
 		groupName,
 		testId,
 		onSelect
 	}: Props = $props();
 
 	const inputId = $derived(`${groupName}-${priority}`);
+
+	// Sub-second estimates round up rather than to zero: a chain that confirms in 500ms is better
+	// described as a second than as nothing.
+	const formattedWaitTime = $derived(
+		nonNullish(waitTimeMs)
+			? secondsToDuration({
+					seconds: BigInt(Math.max(1, Math.round(waitTimeMs / 1000))),
+					i18n: $i18n.temporal.seconds_to_duration
+				})
+			: undefined
+	);
 </script>
 
 <label class="flex w-full cursor-pointer items-center gap-3 py-2" for={inputId}>
@@ -58,5 +72,9 @@
 				{exchangeRate}
 			/>
 		{/if}
+
+		{#if nonNullish(waitTimeMs)}
+			<div>~{formattedWaitTime}</div>
+		{/if}
 	</span>
 </label>

src/frontend/src/eth/rest/infura.rest.ts

@@ -40,6 +40,11 @@ export class InfuraGasRest {
 				[EthFeePriority.SLOW]: mapLevel(low),
 				[EthFeePriority.NORMAL]: mapLevel(medium),
 				[EthFeePriority.FAST]: mapLevel(high)
+			},
+			waitTimeMs: {
+				[EthFeePriority.SLOW]: low.maxWaitTimeEstimate,
+				[EthFeePriority.NORMAL]: medium.maxWaitTimeEstimate,
+				[EthFeePriority.FAST]: high.maxWaitTimeEstimate
 			}
 		};
 	};

src/frontend/src/eth/services/fee.services.ts

@@ -151,7 +151,7 @@ export const getEthFeeDataWithProvider = async ({
 
 	const { getSuggestedFeeData } = new InfuraGasRest(chainId);
 
-	const { baseFeePerGas, perPriority } = await getSuggestedFeeData();
+	const { baseFeePerGas, perPriority, waitTimeMs } = await getSuggestedFeeData();
 
 	const { maxFeePerGas: floorMaxFeePerGas, maxPriorityFeePerGas: floorMaxPriorityFeePerGas } =
 		getGasFeeFloor(chainId);
@@ -174,6 +174,7 @@ export const getEthFeeDataWithProvider = async ({
 
 	const priorities: EthFeePriorities = {
 		baseFeePerGas,
+		waitTimeMs,
 		perPriority: {
 			[EthFeePriority.SLOW]: applyFloors(perPriority[EthFeePriority.SLOW]),
 			[EthFeePriority.NORMAL]: applyFloors(perPriority[EthFeePriority.NORMAL]),

src/frontend/src/eth/types/fee.ts

@@ -13,4 +13,7 @@ export type EthFeePerGas = Pick<TransactionFeeData, 'maxFeePerGas' | 'maxPriorit
 export interface EthFeePriorities {
 	baseFeePerGas: bigint;
 	perPriority: Record<EthFeePriority, EthFeePerGas>;
+	// Kept beside `perPriority` rather than inside it: those entries are spread straight into
+	// `TransactionFeeData`, which has no place for a wait estimate.
+	waitTimeMs: Record<EthFeePriority, number>;
 }

src/frontend/src/tests/eth/components/fee/EthFeePriority.spec.ts

@@ -26,6 +26,11 @@ describe('EthFeePriority', () => {
 			[Priority.SLOW]: { maxFeePerGas: 100_000_000_000n, maxPriorityFeePerGas: 1_000_000_000n },
 			[Priority.NORMAL]: { maxFeePerGas: 100_000_000_000n, maxPriorityFeePerGas: 5_000_000_000n },
 			[Priority.FAST]: { maxFeePerGas: 100_000_000_000n, maxPriorityFeePerGas: 20_000_000_000n }
+		},
+		waitTimeMs: {
+			[Priority.SLOW]: 48_000,
+			[Priority.NORMAL]: 24_000,
+			[Priority.FAST]: 12_000
 		}
 	};
 

src/frontend/src/tests/eth/components/send/EthSendForm.spec.ts

@@ -47,6 +47,11 @@ describe('EthSendForm', () => {
 			[EthFeePriority.SLOW]: { maxFeePerGas: 100n, maxPriorityFeePerGas: 1n },
 			[EthFeePriority.NORMAL]: { maxFeePerGas: 100n, maxPriorityFeePerGas: 5n },
 			[EthFeePriority.FAST]: { maxFeePerGas: 100n, maxPriorityFeePerGas: 20n }
+		},
+		waitTimeMs: {
+			[EthFeePriority.SLOW]: 48_000,
+			[EthFeePriority.NORMAL]: 24_000,
+			[EthFeePriority.FAST]: 12_000
 		}
 	});
 

src/frontend/src/tests/eth/rest/infura.rest.spec.ts

@@ -62,6 +62,11 @@ describe('infura.rest', () => {
 					maxFeePerGas: parseToken({ value: '41.161299308', unitName: 'gwei' }),
 					maxPriorityFeePerGas: parseToken({ value: '0.3', unitName: 'gwei' })
 				}
+			},
+			waitTimeMs: {
+				[EthFeePriority.SLOW]: 30000,
+				[EthFeePriority.NORMAL]: 45000,
+				[EthFeePriority.FAST]: 60000
 			}
 		};
 

src/frontend/src/tests/eth/services/eth-open-crypto-pay.services.spec.ts

@@ -48,6 +48,11 @@ vi.mock('$eth/providers/infura-cketh.providers', () => ({
 
 const mockEthFeePriorities: EthFeePriorities = {
 	baseFeePerGas: 5n,
+	waitTimeMs: {
+		[EthFeePriority.SLOW]: 48_000,
+		[EthFeePriority.NORMAL]: 24_000,
+		[EthFeePriority.FAST]: 12_000
+	},
 	perPriority: {
 		[EthFeePriority.SLOW]: { maxFeePerGas: 12n, maxPriorityFeePerGas: 7n },
 		[EthFeePriority.NORMAL]: { maxFeePerGas: 12n, maxPriorityFeePerGas: 7n },

src/frontend/src/tests/eth/services/fee.services.spec.ts

@@ -23,6 +23,11 @@ const mockSuggestedFeeData = ({
 	maxPriorityFeePerGas
 }: EthFeePerGas): EthFeePriorities => ({
 	baseFeePerGas: 5n,
+	waitTimeMs: {
+		[EthFeePriority.SLOW]: 48_000,
+		[EthFeePriority.NORMAL]: 24_000,
+		[EthFeePriority.FAST]: 12_000
+	},
 	perPriority: {
 		[EthFeePriority.SLOW]: { maxFeePerGas, maxPriorityFeePerGas },
 		[EthFeePriority.NORMAL]: { maxFeePerGas, maxPriorityFeePerGas },