style(frontend): receive addresses conditionally render with or witho…

…ut text slot (#4044)

# Motivation
#3917 introduced a styling
bug.

The problem with the current approach is, that if we always pass a slot,
this will cause the subcomponent ReceiveAddress to render the p element
(even if the slot is empty)

# Changes

conditionally rendering with or without text slot depending of presence
of a text.

# Tests

E2E tests were failing before.

before (too much spacing below the label)


![image](https://github.com/user-attachments/assets/d501e55f-e1de-4caa-9559-25b3368d783e)


after


![image](https://github.com/user-attachments/assets/15301209-23f0-4dfc-a2ff-03596c1b6ecf)

---------

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>

src/frontend/src/lib/components/receive/ReceiveAddresses.svelte

@@ -61,10 +61,18 @@
 		qrCodeAriaLabel: string;
 		text?: string;
 		condition?: boolean;
+		on: {
+			click: () => void;
+		};
+		qrCodeAction: {
+			enabled: true;
+			testId: typeof RECEIVE_TOKENS_MODAL_QR_CODE_BUTTON;
+			ariaLabel: string;
+		};
 	}
 
-	let receiveAddressList: ReceiveAddressProps[];
-	$: receiveAddressList = [
+	let receiveAddressCoreList: Omit<ReceiveAddressProps, 'qrCodeAction' | 'on'>[];
+	$: receiveAddressCoreList = [
 		{
 			labelRef: 'btcAddressMainnet',
 			address: $btcAddressMainnet,
@@ -136,38 +144,78 @@
 			qrCodeAriaLabel: $i18n.receive.icp.text.display_icp_account_qr
 		}
 	];
+
+	let receiveAddressList: Omit<ReceiveAddressProps, 'token' | 'qrCodeAriaLabel' | 'label'>[];
+	$: receiveAddressList = receiveAddressCoreList.map(
+		({
+			address,
+			token: addressToken,
+			qrCodeAriaLabel,
+			label: addressLabel,
+			copyAriaLabel,
+			labelRef,
+			network,
+			testId,
+			title,
+			text,
+			condition
+		}) => ({
+			labelRef,
+			address,
+			network,
+			testId,
+			copyAriaLabel,
+			title,
+			text,
+			condition,
+			qrCodeAction: {
+				enabled: true,
+				testId: RECEIVE_TOKENS_MODAL_QR_CODE_BUTTON,
+				ariaLabel: qrCodeAriaLabel
+			},
+			on: {
+				click: () =>
+					displayQRCode({
+						address: address ?? '',
+						addressLabel,
+						addressToken,
+						copyAriaLabel
+					})
+			}
+		})
+	);
 </script>
 
 <ContentWithToolbar>
 	<div class="flex flex-col gap-2">
-		{#each receiveAddressList as { labelRef, address, network, token: addressToken, testId, title, label: addressLabel, copyAriaLabel, qrCodeAriaLabel, text, condition } (labelRef)}
+		{#each receiveAddressList as { title, text, condition, on, labelRef, address, network, testId, copyAriaLabel, qrCodeAction } (labelRef)}
 			{#if condition !== false}
-				<ReceiveAddress
-					{labelRef}
-					on:click={() =>
-						displayQRCode({
-							address: address ?? '',
-							addressLabel,
-							addressToken,
-							copyAriaLabel
-						})}
-					{address}
-					{network}
-					qrCodeAction={{
-						enabled: true,
-						testId: RECEIVE_TOKENS_MODAL_QR_CODE_BUTTON,
-						ariaLabel: qrCodeAriaLabel
-					}}
-					{copyAriaLabel}
-					{testId}
-				>
-					<svelte:fragment slot="title">{title}</svelte:fragment>
-					<svelte:fragment slot="text">
-						{#if nonNullish(text)}
-							<span class="text-sm text-black">{text}</span>
-						{/if}
-					</svelte:fragment>
-				</ReceiveAddress>
+				{#if nonNullish(text)}
+					<ReceiveAddress
+						on:click={on.click}
+						{labelRef}
+						{address}
+						{network}
+						{testId}
+						{copyAriaLabel}
+						{qrCodeAction}
+					>
+						<svelte:fragment slot="title">{title}</svelte:fragment>
+						<span slot="text" class="text-sm text-black">{text}</span>
+					</ReceiveAddress>
+				{:else}
+					<ReceiveAddress
+						on:click={on.click}
+						{labelRef}
+						{address}
+						{network}
+						{testId}
+						{copyAriaLabel}
+						{qrCodeAction}
+					>
+						<svelte:fragment slot="title">{title}</svelte:fragment>
+					</ReceiveAddress>
+				{/if}
 			{/if}
 		{/each}
 	</div>