feat(frontend): ConvertAmount component (#3632)

# Motivation

In this PR, except a new component, I also updated related prop types
according to the latest change from main.

Desktop:
<img width="492" alt="Screenshot 2024-11-18 at 10 58 41"
src="https://github.com/user-attachments/assets/e5a510bf-ce42-459c-bdc0-28236b69822c">

Mobile:
<img width="415" alt="Screenshot 2024-11-18 at 10 58 48"
src="https://github.com/user-attachments/assets/6182ec8f-dcf0-424f-9bcd-843d0bc331c7">

src/frontend/src/lib/components/convert/ConvertAmount.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import ConvertAmountDestination from '$lib/components/convert/ConvertAmountDestination.svelte';
+	import ConvertAmountSource from '$lib/components/convert/ConvertAmountSource.svelte';
+	import IconMoveDown from '$lib/components/icons/lucide/IconMoveDown.svelte';
+	import type { OptionAmount } from '$lib/types/send';
+
+	export let sendAmount: OptionAmount;
+	export let receiveAmount: number | undefined;
+	export let totalFee: bigint | undefined;
+	export let insufficientFunds: boolean;
+	export let insufficientFundsForFee: boolean;
+</script>
+
+<ConvertAmountSource
+	bind:sendAmount
+	bind:insufficientFunds
+	bind:insufficientFundsForFee
+	{totalFee}
+/>
+
+<div class="my-4 flex justify-center">
+	<div class="flex h-12 w-12 items-center justify-center rounded-full bg-secondary">
+		<IconMoveDown />
+	</div>
+</div>
+
+<ConvertAmountDestination bind:receiveAmount {sendAmount} {totalFee} {insufficientFunds} />

src/frontend/src/lib/components/convert/ConvertAmountDestination.svelte

@@ -7,10 +7,11 @@
 	import { ZERO } from '$lib/constants/app.constants';
 	import { CONVERT_CONTEXT_KEY, type ConvertContext } from '$lib/stores/convert.store';
 	import { i18n } from '$lib/stores/i18n.store';
+	import type { OptionAmount } from '$lib/types/send';
 	import { formatToken, formatTokenBigintToNumber, formatUSD } from '$lib/utils/format.utils';
 	import { parseToken } from '$lib/utils/parse.utils';
 
-	export let sendAmount: number | undefined = undefined;
+	export let sendAmount: OptionAmount = undefined;
 	export let receiveAmount: number | undefined = undefined;
 	export let insufficientFunds: boolean;
 	export let totalFee: bigint | undefined = undefined;

src/frontend/src/lib/components/convert/ConvertAmountSource.svelte

@@ -11,11 +11,12 @@
 	import { CONVERT_CONTEXT_KEY, type ConvertContext } from '$lib/stores/convert.store';
 	import { i18n } from '$lib/stores/i18n.store';
 	import type { ConvertAmountErrorType } from '$lib/types/convert';
+	import type { OptionAmount } from '$lib/types/send';
 	import { validateConvertAmount } from '$lib/utils/convert.utils';
 	import { formatToken, formatUSD } from '$lib/utils/format.utils';
 	import { getMaxTransactionAmount } from '$lib/utils/token.utils';
 
-	export let sendAmount: number | undefined = undefined;
+	export let sendAmount: OptionAmount = undefined;
 	export let totalFee: bigint | undefined;
 	export let insufficientFunds: boolean;
 	export let insufficientFundsForFee: boolean;
@@ -52,7 +53,7 @@
 	let convertAmountUSD: number;
 	$: convertAmountUSD =
 		nonNullish(sendAmount) && nonNullish($sourceTokenExchangeRate)
-			? sendAmount * $sourceTokenExchangeRate
+			? Number(sendAmount) * $sourceTokenExchangeRate
 			: 0;
 </script>
 

src/frontend/src/lib/components/convert/ConvertForm.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte';
+	import ConvertAmount from '$lib/components/convert/ConvertAmount.svelte';
+	import Button from '$lib/components/ui/Button.svelte';
+	import ButtonGroup from '$lib/components/ui/ButtonGroup.svelte';
+	import ContentWithToolbar from '$lib/components/ui/ContentWithToolbar.svelte';
+	import { i18n } from '$lib/stores/i18n.store';
+	import type { OptionAmount } from '$lib/types/send';
+
+	export let sendAmount: OptionAmount;
+	export let receiveAmount: number | undefined;
+	export let totalFee: bigint | undefined;
+	export let disabled: boolean;
+	export let insufficientFunds: boolean;
+	export let insufficientFundsForFee: boolean;
+
+	const dispatch = createEventDispatcher();
+</script>
+
+<ContentWithToolbar>
+	<ConvertAmount
+		bind:sendAmount
+		bind:receiveAmount
+		bind:insufficientFunds
+		bind:insufficientFundsForFee
+		{totalFee}
+	/>
+
+	<div class="mt-16 pb-5">
+		<slot name="message" />
+
+		<slot name="fee" />
+	</div>
+
+	<ButtonGroup slot="toolbar">
+		<slot name="cancel" />
+
+		<Button {disabled} on:click={() => dispatch('icNext')}>
+			{$i18n.convert.text.review_button}
+		</Button>
+	</ButtonGroup>
+</ContentWithToolbar>