feat(frontend): add an info link in the navbar wallet (#2482)

* feat(frontend): display an information link in the navbar wallet

* chore: lint

Author: peterpeterparker

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';
@@ -46,6 +46,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 +122,15 @@
 			width: fit-content;
 		}
 	}
+
+	.info {
+		display: flex;
+		justify-content: flex-end;
+
+		a {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+		}
+	}
 </style>

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",

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": "发送方",

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;