From c43d4fff3d96e9363ce7cc8a6284fd18053e236f Mon Sep 17 00:00:00 2001
From: David Dal Busco <david.dalbusco@outlook.com>
Date: Wed, 7 Jan 2026 13:04:53 +0100
Subject: [PATCH 1/2] feat(frontend): display an information link in the navbar
 wallet

---
 .../lib/components/core/NavbarWallet.svelte   | 22 +++++++++++++++++++
 src/frontend/src/lib/i18n/en.json             |  1 +
 src/frontend/src/lib/i18n/zh-cn.json          |  1 +
 src/frontend/src/lib/types/i18n.d.ts          |  1 +
 4 files changed, 25 insertions(+)

diff --git a/src/frontend/src/lib/components/core/NavbarWallet.svelte b/src/frontend/src/lib/components/core/NavbarWallet.svelte
index 183df6754..6d2df9adb 100644
--- a/src/frontend/src/lib/components/core/NavbarWallet.svelte
+++ b/src/frontend/src/lib/components/core/NavbarWallet.svelte
@@ -16,6 +16,7 @@
 	import { devHasIcp } from '$lib/derived/wallet/balance.derived';
 	import type { SelectedToken, SelectedWallet } from '$lib/schemas/wallet.schema';
 	import { i18n } from '$lib/stores/app/i18n.store';
+	import IconInfo from '$lib/components/icons/IconInfo.svelte';
 
 	let button: HTMLButtonElement | undefined = $state();
 	let visible: boolean = $state(false);
@@ -46,6 +47,16 @@
 
 <Popover anchor={button} direction="rtl" bind:visible>
 	<div class="container">
+		<div class="info">
+			<a
+				aria-label={$i18n.wallet.information}
+				href="https://juno.build/docs/miscellaneous/wallet"
+				rel="noreferrer noopener"
+				tabindex="-1"
+				target="_blank"><IconInfo size="20px" /></a
+			>
+		</div>
+
 		<div>
 			<WalletTotal />
 		</div>
@@ -112,4 +123,15 @@
 			width: fit-content;
 		}
 	}
+
+	.info {
+		display: flex;
+		justify-content: flex-end;
+
+		a {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+		}
+	}
 </style>
diff --git a/src/frontend/src/lib/i18n/en.json b/src/frontend/src/lib/i18n/en.json
index 6c33d8aa1..2e6fcf60a 100644
--- a/src/frontend/src/lib/i18n/en.json
+++ b/src/frontend/src/lib/i18n/en.json
@@ -359,6 +359,7 @@
 		"credits": "Credits",
 		"transfer_icp_info": "Learn how to provision your wallet in the",
 		"documentation": "documentation",
+		"information": "Learn about the wallet in the documentation",
 		"tx_id": "ID",
 		"tx_timestamp": "Timestamp",
 		"tx_from": "From",
diff --git a/src/frontend/src/lib/i18n/zh-cn.json b/src/frontend/src/lib/i18n/zh-cn.json
index 2ec14a113..14c343912 100644
--- a/src/frontend/src/lib/i18n/zh-cn.json
+++ b/src/frontend/src/lib/i18n/zh-cn.json
@@ -359,6 +359,7 @@
 		"credits": "积分",
 		"transfer_icp_info": "了解如何为您的钱包充值",
 		"documentation": "文档",
+		"information": "在文档中了解更多钱包信息",
 		"tx_id": "交易ID",
 		"tx_timestamp": "时间",
 		"tx_from": "发送方",
diff --git a/src/frontend/src/lib/types/i18n.d.ts b/src/frontend/src/lib/types/i18n.d.ts
index ec9deb146..42da6ebd7 100644
--- a/src/frontend/src/lib/types/i18n.d.ts
+++ b/src/frontend/src/lib/types/i18n.d.ts
@@ -369,6 +369,7 @@ interface I18nWallet {
 	credits: string;
 	transfer_icp_info: string;
 	documentation: string;
+	information: string;
 	tx_id: string;
 	tx_timestamp: string;
 	tx_from: string;

From 81ee9739a8b1175b9fd41a3165f4ee42a1e51f50 Mon Sep 17 00:00:00 2001
From: David Dal Busco <david.dalbusco@outlook.com>
Date: Wed, 7 Jan 2026 13:06:12 +0100
Subject: [PATCH 2/2] chore: lint

---
 src/frontend/src/lib/components/core/NavbarWallet.svelte | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/frontend/src/lib/components/core/NavbarWallet.svelte b/src/frontend/src/lib/components/core/NavbarWallet.svelte
index 6d2df9adb..440628796 100644
--- a/src/frontend/src/lib/components/core/NavbarWallet.svelte
+++ b/src/frontend/src/lib/components/core/NavbarWallet.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { nonNullish } from '@dfinity/utils';
+	import IconInfo from '$lib/components/icons/IconInfo.svelte';
 	import IconWallet from '$lib/components/icons/IconWallet.svelte';
 	import ButtonIcon from '$lib/components/ui/ButtonIcon.svelte';
-	import Hr from '$lib/components/ui/Hr.svelte';
 	import Popover from '$lib/components/ui/Popover.svelte';
 	import WalletActions from '$lib/components/wallet/WalletActions.svelte';
 	import WalletPicker from '$lib/components/wallet/WalletPicker.svelte';
@@ -16,7 +16,6 @@
 	import { devHasIcp } from '$lib/derived/wallet/balance.derived';
 	import type { SelectedToken, SelectedWallet } from '$lib/schemas/wallet.schema';
 	import { i18n } from '$lib/stores/app/i18n.store';
-	import IconInfo from '$lib/components/icons/IconInfo.svelte';
 
 	let button: HTMLButtonElement | undefined = $state();
 	let visible: boolean = $state(false);