feat(frontend): handle insufficientFundsForFee case in BtcSendReview (#…

…3755)

# Motivation

This PR fixes issue described
[here](#3480 (comment))
- there was no check in the BTC send flow which makes sure that provided
amount and related utxos fee do not exceed available balance.

The component now checks `insufficientFundsForFee` case, disabled "send"
button if it's true, as well as shows the following user message:

<img width="627" alt="error"
src="https://github.com/user-attachments/assets/6d7aa80c-261b-4ee7-a4db-31dfbd91d9a6">

src/frontend/src/btc/components/send/BtcSendReview.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { isNullish } from '@dfinity/utils';
+	import { isNullish, nonNullish } from '@dfinity/utils';
+	import { getContext } from 'svelte';
 	import type { Readable } from 'svelte/store';
 	import BtcReviewNetwork from '$btc/components/send/BtcReviewNetwork.svelte';
 	import BtcSendWarnings from '$btc/components/send/BtcSendWarnings.svelte';
@@ -9,10 +10,13 @@
 		initPendingSentTransactionsStatus
 	} from '$btc/derived/btc-pending-sent-transactions-status.derived';
 	import type { UtxosFee } from '$btc/types/btc-send';
+	import InsufficientFundsForFee from '$lib/components/fee/InsufficientFundsForFee.svelte';
 	import SendReview from '$lib/components/send/SendReview.svelte';
+	import { SEND_CONTEXT_KEY, type SendContext } from '$lib/stores/send.store';
 	import type { NetworkId } from '$lib/types/network';
 	import type { OptionAmount } from '$lib/types/send';
 	import { invalidAmount } from '$lib/utils/input.utils';
+	import { parseToken } from '$lib/utils/parse.utils';
 	import { isInvalidDestinationBtc } from '$lib/utils/send.utils';
 
 	export let destination = '';
@@ -21,15 +25,30 @@
 	export let source: string;
 	export let utxosFee: UtxosFee | undefined = undefined;
 
+	const { sendBalance, sendTokenDecimals } = getContext<SendContext>(SEND_CONTEXT_KEY);
+
 	let hasPendingTransactionsStore: Readable<BtcPendingSentTransactionsStatus>;
 	$: hasPendingTransactionsStore = initPendingSentTransactionsStatus(source);
 
+	// TODO: in the updated Send flow designs, this check will be done one step before in BtcSendForm
+	let insufficientFundsForFee: boolean;
+	$: insufficientFundsForFee =
+		nonNullish(utxosFee) && nonNullish($sendBalance) && nonNullish(amount)
+			? parseToken({
+					value: `${amount}`,
+					unitName: $sendTokenDecimals
+				})
+					.add(utxosFee.feeSatoshis)
+					.gt($sendBalance)
+			: false;
+
 	let disableSend: boolean;
 	// We want to disable send if pending transactions or UTXOs fee isn't available yet, there was an error or there are pending transactions.
 	$: disableSend =
 		$hasPendingTransactionsStore !== BtcPendingSentTransactionsStatus.NONE ||
 		isNullish(utxosFee) ||
 		utxosFee.utxos.length === 0 ||
+		insufficientFundsForFee ||
 		invalid;
 
 	// Should never happen given that the same checks are performed on previous wizard step
@@ -46,9 +65,11 @@
 
 	<BtcUtxosFee slot="fee" bind:utxosFee {networkId} {amount} />
 
-	<BtcSendWarnings
-		slot="info"
-		{utxosFee}
-		pendingTransactionsStatus={$hasPendingTransactionsStore}
-	/>
+	<svelte:fragment slot="info">
+		{#if insufficientFundsForFee}
+			<InsufficientFundsForFee testId="btc-send-form-insufficient-funds-for-fee" />
+		{:else}
+			<BtcSendWarnings {utxosFee} pendingTransactionsStatus={$hasPendingTransactionsStore} />
+		{/if}
+	</svelte:fragment>
 </SendReview>

src/frontend/src/tests/btc/components/send/BtcSendReview.spec.ts

@@ -10,7 +10,8 @@ import { render, waitFor } from '@testing-library/svelte';
 import { readable } from 'svelte/store';
 
 describe('BtcSendReview', () => {
-	const mockContext = (balance: bigint | undefined = 1000000n) =>
+	const defaultBalance = 1000000n;
+	const mockContext = (balance: bigint | undefined = defaultBalance) =>
 		new Map([
 			[
 				SEND_CONTEXT_KEY,
@@ -41,6 +42,7 @@ describe('BtcSendReview', () => {
 			.mockImplementation(() => readable(status));
 
 	const buttonTestId = REVIEW_FORM_SEND_BUTTON;
+	const insufficientFundsForFeeTestId = 'btc-send-form-insufficient-funds-for-fee';
 
 	beforeEach(() => {
 		mockPage.reset();
@@ -50,10 +52,7 @@ describe('BtcSendReview', () => {
 		mockBtcPendingSendTransactionsStatusStore();
 
 		const { getByTestId } = render(BtcSendReview, {
-			props: {
-				...props,
-				utxosFee: mockUtxosFee
-			},
+			props,
 			context: mockContext()
 		});
 
@@ -150,4 +149,19 @@ describe('BtcSendReview', () => {
 			expect(getByTestId(buttonTestId)).toHaveAttribute('disabled');
 		});
 	});
+
+	it('should disable the next button and render insufficient funds for fee message', () => {
+		const { getByTestId } = render(BtcSendReview, {
+			props: {
+				...props,
+				amount: defaultBalance
+			},
+			context: mockContext()
+		});
+
+		expect(getByTestId(insufficientFundsForFeeTestId)).toHaveTextContent(
+			en.fee.assertion.insufficient_funds_for_fee
+		);
+		expect(getByTestId(buttonTestId)).toHaveAttribute('disabled');
+	});
 });