Merge branch 'main' into refactor(frontend)/Extract-Button-that-repre…

…sents-Next-action

.env.example

@@ -6,10 +6,14 @@ VITE_ALCHEMY_API_KEY=
 VITE_WALLET_CONNECT_PROJECT_ID=
 VITE_OISY_URL=https://oisy.com
 VITE_COINGECKO_API_URL=https://api.coingecko.com/api/v3
+VITE_COINGECKO_API_KEY=
 VITE_BLOCKCHAIN_API_URL=https://blockchain.info
 VITE_EXCHANGE_DISABLED=true
-VITE_COINGECKO_API_KEY=
 VITE_JUNO_SATELLITE_ID=
 VITE_JUNO_ORBITER_ID=
+VITE_POUH_ENABLED=false
+VITE_AUTH_ALTERNATIVE_ORIGINS=
+VITE_AUTH_DERIVATION_ORIGIN=
 VITE_ONRAMPER_API_KEY_DEV=pk_test_
 VITE_ONRAMPER_API_KEY_PROD=pk_prod_
+VITE_NETWORK_BITCOIN_ENABLED=false

src/frontend/src/btc/components/core/BtcWalletAddress.svelte

@@ -1,15 +1,19 @@
 <script lang="ts">
 	import Copy from '$lib/components/ui/Copy.svelte';
-	import { btcAddressMainnet, btcAddressTestnet } from '$lib/derived/address.derived';
+	import {
+		btcAddressMainnet,
+		btcAddressTestnet,
+		btcAddressRegtest
+	} from '$lib/derived/address.derived';
 	import { networkId } from '$lib/derived/network.derived';
 	import { i18n } from '$lib/stores/i18n.store';
 	import { shortenWithMiddleEllipsis } from '$lib/utils/format.utils';
 	import { isNetworkIdBTCRegtest, isNetworkIdBTCTestnet } from '$lib/utils/network.utils';
 
-	// Regtest and Testnet BTC wallets have the same address
-	const address =
-		isNetworkIdBTCTestnet($networkId) || isNetworkIdBTCRegtest($networkId)
-			? $btcAddressTestnet
+	const address = isNetworkIdBTCTestnet($networkId)
+		? $btcAddressTestnet
+		: isNetworkIdBTCRegtest($networkId)
+			? $btcAddressRegtest
 			: $btcAddressMainnet;
 </script>
 

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

@@ -29,7 +29,7 @@
 	});
 </script>
 
-<SendForm {source} token={$token} balance={$balance}>
+<SendForm on:icNext {source} token={$token} balance={$balance}>
 	<BtcSendDestination
 		slot="destination"
 		bind:destination

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}

src/frontend/src/lib/canisters/signer.canister.ts

