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">
dfinity · Oct 30, 2024 · 92122d3 · 92122d3
1 parent d16e306
commit 92122d3
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 3 deletions.
diff --git a/src/frontend/src/btc/convert/ConvertToCkBTC.svelte 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
@@ -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,19 +20,24 @@
 		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;
 
 	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
@@ -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
@@ -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;