From 92122d36be3948581a0aabc54d0c5c00b40c3628 Mon Sep 17 00:00:00 2001
From: Denys Karmazyn <denys.karmazyn@dfinity.org>
Date: Wed, 30 Oct 2024 10:09:19 +0100
Subject: [PATCH] feat(frontend): convert to ckBTC button for BTC mainnet
 (#3215)

# Motivation

Add the convert-to-ckBTC button for BTC mainnet transactions page.

<img width="1570" alt="Screenshot 2024-10-29 at 15 40 31"
src="https://github.com/user-attachments/assets/7cd545eb-4c03-48da-bb0c-70e87ccb3053">
---
 .../src/btc/convert/ConvertToCkBTC.svelte       | 12 ++++++++++++
 .../src/lib/components/hero/Actions.svelte      | 17 ++++++++++++++---
 src/frontend/src/lib/i18n/en.json               |  1 +
 src/frontend/src/lib/types/i18n.d.ts            |  1 +
 4 files changed, 28 insertions(+), 3 deletions(-)
 create mode 100644 src/frontend/src/btc/convert/ConvertToCkBTC.svelte

diff --git a/src/frontend/src/btc/convert/ConvertToCkBTC.svelte b/src/frontend/src/btc/convert/ConvertToCkBTC.svelte
new file mode 100644
index 0000000000..c509dfc8b1
--- /dev/null
+++ b/src/frontend/src/btc/convert/ConvertToCkBTC.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { BTC_MAINNET_TOKEN } from '$env/tokens.btc.env';
+	import IconCkConvert from '$lib/components/icons/IconCkConvert.svelte';
+	import ButtonHero from '$lib/components/ui/ButtonHero.svelte';
+	import { isBusy } from '$lib/derived/busy.derived';
+	import { i18n } from '$lib/stores/i18n.store';
+</script>
+
+<ButtonHero disabled={$isBusy} ariaLabel={$i18n.convert.text.convert_to_ckbtc}>
+	<IconCkConvert size="28" slot="icon" />
+	<span>{BTC_MAINNET_TOKEN.twinTokenSymbol}</span>
+</ButtonHero>
diff --git a/src/frontend/src/lib/components/hero/Actions.svelte b/src/frontend/src/lib/components/hero/Actions.svelte
index de013cbc75..8ec446bf20 100644
--- a/src/frontend/src/lib/components/hero/Actions.svelte
+++ b/src/frontend/src/lib/components/hero/Actions.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
 	import { page } from '$app/stores';
 	import BtcReceive from '$btc/components/receive/BtcReceive.svelte';
+	import ConvertToCkBTC from '$btc/convert/ConvertToCkBTC.svelte';
+	import { BTC_TO_CKBTC_EXCHANGE_ENABLED } from '$env/networks.btc.env';
 	import EthReceive from '$eth/components/receive/EthReceive.svelte';
 	import ConvertToCkERC20 from '$eth/components/send/ConvertToCkERC20.svelte';
 	import ConvertToCkETH from '$eth/components/send/ConvertToCkETH.svelte';
@@ -18,10 +20,12 @@
 		networkEthereum,
 		networkICP,
 		networkBitcoin,
-		pseudoNetworkChainFusion
+		pseudoNetworkChainFusion,
+		networkId
 	} from '$lib/derived/network.derived';
 	import { tokenWithFallback } from '$lib/derived/token.derived';
 	import { isRouteTransactions } from '$lib/utils/nav.utils';
+	import { isNetworkIdBTCMainnet } from '$lib/utils/network.utils';
 
 	let convertEth = false;
 	$: convertEth = $ethToCkETHEnabled && $erc20UserTokensInitialized;
@@ -29,8 +33,11 @@
 	let convertErc20 = false;
 	$: convertErc20 = $erc20ToCkErc20Enabled && $erc20UserTokensInitialized;
 
+	let convertCkBtc = false;
+	$: convertCkBtc = $tokenCkBtcLedger && $erc20UserTokensInitialized;
+
 	let convertBtc = false;
-	$: convertBtc = $tokenCkBtcLedger && $erc20UserTokensInitialized;
+	$: convertBtc = BTC_TO_CKBTC_EXCHANGE_ENABLED && isNetworkIdBTCMainnet($networkId);
 
 	let isTransactionsPage = false;
 	$: isTransactionsPage = isRouteTransactions($page);
@@ -67,9 +74,13 @@
 				{/if}
 			{/if}
 
-			{#if convertBtc}
+			{#if convertCkBtc}
 				<ConvertToBTC />
 			{/if}
+
+			{#if convertBtc}
+				<ConvertToCkBTC />
+			{/if}
 		{/if}
 
 		<Buy />
diff --git a/src/frontend/src/lib/i18n/en.json b/src/frontend/src/lib/i18n/en.json
index 926eb3f70f..1c1c24f1b0 100644
--- a/src/frontend/src/lib/i18n/en.json
+++ b/src/frontend/src/lib/i18n/en.json
@@ -364,6 +364,7 @@
 		"text": {
 			"converting": "Converting...",
 			"convert_to_btc": "Convert to BTC",
+			"convert_to_ckbtc": "Convert to ckBTC",
 			"convert_to_token": "Convert to $token",
 			"convert_to_cketh": "Convert to ckETH",
 			"convert_to_ckerc20": "Convert to $ckErc20",
diff --git a/src/frontend/src/lib/types/i18n.d.ts b/src/frontend/src/lib/types/i18n.d.ts
index 219972a30e..d0b707957f 100644
--- a/src/frontend/src/lib/types/i18n.d.ts
+++ b/src/frontend/src/lib/types/i18n.d.ts
@@ -330,6 +330,7 @@ interface I18nConvert {
 	text: {
 		converting: string;
 		convert_to_btc: string;
+		convert_to_ckbtc: string;
 		convert_to_token: string;
 		convert_to_cketh: string;
 		convert_to_ckerc20: string;