From 965e0890a48e00868f61f3c5ab1c5ebf60db6fa8 Mon Sep 17 00:00:00 2001
From: Denys Karmazyn <denys.karmazyn@dfinity.org>
Date: Wed, 9 Oct 2024 16:57:35 +0200
Subject: [PATCH] feat(frontend): formCancelAction prop for BtcSendTokenWizard
 (#2757)

# Motivation

Extending BtcSendTokenWizard with an additional prop that tells
component which button should it render - close or back.
---
 .../components/send/BtcSendTokenWizard.svelte | 20 +++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/btc/components/send/BtcSendTokenWizard.svelte b/src/frontend/src/btc/components/send/BtcSendTokenWizard.svelte
index b8e28b09e..01b709039 100644
--- a/src/frontend/src/btc/components/send/BtcSendTokenWizard.svelte
+++ b/src/frontend/src/btc/components/send/BtcSendTokenWizard.svelte
@@ -1,11 +1,13 @@
 <script lang="ts">
 	import type { WizardStep } from '@dfinity/gix-components';
-	import { getContext } from 'svelte';
+	import { createEventDispatcher, getContext } from 'svelte';
 	import BtcSendForm from '$btc/components/send/BtcSendForm.svelte';
 	import BtcSendProgress from '$btc/components/send/BtcSendProgress.svelte';
 	import BtcSendReview from '$btc/components/send/BtcSendReview.svelte';
 	import { SEND_CONTEXT_KEY, type SendContext } from '$icp-eth/stores/send.store';
 	import SendQrCodeScan from '$lib/components/send/SendQRCodeScan.svelte';
+	import ButtonBack from '$lib/components/ui/ButtonBack.svelte';
+	import ButtonCancel from '$lib/components/ui/ButtonCancel.svelte';
 	import {
 		btcAddressMainnet,
 		btcAddressRegtest,
@@ -21,6 +23,7 @@
 	export let destination = '';
 	export let amount: number | undefined = undefined;
 	export let sendProgressStep: string;
+	export let formCancelAction: 'back' | 'close' = 'close';
 
 	let source: string;
 	$: source =
@@ -32,6 +35,11 @@
 
 	const { sendToken } = getContext<SendContext>(SEND_CONTEXT_KEY);
 
+	const dispatch = createEventDispatcher();
+
+	const close = () => dispatch('icClose');
+	const back = () => dispatch('icSendBack');
+
 	// TODO: implement send function when related services are ready
 	const send = () => {};
 </script>
@@ -49,7 +57,15 @@
 		bind:networkId
 		on:icQRCodeScan
 		{source}
-	/>
+	>
+		<svelte:fragment slot="cancel">
+			{#if formCancelAction === 'back'}
+				<ButtonBack on:click={back} />
+			{:else}
+				<ButtonCancel on:click={close} />
+			{/if}
+		</svelte:fragment>
+	</BtcSendForm>
 {:else if currentStep?.name === WizardStepsSend.QR_CODE_SCAN}
 	<SendQrCodeScan
 		expectedToken={$sendToken}