@@ -7,11 +7,16 @@ import type {
 import { idlFactory as idlCertifiedFactorySigner } from '$declarations/signer/signer.factory.certified.did';
 import { idlFactory as idlFactorySigner } from '$declarations/signer/signer.factory.did';
 import { getAgent } from '$lib/actors/agents.ic';
+import { BACKEND_CANISTER_PRINCIPAL } from '$lib/constants/app.constants';
 import type { BtcAddress, EthAddress } from '$lib/types/address';
 import type { SendBtcParams } from '$lib/types/api';
 import type { CreateCanisterOptions } from '$lib/types/canister';
 import { Canister, createServices } from '@dfinity/utils';
-import { mapSignerCanisterBtcError, mapSignerCanisterSendBtcError } from './signer.errors';
+import {
+	mapSignerCanisterBtcError,
+	mapSignerCanisterGetEthAddressError,
+	mapSignerCanisterSendBtcError
+} from './signer.errors';
 
 export class SignerCanister extends Canister<SignerService> {
 	static async create({
@@ -60,12 +65,30 @@ export class SignerCanister extends Canister<SignerService> {
 		return response.Ok.balance;
 	};
 
-	getEthAddress = (): Promise<EthAddress> => {
-		const { caller_eth_address } = this.caller({
+	getEthAddress = async (): Promise<EthAddress> => {
+		const { eth_address } = this.caller({
 			certified: true
 		});
 
-		return caller_eth_address();
+		/* Note: `eth_address` gets the Ethereum address of a given principal, defaulting to the caller if not provided. */
+		const response = await eth_address({ principal: [] }, [
+			{
+				PatronPaysIcrc2Cycles: {
+					owner: BACKEND_CANISTER_PRINCIPAL,
+					subaccount: []
+				}
+			}
+		]);
+
+		if ('Err' in response) {
+			throw mapSignerCanisterGetEthAddressError(response.Err);
+		}
+
+		const {
+			Ok: { address }
+		} = response;
+
+		return address;
 	};
 
 	signTransaction = ({ transaction }: { transaction: SignRequest }): Promise<string> => {

src/frontend/src/lib/canisters/signer.errors.ts

@@ -1,4 +1,5 @@
 import type {
+	EthAddressError,
 	PaymentError,
 	GetAddressError as SignerCanisterBtcError,
 	SendBtcError as SignerCanisterSendBtcError
@@ -49,3 +50,18 @@ export const mapSignerCanisterSendBtcError = (
 	}
 	return new CanisterInternalError('Unknown SignerCanisterSendBtcError');
 };
+
+export const mapSignerCanisterGetEthAddressError = (
+	err: EthAddressError
+): CanisterInternalError => {
+	if ('SigningError' in err) {
+		const [code, addOns] = err.SigningError;
+		return new CanisterInternalError(`Signing error: ${JSON.stringify(code)} ${addOns}`);
+	}
+
+	if ('PaymentError' in err) {
+		return new SignerCanisterPaymentError(err.PaymentError);
+	}
+
+	return new CanisterInternalError('Unknown GenericSigningError');
+};

src/frontend/src/lib/components/core/Back.svelte

@@ -6,6 +6,8 @@
 	import { i18n } from '$lib/stores/i18n.store';
 	import { back } from '$lib/utils/nav.utils';
 
+	export let color: 'primary' | 'current' = 'primary';
+
 	let fromRoute: NavigationTarget | null;
 
 	afterNavigate(({ from }) => {
@@ -14,7 +16,7 @@
 </script>
 
 <button
-	class="text-primary pointer-events-auto flex gap-0.5 font-bold"
+	class={`text-${color} pointer-events-auto flex gap-0.5 font-bold`}
 	on:click={async () => back({ pop: nonNullish(fromRoute) })}
 	><IconBack /> {$i18n.core.text.back}</button
 >

src/frontend/src/lib/components/core/Erc20Icp.svelte

@@ -8,7 +8,7 @@
 	href={ERC20_ICP_REPO_URL}
 	rel="external noopener noreferrer"
 	target="_blank"
-	class="inline-flex items-center gap-2 pb-3 pt-1 text-center text-xs font-bold no-underline md:text-base"
+	class="inline-flex items-center gap-2 pb-3 pt-6 text-center text-xs font-bold no-underline md:text-base"
 >
 	<IconInfo />
 	<span class="pl-1">{$i18n.hero.text.learn_more_about_erc20_icp}</span>
@@ -18,7 +18,7 @@
 	@use '../../styles/mixins/media';
 
 	a {
-		color: var(--alpha-color, var(--color-misty-rose));
+		color: var(--color-white);
 		margin: 0 auto;
 
 		:global(svg) {

src/frontend/src/lib/components/exchange/ExchangeBalance.svelte

@@ -1,14 +1,15 @@
 <script lang="ts">
 	import { exchangeInitialized } from '$lib/derived/exchange.derived';
 	import { combinedDerivedSortedNetworkTokensUi } from '$lib/derived/network-tokens.derived';
+	import { i18n } from '$lib/stores/i18n.store';
 	import { formatUSD } from '$lib/utils/format.utils';
 	import { sumTokensUiUsdBalance } from '$lib/utils/tokens.utils';
 
 	let totalUsd: number;
 	$: totalUsd = sumTokensUiUsdBalance($combinedDerivedSortedNetworkTokensUi);
 </script>
 
-<span class="block">
+<span class="flex flex-col gap-2">
 	<output
 		class={`break-all text-5xl font-bold ${totalUsd === 0 ? 'opacity-50' : 'opacity-100'} mt-8 inline-block`}
 	>
@@ -18,4 +19,7 @@
 			<span class="animate-pulse">{formatUSD({ value: 0 })}</span>
 		{/if}
 	</output>
+	<span class="text-xl font-medium text-onahau">
+		{$i18n.hero.text.available_balance}
+	</span>
 </span>

src/frontend/src/lib/components/hero/HeroContent.svelte

@@ -25,55 +25,60 @@
 	$: displayTokenSymbol = summary && $erc20UserTokensInitialized;
 </script>
 
-{#if summary}
-	<div
-		transition:slide={{ delay: 0, duration: 250, easing: quintOut, axis: 'y' }}
-		class="grid w-full grid-cols-[1fr_auto_1fr] flex-row items-start justify-between"
-	>
-		{#if back}
-			<Back />
-		{/if}
+<div
+	class="flex h-full w-full flex-col content-center items-center justify-center rounded-[40px] bg-blue-ribbon p-6 text-center text-white"
+>
+	{#if summary}
+		<div
+			transition:slide={{ delay: 0, duration: 250, easing: quintOut, axis: 'y' }}
+			class="grid w-full grid-cols-[1fr_auto_1fr] flex-row items-start justify-between"
+		>
+			{#if back}
+				<Back color="current" />
+			{/if}
 
-		<div>
-			<div class="icon mb-0.5 flex items-center justify-center pt-2">
-				{#if displayTokenSymbol && nonNullish($token)}
-					<div in:fade>
-						<Logo
-							src={$token.icon}
-							size="big"
-							alt={replacePlaceholders($i18n.core.alt.logo, { $name: $token.name })}
-						/>
-					</div>
-				{:else}
-					<SkeletonLogo size="big" />
-				{/if}
+			<div>
+				<div class="icon mb-0.5 flex items-center justify-center pt-2">
+					{#if displayTokenSymbol && nonNullish($token)}
+						<div in:fade>
+							<Logo
+								src={$token.icon}
+								size="big"
+								alt={replacePlaceholders($i18n.core.alt.logo, { $name: $token.name })}
+								ring
+							/>
+						</div>
+					{:else}
+						<SkeletonLogo size="big" />
+					{/if}
+				</div>
+
+				<Balance />
 			</div>
 
-			<Balance />
+			<ContextMenu />
 		</div>
+	{/if}
 
-		<ContextMenu />
-	</div>
-{/if}
-
-{#if usdTotal}
-	<div transition:slide={{ delay: 0, duration: 250, easing: quintOut, axis: 'y' }}>
-		<ExchangeBalance />
-	</div>
-{/if}
+	{#if usdTotal}
+		<div transition:slide={{ delay: 0, duration: 250, easing: quintOut, axis: 'y' }}>
+			<ExchangeBalance />
+		</div>
+	{/if}
 
-{#if actions}
-	<div
-		transition:slide={{ delay: 0, duration: 250, easing: quintOut, axis: 'y' }}
-		class="flex w-full justify-center"
-	>
-		<Actions />
-	</div>
-{/if}
+	{#if actions}
+		<div
+			transition:slide={{ delay: 0, duration: 250, easing: quintOut, axis: 'y' }}
+			class="flex w-full justify-center"
+		>
+			<Actions />
+		</div>
+	{/if}
 
-{#if isErc20Icp($token)}
-	<Erc20Icp />
-{/if}
+	{#if isErc20Icp($token)}
+		<Erc20Icp />
+	{/if}
+</div>
 
 <style lang="scss">
 	.icon {

src/frontend/src/lib/components/send/SendWizard.svelte

@@ -1,13 +1,18 @@
 <script lang="ts">
 	import { type WizardStep } from '@dfinity/gix-components';
+	import BtcSendTokenWizard from '$btc/components/send/BtcSendTokenWizard.svelte';
 	import EthSendTokenWizard from '$eth/components/send/EthSendTokenWizard.svelte';
 	import SendTokenContext from '$eth/components/send/SendTokenContext.svelte';
 	import { selectedEthereumNetwork } from '$eth/derived/network.derived';
 	import { ethereumToken } from '$eth/derived/token.derived';
 	import IcSendTokenWizard from '$icp/components/send/IcSendTokenWizard.svelte';
 	import { token } from '$lib/stores/token.store';
 	import type { Network, NetworkId } from '$lib/types/network';
-	import { isNetworkIdEthereum, isNetworkIdICP } from '$lib/utils/network.utils';
+	import {
+		isNetworkIdEthereum,
+		isNetworkIdICP,
+		isNetworkIdBitcoin
+	} from '$lib/utils/network.utils';
 
 	export let source: string;
 	export let destination: string;
@@ -52,6 +57,21 @@
 			on:icQRCodeScan
 			on:icQRCodeBack
 		/>
+	{:else if isNetworkIdBitcoin($token?.network.id)}
+		<BtcSendTokenWizard
+			{currentStep}
+			{formCancelAction}
+			bind:destination
+			bind:networkId
+			bind:amount
+			bind:sendProgressStep
+			on:icBack
+			on:icNext
+			on:icClose
+			on:icSendBack
+			on:icQRCodeScan
+			on:icQRCodeBack
+		/>
 	{:else}
 		<slot />
 	{/if}

src/frontend/src/lib/components/tokens/TokenMenu.svelte

@@ -34,7 +34,7 @@
 </script>
 
 <button
-	class="text-primary pointer-events-auto ml-auto flex gap-0.5 font-bold"
+	class="pointer-events-auto ml-auto flex gap-0.5 font-bold"
 	bind:this={button}
 	on:click={() => (visible = true)}
 	aria-label={$i18n.tokens.alt.context_menu}