update bloodchart compact number

src/components/BloodChart.vue

@@ -72,8 +72,13 @@
 					</div>
 				</div>
 				<div class="blood-chart-element-footer">
-					<div class="blood-chart-amount">
+					<div
-						{{ formatNumber(coin.amountInBLD, 10n ** tokenStore.memeToken.decimals) }}
+						class="blood-chart-amount"
+						:title="formatBigIntDivision(coin.amountInBLD, 10n ** tokenStore.memeToken.decimals)"
+					>
+						{{
+							compactNumber(formatBigIntDivision(coin.amountInBLD, 10n ** tokenStore.memeToken.decimals))
+						}}
 					</div>
 					<div>$BLOOD</div>
 				</div>
@@ -96,7 +101,7 @@
 
 <script setup>
 import { computed, ref, inject, onMounted } from "vue";
-import { getPercentage, formatNumber } from "@/helper/helper.js";
+import { getPercentage, formatNumber, compactNumber, formatBigIntDivision } from "@/helper/helper.js";
 import { useCycleStore } from "@/stores/cycles";
 
 import { useMemeburnerStore } from "@/stores/memeburner";

src/components/ConnectWallet.vue

@@ -36,7 +36,7 @@
 				<div class="connected-header-avatar">
 					<img :src="getblocky(walletStore.address)" alt="avatar" />
 				</div>
-				<div class="connected-header-address">
+				<div class="connected-header-address" :title="walletStore.address">
 					{{ getAddressShortName(walletStore.address) }}
 				</div>
 				<div class="connected-header-logout" @click="disconnectWallet">

src/helper/helper.js

@@ -3,6 +3,13 @@ export function getPercentage(amount, goal) {
     return ((Number(amount) / Number(goal)) * 100).toFixed(2);
 }
 
+export function compactNumber(number) {
+	return Intl.NumberFormat("en-US", {
+		notation: "compact",
+		maximumFractionDigits: 2,
+	}).format(number);
+}
+
 
 export function formatNumber(nominator, denominator) {
     let number = formatBigIntDivision(nominator, denominator);