feat(frontend): add info box in activity page (#3548)

# Motivation

We include an info box in the activity page to warn about third-parties
on BTC transactions.

My understanding of the requirements is that we always show it,
independently of having or not BTC transactions, hence there is no logic
to show it or not.

![Screenshot 2024-11-14 at 11 00
17](https://github.com/user-attachments/assets/c998a0b0-eb10-42cb-a7a3-48c7c95e6337)
![Screenshot 2024-11-14 at 11 00
43](https://github.com/user-attachments/assets/bfef081d-14ac-4b24-b28c-29652d6fc766)
![Screenshot 2024-11-14 at 11 00
49](https://github.com/user-attachments/assets/3a194ae5-e37a-45d0-82cf-0a32ca0422f9)

---------

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

src/frontend/src/lib/components/transactions/AllTransactions.svelte

@@ -1,9 +1,16 @@
 <script lang="ts">
 	import AllTransactionsList from '$lib/components/transactions/AllTransactionsList.svelte';
+	import MessageBox from '$lib/components/ui/MessageBox.svelte';
 	import PageTitle from '$lib/components/ui/PageTitle.svelte';
 	import { i18n } from '$lib/stores/i18n.store';
 </script>
 
-<PageTitle>{$i18n.activity.text.title}</PageTitle>
+<div class="flex flex-col gap-5">
+	<PageTitle>{$i18n.activity.text.title}</PageTitle>
 
-<AllTransactionsList />
+	<MessageBox level="plain">
+		{$i18n.activity.info.btc_transactions}
+	</MessageBox>
+
+	<AllTransactionsList />
+</div>

src/frontend/src/lib/components/ui/MessageBox.svelte

@@ -1,18 +1,19 @@
 <script lang="ts">
 	import IconInfo from '$lib/components/icons/lucide/IconInfo.svelte';
 
-	export let level: 'info' | 'light-warning' | 'error' = 'info';
+	export let level: 'plain' | 'info' | 'light-warning' | 'error' = 'info';
 </script>
 
 <div
 	class="mb-4 flex items-start gap-4 rounded-xl px-4 py-3 text-sm font-medium sm:text-base"
+	class:bg-primary={level === 'plain'}
 	class:bg-brand-subtle-alt={level === 'info'}
 	class:bg-warning-subtle={level === 'light-warning'}
 	class:bg-error-subtle-alt={level === 'error'}
 >
 	<div
 		class="min-w-5 py-0 sm:py-0.5"
-		class:text-brand-primary={level === 'info'}
+		class:text-brand-primary={level === 'plain' || level === 'info'}
 		class:text-warning={level === 'light-warning'}
 		class:text-error={level === 'error'}
 	>

src/frontend/src/lib/i18n/en.json

@@ -796,6 +796,9 @@
 	"activity": {
 		"text": {
 			"title": "Recent Activity"
+		},
+		"info": {
+			"btc_transactions": "BTC transaction information is obtained from central third parties and should be independently verified."
 		}
 	}
 }

src/frontend/src/lib/types/i18n.d.ts

@@ -693,6 +693,7 @@ interface I18nLicense_agreement {
 
 interface I18nActivity {
 	text: { title: string };
+	info: { btc_transactions: string };
 }
 
 interface I18n {

src/frontend/src/tests/lib/components/transactions/AllTransactions.spec.ts

@@ -15,6 +15,12 @@ describe('Activity', () => {
 		expect(title.textContent).toBe(en.activity.text.title);
 	});
 
+	it('renders the info box list', () => {
+		const { getByText } = render(AllTransactions);
+
+		expect(getByText(en.activity.info.btc_transactions)).toBeInTheDocument();
+	});
+
 	it('renders the transactions list', () => {
 		const { getByText } = render(AllTransactions);