feat(frontend): add info box in activity page

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);