From 82da98c8386a48169d64e94e8320f0d1187790af Mon Sep 17 00:00:00 2001
From: Antonio Ventilii <antonio.ventilii@dfinity.org>
Date: Thu, 14 Nov 2024 11:02:13 +0100
Subject: [PATCH] feat(frontend): add info box in activity page

---
 .../src/lib/components/transactions/AllTransactions.svelte | 7 +++++++
 src/frontend/src/lib/components/ui/MessageBox.svelte       | 5 +++--
 src/frontend/src/lib/i18n/en.json                          | 3 +++
 src/frontend/src/lib/types/i18n.d.ts                       | 1 +
 .../lib/components/transactions/AllTransactions.spec.ts    | 6 ++++++
 5 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/lib/components/transactions/AllTransactions.svelte b/src/frontend/src/lib/components/transactions/AllTransactions.svelte
index 527cb4703e..6e55122358 100644
--- a/src/frontend/src/lib/components/transactions/AllTransactions.svelte
+++ b/src/frontend/src/lib/components/transactions/AllTransactions.svelte
@@ -2,8 +2,15 @@
 	import AllTransactionsList from '$lib/components/transactions/AllTransactionsList.svelte';
 	import PageTitle from '$lib/components/ui/PageTitle.svelte';
 	import { i18n } from '$lib/stores/i18n.store';
+	import MessageBox from '$lib/components/ui/MessageBox.svelte';
 </script>
 
+<div class="flex flex-col gap-5">
 <PageTitle>{$i18n.activity.text.title}</PageTitle>
 
+<MessageBox level="plain">
+	{$i18n.activity.info.btc_transactions}
+</MessageBox>
+
 <AllTransactionsList />
+</div>
diff --git a/src/frontend/src/lib/components/ui/MessageBox.svelte b/src/frontend/src/lib/components/ui/MessageBox.svelte
index ed317ec62b..5a5acdbdfa 100644
--- a/src/frontend/src/lib/components/ui/MessageBox.svelte
+++ b/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'}
 	>
diff --git a/src/frontend/src/lib/i18n/en.json b/src/frontend/src/lib/i18n/en.json
index 0e9d54a5a4..cc6050e110 100644
--- a/src/frontend/src/lib/i18n/en.json
+++ b/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."
 		}
 	}
 }
diff --git a/src/frontend/src/lib/types/i18n.d.ts b/src/frontend/src/lib/types/i18n.d.ts
index ed20ab90e3..c9eff6a397 100644
--- a/src/frontend/src/lib/types/i18n.d.ts
+++ b/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 {
diff --git a/src/frontend/src/tests/lib/components/transactions/AllTransactions.spec.ts b/src/frontend/src/tests/lib/components/transactions/AllTransactions.spec.ts
index a590edfc20..ce7b8f7405 100644
--- a/src/frontend/src/tests/lib/components/transactions/AllTransactions.spec.ts
+++ b/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);